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