@mozaic-ds/vue 2.8.0 → 2.9.0

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 24 24');
+  });
+
+  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('3');
+  });
 });

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 24 24';
+      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 = 3;
+      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('');
   });
 });

package/src/components/modal/MModal.vue

@@ -10,6 +10,7 @@
       :aria-hidden="!open"
       v-bind="$attrs"
       @keydown.esc="onClose"
+      @click.stop
     >
       <div class="mc-modal__dialog" role="document">
         <header class="mc-modal__header">
@@ -47,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, type VNode } from 'vue';
+import { computed, onMounted, onUnmounted, watch, type VNode } from 'vue';
 import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
@@ -72,6 +73,10 @@ const props = withDefaults(
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * if `false`, lock the scroll when open.
+     */
+    scroll?: boolean;
     /**
      * if `true`, close the modal when clicking the overlay.
      */
@@ -79,6 +84,7 @@ const props = withDefaults(
   }>(),
   {
     closable: true,
+    scroll: true,
   },
 );
 
@@ -107,12 +113,38 @@ const classObject = computed(() => {
   };
 });
 
-watch(
-  () => props.open,
-  (newValue) => {
-    emit('update:open', newValue);
-  },
-);
+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 (props.scroll === false) {
+        if (isOpen) lockScroll();
+        else unlockScroll();
+      }
+    },
+    { immediate: true },
+  );
+});
+
+onUnmounted(() => {
+  unlockScroll();
+});
 
 const onClickOverlay = () => {
   if (props.closeOnOverlay) {

package/src/components/modal/README.md

@@ -11,6 +11,7 @@ A modal is a dialog window that appears on top of the main content, requiring us
 | `title*` | Title of the modal. | `string` | - |
 | `description` | Description of the modal. | `string` | - |
 | `closable` | if `true`, display the close button. | `boolean` | `true` |
+| `scroll` | if `false`, lock the scroll when open. | `boolean` | `true` |
 | `closeOnOverlay` | if `true`, close the modal when clicking the overlay. | `boolean` | - |
 
 ## Slots