@ouestfrance/sipa-bms-ui 8.18.0 → 8.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.18.0",
+  "version": "8.19.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/layout/BmsSplitWindow.vue

@@ -55,6 +55,7 @@ const collapsedLocal = ref(props.collapsed ?? false);
 watch(
   () => props.collapsed,
   (val) => {
+    console.log('watch:collapsed', val);
     collapsedLocal.value = val ?? false;
   },
 );
@@ -110,7 +111,9 @@ onBeforeUnmount(() => {
 
 function onPointerDown(evt: PointerEvent) {
   isDragging.value = true;
-  setCollapsed(false);
+  if (collapsedLocal.value) {
+    setCollapsed(false);
+  }
   startSplit.value = clampSplit.value;
   startPosition.value =
     props.splitOrientation === 'vertical' ? evt.clientX : evt.clientY;
@@ -146,14 +149,14 @@ function onKeyDown(evt: KeyboardEvent) {
   switch (evt.key) {
     case 'ArrowLeft':
     case 'ArrowUp':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = Math.max(min.value, clampSplit.value - 1);
       break;
     case 'ArrowRight':
     case 'ArrowDown':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = Math.min(max.value, clampSplit.value + 1);
@@ -162,13 +165,13 @@ function onKeyDown(evt: KeyboardEvent) {
       setCollapsed(!collapsedLocal.value);
       break;
     case 'Home':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = props.primary === 'first' ? min.value : max.value;
       break;
     case 'End':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = props.primary === 'first' ? max.value : min.value;
@@ -202,17 +205,20 @@ function clamp(value: number, minValue: number, maxValue: number) {
   <div
     ref="split-window"
     class="split-window"
-    :class="`split-window--${splitOrientation}`"
+    :class="[
+      `split-window--${splitOrientation}`,
+      { 'split-window--dragging': isDragging },
+    ]"
     :style="gridStyle"
   >
     <div
-      class="split-window__first-pane"
+      class="split-window__pane split-window__first-pane"
       :id="primary === 'first' ? primaryId : undefined"
     >
       <slot name="first" />
     </div>
     <div
-      class="split-window__separator"
+      class="split-window__separator toto"
       role="separator"
       tabindex="0"
       :aria-label="props.ariaLabel || 'Séparateur de volet'"
@@ -225,7 +231,7 @@ function clamp(value: number, minValue: number, maxValue: number) {
       @keydown="onKeyDown"
     />
     <div
-      class="split-window__second-pane"
+      class="split-window__pane split-window__second-pane"
       :id="primary === 'second' ? primaryId : undefined"
     >
       <slot name="second" />
@@ -238,10 +244,17 @@ function clamp(value: number, minValue: number, maxValue: number) {
   display: grid;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+
+  &__pane {
+    display: flex;
+    max-height: 100%;
+    overflow: hidden;
+  }
 
   &__separator {
     position: relative;
-    z-index: 2;
+    z-index: var(--bms-z-index-fixed);
 
     &:before {
       content: '';
@@ -286,5 +299,18 @@ function clamp(value: number, minValue: number, maxValue: number) {
       }
     }
   }
+
+  &--dragging {
+    .split-window__separator {
+      &:before {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform: unset;
+      }
+    }
+  }
 }
 </style>