Version - 0.0.61, popper arrow

docs/overlays/demo/Tooltip/PopperArrow.vue

@@ -0,0 +1,5 @@
+<template>
+  <STooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ arrow: true }">
+    <SButton color="gray" label="Hover me" />
+  </STooltip>
+</template>

docs/overlays/tooltip.md

@@ -1,5 +1,10 @@
+---
+outline: deep
+---
+
 <script setup>
 import Basic from './demo/Tooltip/Basic.vue';
+import PopperArrow from './demo/Tooltip/PopperArrow.vue';
 </script>
 
 # Tooltip
@@ -12,4 +17,16 @@ Display content that appears on hover next to an element.
 <Basic/>
 </DemoContainer>
 
-<<< @/overlays/demo/Tooltip/Basic.vue
+<<< @/overlays/demo/Tooltip/Basic.vue
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+<DemoContainer>
+<PopperArrow/>
+</DemoContainer>
+
+<<< @/overlays/demo/Tooltip/PopperArrow.vue

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",

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)

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

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`
 }