@ouestfrance/sipa-bms-ui 8.15.1 → 8.16.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/index.ts

@@ -37,12 +37,14 @@ import BmsTextArea from './components/form/BmsTextArea.vue';
 
 import BmsContentPageLayout from './components/layout/BmsContentPageLayout.vue';
 import BmsCard from './components/layout/BmsCard.vue';
+import BmsFloatingWindow from './components/layout/BmsFloatingWindow.vue';
 import BmsForm from './components/layout/BmsForm.vue';
 import BmsHeader from './components/layout/BmsHeader.vue';
 import BmsHeaderTitle from './components/layout/BmsHeaderTitle.vue';
 import BmsModal from './components/layout/BmsModal.vue';
 import BmsOverlay from './components/layout/BmsOverlay.vue';
 import BmsSection from './components/layout/BmsSection.vue';
+import BmsSplitWindow from './components/layout/BmsSplitWindow.vue';
 import BmsStep from './components/layout/BmsStep.vue';
 import BmsStepper from './components/layout/BmsStepper.vue';
 
@@ -108,12 +110,14 @@ export const createBmsUi = () => ({
 
     app.component('BmsContentPageLayout', BmsContentPageLayout);
     app.component('BmsCard', BmsCard);
+    app.component('BmsFloatingWindow', BmsFloatingWindow);
     app.component('BmsForm', BmsForm);
     app.component('BmsHeader', BmsHeader);
     app.component('BmsHeaderTitle', BmsHeaderTitle);
     app.component('BmsModal', BmsModal);
     app.component('BmsOverlay', BmsOverlay);
     app.component('BmsSection', BmsSection);
+    app.component('BmsSplitWindow', BmsSplitWindow);
     app.component('BmsStep', BmsStep);
     app.component('BmsStepper', BmsStepper);
 
@@ -185,12 +189,14 @@ export {
   BmsTextArea,
   BmsContentPageLayout,
   BmsCard,
+  BmsFloatingWindow,
   BmsForm,
   BmsHeader,
   BmsHeaderTitle,
   BmsModal,
   BmsOverlay,
   BmsSection,
+  BmsSplitWindow,
   BmsStep,
   BmsStepper,
   BmsBackButton,

package/src/showroom/pages/autocomplete.vue

@@ -99,10 +99,10 @@ const onAddNewOption = (newOption: string) => {
 };
 
 const autocompleteRequest = (
-  abortController: AbortController,
+  _abortController: AbortController,
   searchString?: string,
 ) =>
   fetch(`http://localhost:3000/pokemon-types?search=${searchString}`).then(
-    (res) => res.json(),
+    (res) => res.json().then((res) => ({ data: res })),
   );
 </script>

package/src/showroom/pages/server-table.vue

@@ -56,9 +56,7 @@ const pokemonTypeAutocompleteRequest = async (
     signal: abortController.signal,
   });
 
-  return {
-    data,
-  };
+  return { data };
 };
 
 const filters: Filter[] = [

package/src/showroom/server.js

@@ -9,17 +9,25 @@ app.use(cors());
 const port = 3000;
 
 app.get('/pokemon-types', (req, res) => {
-  let data = pokemons.map((pokemon) => ({
-    label: pokemon.name,
-    value: pokemon.name,
-  }));
-  if (req.query.search) {
-    data = data.filter((pokemon) =>
-      pokemon.label.toLowerCase().includes(req.query.search.toLowerCase()),
-    );
-  }
-
-  res.send({ data });
+  res.send([
+    { label: 'Grass', value: 'Grass' },
+    { label: 'Poison', value: 'Poison' },
+    { label: 'Fire', value: 'Fire' },
+    { label: 'Flying', value: 'Flying' },
+    { label: 'Water', value: 'Water' },
+    { label: 'Bug', value: 'Bug' },
+    { label: 'Normal', value: 'Normal' },
+    { label: 'Electric', value: 'Electric' },
+    { label: 'Ground', value: 'Ground' },
+    { label: 'Fairy', value: 'Fairy' },
+    { label: 'Fighting', value: 'Fighting' },
+    { label: 'Psychic', value: 'Psychic' },
+    { label: 'Rock', value: 'Rock' },
+    { label: 'Steel', value: 'Steel' },
+    { label: 'Ice', value: 'Ice' },
+    { label: 'Ghost', value: 'Ghost' },
+    { label: 'Dragon', value: 'Dragon' },
+  ]);
 });
 
 app.get('/pokemons', (req, res) => {