@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.5

package/src/components/passwordinput/MPasswordInput.vue

@@ -1,96 +1,149 @@
 <template>
-  <div class="mc-password-input" :class="cssFieldElementClass">
+  <div class="mc-password-input mc-text-input" :class="classObject">
     <input
-      :type="setType"
-      :required="required"
-      class="mc-text-input mc-password-input__control"
-      :class="setInputClasses"
+      class="mc-password-input__control mc-text-input__control"
+      v-model="modelValue"
+      :id="id"
+      :type="inputType"
+      :name="name"
+      :placeholder="placeholder"
+      :disabled="disabled"
       :aria-invalid="isInvalid"
+      :readonly="readonly"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
     />
-
-    <button
+    <div v-if="isClearable && modelValue" class="mc-controls-options">
+      <button
+        class="mc-controls-options__button"
+        @click="clearValue"
+      >
+        <CrossCircleFilled24
+          class="mc-controls-options__icon"
+          aria-hidden="true"
+        />
+        <span class="mc-controls-options__label">{{ clearLabel }}</span>
+      </button>
+    </div>
+    <MButton
       ref="button"
-      type="button"
-      class="mc-password-input__button"
       role="switch"
-      :aria-pressed="setAriaPressed"
-      @click="onClick"
+      :aria-checked="ariaChecked"
+      :disabled="disabled"
+      @click="toggleVisibility"
+      size="s" 
+      ghost
     >
-      {{ setButtonLabel }}
-    </button>
+      {{ isVisible ? buttonLabel.hide : buttonLabel.show }}
+    </MButton>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MPasswordInput',
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import MButton from '../button/MButton.vue';
 
-  inject: {
-    cssFieldElementClass: {
-      default: '',
-    },
+/**
+ * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the password input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the password input element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the password input field.
+     */
+    modelValue?: string | number;
+    /**
+     * A placeholder text to show in the password input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the password input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the password input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the password input has a value.
+     */
+    isClearable?: boolean;
+    /**
+     * The label text for the clear button
+     */
+    clearLabel?: string;
+    /**
+     * Labels of the button displayed when showing or hiding the password
+     */
+    buttonLabel?: {
+      show: string;
+      hide: string;
+    };
+  }>(),
+  {
+    clearLabel: 'Clear content',
+    buttonLabel: () => ({ show: 'Show', hide: 'Hide' }),
   },
+);
 
-  props: {
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-    isValid: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-    buttonLabel: {
-      type: Object,
-      default: function () {
-        return { show: 'Show', hide: 'Hide' };
-      },
-    },
-  },
+const classObject = computed(() => ({
+  'is-invalid': props.isInvalid,
+}));
 
-  data: function () {
-    return {
-      isVisible: false,
-    };
-  },
+// Local state management
+const modelValue = ref(props.modelValue);
+const isVisible = ref(false);
 
-  computed: {
-    setType() {
-      return this.isVisible ? 'text' : 'password';
-    },
-    setInputClasses() {
-      return {
-        'is-valid': this.isValid,
-        'is-invalid': this.isInvalid,
-      };
-    },
-    setAriaPressed() {
-      return this.isVisible ? 'true' : 'false';
-    },
-    setButtonLabel() {
-      return this.isVisible ? this.buttonLabel.hide : this.buttonLabel.show;
-    },
-  },
+/**
+ * Clear the input value.
+ */
+const clearValue = () => {
+  modelValue.value = '';
+  emit('update:modelValue', '');
+};
 
-  methods: {
-    onClick() {
-      const aria = this.$refs.button.getAttribute('aria-pressed') === 'false';
-      this.isVisible = aria;
-    },
-  },
+/**
+ * Toggle the visibility of the password.
+ */
+const toggleVisibility = () => {
+  isVisible.value = !isVisible.value;
 };
+
+/**
+ * Compute the input type based on visibility state.
+ */
+const inputType = computed(() => (isVisible.value ? 'text' : 'password'));
+
+/**
+ * Aria attributes for accessibility.
+ */
+const ariaChecked = computed(() => (isVisible.value ? 'true' : 'false'));
+
+const emit = defineEmits<{
+  /**
+   * Emits when the input value changes, updating the `modelValue` prop.
+   */
+  (on: 'update:modelValue', value: string | number): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
-@import 'components/_c.password-input';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/controls-options';
+@use '@mozaic-ds/styles/components/text-input';
+@use '@mozaic-ds/styles/components/password-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';
+import { action } from '@storybook/addon-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,
+  },
+};