@mozaic-ds/vue/src/components/datatable/DataTableSelectable.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 } from '@mozaic-ds/datatable-vue';
import MCheckbox from '../checkbox/MCheckbox.vue';

const meta: Meta<typeof MDataTable> = {
  title: 'DataTable/MDataTable Selectable',
  component: MDataTable,
  args: utils.args,
  parameters: {
    componentName: 'MDataTable',
    docs: {
      canvas: { sourceState: 'none' },
    },
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!--
          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 default meta;
type Story = StoryObj<typeof MDataTable>;

export const Default: Story = {
  args: {
    selectable: true,
  },
};

export const SpecifiedRows: Story = {
  render: (args) => ({
    components: { MDataTable, MDataTableColumn, MCheckbox },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!-- Headers -->
        <MDataTableColumn
          label="MasterCheckbox"
          value="mastercheckbox"
          class="mc-datatable__cell-checkbox"
        />
        <template v-slot:header.mastercheckbox>
          <MCheckbox id="mastercheckbox" />
        </template>

        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />
        <MDataTableColumn label="Start date" value="startDate" />
        <MDataTableColumn label="End date" value="endDate" />
        <MDataTableColumn label="Statut" value="status" />

        <!-- Cells -->

        <!-- [Cell] => Master Checkbox -->
        <template v-slot:cell.mastercheckbox="{ item }">
          <MCheckbox :id="item.id" :disabled="isDisabled(item)" />
        </template>

        <!-- [Cell] => Start Date -->
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- [Cell] => End Date -->
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- [Cell] => Status -->
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
      isDisabled(item) {
        if (item.id % 2 == 0) {
          return true;
        }

        return false;
      },
    },
  }),
};