refs #7136 feat: paginate

@@ -50,3 +87,4 @@
         if ($props.limit) filter.limit = $props.limit;
+        if ($props.skip) filter.skip = $props.skip;
 
         const { data } = await axios.get($props.url, {

@@ -33,8 +37,27 @@ const $props = defineProps({
     },
 });
 
+const arrayData = useArrayData($props.url ?? $props.dataKey, {

@@ -112,6 +112,8 @@ export function useArrayData(key, userOptions) {
         return response;
     }
 
+    function isHasMoreData() {}

@@ -51,3 +43,4 @@
+                <QItemSection>
                     <VnSelect
                         :label="t('Client')"
                         :options="clients"

@@ -50,3 +36,4 @@
                         dense
                         outlined
                         rounded
+                        url="Suppliers"

@@ -65,11 +66,12 @@ const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
+const myOptionsFiltered = ref([]);

@@ -88,0 +103,4 @@
+        setOptions(data);
+        return;
+    }
+    if ($props.options) setOptions($props.options);

@@ -88,0 +104,4 @@
+        return;
+    }
+    if ($props.options) setOptions($props.options);
+    else fetchFilter($props.modelValue);

@@ -119,0 +148,4 @@
+}
+async function fetchFilter(val) {
+    const { fields, sortBy, limit } = $props;
+    const where = buildwhere(val);

@@ -150,3 +200,4 @@
 
 <template>
     <FetchData
+        v-if="useURL"

@@ -5,2 +5,3 @@
-import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useArrayData } from 'src/composables/useArrayData';
+import { useFetchData } from 'src/composables/useFetchData';

@@ -84,2 +84,3 @@
+    if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-onMounted(() => {
+const useURL = computed(() => $props.url?.length > 0);

@@ -86,0 +95,4 @@
+        limit: $props.limit,
+        sortBy: $props.sortBy,
+        fields: $props.fields,
+    } ?? {};

@@ -88,0 +103,4 @@
+    if (useURL.value) {
+        arrayData.store.userFilter = $props.where;
+        arrayData.store.filter.where = $props.where;
+        const { data } = await arrayData.fetch({ append: true });

@@ -117,3 +145,3 @@
 
     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 });

@@ -0,0 +1,30 @@
+// import { ref } from 'vue';

@@ -89,0 +91,4 @@
+const useURL = computed(() => $props.url);
+
+const $attrs = useAttrs();
+const arrayDataKey = $props.dataKey ?? ($props.url !== '' ? $props.url : $attrs.label);

@@ -122,4 +164,1 @@
 
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
-
-    const defaultWhere = $props.useLike

@@ -93,2 +114,3 @@
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
     setOptions(options.value);
-    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+    if (!$props.options) fetchFilter($props.modelValue);

@@ -133,1 +170,3 @@
-
+let isFiltered = false;
+watch(filterValue, (newVal, oldVal) => {
+    // if (vnSelectRef.value.modelValue) {

@@ -0,0 +9,4 @@
+        if (props.limit) filter.limit = props.limit;
+        return JSON.stringify(filter);
+    };
+    const fetch = async (filter) =>

@@ -127,3 +96,3 @@
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <QSelect
+                <VnSelect