@mozaic-ds/vue 2.16.0 → 2.18.0

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

@@ -0,0 +1,277 @@
+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" />
+              <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" />
+              <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();
+      },
+    },
+  }),
+};

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