@tak-ps/vue-tabler 4.29.3 → 5.1.0

package/CHANGELOG.md

@@ -10,6 +10,21 @@
 
 ## Version History
 
+### Pending
+
+### 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
+
 ### v4.29.3
 
 - :bug: Fix incorrect border when using pre or post icons in TablerInput

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/lib.ts

@@ -20,7 +20,6 @@ export { default as TablerSlidedown } from './components/Slidedown.vue'
 export { default as TablerPager } from './components/Pager.vue'
 export { default as TablerNone } from './components/None.vue'
 export { default as TablerError } from './components/Err.vue'
-export { default as TablerList } from './components/List.vue'
 export { default as TablerHelp } from './components/Help.vue'
 export { default as TablerModal } from './components/Modal.vue'
 export { default as TablerProgress } from './components/Progress.vue'

package/package.json

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

package/components/List.vue

@@ -1,148 +0,0 @@
-<template>
-    <div class='dropdown'>
-        <label
-            v-if='label'
-            class='form-label'
-            :class='{
-                "required": required
-            }'
-            v-text='label'
-        />
-        <div
-            id='list-menu-button'
-            ref='button'
-            type='button'
-            data-bs-toggle='dropdown'
-            aria-expanded='false'
-            class='border rounded'
-            style='height: 36px;'
-        >
-            <div class='d-flex mx-2'>
-                <span
-                    v-if='ele && namekey'
-                    style='padding-top: 6px;'
-                    v-text='ele[namekey]'
-                />
-                <span
-                    v-else
-                    style='padding-top: 6px;'
-                >Select <span v-text='label' /></span>
-
-                <div class='ms-auto'>
-                    <IconSettings
-                        :size='32'
-                        stroke='1'
-                        style='margin-top: 4px;'
-                    />
-                </div>
-            </div>
-        </div>
-        <ul
-            class='dropdown-menu'
-            aria-labelledby='list-menu-button'
-            :style='{
-                "width": `${buttonHeight}px`
-            }'
-        >
-            <div class='m-1'>
-                <TablerInput
-                    v-model='filter'
-                    :disabled='disabled'
-                    placeholder='Name'
-                />
-                <div
-                    v-for='ele in (listkey ? list[listkey] : [])'
-                    :key='ele.id'
-                    @click='select(ele)'
-                >
-                    <div
-                        v-if='namekey'
-                        class='d-flex align-items-center my-1 cursor-pointer'
-                        v-text='ele[namekey]'
-                    />
-                </div>
-            </div>
-        </ul>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
-import TablerInput from './input/Input.vue';
-import {
-    IconSettings
-} from '@tabler/icons-vue';
-
-export interface ListProps {
-    url?: string;
-    listkey?: string;
-    namekey?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    initial?: Record<string, any>;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    limit?: number;
-}
-
-const props = withDefaults(defineProps<ListProps>(), {
-    label: '',
-    required: false,
-    disabled: false,
-    limit: 10
-});
-
-const emit = defineEmits<{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (e: 'selected', ele: any): void
-}>()
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ele = ref<any>(null)
-const isMounted = ref(false)
-const filter = ref('')
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const list = ref<any>({})
-const button = ref<HTMLElement | null>(null)
-
-const buttonHeight = computed(() => {
-    if(!isMounted.value) return 100;
-    const buttonDOM = button.value
-    return buttonDOM ? buttonDOM.offsetWidth : 100;
-})
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const select = (selectedEle: any) => {
-    ele.value = selectedEle;
-    if (props.namekey) {
-        filter.value = selectedEle[props.namekey];
-    }
-    emit("selected", selectedEle)
-}
-
-const fetchList = async () => {
-    if (!props.url) return;
-    // @ts-expect-error: Global window function
-    const url = window.stdurl(props.url);
-    url.searchParams.append('filter', filter.value);
-    url.searchParams.append('limit', String(props.limit));
-    // @ts-expect-error: Global window function
-    list.value = await window.std(url);
-}
-
-// Watchers
-watch(ele, () => {
-    filter.value = '';
-})
-
-watch(filter, async () => {
-    await fetchList();
-})
-
-// Mounted lifecycle
-onMounted(async () => {
-    if (props.initial && props.namekey && props.initial[props.namekey]) ele.value = props.initial;
-    await fetchList();
-    isMounted.value = true;
-})
-</script>