sprintify-ui 0.8.50 → 0.8.51

package/dist/types/components/BaseAutocompleteDrawer.vue.d.ts

@@ -15,7 +15,7 @@ declare function __VLS_template(): {
         }): any;
     };
     refs: {
-        drawer: HTMLDivElement;
+        drawerRef: HTMLDivElement;
         footer: HTMLDivElement;
     };
     attrs: Partial<{}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.50",
+  "version": "0.8.51",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseAutocompleteDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full overflow-hidden">
     <div
-      ref="drawer"
+      ref="drawerRef"
       data-scroll-lock-scrollable
       class="max-h-[214px] w-full overflow-y-auto"
     >
@@ -160,7 +160,7 @@ const props = defineProps({
 
 const emit = defineEmits(['scrollBottom', 'select']);
 
-const drawer = ref<HTMLDivElement | null>(null);
+const drawerRef = ref<HTMLDivElement | null>(null);
 
 let mouseIsMoving = false;
 
@@ -266,7 +266,7 @@ function onKeydown(event: KeyboardEvent) {
 
 onMounted(() => {
   useInfiniteScroll(
-    drawer.value,
+    drawerRef.value,
     () => {
       emit('scrollBottom');
     },
@@ -275,11 +275,11 @@ onMounted(() => {
 });
 
 function scrollToFocus() {
-  if (!drawer.value) {
+  if (!drawerRef.value) {
     return;
   }
 
-  const option = drawer.value.querySelector(
+  const option = drawerRef.value.querySelector(
     `[data-index="${focusIndex.value}"]`
   ) as HTMLElement | null;
 
@@ -287,11 +287,11 @@ function scrollToFocus() {
     return;
   }
 
-  const dropdownHeight = drawer.value.clientHeight;
+  const dropdownHeight = drawerRef.value.clientHeight;
   const offsetTop = option.offsetTop;
   const optionHeight = option.clientHeight;
 
-  drawer.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
+  drawerRef.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
 }
 
 // Validate focus index
@@ -299,7 +299,11 @@ function scrollToFocus() {
 watch(
   () => props.options,
   () => {
-    checkFocusIndex();
+    focusIndex.value = Math.max(
+      0,
+      Math.min(focusIndex.value, props.options.length - 1)
+    );
+    scrollToFocus();
   },
   { immediate: true }
 );
@@ -309,7 +313,14 @@ watch(
 watch(
   () => props.selected,
   () => {
-    checkFocusIndex();
+    if (selectedIndex.value !== null && selectedIndex.value < props.options.length) {
+      focusIndex.value = selectedIndex.value;
+      scrollToFocus();
+      return;
+    }
+
+    focusIndex.value = 0;
+    scrollToFocus();
   },
   { immediate: true }
 );
@@ -319,21 +330,10 @@ watch(
 watch(
   () => props.keywords,
   () => {
-    checkFocusIndex();
-  }
-);
-
-function checkFocusIndex() {
-
-  if (selectedIndex.value !== null && selectedIndex.value < props.options.length) {
-    focusIndex.value = selectedIndex.value;
+    focusIndex.value = 0;
     scrollToFocus();
-    return;
   }
-
-  focusIndex.value = 0;
-  scrollToFocus();
-}
+);
 
 const onOptionMouseEnter = (index: number) => {
   if (mouseIsMoving) {

package/src/components/BaseDataTable.vue

@@ -162,7 +162,7 @@
               class="flex items-center justify-center py-16"
             >
               <div class="flex flex-col items-center">
-                <BaseEmptyState class="w-32" />
+                <BaseEmptyState class="w-24" />
 
                 <p class="mt-3 text-center text-sm text-slate-600">
                   {{ t('sui.nothing_found') }}