sprintify-ui 0.0.99 → 0.0.101

package/dist/types/src/components/BaseAutocomplete.vue.d.ts

@@ -158,11 +158,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
-    inline: boolean;
     modelValue: Option | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    inline: boolean;
     dropdownShow: "focus" | "always";
     modelValueShow: boolean;
     visibleFocus: boolean;

package/dist/types/src/components/BaseAutocompleteDropdown.vue.d.ts

@@ -29,7 +29,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "scrollBottom")[], "select" | "scrollBottom", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    onKeydown: (event: KeyboardEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "scrollBottom")[], "select" | "scrollBottom", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     selected: {
         type: PropType<NormalizedOption | NormalizedOption[] | null | undefined>;
         default: undefined;

package/dist/types/src/components/BaseAutocompleteFetch.vue.d.ts

@@ -132,11 +132,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     name: string;
     size: "base" | "xs" | "sm";
-    inline: boolean;
     modelValue: Option | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    inline: boolean;
     dropdownShow: "focus" | "always";
     modelValueShow: boolean;
     visibleFocus: boolean;

package/dist/types/src/components/BaseBelongsTo.vue.d.ts

@@ -136,11 +136,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     name: string;
     size: "base" | "xs" | "sm";
-    inline: boolean;
     modelValue: string | number | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    inline: boolean;
     dropdownShow: "focus" | "always";
     modelValueShow: boolean;
     visibleFocus: boolean;

package/dist/types/src/components/BaseDatePicker.vue.d.ts

@@ -78,10 +78,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    inline: boolean;
     modelValue: string | null | undefined;
     disabled: boolean;
     hasError: boolean;
+    inline: boolean;
     minDate: Date;
     maxDate: Date;
     yearRange: number | [number, number];

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -149,10 +149,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
-    inline: boolean;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    inline: boolean;
     dropdownShow: "focus" | "always";
     max: number;
 }>, {

package/package.json

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

package/src/components/BaseAutocomplete.vue

@@ -69,6 +69,7 @@
         ]"
       >
         <BaseAutocompleteDropdown
+          ref="dropdown"
           :selected="normalizedModelValue"
           :options="filteredNormalizedOptions"
           :size="size"
@@ -199,6 +200,10 @@ const hasOptions = useHasOptions(
   computed(() => false)
 );
 
+const dropdown = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteDropdown
+> | null>;
+
 let timerId = 0;
 const keywords = ref('');
 const autocomplete = ref(null) as Ref<HTMLElement | null>;
@@ -285,6 +290,8 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
+  dropdown.value?.onKeydown(event);
+
   // Prevent default behavior for up/down arrows
 
   if (key === 'ArrowUp') {

package/src/components/BaseAutocompleteDropdown.vue

@@ -177,13 +177,7 @@ function isSelected(option: NormalizedOption): boolean {
 
 // Arrow actions
 
-window.addEventListener('keydown', onKeyDown);
-
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', onKeyDown);
-});
-
-function onKeyDown(event: KeyboardEvent) {
+function onKeydown(event: KeyboardEvent) {
   const key = event.key;
 
   mouseIsMoving = false;
@@ -234,6 +228,10 @@ onMounted(() => {
 });
 
 function scrollToFocus() {
+  if (!dropdown.value) {
+    return;
+  }
+
   if (!optionRefs.value) {
     return;
   }
@@ -244,10 +242,11 @@ function scrollToFocus() {
     return;
   }
 
-  option.scrollIntoView({
-    block: 'center',
-    inline: 'center',
-  });
+  const dropdownHeight = dropdown.value.clientHeight;
+  const offsetTop = option.offsetTop;
+  const optionHeight = option.clientHeight;
+
+  dropdown.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
 }
 
 // Validate focus index
@@ -341,4 +340,8 @@ const optionIconClass = computed(() => {
   }
   return 'w-5 h-5';
 });
+
+defineExpose({
+  onKeydown,
+});
 </script>

package/src/components/BaseTagAutocomplete.vue

@@ -61,6 +61,7 @@
         ]"
       >
         <BaseAutocompleteDropdown
+          ref="dropdown"
           :selected="normalizedModelValue"
           :options="filteredNormalizedOptions"
           :size="size"
@@ -189,6 +190,10 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
+const dropdown = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteDropdown
+> | null>;
+
 const keywords = ref('');
 const autocomplete = ref(null) as Ref<HTMLElement | null>;
 const inputElement = ref(null) as Ref<HTMLInputElement | null>;
@@ -254,6 +259,8 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
+  dropdown.value?.onKeydown(event);
+
   // Prevent default behavior for up/down arrows
 
   if (key === 'ArrowUp') {