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>
<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 relative">
<label for="method">
@@ -57,6 +69,7 @@
flex-1
rounded-r
text-secondaryDark
min-w-32
py-1
px-4
hover:border-dividerDark
@@ -77,6 +90,7 @@
flex
text-secondaryDark
w-full
min-w-32
py-2
px-4
hover:border-dividerDark

122
package-lock.json generated
View File

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

6
package.json
View File

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

7
plugins/v-tippy.js
View File

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