@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/src/components/pincode/MPincode.vue

@@ -0,0 +1,148 @@
+<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.spec.ts

@@ -0,0 +1,262 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MQuantitySelector from './MQuantitySelector.vue';
+
+describe('MQuantitySelector component', () => {
+  it('renders the component with default values', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+      },
+    });
+
+    const input = wrapper.find('input');
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(input.exists()).toBe(true);
+    expect(input.element.value).toBe('1');
+    expect(input.attributes('min')).toBe('1');
+    expect(input.attributes('max')).toBe('100');
+    expect(input.attributes('step')).toBe('1');
+
+    expect(increaseButton.exists()).toBe(true);
+    expect(decreaseButton.exists()).toBe(true);
+    expect(increaseButton.attributes('disabled')).toBeUndefined();
+    expect(decreaseButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('emits an update when value changes via input', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 5,
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue(10);
+
+    const emittedValue = wrapper.emitted('update:modelValue');
+    expect(emittedValue).toBeTruthy();
+    expect(emittedValue?.[0]).toEqual([10]);
+  });
+
+  it('increments value when increase button is clicked', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 5,
+        max: 10,
+        step: 1,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    await increaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('6');
+  });
+
+  it('decrements value when decrease button is clicked', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 5,
+        min: 1,
+        step: 1,
+      },
+    });
+
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+    await decreaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('4');
+  });
+
+  it('does not increment beyond max value', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 10,
+        max: 10,
+        step: 1,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    await increaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('10');
+  });
+
+  it('does not decrement below min value', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 1,
+        min: 1,
+        step: 1,
+      },
+    });
+
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+    await decreaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('1');
+  });
+
+  it('disables input and buttons when disabled prop is true', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        disabled: true,
+      },
+    });
+
+    const input = wrapper.find('input');
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(input.attributes('disabled')).toBeDefined();
+    expect(increaseButton.attributes('disabled')).toBeDefined();
+    expect(decreaseButton.attributes('disabled')).toBeDefined();
+  });
+
+  it('renders with custom size class', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        size: 's',
+      },
+    });
+
+    const div = wrapper.find('.mc-quantity-selector');
+    expect(div.classes()).toContain('mc-quantity-selector--s');
+  });
+
+  it('hides increase and decrease buttons when readonly is true', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        readonly: true,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(increaseButton.exists()).toBe(false);
+    expect(decreaseButton.exists()).toBe(false);
+  });
+
+  it('renders and tests aria-label and aria-invalid for accessibility', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        isInvalid: true,
+        ariaLabel: 'Select quantity',
+      },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.attributes('aria-label')).toBe('Select quantity');
+    expect(input.attributes('aria-invalid')).toBe('true');
+  });
+
+  it('does not allow invalid input values (non-numeric)', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+      },
+    });
+
+    const input = wrapper.find('input');
+    await input.setValue('abc');
+    expect(input.element.value).toBe('1');
+  });
+
+  it('supports custom step values', async () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        modelValue: 10,
+        step: 5,
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    await increaseButton.trigger('click');
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('15');
+  });
+
+  it('renders custom increment and decrement labels', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+        incrementlabel: 'Increase Quantity',
+        decrementLabel: 'Decrease Quantity',
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(increaseButton.text()).toBe('Increase Quantity');
+    expect(decreaseButton.text()).toBe('Decrease Quantity');
+  });
+
+  it('correctly sets aria-controls', () => {
+    const wrapper = mount(MQuantitySelector, {
+      props: {
+        id: 'quantity-selector-1',
+      },
+    });
+
+    const increaseButton = wrapper.find(
+      '.mc-quantity-selector__button--increase',
+    );
+    const decreaseButton = wrapper.find(
+      '.mc-quantity-selector__button--decrease',
+    );
+
+    expect(increaseButton.attributes('aria-controls')).toBe(
+      'quantity-selector-1',
+    );
+    expect(decreaseButton.attributes('aria-controls')).toBe(
+      'quantity-selector-1',
+    );
+  });
+});

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MQuantitySelector from './MQuantitySelector.vue';
+
+const meta: Meta<typeof MQuantitySelector> = {
+  title: 'Form Elements/Quantity Selector',
+  component: MQuantitySelector,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.',
+      },
+    },
+  },
+  args: {
+    id: 'quantitySelectorId',
+    modelValue: 10,
+    min: 5,
+    max: 20,
+  },
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['s', 'm'],
+    },
+  },
+  render: (args) => ({
+    components: { MQuantitySelector },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MQuantitySelector 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MQuantitySelector>;
+
+export const Default: Story = {};
+
+export const Step: Story = {
+  args: {
+    id: 'stepId',
+    step: 5,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    id: 'smallId',
+    size: 's',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    id: 'disableId',
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    id: 'invalidId',
+    isInvalid: true,
+  },
+};
+
+export const readOnly: Story = {
+  args: {
+    id: 'readonlyId',
+    readonly: true,
+  },
+};