@mozaic-ds/vue 1.0.0-rc.3 → 2.2.0

package/src/components/checkbox/MCheckbox.vue

@@ -1,118 +1,77 @@
 <template>
-  <div v-if="hasLabel" class="mc-checkbox">
+  <div class="mc-checkbox">
     <input
-      v-bind="$attrs"
       :id="id"
-      ref="input"
-      :name="name"
       type="checkbox"
       class="mc-checkbox__input"
-      :class="setInputClasses"
-      :checked="checked"
-      :required="required"
+      :class="classObject"
+      :name="name"
+      :checked="modelValue"
+      :indeterminate="indeterminate"
       :disabled="disabled"
-      @change="$emit('change', $event.target.checked)"
+      :aria-invalid="isInvalid"
+      v-bind="$attrs"
+      @change="
+        emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
     />
-    <label :for="id" class="mc-checkbox__label">
-      <slot name="label">
-        {{ label }}
-      </slot>
+    <label v-if="label" :for="id" class="mc-checkbox__label">
+      {{ label }}
     </label>
   </div>
-
-  <input
-    v-else
-    v-bind="$attrs"
-    :id="id"
-    ref="input"
-    :name="name"
-    type="checkbox"
-    class="mc-checkbox__input"
-    :class="setInputClasses"
-    :checked="checked"
-    :required="required"
-    :disabled="disabled"
-    @change="$emit('change', $event.target.checked)"
-  />
 </template>
 
-<script>
-export default {
-  name: 'MCheckbox',
-
-  inheritAttrs: false,
-
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    checked: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false,
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    hasLabel() {
-      return this.label != null || this.$slots.label != null;
-    },
-
-    setInputClasses() {
-      return {
-        'is-invalid': this.isInvalid,
-      };
-    },
-  },
+<script setup lang="ts">
+import { computed } from 'vue';
 
-  watch: {
-    indeterminate() {
-      this.setIndeterminate();
-    },
-  },
+/**
+ * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
+ */
+const props = defineProps<{
+  /**
+   * A unique identifier for the checkbox, used to associate the label with the form element.
+   */
+  id: string;
+  /**
+   * The name attribute for the checkbox element, typically used for form submission.
+   */
+  name?: string;
+  /**
+   * The text label displayed next to the checkbox.
+   */
+  label?: string;
+  /**
+   * The checkbox's checked state, bound via v-model.
+   */
+  modelValue?: boolean;
+  /**
+   * Sets the checkbox to an indeterminate state (partially selected).
+   */
+  indeterminate?: boolean;
+  /**
+   * If `true`, applies an invalid state to the checkbox.
+   */
+  isInvalid?: boolean;
+  /**
+   * If `true`, disables the checkbox, making it non-interactive.
+   */
+  disabled?: boolean;
+}>();
 
-  mounted() {
-    this.setIndeterminate();
-  },
+const classObject = computed(() => {
+  return {
+    'is-invalid': props.isInvalid,
+  };
+});
 
-  methods: {
-    setIndeterminate() {
-      this.$refs.input.indeterminate = this.indeterminate;
-    },
-  },
-};
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: boolean): void;
+}>();
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/c.checkbox';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/checkbox';
 </style>

package/src/components/checkboxgroup/MCheckboxGroup.spec.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MCheckboxGroup from './MCheckboxGroup.vue';
+import MCheckbox from '@/components/checkbox/MCheckbox.vue';
+
+describe('MCheckboxGroup.vue', () => {
+  it('renders checkboxes based on options', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MCheckboxGroup, {
+      props: {
+        name: 'test-name',
+        options,
+      },
+    });
+
+    const checkboxes = wrapper.findAllComponents(MCheckbox);
+    expect(checkboxes.length).toBe(2);
+
+    expect(checkboxes[0].props('label')).toBe('Option 1');
+    expect(checkboxes[1].props('label')).toBe('Option 2');
+  });
+
+  it('updates modelValue when a checkbox is checked', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MCheckboxGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: [],
+      },
+    });
+
+    const checkbox1 = wrapper.findAllComponents(MCheckbox)[0].find('input');
+    await checkbox1.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([['option1']]);
+
+    const checkbox2 = wrapper.findAllComponents(MCheckbox)[1].find('input');
+    await checkbox2.setChecked(true);
+
+    expect(wrapper.emitted('update:modelValue')[1]).toEqual([
+      ['option1', 'option2'],
+    ]);
+  });
+
+  it('syncs with the v-model when initial value is passed', async () => {
+    const options = [
+      { id: '1', label: 'Option 1', value: 'option1' },
+      { id: '2', label: 'Option 2', value: 'option2' },
+    ];
+
+    const wrapper = mount(MCheckboxGroup, {
+      props: {
+        name: 'test-name',
+        options,
+        modelValue: ['option1'],
+      },
+    });
+
+    const checkboxes = wrapper.findAllComponents(MCheckbox);
+    expect(checkboxes[0].props('modelValue')).toBe(true);
+    expect(checkboxes[1].props('modelValue')).toBe(false);
+
+    await wrapper.setProps({ modelValue: ['option2'] });
+
+    expect(checkboxes[0].props('modelValue')).toBe(false);
+    expect(checkboxes[1].props('modelValue')).toBe(true);
+  });
+});

