@mozaic-ds/vue 1.0.0-beta.8 → 1.0.0-beta.9

package/src/components/modal/MModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <MOverlay :is-visible="open" dialogLabel="modalTitle">
+    <section
+      class="mc-modal"
+      :class="classObject"
+      role="dialog"
+      aria-labelledby="modalTitle"
+      :aria-modal="open ? 'true' : 'false'"
+      tabindex="-1"
+      :aria-hidden="!open"
+      v-bind="$attrs"
+      @keydown.esc="onClose"
+    >
+      <div class="mc-modal__dialog" role="document">
+        <header class="mc-modal__header">
+          <span v-if="$slots.icon" class="mc-modal__icon">
+            <slot name="icon" />
+          </span>
+          <h2 class="mc-modal__title" id="modalTitle">
+            {{ title }}
+          </h2>
+          <MIconButton
+            v-if="closable"
+            class="mc-modal__close"
+            aria-label="Close"
+            ghost
+            @click="onClose"
+          >
+            <template #icon>
+              <Cross24 aria-hidden="true" />
+            </template>
+          </MIconButton>
+        </header>
+        <main class="mc-modal__body">
+          <p>{{ description }}</p>
+          <slot />
+        </main>
+        <footer v-if="$slots.footer" class="mc-modal__footer">
+          <span class="mc-modal__link">
+            <slot name="link" />
+          </span>
+          <slot name="footer" />
+        </footer>
+      </div>
+    </section>
+  </MOverlay>
+</template>
+
+<script setup lang="ts">
+import { computed, 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';
+/**
+ * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * if `true`, display the modal.
+     */
+    open?: boolean;
+    /**
+     * Title of the modal
+     */
+    title: string;
+    /**
+     * Description of the modal
+     */
+    description?: string;
+    /**
+     * if `true`, display the close button.
+     */
+    closable?: boolean;
+  }>(),
+  {
+    closable: true,
+  },
+);
+
+defineSlots<{
+  /**
+   * Use this slot to insert an icon next to the title of the modal
+   */
+  icon?: VNode;
+  /**
+   * Use this slot to insert the content of the modal
+   */
+  default?: VNode;
+  /**
+   * Use this slot to insert a link in the footer
+   */
+  link?: VNode;
+  /**
+   * Use this slot to insert buttons in the footer
+   */
+  footer?: VNode;
+}>();
+
+const classObject = computed(() => {
+  return {
+    'is-open': props.open,
+  };
+});
+
+watch(
+  () => props.open,
+  (newValue) => {
+    emit('update:open', newValue);
+  },
+);
+
+const onClose = () => {
+  emit('update:open', false);
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox value changes, updating the modelValue prop.
+   */
+  (on: 'update:open', value: boolean): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/modal';
+
+.mc-overlay {
+  filter: none;
+}
+</style>

package/src/components/numberbadge/MNumberBadge.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MNumberBadge from './MNumberBadge.vue';
 
 const meta: Meta<typeof MNumberBadge> = {
@@ -37,10 +37,8 @@ export const Danger: Story = {
 };
 
 export const Inverse: Story = {
-  parameters: {
-    backgrounds: {
-      default: 'Inverse',
-    },
+  globals: {
+    backgrounds: { value: 'inverse' },
   },
   args: { appearance: 'inverse' },
 };

package/src/components/overlay/MOverlay.stories.ts

@@ -1,11 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import MOverlay from './MOverlay.vue';
 
 const meta: Meta<typeof MOverlay> = {
   title: 'Overlay/Overlay',
   component: MOverlay,
   parameters: {
+    layout: 'fullscreen',
     docs: {
+      story: { height: '400px' },
       description: {
         component:
           'An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.',
@@ -15,13 +17,6 @@ const meta: Meta<typeof MOverlay> = {
   args: {
     isVisible: true,
   },
-  argTypes: {
-    $slots: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   render: (args) => ({
     components: { MOverlay },
     setup() {

package/src/components/pagination/MPagination.stories.ts

@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MPagination from './MPagination.vue';
 
 const meta: Meta<typeof MPagination> = {
-  title: 'Navgation/Pagination',
+  title: 'Navigation/Pagination',
   component: MPagination,
   parameters: {
     docs: {

package/src/components/pagination/MPagination.vue

@@ -31,7 +31,7 @@
     </div>
 
     <span v-if="compact" class="mc-pagination__label" aria-current="page">
-      {{ options.find(option => option.value === currentValue)?.text }}
+      {{ options.find((option) => option.value === currentValue)?.text }}
     </span>
 
     <MButton
@@ -108,11 +108,13 @@ watch(currentValue, (newVal) => {
 });
 
 const currentIndex = computed(() =>
-  props.options.findIndex(opt => opt.value === currentValue.value)
+  props.options.findIndex((opt) => opt.value === currentValue.value),
 );
 
 const isFirstPage = computed(() => currentIndex.value === 0);
-const isLastPage = computed(() => currentIndex.value === props.options.length - 1);
+const isLastPage = computed(
+  () => currentIndex.value === props.options.length - 1,
+);
 
 const previous = () => {
   const currentIndex = props.options.findIndex(

package/src/components/passwordinput/MPasswordInput.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MPasswordInput from './MPasswordInput.vue';
 

package/src/components/passwordinput/MPasswordInput.vue

@@ -16,10 +16,7 @@
       "
     />
     <div v-if="isClearable && modelValue" class="mc-controls-options">
-      <button
-        class="mc-controls-options__button"
-        @click="clearValue"
-      >
+      <button class="mc-controls-options__button" @click="clearValue">
         <CrossCircleFilled24
           class="mc-controls-options__icon"
           aria-hidden="true"
@@ -33,7 +30,7 @@
       :aria-checked="ariaChecked"
       :disabled="disabled"
       @click="toggleVisibility"
-      size="s" 
+      size="s"
       ghost
     >
       {{ isVisible ? buttonLabel.hide : buttonLabel.show }}

package/src/components/pincode/MPincode.spec.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MPincode from './MPincode.vue';
+
+describe('MPincode component', () => {
+  if (typeof ClipboardEvent === 'undefined') {
+    global.ClipboardEvent = class ClipboardEvent extends Event {
+      clipboardData: DataTransfer;
+      constructor(type: string, eventInitDict?: ClipboardEventInit) {
+        super(type, eventInitDict);
+        this.clipboardData =
+          (eventInitDict && eventInitDict.clipboardData) || new DataTransfer();
+      }
+      // eslint-disable-next-line
+    } as any;
+  }
+
+  it('renders correct number of input fields based on length', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        length: 6,
+        modelValue: '',
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    expect(inputs).toHaveLength(6);
+  });
+
+  it('updates modelValue as user types', async () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        length: 4,
+        modelValue: '',
+        'onUpdate:modelValue': vi.fn(),
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    await inputs[0].setValue('1');
+    await inputs[1].setValue('2');
+    await inputs[2].setValue('3');
+    await inputs[3].setValue('4');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    const emitted = wrapper.emitted('update:modelValue');
+    const lastEmitted = emitted?.[emitted.length - 1][0];
+    expect(lastEmitted).toBe('1234');
+  });
+
+  it('moves focus to next input on input', async () => {
+    const wrapper = mount(MPincode, {
+      attachTo: document.body, // Needed for focus
+      props: {
+        id: 'otp',
+        length: 4,
+        modelValue: '',
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    await inputs[0].setValue('5');
+    expect(document.activeElement).toBe(inputs[1].element);
+  });
+
+  it('moves focus to previous input on backspace if current is empty', async () => {
+    const wrapper = mount(MPincode, {
+      attachTo: document.body,
+      props: {
+        id: 'otp',
+        length: 4,
+        modelValue: '',
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    await inputs[0].setValue('5');
+    await inputs[1].element.focus();
+    const event = new KeyboardEvent('keydown', { key: 'Backspace' });
+    inputs[1].element.dispatchEvent(event);
+    await wrapper.vm.$nextTick();
+
+    expect(document.activeElement).toBe(inputs[0].element);
+  });
+
+  it('renders invalid class when isInvalid is true', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        isInvalid: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain('is-invalid');
+  });
+
+  it('disables inputs when disabled is true', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        disabled: true,
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    for (const input of inputs) {
+      expect(input.attributes('disabled')).toBeDefined();
+    }
+  });
+
+  it('makes inputs readonly when readonly is true', () => {
+    const wrapper = mount(MPincode, {
+      props: {
+        id: 'otp',
+        readonly: true,
+      },
+    });
+
+    const inputs = wrapper.findAll('input');
+    for (const input of inputs) {
+      expect(input.attributes('readonly')).toBeDefined();
+    }
+  });
+});

package/src/components/pincode/MPincode.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MPincode from './MPincode.vue';
+
+const meta: Meta<typeof MPincode> = {
+  title: 'Form Elements/Pincode',
+  component: MPincode,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.',
+      },
+    },
+  },
+  args: {
+    id: 'pincodeId',
+    ariaLabel: 'enter your code',
+  },
+  render: (args) => ({
+    components: { MPincode },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MPincode 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MPincode>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'valueId',
+    modelValue: '123098',
+  },
+};
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disableId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    modelValue: '123098',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};

package/src/components/pincode/MPincode.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="mc-pincode-input" :class="classObject" @paste="onPaste">
+    <input
+      v-for="(digit, index) in otp"
+      :key="index"
+      :id="`pincodeItem${index}`"
+      :ref="(el) => setInputRef(el, index)"
+      type="text"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="\d*"
+      autocomplete="one-time-code"
+      :name="name || `pincode-${id}`"
+      class="mc-pincode-input__control"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="digit"
+      v-bind="$attrs"
+      @input="(e) => onInput(e, index)"
+      @keydown.backspace="(e) => onBackspace(e, index)"
+      @keydown="(e) => onKeyDown(e, index)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, type ComponentPublicInstance } from 'vue';
+/**
+ * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the pincode element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The number of input displayed in the pincode element.
+     */
+    length?: 4 | 5 | 6;
+    /**
+     * The name attribute for the pincode element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the pincode field.
+     */
+    modelValue?: string | number;
+    /**
+     * If `true`, applies an invalid state to the pincode.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the pincode, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the pincode is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+  }>(),
+  {
+    length: 6,
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    'is-invalid': props.isInvalid,
+  };
+});
+
+const emit = defineEmits<{
+  (on: 'update:modelValue', value: string): void;
+}>();
+
+const otp = ref<string[]>(Array(props.length).fill(''));
+const inputRefs = ref<(HTMLInputElement | null)[]>([]);
+
+const setInputRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+  inputRefs.value[index] = el as HTMLInputElement | null;
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const str = String(value ?? '');
+    otp.value = Array.from({ length: props.length }, (_, i) => str[i] ?? '');
+  },
+  { immediate: true },
+);
+
+const focusInput = (index: number) => {
+  nextTick(() => inputRefs.value[index]?.focus());
+};
+
+const onInput = (e: Event, index: number) => {
+  const val = (e.target as HTMLInputElement).value.replace(/\D/g, '');
+  if (val) {
+    otp.value[index] = val[0];
+    emit('update:modelValue', otp.value.join(''));
+    if (index + 1 < props.length) focusInput(index + 1);
+  } else {
+    otp.value[index] = '';
+    emit('update:modelValue', otp.value.join(''));
+  }
+};
+
+const onKeyDown = (e: KeyboardEvent, index: number) => {
+  if (e.key === 'ArrowLeft' && index > 0) {
+    focusInput(index - 1);
+  } else if (e.key === 'ArrowRight' && index < props.length - 1) {
+    focusInput(index + 1);
+  } else if (e.key === 'Backspace') {
+    onBackspace(e, index);
+  }
+};
+
+const onBackspace = (e: KeyboardEvent, index: number) => {
+  if (otp.value[index] === '' && index > 0) {
+    otp.value[index - 1] = '';
+    emit('update:modelValue', otp.value.join(''));
+    focusInput(index - 1);
+  }
+};
+
+const onPaste = (e: ClipboardEvent) => {
+  e.preventDefault();
+  const pasted = e.clipboardData?.getData('text') ?? '';
+  const digits = pasted.replace(/\D/g, '').slice(0, props.length).split('');
+  otp.value = Array.from({ length: props.length }, (_, i) => digits[i] ?? '');
+  emit('update:modelValue', otp.value.join(''));
+  focusInput(Math.min(digits.length, props.length - 1));
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/pincode-input';
+</style>

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MQuantitySelector from './MQuantitySelector.vue';
 

package/src/components/radio/MRadio.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MRadio from './MRadio.vue';
 

package/src/components/radiogroup/MRadioGroup.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MRadioGroup from './MRadioGroup.vue';
 

package/src/components/select/MSelect.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import MSelect from './MSelect.vue';
 

package/src/components/statusbadge/MStatusBadge.stories.ts

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

package/src/components/statusdot/MStatusDot.stories.ts

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