@mozaic-ds/vue 2.16.0 → 2.17.0

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

@@ -0,0 +1,251 @@
+import { ref } from 'vue';
+import * as utils from './utils';
+
+// Components
+import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';
+import MTextInput from '../textinput/MTextInput.vue';
+import MStatusBadge from '../statusbadge/MStatusBadge.vue';
+import MFlag from '../flag/MFlag.vue';
+import MLink from '../link/MLink.vue';
+import MActionListbox from '../actionlistbox/MActionListbox.vue';
+import MKpiItem from '../kpiitem/MKpiItem.vue';
+import MTag from '../tag/MTag.vue';
+
+export default {
+  title: 'DataTable/MDataTable Table Cells',
+  component: MDataTable,
+  args: utils.args,
+  parameters: {
+    componentName: 'MDataTable',
+    docs: {
+      canvas: { sourceState: 'none' },
+    }
+  },
+};
+
+export const Default = {
+  args: {
+    selectable: true,
+    expandable: true,
+    pageable: true,
+  },
+  render: (args) => ({
+    components: {
+      MDataTable,
+      MDataTableColumn,
+      MStatusBadge,
+      MFlag,
+      MLink,
+      MActionListbox,
+      MKpiItem,
+      MTag,
+      MTextInput,
+    },
+    setup() {
+      const currentPage = ref(1);
+      const items = ref([]);
+      const itemsAPI = ref([]);
+      const itemsPerPage = ref(7);
+      const listbox = ref([
+        [
+          {
+            text: 'Edit',
+            icon: 'PublishEdit24',
+          },
+          {
+            text: 'Print',
+            icon: 'Print24',
+            disabled: true,
+          },
+          {
+            text: 'Mark as validated',
+            icon: 'NotificationCircleAvailable24',
+          },
+        ],
+        [
+          {
+            text: 'Open in a new window',
+            icon: 'DisplayExternalLink24',
+          },
+        ],
+        [
+          {
+            text: 'Delete',
+            icon: 'PublishTrashbin24',
+            danger: true,
+          },
+        ],
+      ]);
+      const loading = ref(false);
+      const totalItems = ref(0);
+
+      return {
+        args,
+        currentPage,
+        items,
+        itemsAPI,
+        itemsPerPage,
+        listbox,
+        loading,
+        totalItems,
+      };
+    },
+    template: `
+      <MDataTable
+        v-bind="args"
+        :items="items"
+        :loading="loading"
+        :totalItems="totalItems"
+        maxHeight="500px"
+        fixedHeader
+        @change="updatePage"
+      >
+        <!-- No Data -->
+        <template v-slot:no-data>
+          <p><strong>No data available at this time.</strong></p>
+        </template>
+
+        <!-- Siren -->
+        <MDataTableColumn label="Siren" value="siren" type="number" />
+
+        <!-- Nom -->
+        <MDataTableColumn label="Nom" value="nom" />
+        <template v-slot:header.nom="{ header }">
+          {{ header.label }}
+          <small>codeEpci</small>
+        </template>
+        <template v-slot:cell.nom="{ item }">
+          {{ item.nom }}
+          <small>codeEpci: {{ item.codeEpci }}</small>
+        </template>
+
+        <!-- Population -->
+        <MDataTableColumn label="Population" value="population" />
+        <template v-slot:cell.population="{ item }">
+          <MKpiItem
+            v-if="item.population > 50000"
+            :value="item.population"
+            status="success"
+            trend="increasing"
+          />
+          <MKpiItem
+            v-if="item.population > 20000 && item.population < 50000"
+            :value="item.population"
+            trend="increasing"
+          />
+          <MKpiItem
+            v-if="item.population > 5000 && item.population < 20000"
+            :value="item.population"
+            status="neutral"
+            trend="stable"
+          />
+          <MKpiItem
+            v-if="item.population > 2000 && item.population < 5000"
+            :value="item.population"
+            status="warning"
+            trend="decreasing"
+          />
+          <MKpiItem
+            v-if="item.population < 2000"
+            :value="item.population"
+            status="error"
+            trend="stable"
+          />
+        </template>
+
+        <!-- Codes Postaux -->
+        <MDataTableColumn label="Codes Postaux" value="codesPostaux" />
+        <template v-slot:cell.codesPostaux="{ item }">
+          <div class="codes-postaux" style="display: flex; gap: 0.25rem">
+            <MTag
+              v-for="tag in item.codesPostaux"
+              :key="tag"
+              :id="tag"
+              :label="tag"
+            />
+          </div>
+        </template>
+
+        <!-- Code INSEE -->
+        <MDataTableColumn label="Code INSEE" value="code" />
+        <template v-slot:cell.code="{ item }">
+          <MLink
+            size="s"
+            href="https://www.insee.fr/fr/metadonnees/cog/commune/COMitem.code-item.nom"
+          >
+            {{ item.code }}
+          </MLink>
+        </template>
+
+        <!-- Code INSEE -->
+        <MDataTableColumn label="Code EPCI" value="codeEpci" />
+        <template v-slot:cell.codeEpci="{ item }">
+          <MFlag :label="item.codeEpci" theme="bordered" />
+        </template>
+
+        <!-- Code Département -->
+        <MDataTableColumn
+          label="Code Département"
+          value="codeDepartement"
+          type="number"
+        />
+
+        <!-- Input -->
+        <MDataTableColumn label="Note" value="note" type="input" />
+        <template v-slot:cell.note="{ item }">
+          <MTextInput size="s" />
+        </template>
+
+        <!-- Code Région -->
+        <MDataTableColumn label="Code Région" value="codeRegion" />
+        <template v-slot:cell.codeRegion="{ item }">
+          <MStatusBadge :label="item.codeRegion"/>
+        </template>
+
+        <!-- Options -->
+        <!-- <MDataTableColumn label="" value="options" type="options" />
+        <template v-slot:cell.options="{ item }">
+          <MActionListbox :items="listbox" position="right" />
+        </template> -->
+      </MDataTable>
+    `,
+    async mounted() {
+      this.loading = true;
+      this.itemsAPI = await this.fetchAPI();
+      this.totalItems = this.itemsAPI.length;
+      this.items = this.paginateItems(this.itemsPerPage, this.currentPage);
+      this.loading = false;
+    },
+    methods: {
+      async fetchAPI() {
+        const apiUrl = 'https://geo.api.gouv.fr/departements/59/communes';
+        try {
+          // Try
+          const getData = await fetch(apiUrl, { method: 'GET' });
+          const data = await getData.json();
+
+          return data;
+        } catch (erreur) {
+          // Erreur
+          console.log(erreur);
+
+          return [];
+        }
+      },
+      paginateItems(size, page) {
+        const start = (page - 1) * size;
+        const end = page * size;
+
+        return this.itemsAPI.slice(start, end);
+      },
+      async updatePage({ size, page }) {
+        this.loading = true;
+
+        setTimeout(() => {
+          this.items = this.paginateItems(size, page);
+          this.loading = false;
+        }, 1000);
+      },
+    },
+  }),
+};

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import * as utils from './utils';
+
+// Components
+import { MDataTable } from '@mozaic-ds/datatable-vue';
+import MButton from '../button/MButton.vue';
+import { Filter24 } from '@mozaic-ds/icons-vue';
+
+const meta: Meta<typeof MDataTable> = {
+  title: 'DataTable/MDataTable Empty states',
+  component: MDataTable,
+  args: utils.args,
+  parameters: {
+    componentName: 'MDataTable',
+    docs: {
+      canvas: { sourceState: 'none' },
+    }
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MDataTable>;
+
+export const Default: Story = {
+  args: {
+    items: [],
+  },
+  render: (args) => ({
+    components: { MDataTable },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <template v-slot:no-data>
+          <p>
+            <strong>There is nothing to display</strong><br />
+            Short explanation of why and/or how to do
+          </p>
+        </template>
+      </MDataTable>
+    `,
+  }),
+};
+
+export const Filters: Story = {
+  args: {
+    items: [],
+  },
+  render: (args) => ({
+    components: { MDataTable, MButton, Filter24 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <template v-slot:no-data>
+          <p>
+            <strong>There is no result</strong><br />
+            Please try changing your filters
+          </p>
+          <MButton
+            outlined
+            size="s"
+            iconPosition="left"
+          >
+            <template #icon><Filter24/></template>
+            Change filters
+          </MButton>
+        </template>
+      </MDataTable>
+    `,
+  }),
+};
+
+export const Search: Story = {
+  args: {
+    items: [],
+  },
+  render: (args) => ({
+    components: { MDataTable, MButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MDataTable v-bind="args">
+        <template v-slot:no-data>
+          <p>
+            <strong>There is no result</strong><br />
+            Please try changing your search
+          </p>
+          <MButton
+            outlined
+            size="s"
+          >
+            Reset search
+          </MButton>
+        </template>
+      </MDataTable>
+    `,
+  }),
+};

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