@mozaic-ds/vue/src/components/datatable/DataTable.stories.ts

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import * as utils from './utils';

// Components
import '@mozaic-ds/datatable-vue/style.css';
import {
  MDataTable,
  MDataTableColumn,
  MDataTableTop,
} from '@mozaic-ds/datatable-vue';
import MButton from '../button/MButton.vue';
import MIconButton from '../iconbutton/MIconButton.vue';
import {
  Settings24,
  Edit24,
  Download24,
  Filter24,
  Search24,
} from '@mozaic-ds/icons-vue';
import MToggle from '../toggle/MToggle.vue';
import MTextInput from '../textinput/MTextInput.vue';
import MTag from '../tag/MTag.vue';

const meta: Meta<typeof MDataTable> = {
  title: 'DataTable/MDataTable Default',
  component: MDataTable,
  args: {
    ...utils.args,
    default: `
      <!--
        Default content
      -->
      <MDataTableColumn label="Name" value="name" />
      <MDataTableColumn label="Stock" value="stock" />

      <!-- Start Date -->
      <MDataTableColumn label="Start date" value="startDate" />
      <template v-slot:cell.startDate="{ item }">
        {{ formatDate(item.startDate) }}
      </template>

      <!-- End Date -->
      <MDataTableColumn label="End date" value="endDate" />
      <template v-slot:cell.endDate="{ item }">
        {{ formatDate(item.startDate) }}
      </template>

      <!-- Status -->
      <MDataTableColumn label="Statut" value="status" />
      <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
    `,
  },
  argTypes: utils.argtypes,
  parameters: {
    componentName: 'MDataTable',
    backgrounds: utils.backgrounds,
    docs: {
      canvas: { sourceState: 'none' },
    },
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn, MDataTableTop, MButton },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        ${args.default}
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};

export default meta;
type Story = StoryObj<typeof MDataTable>;

export const Default: Story = {};

export const SizeS: Story = {
  args: {
    size: 's',
  },
};

export const SizeL: Story = {
  args: {
    size: 'l',
  },
};

export const LoadingState: Story = {
  args: {
    loading: true,
  },
};

export const MaxHeight: Story = {
  args: {
    maxHeight: '300px',
  },
};

export const FixedHeader: Story = {
  args: {
    fixedHeader: true,
    maxHeight: '400px',
  },
};

export const TopbarActions: Story = {
  render: (args) => ({
    components: {
      MDataTable,
      MDataTableColumn,
      MDataTableTop,
      MButton,
      Settings24,
      Filter24,
      MToggle,
    },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!-- Topbar - With Actions tools -->
        <template v-slot:topbar>
          <MDataTableTop>
            <template v-slot:actions>
              <MToggle size="s" label="Toggle Label" id="idofthetoggle" />
              <MButton iconPosition="left" outlined size="s"><template #icon><Filter24 /></template> Filter</MButton>
              <MButton iconPosition="only" outlined size="s"><template #icon><Settings24 /></template></MButton>
              <MButton appearance="accent" size="s" >Primary action</MButton>
              <MButton outlined appearance="danger" size="s">Negative action</MButton>
            </template>
          </MDataTableTop>
        </template>

        <!-- Default content -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />
        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};

export const TopbarEdition: Story = {
  render: (args) => ({
    components: {
      MDataTable,
      MDataTableColumn,
      MDataTableTop,
      MButton,
      MIconButton,
      Edit24,
      Download24,
    },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!-- Topbar - With Edition tools -->
        <template v-slot:topbar>
          <MDataTableTop>
            <template v-slot:edition>
              <MIconButton ghost size="s"><template #icon><Edit24/></template></MIconButton>
              <MIconButton ghost size="s"><template #icon><Download24/></template></MIconButton>
              <div style="display: flex;align-items: center;">999 selected</div>
            </template>
          </MDataTableTop>
        </template>

        <!-- Default content -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />

        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};

export const TopbarFull: Story = {
  render: (args) => ({
    components: {
      MDataTable,
      MDataTableColumn,
      MDataTableTop,
      MButton,
      MIconButton,
      MToggle,
      MTextInput,
      Edit24,
      Download24,
      Settings24,
      Filter24,
      Search24,
      MTag,
    },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!-- Topbar - Full topbar -->
        <template v-slot:topbar>
          <MDataTableTop>
            <template v-slot:edition>
              <MIconButton ghost size="s"><template #icon><Edit24/></template></MIconButton>
              <MIconButton ghost size="s"><template #icon><Download24/></template></MIconButton>
              <div style="display: flex;align-items: center;">999 selected</div>
            </template>
            <template v-slot:actions>
              <MToggle size="s" label="Toggle Label" id="idofthetoggletopbarfull" />
              <MButton iconPosition="left" outlined size="s"><template #icon><Filter24 /></template> Filter</MButton>
              <MButton iconPosition="only" outlined size="s"><template #icon><Settings24 /></template></MButton>
              <MButton appearance="accent" size="s" >Primary action</MButton>
              <MButton outlined appearance="danger" size="s">Negative action</MButton>
            </template>
            <template v-slot:filters>
              <MTag type="removable" label="Filter label" size="s" />
              <MTag type="removable" label="Filter label" size="s" />
              <MTag type="removable" label="Filter label" size="s" />
              <MTag type="removable" label="Filter label" size="s" />
              <MTag type="removable" label="Filter label" size="s" />
              <MButton ghost size="s">reset</MButton>
            </template>
          </MDataTableTop>
        </template>

        <!-- Default content -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />

        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};