@mozaic-ds/vue 2.12.0 → 2.13.0

package/src/components/fileuploader/MFileUploader.vue

@@ -0,0 +1,314 @@
+<template>
+  <div
+    :class="{
+      'mc-file-uploader': true,
+      'mc-file-uploader--draggable': props.hasDragDrop,
+    }"
+  >
+    <div class="mc-file-uploader__container">
+      <input
+        ref="fileInput"
+        type="file"
+        aria-label="File input"
+        :accept="props.accept"
+        :multiple="props.multiple"
+        class="mc-file-uploader__hidden-input"
+        :disabled="props.disabled"
+        :aria-disabled="props.disabled"
+        @change="onChange"
+      />
+
+      <div
+        :class="{
+          'mc-file-uploader__input': true,
+          'mc-file-uploader__input--dragged': isDraggedOver,
+          'mc-file-uploader__input--disabled': props.disabled,
+        }"
+        tabindex="0"
+        role="button"
+        :aria-disabled="props.disabled"
+        @drop.prevent.stop="onDrop"
+        @dragenter.prevent="onDragEnter"
+        @dragleave.prevent="onDragLeave"
+        @dragover.prevent
+        @click="fileInput!.click()"
+        @keydown.enter="fileInput!.click()"
+        @keydown.space.prevent="fileInput!.click()"
+      >
+        <template v-if="props.hasDragDrop">
+          <span class="mc-file-uploader__input-title">
+            {{ props.title }}
+          </span>
+
+          <span class="mc-file-uploader__input-subtitle">
+            {{ props.subtitle }}
+          </span>
+        </template>
+
+        <div class="mc-button mc-button--outlined mc-file-uploader__button">
+          <Upload24 class="mc-button__icon" />
+          <span class="mc-button__label">
+            {{ props.uploadButtonLabel }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.showFilesList" class="mc-file-uploader__files-list">
+      <FileUploaderItem
+        v-for="(file, index) in files"
+        :key="`${file.name}-${index}`"
+        :file="file"
+        :format="props.format"
+        :valid="isFileValid(file)"
+        :information="props.information"
+        :error-message="props.errorMessage"
+        :delete-button-label="props.deleteButtonLabel"
+        @delete="onDelete(index)"
+      >
+        <template #name="{ file }">
+          <slot name="name" v-bind="{ file }" />
+        </template>
+
+        <template #information="{ file }">
+          <slot name="information" v-bind="{ file }" />
+        </template>
+
+        <template #errorMessage>
+          <slot
+            name="errorMessage"
+            v-bind="{ validationState: filesValidationState[file.name] }"
+          />
+        </template>
+      </FileUploaderItem>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch, type VNode } from 'vue';
+import { Upload24 } from '@mozaic-ds/icons-vue';
+import FileUploaderItem, {
+  type NormalizedFile,
+} from '../fileuploaderitem/MFileUploaderItem.vue';
+
+export type FilesValidationState = Record<
+  string,
+  { size: boolean; extension: boolean; customValidation: boolean }
+>;
+
+/**
+ * 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.
+ */
+
+export type FileUploaderProps = {
+  /**
+   * Model binding for the selected files (`NormalizedFile`)
+   */
+  modelValue: NormalizedFile[];
+  /**
+   * File types allowed by the uploader.
+   */
+  accept?: HTMLInputElement['accept'];
+  /**
+   * Enables selecting multiple files at once.
+   */
+  multiple?: boolean;
+  /**
+   * File extensions to validate.
+   */
+  allowedExtensions?: string[];
+  /**
+   * Maximum file size allowed (in bytes).
+   */
+  maxSize?: number;
+  /**
+   * Custom validation rules applied to each file.
+   */
+  rules?: ((file: NormalizedFile) => boolean)[];
+  /**
+   * Layout format of the item.
+   */
+  format?: 'inline' | 'stacked';
+  /**
+   * Custom error message for the file.
+   */
+  errorMessage?: string;
+  /**
+   * Label for the delete button.
+   */
+  deleteButtonLabel?: string;
+  /**
+   * Optional informational text displayed under the file name.
+   */
+  information?: string;
+  /**
+   * Enables drag & drop functionality.
+   */
+  hasDragDrop?: boolean;
+  /**
+   * Controls the display of the uploaded files list.
+   */
+  showFilesList?: boolean;
+  /**
+   * Disables the whole component.
+   */
+  disabled?: boolean;
+  /**
+   * Main drag & drop title.
+   */
+  title?: string;
+  /**
+   * Subtitle used in the drag & drop area.
+   */
+  subtitle?: string;
+  /**
+   * Label of the upload button.
+   */
+  uploadButtonLabel?: string;
+};
+
+const props = withDefaults(defineProps<FileUploaderProps>(), {
+  hasDragDrop: true,
+  showFilesList: true,
+  title: 'Drag & drop',
+  subtitle: 'or',
+  uploadButtonLabel: 'Upload file(s)',
+});
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the file list changes to update the bound model.
+   */
+  'update:modelValue': [v: NormalizedFile[]];
+  /**
+   * Emitted with an object describing the validation results for each file (size, extension, and custom validation).
+   */
+  validation: [validationState: FilesValidationState];
+}>();
+
+defineSlots<{
+  /**
+   * Slot for customizing the file name display.
+   * Receives `NormalizedFile` as slot props.
+   */
+  name: VNode;
+  /**
+   * Slot for displaying additional file information.
+   * Receives `NormalizedFile` as slot props.
+   */
+  information: VNode;
+  /**
+   * Slot for providing a custom error message display.
+   * Receives:
+   * `{ validationState: { size: boolean; extension: boolean; customValidation: boolean } }`
+   */
+  errorMessage: VNode;
+}>();
+
+const fileInput = useTemplateRef('fileInput');
+
+const files = computed({
+  get: () => props.modelValue,
+  set: (v: NormalizedFile[]) => emit('update:modelValue', v),
+});
+
+const isDraggedOver = ref(false);
+const dragCounter = ref(0);
+
+const filesValidationState = ref<FilesValidationState>({});
+
+function validateFiles(newFiles: NormalizedFile[] = []) {
+  const state: FilesValidationState = {};
+  newFiles.forEach((file) => {
+    const extension = file.name.split('.').pop()?.toLowerCase() || '';
+    state[file.name] = {
+      size: props.maxSize && file.size ? file.size <= props.maxSize : true,
+      extension: props.allowedExtensions
+        ? props.allowedExtensions.includes(extension)
+        : true,
+      customValidation: props.rules?.every((rule) => rule(file)) ?? true,
+    };
+  });
+  return state;
+}
+
+watch(
+  files,
+  (newFiles) => {
+    filesValidationState.value = validateFiles(newFiles);
+    emit('validation', filesValidationState.value);
+  },
+  { immediate: true },
+);
+
+function onDragEnter(e: Event) {
+  if (!props.hasDragDrop) return;
+
+  e.preventDefault();
+  dragCounter.value++;
+  isDraggedOver.value = true;
+}
+
+function onDragLeave(e: Event) {
+  if (!props.hasDragDrop) return;
+
+  e.preventDefault();
+  dragCounter.value--;
+  if (dragCounter.value === 0) isDraggedOver.value = false;
+}
+
+function filterExistingFile(file: NormalizedFile) {
+  return files.value.every((item) => item.name !== file.name);
+}
+
+function onChange(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const newFiles = Array.from(input.files || []).filter(filterExistingFile);
+
+  if (!newFiles.length) {
+    input.value = '';
+    return;
+  }
+
+  files.value = props.multiple
+    ? [...files.value, ...newFiles]
+    : newFiles.slice(0, 1);
+
+  input.value = '';
+}
+
+function onDrop(e: DragEvent) {
+  if (!props.hasDragDrop) return;
+
+  e.preventDefault();
+  e.stopPropagation();
+  dragCounter.value = 0;
+  isDraggedOver.value = false;
+  if (props.disabled) return;
+
+  const droppedFiles = Array.from(e.dataTransfer?.files || []).filter(
+    filterExistingFile,
+  );
+  if (!droppedFiles.length) return;
+
+  files.value = props.multiple
+    ? [...files.value, ...droppedFiles]
+    : [droppedFiles[0]];
+}
+
+function onDelete(index: number) {
+  files.value = files.value.filter((_, i) => i !== index);
+}
+
+function isFileValid(file: NormalizedFile) {
+  return Object.values(filesValidationState.value[file.name] ?? {}).every(
+    Boolean,
+  );
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/file-uploader';
+@use '@mozaic-ds/styles/components/button';
+</style>

package/src/components/fileuploader/README.md

@@ -0,0 +1,58 @@
+# MFileUploader
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue*` | Model binding for the selected files (`NormalizedFile`) | `NormalizedFile[]` | - |
+| `accept` | File types allowed by the uploader. | `string` | - |
+| `multiple` | Enables selecting multiple files at once. | `boolean` | - |
+| `allowedExtensions` | File extensions to validate. | `string[]` | - |
+| `maxSize` | Maximum file size allowed (in bytes). | `number` | - |
+| `rules` | Custom validation rules applied to each file. | `((file: NormalizedFile) => boolean)[]` | - |
+| `format` | Layout format of the item. | `"inline"` `"stacked"` | - |
+| `errorMessage` | Custom error message for the file. | `string` | - |
+| `deleteButtonLabel` | Label for the delete button. | `string` | - |
+| `information` | Optional informational text displayed under the file name. | `string` | - |
+| `hasDragDrop` | Enables drag & drop functionality. | `boolean` | `true` |
+| `showFilesList` | Controls the display of the uploaded files list. | `boolean` | `true` |
+| `disabled` | Disables the whole component. | `boolean` | - |
+| `title` | Main drag & drop title. | `string` | `"Drag & drop"` |
+| `subtitle` | Subtitle used in the drag & drop area. | `string` | `"or"` |
+| `uploadButtonLabel` | Label of the upload button. | `string` | `"Upload file(s)"` |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `name` | Slot for customizing the file name display.
+Receives `NormalizedFile` as slot props. |
+| `information` | Slot for displaying additional file information.
+Receives `NormalizedFile` as slot props. |
+| `errorMessage` | Slot for providing a custom error message display.
+Receives:
+`{ validationState: { size: boolean; extension: boolean; customValidation: boolean } }` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | - | `[v: NormalizedFile[]]` |
+| `validation` | - | `[validationState: FilesValidationState]` |
+
+## Dependencies
+
+### Depends on
+
+- [MFileUploaderItem](../fileuploaderitem)
+
+### Graph
+
+```mermaid
+graph TD;
+  MFileUploader --> MFileUploaderItem
+style MFileUploader fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/fileuploaderitem/MFileUploaderItem.spec.ts

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import MFileUploaderItem from './MFileUploaderItem.vue';
+
+const globalStubs = {
+  MButton: {
+    props: ['ariaLabel'],
+    inheritAttrs: false,
+    emits: ['click'],
+    template:
+      '<button v-bind="$attrs" aria-label="Delete file" @click="$emit(\'click\')"><slot /></button>',
+  },
+  MLinearProgressbarPercentage: {
+    inheritAttrs: false,
+    template: '<div class="progress" :data-value="$attrs.value"></div>',
+  },
+  CheckCircle32: { template: '<i class="icon-check"></i>' },
+  WarningCircle32: { template: '<i class="icon-warning"></i>' },
+  Cross20: { template: '<i class="icon-cross"></i>' },
+  CrossCircleFilled20: { template: '<i class="icon-cross-filled"></i>' },
+};
+
+describe('MFileUploaderItem', () => {
+  it('shows information details when information prop is set', () => {
+    const wrapper = mount(MFileUploaderItem, {
+      props: { file: { name: 'file.txt' }, information: 'Some info' },
+      global: { stubs: globalStubs },
+    });
+    const details = wrapper.find('.mc-file-uploader-item__details');
+    expect(details.exists()).toBe(true);
+    expect(details.text()).toBe('Some info');
+  });
+
+  it('emits delete when inline delete button is clicked', async () => {
+    const wrapper = mount(MFileUploaderItem, {
+      props: { file: { name: 'file.txt' }, format: 'inline' },
+      global: { stubs: globalStubs },
+    });
+    const btn = wrapper.find('button[aria-label="Delete file"]');
+    expect(btn.exists()).toBe(true);
+    await btn.trigger('click');
+    expect(wrapper.emitted()).toHaveProperty('delete');
+  });
+
+  it('emits delete when stacked delete button is clicked', async () => {
+    const wrapper = mount(MFileUploaderItem, {
+      props: { file: { name: 'file.txt' }, format: 'stacked' },
+      global: { stubs: globalStubs },
+    });
+    const btn = wrapper.find('button[aria-label="Delete file"]');
+    expect(btn.exists()).toBe(true);
+    await btn.trigger('click');
+    expect(wrapper.emitted()).toHaveProperty('delete');
+  });
+
+  it('applies correct state modifier classes', async () => {
+    // valid => default
+    const wrapper = mount(MFileUploaderItem, {
+      props: { file: { name: 'file.txt' }, valid: true },
+      global: { stubs: globalStubs },
+    });
+    expect(wrapper.classes()).not.toContain('mc-file-uploader-item--default');
+
+    // invalid => error
+    await wrapper.setProps({ valid: false });
+    expect(wrapper.classes()).toContain('mc-file-uploader-item--error');
+  });
+
+  it('renders errorMessage prop and allows slot override', () => {
+    const wrapperProp = mount(MFileUploaderItem, {
+      props: { file: { name: 'file.txt' }, errorMessage: 'Prop error' },
+      global: { stubs: globalStubs },
+    });
+    expect(
+      wrapperProp.find('.mc-file-uploader-item__error-message').text(),
+    ).toContain('Prop error');
+
+    const wrapperSlot = mount(MFileUploaderItem, {
+      props: { file: { name: 'file.txt' }, errorMessage: 'Prop error' },
+      slots: {
+        errorMessage: '<span>Slot error</span>',
+        name: '<span>Slot name</span>',
+        information: '<span>Slot information</span>',
+      },
+      global: { stubs: globalStubs },
+    });
+    expect(
+      wrapperSlot.find('.mc-file-uploader-item__error-message').text(),
+    ).toContain('Slot error');
+  });
+});

package/src/components/fileuploaderitem/MFileUploaderItem.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    :class="{
+      'mc-file-uploader-item': true,
+      [`mc-file-uploader-item--${stateModifier}`]: stateModifier !== 'default',
+    }"
+  >
+    <div
+      :class="{
+        'mc-file-uploader-item__container': true,
+        [`mc-file-uploader-item__container--${props.format}`]: true,
+      }"
+    >
+      <div
+        :class="{
+          'mc-file-uploader-item__meta-row': true,
+          'mc-file-uploader-item__meta-row--with-info': props.information,
+        }"
+      >
+        <component :is="stateIcon" class="mc-file-uploader-item__status-icon" />
+
+        <div class="mc-file-uploader-item__info-content">
+          <span class="mc-file-uploader-item__label">
+            <slot name="name" v-bind="{ file: props.file }">
+              {{ props.file.name }}
+            </slot>
+          </span>
+
+          <span
+            v-if="props.information || $slots.information"
+            class="mc-file-uploader-item__details"
+          >
+            <slot name="information" v-bind="{ file: props.file }">
+              {{ props.information }}
+            </slot>
+          </span>
+        </div>
+      </div>
+
+      <template v-if="isStacked">
+        <MDivider />
+        <div class="mc-file-uploader-item__actions-container">
+          <MButton
+            ghost
+            size="s"
+            icon-position="left"
+            aria-label="Delete file"
+            @click="emit('delete')"
+          >
+            {{ props.deleteButtonLabel }}
+
+            <template #icon>
+              <Cross20 />
+            </template>
+          </MButton>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="mc-file-uploader-item__delete-button-container">
+          <MButton
+            ghost
+            size="s"
+            icon-position="only"
+            aria-label="Delete file"
+            @click="emit('delete')"
+          >
+            {{ props.deleteButtonLabel }}
+
+            <template #icon>
+              <CrossCircleFilled20 />
+            </template>
+          </MButton>
+        </div>
+      </template>
+    </div>
+
+    <span
+      v-if="!valid && (props.errorMessage || slots.errorMessage)"
+      class="mc-file-uploader-item__error-message"
+    >
+      <slot name="errorMessage">
+        {{ props.errorMessage }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode } from 'vue';
+import {
+  CheckCircle32,
+  Cross20,
+  CrossCircleFilled20,
+  WarningCircle32,
+} from '@mozaic-ds/icons-vue';
+import MButton from '../button/MButton.vue';
+import MDivider from '../divider/MDivider.vue';
+
+export type NormalizedFile = {
+  name: string;
+  size?: number;
+  type?: HTMLInputElement['accept'];
+};
+
+/**
+ * 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.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Represents the file to be displayed in the file uploader item.
+     */
+    file: NormalizedFile;
+    /**
+     * Layout format of the item.
+     */
+    format?: 'inline' | 'stacked';
+    /**
+     * Indicates if the file is valid according to the uploader's validation rules.
+     */
+    valid?: boolean;
+    /**
+     * Custom error message for the file.
+     */
+    errorMessage?: string;
+    /**
+     * Label for the delete button.
+     */
+    deleteButtonLabel?: string;
+    /**
+     * Optional informational text displayed under the file name.
+     */
+    information?: string;
+  }>(),
+  {
+    format: 'inline',
+    deleteButtonLabel: 'Delete',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the user clicks the delete button for the file.
+   */
+  delete: [];
+}>();
+
+const slots = defineSlots<{
+  /**
+   * Slot for customizing the file name display.
+   * Receives `{ file: { name: string; size?: number;} }` as slot props.
+   */
+  name: VNode;
+  /**
+   * Slot for displaying additional file information.
+   */
+  information: VNode;
+  /**
+   * Slot for providing a custom error message display.
+   */
+  errorMessage: VNode;
+}>();
+
+const isStacked = computed(() => props.format === 'stacked');
+
+const stateModifier = computed(() => (props.valid ? 'default' : 'error'));
+
+const stateIconMap = {
+  default: CheckCircle32,
+  error: WarningCircle32,
+};
+
+const stateIcon = computed(() => stateIconMap[stateModifier.value]);
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/file-uploader';
+</style>

