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"
>
validations().required($attrs.required, val);
-const $attrs = useAttrs();
-const { t } = useI18n();
+
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
toRefs($props);
@@ -257,7 +256,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
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,
+ };
+}