@ouestfrance/sipa-bms-ui 8.1.4 → 8.3.0

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

@@ -1,5 +1,7 @@
 import BmsTable from '@/components/table/BmsTable.vue';
 import BmsButton from '@/components/button/BmsButton.vue';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import { Save, Trash } from 'lucide-vue-next';
 
 export default {
   title: 'Composants/table/Table',
@@ -928,3 +930,114 @@ WithCustomActions.args = {
     },
   ],
 };
+
+const TemplateActionColumn = (args) => ({
+  components: {
+    BmsTable,
+    BmsIconButton,
+    Save,
+    Trash,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsTable v-bind="args">
+       <template #col3="{isChildElement}"> 
+        <template v-if="isChildElement">
+         disabled
+        </template>
+        <template v-else>
+          <BmsIconButton><Save/></BmsIconButton>
+          <BmsIconButton mode="danger"><Trash/></BmsIconButton>
+        </template>
+       </template>
+      </BmsTable>
+    `,
+});
+
+export const WithActionColumn = TemplateActionColumn.bind({});
+WithActionColumn.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column actions',
+      key: 'col3',
+      action: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+};
+
+export const WithActionColumnAndChildElement = TemplateActionColumn.bind({});
+WithActionColumnAndChildElement.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column actions',
+      key: 'col3',
+      action: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+      childElement: {
+        col1: 'child1',
+        col2: 'child2',
+        col3: 'child3',
+      },
+    },
+    {
+      col1: 'Value10',
+      col2: 'Value11',
+      col3: 'Value12',
+    },
+  ],
+  selectedItems: [],
+  selectable: true,
+};

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

@@ -2,8 +2,15 @@ import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import { Save, Trash } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 
+import template from '@/documentation/template_internal_component.mdx';
+
 export default {
-  title: 'Composants/table/UiTable',
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/table/UiBmsTable',
   component: UiBmsTable,
 };
 
@@ -561,3 +568,44 @@ AllSelected.args = {
   selectable: true,
   totalSize: 2,
 };
+
+export const WithChildElements = Template.bind({});
+WithChildElements.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      action: true,
+      // align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+      childElement: {
+        col1: 'Child1',
+        col2: 'Child2',
+        col3: 'Child3',
+      },
+    },
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  hasFilters: true,
+  totalSize: 2,
+};

package/src/components/table/UiBmsTable.vue

@@ -5,7 +5,6 @@ import {
   SortValue,
   StatusType,
   type TableHeader,
-  TooltipDirection,
 } from '@/models';
 import _get from 'lodash/get';
 import _isEqual from 'lodash/isEqual';
@@ -21,10 +20,9 @@ import {
 import BmsLoader from '../feedback/BmsLoader.vue';
 import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-vue-next';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
-import { v4 as uuid } from 'uuid';
 import BmsAlert from '../feedback/BmsAlert.vue';
-import BmsTooltip from '../feedback/BmsTooltip.vue';
 import { enforceActionsColumnHeader } from '@/helpers';
+import UiBmsTableRow from './UiBmsTableRow.vue';
 
 interface UiBmsTableProps {
   headers: TableHeader[];
@@ -51,6 +49,7 @@ const props = withDefaults(defineProps<UiBmsTableProps>(), {
   selectable: false,
   selectableDisabled: false,
   maxSelectedSize: Infinity,
+  selectMode: SelectMode.DEFAULT,
 });
 
 const selectedItems: ModelRef<unknown[]> = defineModel('selectedItems', {
@@ -323,7 +322,6 @@ onMounted(() => {
             <th
               v-for="header in filteredHeaders"
               :style="{
-                // @ts-ignore
                 '--table-cell-width': header?.width || undefined,
               }"
               :class="getHeaderClasses(header)"
@@ -345,38 +343,44 @@ onMounted(() => {
         <tbody class="bms-table__body">
           <template v-if="items.length">
             <template v-for="item in items" :key="item">
-              <tr :class="{ selected: isItemSelected(item) }">
-                <td v-if="selectable" class="bms-table__cell__checkbox">
-                  <BmsTooltip
-                    :direction="TooltipDirection.Right"
-                    tooltip-text="Vous ne pouvez pas désélectionner un élément unitairement si vous avez choisi de sélectionner la totalité des éléments"
-                    :activated="selectMode === SelectMode.ALL"
-                  >
-                    <UiBmsInputCheckbox
-                      :name="uuid()"
-                      :disabled="
-                        selectMode === SelectMode.ALL || selectableDisabled
-                      "
-                      :model-value="isItemSelected(item)"
-                      @update:model-value="onItemSelect(item)"
-                    />
-                  </BmsTooltip>
-                </td>
-                <slot :row="item">
-                  <td
-                    v-for="cell in filteredHeaders"
-                    :class="[getAlignClass(cell), 'bms-table__cell']"
-                    :key="cell.key"
+              <UiBmsTableRow
+                :item="item"
+                :selected-items="selectedItems"
+                :selectable="selectable"
+                :headers="filteredHeaders"
+                :select-mode="selectMode"
+                :selectable-disabled="selectableDisabled"
+                :dense="mode === 'dense'"
+                @select="onItemSelect"
+              >
+                <template v-for="cell in headers" v-slot:[cell.key]="slotData">
+                  <slot :name="cell.key" v-bind="slotData" />
+                </template>
+                <template #default="{ row }">
+                  <slot name="default" :row="row"></slot>
+                </template>
+              </UiBmsTableRow>
+              <!-- FIXME typing -->
+              <template v-if="(item as any)?.childElement">
+                <slot name="child-element">
+                  <UiBmsTableRow
+                    is-child-element
+                    :item="item"
+                    :selected-items="selectedItems"
+                    :selectable="selectable"
+                    :headers="filteredHeaders"
+                    :select-mode="selectMode"
+                    :selectable-disabled="selectableDisabled"
                   >
-                    <div v-if="cell?.action" class="bms-table__cell--action">
-                      <slot :name="cell.key" :row="item"></slot>
-                    </div>
-                    <slot v-else :name="cell.key" :row="item"
-                      >{{ _get(item, cell.key) || '' }}
-                    </slot>
-                  </td>
+                    <template
+                      v-for="cell in headers"
+                      v-slot:[cell.key]="slotData"
+                    >
+                      <slot :name="cell.key" v-bind="slotData" />
+                    </template>
+                  </UiBmsTableRow>
                 </slot>
-              </tr>
+              </template>
             </template>
           </template>
           <template v-else>
@@ -502,44 +506,44 @@ onMounted(() => {
       td {
         padding: var(--table-cell-padding);
       }
+    }
 
-      th {
-        --header-content-sort-icon-color: var(--bms-grey-25);
-        --header-content-justify: start;
+    th {
+      --header-content-sort-icon-color: var(--bms-grey-25);
+      --header-content-justify: start;
 
-        width: var(--table-cell-width, auto);
-        padding: var(--table-cell-padding);
+      width: var(--table-cell-width, auto);
+      padding: var(--table-cell-padding);
 
-        &.sortable:hover {
-          --header-content-sort-icon-color: var(--bms-grey-100);
-          cursor: pointer;
-        }
+      &.sortable:hover {
+        --header-content-sort-icon-color: var(--bms-grey-100);
+        cursor: pointer;
+      }
 
-        &.u-text-align-start {
-          --header-content-justify: start;
-        }
+      &.u-text-align-start {
+        --header-content-justify: start;
+      }
 
-        &.u-text-align-center {
-          --header-content-justify: center;
-        }
+      &.u-text-align-center {
+        --header-content-justify: center;
+      }
 
-        &.u-text-align-end {
-          --header-content-justify: end;
-        }
+      &.u-text-align-end {
+        --header-content-justify: end;
+      }
 
-        &.sorted {
-          --header-content-sort-icon-color: var(--bms-grey-100);
-        }
+      &.sorted {
+        --header-content-sort-icon-color: var(--bms-grey-100);
+      }
 
-        .header-content {
-          display: flex;
-          align-items: center;
-          justify-content: var(--header-content-justify);
-          gap: 0.5em;
+      .header-content {
+        display: flex;
+        align-items: center;
+        justify-content: var(--header-content-justify);
+        gap: 0.5em;
 
-          &-sort {
-            color: var(--header-content-sort-icon-color);
-          }
+        &-sort {
+          color: var(--header-content-sort-icon-color);
         }
       }
     }
@@ -597,22 +601,16 @@ onMounted(() => {
     border-bottom-right-radius: var(--table-cell-radius);
   }
 
-  td,
   th {
     background-color: rgba(255, 255, 255, 1);
   }
 
   tbody {
     overflow: hidden;
+    background: white;
 
     tr {
       position: relative;
-
-      &.selected {
-        td {
-          background-color: var(--bms-main-10);
-        }
-      }
     }
   }
 }

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

@@ -0,0 +1,143 @@
+import UiBmsTableRow from '@/components/table/UiBmsTableRow.vue';
+
+export default {
+  title: 'Composants/table/UiBmsTableRow',
+  component: UiBmsTableRow,
+};
+
+const Template = (args) => ({
+  components: {
+    UiBmsTableRow,
+  },
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+  <table style="width:100%">
+    <UiBmsTableRow v-bind="args">
+    </UiBmsTableRow>
+    </table>
+  `,
+});
+
+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',
+    },
+  ],
+  selectedItems: [],
+  item: {
+    col1: 'Value1',
+    col2: 'Value2',
+    col3: 'Value3',
+  },
+};
+
+export const Dense = Template.bind({});
+Dense.args = {
+  dense: true,
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  selectedItems: [],
+  item: {
+    col1: 'Value1',
+    col2: 'Value2',
+    col3: 'Value3',
+  },
+};
+
+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',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  item: {
+    col1: 'Value1',
+    col2: 'Value2',
+    col3: 'Value3',
+  },
+};
+
+export const IsChildElement = Template.bind({});
+IsChildElement.args = {
+  isChildElement: true,
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  selectedItems: [],
+  item: {
+    col1: 'Value1',
+    col2: 'Value2',
+    col3: 'Value3',
+    childElement: {
+      col1: 'child1',
+      col2: 'child2',
+      col3: 'child3',
+    },
+  },
+};

