sprintify-ui 0.0.100 → 0.0.102

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

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

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

@@ -61,7 +61,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "focus" | "scrollBottom" | "typing")[], "clear" | "update:modelValue" | "focus" | "scrollBottom" | "typing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: (() => void) | undefined;
+    blur: (() => void) | undefined;
+    open: (() => void) | undefined;
+    close: (() => void) | undefined;
+    setKeywords: ((input: string) => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "focus" | "scrollBottom" | "typing")[], "clear" | "update:modelValue" | "focus" | "scrollBottom" | "typing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<Option | null | undefined>;
@@ -132,9 +138,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     name: string;
     size: "base" | "xs" | "sm";
-    modelValue: Option | null | undefined;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: Option | null | undefined;
     hasError: boolean;
     inline: boolean;
     dropdownShow: "focus" | "always";

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

@@ -65,7 +65,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: (() => void) | undefined;
+    blur: (() => void) | undefined;
+    open: (() => void) | undefined;
+    close: (() => void) | undefined;
+    setKeywords: ((input: string) => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<string | number | null | undefined>;
@@ -136,9 +142,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     name: string;
     size: "base" | "xs" | "sm";
-    modelValue: string | number | null | undefined;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | number | null | undefined;
     hasError: boolean;
     inline: boolean;
     dropdownShow: "focus" | "always";

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

@@ -119,15 +119,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    modelValue: Option | Option[] | null | undefined;
     disabled: boolean;
+    multiple: boolean;
+    modelValue: Option | Option[] | null | undefined;
     hasError: boolean;
     spacing: string;
     buttonType: "button" | "submit";
     buttonClass: string;
     buttonSelectedClass: string;
     buttonUnselectedClass: string;
-    multiple: boolean;
 }>, {
     option: (_: {
         selected: import("vue").ComputedRef<boolean>;

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

@@ -41,9 +41,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>>, {
-    trim: boolean;
-    min: number;
     max: number;
+    min: number;
+    trim: boolean;
     removeDoubleSpaces: boolean;
 }>;
 export default _default;

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

@@ -54,10 +54,10 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    modelValue: Option | Option[] | null | undefined;
     disabled: boolean;
-    buttonType: "button" | "submit";
     multiple: boolean;
+    modelValue: Option | Option[] | null | undefined;
+    buttonType: "button" | "submit";
     colors: string[];
 }>;
 export default _default;

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

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

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

@@ -84,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     required: boolean;
     name: string;
     label: string;
+    defaultValue: string | number | boolean;
     modelValue: {
         [locale: string]: string | number | boolean;
     } | null | undefined;
@@ -91,6 +92,5 @@ declare const _default: import("vue").DefineComponent<{
     component: "BaseInput" | "BaseTextarea";
     locales: Locales;
     componentProps: Record<string, any>;
-    defaultValue: string | number | boolean;
 }>;
 export default _default;

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

@@ -37,8 +37,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
 }, {
+    accept: string;
     disabled: boolean;
     buttonClass: string;
-    accept: string;
 }>;
 export default _default;

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

@@ -72,10 +72,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpload:end"?: ((...args: any[]) => any) | undefined;
 }, {
     loading: boolean;
+    accept: string;
     disabled: boolean;
     url: string;
     buttonClass: string;
-    accept: string;
     beforeUpload: () => boolean;
     maxSize: number;
     acceptedExtensions: string[];

package/dist/types/src/components/BaseFormField.d.ts

@@ -73,8 +73,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     label: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     preventSubmit: boolean;
     autofocus: boolean;
 }>;

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

