@ouestfrance/sipa-bms-ui 8.22.2 → 8.23.0

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

@@ -1,11 +1,15 @@
 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';
+import { BmsTag } from '@/index';
+import { Save, Trash, Pencil } from 'lucide-vue-next';
 
 export default {
   title: 'Composants/table/Table',
   component: BmsTable,
+  parameters: {
+    chromatic: { disable: true },
+  },
   argTypes: {
     disableSearch: {
       control: { type: 'boolean' },
@@ -14,7 +18,7 @@ export default {
       options: ['single', 'default'],
     },
     mode: {
-      options: ['normal', 'dense'],
+      options: ['normal', 'dense', 'small'],
     },
     loading: {
       control: { type: 'boolean' },
@@ -132,6 +136,70 @@ FiltersClosed.args = {
   disableSearch: true,
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  mode: 'small',
+  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 FiltersOpened = Template.bind({});
 FiltersOpened.args = {
   headers: [
@@ -1088,3 +1156,245 @@ WithActionColumnAndChildElement.args = {
   selectedItems: [],
   selectable: true,
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  components: {
+    BmsTable,
+    BmsButton,
+    BmsTag,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BmsTable v-bind="args">
+    <template v-if="args.hasCustomAction" #custom-action>
+      <div style="display: flex; gap: 8px;">
+        <BmsTag 
+          v-for="tag in args.filterTags" 
+          :key="tag.id"
+          :active="tag.active"
+          @click="tag.onClick"
+        >
+          {{ tag.label }}
+        </BmsTag>
+      </div>
+    </template>
+  </BmsTable>
+  `,
+});
+
+// Common headers and items for documentation examples
+const commonHeaders = [
+  {
+    label: 'Name',
+    key: 'name',
+    align: 'start',
+    sortable: true,
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    align: 'start',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+    align: 'center',
+  },
+];
+
+const commonItems = [
+  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
+  { name: 'Jane Smith', email: 'jane@example.com', status: 'Active' },
+  { name: 'Bob Johnson', email: 'bob@example.com', status: 'Inactive' },
+  { name: 'Alice Williams', email: 'alice@example.com', status: 'Active' },
+  { name: 'Charlie Brown', email: 'charlie@example.com', status: 'Pending' },
+];
+
+// Playground with default values for documentation
+export const PlaygroundTable = SimpleTemplate.bind({});
+PlaygroundTable.parameters = { chromatic: { disable: true } };
+PlaygroundTable.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [],
+  hasCustomAction: false,
+};
+
+// Do: Table with search
+export const DoWithSearch = SimpleTemplate.bind({});
+DoWithSearch.parameters = { chromatic: { disable: true } };
+DoWithSearch.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [],
+  hasCustomAction: false,
+};
+
+// Do: Table without search
+export const DoWithoutSearch = SimpleTemplate.bind({});
+DoWithoutSearch.parameters = { chromatic: { disable: true } };
+DoWithoutSearch.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: true,
+  filters: [],
+  hasCustomAction: false,
+};
+
+// Do: Table with filters
+export const DoWithFilters = SimpleTemplate.bind({});
+DoWithFilters.parameters = { chromatic: { disable: true } };
+DoWithFilters.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [
+    {
+      label: 'Status',
+      key: 'status',
+      type: 'select',
+      selectOptions: [
+        { label: 'Active', value: 'Active' },
+        { label: 'Inactive', value: 'Inactive' },
+        { label: 'Pending', value: 'Pending' },
+      ],
+    },
+  ],
+  hasCustomAction: false,
+};
+
+// Do: Table without filters
+export const DoWithoutFilters = SimpleTemplate.bind({});
+DoWithoutFilters.parameters = { chromatic: { disable: true } };
+DoWithoutFilters.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [],
+  hasCustomAction: false,
+};
+
+// Do: Table with custom actions (filter tags)
+export const DoWithCustomActions = SimpleTemplate.bind({});
+DoWithCustomActions.parameters = { chromatic: { disable: true } };
+DoWithCustomActions.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [],
+  hasCustomAction: true,
+  filterTags: [
+    { id: '1', label: 'Active', active: true, onClick: () => {} },
+    { id: '2', label: 'Inactive', active: false, onClick: () => {} },
+    { id: '3', label: 'Pending', active: false, onClick: () => {} },
+  ],
+};
+
+// Do: Table with action icons
+const TemplateWithActionIcons = (args) => ({
+  components: {
+    BmsTable,
+    BmsIconButton,
+    Pencil,
+    Trash,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BmsTable v-bind="args">
+    <template #actions="{ row, isChildElement }">
+      <template v-if="isChildElement">
+        <span style="color: var(--bms-grey-50);">No actions</span>
+      </template>
+      <template v-else>
+        <div style="display: flex; gap: 8px;">
+          <BmsIconButton><Pencil/></BmsIconButton>
+          <BmsIconButton mode="danger"><Trash/></BmsIconButton>
+        </div>
+      </template>
+    </template>
+  </BmsTable>
+  `,
+});
+
+export const DoWithActionIcons = TemplateWithActionIcons.bind({});
+DoWithActionIcons.args = {
+  headers: [
+    ...commonHeaders,
+    {
+      label: 'Actions',
+      key: 'actions',
+      action: true,
+    },
+  ],
+  items: commonItems,
+  disableSearch: false,
+  filters: [],
+};
+
+// Do: Table with search and filters
+export const DoWithSearchAndFilters = SimpleTemplate.bind({});
+DoWithSearchAndFilters.parameters = { chromatic: { disable: true } };
+DoWithSearchAndFilters.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [
+    {
+      label: 'Status',
+      key: 'status',
+      type: 'select',
+      selectOptions: [
+        { label: 'Active', value: 'Active' },
+        { label: 'Inactive', value: 'Inactive' },
+        { label: 'Pending', value: 'Pending' },
+      ],
+    },
+  ],
+  hasCustomAction: false,
+};
+
+// Do: Table with search, filters and actions
+export const DoWithSearchFiltersAndActions = SimpleTemplate.bind({});
+DoWithSearchFiltersAndActions.parameters = { chromatic: { disable: true } };
+DoWithSearchFiltersAndActions.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [
+    {
+      label: 'Status',
+      key: 'status',
+      type: 'select',
+      selectOptions: [
+        { label: 'Active', value: 'Active' },
+        { label: 'Inactive', value: 'Inactive' },
+        { label: 'Pending', value: 'Pending' },
+      ],
+    },
+  ],
+  hasCustomAction: true,
+  filterTags: [
+    { id: '1', label: 'Active', active: true, onClick: () => {} },
+    { id: '2', label: 'Inactive', active: false, onClick: () => {} },
+  ],
+};
+
+// Do: Table with row selection
+export const DoWithRowSelection = SimpleTemplate.bind({});
+DoWithRowSelection.parameters = { chromatic: { disable: true } };
+DoWithRowSelection.args = {
+  headers: commonHeaders,
+  items: commonItems,
+  disableSearch: false,
+  filters: [],
+  hasCustomAction: false,
+  selectable: true,
+  selectedItems: [],
+};

package/src/components/table/BmsTable.vue

@@ -13,6 +13,7 @@ import {
   Sort,
   SortValue,
   TableHeader,
+  TableMode,
 } from '@/models';
 import { computed, Ref, ref, watch, watchEffect } from 'vue';
 import BmsTableFilters from './BmsTableFilters.vue';
@@ -21,6 +22,7 @@ import { BmsTag } from '@/index';
 import * as lucideIcons from 'lucide-vue-next';
 import { Trash } from 'lucide-vue-next';
 import { useRoute } from 'vue-router';
+import Table from '@/showroom/pages/table.vue';
 
 const route = useRoute();
 const slots = defineSlots();
@@ -32,7 +34,7 @@ interface UiTableProps {
   savedFilters?: SavedFilter[];
   canSaveFilters?: boolean;
   items: unknown[];
-  mode?: 'normal' | 'dense';
+  mode?: TableMode;
   persistent?: boolean;
   pagination?: number[];
   size?: number;
@@ -45,7 +47,7 @@ interface UiTableProps {
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
-  mode: 'normal',
+  mode: TableMode.NORMAL,
   persistent: true,
   pagination: () => [25, 50, 100],
   size: 25,
@@ -233,6 +235,8 @@ const onSelectAll = () => {
 };
 
 const totalSize = computed(() => elementsAndChildElements.value.length);
+
+const isTableSmall = computed(() => props.mode === TableMode.SMALL);
 </script>
 
 <template>
@@ -264,6 +268,7 @@ const totalSize = computed(() => elementsAndChildElements.value.length);
         <div v-show="isFilterVisible" class="filters-container">
           <BmsTableFilters
             v-model="filters"
+            :small="isTableSmall"
             :canSaveFilters="canSaveFilters"
             @saveFilter="onSaveFilter"
             @reset-filters="resetFilters"
@@ -300,10 +305,15 @@ const totalSize = computed(() => elementsAndChildElements.value.length);
         :activeFiltersNb="numberOfActiveFilters"
         :isFilterVisible="isFilterVisible"
         @toggleFilters="toggleFilters"
+        :small="isTableSmall"
       />
       <template v-if="!disableSearch">
         <slot name="search">
-          <BmsSearch v-model="search" class="table-search" />
+          <BmsSearch
+            v-model="search"
+            class="table-search"
+            :small="isTableSmall"
+          />
         </slot>
       </template>
     </template>
@@ -325,6 +335,7 @@ const totalSize = computed(() => elementsAndChildElements.value.length);
           :currentPage="currentPage"
           :sizes="paginationsOptions"
           :pages="totalPages"
+          :small="isTableSmall"
           @prev="onPrevClick"
           @next="onNextClick"
           @go="go($event)"

package/src/components/table/BmsTableFilters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="filters">
+  <div class="filters" :class="{ 'filters--small': small }">
     <div class="filters__header">
       <div class="filters__header-title">
         <FilterIcon />
@@ -23,7 +23,7 @@
         </BmsIconButton>
       </span>
     </div>
-    <div class="filters__inputs">
+    <div class="filters__inputs" :class="{ 'filters__inputs--small': small }">
       <span
         v-for="filter in modelValue"
         class="input"
@@ -34,6 +34,7 @@
       >
         <component
           :is="getFilterComponent(filter.type)"
+          :small="small"
           :label="filter.label"
           :inputType="filter.inputType"
           :modelValue="transformValueForComponent(filter?.value, filter.type)"
@@ -104,9 +105,11 @@ const props = withDefaults(
   defineProps<{
     modelValue: Filter[];
     canSaveFilters?: boolean;
+    small?: boolean;
   }>(),
   {
     canSaveFilters: false,
+    small: false,
   },
 );
 
@@ -246,11 +249,15 @@ watch(
 
 <style lang="scss" scoped>
 .filters {
-  padding: 16px;
+  padding: 1em;
   background: var(--bms-white);
   border: 1px solid var(--bms-grey-10);
   border-radius: var(--bms-border-radius-large);
-  margin-bottom: 16px;
+  margin-bottom: 1em;
+  &--small {
+    margin-bottom: 0.5em;
+    padding: 0.5em;
+  }
 
   &__header {
     display: flex;
@@ -268,9 +275,12 @@ watch(
   &__inputs {
     display: flex;
     flex-wrap: wrap;
-    padding-top: 16px;
     align-items: flex-end;
     row-gap: 8px;
+    padding-top: 1em;
+    &--small {
+      padding-top: 0.5em;
+    }
 
     .input {
       width: 25%;

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

@@ -11,6 +11,9 @@ export default {
       page: template,
     },
   },
+  argTypes: {
+    mode: { options: ['normal', 'dense', 'small'] },
+  },
   tags: ['code-only'],
   title: 'Composants/table/UiBmsTable',
   component: UiBmsTable,

package/src/components/table/UiBmsTable.vue

@@ -5,6 +5,7 @@ import {
   SortValue,
   StatusType,
   type TableHeader,
+  TableMode,
 } from '@/models';
 import _get from 'lodash/get';
 import _isEqual from 'lodash/isEqual';
@@ -27,7 +28,7 @@ import UiBmsTableRow from './UiBmsTableRow.vue';
 interface UiBmsTableProps {
   headers: TableHeader[];
   items: any[];
-  mode?: 'normal' | 'dense';
+  mode?: TableMode;
   loading?: boolean;
   hasFilters?: boolean;
   sort?: Sort;
@@ -40,7 +41,7 @@ interface UiBmsTableProps {
 }
 
 const props = withDefaults(defineProps<UiBmsTableProps>(), {
-  mode: 'normal',
+  mode: TableMode.NORMAL,
   hasFilters: false,
   sort: () => ({
     key: null,
@@ -211,7 +212,10 @@ onMounted(() => {
 
 <template>
   <div class="bms-table">
-    <div class="bms-table__actions">
+    <div
+      class="bms-table__actions"
+      :class="{ 'bms-table__actions--small': mode === TableMode.SMALL }"
+    >
       <div class="bms-table__actions__saved-filters">
         <div class="bms-table__actions__custom">
           <slot name="custom-actions"></slot>
@@ -321,7 +325,7 @@ onMounted(() => {
                 :headers="filteredHeaders"
                 :select-mode="selectMode"
                 :selectable-disabled="selectableDisabled"
-                :dense="mode === 'dense'"
+                :dense="mode === TableMode.DENSE || mode === TableMode.SMALL"
                 @select="onItemSelect"
               >
                 <template v-for="cell in headers" v-slot:[cell.key]="slotData">
@@ -400,7 +404,11 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 16px;
+    margin-bottom: 1em;
+
+    &--small {
+      margin-bottom: 0.5em;
+    }
 
     &__saved-filters {
       display: flex;
@@ -528,6 +536,7 @@ onMounted(() => {
     visibility: hidden;
     --table-blob-height: 80px;
 
+    &.small,
     &.dense {
       --table-blob-height: 50px;
     }

package/src/components/table/UiFilterButton.vue

@@ -4,6 +4,7 @@
       class="filter-button"
       :color="isFilterVisible ? StatusType.Default : StatusType.Information"
       :mode="isFilterVisible ? 'fill' : 'ghost'"
+      :small="small"
       @click="$emits('toggleFilters')"
     >
       <FilterIcon />
@@ -23,11 +24,13 @@ import { StatusType } from '@/models';
 interface UiFilterButtonProps {
   isFilterVisible: boolean;
   activeFiltersNb: number;
+  small?: boolean;
 }
 
 const props = withDefaults(defineProps<UiFilterButtonProps>(), {
   isFilterVisible: false,
   activeFiltersNb: 0,
+  small: false,
 });
 
 const $emits = defineEmits<{
@@ -43,8 +46,10 @@ const showIndicator = computed(
 .filter-button-container {
   position: relative;
 
+  :deep(.bms-button .content) {
+    margin: 0;
+  }
   .filter-button {
-    padding: 0.5em 0;
     font-size: 20px;
   }
   .indicator {