From 4b00ab877c9d1a8455e368087cd74dff85f1dab0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 29 Oct 2024 02:26:35 +0100
Subject: [PATCH 1/3] perf: use required instead :required="true"

---
 src/components/common/VnInput.vue       | 10 +++++-----
 src/components/common/VnInputDate.vue   |  9 +++++----
 src/components/common/VnInputNumber.vue |  7 ++++++-
 src/components/common/VnInputTime.vue   |  7 ++++---
 src/components/common/VnLocation.vue    | 14 ++++++++++++--
 src/components/common/VnSelect.vue      | 11 ++++++-----
 6 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 1246eedcd..4534ae4a0 100644
--- a/src/components/common/VnInput.vue
+++ b/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"
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 1aa797ab7..87833f411 100644
--- a/src/components/common/VnInputDate.vue
+++ b/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"
diff --git a/src/components/common/VnInputNumber.vue b/src/components/common/VnInputNumber.vue
index ef4bb7512..1cad6c245 100644
--- a/src/components/common/VnInputNumber.vue
+++ b/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>
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 6d69bc4a5..13e90e021 100644
--- a/src/components/common/VnInputTime.vue
+++ b/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"
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 5f94c466a..7c6e46fdd 100644
--- a/src/components/common/VnLocation.vue
+++ b/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
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b0aa648c1..4a4730784 100644
--- a/src/components/common/VnSelect.vue
+++ b/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

From 4de23c31b3f34f1849c4300e93729b244db9e01d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 29 Oct 2024 15:01:49 +0100
Subject: [PATCH 2/3] feat: use composable to unify logic

---
 src/components/common/VnInput.vue     | 13 +++++--------
 src/components/common/VnInputDate.vue |  7 +++----
 src/components/common/VnInputTime.vue |  6 ++----
 src/components/common/VnLocation.vue  | 12 ++++--------
 src/components/common/VnSelect.vue    |  6 ++----
 src/composables/useRequired.js        | 13 +++++++++++++
 6 files changed, 29 insertions(+), 28 deletions(-)
 create mode 100644 src/composables/useRequired.js

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 4534ae4a0..769e7ca44 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,9 +1,11 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useValidator } from 'src/composables/useValidator';
-import { useAttrs } from 'vue';
+import { useRequired } from 'src/composables/useRequired';
 
+const $attrs = useAttrs();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
+const { t } = useI18n();
 const emit = defineEmits([
     'update:modelValue',
     'update:options',
@@ -29,12 +31,7 @@ const $props = defineProps({
         default: true,
     },
 });
-const { validations } = useValidator();
-const $attrs = useAttrs();
 
-const { t } = useI18n();
-const isRequired = computed(() => Object.keys($attrs).includes('required'));
-const requiredFieldRule = (val) => validations().required(isRequired.value, val);
 const vnInputRef = ref(null);
 const value = computed({
     get() {
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 87833f411..b822092a5 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -4,10 +4,13 @@ import { date } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useAttrs } from 'vue';
 import VnDate from './VnDate.vue';
+import { useRequired } from 'src/composables/useRequired';
 
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const model = defineModel({ type: [String, Date] });
 const $attrs = useAttrs();
 const { t } = useI18n();
+
 const $props = defineProps({
     isOutlined: {
         type: Boolean,
@@ -18,11 +21,7 @@ const $props = defineProps({
         default: true,
     },
 });
-import { useValidator } from 'src/composables/useValidator';
-const { validations } = useValidator();
 
-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';
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 13e90e021..a0967fdf6 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,10 +2,10 @@
 import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
-import { useValidator } from 'src/composables/useValidator';
 import VnTime from './VnTime.vue';
+import { useRequired } from 'src/composables/useRequired';
 
-const { validations } = useValidator();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const { t } = useI18n();
 const $attrs = useAttrs();
 const model = defineModel({ type: String });
@@ -21,8 +21,6 @@ const props = defineProps({
 });
 const vnInputTimeRef = ref(null);
 const initialDate = ref(model.value ?? Date.vnNew());
-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();
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 7c6e46fdd..16f9fd580 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -2,13 +2,12 @@
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
+import { useAttrs } from 'vue';
+import { useRequired } from 'src/composables/useRequired';
 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 { isRequired, requiredFieldRule } = useRequired($attrs);
 const $attrs = useAttrs();
 const props = defineProps({
     location: {
@@ -17,9 +16,6 @@ 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',
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 4a4730784..662efcfe9 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -2,10 +2,11 @@
 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';
+import { useRequired } from 'src/composables/useRequired';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
 const { t } = useI18n();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const $props = defineProps({
     modelValue: {
         type: [String, Number, Object],
@@ -88,10 +89,7 @@ const $props = defineProps({
         default: false,
     },
 });
-const { validations } = useValidator();
 
-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);
diff --git a/src/composables/useRequired.js b/src/composables/useRequired.js
new file mode 100644
index 000000000..e650c91f5
--- /dev/null
+++ b/src/composables/useRequired.js
@@ -0,0 +1,13 @@
+import { useValidator } from 'src/composables/useValidator';
+
+export function useRequired($attrs) {
+    const { validations } = useValidator();
+
+    const isRequired = Object.keys($attrs).includes('required');
+    const requiredFieldRule = (val) => validations().required(isRequired, val);
+
+    return {
+        isRequired,
+        requiredFieldRule,
+    };
+}

From 1761cc23e0166f3c94c4e7b8e72c8883301bb347 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 30 Oct 2024 08:29:04 +0100
Subject: [PATCH 3/3] feat: use composable to unify logic

---
 src/components/common/VnInputDate.vue | 2 +-
 src/components/common/VnInputTime.vue | 2 +-
 src/components/common/VnLocation.vue  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index b822092a5..fcc04ddf7 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -6,9 +6,9 @@ import { useAttrs } from 'vue';
 import VnDate from './VnDate.vue';
 import { useRequired } from 'src/composables/useRequired';
 
+const $attrs = useAttrs();
 const { isRequired, requiredFieldRule } = useRequired($attrs);
 const model = defineModel({ type: [String, Date] });
-const $attrs = useAttrs();
 const { t } = useI18n();
 
 const $props = defineProps({
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index a0967fdf6..6724c00b5 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -5,9 +5,9 @@ import { date } from 'quasar';
 import VnTime from './VnTime.vue';
 import { useRequired } from 'src/composables/useRequired';
 
+const $attrs = useAttrs();
 const { isRequired, requiredFieldRule } = useRequired($attrs);
 const { t } = useI18n();
-const $attrs = useAttrs();
 const model = defineModel({ type: String });
 const props = defineProps({
     timeOnly: {
diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 16f9fd580..6de402a26 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -7,8 +7,8 @@ import { useAttrs } from 'vue';
 import { useRequired } from 'src/composables/useRequired';
 const { t } = useI18n();
 const emit = defineEmits(['update:model-value', 'update:options']);
-const { isRequired, requiredFieldRule } = useRequired($attrs);
 const $attrs = useAttrs();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
 const props = defineProps({
     location: {
         type: Object,