@@ -45,7 +45,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: (() => void) | undefined;
+    blur: (() => void) | undefined;
+    open: (() => void) | undefined;
+    close: (() => void) | undefined;
+    setKeywords: ((input: string) => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<Option[] | null>;
@@ -94,12 +100,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    placeholder: string;
     disabled: boolean;
+    max: number;
+    placeholder: string;
     hasError: boolean;
     queryKey: string;
     primaryKey: string;
-    max: number;
     currentModels: Option[];
 }>, {
     option: (_: {

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

@@ -153,13 +153,13 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     mask: string | Function | unknown[];
     step: number;
-    modelValue: string | number | null;
-    placeholder: string;
-    disabled: boolean;
-    hasError: boolean;
     autocomplete: boolean;
-    min: number;
+    disabled: boolean;
     max: number;
+    min: number;
+    placeholder: string;
+    modelValue: string | number | null;
+    hasError: boolean;
     preventSubmit: boolean;
     iconLeft: string;
     iconRight: string;

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

@@ -122,12 +122,12 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     step: number;
     icon: string;
-    modelValue: string | number | null;
-    placeholder: string;
     disabled: boolean;
-    hasError: boolean;
-    min: number;
     max: number;
+    min: number;
+    placeholder: string;
+    modelValue: string | number | null;
+    hasError: boolean;
     preventSubmit: boolean;
 }>;
 export default _default;

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

@@ -395,8 +395,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     label: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     preventSubmit: boolean;
     autofocus: boolean;
 }>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -430,10 +430,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     props: Record<string, any>;
+    defaultValue: string | number | boolean;
     inputClass: string;
     component: string;
     locales: Locales;
-    defaultValue: string | number | boolean;
     layout: string;
 }>;
 export default _default;

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

@@ -99,12 +99,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpload:end"?: ((...args: any[]) => any) | undefined;
 }, {
     name: string;
-    modelValue: MediaLibraryPayload | null | undefined;
+    accept: string;
     disabled: boolean;
-    hasError: boolean;
-    min: number;
     max: number;
-    accept: string;
+    min: number;
+    modelValue: MediaLibraryPayload | null | undefined;
+    hasError: boolean;
     maxSize: number;
     acceptedExtensions: string[];
     currentMedia: Media[];

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

@@ -372,8 +372,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     label: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     preventSubmit: boolean;
     autofocus: boolean;
 }>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -395,7 +395,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     step: number;
-    min: number;
     max: number;
+    min: number;
 }>;
 export default _default;

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

@@ -54,9 +54,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    modelValue: string | null;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | null;
     hasError: boolean;
 }>;
 export default _default;

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

@@ -365,8 +365,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     label: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     preventSubmit: boolean;
     autofocus: boolean;
 }>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -86,8 +86,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    modelValue: Option | undefined;
     disabled: boolean;
+    modelValue: Option | undefined;
     hasError: boolean;
     inputClass: string;
     labelClass: string;

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

@@ -81,9 +81,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    modelValue: string | Delta | undefined;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | Delta | undefined;
     hasError: boolean;
     toolbar: string | string[];
     theme: "" | "snow" | "bubble";

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

