@mozaic-ds/vue 2.7.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",
@@ -82,7 +82,8 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.9",
     "vue-component-meta": "^3.0.8",
-    "vue-eslint-parser": "^10.1.1"
+    "vue-eslint-parser": "^10.1.1",
+    "libphonenumber-js": "^1.12.23"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"

package/src/components/drawer/MDrawer.spec.ts

@@ -2,6 +2,19 @@ import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MDrawer from '@/components/drawer/MDrawer.vue';
 
+// Stubs for child components
+const stubs = {
+  ArrowBack24: { template: '<svg />' },
+  Cross24: { template: '<svg />' },
+  MIconButton: {
+    template: `<button @click="$emit('click')"><slot name="icon"/></button>`,
+  },
+  MOverlay: {
+    name: 'MOverlay',
+    template: `<div class="overlay" @click="$emit('click')"><slot/></div>`,
+  },
+};
+
 describe('MDrawer component', () => {
   it('renders title and contentTitle when provided', () => {
     const wrapper = mount(MDrawer, {
@@ -13,6 +26,7 @@ describe('MDrawer component', () => {
       slots: {
         default: '<p>Drawer content</p>',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__title').text()).toBe('Main Drawer Title');
@@ -30,13 +44,15 @@ describe('MDrawer component', () => {
         open: true,
         title: 'Test Title',
       },
+      global: { stubs },
     });
 
     const closeButton = wrapper.find('.mc-drawer__close');
     await closeButton.trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeTruthy();
-    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual([false]);
   });
 
   it('emits back event when back button is clicked', async () => {
@@ -46,6 +62,7 @@ describe('MDrawer component', () => {
         title: 'Test Title',
         back: true,
       },
+      global: { stubs },
     });
 
     const backButton = wrapper.find('.mc-drawer__back');
@@ -63,6 +80,7 @@ describe('MDrawer component', () => {
       slots: {
         footer: '<button>Footer Button</button>',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__footer').exists()).toBe(true);
@@ -79,6 +97,7 @@ describe('MDrawer component', () => {
         extended: true,
         position: 'left',
       },
+      global: { stubs },
     });
 
     const section = wrapper.find('section.mc-drawer');
@@ -93,6 +112,7 @@ describe('MDrawer component', () => {
         open: true,
         title: 'Test Title',
       },
+      global: { stubs },
     });
 
     expect(wrapper.find('.mc-drawer__back').exists()).toBe(false);
@@ -104,6 +124,7 @@ describe('MDrawer component', () => {
         title: 'Test Title',
       },
       attachTo: document.body,
+      global: { stubs },
     });
 
     const titleElement = wrapper.find('.mc-drawer__title').element;
@@ -112,17 +133,135 @@ describe('MDrawer component', () => {
     expect(document.activeElement).toBe(titleElement);
   });
 
-  it('does not set the focus on the title when the drawer closes', async () => {
+  it('does not refocus the title when the drawer closes', async () => {
     const wrapper = mount(MDrawer, {
       props: {
         title: 'Test Title',
-        open: true
+        open: true,
       },
       attachTo: document.body,
+      global: { stubs },
     });
 
     const titleElement = wrapper.find('.mc-drawer__title').element;
+
+    expect(document.activeElement).toBe(titleElement);
+
     await wrapper.setProps({ open: false });
-    expect(document.activeElement).not.toBe(titleElement);
+    await wrapper.vm.$nextTick();
+
+    expect(document.activeElement).toBe(titleElement);
+  });
+
+  it('emits update:open false when overlay is clicked and closeOnOverlay is true', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        closeOnOverlay: true,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted![emitted!.length - 1]).toEqual([false]);
+  });
+
+  it('does not emit update:open when overlay is clicked and closeOnOverlay is false', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+        closeOnOverlay: false,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+    expect(emitted?.length).toBe(1);
+  });
+
+  it('does not emit update:open when overlay is clicked and closeOnOverlay is not set', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('.overlay').trigger('click');
+
+    const emitted = wrapper.emitted('update:open');
+    expect(emitted).toBeTruthy();
+  });
+
+  it('emits update:open false when pressing ESC key', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Test Title',
+      },
+      global: { stubs },
+    });
+
+    await wrapper.find('section.mc-drawer').trigger('keydown.esc');
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')!.at(-1)).toEqual([false]);
+  });
+
+  it('locks and unlocks scroll when scroll=false and open changes', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        title: 'Scroll Test',
+        open: false,
+        scroll: false,
+      },
+      global: { stubs },
+    });
+
+    expect(document.body.style.overflow).toBe('');
+
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('hidden');
+
+    await wrapper.setProps({ open: false });
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores scroll when unmounted', async () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Unmount Test',
+        scroll: false,
+      },
+      global: { stubs },
+    });
+
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.unmount();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('emits update:open on mount reflecting initial state', () => {
+    const wrapper = mount(MDrawer, {
+      props: {
+        open: true,
+        title: 'Initial Test',
+      },
+      global: { stubs },
+    });
+
+    expect(wrapper.emitted('update:open')).toBeTruthy();
+    expect(wrapper.emitted('update:open')![0]).toEqual([true]);
   });
 });

