@fkui/vue 5.42.0 → 5.43.0

package/dist/cjs/index.cjs.js

@@ -3812,6 +3812,19 @@ const _sfc_main$1b = vue.defineComponent({
       validator(value) {
         return sizes.includes(value);
       }
+    },
+    /**
+     * Default behavior is that the modal will restore focus to previous element once closed.
+     * - "on" (default) - component will set focus both when opened and closed
+     * - "off" - focus strategy disabled
+     * - "open" - focus will only be applied once modal is opened
+     */
+    focus: {
+      type: String,
+      default: "on",
+      validator(value) {
+        return ["on", "off", "open"].includes(value);
+      }
     }
   },
   emits: ["close"],
@@ -3864,8 +3877,12 @@ const _sfc_main$1b = vue.defineComponent({
       root.style.top = `-${scroll}px`;
       root.classList.add("modal__open");
       const focusElement2 = this.resolveFocusElement();
-      this.savedFocus = logic.pushFocus(focusElement2);
-      this.savedScroll = scroll;
+      if (this.focus === "on") {
+        this.savedFocus = logic.pushFocus(focusElement2);
+        this.savedScroll = scroll;
+      } else if (this.focus === "open") {
+        logic.focus(focusElement2);
+      }
     },
     /**
      * Prioritises what element to initially focus on in the following order:
@@ -3885,15 +3902,15 @@ const _sfc_main$1b = vue.defineComponent({
       return firstTabbableChildElement !== null && firstTabbableChildElement !== void 0 ? firstTabbableChildElement : contentElement;
     },
     restoreState() {
-      if (this.savedFocus) {
-        var _this$savedScroll;
-        const root = document.documentElement;
-        root.classList.remove("modal__open");
-        root.style.removeProperty("top");
-        root.scrollTop = (_this$savedScroll = this.savedScroll) !== null && _this$savedScroll !== void 0 ? _this$savedScroll : 0;
+      var _this$savedScroll;
+      const root = document.documentElement;
+      root.classList.remove("modal__open");
+      root.style.removeProperty("top");
+      root.scrollTop = (_this$savedScroll = this.savedScroll) !== null && _this$savedScroll !== void 0 ? _this$savedScroll : 0;
+      this.savedScroll = null;
+      if (this.focus === "on" && this.savedFocus) {
         logic.popFocus(this.savedFocus);
         this.savedFocus = null;
-        this.savedScroll = null;
       }
     },
     onFocusFirst() {
@@ -4067,6 +4084,19 @@ const _sfc_main$1a = vue.defineComponent({
       default: () => {
         return defaultButtons;
       }
+    },
+    /**
+     * Default behavior is that the modal will restore focus to previous element once closed.
+     * - "on" (default) - component will set focus both when opened and closed
+     * - "off" - focus strategy disabled
+     * - "open" - focus will only be applied once modal is opened
+     */
+    focus: {
+      type: String,
+      default: "on",
+      validator(value) {
+        return ["on", "off", "open"].includes(value);
+      }
     }
   },
   emits: ["close", ...defaultButtons.map((it) => {
@@ -4108,6 +4138,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-close-text": _ctx.ariaCloseText,
     type: "warning",
     size: _ctx.size,
+    focus: _ctx.focus,
     onClose: _ctx.onClose
   }, {
     header: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "heading", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.heading), 1)])]),
@@ -4121,7 +4152,7 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
       }, [vue.createElementVNode("span", null, vue.toDisplayString(button.label), 1), _cache[0] || (_cache[0] = vue.createTextVNode()), button.screenreader ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, " " + vue.toDisplayString(button.screenreader), 1)) : vue.createCommentVNode("", true)], 10, _hoisted_2$D);
     }), 128))])]),
     _: 3
-  }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "onClose"]);
+  }, 8, ["fullscreen", "is-open", "aria-close-text", "size", "focus", "onClose"]);
 }
 const FConfirmModal = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$_]]);
 const GAP = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x"];