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 @@ 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" >