perf: refs #7793 sort when filter without fetch

src/components/common/VnSelect.vue

@@ -104,6 +104,7 @@ const noOneOpt = ref({
     [optionValue.value]: false,
     [optionLabel.value]: noOneText,
 });
+const sort = computed(() => [...($props.sortBy ?? []), `${$props.optionLabel} DESC`]);
 
 const value = computed({
     get() {
@@ -137,8 +138,27 @@ function findKeyInOptions() {
     if (!$props.options) return;
     return filter($props.modelValue, $props.options)?.length;
 }
+function sortOptions(data) {
+    return data.sort((a, b) => {
+        const search = lastVal.value?.toString()?.toLowerCase();
+        const aValue = String(a[$props.optionLabel]).toLowerCase();
+        const bValue = String(b[$props.optionLabel]).toLowerCase();
 
+        const aIndex = aValue.indexOf(search);
+        const bIndex = bValue.indexOf(search);
+
+        const aPriority = aIndex === 0 ? 0 : aIndex > 0 ? 1 : 2;
+        const bPriority = bIndex === 0 ? 0 : bIndex > 0 ? 1 : 2;
+
+        if (aPriority !== bPriority) {
+            return aPriority - bPriority;
+        }
+
+        return aValue.localeCompare(bValue);
+    });
+}
 function setOptions(data) {
+    if (lastVal.value) data = sortOptions(data);
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
@@ -148,26 +168,28 @@ function filter(val, options) {
 
     if (!search) return options;
 
-    return options.filter((row) => {
-        if ($props.filterOptions.length) {
-            return $props.filterOptions.some((prop) => {
-                const propValue = String(row[prop]).toLowerCase();
-                return propValue.includes(search);
-            });
-        }
+    return sortOptions(
+        options.filter((row) => {
+            if ($props.filterOptions.length) {
+                return $props.filterOptions.some((prop) => {
+                    const propValue = String(row[prop]).toLowerCase();
+                    return propValue.includes(search);
+                });
+            }
 
-        if (!row) return;
-        const id = row[$props.optionValue];
-        const optionLabel = String(row[$props.optionLabel]).toLowerCase();
+            if (!row) return;
+            const id = row[$props.optionValue];
+            const optionLabel = String(row[$props.optionLabel]).toLowerCase();
 
-        return id == search || optionLabel.includes(search);
-    });
+            return id == search || optionLabel.includes(search);
+        })
+    );
 }
 
 async function fetchFilter(val) {
     if (!$props.url || !dataRef.value) return;
 
-    const { fields, include, sortBy, limit } = $props;
+    const { fields, include, limit } = $props;
     const key =
         optionFilterValue.value ??
         (new RegExp(/\d/g).test(val)
@@ -186,7 +208,6 @@ async function fetchFilter(val) {
     $props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
     const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
-    if (sortBy) fetchOptions.order = sortBy;
 
     return dataRef.value.fetch(fetchOptions);
 }
@@ -236,7 +257,7 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
         @on-fetch="(data) => setOptions(data)"
         :where="where || { [optionValue]: value }"
         :limit="limit"
-        :sort-by="sortBy"
+        :sort-by="sort"
         :fields="fields"
         :params="params"
     />