@ouestfrance/sipa-bms-ui 7.14.1

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

@@ -0,0 +1,563 @@
+import UiBmsTable from '@/components/table/UiBmsTable.vue';
+import { Save, Trash } from 'lucide-vue-next';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+
+export default {
+  title: 'Composants/table/UiTable',
+  component: UiBmsTable,
+};
+
+const Template = (args) => ({
+  components: {
+    UiBmsTable,
+  },
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+    <UiBmsTable v-bind="args">
+        <template #alert-action>
+        This is a custom action
+      </template>
+      <template #saved-filters>
+        This is a custom saved filters
+      </template>
+      <template #search>
+        This is a custom search
+      </template>
+      <template #filters>
+        This is a custom filter
+      </template>
+      <template v-if="args.slotRow" #default="{ row }">
+        <slot :row="row">
+          <td>Custom TD</td>
+          <td>Custom TD2</td>
+          <td>Custom TD3</td>
+        </slot>
+      </template>
+      <template #pagination>
+        This is a custom pagination
+      </template>
+    </UiBmsTable>
+  `,
+});
+
+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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  hasFilters: true,
+  totalSize: 2,
+};
+
+export const CustomRows = Template.bind({});
+CustomRows.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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  slotRow: true,
+  totalSize: 2,
+};
+
+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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  mode: 'dense',
+  totalSize: 2,
+};
+
+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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  loading: true,
+  totalSize: 2,
+};
+
+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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  totalSize: 2,
+};
+
+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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  sort: {
+    key: 'col1',
+    value: 'desc',
+  },
+  totalSize: 2,
+};
+
+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: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  sort: {
+    key: 'col1',
+    value: 'asc',
+  },
+  totalSize: 2,
+};
+
+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,
+  totalSize: 2,
+};
+
+export const SelectableDisabled = Template.bind({});
+SelectableDisabled.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,
+  selectableDisabled: true,
+  totalSize: 2,
+};
+
+const TemplateWithActionColumn = (args) => ({
+  components: {
+    UiBmsTable,
+    BmsIconButton,
+    Save,
+    Trash,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UiBmsTable v-bind="args">
+      <template #actions="{ row }">
+        <BmsIconButton> <Save/> </BmsIconButton>
+        <BmsIconButton mode="danger"> <Trash/> </BmsIconButton>
+      </template>
+    </UiBmsTable>
+  `,
+});
+export const WithActionColumn = TemplateWithActionColumn.bind({});
+WithActionColumn.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+    {
+      label: 'Actions',
+      key: 'actions',
+      action: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  totalSize: 2,
+};
+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,
+  totalSize: 2,
+};
+
+export const SelectedWithMaxSelected = Template.bind({});
+SelectedWithMaxSelected.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,
+  totalSize: 2,
+  maxSelectedSize: 1,
+};
+
+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,
+  totalSize: 2,
+};