@ouestfrance/sipa-bms-ui 8.21.0 → 8.22.1

package/package.json

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

package/src/components/feedback/BmsGhost.stories.js

@@ -0,0 +1,60 @@
+import BmsGhost from './BmsGhost.vue';
+
+export default {
+  title: 'Composants/feedback/Ghost',
+  component: BmsGhost,
+};
+
+const Template = (args) => ({
+  components: {
+    BmsGhost,
+  },
+  data() {
+    return { args };
+  },
+  template: `
+    <div 
+      :style="{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        padding: '1em',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        userSelect: 'none',
+        cursor: 'pointer'
+      }"
+      @pointerdown="args.modelValue = !args.modelValue"
+    >
+      <p>Cliquez pour faire apparaître/Disparaître le fantôme</p>
+    </div>
+    <BmsGhost
+      v-model="args.modelValue"
+      :opacity-when-visible="args.opacityWhenVisible"
+    >
+      <div
+        :style="{
+          background: 'darkslategray',
+          color: 'white',
+          padding: '1em',
+          borderRadius: '8px',
+        }"
+      >
+        <h3 :style="{
+          margin: 0,
+          color: 'white',
+        }">Bonjour !</h3>
+        <p style="margin: 0">Je suis un fantôme</p>
+      </div>
+    </BmsGhost>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: false,
+  opacityWhenVisible: 0.6,
+};

package/src/components/feedback/BmsGhost.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+interface Props {
+  opacityWhenVisible?: number;
+}
+
+const SCREEN_MARGIN = 10;
+
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+
+const visible = defineModel<boolean>({
+  default: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  opacityWhenVisible: 0.8,
+});
+
+const ghost = ref<HTMLElement | null>(null);
+const x = ref<number>(0);
+const y = ref<number>(0);
+
+onBeforeMount(() => {
+  document.addEventListener('pointermove', onPointerMove);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointermove', onPointerMove);
+});
+
+const onPointerMove = (e: PointerEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  updateGhost(e.clientX, e.clientY);
+};
+
+const updateGhost = (posX: number, posY: number) => {
+  if (!ghost.value) return;
+
+  const rect = ghost.value.getBoundingClientRect();
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+
+  //Update position
+  x.value = Math.max(
+    Math.min(posX, screenWidth - rect.width - SCREEN_MARGIN),
+    SCREEN_MARGIN,
+  );
+  y.value = Math.max(
+    Math.min(posY, screenHeight - rect.height - SCREEN_MARGIN),
+    SCREEN_MARGIN,
+  );
+};
+</script>
+
+<template>
+  <div
+    ref="ghost"
+    aria-hidden="true"
+    class="bms-ghost"
+    :style="{
+      '--ghost-x': `${x}px`,
+      '--ghost-y': `${y}px`,
+      opacity: visible ? props.opacityWhenVisible : 0,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bms-ghost {
+  position: fixed;
+  top: var(--ghost-y, 0);
+  left: var(--ghost-x, 0);
+  z-index: 1000;
+
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.2s ease-in-out;
+}
+</style>

package/src/components/feedback/BmsTooltip.vue

@@ -5,6 +5,7 @@
       :visible="showToolTip && activated"
       :direction="direction"
       :getAnchorElementValues="getAnchorElementValues"
+      :class="classes"
     >
       <slot name="tooltipText">
         {{ tooltipText }}
@@ -26,9 +27,12 @@ import {
   MaybeElementRef,
   useElementVisibility,
 } from '@vueuse/core';
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import UiTooltip from './UiTooltip.vue';
 
+import { useAttrs } from 'vue';
+const attrs = useAttrs();
+
 const tooltip = ref(null);
 const tooltipAnchor = ref<Element>();
 const showToolTip = ref(true);
@@ -51,6 +55,16 @@ withDefaults(
   },
 );
 
+const classes = computed(() => {
+  const parentClasses = attrs.class as string | undefined;
+  return (
+    parentClasses
+      ?.split(' ')
+      .map((cls) => `${cls}__bms-tooltip`)
+      .join(' ') ?? ''
+  );
+});
+
 const isUnderOverlay = (): boolean => {
   const overlays = Array.from(document.getElementsByClassName('overlay'));
   if (overlays.length === 0) {

package/src/components/feedback/UiTooltip.vue

@@ -25,6 +25,9 @@ const calculatedTooltipTransform: Ref<string> = ref<string>('none');
 const windowSize = useWindowSize();
 const { getTooltipTranslatePosition } = useTooltipHelper();
 
+import { useAttrs } from 'vue';
+const attrs = useAttrs();
+
 const props = withDefaults(
   defineProps<{
     visible?: boolean;
@@ -61,7 +64,8 @@ const anchorElement = ref<
 >(undefined);
 
 const classes = computed(
-  () => `bms-tooltip__text bms-tooltip__text--${props.direction}`,
+  () =>
+    `bms-tooltip__text bms-tooltip__text--${props.direction} ${attrs.class ? attrs.class : ''}`,
 );
 
 const setTooltipPosition = async () => {
@@ -136,6 +140,10 @@ const style = computed(() => {
   transform: var(--bms-tooltip-transform);
   overflow-wrap: break-word;
 
+  &.floating-window__expand-btn__bms-tooltip {
+    z-index: calc(var(--bms-z-index-modal) + 1);
+  }
+
   &::before {
     content: '';
     position: absolute;

package/src/components/layout/BmsFloatingWindow.stories.js

@@ -14,7 +14,7 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-    <div style="width: ${args.width}; height: ${args.height}; background: purple; position:relative">
+    <div style="width: ${args.containerWidth || '1200px'}; height: ${args.containerHeight || '100vh'}; background: purple; position:relative">
       <BmsFloatingWindow v-bind="args">
         ${args?.content}
       </BmsFloatingWindow>
@@ -24,32 +24,31 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  width: '200px',
-  height: '200px',
   title: 'My title',
   modelValue: true,
 };
 
 export const Large = Template.bind({});
 Large.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
   width: '1200px',
-  height: '100vh',
   title: 'My title',
   modelValue: true,
 };
 
 export const Closed = Template.bind({});
 Closed.args = {
-  width: '1200px',
-  height: '100vh',
+  containerWidth: '1200px',
+  containerHeight: '100vh',
   title: 'My title',
   modelValue: false,
 };
 
 export const Overflow = Template.bind({});
 Overflow.args = {
-  width: '1200px',
-  height: '100vh',
+  containerWidth: '1200px',
+  containerHeight: '100vh',
   title: 'Cyrano de Bergerac',
   modelValue: true,
   content: `Ah ! non ! c’est un peu court, jeune homme !
@@ -99,11 +98,226 @@ Si vous aviez un peu de lettres et d’esprit
 Mais d’esprit, ô le plus lamentable des êtres,
 Vous n’en eûtes jamais un atome, et de lettres
 Vous n’avez que les trois qui forment le mot : sot !
-Eussiez-vous eu, d’ailleurs, l’invention qu’il faut
+Eussiez-vous eu, d'ailleurs, l'invention qu'il faut
 Pour pouvoir là, devant ces nobles galeries,
 me servir toutes ces folles plaisanteries,
-Que vous n’en eussiez pas articulé le quart
-De la moitié du commencement d’une, car
+Que vous n'en eussiez pas articulé le quart
+De la moitié du commencement d'une, car
 Je me les sers moi-même, avec assez de verve,
-Mais je ne permets pas qu’un autre me les serve.`,
+Mais je ne permets pas qu'un autre me les serve.`,
+};
+
+const IframeTemplate = (args) => ({
+  components: {
+    BmsFloatingWindow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="width: 100%; height: 100vh; position: relative;">
+      <iframe
+        src="https://example.com"
+        style="width: 100%; height: 100%; border: none;"
+      ></iframe>
+      <BmsFloatingWindow v-bind="args">
+        <p style="padding: 1em;">Essayez de déplacer cette fenêtre au-dessus de l'iframe.</p>
+        <p style="padding: 1em;">Le drag and drop fonctionne grâce à l'overlay qui intercepte les événements.</p>
+      </BmsFloatingWindow>
+    </div>
+  `,
+});
+
+export const WithIframe = IframeTemplate.bind({});
+WithIframe.args = {
+  title: 'Drag me over the iframe',
+  modelValue: true,
+};
+WithIframe.parameters = {
+  docs: {
+    description: {
+      story:
+        "Démontre le drag and drop fonctionnant au-dessus d'une iframe. L'overlay transparent capture les événements souris même quand la souris passe au-dessus de l'iframe.",
+    },
+  },
+};
+
+export const PlacementTopLeft = Template.bind({});
+PlacementTopLeft.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
+  title: 'Top Left Placement',
+  modelValue: true,
+  defaultPlacement: 'top-left',
+};
+PlacementTopLeft.parameters = {
+  docs: {
+    description: {
+      story: 'Fenêtre positionnée par défaut en haut à gauche.',
+    },
+  },
+};
+
+export const PlacementTopRight = Template.bind({});
+PlacementTopRight.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
+  title: 'Top Right Placement',
+  modelValue: true,
+  defaultPlacement: 'top-right',
+};
+
+export const PlacementBottomLeft = Template.bind({});
+PlacementBottomLeft.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
+  title: 'Bottom Left Placement',
+  modelValue: true,
+  defaultPlacement: 'bottom-left',
+};
+
+export const PlacementBottomRight = Template.bind({});
+PlacementBottomRight.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
+  title: 'Bottom Right Placement',
+  modelValue: true,
+  defaultPlacement: 'bottom-right',
+};
+
+export const Expandable = Template.bind({});
+Expandable.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
+  title: 'Fenêtre expandable',
+  modelValue: true,
+  expandable: true,
+  content:
+    '<p style="padding: 1em;">Cliquez sur l\'icône maximize pour agrandir la fenêtre au parent.</p>',
+};
+Expandable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Fenêtre avec bouton expand activé. Cliquez sur l'icône pour agrandir/réduire.",
+    },
+  },
+};
+
+export const ExpandableCustomSize = Template.bind({});
+ExpandableCustomSize.args = {
+  containerWidth: '1200px',
+  containerHeight: '100vh',
+  title: 'Expand avec dimensions custom',
+  modelValue: true,
+  expandable: true,
+  expandedWidth: '80%',
+  expandedHeight: '80%',
+  content:
+    '<p style="padding: 1em;">Expand avec dimensions personnalisées (80% x 80%).</p>',
+};
+ExpandableCustomSize.parameters = {
+  docs: {
+    description: {
+      story:
+        'Fenêtre expandable avec dimensions personnalisées (expandedWidth et expandedHeight).',
+    },
+  },
+};
+
+const NestedContainersTemplate = (args) => ({
+  components: {
+    BmsFloatingWindow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div id="outer-container"
+         style="width: 100%; height: 100vh; background-color: #667eea; padding: 2em; box-sizing: border-box;">
+      <p style="color: white; margin: 0 0 1em;">Container externe - id="outer-container"</p>
+      <div id="inner-container"
+           style="width: 80%; height: 80%; background-color: #f093fb; padding: 2em; box-sizing: border-box; position: relative;">
+        <p style="color: white; margin: 0 0 1em;">Container interne - id="inner-container"</p>
+        <BmsFloatingWindow v-bind="args">
+          <p style="padding: 1em;">Cliquez sur expand pour voir la fenêtre s'agrandir sur le container
+            <strong>interne</strong>.</p>
+          <p style="padding: 0 1em;">La prop <code>expandTarget="#inner-container"</code> définit la cible.</p>
+        </BmsFloatingWindow>
+      </div>
+    </div>
+  `,
+});
+
+export const ExpandToInnerTarget = NestedContainersTemplate.bind({});
+ExpandToInnerTarget.args = {
+  title: 'Expand vers inner container',
+  modelValue: true,
+  expandable: true,
+  expandTarget: '#inner-container',
+  defaultPlacement: 'top-left',
+};
+ExpandToInnerTarget.parameters = {
+  docs: {
+    description: {
+      story:
+        "Démontre expandTarget : la fenêtre s'agrandit sur le container interne (rose) plutôt que sur son parent direct.",
+    },
+  },
+};
+
+export const ExpandToOuterTarget = NestedContainersTemplate.bind({});
+ExpandToOuterTarget.args = {
+  title: 'Expand vers outer container',
+  modelValue: true,
+  expandable: true,
+  expandTarget: '#outer-container',
+  defaultPlacement: 'top-left',
+};
+ExpandToOuterTarget.parameters = {
+  docs: {
+    description: {
+      story:
+        "Démontre expandTarget : la fenêtre s'agrandit sur le container externe (violet).",
+    },
+  },
+};
+
+const ForeignContainersTemplate = (args) => ({
+  components: {
+    BmsFloatingWindow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div id="foreign-container" style="width: 80%; height: 80%; background-color: green; padding: 2em; box-sizing: border-box;">
+      <p style="color: white; margin: 0 0 1em;">Container interne - id="foreign-container"</p>
+    </div>
+      <p style="color: white; margin: 0 0 1em;">Container externe - id="outer-container"</p>
+      <div id="inner-container" style="width: 80%; height: 80%; background-color: #f093fb; padding: 2em; box-sizing: border-box; ">
+        <p style="color: white; margin: 0 0 1em;">Container interne - id="inner-container"</p>
+          <BmsFloatingWindow v-bind="args">
+            <p style="padding: 1em;">Cliquez sur expand pour voir la fenêtre s'agrandir sur le container <strong>interne</strong>.</p>
+            <p style="padding: 0 1em;">La prop <code>expandTarget="#inner-container"</code> définit la cible.</p>
+          </BmsFloatingWindow>
+    </div>
+  `,
+});
+
+export const ForeignContainers = ForeignContainersTemplate.bind({});
+ForeignContainers.args = {
+  title: 'Expand vers outer foreign',
+  modelValue: true,
+  expandable: true,
+  expandTarget: '#foreign-container',
+  defaultPlacement: 'top-left',
+};
+ForeignContainers.parameters = {
+  docs: {
+    description: {
+      story:
+        "Démontre expandTarget : la fenêtre s'agrandit sur le container extérieur à son arbre (violet).",
+    },
+  },
 };