@mozaic-ds/vue/src/components/fileuploader/MFileUploader.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

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>
    `,
  }),
};