perf: use required instead :required="true"

src/components/common/VnInput.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useValidator } from 'src/composables/useValidator';
+import { useAttrs } from 'vue';
 
 const emit = defineEmits([
     'update:modelValue',
@@ -29,10 +30,11 @@ const $props = defineProps({
     },
 });
 const { validations } = useValidator();
+const $attrs = useAttrs();
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => validations().required($attrs.required, val);
-
+const isRequired = computed(() => Object.keys($attrs).includes('required'));
+const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -60,8 +62,6 @@ const focus = () => {
 defineExpose({
     focus,
 });
-import { useAttrs } from 'vue';
-const $attrs = useAttrs();
 
 const mixinRules = [
     requiredFieldRule,
@@ -85,7 +85,7 @@ const mixinRules = [
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
             :type="$attrs.type"
-            :class="{ required: $attrs.required }"
+            :class="{ required: isRequired }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
             :rules="mixinRules"

src/components/common/VnInputDate.vue

@@ -6,6 +6,8 @@ import { useAttrs } from 'vue';
 import VnDate from './VnDate.vue';
 
 const model = defineModel({ type: [String, Date] });
+const $attrs = useAttrs();
+const { t } = useI18n();
 const $props = defineProps({
     isOutlined: {
         type: Boolean,
@@ -19,15 +21,14 @@ const $props = defineProps({
 import { useValidator } from 'src/composables/useValidator';
 const { validations } = useValidator();
 
-const { t } = useI18n();
-const requiredFieldRule = (val) => validations().required($attrs.required, val);
+const isRequired = computed(() => Object.keys($attrs).includes('required'));
+const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const vnInputDateRef = ref(null);
 
 const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
 const hover = ref();
 const mask = ref();
-const $attrs = useAttrs();
 
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 
@@ -104,7 +105,7 @@ const manageDate = (date) => {
             :mask="mask"
             placeholder="dd/mm/aaaa"
             v-bind="{ ...$attrs, ...styleAttrs }"
-            :class="{ required: $attrs.required }"
+            :class="{ required: isRequired }"
             :rules="mixinRules"
             :clearable="false"
             @click="isPopupOpen = true"

src/components/common/VnInputNumber.vue

@@ -1,8 +1,13 @@
 <script setup>
 import VnInput from 'src/components/common/VnInput.vue';
+import { ref } from 'vue';
+import { useAttrs } from 'vue';
+
 const model = defineModel({ type: [Number, String] });
+const $attrs = useAttrs();
+const step = ref($attrs.step || 0.01);
 </script>
 
 <template>
-    <VnInput v-bind="$attrs" v-model.number="model" type="number" />
+    <VnInput v-bind="$attrs" v-model.number="model" type="number" :step="step" />
 </template>

src/components/common/VnInputTime.vue

@@ -6,6 +6,7 @@ import { useValidator } from 'src/composables/useValidator';
 import VnTime from './VnTime.vue';
 
 const { validations } = useValidator();
+const { t } = useI18n();
 const $attrs = useAttrs();
 const model = defineModel({ type: String });
 const props = defineProps({
@@ -20,8 +21,8 @@ const props = defineProps({
 });
 const vnInputTimeRef = ref(null);
 const initialDate = ref(model.value ?? Date.vnNew());
-const { t } = useI18n();
-const requiredFieldRule = (val) => validations().required($attrs.required, val);
+const isRequired = computed(() => Object.keys($attrs).includes('required'));
+const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 const dateFormat = 'HH:mm';
 const isPopupOpen = ref();
@@ -78,7 +79,7 @@ function dateToTime(newDate) {
             placeholder="--:--"
             v-model="formattedTime"
             v-bind="{ ...$attrs, ...styleAttrs }"
-            :class="{ required: $attrs.required }"
+            :class="{ required: isRequired }"
             style="min-width: 100px"
             :rules="mixinRules"
             @click="isPopupOpen = false"

src/components/common/VnLocation.vue

@@ -2,10 +2,14 @@
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 const { t } = useI18n();
 const emit = defineEmits(['update:model-value', 'update:options']);
+const { validations } = useValidator();
 
+import { useAttrs } from 'vue';
+import { useValidator } from 'src/composables/useValidator';
+const $attrs = useAttrs();
 const props = defineProps({
     location: {
         type: Object,
@@ -13,6 +17,10 @@ const props = defineProps({
     },
 });
 
+const isRequired = computed(() => Object.keys($attrs).includes('required'));
+const requiredFieldRule = (val) => validations().required(isRequired.value, val);
+
+const mixinRules = [requiredFieldRule];
 const locationProperties = [
     'postcode',
     (obj) =>
@@ -69,11 +77,13 @@ const handleModelValue = (data) => {
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
         :input-debounce="300"
-        :class="{ required: $attrs.required }"
+        :class="{ required: isRequired }"
         v-bind="$attrs"
         clearable
         :emit-value="false"
         :tooltip="t('Create new location')"
+        :rules="mixinRules"
+        :lazy-rules="true"
     >
         <template #form>
             <CreateNewPostcode

src/components/common/VnSelect.vue

@@ -4,7 +4,8 @@ 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 $attrs = useAttrs();
+const { t } = useI18n();
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -88,9 +89,9 @@ const $props = defineProps({
     },
 });
 const { validations } = useValidator();
-const requiredFieldRule = (val) => validations().required($attrs.required, val);
-const $attrs = useAttrs();
-const { t } = useI18n();
+
+const isRequired = computed(() => Object.keys($attrs).includes('required'));
+const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
 const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
     toRefs($props);
@@ -257,7 +258,7 @@ defineExpose({ opts: myOptions });
         :fill-input="nullishToTrue($attrs['fill-input'])"
         ref="vnSelectRef"
         lazy-rules
-        :class="{ required: $attrs.required }"
+        :class="{ required: isRequired }"
         :rules="mixinRules"
         virtual-scroll-slice-size="options.length"
         hide-bottom-space