@tak-ps/vue-tabler 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -12,6 +12,10 @@
 
 ### Pending
 
+### v5.2.0
+
+- :rocket: Allow setting custom Delete title
+
 ### v5.1.0
 
 - :bug: TablerSlidedown: `clickAnywhereExpand` no longer collapses an expanded slidedown - collapse is explicit via the arrow control (or opt-in via `clickAnywhereCollapse`)

package/components/Delete.vue

@@ -29,7 +29,7 @@
         </template>
         <template v-else>
             <TablerIconButton
-                title='Delete'
+                :title='props.title'
                 :disabled='props.disabled'
                 @click.stop.prevent='openModal'
             >
@@ -103,6 +103,7 @@ import {
 
 export interface DeleteProps {
     label?: string;
+    title?: string;
     size?: number;
     disabled?: boolean;
     displaytype?: 'button' | 'icon' | 'menu';
@@ -111,6 +112,7 @@ export interface DeleteProps {
 
 const props = withDefaults(defineProps<DeleteProps>(), {
     label: 'Delete',
+    title: 'Delete',
     size: 32,
     disabled: false,
     displaytype: 'button'

package/components/IconButton.vue

@@ -1,7 +1,8 @@
 <template>
     <div
         :ref='iconid'
-        v-tooltip='props.title'
+        :title='props.title'
+        :aria-label='props.title'
         tabindex='0'
         role='button'
         :class='{

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",

package/test/IconButton.spec.ts

@@ -5,16 +5,6 @@ import { mount } from '@vue/test-utils'
 import IconButton from '../components/IconButton.vue'
 import iconButtonSource from '../components/IconButton.vue?raw'
 
-const global = {
-    directives: {
-        tooltip: {
-            mounted() {
-                return undefined
-            },
-        },
-    },
-}
-
 describe('TablerIconButton', () => {
     it('adds hover styling when no explicit color is provided', () => {
         const wrapper = mount(IconButton, {
@@ -24,12 +14,25 @@ describe('TablerIconButton', () => {
             slots: {
                 default: 'X',
             },
-            global,
         })
 
         expect(wrapper.get('div').classes()).toContain('custom-hover')
     })
 
+    it('exposes the title as a native tooltip and accessible name', () => {
+        const wrapper = mount(IconButton, {
+            props: {
+                title: 'Toggle Panel',
+            },
+            slots: {
+                default: 'X',
+            },
+        })
+
+        expect(wrapper.get('div').attributes('title')).toBe('Toggle Panel')
+        expect(wrapper.get('div').attributes('aria-label')).toBe('Toggle Panel')
+    })
+
     it('skips hover styling when a custom color is provided', () => {
         const wrapper = mount(IconButton, {
             props: {
@@ -39,7 +42,6 @@ describe('TablerIconButton', () => {
             slots: {
                 default: 'X',
             },
-            global,
         })
 
         expect(wrapper.get('div').classes()).not.toContain('custom-hover')