@ouestfrance/sipa-bms-ui 8.15.1 → 8.17.0

package/src/components/layout/BmsSplitWindow.vue

@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useTemplateRef,
+  watch,
+} from 'vue';
+
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+
+interface Props {
+  splitOrientation?: 'horizontal' | 'vertical';
+  min?: number;
+  max?: number;
+  primary?: 'first' | 'second';
+  collapsed?: boolean;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  splitOrientation: 'vertical',
+  primary: 'first',
+  min: DEFAULT_MIN,
+  max: DEFAULT_MAX,
+  collapsable: false,
+});
+
+const emit = defineEmits(['update:collapsed']);
+
+const split = defineModel<number>({
+  default: 50,
+});
+
+const container = useTemplateRef('split-window');
+const primaryId = ref<string>(crypto.randomUUID());
+
+//State Machine
+const isDragging = ref<boolean>(false);
+const startSplit = ref<number | null>(null);
+const startPosition = ref<number | null>(null);
+
+const min = computed(() =>
+  clamp(props.min ?? DEFAULT_MIN, DEFAULT_MIN, DEFAULT_MAX),
+);
+const max = computed(() =>
+  clamp(props.max ?? DEFAULT_MAX, DEFAULT_MIN, DEFAULT_MAX),
+);
+
+// Correction: état local pour collapsed
+const collapsedLocal = ref(props.collapsed ?? false);
+
+watch(
+  () => props.collapsed,
+  (val) => {
+    collapsedLocal.value = val ?? false;
+  },
+);
+
+function setCollapsed(val: boolean) {
+  collapsedLocal.value = val;
+  emit('update:collapsed', val);
+}
+
+const clampSplit = computed(() => {
+  if (collapsedLocal.value) {
+    return props.primary === 'first' ? min.value : max.value;
+  } else {
+    return clamp(split.value, min.value, max.value);
+  }
+});
+
+const size = computed(() => {
+  return `${clampSplit.value}fr auto ${100 - clampSplit.value}fr`;
+});
+
+const gridStyle = computed(() => {
+  return props.splitOrientation === 'horizontal'
+    ? {
+        gridTemplateRows: size.value,
+        gridTemplateColumns: 'none',
+      }
+    : {
+        gridTemplateColumns: size.value,
+        gridTemplateRows: 'none',
+      };
+});
+
+const HANDLED_KEYS = [
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Enter',
+  'Home',
+  'End',
+];
+
+onMounted(() => {
+  window.addEventListener('pointermove', onPointerMove);
+  window.addEventListener('pointerup', onPointerUp);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', onPointerMove);
+  window.removeEventListener('pointerup', onPointerUp);
+});
+
+function onPointerDown(evt: PointerEvent) {
+  isDragging.value = true;
+  setCollapsed(false);
+  startSplit.value = clampSplit.value;
+  startPosition.value =
+    props.splitOrientation === 'vertical' ? evt.clientX : evt.clientY;
+}
+
+function onPointerMove(evt: PointerEvent) {
+  if (!isDragging.value) return;
+  _move(evt);
+}
+
+function onPointerUp(evt: PointerEvent) {
+  if (!isDragging.value) return;
+  _move(evt);
+  isDragging.value = false;
+  startPosition.value = null;
+  startSplit.value = null;
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  if (
+    !HANDLED_KEYS.includes(evt.key) ||
+    (props.splitOrientation === 'horizontal' &&
+      (evt.key === 'ArrowLeft' || evt.key === 'ArrowRight')) ||
+    (props.splitOrientation === 'vertical' &&
+      (evt.key === 'ArrowUp' || evt.key === 'ArrowDown'))
+  ) {
+    return;
+  }
+
+  evt.preventDefault();
+  evt.stopPropagation();
+
+  switch (evt.key) {
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      if (collapsedLocal.value === true) {
+        setCollapsed(false);
+      }
+      split.value = Math.max(min.value, clampSplit.value - 1);
+      break;
+    case 'ArrowRight':
+    case 'ArrowDown':
+      if (collapsedLocal.value === true) {
+        setCollapsed(false);
+      }
+      split.value = Math.min(max.value, clampSplit.value + 1);
+      break;
+    case 'Enter':
+      setCollapsed(!collapsedLocal.value);
+      break;
+    case 'Home':
+      if (collapsedLocal.value === true) {
+        setCollapsed(false);
+      }
+      split.value = props.primary === 'first' ? min.value : max.value;
+      break;
+    case 'End':
+      if (collapsedLocal.value === true) {
+        setCollapsed(false);
+      }
+      split.value = props.primary === 'first' ? max.value : min.value;
+      break;
+  }
+}
+
+function _move(evt: PointerEvent) {
+  if (startPosition.value === null || startSplit.value === null) return;
+
+  const currentPosition =
+    props.splitOrientation === 'vertical' ? evt.clientX : evt.clientY;
+
+  const delta = currentPosition - startPosition.value;
+
+  const containerSize =
+    props.splitOrientation === 'vertical'
+      ? container.value?.getBoundingClientRect().width || 1
+      : container.value?.getBoundingClientRect().height || 1;
+
+  const deltaPercent = (delta / containerSize) * 100;
+  split.value = startSplit.value + deltaPercent;
+}
+
+function clamp(value: number, minValue: number, maxValue: number) {
+  return Math.min(Math.max(value, minValue), maxValue);
+}
+</script>
+
+<template>
+  <div
+    ref="split-window"
+    class="split-window"
+    :class="`split-window--${splitOrientation}`"
+    :style="gridStyle"
+  >
+    <div
+      class="split-window__first-pane"
+      :id="primary === 'first' ? primaryId : undefined"
+    >
+      <slot name="first" />
+    </div>
+    <div
+      class="split-window__separator"
+      role="separator"
+      tabindex="0"
+      :aria-label="props.ariaLabel || 'Séparateur de volet'"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-valuenow="clampSplit"
+      :aria-orientation="splitOrientation"
+      :aria-controls="primaryId"
+      @pointerdown.prevent.stop="onPointerDown"
+      @keydown="onKeyDown"
+    />
+    <div
+      class="split-window__second-pane"
+      :id="primary === 'second' ? primaryId : undefined"
+    >
+      <slot name="second" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.split-window {
+  display: grid;
+  width: 100%;
+  height: 100%;
+
+  &__separator {
+    position: relative;
+    z-index: 2;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &:focus-within {
+      &:before {
+        outline: 2px solid black;
+      }
+    }
+  }
+
+  &--vertical {
+    .split-window__separator {
+      height: 100%;
+      width: 0;
+
+      &:before {
+        content: '';
+        width: 8px;
+        height: 100%;
+        transform: translate(-50%, 0);
+        cursor: col-resize;
+      }
+    }
+  }
+
+  &--horizontal {
+    .split-window__separator {
+      height: 0;
+      width: 100%;
+
+      &:before {
+        content: '';
+        width: 100%;
+        height: 8px;
+        transform: translate(0, -50%);
+        cursor: row-resize;
+      }
+    }
+  }
+}
+</style>

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