package/src/components/drawer/MDrawer.vue

@@ -1,5 +1,9 @@
 <template>
-  <MOverlay :is-visible="open" dialogLabel="drawerTitle">
+  <MOverlay
+    :is-visible="open"
+    dialogLabel="drawerTitle"
+    @click="onClickOverlay"
+  >
     <section
       class="mc-drawer"
       :class="classObject"
@@ -10,6 +14,7 @@
       :aria-hidden="!open"
       v-bind="$attrs"
       @keydown.esc="onClose"
+      @click.stop
     >
       <div class="mc-drawer__dialog" role="document">
         <div class="mc-drawer__header">
@@ -24,7 +29,14 @@
               <ArrowBack24 aria-hidden="true" />
             </template>
           </MIconButton>
-          <h2 class="mc-drawer__title" tabindex="-1" id="drawerTitle" ref="titleRef">{{ title }}</h2>
+          <h2
+            class="mc-drawer__title"
+            tabindex="-1"
+            id="drawerTitle"
+            ref="titleRef"
+          >
+            {{ title }}
+          </h2>
           <MIconButton
             class="mc-drawer__close"
             aria-label="Close"
@@ -53,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, type VNode, ref } from 'vue';
+import { computed, watch, type VNode, ref, onMounted, onUnmounted } from 'vue';
 import ArrowBack24 from '@mozaic-ds/icons-vue/src/components/ArrowBack24/ArrowBack24.vue';
 import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
@@ -61,32 +73,45 @@ import MOverlay from '../overlay/MOverlay.vue';
 /**
  * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.
  */
