diff --git a/docs/overlays/demo/Tooltip/PopperArrow.vue b/docs/overlays/demo/Tooltip/PopperArrow.vue
new file mode 100644
index 0000000..1e81209
--- /dev/null
+++ b/docs/overlays/demo/Tooltip/PopperArrow.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/overlays/tooltip.md b/docs/overlays/tooltip.md
index cf4aefe..d3b54de 100644
--- a/docs/overlays/tooltip.md
+++ b/docs/overlays/tooltip.md
@@ -1,5 +1,10 @@
+---
+outline: deep
+---
+
# Tooltip
@@ -12,4 +17,16 @@ Display content that appears on hover next to an element.
-<<< @/overlays/demo/Tooltip/Basic.vue
\ No newline at end of file
+<<< @/overlays/demo/Tooltip/Basic.vue
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+
+
+
+
+<<< @/overlays/demo/Tooltip/PopperArrow.vue
\ No newline at end of file
diff --git a/package.json b/package.json
index 69e10c2..0555a16 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "stellar-ui",
- "version": "0.0.60",
+ "version": "0.0.61",
"license": "MIT",
"scripts": {
"build": "rimraf dist && run-p build:stellar build:helpers",
@@ -15,7 +15,7 @@
},
"devDependencies": {
"@rollup/plugin-alias": "^5.1.0",
- "@types/node": "^20.11.30",
+ "@types/node": "^20.12.3",
"@vitejs/plugin-vue": "^5.0.4",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.29.1",
@@ -24,8 +24,8 @@
"sass": "^1.72.0",
"tailwindcss": "^3.4.3",
"typescript": "latest",
- "vite": "^5.2.6",
- "vitepress": "^1.0.1",
+ "vite": "^5.2.8",
+ "vitepress": "^1.0.2",
"vue-tsc": "^2.0.7"
},
"files": [
@@ -87,7 +87,7 @@
"defu": "^6.1.4",
"fast-glob": "^3.3.2",
"fuse.js": "^7.0.0",
- "joi": "^17.12.2",
+ "joi": "^17.12.3",
"lodash-es": "^4.17.21",
"mark.js": "^8.11.1",
"minisearch": "^6.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4ebc7b..150c9d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,8 +72,8 @@ dependencies:
specifier: ^7.0.0
version: 7.0.0
joi:
- specifier: ^17.12.2
- version: 17.12.2
+ specifier: ^17.12.3
+ version: 17.12.3
lodash-es:
specifier: ^4.17.21
version: 4.17.21
@@ -100,7 +100,7 @@ dependencies:
version: 0.30.0
vite-plugin-dts:
specifier: ^3.8.1
- version: 3.8.1(@types/node@20.11.30)(rollup@3.29.4)(typescript@5.2.2)(vite@5.2.6)
+ version: 3.8.1(@types/node@20.12.3)(rollup@3.29.4)(typescript@5.2.2)(vite@5.2.8)
vue:
specifier: ^3.3.4
version: 3.3.4
@@ -119,11 +119,11 @@ devDependencies:
specifier: ^5.1.0
version: 5.1.0(rollup@3.29.4)
'@types/node':
- specifier: ^20.11.30
- version: 20.11.30
+ specifier: ^20.12.3
+ version: 20.12.3
'@vitejs/plugin-vue':
specifier: ^5.0.4
- version: 5.0.4(vite@5.2.6)(vue@3.3.4)
+ version: 5.0.4(vite@5.2.8)(vue@3.3.4)
eslint-import-resolver-alias:
specifier: ^1.1.2
version: 1.1.2(eslint-plugin-import@2.29.1)
@@ -146,11 +146,11 @@ devDependencies:
specifier: latest
version: 5.2.2
vite:
- specifier: ^5.2.6
- version: 5.2.6(@types/node@20.11.30)(sass@1.72.0)
+ specifier: ^5.2.8
+ version: 5.2.8(@types/node@20.12.3)(sass@1.72.0)
vitepress:
- specifier: ^1.0.1
- version: 1.0.1(@algolia/client-search@4.20.0)(@types/node@20.11.30)(fuse.js@7.0.0)(postcss@8.4.38)(sass@1.72.0)(search-insights@2.8.3)(typescript@5.2.2)
+ specifier: ^1.0.2
+ version: 1.0.2(@algolia/client-search@4.20.0)(@types/node@20.12.3)(fuse.js@7.0.0)(postcss@8.4.38)(sass@1.72.0)(search-insights@2.8.3)(typescript@5.2.2)
vue-tsc:
specifier: ^2.0.7
version: 2.0.7(typescript@5.2.2)
@@ -692,27 +692,27 @@ packages:
'@jridgewell/resolve-uri': 3.1.1
'@jridgewell/sourcemap-codec': 1.4.15
- /@microsoft/api-extractor-model@7.28.13(@types/node@20.11.30):
+ /@microsoft/api-extractor-model@7.28.13(@types/node@20.12.3):
resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==}
dependencies:
'@microsoft/tsdoc': 0.14.2
'@microsoft/tsdoc-config': 0.16.2
- '@rushstack/node-core-library': 4.0.2(@types/node@20.11.30)
+ '@rushstack/node-core-library': 4.0.2(@types/node@20.12.3)
transitivePeerDependencies:
- '@types/node'
dev: false
- /@microsoft/api-extractor@7.43.0(@types/node@20.11.30):
+ /@microsoft/api-extractor@7.43.0(@types/node@20.12.3):
resolution: {integrity: sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==}
hasBin: true
dependencies:
- '@microsoft/api-extractor-model': 7.28.13(@types/node@20.11.30)
+ '@microsoft/api-extractor-model': 7.28.13(@types/node@20.12.3)
'@microsoft/tsdoc': 0.14.2
'@microsoft/tsdoc-config': 0.16.2
- '@rushstack/node-core-library': 4.0.2(@types/node@20.11.30)
+ '@rushstack/node-core-library': 4.0.2(@types/node@20.12.3)
'@rushstack/rig-package': 0.5.2
- '@rushstack/terminal': 0.10.0(@types/node@20.11.30)
- '@rushstack/ts-command-line': 4.19.1(@types/node@20.11.30)
+ '@rushstack/terminal': 0.10.0(@types/node@20.12.3)
+ '@rushstack/ts-command-line': 4.19.1(@types/node@20.12.3)
lodash: 4.17.21
minimatch: 3.0.8
resolve: 1.22.6
@@ -906,7 +906,7 @@ packages:
requiresBuild: true
optional: true
- /@rushstack/node-core-library@4.0.2(@types/node@20.11.30):
+ /@rushstack/node-core-library@4.0.2(@types/node@20.12.3):
resolution: {integrity: sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==}
peerDependencies:
'@types/node': '*'
@@ -914,7 +914,7 @@ packages:
'@types/node':
optional: true
dependencies:
- '@types/node': 20.11.30
+ '@types/node': 20.12.3
fs-extra: 7.0.1
import-lazy: 4.0.0
jju: 1.4.0
@@ -930,7 +930,7 @@ packages:
strip-json-comments: 3.1.1
dev: false
- /@rushstack/terminal@0.10.0(@types/node@20.11.30):
+ /@rushstack/terminal@0.10.0(@types/node@20.12.3):
resolution: {integrity: sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==}
peerDependencies:
'@types/node': '*'
@@ -938,15 +938,15 @@ packages:
'@types/node':
optional: true
dependencies:
- '@rushstack/node-core-library': 4.0.2(@types/node@20.11.30)
- '@types/node': 20.11.30
+ '@rushstack/node-core-library': 4.0.2(@types/node@20.12.3)
+ '@types/node': 20.12.3
supports-color: 8.1.1
dev: false
- /@rushstack/ts-command-line@4.19.1(@types/node@20.11.30):
+ /@rushstack/ts-command-line@4.19.1(@types/node@20.12.3):
resolution: {integrity: sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==}
dependencies:
- '@rushstack/terminal': 0.10.0(@types/node@20.11.30)
+ '@rushstack/terminal': 0.10.0(@types/node@20.12.3)
'@types/argparse': 1.0.38
argparse: 1.0.10
string-argv: 0.3.2
@@ -1063,33 +1063,33 @@ packages:
resolution: {integrity: sha512-T5k6kTXak79gwmIOaDF2UUQXFbnBE0zBUzF20pz7wDYu0RQMzWg+Ml/Pz50214NsFHBITkoi5VtdjFZnJ2ijjA==}
dev: true
- /@types/node@20.11.30:
- resolution: {integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==}
+ /@types/node@20.12.3:
+ resolution: {integrity: sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==}
dependencies:
undici-types: 5.26.5
/@types/web-bluetooth@0.0.20:
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
- /@vitejs/plugin-vue@5.0.4(vite@5.2.6)(vue@3.3.4):
+ /@vitejs/plugin-vue@5.0.4(vite@5.2.8)(vue@3.3.4):
resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
engines: {node: ^18.0.0 || >=20.0.0}
peerDependencies:
vite: ^5.0.0
vue: ^3.2.25
dependencies:
- vite: 5.2.6(@types/node@20.11.30)(sass@1.72.0)
+ vite: 5.2.8(@types/node@20.12.3)(sass@1.72.0)
vue: 3.3.4
dev: true
- /@vitejs/plugin-vue@5.0.4(vite@5.2.6)(vue@3.4.21):
+ /@vitejs/plugin-vue@5.0.4(vite@5.2.8)(vue@3.4.21):
resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
engines: {node: ^18.0.0 || >=20.0.0}
peerDependencies:
vite: ^5.0.0
vue: ^3.2.25
dependencies:
- vite: 5.2.6(@types/node@20.11.30)(sass@1.72.0)
+ vite: 5.2.8(@types/node@20.12.3)(sass@1.72.0)
vue: 3.4.21(typescript@5.2.2)
dev: true
@@ -3066,8 +3066,8 @@ packages:
resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
dev: false
- /joi@17.12.2:
- resolution: {integrity: sha512-RonXAIzCiHLc8ss3Ibuz45u28GOsWE1UpfDXLbN/9NKbL4tCJf8TWYVKsoYuuh+sAUt7fsSNpA+r2+TBA6Wjmw==}
+ /joi@17.12.3:
+ resolution: {integrity: sha512-2RRziagf555owrm9IRVtdKynOBeITiDpuZqIpgwqXShPncPKNiRQoiGsl/T8SQdq+8ugRzH2LqY67irr2y/d+g==}
dependencies:
'@hapi/hoek': 9.3.0
'@hapi/topo': 5.1.0
@@ -4664,7 +4664,7 @@ packages:
engines: {node: '>= 0.10'}
dev: false
- /vite-plugin-dts@3.8.1(@types/node@20.11.30)(rollup@3.29.4)(typescript@5.2.2)(vite@5.2.6):
+ /vite-plugin-dts@3.8.1(@types/node@20.12.3)(rollup@3.29.4)(typescript@5.2.2)(vite@5.2.8):
resolution: {integrity: sha512-zEYyQxH7lKto1VTKZHF3ZZeOPkkJgnMrePY4VxDHfDSvDjmYMMfWjZxYmNwW8QxbaItWJQhhXY+geAbyNphI7g==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
@@ -4674,14 +4674,14 @@ packages:
vite:
optional: true
dependencies:
- '@microsoft/api-extractor': 7.43.0(@types/node@20.11.30)
+ '@microsoft/api-extractor': 7.43.0(@types/node@20.12.3)
'@rollup/pluginutils': 5.1.0(rollup@3.29.4)
'@vue/language-core': 1.8.27(typescript@5.2.2)
debug: 4.3.4
kolorist: 1.8.0
magic-string: 0.30.8
typescript: 5.2.2
- vite: 5.2.6(@types/node@20.11.30)(sass@1.72.0)
+ vite: 5.2.8(@types/node@20.12.3)(sass@1.72.0)
vue-tsc: 1.8.27(typescript@5.2.2)
transitivePeerDependencies:
- '@types/node'
@@ -4689,8 +4689,8 @@ packages:
- supports-color
dev: false
- /vite@5.2.6(@types/node@20.11.30)(sass@1.72.0):
- resolution: {integrity: sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==}
+ /vite@5.2.8(@types/node@20.12.3)(sass@1.72.0):
+ resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
peerDependencies:
@@ -4717,7 +4717,7 @@ packages:
terser:
optional: true
dependencies:
- '@types/node': 20.11.30
+ '@types/node': 20.12.3
esbuild: 0.20.2
postcss: 8.4.38
rollup: 4.13.1
@@ -4725,8 +4725,8 @@ packages:
optionalDependencies:
fsevents: 2.3.3
- /vitepress@1.0.1(@algolia/client-search@4.20.0)(@types/node@20.11.30)(fuse.js@7.0.0)(postcss@8.4.38)(sass@1.72.0)(search-insights@2.8.3)(typescript@5.2.2):
- resolution: {integrity: sha512-eNr5pOBppYUUjEhv8S0S2t9Tv95LQ6mMeHj6ivaGwfHxpov70Vduuwl/QQMDRznKDSaP0WKV7a82Pb4JVOaqEw==}
+ /vitepress@1.0.2(@algolia/client-search@4.20.0)(@types/node@20.12.3)(fuse.js@7.0.0)(postcss@8.4.38)(sass@1.72.0)(search-insights@2.8.3)(typescript@5.2.2):
+ resolution: {integrity: sha512-bEj9yTEdWyewJFOhEREZF+mXuAgOq27etuJZT6DZSp+J3XpQstXMJc5piSVwhZBtuj8OfA0iXy+jdP1c71KMYQ==}
hasBin: true
peerDependencies:
markdown-it-mathjax3: ^4
@@ -4742,7 +4742,7 @@ packages:
'@shikijs/core': 1.2.1
'@shikijs/transformers': 1.2.1
'@types/markdown-it': 13.0.7
- '@vitejs/plugin-vue': 5.0.4(vite@5.2.6)(vue@3.4.21)
+ '@vitejs/plugin-vue': 5.0.4(vite@5.2.8)(vue@3.4.21)
'@vue/devtools-api': 7.0.24(vue@3.4.21)
'@vueuse/core': 10.9.0(vue@3.4.21)
'@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(fuse.js@7.0.0)(vue@3.4.21)
@@ -4751,7 +4751,7 @@ packages:
minisearch: 6.3.0
postcss: 8.4.38
shiki: 1.2.1
- vite: 5.2.6(@types/node@20.11.30)(sass@1.72.0)
+ vite: 5.2.8(@types/node@20.12.3)(sass@1.72.0)
vue: 3.4.21(typescript@5.2.2)
transitivePeerDependencies:
- '@algolia/client-search'
diff --git a/src/composables/usePopper.ts b/src/composables/usePopper.ts
index cab23be..dedbb24 100644
--- a/src/composables/usePopper.ts
+++ b/src/composables/usePopper.ts
@@ -10,7 +10,8 @@ import {
popperOffsets,
applyStyles,
preventOverflow,
- computeStyles
+ computeStyles,
+ arrow
} from '@popperjs/core'
import type {Instance} from '@popperjs/core'
@@ -19,7 +20,7 @@ import {MaybeElement, unrefElement} from '@vueuse/core'
import type {PopperOptions} from '../types'
export const createPopper = popperGenerator({
- defaultModifiers: [popperOffsets, applyStyles, offset, flip, preventOverflow, computeStyles, eventListeners]
+ defaultModifiers: [popperOffsets, applyStyles, offset, flip, preventOverflow, computeStyles, eventListeners, arrow]
})
export function usePopper({
@@ -86,7 +87,12 @@ export function usePopper({
scroll,
resize
}
- }]
+ },
+ {
+ name: 'arrow',
+ enabled: arrow
+ }
+ ]
}, isUndefined))
onInvalidate(instance.value.destroy)
diff --git a/src/types/popper.d.ts b/src/types/popper.d.ts
index 9fdc260..0fcb0e8 100644
--- a/src/types/popper.d.ts
+++ b/src/types/popper.d.ts
@@ -1,6 +1,8 @@
import type { Placement, PositioningStrategy } from '@popperjs/core'
export interface PopperOptions {
+ // Workaround for weak types: https://mariusschulz.com/blog/weak-type-detection-in-typescript#workarounds-for-weak-types
+ [key: string]: unknown
locked?: boolean
overflowPadding?: number
offsetDistance?: number
diff --git a/src/ui.config/popper.ts b/src/ui.config/popper.ts
index 9b88b39..6c3c55b 100644
--- a/src/ui.config/popper.ts
+++ b/src/ui.config/popper.ts
@@ -4,5 +4,6 @@ export const arrow = {
rounded: 'before:rounded-sm',
background: 'before:bg-gray-200 dark:before:bg-gray-800',
shadow: 'before:shadow',
- placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
+ // eslint-disable-next-line quotes
+ placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 7b26253..3f2db52 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,56 +1,3 @@
-// const path = require('path');
-// const {defineConfig} = require('vite');
-// import vue from '@vitejs/plugin-vue';
-//
-// module.exports = defineConfig({
-// plugins: [
-// vue()
-// ],
-// resolve: {
-// alias: {
-// '@': path.resolve(__dirname, './src'),
-// },
-// },
-// server: {
-// fs: {
-// allow: [".."],
-// },
-// },
-// build: {
-// lib: {
-// entry: path.resolve(__dirname, 'src/index.ts'),
-// name: 'stellar-ui',
-// formats: ['es'], // adding 'umd' requires globals set to every external module
-// fileName: (format) => `stellar-ui.${format}.js`,
-// },
-// rollupOptions: {
-// // external modules won't be bundled into your library
-// external: ['vue', /@popperjs\/.+/], // not every external has a global
-// output: {
-// preserveModules: true,
-// inlineDynamicImports: false,
-// // disable warning on src/index.ts using both default and named export
-// exports: 'named',
-// // Provide global variables to use in the UMD build
-// // for externalized deps (not useful if 'umd' is not in lib.formats)
-// globals: {
-// vue: 'Vue',
-// },
-// entryFileNames: ({ name: fileName }) => {
-// return `${fileName}.js`
-// },
-// },
-// },
-// emptyOutDir: false, // to retain the types folder generated by tsc
-// },
-// });
-
-
-
-
-
-
-
import {resolve} from "path";
import {defineConfig} from "vite";
import vue from '@vitejs/plugin-vue';
@@ -138,9 +85,7 @@ const config = {
},
},
};
-console.log({
- LIB_NAME: process.env.LIB_NAME,
-});
+console.log(`LIB_NAME: ${process.env.LIB_NAME}`);
const currentConfig = config[process.env.LIB_NAME];
if (currentConfig === undefined) {