@ouestfrance/sipa-bms-ui 8.21.0 → 8.22.0

package/src/components/layout/BmsFloatingWindow.vue

@@ -1,11 +1,35 @@
 <template>
-  <div class="floating-window-wrapper">
-    <div class="floating-window" v-show="open">
-      <div class="floating-window__header">
-        <h2>{{ title }}</h2>
+  <div ref="wrapperRef" class="floating-window-wrapper">
+    <div
+      v-if="isDragging"
+      class="floating-window__drag-overlay"
+      @mousemove="onDrag"
+      @mouseup="onDragEnd"
+    />
+    <div
+      ref="windowRef"
+      class="floating-window"
+      :class="{
+        'floating-window--expanded': isExpanded,
+        'floating-window--dragging': isDragging,
+      }"
+      v-show="open"
+      :style="windowStyle"
+    >
+      <div class="floating-window__header" @mousedown="onDragStart">
+        <h3 class="floating-window__header__title">{{ title }}</h3>
         <div class="floating-window__header__buttons">
-          <BmsIconButton :tooltip-text="'Maximiser la fenêtre'" disabled>
-            <Maximize2 />
+          <BmsIconButton
+            v-if="expandable"
+            class="floating-window__expand-btn"
+            :class="{ 'floating-window__expand-btn--expanded': isExpanded }"
+            :tooltip-text="
+              isExpanded ? 'Réduire la fenêtre' : 'Maximiser la fenêtre'
+            "
+            @click.prevent.stop="toggleExpand"
+          >
+            <Minimize2 v-if="isExpanded" />
+            <Maximize2 v-else />
           </BmsIconButton>
           <BmsIconButton @click.prevent.stop="open = false">
             <X />
@@ -20,14 +44,223 @@
 </template>
 
 <script setup lang="ts">
-import { Maximize2, X } from 'lucide-vue-next';
+import { Maximize2, Minimize2, X } from 'lucide-vue-next';
 import BmsIconButton from '../button/BmsIconButton.vue';
+import { ref, computed, onMounted, watch, type CSSProperties } from 'vue';
 
-defineProps<{ title: string }>();
+export type Placement =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'center';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    defaultPlacement?: Placement;
+    expandable?: boolean;
+    expandedWidth?: string;
+    expandedHeight?: string;
+    expandTarget?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    defaultPlacement: 'center',
+    expandable: false,
+    expandedWidth: '100%',
+    expandedHeight: '100%',
+    expandTarget: undefined,
+    width: '50%',
+    height: '40%',
+  },
+);
 
 const open = defineModel<boolean>({
   default: false,
 });
