feat: vnInput*

src/components/common/VnInput.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useValidator } from 'src/composables/useValidator';
 
 const emit = defineEmits([
     'update:modelValue',
@@ -27,9 +28,11 @@ const $props = defineProps({
         default: true,
     },
 });
+const { validations } = useValidator();
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
+
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -57,11 +60,15 @@ const focus = () => {
 defineExpose({
     focus,
 });
+import { useAttrs } from 'vue';
+const $attrs = useAttrs();
 
 const mixinRules = [
     requiredFieldRule,
+    ...($attrs.rules ?? []),
     (val) => {
         const { min } = vnInputRef.value.$attrs;
+        if (!min) return null;
         if (min >= 0) if (Math.floor(val) < min) return t('inputMin', { value: min });
     },
 ];
@@ -78,7 +85,7 @@ const mixinRules = [
             :class="{ required: $attrs.required }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
-            :rules="$attrs.required ? [...($attrs?.rules ?? []), ...mixinRules] : null"
+            :rules="mixinRules"
             :lazy-rules="true"
             hide-bottom-space
         >

src/components/common/VnInputDate.vue

@@ -2,6 +2,7 @@
 import { onMounted, watch, computed, ref } from 'vue';
 import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useAttrs } from 'vue';
 
 const model = defineModel({ type: String });
 const $props = defineProps({
@@ -10,9 +11,11 @@ const $props = defineProps({
         default: false,
     },
 });
+import { useValidator } from 'src/composables/useValidator';
+const { validations } = useValidator();
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
 
 const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
@@ -78,6 +81,9 @@ watch(
     (val) => (formattedDate.value = val),
     { immediate: true }
 );
+const $attrs = useAttrs();
+
+const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 </script>
 
 <template>
@@ -89,9 +95,10 @@ watch(
             placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"
-            :rules="$attrs.required ? [requiredFieldRule] : null"
+            :rules="mixinRules"
             :clearable="false"
         >
+            {{ $attrs }}
             <template #append>
                 <QIcon
                     name="close"

src/components/common/VnInputTime.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { watch, computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
+import { useValidator } from 'src/composables/useValidator';
+const { validations } = useValidator();
+import { useAttrs } from 'vue';
 
 const model = defineModel({ type: String });
 const props = defineProps({
@@ -14,8 +16,10 @@ const props = defineProps({
         default: false,
     },
 });
-const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+const $attrs = useAttrs();
+
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
+const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 
 const dateFormat = 'HH:mm';
 const isPopupOpen = ref();
@@ -73,7 +77,7 @@ watch(
             v-bind="{ ...$attrs, ...styleAttrs }"
             :class="{ required: $attrs.required }"
             style="min-width: 100px"
-            :rules="$attrs.required ? [requiredFieldRule] : null"
+            :rules="mixinRules"
         >
             <template #append>
                 <QIcon

src/components/common/VnSelect.vue

@@ -69,10 +69,10 @@ const $props = defineProps({
     },
 });
 
-const requiredFieldRule = (val) => validations({}).presence(val);
+const requiredFieldRule = (val) => validations().required($attrs.required, val);
 const $attrs = useAttrs();
-const mixinRules = () =>
-    $attrs.required ? [$attrs?.rules ?? [], requiredFieldRule] : null;
+const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
+
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
@@ -116,7 +116,6 @@ function setOptions(data) {
 }
 
 onMounted(() => {
-    console.log(vnSelectRef.value.rules);
     setOptions(options.value);
     if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
 });
@@ -216,7 +215,7 @@ watch(modelValue, (newValue) => {
         fill-input
         ref="vnSelectRef"
         lazy-rules
-        :rules="mixinRules()"
+        :rules="mixinRules"
         :class="{ required: $attrs.required }"
         virtual-scroll-slice-size="options.length"
     >