@fkui/vue 5.40.0 → 5.41.0

package/dist/cjs/index.cjs.js

@@ -2075,11 +2075,11 @@ function baseIsEqual$1(value, other, bitmask, customizer, stack) {
 }
 var _baseIsEqual = baseIsEqual$1;
 var baseIsEqual = _baseIsEqual;
-function isEqual(value, other) {
+function isEqual$1(value, other) {
   return baseIsEqual(value, other);
 }
-var isEqual_1 = isEqual;
-const isEqual$1 = /* @__PURE__ */ getDefaultExportFromCjs(isEqual_1);
+var isEqual_1 = isEqual$1;
+const isEqual$2 = /* @__PURE__ */ getDefaultExportFromCjs(isEqual_1);
 function itemEquals(item1, item2, compareAttribute) {
   if (!logic.isSet(item1) || !logic.isSet(item2)) {
     return false;
@@ -3943,7 +3943,7 @@ const ValidationDirective = {
     logic.ValidationService.removeValidatorsFromElement(validatableElement);
   },
   updated(el, binding) {
-    if (!isEqual$1(binding.value, binding.oldValue)) {
+    if (!isEqual$2(binding.value, binding.oldValue)) {
       registerValidators(el, binding);
     }
   },
@@ -5026,6 +5026,8 @@ function isTeleportDisabled(options) {
     disableTeleport = true;
   } else if (forceOverlay) {
     disableTeleport = false;
+  } else if (placement === Placement.NotCalculated && !isMobileSize) {
+    disableTeleport = false;
   }
   return disableTeleport;
 }
@@ -5114,25 +5116,38 @@ const _sfc_main$X = vue.defineComponent({
       default: true
     }
   },
-  emits: ["open", "close"],
+  emits: [
+    /**
+     * Emitted when popup is visible and placement is fully calculated.
+     */
+    "open",
+    /**
+     * Emitted when clicked outside of popup.
+     */
+    "close"
+  ],
   data() {
     return {
       teleportDisabled: false,
       placement: Placement.NotCalculated,
-      focus: null,
-      noCloseOnResize: false
+      focus: null
     };
   },
   computed: {
     popupClasses() {
+      const popupState = this.isInline ? ["popup--inline"] : ["popup--overlay"];
+      return ["popup", ...popupState];
+    },
+    isInline() {
       let isInline = this.teleportDisabled || this.placement === Placement.Fallback;
       if (this.forceInline) {
         isInline = true;
       } else if (this.forceOverlay) {
         isInline = false;
+      } else if (this.placement === Placement.NotCalculated && !this.isMobileSize()) {
+        isInline = false;
       }
-      const popupState = isInline ? ["popup--inline"] : ["popup--overlay"];
-      return ["popup", ...popupState];
+      return isInline;
     },
     forceInline() {
       return this.alwaysInline || this.inline === "always";
@@ -5165,19 +5180,22 @@ const _sfc_main$X = vue.defineComponent({
           setTimeout(() => {
             if (this.isOpen) {
               document.addEventListener("click", this.onDocumentClickHandler);
-              window.addEventListener("resize", this.onWindowResizeHandler);
+              window.addEventListener("resize", this.onWindowResizeDebounced);
             }
           }, 0);
         } else {
           document.removeEventListener("click", this.onDocumentClickHandler);
-          window.removeEventListener("resize", this.onWindowResizeHandler);
+          window.removeEventListener("resize", this.onWindowResizeDebounced);
         }
       }
     }
   },
+  created() {
+    this.onWindowResizeDebounced = logic.debounce(this.onWindowResize, 100).bind(this);
+  },
   unmounted() {
     document.removeEventListener("click", this.onDocumentClickHandler);
-    window.removeEventListener("resize", this.onWindowResizeHandler);
+    window.removeEventListener("resize", this.onWindowResizeDebounced);
   },
   methods: {
     async toggleIsOpen(isOpen) {
@@ -5190,8 +5208,13 @@ const _sfc_main$X = vue.defineComponent({
         return;
       }
       await this.$nextTick();
-      const popup = this.$refs["popup"];
-      const wrapper = this.$refs["wrapper"];
+      await this.calculatePlacement();
+      this.applyFocus();
+      this.$emit("open");
+    },
+    async calculatePlacement() {
+      const popup = getHTMLElementFromVueRef(this.$refs.popup);
+      const wrapper = getHTMLElementFromVueRef(this.$refs.wrapper);
       const anchor = getElement(this.anchor);
       if (!anchor) {
         throw new Error("No anchor element found");
@@ -5213,13 +5236,12 @@ const _sfc_main$X = vue.defineComponent({
         if (useOverlay) {
           wrapper.style.left = `${result.x}px`;
           wrapper.style.top = `${result.y}px`;
-          this.applyFocus();
-          this.$emit("open");
           return;
         }
       }
-      this.noCloseOnResize = true;
       this.teleportDisabled = true;
+      wrapper.style.removeProperty("left");
+      wrapper.style.removeProperty("top");
       await new Promise((resolve) => setTimeout(resolve, 200));
       const scrollTarget = popup.closest(".scroll-target");
       const hasScrollTarget = scrollTarget !== null;
@@ -5233,23 +5255,22 @@ const _sfc_main$X = vue.defineComponent({
         top,
         behavior: "smooth"
       };
-      wrapper.style.removeProperty("left");
-      wrapper.style.removeProperty("top");
       if (hasScrollTarget) {
         scrollTarget.scrollTo(scrollOptions);
       } else {
         window.scrollTo(scrollOptions);
       }
-      this.noCloseOnResize = false;
-      this.applyFocus();
-      this.$emit("open");
     },
     applyFocus() {
-      if (this.setFocus) {
-        const wrapper = this.$refs["wrapper"];
-        const focusableElement = getFocusableElement(wrapper, this.focusElement);
-        this.focus = logic.pushFocus(focusableElement);
+      if (!this.setFocus) {
+        return;
+      }
+      const wrapper = this.$refs.wrapper;
+      if (!wrapper) {
+        return;
       }
+      const focusableElement = getFocusableElement(wrapper, this.focusElement);
+      this.focus = logic.pushFocus(focusableElement);
     },
     isMobileSize() {
       return window.innerWidth < MIN_DESKTOP_WIDTH;
@@ -5257,11 +5278,35 @@ const _sfc_main$X = vue.defineComponent({
     onDocumentClickHandler() {
       this.$emit("close");
     },
-    onWindowResizeHandler() {
-      if (this.noCloseOnResize) {
+    onWindowResizeDebounced() {
+    },
+    async onWindowResize() {
+      if (!this.isOpen) {
         return;
       }
-      this.$emit("close");
+      if (this.forceInline) {
+        return;
+      }
+      if (this.isInline && this.isMobileSize()) {
+        return;
+      }
+      if (this.isInline) {
+        this.placement = Placement.NotCalculated;
+        this.teleportDisabled = false;
+        await this.$nextTick();
+      }
+      await this.calculatePlacement();
+      const {
+        placement,
+        forceInline,
+        forceOverlay
+      } = this;
+      this.teleportDisabled = isTeleportDisabled({
+        window,
+        placement,
+        forceInline,
+        forceOverlay
+      });
     },
     onPopupClickHandler(event) {
       event.stopPropagation();
@@ -5271,7 +5316,8 @@ const _sfc_main$X = vue.defineComponent({
     },
     onKeyTab(event) {
       if (this.keyboardTrap) {
-        logic.handleTab(event, this.$refs.wrapper);
+        const wrapper = getHTMLElementFromVueRef(this.$refs.wrapper);
+        logic.handleTab(event, wrapper);
       }
     }
   }
@@ -5597,6 +5643,12 @@ function useFieldset() {
     getFieldsetLabelText: vue.inject(injectionKeys.getFieldsetLabelText, () => void 0)
   };
 }
+function isEqual(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((_, i) => a[i] === b[i]);
+}
 const _sfc_main$V = vue.defineComponent({
   name: "FFieldset",
   components: {
@@ -5817,7 +5869,10 @@ const _sfc_main$V = vue.defineComponent({
     },
     async updateCheckboxChildren() {
       await this.$nextTick();
-      this.children = Array.from(this.$el.querySelectorAll('input[type="checkbox"]'));
+      const checkboxes = Array.from(this.$el.querySelectorAll('input[type="checkbox"]'));
+      if (!isEqual(this.children, checkboxes)) {
+        this.children = checkboxes;
+      }
     }
   }
 });
@@ -5976,7 +6031,7 @@ const _sfc_main$U = vue.defineComponent({
     attrs() {
       let checked;
       if (Array.isArray(this.modelValue)) {
-        checked = this.modelValue.findIndex((it) => isEqual$1(vue.toValue(it), vue.toValue(this.value))) >= 0;
+        checked = this.modelValue.findIndex((it) => isEqual$2(vue.toValue(it), vue.toValue(this.value))) >= 0;
       } else {
         checked = this.value === this.modelValue;
       }
@@ -6010,7 +6065,7 @@ const _sfc_main$U = vue.defineComponent({
     emitVModelEvent(event) {
       let newModel;
       if (Array.isArray(this.modelValue)) {
-        newModel = [...this.modelValue].filter((it) => !isEqual$1(vue.toValue(it), vue.toValue(this.value)));
+        newModel = [...this.modelValue].filter((it) => !isEqual$2(vue.toValue(it), vue.toValue(this.value)));
         if (this.modelValue.length <= newModel.length) {
           newModel.push(this.value);
         }
@@ -12891,8 +12946,11 @@ const _sfc_main$c = vue.defineComponent({
       }
       this.overflowIndex = foundOverflowIndex;
       if (!this.hasOverflow) {
+        this.popupOpen = false;
         return;
       }
+      const popupWasOpen = this.popupOpen;
+      this.popupOpen = false;
       await this.$nextTick();
       const wrapper = getHTMLElementFromVueRef(this.$refs["popup-item"]);
       wrapper.style.left = "0";
@@ -12901,6 +12959,7 @@ const _sfc_main$c = vue.defineComponent({
       const wrapperRect = getAbsolutePosition(wrapper);
       const offset2 = wrapperRect.x - firstHiddenItemRect.x;
       wrapper.style.left = `-${offset2}px`;
+      this.popupOpen = popupWasOpen;
     },
     onKeyUp(event) {
       if (preventKeys.includes(event.key)) {