@mozaic-ds/vue/src/components/datatable/DataTableEmpty.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 } 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>
    `,
  }),
};