@ouestfrance/sipa-bms-ui 8.1.3 → 8.2.0

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', {
@@ -157,7 +156,6 @@ const areAllCurrentItemsSelected = ref(props.selectMode === SelectMode.ALL);
 const selectAll = () => {
   emits('selectAll');
   areAllCurrentItemsSelected.value = true;
-  selectedItems.value = props.items;
 };
 
 const onToggleSelectAllCurrentItems = () => {
@@ -324,7 +322,6 @@ onMounted(() => {
             <th
               v-for="header in filteredHeaders"
               :style="{
-                // @ts-ignore
                 '--table-cell-width': header?.width || undefined,
               }"
               :class="getHeaderClasses(header)"
@@ -346,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>
@@ -503,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);
         }
       }
     }
@@ -598,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 {
+    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/index.ts

@@ -28,6 +28,7 @@ import BmsInputRadioCaption from './components/form/BmsInputRadioCaption.vue';
 import BmsInputRadioCaptionGroup from './components/form/BmsInputRadioCaptionGroup.vue';
 import BmsInputText from './components/form/BmsInputText.vue';
 import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
 import BmsSearch from './components/form/BmsSearch.vue';
 import BmsSelect from './components/form/BmsSelect.vue';
 import BmsTag from './components/form/BmsTag.vue';
@@ -95,6 +96,7 @@ export const createBmsUi = () => ({
     app.component('BmsInputRadioCaptionGroup', BmsInputRadioCaptionGroup);
     app.component('BmsInputText', BmsInputText);
     app.component('BmsInputToggle', BmsInputToggle);
+    app.component('BmsMultiSelect', BmsMultiSelect);
     app.component('BmsSearch', BmsSearch);
     app.component('BmsSelect', BmsSelect);
     app.component('BmsTag', BmsTag);
@@ -170,6 +172,7 @@ export {
   BmsInputRadioCaptionGroup,
   BmsInputText,
   BmsInputToggle,
+  BmsMultiSelect,
   BmsSearch,
   BmsSelect,
   BmsTag,

package/src/models/table.model.ts

@@ -1,3 +1,4 @@
+import { InputType } from './form.model';
 import { Sort, SortFunction } from './sort.model';
 
 export interface TableHeader {
@@ -32,7 +33,7 @@ export type FilterType =
 
 export interface Filter {
   label: string;
-  inputType?: string;
+  inputType?: InputType;
   key: string;
   type: FilterType;
   value?: any;

package/src/showroom/pages/forms.vue

@@ -257,6 +257,26 @@
 
     <hr />
 
+    <BmsMultiSelect
+      label="multi select"
+      required
+      placeholder="This is a placeholder"
+      v-model="multiSelect"
+      :options="[
+        { label: 'toto1', value: 'value1', icon: BellIcon },
+        { label: 'titi2', value: 'value2', icon: Magnet },
+        { label: 'toto3', value: 'value3', icon: Egg },
+        { label: 'toto4', value: 'value4', icon: Egg },
+        { label: 'toto5', value: 'value5', icon: Egg },
+        { label: 'toto6', value: 'value6', icon: Egg },
+        { label: 'toto7', value: 'value7', icon: Egg },
+        { label: 'toto8', value: 'value8', icon: Egg },
+        { label: 'toto9', value: 'value9', icon: Egg },
+      ]"
+    />
+
+    <hr />
+
     <BmsTextArea
       label="textArea"
       required
@@ -330,9 +350,10 @@ import BmsInputDateTime from '@/components/form/BmsInputDateTime.vue';
 import BmsInputCheckboxGroup from '@/components/form/BmsInputCheckboxGroup.vue';
 import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.vue';
 import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
-import { Copy } from 'lucide-vue-next';
+import { Copy, BellIcon, Egg, Magnet } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 import { BMS_FORM_VALID_URL_REGEX } from '@/helpers/form.helper';
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
 
 const { success } = useNotifications();
 const text = ref('');
@@ -340,6 +361,7 @@ const text2 = ref('');
 const captionsText2 = ref();
 const selected = ref('value1');
 const selected2 = ref('');
+const multiSelect = ref([]);
 const files: Ref<File[]> = ref([]);
 const selectedRadio = ref('titi');
 const selectedRadio2 = ref('titi');

package/src/showroom/pages/table.vue

@@ -8,7 +8,6 @@
     :size="5"
     :canSaveFilters="true"
     :savedFilters="savedFilters"
-    :selectable="true"
     help-link="/help-path"
     activity-link="/activity-path"
     v-model:selectedItems="selectedItems"
@@ -43,9 +42,16 @@
         tooltip
       </BmsTooltip>
     </template>
-    <template #action>
-      <BmsIconButton> <Save /> </BmsIconButton>
-      <BmsIconButton :mode="StatusType.Danger"> <Trash /> </BmsIconButton>
+    <template #action="{ isChildElement }">
+      <template v-if="isChildElement">
+        <BmsChip>Hérité</BmsChip>
+      </template>
+      <template v-else>
+        <BmsIconButton @click="success('Sauvegarde')"> <Save /> </BmsIconButton>
+        <BmsIconButton :mode="StatusType.Danger" @click="error('Suppression')">
+          <Trash />
+        </BmsIconButton>
+      </template>
     </template>
   </bms-table>
   <BmsButton @click="goBack">Go Back</BmsButton>
@@ -57,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { BmsBackButton, BmsButton } from '@/index';
+import { BmsBackButton, BmsButton, useNotifications } from '@/index';
 import {
   Filter,
   InputType,
@@ -71,8 +77,10 @@ import BmsShortLinkMenu from '@/components/navigation/BmsShortLinkMenu.vue';
 import BmsTooltip from '@/components/feedback/BmsTooltip.vue';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 import { Delete, Save, Trash } from 'lucide-vue-next';
+import BmsChip from '@/components/form/BmsChip.vue';
 
 const { goBack } = useRouterHistory();
+const { error, success } = useNotifications();
 
 const headers = [
   { label: 'Colonne 1', key: 'column1', sortable: true },
@@ -125,6 +133,23 @@ const items = Array(100)
     },
     isOk: Math.random() < 0.5,
     number: Math.random(),
+    childElement:
+      Math.random() < 0.5
+        ? {
+            column1: 'Element enfant',
+            column2: index,
+            date: randomDate(),
+            dateUpdate: randomDate(),
+            dateDelete: randomDate(),
+            choice1: 'N/A',
+            choice2: 'N/A',
+            deepValue: {
+              deepAttr: index % 2 === 0,
+            },
+            isOk: true,
+            number: 0,
+          }
+        : undefined,
   }));
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);