package/src/components/fileuploaderitem/README.md

@@ -0,0 +1,58 @@
+# MFileUploaderItem
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `file*` | Represents the file to be displayed in the file uploader item. | `NormalizedFile` | - |
+| `format` | Layout format of the item. | `"inline"` `"stacked"` | `"inline"` |
+| `valid` | Indicates if the file is valid according to the uploader's validation rules. | `boolean` | - |
+| `errorMessage` | Custom error message for the file. | `string` | - |
+| `deleteButtonLabel` | Label for the delete button. | `string` | `"Delete"` |
+| `information` | Optional informational text displayed under the file name. | `string` | - |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `name` | Slot for customizing the file name display.
+Receives `{ file: { name: string; size?: number;} }` as slot props. |
+| `information` | Slot for displaying additional file information. |
+| `errorMessage` | Slot for providing a custom error message display. |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `delete` | - | `[]` |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MDivider](../divider)
+
+### Graph
+
+```mermaid
+graph TD;
+  MFileUploaderItem --> MButton
+  MFileUploaderItem --> MDivider
+style MFileUploaderItem fill:#008240,stroke:#333,stroke-width:4px
+```
+
+### Used By
+
+- [MFileUploader](../fileuploader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MFileUploader --> MFileUploaderItem
+style MFileUploaderItem fill:#008240,stroke:#333,stroke-width:4px
+```