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

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

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

// Components
import '@mozaic-ds/datatable-vue/style.css';
import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';

const meta: Meta<typeof MDataTable> = {
  title: 'DataTable/MDataTable Sortable',
  component: MDataTable,
  args: utils.args,
  argTypes: utils.argtypes,
  parameters: {
    componentName: 'MDataTable',
    docs: {
      canvas: { sourceState: 'none' },
    },
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!-- Name-->
        <MDataTableColumn label="Name" value="name" sortable />

        <!-- Stock-->
        <MDataTableColumn label="Stock" value="stock" sortable />

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

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

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

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

export const SingleSort: Story = {};

export const SingleSortVModel: Story = {
  name: 'Single Sort (with v-model)',
  args: {
    sort: { column: 'stock', direction: 'DESC' },
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      const propSort = ref(args.sort);
      return { args, propSort };
    },
    template: `
      <code class="code">
        <pre>v-model with prop sort: {{ propSort }}</pre>
      </code>
      <MDataTable v-bind="args" v-model:sort="propSort">
        <!-- Name-->
        <MDataTableColumn label="Name" value="name" sortable />

        <!-- Stock-->
        <MDataTableColumn label="Stock" value="stock" sortable />

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

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

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

export const MultipleSort: Story = {
  args: {
    sortMode: 'multiple',
  },
};

export const MultipleSortVModel: Story = {
  name: 'Multiple Sort (with v-model)',
  args: {
    sortMode: 'multiple',
    sortMultiple: [
      { column: 'stock', direction: 'DESC' },
      { column: 'status', direction: 'ASC' },
    ],
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      const propSortMultiple = ref(args.sortMultiple);
      return { args, propSortMultiple };
    },
    template: `
      <code class="code">
        <pre>v-model with prop sortMultiple: {{ propSortMultiple }}</pre>
      </code>
      <MDataTable v-bind="args" v-model:sortMultiple="propSortMultiple">
        <!-- Name-->
        <MDataTableColumn label="Name" value="name" sortable />

        <!-- Stock-->
        <MDataTableColumn label="Stock" value="stock" sortable />

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

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

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