feat: use composable to unify logic

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 { useRequired } from 'src/composables/useRequired';
-import { useAttrs } from 'vue';
 
+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() {

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';

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();

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();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
-
-import { useAttrs } from 'vue';
-import { useValidator } from 'src/composables/useValidator';
 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',

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);

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,
+    };
+}