fix: refs #7404 #7404 VnSelect resolve conflcits

src/components/common/VnSelect.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
+import { useValidator } from 'src/composables/useValidator';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 
 const $props = defineProps({
@@ -37,6 +38,10 @@ const $props = defineProps({
         type: [Array],
         default: () => [],
     },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
     isClearable: {
         type: Boolean,
         default: true,
@@ -82,10 +87,11 @@ const $props = defineProps({
         default: false,
     },
 });
-
+const { validations } = useValidator();
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
+const $attrs = useAttrs();
 const { t } = useI18n();
-const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
+const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
-
 const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
     toRefs($props);
 const myOptions = ref([]);
@@ -98,7 +104,8 @@ const noOneOpt = ref({
     [optionValue.value]: false,
     [optionLabel.value]: noOneText,
 });
-
+const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+const hover = ref(false);
 const value = computed({
     get() {
         return $props.modelValue;
@@ -177,6 +184,7 @@ async function fetchFilter(val) {
         }, {});
     } else defaultWhere = { [key]: getVal(val) };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
+    $props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
     const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
     if (sortBy) fetchOptions.order = sortBy;
@@ -218,9 +226,6 @@ async function filterHandler(val, update) {
 function nullishToTrue(value) {
     return value ?? true;
 }
-
-const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
-const hover = ref(false);
 </script>
 
 <template>
@@ -250,13 +255,10 @@ const hover = ref(false);
             ref="vnSelectRef"
             lazy-rules
             :class="{ required: $attrs.required }"
-            :rules="$attrs.required ? [requiredFieldRule] : null"
+            :rules="mixinRules"
             virtual-scroll-slice-size="options.length"
         >
-            <template
+            <template v-if="hover && value && !$attrs.disabled && isClearable" #append>
-                v-if="hover && value && !$attrs.disabled && $props.isClearable"
-                #append
-            >
                 <QIcon
                     v-show="value"
                     name="close"