@ouestfrance/sipa-bms-ui 8.20.0 → 8.22.0

package/src/components/form/BmsMultiSelect.vue

@@ -5,7 +5,7 @@
     :model-value="modelValue"
     :open="isDatalistOpen"
     @select="onSelect"
-    @click="setFocus"
+    @click="onSelectClick"
   >
     <template #input>
       <div class="tags">
@@ -24,11 +24,8 @@
           v-model="searching"
           class="search"
           :disabled="disabled"
-          @focus="openDatalist"
-          @click="openDatalist"
+          @input="onInput"
           @keyup.down="openDatalist"
-          @input="openDatalist"
-          @keyup.backspace="onBackspace"
         />
       </div>
 
@@ -37,16 +34,8 @@
           <X class="icon icon-clear" @click.stop="clearInput" />
         </template>
         <template v-else>
-          <ChevronUp
-            v-if="isDatalistOpen"
-            class="icon icon-toggle-button"
-            @click="closeDatalist"
-          />
-          <ChevronDown
-            v-else
-            class="icon icon-toggle-button"
-            @click="openDatalist"
-          />
+          <ChevronUp v-if="isDatalistOpen" class="icon icon-toggle-button" />
+          <ChevronDown v-else class="icon icon-toggle-button" />
         </template>
       </span>
     </template>
@@ -67,7 +56,7 @@ import { InputOption } from '@/models';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, onKeyDown, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[] | string[];
@@ -80,9 +69,16 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
 });
 
-const inputElement: Ref<HTMLElement | null> = ref(null);
+const emits = defineEmits<{
+  select: [option: InputOption | string];
+  input: [e: InputEvent];
+}>();
+
+const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
 
+const inputElement: Ref<HTMLElement | null> = ref(null);
 const isDatalistOpen = ref(false);
+const searching = ref('');
 
 const closeDatalist = () => (isDatalistOpen.value = false);
 const openDatalist = () => {
@@ -91,13 +87,9 @@ const openDatalist = () => {
   }
 };
 
-const searching = ref('');
-
-const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
-
-onClickOutside(inputElement, closeDatalist, {
-  ignore: ['.datalist-option', '.icon-toggle-button'],
-});
+const onBlur = () => {
+  closeDatalist();
+};
 
 const onBackspace = () => {
   if (
@@ -107,6 +99,21 @@ const onBackspace = () => {
   )
     modelValue.value.splice(-1);
 };
+onClickOutside(inputElement, closeDatalist, {
+  ignore: ['.datalist-option', '.icon-toggle-button'],
+});
+onKeyUp('Escape', closeDatalist);
+onKeyUp('Tab', closeDatalist);
+
+onKeyDown('Backspace', onBackspace);
+
+const onSelectClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
+};
+const onInput = (e: InputEvent) => {
+  emits('input', e);
+  openDatalist();
+};
 
 const setFocus = () => {
   if (inputElement.value) {
@@ -122,8 +129,8 @@ const onSelect = (option: InputOption | string) => {
   }
 
   searching.value = '';
+  emits('select', option);
   setFocus();
-  closeDatalist();
 };
 
 const removeOption = (value: string) => {

package/src/components/form/BmsSelect.vue

@@ -3,7 +3,7 @@
     v-bind="$props"
     :open="isDatalistOpen"
     @select="onSelect"
-    @click="setFocus"
+    @click="onSelectClick"
   >
     <template #input>
       <input
@@ -15,17 +15,11 @@
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
-        @focus="openDatalist"
-        @click="openDatalist"
         @keyup.down="openDatalist"
       />
       <span class="icon-toggle-container">
-        <ChevronUp
-          v-if="isDatalistOpen"
-          class="icon-toggle-button"
-          @click="closeDatalist"
-        />
-        <ChevronDown v-else class="icon-toggle-button" @click="openDatalist" />
+        <ChevronUp v-if="isDatalistOpen" class="icon-toggle-button" />
+        <ChevronDown v-else class="icon-toggle-button" />
       </span>
     </template>
   </RawSelect>
@@ -33,12 +27,12 @@
 
 <script lang="ts" setup>
 import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-import { computed, Ref, ref } from 'vue';
+import { computed, Ref, ref, watch } from 'vue';
 import _ from 'lodash';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -55,10 +49,13 @@ const props = withDefaults(defineProps<Props>(), {
   open: false,
 });
 
+const emits = defineEmits<{
+  select: [value: any];
+}>();
+
 const modelValue = defineModel<any>('modelValue', { required: true });
 
 const inputElement: Ref<HTMLElement | null> = ref(null);
-
 const isDatalistOpen = ref(props.open);
 
 const closeDatalist = () => {
@@ -71,13 +68,11 @@ const openDatalist = () => {
   }
 };
 
-const emits = defineEmits<{
-  select: [value: any];
-}>();
-
 onClickOutside(inputElement, closeDatalist, {
   ignore: ['.datalist-option', '.icon-toggle-button'],
 });
+onKeyUp('Escape', closeDatalist);
+onKeyUp('Tab', closeDatalist);
 
 const displayValue = computed(() => {
   const option = props.options.find((o) =>
@@ -100,6 +95,13 @@ const onSelect = (option: any) => {
   closeDatalist();
 };
 
+const onSelectClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
+  if (isDatalistOpen) {
+    setFocus();
+  }
+};
+
 defineExpose({
   setFocus,
 });

package/src/components/form/RawAutocomplete.vue

@@ -10,7 +10,8 @@
       :required="required"
       :small="small"
       @input="onInput"
-      @focus="onFocus"
+      @click="onClick"
+      @keyup.down="openDatalist"
     >
       <template #icon-start>
         <slot name="icon-start"></slot>
@@ -58,7 +59,7 @@ import RawInputText from '@/components/form/RawInputText.vue';
 import { InputOption, InputType } from '@/models';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
-import { MaybeElementRef, onClickOutside } from '@vueuse/core';
+import { MaybeElementRef, onClickOutside, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -82,6 +83,10 @@ const rawInput: Ref<HTMLElement | null> = ref(null);
 const emits = defineEmits<{
   addNewOption: [newOption: string];
   select: [option: InputOption];
+  blur: [];
+  focus: [];
+  click: [];
+  input: [e: InputEvent];
 }>();
 
 const getValidOptionByLabel = (label: string) =>
@@ -102,6 +107,13 @@ onClickOutside(rawInput as MaybeElementRef, closeDatalist, {
   ignore: ['.datalist-option', '.icon-toggle-button', '.icon-clear'],
 });
 
+const onBlur = () => {
+  emits('blur');
+  closeDatalist();
+};
+onKeyUp('Escape', onBlur);
+onKeyUp('Tab', onBlur);
+
 const classes = computed(() => {
   return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
 });
@@ -148,8 +160,8 @@ watch(
   },
 );
 
-const onFocus = () => {
-  openDatalist();
+const onClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
 };
 
 const onInput = () => {

package/src/components/form/RawInputText.vue

@@ -21,6 +21,7 @@
       @blur="$emits('blur')"
       @input="onInput"
       @focus="$emits('focus')"
+      @click="$emits('click')"
     />
     <span class="field__input-icon field__input-icon--end">
       <slot name="icon-end"></slot>

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).",
+    },
+  },
 };