@mozaic-ds/vue 2.16.0 → 2.18.0

package/src/components/datatable/DataTableExpandable.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import * as utils from './utils';
+
+// Components
+import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
+
+const meta: Meta<typeof MDataTable> = {
+  title: 'DataTable/MDataTable Expandable',
+  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>
+
+        <!-- Expandable Row -->
+        <template v-slot:expandContent="expandProps">
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 20px;
+            "
+          >
+            <p>
+              {{ expandProps }}
+              <strong>
+                This is the expand content for row n°{{ expandProps.rowIndex }}
+              </strong>
+            </p>
+          </div>
+        </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof MDataTable>;
+
+export const Default: Story = {
+  args: {
+    expandable: true,
+  },
+};
+
+export const ExpandedRows: Story = {
+  args: {
+    ...Default.args,
+    showExpandableContent: true,
+  },
+};
+
+export const SpecifiedRows: Story = {
+  args: {
+    ...Default.args,
+    expandableList: [1, 7, 9],
+  },
+};

package/src/components/datatable/DataTableNested.stories.ts

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import * as utils from './utils';
+
+// Components
+import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
+
+const meta: Meta<typeof MDataTable> = {
+  title: 'DataTable/MDataTable Nested',
+  component: MDataTable,
+  args: utils.args,
+  parameters: {
+    componentName: 'MDataTable',
+    docs: {
+      canvas: { sourceState: 'none' },
+    }
+  },
+  render: (args) => ({
+    components: { MDataTable, MDataTableColumn },
+    setup() {
+      const subItems = ref([...utils.addlDeals.slice(0, 5)]);
+      return { args, subItems };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <!-- Columns -->
+        <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 -->
+        <template v-slot:cell.startDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+        <template v-slot:cell.endDate="{ item }">
+          {{ formatDate(item.startDate) }}
+        </template>
+        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>
+
+        <!-- Expandable Content -->
+        <template v-slot:expandContent="slotProps">
+          <MDataTable :items="subItems" nested>
+            <!-- Columns -->
+            <MDataTableColumn label="" value="button" type="button" />
+            <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 -->
+            <template v-slot:cell.startDate="{ item }">
+              {{ formatDate(item.startDate) }}
+            </template>
+            <template v-slot:cell.endDate="{ item }">
+              {{ formatDate(item.startDate) }}
+            </template>
+            <template v-slot:cell.status="{ item }">
+              {{ item.status.code }}
+            </template>
+          </MDataTable>
+        </template>
+      </MDataTable>
+    `,
+    methods: {
+      formatDate(date) {
+        return new Date(date).toLocaleString();
+      },
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof MDataTable>;
+
+export const Default: Story = {
+  args: {
+    expandable: true,
+  },
+};
+
+export const MaxHeight: Story = {
+  args: {
+    ...Default.args,
+    maxHeight: '300px',
+  },
+};
+
+export const FixedHeader: Story = {
+  args: {
+    ...Default.args,
+    fixedHeader: true,
+    maxHeight: '400px',
+  },
+};

package/src/components/datatable/DataTableSelectable.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import * as utils from './utils';
+
+// Components
+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;
+      },
+    },
+  }),
+};

package/src/components/datatable/DataTableSortable.stories.ts

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import * as utils from './utils';
+
+// Components
+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();
+      },
+    },
+  }),
+};

package/src/components/datatable/MDataTable.types.ts

@@ -0,0 +1,54 @@
+export type MDataTableSortDirection = 'ASC' | 'DESC' | null;
+
+export type MDatatableSortType = {
+  direction?: MDataTableSortDirection;
+  column: string;
+};
+
+export interface MDatatableHeaderType {
+  label: string;
+  /** The key of item to generate cell slot name */
+  value: string;
+
+  sortable?: boolean;
+  sortDirectionDefault?: MDataTableSortDirection;
+  class?: string;
+  type?: string;
+
+  /** Misc */
+  e2eSelector?: string;
+}
+
+export type MDataTableProps = {
+  /** Functional */
+  items: [];
+  headers?: MDatatableHeaderType[];
+  loading?: boolean;
+  indexKey?: string;
+
+  /** Pagination */
+  pageable?: boolean;
+  itemsPerPage?: number;
+  itemsPerPageOptions?: PageSizeOption[] | number[];
+  currentPage?: number;
+  totalItems?: number;
+  itemsPerPageLabel?: string;
+
+  /** Sort */
+  sort?: MDatatableSortType | null;
+
+  /** Display Options */
+  size?: 's' | 'm' | 'l';
+  hidePageCount?: boolean;
+
+  /** Misc */
+  e2eSelector?: string;
+};
+
+export type PageSizeOption = { text: string; value: string };
+
+export type MDatatableUpdatePayloadType = {
+  sort?: MDatatableSortType | null;
+  size: number;
+  page: number;
+};

package/src/components/datatable/assets/styles.scss

@@ -0,0 +1,10 @@
+.datatablev2-caution {
+  margin-bottom: 20px;
+  p {
+    margin: 0 auto;
+
+    &:not(:last-child) {
+      margin-bottom: 14px;
+    }
+  }
+}

package/src/components/datatable/datatable.mdx

@@ -0,0 +1,63 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="DataTable/Introduction" />
+
+# Introduction
+
+Datatable implementation in [Vue.js](https://vuejs.org/) for ADEO Design system.
+
+## 📦 Installation
+
+In order to use the datatable in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/datatable-vue):
+
+<Source language="bash" dark code="npm i @mozaic-ds/datatable-vue" />
+
+Or with **Yarn**:
+
+<Source language="bash" dark code="yarn add @mozaic-ds/datatable-vue" />
+
+## 📝 Usage
+
+Import the styles
+
+<Source
+  language='typescript'
+  dark
+  code={`
+// In the Vue file using the datatable component
+
+import '@mozaic-ds/datatable-vue/style.css';
+`} />
+
+Then to use the component, you can proceed as follows:
+
+<Source
+  language='html'
+  dark
+  code={`
+<script setup>
+  import '@mozaic-ds/datatable-vue/style.css';
+  import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
+</script>
+
+<template>
+  <MDataTable
+    v-bind="{items:{0:{id:0,name:'Deal test 0',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 0'},1:{id:1,name:'Deal test 1',startDate:{},endDate:{},status:{code:'CALCULATED'},stock:'Stock 1'},2:{id:2,name:'Deal test 2',startDate:{},endDate:{},status:{code:'CALCULATED'},stock:'Stock 2'},3:{id:3,name:'Deal test 3',startDate:{},endDate:{},status:{code:'ACTIVE'},stock:'Stock 3'},4:{id:4,name:'Deal test 4',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 4'},5:{id:5,name:'Deal test 5',startDate:{},endDate:{},status:{code:'ACTIVE'},stock:'Stock 5'},6:{id:6,name:'Deal test 6',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 6'},7:{id:7,name:'Deal test 7',startDate:{},endDate:{},status:{code:'ACTIVE'},stock:'Stock 7'},8:{id:8,name:'Deal test 8',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 8'},9:{id:9,name:'Deal test 9',startDate:{},endDate:{},status:{code:'CALCULATED'},stock:'Stock 9'}}}"
+  >
+    <MDataTableColumn label="Name" value="name" />
+    <MDataTableColumn label="Stock" value="stock" />
+    <MDataTableColumn label="Start date" value="startDate" />
+    <template v-slot:cell.startDate="{ item }">
+      {{formatDate(item.startDate)}}
+    </template>
+    <MDataTableColumn label="End date" value="endDate" />
+    <template v-slot:cell.endDate="{ item }">
+      {{formatDate(item.startDate)}}
+    </template>
+    <MDataTableColumn label="Statut" value="status" />
+    <template v-slot:cell.status="{ item }">{{item.status.code}}</template>
+  </MDataTable>
+</template>
+`} />
+
+To see more examples of usage, please refer to the other stories of the component.

package/src/components/datatable/tools/data.js

@@ -0,0 +1,8 @@
+import jsonData from './data.json';
+
+export const samples = jsonData.samples;
+export const deals = jsonData.deals.map((d) => ({
+  ...d,
+  startDate: new Date(d.startDate),
+  endDate: new Date(d.endDate),
+}));