package/src/components/table/UiBmsTableRow.vue

@@ -0,0 +1,150 @@
+<template>
+  <tr
+    class="bms-table__row"
+    :class="{
+      'bms-table__row--selected': isItemSelected(item),
+      'bms-table__row--disabled': isChildElement,
+      'bms-table__row--dense': dense,
+    }"
+  >
+    <td v-if="selectable" class="bms-table__row__cell__checkbox">
+      <BmsTooltip
+        :direction="TooltipDirection.Right"
+        tooltip-text="Vous ne pouvez pas désélectionner un élément unitairement si vous avez choisi de sélectionner la totalité des éléments"
+        :activated="selectMode === SelectMode.ALL"
+      >
+        <UiBmsInputCheckbox
+          :name="uuid()"
+          :disabled="selectMode === SelectMode.ALL || selectableDisabled"
+          :model-value="isItemSelected(item)"
+          @update:model-value="emits('select', item)"
+        />
+      </BmsTooltip>
+    </td>
+    <slot name="default" :row="item">
+      <td
+        v-for="(cell, index) in headers"
+        :class="[getAlignClass(cell), 'bms-table__row__cell']"
+        :key="cell.key"
+      >
+        <div v-if="isChildElement" class="bms-table__row__cell--child-element">
+          <div class="bms-table__row__cell--child-element__icon">
+            <CornerDownRight v-if="index === 0" />
+          </div>
+          <slot
+            :name="cell.key"
+            :row="item.childElement"
+            :isChildElement="isChildElement"
+          >
+            {{ _get(item.childElement, cell.key) || '' }}
+          </slot>
+        </div>
+        <div v-else-if="cell?.action" class="bms-table__row__cell--action">
+          <slot
+            :name="cell.key"
+            :row="item"
+            :isChildElement="isChildElement"
+          ></slot>
+        </div>
+        <slot
+          v-else
+          :name="cell.key"
+          :row="item"
+          :isChildElement="isChildElement"
+        >
+          {{ _get(item, cell.key) || '' }}
+        </slot>
+      </td>
+    </slot>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { SelectMode, TableHeader, TooltipDirection } from '@/models';
+import { v4 as uuid } from 'uuid';
+import _isEqual from 'lodash/isEqual';
+import _get from 'lodash/get';
+import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
+import BmsTooltip from '../feedback/BmsTooltip.vue';
+import { CornerDownRight } from 'lucide-vue-next';
+
+interface Props {
+  item: any;
+  selectedItems: any[];
+  selectable: boolean;
+  headers: TableHeader[];
+  selectMode: SelectMode;
+  selectableDisabled?: boolean;
+  dense?: boolean;
+  isChildElement?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  dense: false,
+  selectableDisabled: false,
+});
+
+const emits = defineEmits<{ select: [item: any] }>();
+
+const isItemSelected = (item: unknown): boolean => {
+  return (
+    props.selectMode === SelectMode.ALL ||
+    !!props.selectedItems.find((it) => _isEqual(item, it))
+  );
+};
+
+const getAlignClass = (header: TableHeader) => {
+  const align = !header.align ? 'start' : header.align;
+  return `u-text-align-${align}`;
+};
+</script>
+
+<style lang="scss" scoped>
+.bms-table__row {
+  --table-cell-padding: 1em;
+  background-color: rgba(255, 255, 255, 1);
+
+  td {
+    padding: var(--table-cell-padding);
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  &--dense {
+    --table-cell-padding: 0.5em 1em;
+  }
+  &--selected {
+    :deep(td) {
+      background-color: var(--bms-main-10);
+    }
+  }
+
+  &--disabled {
+    td {
+      color: var(--bms-grey-50);
+    }
+  }
+
+  &__cell {
+    &__checkbox {
+      width: 4em;
+    }
+    &--action {
+      display: flex;
+      justify-content: end;
+    }
+
+    &--empty {
+      height: 360px;
+    }
+
+    &--child-element {
+      display: inline-flex;
+      align-items: flex-end;
+      &__icon {
+        display: flex;
+        min-width: 1em;
+        margin-right: 1em;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,12 @@
 import UiFilterButton from '@/components/table/UiFilterButton.vue';
+import template from '@/documentation/template_internal_component.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/table/FilterButton',
   component: UiFilterButton,
   argTypes: {},