-const props = defineProps<{
-  /**
-   * If `true`, display the drawer.
-   */
-  open?: boolean;
-  /**
-   * Position of the drawer.
-   */
-  position?: 'left' | 'right';
-  /**
-   * If `true`, the drawer have a bigger width.
-   */
-  extended?: boolean;
-  /**
-   * If `true`, display the back button.
-   */
-  back?: boolean;
-  /**
-   * Title of the drawer.
-   */
-  title: string;
-  /**
-   * Title of the content of the drawer.
-   */
-  contentTitle?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * If `true`, display the drawer.
+     */
+    open?: boolean;
+    /**
+     * Position of the drawer.
+     */
+    position?: 'left' | 'right';
+    /**
+     * If `true`, the drawer have a bigger width.
+     */
+    extended?: boolean;
+    /**
+     * If `true`, display the back button.
+     */
+    back?: boolean;
+    /**
+     * Title of the drawer.
+     */
+    title: string;
+    /**
+     * Title of the content of the drawer.
+     */
+    contentTitle?: string;
+    /**
+     * if `false`, lock the scroll when open.
+     */
+    scroll?: boolean;
+    /**
+     * if `true`, close the drawer when clicking the overlay.
+     */
+    closeOnOverlay?: boolean;
+  }>(),
+  {
+    scroll: true,
+  },
+);
 
 defineSlots<{
   /**
@@ -108,20 +133,49 @@ const classObject = computed(() => {
   };
 });
 
-watch(
-  () => props.open,
-  (newValue) => {
-    emit('update:open', newValue);
-  },
-);
-
 const titleRef = ref<HTMLElement | null>(null);
-watch(() => props.open, (newValue) => {
-  if (newValue && titleRef.value) {
-    titleRef.value.focus();
-  }
+const isClient =
+  typeof window !== 'undefined' && typeof document !== 'undefined';
+
+const lockScroll = () => {
+  if (!isClient) return;
+  document.body.style.overflow = 'hidden';
+  document.documentElement.style.overflow = 'hidden';
+};
+
+const unlockScroll = () => {
+  if (!isClient) return;
+  document.body.style.overflow = '';
+  document.documentElement.style.overflow = '';
+};
+
+onMounted(() => {
+  watch(
+    () => props.open,
+    (isOpen) => {
+      emit('update:open', isOpen);
+      if (isOpen && titleRef.value) {
+        titleRef.value.focus();
+      }
+      if (props.scroll === false) {
+        if (isOpen) lockScroll();
+        else unlockScroll();
+      }
+    },
+    { immediate: true },
+  );
+});
+
+onUnmounted(() => {
+  unlockScroll();
 });
 
+const onClickOverlay = () => {
+  if (props.closeOnOverlay) {
+    onClose();
+  }
+};
+
 const onClose = () => {
   emit('update:open', false);
 };

package/src/components/drawer/README.md

@@ -13,6 +13,8 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 | `back` | If `true`, display the back button. | `boolean` | - |
 | `title*` | Title of the drawer. | `string` | - |
 | `contentTitle` | Title of the content of the drawer. | `string` | - |
+| `scroll` | if `false`, lock the scroll when open. | `boolean` | `true` |
+| `closeOnOverlay` | if `true`, close the drawer when clicking the overlay. | `boolean` | - |
 
 ## Slots
 

package/src/components/field/MField.spec.ts

@@ -1,166 +1,175 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MField from './MField.vue';
+import MLoader from '../loader/MLoader.vue';
 
 describe('MField component', () => {
-  it('should render label correctly', () => {
+  it('renders the label and associates it with the correct id', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
+        id: 'username',
+        label: 'Username',
       },
     });
 
-    const label = wrapper.find('label');
+    const label = wrapper.find('.mc-field__label');
     expect(label.exists()).toBe(true);
-    expect(label.text()).toBe('Field Label');
+    expect(label.text()).toContain('Username');
+    expect(label.attributes('for')).toBe('username');
   });
 
-  it('should render requirement text if provided', () => {
+  it('renders the requirement text when provided', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
+        id: 'email',
+        label: 'Email',
         requirementText: 'required',
       },
     });
 
-    const requirementText = wrapper.find('.mc-field__requirement');
-    expect(requirementText.exists()).toBe(true);
-    expect(requirementText.text()).toBe('(required)');
+    const requirement = wrapper.find('.mc-field__requirement');
+    expect(requirement.exists()).toBe(true);
+    expect(requirement.text()).toContain('(required)');
   });
 
-  it('should not render requirement text if not provided', () => {
+  it('does not render requirement text when not provided', () => {
     const wrapper = mount(MField, {
-      props: {
-        id: 'input-id',
-        label: 'Field Label',
-      },
+      props: { id: 'email', label: 'Email' },
     });
 
-    const requirementText = wrapper.find('.mc-field__requirement');
-    expect(requirementText.exists()).toBe(false);
+    const requirement = wrapper.find('.mc-field__requirement');
+    expect(requirement.exists()).toBe(false);
   });
 
-  it('should render help text if provided', () => {
+  it('renders help text when helpId and helpText are provided', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
-        helpText: 'This is some help text.',
-        helpId: 'help-id',
+        id: 'password',
+        label: 'Password',
+        helpText: 'At least 8 characters.',
+        helpId: 'password-help',
       },
     });
 
-    const helpText = wrapper.find('.mc-field__help');
-    expect(helpText.exists()).toBe(true);
-    expect(helpText.text()).toBe('This is some help text.');
+    const help = wrapper.find('.mc-field__help');
+    expect(help.exists()).toBe(true);
+    expect(help.attributes('id')).toBe('password-help');
+    expect(help.text()).toBe('At least 8 characters.');
   });
 
-  it('should not render help text if not provided', () => {
+  it('does not render help text if helpId or helpText is missing', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
+        id: 'password',
+        label: 'Password',
+        helpText: 'Help text',
       },
     });
 
-    const helpText = wrapper.find('.mc-field__help');
-    expect(helpText.exists()).toBe(false);
+    const help = wrapper.find('.mc-field__help');
+    expect(help.exists()).toBe(false);
   });
 
-  it('should apply is-valid class when isValid prop is true', () => {
+  it('renders slot content inside .mc-field__content', () => {
     const wrapper = mount(MField, {
-      props: {
-        id: 'input-id',
-        label: 'Field Label',
-        isValid: true,
-        message: 'Valid input',
-      },
+      props: { id: 'field1', label: 'Field Label' },
+      slots: { default: '<input id="field1" />' },
     });
 
-    expect(wrapper.find('.mc-field__validation-message').classes()).toContain(
-      'is-valid',
-    );
-    expect(wrapper.find('.mc-field__validation-message').text()).toBe(
-      'Valid input',
-    );
+    const content = wrapper.find('.mc-field__content');
+    expect(content.exists()).toBe(true);
+    expect(content.find('input').exists()).toBe(true);
   });
 
-  it('should apply is-invalid class when isInvalid prop is true', () => {
+  it('renders validation message when message and valid state are provided', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
-        isInvalid: true,
-        message: 'Invalid input',
+        id: 'email',
+        label: 'Email',
+        isValid: true,
+        messageId: 'msg1',
+        message: 'Looks good!',
       },
     });
 
-    expect(wrapper.find('.mc-field__validation-message').classes()).toContain(
-      'is-invalid',
-    );
-    expect(wrapper.find('.mc-field__validation-message').text()).toBe(
-      'Invalid input',
-    );
+    const message = wrapper.find('.mc-field__validation-message');
+    expect(message.exists()).toBe(true);
+    expect(message.attributes('id')).toBe('msg1');
+    expect(message.text()).toContain('Looks good!');
+    expect(message.classes()).toContain('is-valid');
   });
 
-  it('should render a validation message only when isValid or isInvalid is true and message is provided', () => {
+  it('renders validation message when invalid', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
-        isValid: true,
-        message: 'This is a valid input',
+        id: 'email',
+        label: 'Email',
+        isInvalid: true,
+        messageId: 'msg2',
+        message: 'Invalid email address.',
       },
     });
 
-    const validationMessage = wrapper.find('.mc-field__validation-message');
-    expect(validationMessage.exists()).toBe(true);
-    expect(validationMessage.text()).toBe('This is a valid input');
+    const message = wrapper.find('.mc-field__validation-message');
+    expect(message.exists()).toBe(true);
+    expect(message.text()).toContain('Invalid email address.');
+    expect(message.classes()).toContain('is-invalid');
   });
 
-  it('should render the form element passed in the slot', () => {
+  it('renders loader and message when loading', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
-      },
-      slots: {
-        default: '<input type="text" />',
+        id: 'loadingField',
+        label: 'Loading Label',
+        isLoading: true,
+        messageId: 'loading-msg',
+        message: 'Loading...',
       },
     });
 
-    const input = wrapper.find('input');
-    expect(input.exists()).toBe(true);
-    expect(input.attributes('type')).toBe('text');
+    const message = wrapper.find('.mc-field__validation-message');
+    expect(message.exists()).toBe(true);
+    expect(message.classes()).toContain('is-loading');
+
+    const loader = wrapper.findComponent(MLoader);
+    expect(loader.exists()).toBe(true);
+    expect(loader.props('size')).toBe('xs');
   });
 
-  it('should render validation message when isInvalid is true and message is provided', () => {
+  it('does not render validation message when no state (valid/invalid/loading)', () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
-        isInvalid: true,
-        message: 'There is an error',
+        id: 'email',
+        label: 'Email',
+        messageId: 'msg3',
+        message: 'Message without state',
       },
     });
 
-    const validationMessage = wrapper.find('.mc-field__validation-message');
-    expect(validationMessage.exists()).toBe(true);
-    expect(validationMessage.text()).toBe('There is an error');
+    const message = wrapper.find('.mc-field__validation-message');
+    expect(message.exists()).toBe(false);
   });
 
-  it('should not render validation message when message is not provided', () => {
+  it('renders multiple validation states correctly', async () => {
     const wrapper = mount(MField, {
       props: {
-        id: 'input-id',
-        label: 'Field Label',
+        id: 'stateField',
+        label: 'Field',
+        messageId: 'msg4',
+        message: 'State message',
         isValid: true,
       },
     });
 
-    const validationMessage = wrapper.find('.mc-field__validation-message');
-    expect(validationMessage.exists()).toBe(false);
+    let message = wrapper.find('.mc-field__validation-message');
+    expect(message.classes()).toContain('is-valid');
+
+    await wrapper.setProps({ isValid: false, isInvalid: true });
+    message = wrapper.find('.mc-field__validation-message');
+    expect(message.classes()).toContain('is-invalid');
+
+    await wrapper.setProps({ isInvalid: false, isLoading: true });
+    message = wrapper.find('.mc-field__validation-message');
+    expect(message.classes()).toContain('is-loading');
   });
 });