@ouestfrance/sipa-bms-ui 8.22.3 → 8.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.22.3",
+  "version": "8.23.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -61,7 +61,7 @@
     "lodash": "4.17.21",
     "lucide-vue-next": "0.562.0",
     "msw": "^2.12.4",
-    "msw-storybook-addon": "^2.0.3",
+    "msw-storybook-addon": "^2.0.6",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
     "prettier": "3.7.4",

package/src/components/button/BmsToggleIcon.stories.js

@@ -0,0 +1,145 @@
+import { Activity } from 'lucide-vue-next';
+import { ref } from 'vue';
+import BmsToggleIcon from './BmsToggleIcon.vue';
+
+const WITH_DEFAULT_SLOT = {
+  default: '<Activity/>',
+};
+
+export default {
+  title: 'Composants/button/ToggleIcon',
+  component: BmsToggleIcon,
+  tags: ['with_useable_code'],
+  argTypes: {
+    modelValue: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    small: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsToggleIcon,
+    Activity,
+  },
+  setup() {
+    const modelValue = ref(args.modelValue ?? false);
+    const modelValueSmall = ref(args.modelValue ?? false);
+    return { args, modelValue, modelValueSmall };
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 16px;">
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <b>Normal</b>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Default (cliquable)</b>
+            <BmsToggleIcon v-model="modelValue"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Default</b>
+            <BmsToggleIcon :model-value="false" :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Hover</b>
+            <BmsToggleIcon :model-value="false" class="_hover"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Actif</b>
+            <BmsToggleIcon :model-value="true"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Actif</b>
+            <BmsToggleIcon :model-value="true" :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+        </div>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <b>Small</b>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Default (cliquable)</b>
+            <BmsToggleIcon v-model="modelValueSmall" small><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Default</b>
+            <BmsToggleIcon :model-value="false" small :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Hover</b>
+            <BmsToggleIcon :model-value="false" small class="_hover"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Actif</b>
+            <BmsToggleIcon :model-value="true" small><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Actif</b>
+            <BmsToggleIcon :model-value="true" small :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+export const ToggleIcon = Template.bind({});
+ToggleIcon.args = { ...WITH_DEFAULT_SLOT };
+
+export const Default = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon><Activity/></BmsToggleIcon>',
+});
+
+export const DisableDefault = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon :disabled="true"><Activity/></BmsToggleIcon>',
+});
+
+export const Hover = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon class="_hover"><Activity/></BmsToggleIcon>',
+});
+
+export const Actif = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon :model-value="true"><Activity/></BmsToggleIcon>',
+});
+
+export const DisableActif = () => ({
+  components: { BmsToggleIcon, Activity },
+  template:
+    '<BmsToggleIcon :model-value="true" :disabled="true"><Activity/></BmsToggleIcon>',
+});
+
+export const Small = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon small><Activity/></BmsToggleIcon>',
+});
+
+export const SmallActive = () => ({
+  components: { BmsToggleIcon, Activity },
+  template:
+    '<BmsToggleIcon small :model-value="true"><Activity/></BmsToggleIcon>',
+});
+
+export const WithVModel = () => ({
+  components: { BmsToggleIcon, Activity },
+  setup() {
+    const isActive = ref(false);
+    return { isActive };
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
+      <BmsToggleIcon v-model="isActive"><Activity/></BmsToggleIcon>
+      <p>État actif : {{ isActive }}</p>
+      <button @click="isActive = !isActive" style="padding: 8px;">Toggle depuis l'extérieur</button>
+    </div>
+  `,
+});

package/src/components/button/BmsToggleIcon.vue

@@ -0,0 +1,108 @@
+<template>
+  <button
+    class="toggle-icon"
+    :class="{ active: modelValue, disabled, small }"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean;
+  disabled?: boolean;
+  small?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  small: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled) {
+    const newValue = !props.modelValue;
+    emit('update:modelValue', newValue);
+    emit('click', event);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.toggle-icon {
+  --icon-color: var(--bms-grey-100);
+  --underline-color: transparent;
+
+  background: none;
+  border: none;
+  padding: 0;
+  padding-bottom: 0.25em;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  :deep(svg) {
+    color: var(--icon-color);
+    transition: color 0.2s;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0.125em;
+    background-color: var(--underline-color);
+    transition: background-color 0.2s;
+  }
+
+  &:hover:not(.disabled),
+  &._hover:not(.disabled) {
+    --icon-color: var(--bms-grey-140);
+    --underline-color: var(--bms-grey-140);
+  }
+
+  &.active {
+    --icon-color: var(--bms-main-100);
+    --underline-color: var(--bms-main-100);
+  }
+
+  &.active:hover:not(.disabled),
+  &.active._hover:not(.disabled) {
+    --icon-color: var(--bms-main-140);
+    --underline-color: var(--bms-main-140);
+  }
+
+  &.disabled {
+    --icon-color: var(--bms-grey-50);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.disabled.active {
+    --underline-color: var(--bms-grey-50);
+  }
+
+  &.small {
+    :deep(svg) {
+      width: 1em;
+      height: 1em;
+    }
+
+    &::after {
+      height: 1.5px;
+    }
+  }
+}
+</style>

package/src/components/form/BmsInputNumber.stories.js

@@ -70,12 +70,22 @@ WithIcons.args = {
   iconEnd: true,
 };
 
+export const WithLimitAndEmptyValue = Template.bind({});
+WithLimitAndEmptyValue.args = {
+  label: 'My label',
+  modelValue: null,
+  modelValueSmall: undefined,
+  min: 5,
+  max: 8,
+  errors: [],
+};
+
 export const WithLimitExceeded = Template.bind({});
 WithLimitExceeded.args = {
   label: 'My label',
-  modelValue: 10,
+  modelValue: 0,
   modelValueSmall: 2,
-  min: 5,
+  min: 1,
   max: 8,
   errors: [{ label: 'Error 1' }],
 };

package/src/components/form/BmsInputNumber.vue

@@ -70,7 +70,8 @@ const classes = computed(() => {
 
 const checkLimit = () => {
   internalErrors.value = [];
-  if (props.min !== undefined && props.modelValue < props.min) {
+  const hasValue = props.modelValue !== null && props.modelValue !== undefined;
+  if (hasValue && props.min !== undefined && props.modelValue < props.min) {
     internalErrors.value = [
       'Valeur inférieure au minimum autorisé (min : ' + props.min + ')',
     ];

package/src/components/form/BmsInputText.stories.js

@@ -85,6 +85,15 @@ WithLimitEqual.args = {
   maxlength: 16,
 };
 
+export const WithLimitAndEmptyValue = Template.bind({});
+WithLimitAndEmptyValue.args = {
+  label: 'My label',
+  modelValue: null,
+  modelValueSmall: undefined,
+  maxlength: 15,
+  minlength: 1,
+};
+
 export const WithLimitExceeded = Template.bind({});
 WithLimitExceeded.args = {
   label: 'My label',

package/src/components/form/BmsInputText.vue

@@ -88,7 +88,9 @@ const onInput = (e: Event) => {
 const checkLimit = () => {
   internalErrors.value = [];
   internalCaptions.value = [];
+  const hasValue = props.modelValue !== null && props.modelValue !== undefined;
   if (
+    hasValue &&
     props.inputType === InputType.TEXT &&
     typeof props.modelValue === 'string'
   ) {

package/src/components/layout/BmsFloatingWindow.vue

@@ -47,6 +47,7 @@
 import { Maximize2, Minimize2, X } from 'lucide-vue-next';
 import BmsIconButton from '../button/BmsIconButton.vue';
 import { ref, computed, onMounted, watch, type CSSProperties } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
 
 export type Placement =
   | 'top-left'
@@ -128,10 +129,21 @@ function initPosition() {
   }
 }
 
+const resizeCallack = useDebounceFn(() => {
+  expandedStyle.value = computeExpandedStyle();
+}, 100);
+
 onMounted(() => {
   if (open.value) {
     initPosition();
   }
+  if (props.expandTarget) {
+    const targetEl = document.querySelector(props.expandTarget);
+    if (targetEl) {
+      const resizeObserver = new ResizeObserver(resizeCallack);
+      resizeObserver.observe(targetEl);
+    }
+  }
 });
 
 watch(open, (newVal) => {
@@ -350,7 +362,6 @@ function onDragEnd() {
 
 @container floating-window (min-width:900px) {
   .floating-window {
-    max-height: 300px;
     max-width: 80%;
   }
 }

package/src/components/layout/BmsSplitWindow.vue

@@ -255,7 +255,7 @@ function clamp(value: number, minValue: number, maxValue: number) {
 
   &__separator {
     position: relative;
-    z-index: var(--bms-z-index-fixed);
+    z-index: calc(var(--bms-z-index-modal));
 
     &:before {
       content: '';

package/src/components/table/BmsPagination.vue

@@ -4,6 +4,7 @@
       {{ selectLabel }}
       <BmsSelect
         v-model="size"
+        :small="small"
         :options="
           sizes.map((size: number) => ({ label: size.toString(), value: size }))
         "
@@ -70,9 +71,11 @@ interface BmsPaginationProps {
   currentPage: number;
   pages: number;
   selectLabel?: string;
+  small?: boolean;
 }
 const props = withDefaults(defineProps<BmsPaginationProps>(), {
   selectLabel: 'Éléments par page :',
+  small: false,
 });
 
 const emit = defineEmits<{

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

@@ -73,13 +73,13 @@ Default.args = {
   url: 'https://fakeapi.com/items',
 };
 
-export const withFilters = Template.bind({});
-withFilters.parameters = {
+export const WithFilters = Template.bind({});
+WithFilters.parameters = {
   msw: {
     handlers: [mswRequestHandler()],
   },
 };
-withFilters.args = {
+WithFilters.args = {
   headers: [
     {
       label: 'Column 1',
@@ -129,6 +129,62 @@ withFilters.args = {
   defaultFiltersOpened: true,
 };
 
+export const Small = Template.bind({});
+Small.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+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',
+    },
+  ],
+  url: 'https://fakeapi.com/items',
+  defaultFiltersOpened: true,
+};
 export const WithSavedFilters = Template.bind({});
 WithSavedFilters.parameters = {
   msw: {

package/src/components/table/BmsServerTable.vue

@@ -17,6 +17,7 @@ import {
   Sort,
   SortValue,
   TableHeader,
+  TableMode,
 } from '@/models';
 import _debounce from 'lodash/debounce';
 import { computed, type Ref, ref, type Slots, watch, watchEffect } from 'vue';
@@ -31,7 +32,7 @@ interface UiTableProps {
   headers: TableHeader[];
   filters?: Filter[];
   url?: string;
-  mode?: 'normal' | 'dense';
+  mode?: TableMode;
   persistent?: boolean;
   pagination?: number[];
   size?: number;
@@ -54,7 +55,7 @@ interface UiTableProps {
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
-  mode: 'normal',
+  mode: TableMode.NORMAL,
   persistent: true,
   pagination: () => [25, 50, 100],
   size: 25,
@@ -307,6 +308,8 @@ const onClearSelection = () => {
 };
 
 const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
+
+const isTableSmall = computed(() => props.mode === TableMode.SMALL);
 </script>
 
 <template>
@@ -341,6 +344,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           <BmsTableFilters
             v-model="filters"
             :canSaveFilters="canSaveFilters"
+            :small="mode == 'small'"
             @saveFilter="onSaveFilter"
             @resetFilters="resetFilters"
             @filterInput="(filterEvent) => emits('filterInput', filterEvent)"
@@ -371,6 +375,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
     <template #search>
       <UiFilterButton
         v-if="filters.length > 0"
+        :small="isTableSmall"
         :activeFiltersNb="numberOfActiveFilters"
         :isFilterVisible="isFilterVisible"
         @toggleFilters="toggleFilters"
@@ -380,6 +385,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           <BmsSearch
             :modelValue="search"
             class="table-search"
+            :small="isTableSmall"
             @update:modelValue="search = $event"
           />
         </slot>
@@ -407,6 +413,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           :currentPage="props.initialPage === 1 ? currentPage - 1 : currentPage"
           :sizes="paginationsOptions"
           :pages="totalPages"
+          :small="isTableSmall"
           @prev="onPrevClick"
           @next="onNextClick"
           @go="go($event)"

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

@@ -18,7 +18,7 @@ export default {
       options: ['single', 'default'],
     },
     mode: {
-      options: ['normal', 'dense'],
+      options: ['normal', 'dense', 'small'],
     },
     loading: {
       control: { type: 'boolean' },
@@ -136,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: [