feat: useArrayData

src/components/common/VnSelect.vue

@@ -68,15 +68,7 @@ const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
-const dataRef = ref(
-    useFetchData({
-        url: $props.url,
-        where: $props.where,
-        limit: $props.limit,
-        sortBy: $props.sortBy,
-        fields: $props.fields,
-    })
-);
+
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -92,15 +84,19 @@ function setOptions(data, append = true) {
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
 const useURL = computed(() => $props.url?.length > 0);
-const arrayData = useURL.value
-    ? useArrayData($props.url, {
-          url: $props.url,
-          where: $props.where,
-          limit: $props.limit,
-          sortBy: $props.sortBy,
-          fields: $props.fields,
-      })
-    : ref(null);
+import { useAttrs } from 'vue';
+
+const $attrs = useAttrs();
+const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
+const arrayDataOptions =
+    {
+        url: $props.url,
+        where: $props.where,
+        limit: $props.limit,
+        sortBy: $props.sortBy,
+        fields: $props.fields,
+    } ?? {};
+const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
 onMounted(async () => {
     setOptions(options.value);
     if (!$props.options) fetchFilter($props.modelValue);
@@ -140,7 +136,7 @@ function filter(val, options) {
 }
 
 async function fetchFilter(val) {
-    if (!useURL.value || !dataRef.value) return;
+    if (!useURL.value) return;
 
     const { fields, sortBy, limit } = $props;
     let key = new RegExp(/\d/g).test(val)
@@ -148,7 +144,7 @@ async function fetchFilter(val) {
         : optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
-    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+    return arrayData.value.fetch({ fields, where, order: sortBy, limit });
 }
 
 async function filterHandler(val, update) {
@@ -197,18 +193,6 @@ async function onScroll(scrollEv) {
 </script>
 
 <template>
-    <!-- <component :is="fetchDataComponent" ref="fetchDataRef" />
-
-    <FetchData
-        v-if="useURL"
-        ref="dataRef"
-        :url="$props.url"
-        @on-fetch="(data) => setOptions(data)"
-        :where="where || { [optionValue]: value }"
-        :limit="limit"
-        :sort-by="sortBy"
-        :fields="fields"
-    /> -->
     <QSelect
         :loading="isLoading"
         @virtual-scroll="onScroll"