@@ -10,6 +10,12 @@ export default {
     disableSearch: {
       control: { type: 'boolean' },
     },
+    selectMode: {
+      options: ['single', 'default'],
+    },
+    mode: {
+      options: ['normal', 'dense'],
+    },
     loading: {
       control: { type: 'boolean' },
     },
@@ -751,6 +757,47 @@ Selected.args = {
   selectable: true,
 };
 
+export const SingleSelected = Template.bind({});
+SingleSelected.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+  selectMode: 'single',
+};
 const TemplateWithSelectAction = (args) => ({
   components: {
     BmsTable,

package/src/components/table/BmsTable.vue

@@ -6,7 +6,14 @@ import UiFilterButton from '@/components/table/UiFilterButton.vue';
 import { usePagination } from '@/composables/pagination.composable';
 import { useSearch } from '@/composables/search.composable';
 import { useSort } from '@/composables/sort.composable';
-import { Filter, SavedFilter, Sort, SortValue, TableHeader } from '@/models';
+import {
+  Filter,
+  SavedFilter,
+  SelectMode,
+  Sort,
+  SortValue,
+  TableHeader,
+} from '@/models';
 import { computed, Ref, ref, watch, watchEffect } from 'vue';
 import BmsTableFilters from './BmsTableFilters.vue';
 import BmsSearch from '../form/BmsSearch.vue';
@@ -34,6 +41,7 @@ interface UiTableProps {
   defaultSort?: Sort;
   selectable?: boolean;
   selectableDisabled?: boolean;
+  selectMode?: SelectMode.DEFAULT | SelectMode.SINGLE;
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
@@ -51,6 +59,7 @@ const props = withDefaults(defineProps<UiTableProps>(), {
   }),
   selectable: false,
   selectableDisabled: false,
+  selectMode: SelectMode.DEFAULT,
 });
 
 const {
@@ -212,9 +221,18 @@ const onClickHeader = (header: TableHeader) => {
   changeSort(header);
 };
 
+const elementsAndChildElements = computed(() => {
+  const childElements = items.value
+    .map((item) => item.childElement)
+    .filter((childElement) => !!childElement);
+  return [...items.value, ...childElements];
+});
+
 const onSelectAll = () => {
-  selectedItems.value = items.value;
+  selectedItems.value = elementsAndChildElements.value;
 };
+
+const totalSize = computed(() => elementsAndChildElements.value.length);
 </script>
 
 <template>
@@ -228,7 +246,8 @@ const onSelectAll = () => {
     :sort="sort"
     :selectable="selectable"
     :selectableDisabled="selectableDisabled"
-    :totalSize="items.length"
+    :totalSize="totalSize"
+    :selectMode="selectMode"
     @clickHeader="onClickHeader"
     @selectAll="onSelectAll"
   >

package/src/components/table/UiBmsTable.spec.ts

@@ -2,9 +2,8 @@ import UiBmsTable from '@/components/table/UiBmsTable.vue';
 import { field } from '@/plugins/field';
 import { mount, MountingOptions } from '@vue/test-utils';
 import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
-import BmsAlert from '../feedback/BmsAlert.vue';
-import { wrap } from 'lodash';
 import { SelectMode } from '@/models';
+import BmsInputRadio from '../form/BmsInputRadio.vue';
 
 const intersectionObserverMock = () => ({
   observe: () => null,
@@ -40,13 +39,21 @@ const factory = (options: MountingOptions<any, {}> = {}) => {
   } as any);
   return {
     wrapper,
+    selectedMessage: () => wrapper.findAll('.bms-table__selected')[0],
+
+    getAllCheckboxes: () => wrapper.findAllComponents(UiBmsInputCheckbox),
     getAllCheckedCheckboxes: () =>
       wrapper
         .findAllComponents(UiBmsInputCheckbox)
         .filter((checkbox) => checkbox.props('modelValue') === true),
     getTableCheckbox: () => wrapper.findAllComponents(UiBmsInputCheckbox)[0],
     getFirstRowCheckbox: () => wrapper.findAllComponents(UiBmsInputCheckbox)[1],
-    selectedMessage: () => wrapper.findAll('.bms-table__selected')[0],
+
+    getAllCheckedRadio: () =>
+      wrapper
+        .findAllComponents(BmsInputRadio)
+        .filter((checkbox) => checkbox.props('modelValue') === true),
+    getAllRadio: () => wrapper.findAllComponents(BmsInputRadio),
   };
 };
 describe('UiBmsTable', () => {
@@ -369,5 +376,42 @@ describe('UiBmsTable', () => {
         'Vous avez sélectionné la totalité des 2 éléments.',
       );
     });
+    it('should display readio if in selectMode SINGLE', async () => {
+      const { getAllRadio, getAllCheckboxes } = factory({
+        props: {
+          headers,
+          items,
+          totalSize: 2,
+          selectable: true,
+          selectMode: SelectMode.SINGLE,
+          selectedItems: [items[0]],
+        },
+      });
+
+      expect(getAllRadio().length).toEqual(2);
+      expect(getAllCheckboxes().length).toEqual(0);
+    });
+    it('should unselect previous selection if in selectMode SINGLE', async () => {
+      const { getAllRadio } = factory({
+        props: {
+          headers,
+          items,
+          totalSize: 2,
+          selectable: true,
+          selectMode: SelectMode.SINGLE,
+          selectedItems: [items[0]],
+        },
+      });
+      const firstRadio = getAllRadio()[0];
+      const secondRadio = getAllRadio()[1];
+
+      expect(firstRadio.props('modelValue')).toBeTruthy();
+      expect(secondRadio.props('modelValue')).toBeFalsy();
+
+      await secondRadio.get('input').setValue(items[1]);
+
+      expect(secondRadio.props('modelValue')).toBeTruthy();
+      expect(firstRadio.props('modelValue')).toBeFalsy();
+    });
   });
 });

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

@@ -559,6 +559,49 @@ SelectedWithMaxSelected.args = {
   maxSelectedSize: 1,
 };
 
+export const SingleSelect = Template.bind({});
+SingleSelect.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+  selectMode: 'single',
+  totalSize: 2,
+};
+
 export const AllSelected = Template.bind({});
 AllSelected.args = {
   headers: [