@@ -54,9 +54,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    modelValue: (string | number | null) | undefined;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: (string | number | null) | undefined;
     hasError: boolean;
 }>, {
     default: (_: {}) => any;

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

@@ -155,8 +155,8 @@ declare const _default: import("vue").DefineComponent<{
     meta: Record<string, any> | unknown[];
     label: string;
     toggle: boolean;
-    field: string;
     width: number;
+    field: string;
     position: "left" | "right" | "center";
     searchable: boolean;
     customKey: string | number;

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

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

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

@@ -41,7 +41,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "scrollBottom" | "typing")[], "update:modelValue" | "focus" | "scrollBottom" | "typing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: (() => void) | undefined;
+    blur: (() => void) | undefined;
+    open: (() => void) | undefined;
+    close: (() => void) | undefined;
+    setKeywords: ((input: string) => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "scrollBottom" | "typing")[], "update:modelValue" | "focus" | "scrollBottom" | "typing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<Option[]>;
@@ -89,11 +95,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onTyping?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    placeholder: string;
     disabled: boolean;
+    max: number;
+    placeholder: string;
     hasError: boolean;
     queryKey: string;
-    max: number;
 }>, {
     option: (_: {
         focus: () => void;

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

@@ -87,11 +87,11 @@ declare const _default: import("vue").DefineComponent<{
     required: boolean;
     type: string;
     name: string;
-    modelValue: string | null | undefined;
-    placeholder: string;
+    autocomplete: boolean;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string | null | undefined;
     hasError: boolean;
-    autocomplete: boolean;
     preventSubmit: boolean;
     rows: number;
 }>;

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

@@ -87,9 +87,9 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    modelValue: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
+    modelValue: string;
     hasError: boolean;
     maxHeight: number;
     rows: number;

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

@@ -379,8 +379,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     label: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     preventSubmit: boolean;
     autofocus: boolean;
 }>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -406,8 +406,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     type: string;
-    min: number;
     max: number;
+    min: number;
     rows: number;
 }>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.100",
+  "version": "0.0.102",
   "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

@@ -19,7 +19,7 @@
         <li
           v-for="(option, index) in options"
           :key="option.value"
-          ref="optionRefs"
+          :data-index="index"
           class="block"
         >
           <button
@@ -141,7 +141,6 @@ const props = defineProps({
 const emit = defineEmits(['scrollBottom', 'select']);
 
 const dropdown = ref(null) as Ref<HTMLDivElement | null>;
-const optionRefs = ref([]) as Ref<HTMLElement[]>;
 
 let mouseIsMoving = false;
 
@@ -177,13 +176,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;
@@ -238,11 +231,9 @@ function scrollToFocus() {
     return;
   }
 
-  if (!optionRefs.value) {
-    return;
-  }
-
-  const option = optionRefs.value[focusIndex.value] ?? null;
+  const option = dropdown.value.querySelector(
+    `[data-index="${focusIndex.value}"]`
+  ) as HTMLElement | null;
 
   if (!option) {
     return;
@@ -260,9 +251,8 @@ function scrollToFocus() {
 watch(
   () => props.options,
   () => {
-    focusIndex.value = Math.max(
-      0,
-      Math.min(focusIndex.value, props.options.length - 1)
+    updateFocusIndex(
+      Math.max(0, Math.min(focusIndex.value, props.options.length - 1))
     );
   },
   { immediate: true }
@@ -273,20 +263,23 @@ watch(
 watch(
   () => props.selected,
   () => {
-    if (
-      props.selected &&
-      isObject(props.selected) &&
-      !isArray(props.selected)
-    ) {
+    // Single selection
+    if (isObject(props.selected) && !isArray(props.selected)) {
       const selected = props.selected as NormalizedOption;
       const index = props.options.findIndex(
         (option) => option.value === selected.value
       );
       if (index >= 0) {
-        focusIndex.value = index;
+        updateFocusIndex(index);
+      }
+    }
+    // Multiple selection
+    else if (isArray(props.selected)) {
+      if (!(focusIndex.value in props.options)) {
+        updateFocusIndex(props.options.length - 1);
       }
     } else {
-      focusIndex.value = 0;
+      updateFocusIndex(0);
     }
   },
   { immediate: true }
@@ -301,10 +294,17 @@ watch(
       dropdown.value.scrollTop = 0;
     }
     // Reset the focusIndex
-    focusIndex.value = 0;
+    updateFocusIndex(0);
   }
 );
 
+function updateFocusIndex(index: number) {
+  if (index != focusIndex.value) {
+    focusIndex.value = index;
+    scrollToFocus();
+  }
+}
+
 const onOptionMouseEnter = (index: number) => {
   if (mouseIsMoving) {
     focusIndex.value = index;
@@ -346,4 +346,8 @@ const optionIconClass = computed(() => {
   }
   return 'w-5 h-5';
 });
+
+defineExpose({
+  onKeydown,
+});
 </script>