@mozaic-ds/vue 2.11.0 → 2.13.0

package/src/components/checklistmenu/MCheckListMenu.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MCheckListMenu from './MCheckListMenu.vue';
+import { action } from 'storybook/actions';
+
+const meta: Meta<typeof MCheckListMenu> = {
+  title: 'Navigation/Check-list menu',
+  component: MCheckListMenu,
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.',
+      },
+    },
+  },
+  args: {
+    items: [
+      { label: 'Label', checked: true },
+      { label: 'Label', checked: true },
+      { label: 'Label', checked: false },
+      { label: 'Label', checked: true },
+    ],
+    modelValue: 0,
+  },
+  render: (args) => ({
+    components: { MCheckListMenu },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      return { args, handleUpdate };
+    },
+    template: `
+      <MCheckListMenu v-model="args.modelValue" v-bind="args" @update:modelValue="handleUpdate"></MCheckListMenu>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MCheckListMenu>;
+
+export const Default: Story = {};
+
+export const Outlined: Story = {
+  args: {
+    outlined: true,
+  },
+};

package/src/components/checklistmenu/MCheckListMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <MBuiltInMenu
+    v-model="currentMenuItem"
+    :items="menuItems"
+    :outlined="props.outlined"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MBuiltInMenu from '../builtinmenu/MBuiltInMenu.vue';
+import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';
+import { CheckCircleFilled24 } from '@mozaic-ds/icons-vue';
+
+/**
+ * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+ */
+
+export type CheckListMenuItem = Omit<MenuItem, 'icon'> & { checked: boolean };
+
+const props = defineProps<{
+  /**
+   * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+   */
+  modelValue?: number;
+  /**
+   * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.
+   */
+  items: CheckListMenuItem[];
+  /**
+   * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+   */
+  outlined?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the selected item changes, providing the updated selected value.
+   */
+  (on: 'update:modelValue', value: number): void;
+}>();
+
+const currentMenuItem = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: number) {
+    emit('update:modelValue', value);
+  },
+});
+
+const menuItems = computed<MenuItem[]>(() =>
+  props.items.map((item) => ({
+    label: item.label,
+    icon: item.checked ? CheckCircleFilled24 : undefined,
+    href: item.href,
+    to: item.to,
+    target: item.target,
+  })),
+);
+</script>

package/src/components/checklistmenu/README.md

@@ -0,0 +1,32 @@
+# MCheckListMenu
+
+A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | - |
+| `items*` | Defines the menu items, each of which sets a checked state and act as a button, link, or router-link. | `CheckListMenuItem[]` | - |
+| `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` | - |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emitted when the selected item changes, providing the updated selected value. | [value: number] |
+
+## Dependencies
+
+### Depends on
+
+- [MBuiltInMenu](../builtinmenu)
+
+### Graph
+
+```mermaid
+graph TD;
+  MCheckListMenu --> MBuiltInMenu
+style MCheckListMenu fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/circularprogressbar/README.md

@@ -9,6 +9,20 @@ A circular progress bar visually represents progress toward a goal or completion
 | --- | --- | --- | --- | 
 | `size` | Sets the size of the progress bar. | `"s"` `"m"` `"l"` | - |
 | `value` | The current value of the progress bar. | `number` | `0` |
-| `type` | Shows either a percentage or custom content. | `"percentage"` `"content"` | `"percentage"` |
+| `type` | Shows either a percentage or custom content. | `"content"` `"percentage"` | `"percentage"` |
 | `contentValue` | Main content shown when `type` is `'content'`. | `string` | - |
 | `additionalInfo` | Additional text shown to define the `contentValue`. | `string` | - |
+
+## Dependencies
+
+### Used By
+
+- [MStepperCompact](../steppercompact)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStepperCompact --> MCircularProgressbar
+style MCircularProgressbar fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/datepicker/MDatepicker.vue

@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-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.<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 section](/docs/form-elements-field--docs#input).
  */

package/src/components/divider/README.md

@@ -16,3 +16,25 @@ A divider is a visual element used to separate content or sections within an int
 | Name | Description |
 | --- | --- |
 | `default` | Use this slot to insert the content who need a vertical divider |
+
+## Dependencies
+
+### Used By
+
+- [MActionBottomBar](../actionbottombar)
+- [MActionListbox](../actionlistbox)
+- [MFileUploaderItem](../fileuploaderitem)
+- [MStepperBottomBar](../stepperbottombar)
+- [MTabs](../tabs)
+
+### Graph
+
+```mermaid
+graph TD;
+  MActionBottomBar --> MDivider
+  MActionListbox --> MDivider
+  MFileUploaderItem --> MDivider
+  MStepperBottomBar --> MDivider
+  MTabs --> MDivider
+style MDivider fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/drawer/MDrawer.vue

@@ -66,8 +66,7 @@
 
 <script setup lang="ts">
 import { computed, watch, type VNode, ref, onMounted, onUnmounted } from 'vue';
-import ArrowBack24 from '@mozaic-ds/icons-vue/src/components/ArrowBack24/ArrowBack24.vue';
-import Cross24 from '@mozaic-ds/icons-vue/src/components/Cross24/Cross24.vue';
+import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MOverlay from '../overlay/MOverlay.vue';
 /**

package/src/components/drawer/README.md

@@ -29,3 +29,19 @@ A drawer is a sliding panel that appears from the side of the screen, providing
 | --- | --- | --- |
 | `back` | Emits when click back button of the drawer. | [] |
 | `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+- [MOverlay](../overlay)
+
+### Graph
+
+```mermaid
+graph TD;
+  MDrawer --> MIconButton
+  MDrawer --> MOverlay
+style MDrawer fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/field/README.md

@@ -23,3 +23,17 @@ A field label is a text element that identifies the purpose of an input field, p
 | Name | Description |
 | --- | --- |
 | `default` | Use this slot to insert the form element of your choice |
+
+## Dependencies
+
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MField --> MLoader
+style MField fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/fileuploader/MFileUploader.spec.ts

@@ -0,0 +1,304 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MFileUploader, {
+  type FilesValidationState,
+  type FileUploaderProps,
+} from './MFileUploader.vue';
+import { nextTick } from 'vue';
+
+type WrapperVm = {
+  dragCounter: number;
+};
+
+const globalStubs = {
+  MFileUploaderItem: {
+    template: '<div class="file-item"><slot name="action" /></div>',
+    name: 'MFileUploaderItem',
+    props: ['file', 'valid'],
+    emits: ['delete'],
+  },
+  Upload24: true,
+};
+
+const createFile = (name: string, size: number, type: string) => {
+  const file = new File(['a'.repeat(size)], name, { type });
+  Object.defineProperty(file, 'size', { value: size });
+  return file;
+};
+
+const mountUploader = (props = {} as FileUploaderProps) =>
+  mount(MFileUploader, { props, global: { stubs: globalStubs } });
+
+const triggerFileInputChange = async (
+  wrapper: ReturnType<typeof mount>,
+  files: File[],
+) => {
+  const input = wrapper.find('input[type="file"]');
+  Object.defineProperty(input.element, 'files', {
+    value: files,
+    configurable: true,
+  });
+  await input.trigger('change');
+};
+
+const triggerDrop = async (
+  wrapper: ReturnType<typeof mount>,
+  files: File[],
+) => {
+  const dropZone = wrapper.find('.mc-file-uploader__input');
+  await dropZone.trigger('drop', {
+    dataTransfer: {
+      files,
+      items: files.map((f) => ({
+        kind: 'file',
+        type: f.type,
+        getAsFile: () => f,
+      })),
+    },
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+  });
+};
+
+describe('MFileUploader.vue', () => {
+  it('allows file upload via input', async () => {
+    const wrapper = mountUploader({
+      modelValue: [],
+    });
+    const file = createFile('test.png', 1024, 'image/png');
+    await triggerFileInputChange(wrapper, [file]);
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  });
+
+  it('clears input and returns if no new valid files', async () => {
+    const existingFile = createFile('exist.png', 100, 'image/png');
+    const wrapper = mountUploader({
+      modelValue: [existingFile],
+    });
+
+    const input = wrapper.find('input[type="file"]');
+    Object.defineProperty(input.element, 'files', {
+      value: [],
+      configurable: true,
+    });
+
+    await input.trigger('change');
+
+    expect((input.element as HTMLInputElement).value).toBe('');
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  });
+
+  it.each([
+    ['Enter', 'Enter'],
+    ['Space', ' '],
+  ])('clicks file input when %s is pressed', async (_, key) => {
+    const wrapper = mountUploader({
+      modelValue: [],
+    });
+    const inputEl = wrapper.find('input[type="file"]')
+      .element as HTMLInputElement;
+    const clickSpy = vi.spyOn(inputEl, 'click');
+    const label = wrapper.find('.mc-file-uploader__input');
+    await label.trigger('keydown', { key });
+    expect(clickSpy).toHaveBeenCalled();
+  });
+
+  it('allows drag and drop', async () => {
+    const wrapper = mountUploader({
+      modelValue: [],
+      hasDragDrop: true,
+    });
+    const file = createFile('dragged.pdf', 500, 'application/pdf');
+    await triggerDrop(wrapper, [file]);
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  });
+
+  it('handles dragenter/dragleave class correctly', async () => {
+    const wrapper = mountUploader({
+      modelValue: [],
+      hasDragDrop: true,
+    });
+    const labelEl = wrapper.get('.mc-file-uploader__input');
+
+    await labelEl.trigger('dragenter');
+    expect(labelEl.classes()).toContain('mc-file-uploader__input--dragged');
+
+    await labelEl.trigger('dragleave');
+    expect(labelEl.classes()).not.toContain('mc-file-uploader__input--dragged');
+  });
+
+  it('does not update on drop if disabled or hasDragDrop is false', async () => {
+    const wrapperFalse = mountUploader({
+      modelValue: [],
+      hasDragDrop: false,
+    });
+    await triggerDrop(wrapperFalse, [
+      createFile('a.pdf', 100, 'application/pdf'),
+    ]);
+    expect(wrapperFalse.emitted('update:modelValue')).toBeFalsy();
+
+    const wrapperDisabled = mountUploader({
+      modelValue: [],
+      hasDragDrop: true,
+      disabled: true,
+    });
+    await triggerDrop(wrapperDisabled, [
+      createFile('b.pdf', 100, 'application/pdf'),
+    ]);
+    expect(wrapperDisabled.emitted('update:modelValue')).toBeFalsy();
+  });
+
+  it('does not update dragCounter on dragEnter if hasDragDrop is false', async () => {
+    const buttonWrapper = mountUploader({
+      modelValue: [],
+      hasDragDrop: false,
+    });
+
+    const vm = buttonWrapper.vm as unknown as WrapperVm;
+
+    vm.dragCounter = 1;
+    const input = buttonWrapper.find('.mc-file-uploader__input');
+    await input.trigger('dragenter');
+    expect(vm.dragCounter).toBe(1);
+  });
+
+  it('does not update dragCounter on dragLeave if hasDragDrop is false', async () => {
+    const buttonWrapper = mountUploader({
+      modelValue: [],
+      hasDragDrop: false,
+    });
+
+    const vm = buttonWrapper.vm as unknown as WrapperVm;
+
+    vm.dragCounter = 1;
+    const input = buttonWrapper.find('.mc-file-uploader__input');
+    await input.trigger('dragleave');
+    expect(vm.dragCounter).toBe(1);
+  });
+
+  it('adds new files on change when multiple = true', async () => {
+    const file1 = createFile('a.txt', 1, 'text/plain');
+    const file2 = createFile('b.txt', 1, 'text/plain');
+
+    const wrapper = mountUploader({
+      modelValue: [file1],
+      multiple: true,
+    });
+
+    const input = wrapper.find('input[type="file"]');
+    Object.defineProperty(input.element, 'files', {
+      value: [file2],
+      configurable: true,
+    });
+
+    await input.trigger('change');
+
+    const updates = wrapper.emitted('update:modelValue')![0][0] as File[];
+    expect(updates.map((f) => f.name)).toEqual(['a.txt', 'b.txt']);
+    expect((input.element as HTMLInputElement).value).toBe('');
+  });
+
+  it('replaces existing file on change when multiple = false', async () => {
+    const file1 = createFile('a.txt', 1, 'text/plain');
+    const file2 = createFile('b.txt', 1, 'text/plain');
+
+    const wrapper = mountUploader({
+      modelValue: [file1],
+      multiple: false,
+    });
+
+    const input = wrapper.find('input[type="file"]');
+    Object.defineProperty(input.element, 'files', {
+      value: [file2],
+      configurable: true,
+    });
+
+    await input.trigger('change');
+
+    const updates = wrapper.emitted('update:modelValue')![0][0] as File[];
+    expect(updates.map((f) => f.name)).toEqual(['b.txt']);
+    expect((input.element as HTMLInputElement).value).toBe('');
+  });
+
+  it('merges or replaces files on drop based on multiple prop', async () => {
+    const file1 = createFile('a.txt', 1, 'text/plain');
+    const file2 = createFile('b.txt', 1, 'text/plain');
+
+    // multiple = true
+    const wrapperMulti = mountUploader({
+      modelValue: [file1],
+      multiple: true,
+      hasDragDrop: true,
+    });
+    await triggerDrop(wrapperMulti, [file2]);
+    const payloadMulti = wrapperMulti.emitted(
+      'update:modelValue',
+    )![0][0] as File[];
+    expect(payloadMulti.map((f) => f.name)).toEqual(['a.txt', 'b.txt']);
+
+    // multiple = false
+    const wrapperSingle = mountUploader({
+      modelValue: [file1],
+      multiple: false,
+    });
+    await triggerFileInputChange(wrapperSingle, [file2]);
+    const payloadSingle = wrapperSingle.emitted(
+      'update:modelValue',
+    )![0][0] as File[];
+    expect(payloadSingle.map((f) => f.name)).toEqual(['b.txt']);
+  });
+
+  describe('Validation', () => {
+    it('validates size, extension and custom rules', async () => {
+      const valid = createFile('good.png', 1000, 'image/png');
+      const heavy = createFile('heavy.png', 5000, 'image/png');
+      const wrong = createFile('wrong.txt', 1000, 'text/plain');
+      const customRule = vi.fn().mockReturnValue(false);
+
+      const wrapper = mountUploader({
+        modelValue: [
+          valid,
+          heavy,
+          wrong,
+          createFile('test.png', 100, 'image/png'),
+        ],
+        maxSize: 2000,
+        allowedExtensions: ['png', 'jpg'],
+        rules: [customRule],
+      });
+
+      const emitted = wrapper.emitted(
+        'validation',
+      )![0][0] as FilesValidationState;
+      expect(emitted['good.png'].size).toBe(true);
+      expect(emitted['heavy.png'].size).toBe(false);
+      expect(emitted['test.png'].customValidation).toBe(false);
+    });
+  });
+
+  it('handles file deletion', async () => {
+    const f1 = createFile('1.png', 100, 'image/png');
+    const f2 = createFile('2.png', 100, 'image/png');
+    const wrapper = mountUploader({
+      modelValue: [f1, f2],
+      showFilesList: true,
+    });
+
+    const items = wrapper.findAllComponents({ name: 'MFileUploaderItem' });
+    await items[0].vm.$emit('delete');
+    await nextTick();
+
+    const payload = wrapper.emitted('update:modelValue')![0][0] as File[];
+    expect(payload.map((f) => f.name)).toEqual(['2.png']);
+  });
+
+  it('disables input when disabled=true', () => {
+    const wrapper = mountUploader({
+      disabled: true,
+      modelValue: [],
+    });
+    expect(
+      wrapper.find('input[type="file"]').attributes('disabled'),
+    ).toBeDefined();
+  });
+});

package/src/components/fileuploader/MFileUploader.stories.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+import MFileUploader from './MFileUploader.vue';
+import MFileUploaderItem from '../fileuploaderitem/MFileUploaderItem.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof MFileUploader> = {
+  title: 'Form Elements/File uploader',
+  component: MFileUploader,
+  subcomponents: { MFileUploaderItem },
+  tags: ['v2'],
+  parameters: {
+    docs: {
+      description: {
+        component: `A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.`,
+      },
+    },
+  },
+  args: {
+    hasDragDrop: true,
+    showFilesList: true,
+    disabled: false,
+    title: 'Drag & drop',
+    subtitle: 'or',
+    uploadButtonLabel: 'Upload file(s)',
+    multiple: true,
+  },
+  render: (args) => ({
+    components: { MFileUploader },
+    setup() {
+      const handleUpdate = action('update:modelValue');
+
+      const files = ref([]);
+      return { args, files, handleUpdate };
+    },
+    template: `
+      <MFileUploader v-model="files" v-bind="args" @update:modelValue="handleUpdate">
+      </MFileUploader>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MFileUploader>;
+type ItemStory = StoryObj<typeof MFileUploaderItem>;
+
+export const Standard: Story = {};
+
+export const WithoutDragAndDrop = {
+  args: {
+    hasDragDrop: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const InlineFileWithError: ItemStory = {
+  args: {
+    valid: false,
+    file: {
+      name: 'File.txt',
+    },
+    information: 'Additional information',
+  },
+  render: (args) => ({
+    components: { MFileUploaderItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="width: 400px">
+        <MFileUploaderItem v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const StackedFileItem: ItemStory = {
+  args: {
+    valid: true,
+    file: {
+      name: 'File.txt',
+    },
+    format: 'stacked',
+    information: 'Additional information',
+  },
+  render: (args) => ({
+    components: { MFileUploaderItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="width: 400px">
+        <MFileUploaderItem v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const StackedFileWithError: ItemStory = {
+  args: {
+    valid: false,
+    file: {
+      name: 'File.txt',
+    },
+    format: 'stacked',
+    information: 'Additional information',
+  },
+  render: (args) => ({
+    components: { MFileUploaderItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="width: 400px">
+        <MFileUploaderItem v-bind="args" />
+      </div>
+    `,
+  }),
+};