package/src/components/checkboxgroup/MCheckboxGroup.stories.ts

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MCheckboxGroup from './MCheckboxGroup.vue';
+
+const meta: Meta<typeof MCheckboxGroup> = {
+  title: 'Form Elements/Checkbox Group',
+  component: MCheckboxGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#checkbox-group).',
+      },
+    },
+  },
+  args: {
+    name: 'checkboxGroupName',
+    modelValue: ['checkbox2'],
+    options: [
+      {
+        id: 'checkbox-01',
+        label: 'checkbox Label',
+        value: 'checkbox1',
+      },
+      {
+        id: 'checkbox-02',
+        label: 'checkbox Label',
+        value: 'checkbox2',
+      },
+      {
+        id: 'checkbox-03',
+        label: 'checkbox Label',
+        value: 'checkbox3',
+      },
+      {
+        id: 'checkbox-04',
+        label: 'checkbox Label',
+        value: 'checkbox4',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MCheckboxGroup },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MCheckboxGroup 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      />
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCheckboxGroup>;
+
+export const Default: Story = {};

package/src/components/checkboxgroup/MCheckboxGroup.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="mc-field__container" :class="classObjectContainer">
+    <MCheckbox
+      v-for="option in options"
+      :id="option.id"
+      :key="option.id"
+      :label="option.label"
+      :is-invalid="option.isInvalid"
+      :name="name"
+      class="mc-field__item"
+      :class="classObjectItem"
+      :model-value="modelValue ? modelValue.includes(option.value) : undefined"
+      :disabled="option.disabled"
+      @update:model-value="(v: boolean) => onChange(v, option.value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import MCheckbox from '../checkbox/MCheckbox.vue';
+
+/**
+ * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
+ */
+const props = defineProps<{
+  /**
+   * The name attribute for the checkbox element, typically used for form submission.
+   */
+  name: string;
+  /**
+   * Property used to manage the values checked by v-model
+   * (Do not use directly)
+   */
+  modelValue?: Array<string>;
+  /**
+   * list of properties of each checkbox button of the checkbox group
+   */
+  options: Array<{
+    id: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+  }>;
+  /**
+   * If `true`, make the form element of the group inline.
+   */
+  inline?: boolean;
+}>();
+
+const selectedValue = ref<string[]>([]);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedValue.value = newValue || [];
+  },
+  { immediate: true },
+);
+
+const onChange = (isChecked: boolean, value: string) => {
+  let values = [...selectedValue.value];
+
+  if (isChecked && !values.includes(value)) {
+    values.push(value);
+  } else {
+    values = values.filter((val) => val !== value);
+  }
+
+  emit('update:modelValue', values);
+  selectedValue.value = values;
+};
+
+const classObjectContainer = computed(() => {
+  return {
+    'mc-field__container--inline': props.inline,
+  };
+});
+
+const classObjectItem = computed(() => {
+  return {
+    'mc-field__container--inline__item': props.inline,
+  };
+});
+
+const emit = defineEmits<{
+  /**
+   * Emits when the checkbox group value changes, updating the modelValue prop.
+   */
+  (on: 'update:modelValue', value: Array<string>): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/field';
+</style>

package/src/components/datepicker/MDatepicker.spec.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MDatepicker from './MDatepicker.vue'; // adjust path accordingly
+
+describe('MDatepicker component', () => {
+  it('renders correctly with default props', () => {
+    const wrapper = mount(MDatepicker, {
+      props: {
+        id: 'test-id',
+      },
+    });
+
+    const input = wrapper.get('input');
+    expect(input.attributes('id')).toBe('test-id');
+    expect(input.element.value).toBe('');
+  });
+
+  it('binds props correctly', () => {
+    const wrapper = mount(MDatepicker, {
+      props: {
+        id: 'date-id',
+        name: 'date',
+        modelValue: '2025-07-25',
+        disabled: true,
+        isInvalid: true,
+        readonly: true,
+      },
+    });
+
+    const input = wrapper.get('input');
+    expect(input.element.value).toBe('2025-07-25');
+    expect(input.attributes('disabled')).toBeDefined();
+    expect(input.attributes('readonly')).toBeDefined();
+    expect(input.attributes('aria-invalid')).toBe('true');
+  });
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mount(MDatepicker, {
+      props: {
+        id: 'date-id',
+        modelValue: '',
+      },
+    });
+
+    const input = wrapper.get('input');
+    await input.setValue('2025-01-01');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual(['2025-01-01']);
+  });
+
+  it('shows clear button when isClearable and modelValue are truthy', () => {
+    const wrapper = mount(MDatepicker, {
+      props: {
+        id: 'date-id',
+        modelValue: '2025-01-01',
+        isClearable: true,
+        clearLabel: 'Clear it',
+      },
+    });
+
+    expect(wrapper.find('.mc-controls-options__button').exists()).toBe(true);
+    expect(wrapper.text()).toContain('Clear it');
+  });
+
+  it('clears value when clear button is clicked', async () => {
+    const wrapper = mount(MDatepicker, {
+      props: {
+        id: 'date-id',
+        modelValue: '2025-01-01',
+        isClearable: true,
+      },
+    });
+
+    const button = wrapper.get('.mc-controls-options__button');
+    await button.trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue');
+    expect(emitted).toBeTruthy();
+    expect(emitted!.slice(-1)[0]).toEqual(['']);
+  });
+
+  it('does not show clear button if modelValue is empty', () => {
+    const wrapper = mount(MDatepicker, {
+      props: {
+        id: 'date-id',
+        modelValue: '',
+        isClearable: true,
+      },
+    });
+
+    expect(wrapper.find('.mc-controls-options__button').exists()).toBe(false);
+  });
+});

