@ouestfrance/sipa-bms-ui 8.22.3 → 8.23.0

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 {

package/src/index.ts

@@ -2,6 +2,7 @@ import { App } from 'vue';
 
 import BmsButton from './components/button/BmsButton.vue';
 import BmsIconButton from './components/button/BmsIconButton.vue';
+import BmsToggleIcon from './components/button/BmsToggleIcon.vue';
 
 import BmsAlert from './components/feedback/BmsAlert.vue';
 import BmsBadge from './components/feedback/BmsBadge.vue';
@@ -75,6 +76,7 @@ export const createBmsUi = () => ({
   install: (app: App) => {
     app.component('BmsButton', BmsButton);
     app.component('BmsIconButton', BmsIconButton);
+    app.component('BmsToggleIcon', BmsToggleIcon);
 
     app.component('BmsAlert', BmsAlert);
     app.component('BmsBadge', BmsBadge);
@@ -159,6 +161,7 @@ export * from './services';
 export {
   BmsButton,
   BmsIconButton,
+  BmsToggleIcon,
   BmsAlert,
   BmsBadge,
   BmsCaption,

package/src/models/table.model.ts

@@ -70,3 +70,9 @@ export enum SelectMode {
   DEFAULT = 'default',
   SINGLE = 'single',
 }
+
+export enum TableMode {
+  NORMAL = 'normal',
+  DENSE = 'dense',
+  SMALL = 'small',
+}

package/src/showroom/pages/floating-window.vue

@@ -0,0 +1,36 @@
+<template>
+  <BmsSplitWindow>
+    <template #first>
+      <div class="first">
+        first
+        <BmsFloatingWindow
+          title="coucou"
+          :model-value="true"
+          expandable
+          :expand-target="'.second'"
+          height="500px"
+        >
+          cc
+        </BmsFloatingWindow>
+      </div>
+    </template>
+    <template #second> <div class="second">second</div> </template>
+  </BmsSplitWindow>
+</template>
+
+<script setup lang="ts">
+import BmsFloatingWindow from '@/components/layout/BmsFloatingWindow.vue';
+import BmsSplitWindow from '@/components/layout/BmsSplitWindow.vue';
+</script>
+
+<style scoped lang="scss">
+.first {
+  background-color: red;
+  height: 200px;
+  width: 100%;
+}
+.second {
+  background-color: blue;
+  width: 100%;
+}
+</style>