@mozaic-ds/vue 2.7.0 → 2.8.0

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import { ref } from 'vue';
+
+import MPhoneNumber from './MPhoneNumber.vue';
+
+const meta: Meta<typeof MPhoneNumber> = {
+  title: 'Form Elements/Phone Number',
+  component: MPhoneNumber,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { MPhoneNumber },
+    setup() {
+      const modelValue = ref(args.modelValue);
+      const isValid = ref(false);
+
+      const handleUpdate = (val: string) => {
+        modelValue.value = val;
+        action('update:modelValue')(val);
+      };
+
+      const handleValid = (valid: boolean) => {
+        isValid.value = valid;
+        action('valid')(valid);
+      };
+
+      return { args, modelValue, isValid, handleUpdate, handleValid };
+    },
+    template: `
+      <MPhoneNumber 
+        v-bind="{ ...args, modelValue }"
+        @update:modelValue="handleUpdate"
+        @valid="handleValid"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPhoneNumber>;
+
+export const Default: Story = {};
+
+export const Size: Story = {
+  args: {
+    size: 's',
+  },
+};
+
+export const IsInvalid: Story = {
+  args: {
+    isInvalid: true,
+    modelValue: '1912',
+  },
+};
+
+export const NoPrefix: Story = {
+  args: {
+    prefix: false,
+  },
+};
+
+export const NoFlag: Story = {
+  args: {
+    flag: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    modelValue: '0103948374',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    modelValue: '0103948374',
+    readonly: true,
+  },
+};

package/src/components/phonenumber/MPhoneNumber.vue

@@ -0,0 +1,271 @@
+<template>
+  <div id="mc-phone-number-input" class="mc-phone-number-input">
+    <div
+      class="mc-phone-number-input__select-wrapper"
+      :class="selectWrapperClass"
+    >
+      <select
+        id="selectComponentId"
+        v-model="selectedCountry"
+        name="selectComponentName"
+        class="mc-select mc-phone-number-input__select"
+        :class="sizeSelectClass"
+        :disabled="isDisabled"
+        :readonly="isReadOnly"
+      >
+        <option value="" selected hidden></option>
+        <option
+          v-for="country in countries"
+          :key="country"
+          :value="country"
+          :data-flag="country.toLowerCase()"
+        >
+          {{ getCountryName(country) }} (+{{ getCountryCallingCode(country) }})
+        </option>
+      </select>
+
+      <div class="mc-phone-number-input__select-display">
+        <div class="mc-phone-number-input__flag">
+          <img
+            class="mc-phone-number-input__flag-image"
+            :src="getFlagUrl(selectedCountry)"
+            :alt="getCountryName(selectedCountry)"
+            width="20"
+          />
+        </div>
+        <ChevronDown20
+          class="mc-phone-number-input__chevron"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+
+    <div class="mc-text-input mc-phone-number-input__input" :class="inputClass">
+      <span v-if="prefix" class="mc-phone-number-input__country-code">
+        +{{ getCountryCallingCode(selectedCountry) }}
+      </span>
+      <input
+        v-model="phoneNumber"
+        type="tel"
+        :id="id"
+        class="mc-phone-number-input__control mc-text-input__control"
+        :placeholder="dynamicPlaceholder"
+        name="phone-number"
+        :aria-invalid="isInvalid"
+        :disabled="isDisabled"
+        :readonly="isReadOnly"
+        @input="handleInput"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import parsePhoneNumberFromString, {
+  isValidPhoneNumber,
+  getCountries,
+  getCountryCallingCode,
+  getExampleNumber,
+  type CountryCode,
+} from 'libphonenumber-js';
+import examples from 'libphonenumber-js/mobile/examples';
+import ChevronDown20 from '@mozaic-ds/icons-vue/src/components/ChevronDown20/ChevronDown20.vue';
+/**
+ * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the phone number input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The current value of the phone number input field.
+     */
+    modelValue?: string;
+    /**
+     * Default country code for phone number formatting (e.g., 'FR', 'US', 'PT').
+     */
+    defaultCountry?: CountryCode;
+    /**
+     * A placeholder text to show in the phone number input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Determines the size of the phone number input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, display the country calling code prefix (+33, +1, etc.).
+     */
+    prefix?: boolean;
+    /**
+     * If `true`, display the country flag selector
+     */
+    flag?: boolean;
+  }>(),
+  {
+    modelValue: '',
+    defaultCountry: 'FR' as CountryCode,
+    size: 'm',
+    prefix: true,
+    flag: true,
+  },
+);
+
+const phoneNumber = ref(props.modelValue);
+const selectedCountry = ref<CountryCode>(props.defaultCountry);
+const countries = getCountries();
+
+const dynamicPlaceholder = computed(() => {
+  if (props.placeholder && props.placeholder.length > 0) {
+    return props.placeholder;
+  }
+  return getExampleNumber(selectedCountry.value, examples)?.formatNational();
+});
+
+const isValid = computed(() => {
+  if (!phoneNumber.value) return false;
+  try {
+    return isValidPhoneNumber(phoneNumber.value, selectedCountry.value);
+  } catch {
+    return false;
+  }
+});
+
+const parsedNumber = computed(() => {
+  if (!phoneNumber.value) return null;
+  try {
+    return parsePhoneNumberFromString(phoneNumber.value, selectedCountry.value);
+  } catch {
+    return null;
+  }
+});
+
+const getCountryName = (
+  countryCode: CountryCode,
+  locale: string = 'fr',
+): string => {
+  try {
+    const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
+    return regionNames.of(countryCode) || countryCode;
+  } catch {
+    return countryCode;
+  }
+};
+
+watch(
+  [phoneNumber, selectedCountry],
+  () => {
+    // Auto-format input when number is valid
+    if (isValid.value && parsedNumber.value) {
+      const formattedNational = parsedNumber.value.formatNational();
+      if (formattedNational !== phoneNumber.value) {
+        phoneNumber.value = formattedNational;
+      }
+    }
+
+    // Emit international format for v-model
+    const fullNumber = parsedNumber.value?.number || phoneNumber.value;
+    emit('update:modelValue', fullNumber);
+    emit('valid', isValid.value);
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue && newValue !== phoneNumber.value) {
+      if (newValue.startsWith('+')) {
+        try {
+          const parsed = parsePhoneNumberFromString(
+            newValue,
+            selectedCountry.value,
+          );
+          if (parsed) {
+            phoneNumber.value = parsed.formatNational();
+          } else {
+            phoneNumber.value = newValue;
+          }
+        } catch {
+          phoneNumber.value = newValue;
+        }
+      } else {
+        phoneNumber.value = newValue;
+      }
+    } else if (!newValue) {
+      phoneNumber.value = '';
+    }
+  },
+  { immediate: true },
+);
+
+const sizeSelectClass = computed(() => {
+  return props.size !== 'm' ? `mc-select--${props.size}` : '';
+});
+
+const sizeInputClass = computed(() => {
+  return props.size !== 'm' ? `mc-text-input--${props.size}` : '';
+});
+
+const isDisabled = computed(() => props.disabled);
+const isReadOnly = computed(() => props.readonly);
+
+const selectWrapperClass = computed(() => {
+  return { 'mc-phone-number-input__select-wrapper--hidden': !props.flag };
+});
+
+const inputClass = computed(() => {
+  const hasValue = phoneNumber.value && phoneNumber.value.trim().length > 0;
+  const isInvalidState = props.isInvalid || (hasValue && !isValid.value);
+  return [sizeInputClass.value, { 'is-invalid': isInvalidState }];
+});
+
+const getFlagUrl = (countryCode: CountryCode): string => {
+  return `https://flagcdn.com/${countryCode.toLowerCase()}.svg`;
+};
+
+const handleInput = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const value = input.value;
+  const sanitized = value.replace(/[^0-9+\s()-]/g, '');
+
+  phoneNumber.value = sanitized;
+  if (value !== sanitized) {
+    input.value = sanitized;
+  }
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the input value changes, updating the `modelValue` prop.
+   */
+  'update:modelValue': [value: string];
+  /**
+   * Emits when the validation state of the phone number changes.
+   */
+  valid: [isValid: boolean];
+}>();
+</script>
+
+<style lang="scss">
+@use '@mozaic-ds/styles/components/text-input';
+@use '@mozaic-ds/styles/components/button';
+@use '@mozaic-ds/styles/components/listbox';
+@use '@mozaic-ds/styles/components/select';
+@use '@mozaic-ds/styles/components/phone-number-input';
+</style>