+
+const wrapperRef = ref<HTMLElement | null>(null);
+const windowRef = ref<HTMLElement | null>(null);
+const position = ref<{ x: number; y: number } | null>(null);
+const computedSize = ref<{ width: number; height: number } | null>(null);
+const isDragging = ref(false);
+const dragOffset = ref({ x: 0, y: 0 });
+const isExpanded = ref(false);
+const positionBeforeExpand = ref<{ x: number; y: number } | null>(null);
+const expandedStyle = ref<CSSProperties | null>(null);
+
+function computeInitialPosition(): { x: number; y: number } | null {
+  if (!wrapperRef.value || !windowRef.value) return null;
+
+  const wrapperRect = wrapperRef.value.getBoundingClientRect();
+  const windowRect = windowRef.value.getBoundingClientRect();
+  const padding = 16;
+
+  switch (props.defaultPlacement) {
+    case 'top-left':
+      return { x: wrapperRect.left + padding, y: wrapperRect.top + padding };
+    case 'top-right':
+      return {
+        x: wrapperRect.right - windowRect.width - padding,
+        y: wrapperRect.top + padding,
+      };
+    case 'bottom-left':
+      return {
+        x: wrapperRect.left + padding,
+        y: wrapperRect.bottom - windowRect.height - padding,
+      };
+    case 'bottom-right':
+      return {
+        x: wrapperRect.right - windowRect.width - padding,
+        y: wrapperRect.bottom - windowRect.height - padding,
+      };
+    case 'center':
+    default:
+      return null;
+  }
+}
+
+function initPosition() {
+  if (props.defaultPlacement !== 'center' && !position.value) {
+    position.value = computeInitialPosition();
+  }
+}
+
+onMounted(() => {
+  if (open.value) {
+    initPosition();
+  }
+});
+
+watch(open, (newVal) => {
+  if (newVal) {
+    requestAnimationFrame(initPosition);
+  }
+});
+
+const windowStyle = computed<CSSProperties>(() => {
+  if (isExpanded.value && expandedStyle.value) {
+    return expandedStyle.value;
+  }
+
+  const sizeStyle: CSSProperties = {};
+  if (computedSize.value) {
+    sizeStyle.width = `${computedSize.value.width}px`;
+    sizeStyle.height = `${computedSize.value.height}px`;
+  } else {
+    if (props.width) {
+      sizeStyle.width = props.width;
+    }
+    if (props.height) {
+      sizeStyle.height = props.height;
+    }
+  }
+
+  if (!position.value) {
+    return sizeStyle;
+  }
+
+  return {
+    position: 'absolute',
+    left: `${position.value.x}px`,
+    top: `${position.value.y}px`,
+    ...sizeStyle,
+  };
+});
+
+function computeExpandedStyle(): CSSProperties {
+  if (props.expandTarget) {
+    const targetEl = document.querySelector(props.expandTarget);
+    if (targetEl) {
+      const targetRect = targetEl.getBoundingClientRect();
+      return {
+        position: 'fixed',
+        left: `${targetRect.left}px`,
+        top: `${targetRect.top}px`,
+        width:
+          props.expandedWidth === '100%'
+            ? `${targetRect.width}px`
+            : props.expandedWidth,
+        height:
+          props.expandedHeight === '100%'
+            ? `${targetRect.height}px`
+            : props.expandedHeight,
+        maxWidth: 'none',
+        maxHeight: 'none',
+      };
+    }
+  }
+
+  return {
+    position: 'absolute',
+    width: props.expandedWidth,
+    height: props.expandedHeight,
+    maxWidth: 'none',
+    maxHeight: 'none',
+  };
+}
+
+function toggleExpand() {
+  if (isExpanded.value) {
+    expandedStyle.value = null;
+    position.value = positionBeforeExpand.value;
+    isExpanded.value = false;
+  } else {
+    positionBeforeExpand.value = position.value;
+    expandedStyle.value = computeExpandedStyle();
+    isExpanded.value = true;
+  }
+}
+
+function onDragStart(event: MouseEvent) {
+  if (
+    (event.target as HTMLElement).closest('.floating-window__header__buttons')
+  ) {
+    return;
+  }
+
+  if (isExpanded.value) {
+    return;
+  }
+
+  isDragging.value = true;
+
+  if (windowRef.value) {
+    const rect = windowRef.value.getBoundingClientRect();
+    dragOffset.value = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    };
+
+    if (!computedSize.value) {
+      computedSize.value = { width: rect.width, height: rect.height };
+    }
+
+    if (!position.value) {
+      position.value = { x: rect.left, y: rect.top };
+    }
+  }
+
+  document.addEventListener('mousemove', onDrag);
+  document.addEventListener('mouseup', onDragEnd);
+}
+
+function onDrag(event: MouseEvent) {
+  if (!isDragging.value) return;
+
+  position.value = {
+    x: event.clientX - dragOffset.value.x,
+    y: event.clientY - dragOffset.value.y,
+  };
+}
+
+function onDragEnd() {
+  isDragging.value = false;
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', onDragEnd);
+}
 </script>
 
 <style scoped lang="scss">
@@ -45,25 +278,65 @@ const open = defineModel<boolean>({
   align-items: center;
   pointer-events: none;
 
+  .floating-window__drag-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: var(--bms-z-index-modal);
+    pointer-events: all;
+    cursor: grabbing;
+  }
+
   .floating-window {
     background-color: var(--bms-white);
-    height: 100%;
-    width: 100%;
     border-radius: var(--bms-border-radius-large);
     border: 1px solid var(--bms-grey-10);
     pointer-events: all;
     display: grid;
     grid-template-rows: auto 1fr;
-    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.25);
     z-index: var(--bms-z-index-modal);
+    transition:
+      left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &--expanded {
+      border-radius: 0;
+      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+
+      .floating-window__header {
+        cursor: default;
+
+        &:active {
+          cursor: default;
+        }
+      }
+    }
+
+    &--dragging {
+      transition: none;
+    }
 
     &__header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--bms-grey-10);
-      padding: 1em;
-      h2 {
+      padding: 0.5em;
+      cursor: grab;
+      user-select: none;
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      &__title {
         margin: 0;
       }
     }

package/src/index.ts

@@ -7,6 +7,7 @@ import BmsAlert from './components/feedback/BmsAlert.vue';
 import BmsBadge from './components/feedback/BmsBadge.vue';
 import BmsCaption from './components/feedback/BmsCaption.vue';
 import BmsCircularProgress from './components/feedback/BmsCircularProgress.vue';
+import BmsGhost from '@/components/feedback/BmsGhost.vue';
 import BmsLoader from './components/feedback/BmsLoader.vue';
 import BmsTooltip from './components/feedback/BmsTooltip.vue';
 
@@ -79,6 +80,7 @@ export const createBmsUi = () => ({
     app.component('BmsBadge', BmsBadge);
     app.component('BmsCaption', BmsCaption);
     app.component('BmsCircularProgress', BmsCircularProgress);
+    app.component('BmsGhost', BmsGhost);
     app.component('BmsLoader', BmsLoader);
     app.component('BmsTooltip', BmsTooltip);
 
@@ -161,6 +163,7 @@ export {
   BmsBadge,
   BmsCaption,
   BmsCircularProgress,
+  BmsGhost,
   BmsLoader,
   BmsTooltip,
   BmsAutocomplete,