@mozaic-ds/vue 2.8.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "type": "module",
   "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
   "author": "ADEO - ADEO Design system",

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

@@ -50,8 +50,9 @@ describe('MDrawer component', () => {
     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 () => {
@@ -132,7 +133,7 @@ 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',
@@ -143,11 +144,15 @@ describe('MDrawer component', () => {
     });
 
     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);
   });
 
-  // ✅ New tests for closeOnOverlay behavior
   it('emits update:open false when overlay is clicked and closeOnOverlay is true', async () => {
     const wrapper = mount(MDrawer, {
       props: {
@@ -160,8 +165,9 @@ describe('MDrawer component', () => {
 
     await wrapper.find('.overlay').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('does not emit update:open when overlay is clicked and closeOnOverlay is false', async () => {
@@ -176,7 +182,9 @@ describe('MDrawer component', () => {
 
     await wrapper.find('.overlay').trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeFalsy();
+    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 () => {
@@ -190,6 +198,70 @@ describe('MDrawer component', () => {
 
     await wrapper.find('.overlay').trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeFalsy();
+    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

@@ -14,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">
@@ -64,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';
@@ -72,36 +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;
-  /**
-   * if `true`, close the drawer when clicking the overlay.
-   */
-  closeOnOverlay?: boolean;
-}>();
+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<{
   /**
@@ -123,22 +133,42 @@ 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) {

package/src/components/drawer/README.md

@@ -13,6 +13,7 @@ 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');
   });
 });

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

@@ -125,6 +125,22 @@ export const InputInvalid: Story = {
   },
 };
 
+export const InputLoading: Story = {
+  args: {
+    label: 'Label',
+    id: 'inputLoadingId',
+    isLoading: true,
+    message: 'Loading message (Be concise and use comprehensive words).',
+    default: `
+      <MTextInput
+        id="inputInvalidId"
+        placeholder="Placeholder"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  },
+};
+
 export const Textarea: Story = {
   args: {
     label: 'Label',

package/src/components/field/MField.vue

@@ -16,11 +16,12 @@
     </div>
 
     <span
-      v-if="(isValid || isInvalid) && message"
+      v-if="(isValid || isInvalid || isLoading) && message"
       class="mc-field__validation-message"
       :id="messageId"
       :class="classObjectValidation"
     >
+      <MLoader v-if="isLoading" size="xs"></MLoader>
       {{ message }}
     </span>
   </div>
@@ -28,6 +29,7 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
+import MLoader from '../loader/MLoader.vue';
 /**
  * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
  */
@@ -60,6 +62,10 @@ const props = defineProps<{
    * If `true`, applies an invalid state to the form field.
    */
   isInvalid?: boolean;
+  /**
+   * If `true`, applies a loading state to the form field.
+   */
+  isLoading?: boolean;
   /**
    * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._
    */
@@ -81,6 +87,7 @@ const classObjectValidation = computed(() => {
   return {
     'is-valid': props.isValid,
     'is-invalid': props.isInvalid,
+    'is-loading': props.isLoading,
   };
 });
 </script>

package/src/components/field/README.md

@@ -14,6 +14,7 @@ A field label is a text element that identifies the purpose of an input field, p
 | `helpId` | The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._ | `string` | - |
 | `isValid` | If `true`, applies a valid state to the form field. | `boolean` | - |
 | `isInvalid` | If `true`, applies an invalid state to the form field. | `boolean` | - |
+| `isLoading` | If `true`, applies a loading state to the form field. | `boolean` | - |
 | `messageId` | The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._ | `string` | - |
 | `message` | message displayed when the form field has a valid or invalid state, usually indicating validation or errors. | `string` | - |