@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/table/BmsTable.stories.js

@@ -0,0 +1,930 @@
+import BmsTable from '@/components/table/BmsTable.vue';
+import BmsButton from '@/components/button/BmsButton.vue';
+
+export default {
+  title: 'Composants/table/Table',
+  component: BmsTable,
+  argTypes: {
+    disableSearch: {
+      control: { type: 'boolean' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    headers: {},
+    items: {},
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsTable,
+    BmsButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsTable v-bind="args"></BmsTable>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  disableSearch: true,
+};
+
+export const FiltersClosed = Template.bind({});
+FiltersClosed.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  disableSearch: true,
+};
+
+export const FiltersOpened = Template.bind({});
+FiltersOpened.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+      value: 'Val',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  disableSearch: true,
+  defaultFiltersOpened: true,
+};
+
+export const Search = Template.bind({});
+Search.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+};
+
+export const Dense = Template.bind({});
+Dense.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  mode: 'dense',
+  disableSearch: true,
+};
+
+const TemplateCustomRow = (args) => ({
+  components: {
+    BmsTable,
+    BmsButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsTable v-bind="args">
+        <template #default="{ row }">
+          <slot :row="row">
+            <td>val</td>
+            <td>val1</td>
+          </slot>
+        </template>
+      </BmsTable>
+    `,
+});
+export const CustomRow = TemplateCustomRow.bind({});
+CustomRow.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+    },
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+    },
+  ],
+  disableSearch: true,
+  slotRow: true,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  disableSearch: true,
+  loading: true,
+};
+
+export const NoData = Template.bind({});
+NoData.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [],
+  disableSearch: true,
+  loading: false,
+};
+
+export const Pagination = Template.bind({});
+Pagination.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  size: 5,
+  items: [
+    ...Array(69)
+      .fill(0)
+      .map((_, index) => ({
+        col1: `Row ${index + 1} - Value1`,
+        col2: 'Value2',
+        col3: 'Value3',
+      })),
+  ],
+};
+
+export const CanSaveFilters = Template.bind({});
+CanSaveFilters.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+      value: 'Val',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  disableSearch: true,
+  defaultFiltersOpened: true,
+  canSaveFilters: true,
+};
+
+export const SavedFilters = Template.bind({});
+SavedFilters.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+      value: 'Value1',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  disableSearch: true,
+  defaultFiltersOpened: true,
+  canSaveFilters: true,
+  savedFilters: [
+    {
+      id: 'filter0',
+      name: 'Filter 0',
+      route: 'path',
+      filters: [
+        {
+          target: 'col1',
+          value: 'Value1',
+        },
+      ],
+    },
+    {
+      id: 'filter1',
+      name: 'filter 1',
+      icon: 'Heart',
+      route: 'path',
+      filters: [
+        {
+          target: 'col1',
+          value: 'filter1',
+        },
+      ],
+    },
+    {
+      id: 'filter2',
+      name: 'filter 2',
+      icon: 'User',
+      unDeletable: true,
+      route: 'path',
+      filters: [
+        {
+          target: 'col1',
+          value: 'filter2',
+        },
+      ],
+    },
+  ],
+};
+
+export const Sortable = Template.bind({});
+Sortable.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+      sortable: true,
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+      sortable: true,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+      sortable: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+};
+
+export const SortedAsc = Template.bind({});
+SortedAsc.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+      sortable: true,
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+      sortable: true,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+      sortable: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  sort: {
+    key: 'col1',
+    value: 'asc',
+  },
+};
+
+export const SortedDesc = Template.bind({});
+SortedDesc.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+      sortable: true,
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+      sortable: true,
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+      sortable: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  sort: {
+    key: 'col1',
+    value: 'desc',
+  },
+};
+
+export const Selectable = Template.bind({});
+Selectable.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectable: true,
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+};
+
+const TemplateWithSelectAction = (args) => ({
+  components: {
+    BmsTable,
+    BmsButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsTable v-bind="args">
+       <template #alert-action> 
+          <BmsButton mode="danger">Supprimer la sélection</BmsButton>
+        </template>
+      </BmsTable>
+    `,
+});
+
+export const SelectedWithCustomAction = TemplateWithSelectAction.bind({});
+SelectedWithCustomAction.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+};
+export const AllSelected = Template.bind({});
+AllSelected.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectable: true,
+};
+
+const TemplateWithCustomActions = (args) => ({
+  components: {
+    BmsTable,
+    BmsButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsTable v-bind="args">
+      <template  #custom-actions>
+          <BmsButton type="secondary">Custom action</BmsButton>
+        </template>
+      </BmsTable>
+    `,
+});
+
+export const WithCustomActions = TemplateWithCustomActions.bind({});
+WithCustomActions.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value2',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+};