fix: refs #6943 required

src/components/common/VnLocation.vue

@@ -85,6 +85,7 @@ const handleModelValue = (data) => {
         :tooltip="t('Create new location')"
         :rules="mixinRules"
         :lazy-rules="true"
+        required
     >
         <template #form>
             <CreateNewPostcode

src/components/common/VnSelect.vue

@@ -10,12 +10,7 @@ const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
 const { t } = useI18n();
 
-const isRequired = computed(() => {
+const { isRequired, requiredFieldRule } = useRequired($attrs);
-    return useRequired($attrs).isRequired;
-});
-const requiredFieldRule = computed(() => {
-    return useRequired($attrs).requiredFieldRule;
-});
 
 const $props = defineProps({
     modelValue: {

src/composables/__tests__/useRequired.spec.js

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useRequired } from '../useRequired';
+
+vi.mock('../useValidator', () => ({
+    useValidator: () => ({
+        validations: () => ({
+            required: vi.fn((isRequired, val) => {
+                if (!isRequired) return true;
+                return val !== null && val !== undefined && val !== '';
+            }),
+        }),
+    }),
+}));
+
+describe('useRequired', () => {
+    it('should detect required when attr is boolean true', () => {
+        const attrs = { required: true };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(true);
+    });
+
+    it('should detect required when attr is boolean false', () => {
+        const attrs = { required: false };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(false);
+    });
+
+    it('should detect required when attr exists without value', () => {
+        const attrs = { required: '' };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(true);
+    });
+
+    it('should return false when required attr does not exist', () => {
+        const attrs = { someOtherAttr: 'value' };
+        const { isRequired } = useRequired(attrs);
+        expect(isRequired).toBe(false);
+    });
+
+    describe('requiredFieldRule', () => {
+        it('should validate required field with value', () => {
+            const attrs = { required: true };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule('some value')).toBe(true);
+        });
+
+        it('should validate required field with empty value', () => {
+            const attrs = { required: true };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule('')).toBe(false);
+        });
+
+        it('should pass validation when field is not required', () => {
+            const attrs = { required: false };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule('')).toBe(true);
+        });
+
+        it('should handle null and undefined values', () => {
+            const attrs = { required: true };
+            const { requiredFieldRule } = useRequired(attrs);
+            expect(requiredFieldRule(null)).toBe(false);
+            expect(requiredFieldRule(undefined)).toBe(false);
+        });
+    });
+});

src/composables/useRequired.js

@@ -2,14 +2,10 @@ import { useValidator } from 'src/composables/useValidator';
 
 export function useRequired($attrs) {
     const { validations } = useValidator();
-    const hasRequired = Object.keys($attrs).includes('required');
+    const isRequired =
-    let isRequired = false;
+        typeof $attrs['required'] === 'boolean'
-    if (hasRequired) {
+            ? $attrs['required']
-        const required = $attrs['required'];
+            : Object.keys($attrs).includes('required');
-        if (typeof required === 'boolean') {
-            isRequired = required;
-        }
-    }
     const requiredFieldRule = (val) => validations().required(isRequired, val);
 
     return {

src/pages/Customer/components/CustomerAddressCreate.vue

@@ -81,7 +81,7 @@ function onAgentCreated({ id, fiscalName }, data) {
             <VnRow>
                 <VnInput
                     :label="t('Consignee')"
-                    :required="true"
+                    required
                     clearable
                     v-model="data.nickname"
                 />
@@ -90,7 +90,7 @@ function onAgentCreated({ id, fiscalName }, data) {
                     :label="t('Street address')"
                     clearable
                     v-model="data.street"
-                    :required="true"
+                    required
                 />
             </VnRow>
 
@@ -98,7 +98,6 @@ function onAgentCreated({ id, fiscalName }, data) {
                 :rules="validate('Worker.postcode')"
                 :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                 v-model="data.location"
-                :required="true"
                 @update:model-value="(location) => handleLocation(data, location)"
             />