btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: tooltip position on containers with overflow

Browse Source
This commit is contained in:
liyasthomas
2021-09-08 15:22:38 +05:30
parent 2cf55cbb96
commit c3e881ed77
4 changed files with 86 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/http/Request.vue
View File

@@ -1,5 +1,17 @@
<template> <template>
<div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky"> <div
class="
bg-primary
flex
space-x-2
p-4
top-0
z-10
sticky
overflow-x-auto
hide-scrollbar
"
>
<div class="flex flex-1"> <div class="flex flex-1">
<div class="flex relative"> <div class="flex relative">
<label for="method"> <label for="method">
@@ -57,6 +69,7 @@
flex-1 flex-1
rounded-r rounded-r
text-secondaryDark text-secondaryDark
min-w-32
py-1 py-1
px-4 px-4
hover:border-dividerDark hover:border-dividerDark
@@ -77,6 +90,7 @@
flex flex
text-secondaryDark text-secondaryDark
w-full w-full
min-w-32
py-2 py-2
px-4 px-4
hover:border-dividerDark hover:border-dividerDark

122
package-lock.json generated
View File

@@ -40,7 +40,7 @@
"vue-functional-data-merge": "^3.1.0", "vue-functional-data-merge": "^3.1.0",
"vue-github-button": "^1.3.0", "vue-github-button": "^1.3.0",
"vue-textarea-autosize": "^1.1.1", "vue-textarea-autosize": "^1.1.1",
"vue-tippy": "^4.10.2", "vue-tippy": "^4.11.0",
"vuejs-auto-complete": "^0.9.0", "vuejs-auto-complete": "^0.9.0",
"yargs-parser": "^20.2.9" "yargs-parser": "^20.2.9"
}, },
@@ -63,7 +63,7 @@
"@types/cookie": "^0.4.1", "@types/cookie": "^0.4.1",
"@types/lodash": "^4.14.172", "@types/lodash": "^4.14.172",
"@types/splitpanes": "^2.2.1", "@types/splitpanes": "^2.2.1",
"@vue/runtime-dom": "^3.2.9", "@vue/runtime-dom": "^3.2.10",
"@vue/test-utils": "^1.2.2", "@vue/test-utils": "^1.2.2",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.1.0", "babel-jest": "^27.1.0",
@@ -87,7 +87,7 @@
"stylelint-config-standard": "^22.0.0", "stylelint-config-standard": "^22.0.0",
"ts-jest": "^27.0.5", "ts-jest": "^27.0.5",
"typescript": "^4.2", "typescript": "^4.2",
"unplugin-vue2-script-setup": "^0.5.7", "unplugin-vue2-script-setup": "^0.5.8",
"vue-jest": "^3.0.7", "vue-jest": "^3.0.7",
"worker-loader": "^3.0.8" "worker-loader": "^3.0.8"
} }
@@ -9036,18 +9036,18 @@
} }
}, },
"node_modules/@vue/reactivity": { "node_modules/@vue/reactivity": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.10.tgz",
"integrity": "sha512-V0me78KlETt/9u3S9BoViEZNCFr/fDWodLq/KqYbFj+YySnCDD0clmjgBSQvIM63D+z3iUXftJyv08vAjlWrvw==", "integrity": "sha512-99y12RahDwBC75NwX9aFDXKLSvW66gMjl/9CNrufGQTth2fWadGxJedvKXs46ZPyiu7bFMERLY9X9Jz4GWOIDw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vue/shared": "3.2.9" "@vue/shared": "3.2.10"
} }
}, },
"node_modules/@vue/reactivity/node_modules/@vue/shared": { "node_modules/@vue/reactivity/node_modules/@vue/shared": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
"integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==", "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
"dev": true "dev": true
}, },
"node_modules/@vue/ref-transform": { "node_modules/@vue/ref-transform": {
@@ -9063,36 +9063,36 @@
} }
}, },
"node_modules/@vue/runtime-core": { "node_modules/@vue/runtime-core": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.10.tgz",
"integrity": "sha512-CaSjy/kBrSFtSwyW2sY7RTN5YGmcDg8xLzKmFmIrkI9AXv/YjViQjSKUNHTAhnGq0K739vhFO4r3meBNEWqiOw==", "integrity": "sha512-zErVTTpIqjiHtC6A7TeH3/LR21/tAW3O9qkyYAwMIq/cZFvH7C4XVJhCk8C3bEZDc5vxT5uQ83mE6sxU8bJqwg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vue/reactivity": "3.2.9", "@vue/reactivity": "3.2.10",
"@vue/shared": "3.2.9" "@vue/shared": "3.2.10"
} }
}, },
"node_modules/@vue/runtime-core/node_modules/@vue/shared": { "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
"integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==", "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
"dev": true "dev": true
}, },
"node_modules/@vue/runtime-dom": { "node_modules/@vue/runtime-dom": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.10.tgz",
"integrity": "sha512-Vi8eOaP7/8NYSWIl8/klPtkiI+IQq/gPAI77U7PVoJ22tTcK/+9IIrMEN2TD+jUkHTRRIymMECEv+hWQT1Mo1g==", "integrity": "sha512-T9yri+ejTDLVMoKLTdilRw6vEKkCo7O82EkGJlV6lspEDCxgCDhfYrBlJRbx2SRd2fBHJ6R+c9ZVHpK4CYUtqQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vue/runtime-core": "3.2.9", "@vue/runtime-core": "3.2.10",
"@vue/shared": "3.2.9", "@vue/shared": "3.2.10",
"csstype": "^2.6.8" "csstype": "^2.6.8"
} }
}, },
"node_modules/@vue/runtime-dom/node_modules/@vue/shared": { "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
"integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==", "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
"dev": true "dev": true
}, },
"node_modules/@vue/shared": { "node_modules/@vue/shared": {
@@ -32923,9 +32923,9 @@
} }
}, },
"node_modules/unplugin-vue2-script-setup": { "node_modules/unplugin-vue2-script-setup": {
"version": "0.5.7", "version": "0.5.8",
"resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.7.tgz", "resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.8.tgz",
"integrity": "sha512-Dy08dFieMMQ1xS1ixOOBWc5SjiMatuVW/tmQMVUZu086L/mGWZuZNfDQ5L0kdMOEQnATOyINnqw/f0tKI/n65A==", "integrity": "sha512-404IblNrW59LVaSx73Sk/XaHLOWs+WKUxL8V2qkqw5mHeiu6PJ1x1wjNsalPF4esXCnvlnLZtpabnr2gYEgHXA==",
"dependencies": { "dependencies": {
"@babel/core": "^7.15.0", "@babel/core": "^7.15.0",
"@babel/generator": "^7.15.0", "@babel/generator": "^7.15.0",
@@ -34170,9 +34170,9 @@
"hasInstallScript": true "hasInstallScript": true
}, },
"node_modules/vue-tippy": { "node_modules/vue-tippy": {
"version": "4.10.2", "version": "4.11.0",
"resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz", "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.11.0.tgz",
"integrity": "sha512-o1E4Q7gJHrL5VKpPF10Mdp9Grrqi9JGUBrkOQQUmTrklxctYvjpsSxePZVM0mgfGfRFAboOClw33X1ueB4Byjw==", "integrity": "sha512-dPVErfe3Gpj9S42fSliD20aw9In1AqWW7rHwpjLmVynxYfKFZhgxxKLCIdrwYibPtGAtIW9sZ/8PdVGbtgHGng==",
"dependencies": { "dependencies": {
"humps": "^2.0.1", "humps": "^2.0.1",
"tippy.js": "^4.3.5" "tippy.js": "^4.3.5"
@@ -42834,18 +42834,18 @@
} }
}, },
"@vue/reactivity": { "@vue/reactivity": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.10.tgz",
"integrity": "sha512-V0me78KlETt/9u3S9BoViEZNCFr/fDWodLq/KqYbFj+YySnCDD0clmjgBSQvIM63D+z3iUXftJyv08vAjlWrvw==", "integrity": "sha512-99y12RahDwBC75NwX9aFDXKLSvW66gMjl/9CNrufGQTth2fWadGxJedvKXs46ZPyiu7bFMERLY9X9Jz4GWOIDw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@vue/shared": "3.2.9" "@vue/shared": "3.2.10"
}, },
"dependencies": { "dependencies": {
"@vue/shared": { "@vue/shared": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
"integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==", "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
"dev": true "dev": true
} }
} }
@@ -42863,38 +42863,38 @@
} }
}, },
"@vue/runtime-core": { "@vue/runtime-core": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.10.tgz",
"integrity": "sha512-CaSjy/kBrSFtSwyW2sY7RTN5YGmcDg8xLzKmFmIrkI9AXv/YjViQjSKUNHTAhnGq0K739vhFO4r3meBNEWqiOw==", "integrity": "sha512-zErVTTpIqjiHtC6A7TeH3/LR21/tAW3O9qkyYAwMIq/cZFvH7C4XVJhCk8C3bEZDc5vxT5uQ83mE6sxU8bJqwg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@vue/reactivity": "3.2.9", "@vue/reactivity": "3.2.10",
"@vue/shared": "3.2.9" "@vue/shared": "3.2.10"
}, },
"dependencies": { "dependencies": {
"@vue/shared": { "@vue/shared": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
"integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==", "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
"dev": true "dev": true
} }
} }
}, },
"@vue/runtime-dom": { "@vue/runtime-dom": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.10.tgz",
"integrity": "sha512-Vi8eOaP7/8NYSWIl8/klPtkiI+IQq/gPAI77U7PVoJ22tTcK/+9IIrMEN2TD+jUkHTRRIymMECEv+hWQT1Mo1g==", "integrity": "sha512-T9yri+ejTDLVMoKLTdilRw6vEKkCo7O82EkGJlV6lspEDCxgCDhfYrBlJRbx2SRd2fBHJ6R+c9ZVHpK4CYUtqQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@vue/runtime-core": "3.2.9", "@vue/runtime-core": "3.2.10",
"@vue/shared": "3.2.9", "@vue/shared": "3.2.10",
"csstype": "^2.6.8" "csstype": "^2.6.8"
}, },
"dependencies": { "dependencies": {
"@vue/shared": { "@vue/shared": {
"version": "3.2.9", "version": "3.2.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
"integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==", "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
"dev": true "dev": true
} }
} }
@@ -61415,9 +61415,9 @@
} }
}, },
"unplugin-vue2-script-setup": { "unplugin-vue2-script-setup": {
"version": "0.5.7", "version": "0.5.8",
"resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.7.tgz", "resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.8.tgz",
"integrity": "sha512-Dy08dFieMMQ1xS1ixOOBWc5SjiMatuVW/tmQMVUZu086L/mGWZuZNfDQ5L0kdMOEQnATOyINnqw/f0tKI/n65A==", "integrity": "sha512-404IblNrW59LVaSx73Sk/XaHLOWs+WKUxL8V2qkqw5mHeiu6PJ1x1wjNsalPF4esXCnvlnLZtpabnr2gYEgHXA==",
"requires": { "requires": {
"@babel/core": "^7.15.0", "@babel/core": "^7.15.0",
"@babel/generator": "^7.15.0", "@babel/generator": "^7.15.0",
@@ -62399,9 +62399,9 @@
} }
}, },
"vue-tippy": { "vue-tippy": {
"version": "4.10.2", "version": "4.11.0",
"resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz", "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.11.0.tgz",
"integrity": "sha512-o1E4Q7gJHrL5VKpPF10Mdp9Grrqi9JGUBrkOQQUmTrklxctYvjpsSxePZVM0mgfGfRFAboOClw33X1ueB4Byjw==", "integrity": "sha512-dPVErfe3Gpj9S42fSliD20aw9In1AqWW7rHwpjLmVynxYfKFZhgxxKLCIdrwYibPtGAtIW9sZ/8PdVGbtgHGng==",
"requires": { "requires": {
"humps": "^2.0.1", "humps": "^2.0.1",
"tippy.js": "^4.3.5" "tippy.js": "^4.3.5"

6
package.json
View File

@@ -56,7 +56,7 @@
"vue-functional-data-merge": "^3.1.0", "vue-functional-data-merge": "^3.1.0",
"vue-github-button": "^1.3.0", "vue-github-button": "^1.3.0",
"vue-textarea-autosize": "^1.1.1", "vue-textarea-autosize": "^1.1.1",
"vue-tippy": "^4.10.2", "vue-tippy": "^4.11.0",
"vuejs-auto-complete": "^0.9.0", "vuejs-auto-complete": "^0.9.0",
"yargs-parser": "^20.2.9" "yargs-parser": "^20.2.9"
}, },
@@ -79,7 +79,7 @@
"@types/cookie": "^0.4.1", "@types/cookie": "^0.4.1",
"@types/lodash": "^4.14.172", "@types/lodash": "^4.14.172",
"@types/splitpanes": "^2.2.1", "@types/splitpanes": "^2.2.1",
"@vue/runtime-dom": "^3.2.9", "@vue/runtime-dom": "^3.2.10",
"@vue/test-utils": "^1.2.2", "@vue/test-utils": "^1.2.2",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.1.0", "babel-jest": "^27.1.0",
@@ -103,7 +103,7 @@
"stylelint-config-standard": "^22.0.0", "stylelint-config-standard": "^22.0.0",
"ts-jest": "^27.0.5", "ts-jest": "^27.0.5",
"typescript": "^4.2", "typescript": "^4.2",
"unplugin-vue2-script-setup": "^0.5.7", "unplugin-vue2-script-setup": "^0.5.8",
"vue-jest": "^3.0.7", "vue-jest": "^3.0.7",
"worker-loader": "^3.0.8" "worker-loader": "^3.0.8"
} }

7
plugins/v-tippy.js
View File

@@ -5,5 +5,12 @@ Vue.use(VueTippy, {
a11y: false, a11y: false,
animateFill: false, animateFill: false,
arrowType: "round", arrowType: "round",
popperOptions: {
modifiers: {
preventOverflow: {
boundariesElement: "window",
},
},
},
}) })
Vue.component("Tippy", TippyComponent) Vue.component("Tippy", TippyComponent)