sprintify-ui 0.0.100 → 0.0.102

package/src/components/BaseAutocompleteFetch.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseAutocomplete
-    ref="input"
+    ref="autocomplete"
     :loading="showLoading && page == 1"
     :loading-bottom="showLoading && page > 1"
     :model-value="modelValue"
@@ -140,6 +140,10 @@ const keywords = ref('');
 const page = ref(1);
 const options = ref([]) as Ref<Option[]>;
 
+const autocomplete = ref(null) as Ref<InstanceType<
+  typeof BaseAutocomplete
+> | null>;
+
 const onTyping = (query: string) => {
   page.value = 1;
   reachedEnd.value = false;
@@ -212,4 +216,12 @@ function search() {
 const debouncedSearch = debounce(() => {
   search();
 }, 300);
+
+defineExpose({
+  focus: autocomplete.value?.focus,
+  blur: autocomplete.value?.blur,
+  open: autocomplete.value?.open,
+  close: autocomplete.value?.close,
+  setKeywords: autocomplete.value?.setKeywords,
+});
 </script>

package/src/components/BaseBelongsTo.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseAutocompleteFetch
+    ref="autocompleteFetch"
     :model-value="model"
     :url="url"
     :disabled="disabled"
@@ -29,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
@@ -108,6 +109,10 @@ const http = config.http;
 
 const emit = defineEmits(['update:modelValue']);
 
+const autocompleteFetch = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteFetch
+> | null>;
+
 const model = ref(props.currentModel);
 
 watch(
@@ -153,4 +158,12 @@ function onUpdate(newModel: Option | null) {
     emit('update:modelValue', newModel[props.primaryKey]);
   }
 }
+
+defineExpose({
+  focus: autocompleteFetch.value?.focus,
+  blur: autocompleteFetch.value?.blur,
+  open: autocompleteFetch.value?.open,
+  close: autocompleteFetch.value?.close,
+  setKeywords: autocompleteFetch.value?.setKeywords,
+});
 </script>

package/src/components/BaseHasMany.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseTagAutocompleteFetch
+    ref="tagAutocompleteFetch"
     :model-value="models"
     :url="url"
     :disabled="disabled"
@@ -25,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { PropType, Ref } from 'vue';
 import { Option } from '@/types';
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 
@@ -80,6 +81,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
+const tagAutocompleteFetch = ref(null) as Ref<InstanceType<
+  typeof BaseTagAutocompleteFetch
+> | null>;
+
 const models = ref(props.currentModels);
 
 watch(
@@ -97,4 +102,12 @@ function onUpdate(newModels: Option[]) {
     newModels.map((m) => m[props.primaryKey])
   );
 }
+
+defineExpose({
+  focus: tagAutocompleteFetch.value?.focus,
+  blur: tagAutocompleteFetch.value?.blur,
+  open: tagAutocompleteFetch.value?.open,
+  close: tagAutocompleteFetch.value?.close,
+  setKeywords: tagAutocompleteFetch.value?.setKeywords,
+});
 </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') {

package/src/components/BaseTagAutocompleteFetch.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseTagAutocomplete
+    ref="tagAutocomplete"
     :loading="showLoading && page == 1"
     :loading-bottom="showLoading && page > 1"
     :model-value="modelValue"
@@ -89,6 +90,10 @@ const props = defineProps({
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
 
+const tagAutocomplete = ref(null) as Ref<InstanceType<
+  typeof BaseTagAutocomplete
+> | null>;
+
 const http = config.http;
 
 const showLoading = ref(false);
@@ -167,4 +172,12 @@ const search = () => {
 const debouncedSearch = debounce(() => {
   search();
 }, 300);
+
+defineExpose({
+  focus: tagAutocomplete.value?.focus,
+  blur: tagAutocomplete.value?.blur,
+  open: tagAutocomplete.value?.open,
+  close: tagAutocomplete.value?.close,
+  setKeywords: tagAutocomplete.value?.setKeywords,
+});
 </script>