sprintify-ui 0.0.106 → 0.0.107

package/dist/types/src/components/{BaseAutocompleteDropdown.vue.d.ts → BaseAutocompleteDrawer.vue.d.ts}

@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"base" | "xs" | "sm">;
         default: string;
     };
-    dropdownClass: {
+    drawerClass: {
         type: StringConstructor;
         default: string;
     };
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"base" | "xs" | "sm">;
         default: string;
     };
-    dropdownClass: {
+    drawerClass: {
         type: StringConstructor;
         default: string;
     };
@@ -70,7 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
-    dropdownClass: string;
+    drawerClass: string;
 }>, {
     empty: (_: {}) => any;
     option: (_: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAutocomplete.vue

@@ -68,14 +68,14 @@
             : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
-        <BaseAutocompleteDropdown
-          ref="dropdown"
+        <BaseAutocompleteDrawer
+          ref="drawer"
           :selected="normalizedModelValue"
           :options="filteredNormalizedOptions"
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :dropdown-class="inline ? 'pt-1' : 'p-1'"
+          :drawer-class="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -89,7 +89,7 @@
           <template #footer="footerProps">
             <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
           </template>
-        </BaseAutocompleteDropdown>
+        </BaseAutocompleteDrawer>
       </div>
     </div>
   </div>
@@ -103,7 +103,7 @@ import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
 import { useClickOutside } from '@/composables/clickOutside';
-import BaseAutocompleteDropdown from './BaseAutocompleteDropdown.vue';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 
 const props = defineProps({
   modelValue: {
@@ -212,8 +212,8 @@ const hasOptions = useHasOptions(
   computed(() => false)
 );
 
-const dropdown = ref(null) as Ref<InstanceType<
-  typeof BaseAutocompleteDropdown
+const drawer = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteDrawer
 > | null>;
 
 let timerId = 0;
@@ -330,7 +330,7 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
-  dropdown.value?.onKeydown(event);
+  drawer.value?.onKeydown(event);
 
   // Prevent default behavior for up/down arrows
 

package/src/components/{BaseAutocompleteDropdown.vue → BaseAutocompleteDrawer.vue}

@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full overflow-hidden">
     <div
-      ref="dropdown"
+      ref="drawer"
       data-scroll-lock-scrollable
       class="max-h-[214px] w-full overflow-y-auto"
     >
@@ -15,7 +15,7 @@
       </slot>
 
       <!-- Option list -->
-      <ul v-else :class="dropdownClass">
+      <ul v-else :class="drawerClass">
         <li
           v-for="(option, index) in options"
           :key="option.value ? option.value : 'null'"
@@ -132,7 +132,7 @@ const props = defineProps({
     type: String as PropType<'xs' | 'sm' | 'base'>,
     default: 'base',
   },
-  dropdownClass: {
+  drawerClass: {
     type: String,
     default: '',
   },
@@ -140,7 +140,7 @@ const props = defineProps({
 
 const emit = defineEmits(['scrollBottom', 'select']);
 
-const dropdown = ref(null) as Ref<HTMLDivElement | null>;
+const drawer = ref(null) as Ref<HTMLDivElement | null>;
 
 let mouseIsMoving = false;
 
@@ -218,7 +218,7 @@ function onKeydown(event: KeyboardEvent) {
 
 onMounted(() => {
   useInfiniteScroll(
-    dropdown.value,
+    drawer.value,
     () => {
       emit('scrollBottom');
     },
@@ -227,11 +227,11 @@ onMounted(() => {
 });
 
 function scrollToFocus() {
-  if (!dropdown.value) {
+  if (!drawer.value) {
     return;
   }
 
-  const option = dropdown.value.querySelector(
+  const option = drawer.value.querySelector(
     `[data-index="${focusIndex.value}"]`
   ) as HTMLElement | null;
 
@@ -239,11 +239,11 @@ function scrollToFocus() {
     return;
   }
 
-  const dropdownHeight = dropdown.value.clientHeight;
+  const dropdownHeight = drawer.value.clientHeight;
   const offsetTop = option.offsetTop;
   const optionHeight = option.clientHeight;
 
-  dropdown.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
+  drawer.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
 }
 
 // Validate focus index
@@ -290,8 +290,8 @@ watch(
 watch(
   () => props.keywords,
   () => {
-    if (dropdown.value) {
-      dropdown.value.scrollTop = 0;
+    if (drawer.value) {
+      drawer.value.scrollTop = 0;
     }
     // Reset the focusIndex
     updateFocusIndex(0);

package/src/components/BaseDataIterator.vue

@@ -473,6 +473,7 @@ const onSearch = debounce((event: any) => {
 watch(
   () => route.query,
   () => {
+    // Wait for the willUnmount flag to be set
     nextTick(() => {
       onRouteChange();
     });

package/src/components/BaseDropdown.stories.js

@@ -33,7 +33,11 @@ export default {
 const Template = (args) => ({
   components: { BaseDropdown },
   setup() {
-    return { args, items };
+    const maxHeight = ref(200);
+    setInterval(() => {
+      maxHeight.value = Math.floor(Math.random() * 200) + 100;
+    }, 1000);
+    return { args, items, maxHeight };
   },
   template: `
   <div style="height: 1000px; margin-top: 300px;">
@@ -46,6 +50,7 @@ const Template = (args) => ({
           <div 
             class="bg-white shadow py-1 px-1 rounded" 
             style="max-height: 200px; overflow: auto;" 
+            :style="{maxHeight: maxHeight + 'px'}"
             data-scroll-lock-scrollable>
             <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
           </div>

package/src/components/BaseDropdown.vue

@@ -7,13 +7,13 @@
       <div ref="dropdown" class="z-menu" :style="dropdownStyles">
         <Transition
           :enter-active-class="
-            animated ? 'duration-100 transition  ease-out' : ''
+            animated ? 'transition duration-200 ease-out' : ''
           "
-          enter-from-class="transform scale-90 opacity-0"
+          enter-from-class="transform scale-95 opacity-0"
           enter-to-class="transform scale-100 opacity-100"
-          :leave-active-class="animated ? 'duration-75 transition ease-in' : ''"
+          :leave-active-class="animated ? 'transition duration-75 ease-in' : ''"
           leave-from-class="transform scale-100 opacity-100"
-          leave-to-class="transform scale-90 opacity-0"
+          leave-to-class="transform scale-95 opacity-0"
         >
           <template v-if="showDropdown || keepAlive">
             <div v-show="showDropdown" class="inline-block">
@@ -34,6 +34,7 @@
 
 <script lang="ts" setup>
 import { useClickOutside } from '@/composables/clickOutside';
+import { useResizeObserver } from '@vueuse/core';
 import { throttle } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
@@ -129,13 +130,23 @@ const setBoundingBoxesDebounced = throttle(() => {
   setBoundingBoxes();
 }, 10);
 
+let buttonResizeObserver = null as any;
+let dropdownResizeObserver = null as any;
+
 function activate() {
+  buttonResizeObserver = useResizeObserver(button, setBoundingBoxesDebounced);
+  dropdownResizeObserver = useResizeObserver(
+    dropdown,
+    setBoundingBoxesDebounced
+  );
   window.addEventListener('keydown', onKeydown);
   window.addEventListener('resize', setBoundingBoxesDebounced);
   window.addEventListener('scroll', setBoundingBoxesDebounced, true);
 }
 
 function deactivate() {
+  buttonResizeObserver?.stop();
+  dropdownResizeObserver?.stop();
   window.removeEventListener('resize', setBoundingBoxesDebounced);
   window.removeEventListener('scroll', setBoundingBoxesDebounced, true);
   window.removeEventListener('keydown', onKeydown);

package/src/components/BaseTagAutocomplete.vue

@@ -60,14 +60,14 @@
             : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
-        <BaseAutocompleteDropdown
-          ref="dropdown"
+        <BaseAutocompleteDrawer
+          ref="drawer"
           :selected="normalizedModelValue"
           :options="filteredNormalizedOptions"
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :dropdown-class="inline ? 'pt-1' : 'p-1'"
+          :drawer-class="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -81,7 +81,7 @@
           <template #footer="footerProps">
             <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
           </template>
-        </BaseAutocompleteDropdown>
+        </BaseAutocompleteDrawer>
       </div>
     </div>
   </div>
@@ -95,7 +95,7 @@ import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { useClickOutside } from '@/composables/clickOutside';
 import { useNotificationsStore } from '@/stores/notifications';
-import BaseAutocompleteDropdown from './BaseAutocompleteDropdown.vue';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 
 const i18n = useI18n();
 const notifications = useNotificationsStore();
@@ -190,8 +190,8 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
-const dropdown = ref(null) as Ref<InstanceType<
-  typeof BaseAutocompleteDropdown
+const drawer = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteDrawer
 > | null>;
 
 const keywords = ref('');
@@ -259,7 +259,7 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
-  dropdown.value?.onKeydown(event);
+  drawer.value?.onKeydown(event);
 
   // Prevent default behavior for up/down arrows