@mozaic-ds/vue 2.8.0 → 2.10.0

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

package/src/components/phonenumber/MPhoneNumber.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import MPhoneNumber from './MPhoneNumber.vue';
-import { isValidPhoneNumber } from 'libphonenumber-js';
+import { isValidPhoneNumber, type CountryCode } from 'libphonenumber-js';
 
 vi.mock('libphonenumber-js', () => ({
   default: vi.fn(),
@@ -291,4 +291,113 @@ describe('MPhoneNumber', () => {
       expect((input.element as HTMLInputElement).value).toBe('+33123456789');
     });
   });
+
+  describe('Locale', () => {
+    it('should use French locale by default', () => {
+      const options = wrapper.findAll('option');
+      const franceOption = options.find(
+        (opt) => opt.attributes('value') === 'FR',
+      );
+      expect(franceOption?.text()).toContain('France');
+    });
+
+    it('should display country names in specified locale', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: { ...defaultProps, locale: 'en' },
+      });
+      const options = wrapper.findAll('option');
+      const franceOption = options.find(
+        (opt) => opt.attributes('value') === 'FR',
+      );
+      // Country names should be translated according to the locale
+      expect(franceOption?.text()).toBeTruthy();
+    });
+
+    it('should update country names when locale prop changes', async () => {
+      await wrapper.setProps({ locale: 'es' });
+      await nextTick();
+      const options = wrapper.findAll('option');
+      expect(options.length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('Country Codes', () => {
+    it('should display all countries by default', () => {
+      const options = wrapper.findAll('option');
+      // Minus 1 for the empty hidden option
+      expect(options.length - 1).toBe(5); // Mocked to return 5 countries
+    });
+
+    it('should display only specified countries when countryCodes prop is provided', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: {
+          ...defaultProps,
+          countryCodes: ['FR', 'US', 'GB'] as CountryCode[],
+        },
+      });
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(4);
+      expect(options.some((opt) => opt.attributes('value') === 'FR')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'US')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'GB')).toBe(
+        true,
+      );
+    });
+
+    it('should update available countries when countryCodes prop changes', async () => {
+      await wrapper.setProps({ countryCodes: ['FR', 'DE'] as CountryCode[] });
+      await nextTick();
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(3);
+      expect(options.some((opt) => opt.attributes('value') === 'FR')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'DE')).toBe(
+        true,
+      );
+    });
+
+    it('should work with single country in countryCodes', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: {
+          ...defaultProps,
+          countryCodes: ['FR'] as CountryCode[],
+        },
+      });
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(2);
+      expect(options.some((opt) => opt.attributes('value') === 'FR')).toBe(
+        true,
+      );
+    });
+
+    it('should combine locale and countryCodes props', () => {
+      wrapper = mount(MPhoneNumber, {
+        props: {
+          ...defaultProps,
+          locale: 'en',
+          countryCodes: ['US', 'GB', 'CA'] as CountryCode[],
+        },
+      });
+      const options = wrapper.findAll('option');
+      // Plus 1 for the empty hidden option
+      expect(options.length).toBe(4);
+      expect(options.some((opt) => opt.attributes('value') === 'US')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'GB')).toBe(
+        true,
+      );
+      expect(options.some((opt) => opt.attributes('value') === 'CA')).toBe(
+        true,
+      );
+    });
+  });
 });

package/src/components/phonenumber/MPhoneNumber.stories.ts

@@ -86,3 +86,17 @@ export const ReadOnly: Story = {
     readonly: true,
   },
 };
+
+export const LimitedCountries: Story = {
+  args: {
+    countryCodes: ['FR', 'US', 'GB', 'DE', 'ES', 'IT'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Limit the country selector to only specific countries instead of showing all available countries.',
+      },
+    },
+  },
+};

package/src/components/phonenumber/MPhoneNumber.vue

@@ -116,6 +116,14 @@ const props = withDefaults(
      * If `true`, display the country flag selector
      */
     flag?: boolean;
+    /**
+     * Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt').
+     */
+    locale?: string;
+    /**
+     * List of country codes to display in the selector. If not provided, all countries will be shown.
+     */
+    countryCodes?: CountryCode[];
   }>(),
   {
     modelValue: '',
@@ -123,12 +131,15 @@ const props = withDefaults(
     size: 'm',
     prefix: true,
     flag: true,
+    locale: 'en',
   },
 );
 
 const phoneNumber = ref(props.modelValue);
 const selectedCountry = ref<CountryCode>(props.defaultCountry);
-const countries = getCountries();
+const countries = computed(() => {
+  return props.countryCodes || getCountries();
+});
 
 const dynamicPlaceholder = computed(() => {
   if (props.placeholder && props.placeholder.length > 0) {
@@ -155,12 +166,11 @@ const parsedNumber = computed(() => {
   }
 });
 
-const getCountryName = (
-  countryCode: CountryCode,
-  locale: string = 'fr',
-): string => {
+const getCountryName = (countryCode: CountryCode): string => {
   try {
-    const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
+    const regionNames = new Intl.DisplayNames([props.locale], {
+      type: 'region',
+    });
     return regionNames.of(countryCode) || countryCode;
   } catch {
     return countryCode;

package/src/components/textinput/MTextInput.stories.ts

@@ -82,7 +82,7 @@ export const WithIcon: Story = {
   }),
 };
 
-export const minValue: Story = {
+export const MinValue: Story = {
   args: {
     id: 'minValueId',
     inputType: 'number',

package/src/components/usingPresets.mdx

@@ -39,7 +39,7 @@ All it has to do is insert the following code into its main Sass file (entrypoin
 />
 
 > [!NOTE]
-> The `<presetName>` string should be replaced by the name of the preset you want, one of the following values: `adeo | enki | mbrand`.
+> The `<presetName>` string should be replaced by the name of the preset you want, one of the following values: `adeo | mbrand`.
 > As the `leroymerlin` preset is the default preset, you don't need to use this syntax to use it.
 
 For example, for ADEO

package/src/main.ts

@@ -2,6 +2,7 @@ export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
 export { default as MButton } from './components/button/MButton.vue';
 export { default as MCallout } from './components/callout/MCallout.vue';
+export { default as MCarousel } from './components/carousel/MCarousel.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';