@tak-ps/vue-tabler 5.0.0 → 5.2.0

package/CHANGELOG.md

@@ -10,6 +10,21 @@
 
 ## Version History
 
+### 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`)
+
+### v5.0.1
+
+- :bug: TablerSlidedown: reset wrapper scroll on expand so content focused while collapsed (ie autofocused inputs) cannot leave the top of the expanded content cut off
+- :bug: TablerSlidedown: release the measured max-height once the expand transition completes so content that grows after expansion (async lists etc.) is not clipped
+
 ### v5.0.0
 
 - :rocket: Remove `TablerList` as it used an outdated `window.std` requirement for fetching data

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/components/Slidedown.vue

@@ -74,8 +74,33 @@ function toggle() {
 
     if (el) {
         if (isExpanded.value) {
+            // The wrapper is overflow: hidden but can still be scrolled
+            // programmatically (ie by a browser focus() scrolling an input in
+            // the collapsed content into view) which would leave the top of
+            // the expanded content cut off
+            el.scrollTop = 0;
+
             el.style.maxHeight = el.scrollHeight + 'px';
+
+            const release = (event: TransitionEvent) => {
+                if (event.target !== el) return;
+                el.removeEventListener('transitionend', release);
+
+                if (isExpanded.value) {
+                    // Release the measured height so content that grows after
+                    // expansion (async lists etc.) is not clipped
+                    el.style.maxHeight = 'none';
+                    el.scrollTop = 0;
+                }
+            };
+
+            el.addEventListener('transitionend', release);
         } else {
+            // Re-fix the current height so the collapse can animate from it
+            // even if the max-height was released after expansion
+            el.style.maxHeight = el.scrollHeight + 'px';
+            void el.offsetHeight;
+
             el.style.maxHeight = ''; // Reset to CSS default (0)
         }
     }
@@ -87,7 +112,7 @@ function handleClick(event: MouseEvent) {
     if (el && el === event.target) return;
     if (el && el.contains(event.target as Node)) return;
     
-    if (props.clickAnywhereExpand) {
+    if (props.clickAnywhereExpand && !isExpanded.value) {
         toggle();
     } else if (props.clickAnywhereCollapse && isExpanded.value) {
         toggle();

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "5.0.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')