package/src/components/phonenumber/README.md

@@ -0,0 +1,26 @@
+# MPhoneNumber
+
+A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `id*` | A unique identifier for the phone number input element, used to associate the label with the form element. | `string` | - |
+| `modelValue` | The current value of the phone number input field. | `string` | `""` |
+| `defaultCountry` | Default country code for phone number formatting (e.g., 'FR', 'US', 'PT'). | `CountryCode` | `"FR" as CountryCode` |
+| `placeholder` | A placeholder text to show in the phone number input when it is empty. | `string` | - |
+| `size` | Determines the size of the phone number input. | `"s"` `"m"` | `"m"` |
+| `isInvalid` | If `true`, applies an invalid state to the password input. | `boolean` | - |
+| `disabled` | If `true`, disables the input, making it non-interactive. | `boolean` | - |
+| `readonly` | If `true`, the input is read-only (cannot be edited). | `boolean` | - |
+| `prefix` | If `true`, display the country calling code prefix (+33, +1, etc.). | `boolean` | `true` |
+| `flag` | If `true`, display the country flag selector | `boolean` | `true` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[value: string]` |
+| `valid` | - | `[isValid: boolean]` |

package/src/components/pincode/README.md

@@ -19,4 +19,4 @@ A pincode input is a specialized input field used to enter short numeric codes,
 
 | Name | Description | Type |
 | --- | --- | --- |
-| `update:modelValue` | - | `[value: string]` |
+| `update:modelValue` | Emits when the pincode value changes, updating the modelValue prop. | [value: string] |

package/src/components/quantityselector/MQuantitySelector.stories.ts

@@ -80,10 +80,3 @@ export const Invalid: Story = {
     isInvalid: true,
   },
 };
-
-export const readOnly: Story = {
-  args: {
-    id: 'readonlyId',
-    readonly: true,
-  },
-};

package/src/components/togglegroup/MToggleGroup.vue

@@ -5,7 +5,6 @@
       :id="option.id"
       :key="option.id"
       :label="option.label"
-      :is-invalid="option.isInvalid"
       :name="name"
       :class="classObjectItem"
       :model-value="modelValue ? modelValue.includes(option.value) : undefined"
@@ -40,7 +39,6 @@ const props = defineProps<{
     label: string;
     value: string;
     disabled?: boolean;
-    isInvalid?: boolean;
     size?: 's' | 'm';
   }>;
   /**

package/src/components/togglegroup/README.md

@@ -10,7 +10,7 @@ A toggle is a switch component that allows users to enable or disable a setting,
 | `name*` | The name attribute for the toggle element, typically used for form submission. | `string` | - |
 | `modelValue` | Property used to manage the values checked by v-model
 (Do not use directly) | `string[]` | - |
-| `options*` | List of properties of each toggle of the toggle group. | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; isInvalid?: boolean` `undefined; size?: "s"` `"m"` `undefined; }[]` | - |
+| `options*` | List of properties of each toggle of the toggle group. | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; size?: "s"` `"m"` `undefined; }[]` | - |
 | `inline` | If `true`, make the form element of the group inline. | `boolean` | - |
 
 ## Events

package/src/main.ts

@@ -23,6 +23,7 @@ export { default as MNumberBadge } from './components/numberbadge/MNumberBadge.v
 export { default as MOverlay } from './components/overlay/MOverlay.vue';
 export { default as MPagination } from './components/pagination/MPagination.vue';
 export { default as MPasswordInput } from './components/passwordinput/MPasswordInput.vue';
+export { default as MPhoneNumber } from './components/phonenumber/MPhoneNumber.vue';
 export { default as MPincode } from './components/pincode/MPincode.vue';
 export { default as MQuantitySelector } from './components/quantityselector/MQuantitySelector.vue';
 export { default as MRadio } from './components/radio/MRadio.vue';