diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue index 93cf332a3..7979b6d6e 100644 --- a/src/components/common/VnInput.vue +++ b/src/components/common/VnInput.vue @@ -1,8 +1,11 @@ diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue index 6d69bc4a5..6724c00b5 100644 --- a/src/components/common/VnInputTime.vue +++ b/src/components/common/VnInputTime.vue @@ -2,11 +2,12 @@ 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 $attrs = useAttrs(); +const { isRequired, requiredFieldRule } = useRequired($attrs); +const { t } = useI18n(); const model = defineModel({ type: String }); const props = defineProps({ timeOnly: { @@ -20,8 +21,6 @@ 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 mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])]; const dateFormat = 'HH:mm'; const isPopupOpen = ref(); @@ -78,7 +77,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..6de402a26 100644 --- a/src/components/common/VnLocation.vue +++ b/src/components/common/VnLocation.vue @@ -3,9 +3,12 @@ import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue'; import VnSelectDialog from 'components/common/VnSelectDialog.vue'; import { useI18n } from 'vue-i18n'; 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 $attrs = useAttrs(); +const { isRequired, requiredFieldRule } = useRequired($attrs); const props = defineProps({ location: { type: Object, @@ -13,6 +16,7 @@ const props = defineProps({ }, }); +const mixinRules = [requiredFieldRule]; const locationProperties = [ 'postcode', (obj) => @@ -69,11 +73,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" >