@mozaic-ds/vue 2.8.0 → 2.10.0

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

package/src/components/flag/MFlag.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MFlag from './MFlag.vue';
 
 const meta: Meta<typeof MFlag> = {

package/src/components/loader/MLoader.spec.ts

@@ -101,4 +101,45 @@ describe('MLoader component', () => {
     await wrapper.setProps({ size: 'l' });
     expect(circle.attributes('r')).toBe('19');
   });
+
+  it('applies mc-loader--text-visible class when text prop is provided', () => {
+    const wrapper = mount(MLoader, {
+      props: { text: 'Loading data...' },
+    });
+
+    const loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).toContain('mc-loader--text-visible');
+  });
+
+  it('does not apply mc-loader--text-visible class when no text is provided', () => {
+    const wrapper = mount(MLoader);
+    const loader = wrapper.find('.mc-loader');
+    expect(loader.classes()).not.toContain('mc-loader--text-visible');
+  });
+
+  it('uses default props correctly (appearance=standard, size=m)', () => {
+    const wrapper = mount(MLoader);
+    const loader = wrapper.find('.mc-loader');
+
+    expect(loader.classes()).not.toContain('mc-loader--standard');
+    expect(loader.classes()).not.toContain('mc-loader--m');
+
+    const svg = wrapper.find('svg.mc-loader__icon');
+    expect(svg.attributes('viewBox')).toBe('0 0 32 32');
+
+    const circle = wrapper.find('circle.mc-loader__path');
+    expect(circle.attributes('r')).toBe('9');
+  });
+
+  it('sets correct viewBox for xs size', async () => {
+    const wrapper = mount(MLoader, { props: { size: 'xs' } });
+    const svg = wrapper.find('svg.mc-loader__icon');
+    expect(svg.attributes('viewBox')).toBe('0 0 20 20');
+  });
+
+  it('sets correct circle radius for xs size', async () => {
+    const wrapper = mount(MLoader, { props: { size: 'xs' } });
+    const circle = wrapper.find('circle.mc-loader__path');
+    expect(circle.attributes('r')).toBe('6');
+  });
 });

package/src/components/loader/MLoader.vue

@@ -34,7 +34,7 @@ const props = withDefaults(
     /**
      * Defines the size of the loader.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
 
     /**
      * Text to display alongside the loader when using the loader inside an `Overlay`.
@@ -60,6 +60,9 @@ const setViewBox = computed(() => {
   let viewBox: string;
 
   switch (props.size) {
+    case 'xs':
+      viewBox = '0 0 20 20';
+      break;
     case 's':
       viewBox = '0 0 24 24';
       break;
@@ -76,6 +79,9 @@ const setCircleRadius = computed(() => {
   let circleRadius: number;
 
   switch (props.size) {
+    case 'xs':
+      circleRadius = 6;
+      break;
     case 's':
       circleRadius = 6;
       break;

package/src/components/loader/README.md

@@ -8,5 +8,5 @@ A loader is a visual indicator used to inform users that a process is in progres
 | Name | Description | Type | Default |
 | --- | --- | --- | --- | 
 | `appearance` | Specifies the visual appearance of the loader. | `"standard"` `"inverse"` `"accent"` | `"standard"` |
-| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` | `"m"` |
+| `size` | Defines the size of the loader. | `"s"` `"m"` `"l"` `"xs"` | `"m"` |
 | `text` | Text to display alongside the loader when using the loader inside an `Overlay`. | `string` | - |

package/src/components/modal/MModal.spec.ts

@@ -54,8 +54,9 @@ describe('MModal component', () => {
 
     await wrapper.find('button.mc-modal__close').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('renders slots content', () => {
@@ -110,8 +111,10 @@ describe('MModal component', () => {
 
     await wrapper.findComponent({ name: 'MOverlay' }).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 clicked and closeOnOverlay is false', async () => {
@@ -122,17 +125,39 @@ describe('MModal component', () => {
 
     await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
 
-    expect(wrapper.emitted('update:open')).toBeFalsy();
+    const emitted = wrapper.emitted('update:open');
+
+    if (emitted) {
+      const lastValue = emitted[emitted.length - 1][0];
+      expect(lastValue).not.toBe(false);
+    } else {
+      expect(emitted).toBeFalsy();
+    }
   });
 
-  it('does not emit update:open when overlay clicked and closeOnOverlay is not set', async () => {
+  it('locks scroll when open and unlocks when closed', async () => {
     const wrapper = mount(MModal, {
-      props: { open: true, title: 'Title' },
+      props: { open: false, title: 'Title', scroll: false },
       global: { stubs },
     });
 
-    await wrapper.findComponent({ name: 'MOverlay' }).trigger('click');
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('hidden');
+    expect(document.documentElement.style.overflow).toBe('hidden');
+
+    await wrapper.setProps({ open: false });
+    expect(document.body.style.overflow).toBe('');
+    expect(document.documentElement.style.overflow).toBe('');
+  });
+
+  it('does not lock scroll if scroll prop is true', async () => {
+    const wrapper = mount(MModal, {
+      props: { open: false, title: 'Title', scroll: true },
+      global: { stubs },
+    });
 
-    expect(wrapper.emitted('update:open')).toBeFalsy();
+    await wrapper.setProps({ open: true });
+    expect(document.body.style.overflow).toBe('');
+    expect(document.documentElement.style.overflow).toBe('');
   });
 });