@ouestfrance/sipa-bms-ui 8.50.0 → 8.51.0

package/dist/sipa-bms-ui.css

@@ -427,15 +427,15 @@
   left: 50%;
   transform: translateX(-50%);
   width: 1em;
-}.bms-switch-icon-button[data-v-6751139f] {
+}.bms-switch-icon-button[data-v-72b8f219] {
   position: relative;
   display: inline-flex;
   border-radius: var(--bms-border-radius, 0.25em);
 }
-.bms-switch-icon-button[data-v-6751139f]:hover:not(.bms-switch-icon-button--disabled) {
+.bms-switch-icon-button[data-v-72b8f219]:hover:not(.bms-switch-icon-button--disabled) {
   background-color: light-dark(var(--bms-main-25), var(--bms-grey-140));
 }
-.bms-switch-icon-button__button[data-v-6751139f] {
+.bms-switch-icon-button__button[data-v-72b8f219] {
   display: flex;
   align-items: center;
   gap: 0.25em;
@@ -446,26 +446,26 @@
   border-radius: inherit;
   transition: background-color 0.2s;
 }
-.bms-switch-icon-button__button[data-v-6751139f]:hover:not(.bms-switch-icon-button__button--disabled) {
+.bms-switch-icon-button__button[data-v-72b8f219]:hover:not(.bms-switch-icon-button__button--disabled) {
   background-color: light-dark(var(--bms-main-25), var(--bms-grey-140));
 }
-.bms-switch-icon-button__button--disabled[data-v-6751139f] {
+.bms-switch-icon-button__button--disabled[data-v-72b8f219] {
   cursor: default;
 }
-.bms-switch-icon-button__button--disabled .bms-switch-icon-button__button__icon-container[data-v-6751139f] {
+.bms-switch-icon-button__button--disabled .bms-switch-icon-button__button__icon-container[data-v-72b8f219] {
   background-color: var(--bms-field-disabled-background);
 }
-.bms-switch-icon-button__button--disabled .bms-switch-icon-button__button__icon[data-v-6751139f],
-.bms-switch-icon-button__button--disabled .bms-switch-icon-button__button__chevron[data-v-6751139f] {
+.bms-switch-icon-button__button--disabled .bms-switch-icon-button__button__icon[data-v-72b8f219],
+.bms-switch-icon-button__button--disabled .bms-switch-icon-button__button__chevron[data-v-72b8f219] {
   color: var(--bms-field-disabled-text-color);
 }
-.bms-switch-icon-button__button--outlined .bms-switch-icon-button__button__icon-container[data-v-6751139f] {
+.bms-switch-icon-button__button--outlined .bms-switch-icon-button__button__icon-container[data-v-72b8f219] {
   background-color: inherit;
 }
-.bms-switch-icon-button__button--outlined .bms-switch-icon-button__button__icon[data-v-6751139f] {
+.bms-switch-icon-button__button--outlined .bms-switch-icon-button__button__icon[data-v-72b8f219] {
   color: var(--bms-main-100);
 }
-.bms-switch-icon-button__button__icon-container[data-v-6751139f] {
+.bms-switch-icon-button__button__icon-container[data-v-72b8f219] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -475,24 +475,24 @@
   transition: background-color 0.2s;
   background-color: var(--bms-main-100);
 }
-.bms-switch-icon-button__button:not(.bms-switch-icon-button__button--small) .bms-switch-icon-button__button__icon-container[data-v-6751139f] {
+.bms-switch-icon-button__button:not(.bms-switch-icon-button__button--small) .bms-switch-icon-button__button__icon-container[data-v-72b8f219] {
   width: 2.25em;
   height: 2.25em;
 }
-.bms-switch-icon-button__button__icon[data-v-6751139f] {
+.bms-switch-icon-button__button__icon[data-v-72b8f219] {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--bms-white);
 }
-.bms-switch-icon-button__button__chevron[data-v-6751139f] {
+.bms-switch-icon-button__button__chevron[data-v-72b8f219] {
   display: flex;
   align-items: center;
   color: var(--bms-main-100);
   flex-shrink: 0;
   transition: color 0.2s;
 }
-.bms-switch-icon-button__menu[data-v-6751139f] {
+.bms-switch-icon-button__menu[data-v-72b8f219] {
   position: absolute;
   background-color: var(--bms-white);
   border: 1px solid var(--bms-border-color);
@@ -506,7 +506,7 @@
   box-shadow: var(--bms-box-shadow-elevated);
   width: max-content;
 }
-.bms-switch-icon-button__menu__item[data-v-6751139f] {
+.bms-switch-icon-button__menu__item[data-v-72b8f219] {
   min-height: 2.5em;
   padding: 0.5em 1em;
   display: flex;
@@ -517,27 +517,27 @@
   width: 100%;
   box-sizing: border-box;
 }
-.bms-switch-icon-button__menu__item[data-v-6751139f]:hover {
+.bms-switch-icon-button__menu__item[data-v-72b8f219]:hover {
   background-color: light-dark(var(--bms-grey-10), var(--bms-grey-100));
 }
-.bms-switch-icon-button__menu__item__check[data-v-6751139f] {
+.bms-switch-icon-button__menu__item__check[data-v-72b8f219] {
   flex-shrink: 0;
   color: var(--bms-font-color);
   width: 1em;
   height: 1em;
 }
-.bms-switch-icon-button__menu__item__check-placeholder[data-v-6751139f] {
+.bms-switch-icon-button__menu__item__check-placeholder[data-v-72b8f219] {
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.bms-switch-icon-button__menu__item__icon[data-v-6751139f] {
+.bms-switch-icon-button__menu__item__icon[data-v-72b8f219] {
   flex-shrink: 0;
   color: var(--bms-font-color);
   width: 1em;
   height: 1em;
 }
-.bms-switch-icon-button__menu__item__label[data-v-6751139f] {
+.bms-switch-icon-button__menu__item__label[data-v-72b8f219] {
   white-space: nowrap;
   font-size: 0.875em;
   color: var(--bms-font-color);

package/dist/sipa-bms-ui.es.js

@@ -55115,13 +55115,17 @@ var BmsSwitchIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		const props = __props;
 		const emits = __emit;
 		const isOpen = ref(false);
+		const openUpward = ref(true);
 		const anchorElement = useTemplateRef("anchorElement");
 		const menuElement = useTemplateRef("menuElement");
-		const { height } = useElementBounding(anchorElement);
-		const menuStyle = computed(() => ({ bottom: `${height.value}px` }));
+		const { height, top, bottom } = useElementBounding(anchorElement);
+		const menuStyle = computed(() => openUpward.value ? { bottom: `${height.value}px` } : { top: `${height.value}px` });
 		const selectedOption = computed(() => props.options.find((option) => option.value === props.modelValue));
 		const toggleMenu = () => {
-			if (!props.disabled) isOpen.value = !isOpen.value;
+			if (!props.disabled) {
+				if (!isOpen.value) openUpward.value = top.value > window.innerHeight - bottom.value;
+				isOpen.value = !isOpen.value;
+			}
 		};
 		const selectOption = (value) => {
 			emits("update:modelValue", value);
@@ -55151,7 +55155,7 @@ var BmsSwitchIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 				key: 0,
 				size: 16,
 				class: "bms-switch-icon-button__button__icon"
-			})) : createCommentVNode("", true)]), !isOpen.value ? (openBlock(), createBlock(unref(ChevronUp), {
+			})) : createCommentVNode("", true)]), openUpward.value !== isOpen.value ? (openBlock(), createBlock(unref(ChevronUp), {
 				key: 0,
 				size: 10,
 				class: "bms-switch-icon-button__button__chevron"
@@ -55185,7 +55189,7 @@ var BmsSwitchIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			}), 128))], 4), [[vShow, isOpen.value]])], 2);
 		};
 	}
-}), [["__scopeId", "data-v-6751139f"]]);
+}), [["__scopeId", "data-v-72b8f219"]]);
 //#endregion
 //#region src/components/feedback/BmsAlert.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$63 = { class: "info-line" };