package/src/components/datepicker/MDatepicker.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MDatepicker from './MDatepicker.vue';
+
+const meta: Meta<typeof MDatepicker> = {
+  title: 'Form Elements/Datepicker',
+  component: MDatepicker,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.',
+      },
+    },
+  },
+  args: {
+    id: 'datepickerId',
+    ariaLabel: 'enter the date',
+  },
+  render: (args) => ({
+    components: { MDatepicker },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MDatepicker 
+        v-bind="args"
+        @update:modelValue="handleUpdate"
+      ></MDatepicker>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MDatepicker>;
+
+export const WithValue: Story = {
+  args: {
+    id: 'withValueId',
+    modelValue: '2025-07-22',
+    isClearable: true,
+  },
+};
+
+export const Default: Story = {};
+
+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,
+  },
+};

package/src/components/datepicker/MDatepicker.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="mc-datepicker mc-text-input" :class="classObject">
+    <input
+      :id="id"
+      class="mc-datepicker__control mc-text-input__control"
+      :value="modelValue"
+      type="date"
+      :name="name"
+      :disabled="disabled"
+      :aria-invalid="isInvalid"
+      :readonly="readonly"
+      v-bind="$attrs"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+    />
+
+    <div
+      v-if="isClearable && modelValue"
+      class="mc-datepicker__controls-options mc-controls-options"
+    >
+      <button
+        type="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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+/**
+ * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * A unique identifier for the datepicker element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The name attribute for the datepicker element, typically used for form submission.
+     */
+    name?: string;
+    /**
+     * The current value of the datepicker field.
+     */
+    modelValue?: string | number;
+    /**
+     * If `true`, applies an invalid state to the datepicker.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the datepicker, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the size of the datepicker
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the datepicker is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the datepicker has a value.
+     */
+    isClearable?: boolean;
+    /**
+     * The label text for the clear button
+     */
+    clearLabel?: string;
+  }>(),
+  {
+    size: 'm',
+    clearLabel: 'clear content',
+  },
+);
+
+const classObject = computed(() => {
+  return {
+    [`mc-text-input--${props.size} mc-datepicker--${props.size}`]:
+      props.size && props.size != 'm',
+    'is-invalid': props.isInvalid,
+  };
+});
+
+const modelValue = ref(props.modelValue);
+const clearValue = () => {
+  modelValue.value = '';
+  emit('update:modelValue', '');
+};
+
+const emit = defineEmits<{
+  /**
+   * Emits when the datepicker value changes, updating the `modelValue` prop.
+   */
+  (on: 'update:modelValue', value: string | number): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/text-input';
+@use '@mozaic-ds/styles/components/datepicker';
+@use '@mozaic-ds/styles/components/controls-options';
+</style>