src/components/common/VnInput.vue

@@ -25,6 +25,7 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -53,7 +54,8 @@ defineExpose({
     focus,
 });
 
-const inputRules = [
+const mixinRules = [
+    requiredFieldRule,
     (val) => {
         const { min } = vnInputRef.value.$attrs;
         if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
@@ -71,6 +73,7 @@ const inputRules = [
             :class="{ required: $attrs.required }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
+            :rules="$attrs.required || $attrs.min ? mixinRules : null"
             :lazy-rules="true"
             hide-bottom-space
         >

src/components/common/VnSelect.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { ref, toRefs, computed, watch } from 'vue';
 import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
+import { useValidator } from 'src/composables/useValidator';
+const { validations } = useValidator();
 const emit = defineEmits(['update:modelValue', 'update:options']);
-
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -60,8 +60,7 @@ const $props = defineProps({
     },
 });
 
-const { t } = useI18n();
-const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
+const requiredFieldRule = (val) => validations({}).presence(val);
 
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
@@ -82,7 +81,9 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+
 onMounted(() => {
+    console.log(vnSelectRef.value.rules);
     setOptions(options.value);
     if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
 });
@@ -147,6 +148,11 @@ watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
+import { useAttrs } from 'vue';
+
+const $attrs = useAttrs();
+const mixinRules = () =>
+    $attrs.required ? [$attrs?.rules ?? [], requiredFieldRule] : null;
 </script>
 
 <template>
@@ -173,6 +179,7 @@ watch(modelValue, (newValue) => {
         fill-input
         ref="vnSelectRef"
         lazy-rules
+        :rules="mixinRules()"
         :class="{ required: $attrs.required }"
         virtual-scroll-slice-size="options.length"
     >

src/composables/useValidator.js

@@ -28,7 +28,7 @@ export function useValidator() {
     }
 
     const { t } = useI18n();
-    const validations = function (validation) {
+    const validations = function (validation = {}) {
         return {
             format: (value) => {
                 const { allowNull, with: format, allowBlank } = validation;
@@ -71,12 +71,19 @@ export function useValidator() {
                     return validator.isInt(value) || 'Value should be integer';
                 return validator.isNumeric(value) || 'Value should be a number';
             },
+            min: (value, min) => {
+                if (min >= 0)
+                    if (Math.floor(value) < min) return t('inputMin', { value: min });
+            },
             custom: (value) => validation.bindedFunction(value) || 'Invalid value',
         };
     };
+    // const requiredFieldRule = [(val) => validations({}).presence(val)];
 
     return {
         validate,
+        // requiredFieldRule,
+        validations,
         models,
     };
 }