@fkui/vue 6.31.1 → 6.32.0

package/dist/cjs/index.cjs.js

@@ -315,7 +315,7 @@ function requireSymbolConstructorDetection() {
   var globalThis2 = requireGlobalThis();
   var $String = globalThis2.String;
   symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails2(function() {
-    var symbol = Symbol("symbol detection");
+    var symbol = /* @__PURE__ */ Symbol("symbol detection");
     return !$String(symbol) || !(Object(symbol) instanceof Symbol) || // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
     !Symbol.sham && V8_VERSION && V8_VERSION < 41;
   });
@@ -6870,7 +6870,7 @@ function requireEs_set_union_v2() {
   return es_set_union_v2;
 }
 requireEs_set_union_v2();
-const internalKey = Symbol("internal-key");
+const internalKey = /* @__PURE__ */ Symbol("internal-key");
 let internalIndex = 0;
 function getInternalKey() {
   return internalKey;
@@ -8000,7 +8000,7 @@ function useMutationObserver(target, callback, options = {}) {
     takeRecords
   };
 }
-const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+const ssrWidthSymbol = /* @__PURE__ */ Symbol("vueuse-ssr-width");
 function useSSRWidth() {
   const ssrWidth = vue.hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
   return typeof ssrWidth === "number" ? ssrWidth : void 0;
@@ -9054,6 +9054,11 @@ const _sfc_main$16 = vue.defineComponent({
     "open",
     /**
      * Emitted when clicked outside of popup.
+     *
+     * Includes the reason for closing as event argument. One of:
+     *
+     * - `"click-outside"` - when clicking outside the popup with the mouse
+     * - `"escape"` - when closing the popup with the escape key.
      */
     "close"
   ],
@@ -9206,7 +9211,7 @@ const _sfc_main$16 = vue.defineComponent({
       return window.innerWidth < MIN_DESKTOP_WIDTH;
     },
     onDocumentClickHandler() {
-      this.$emit("close");
+      this.$emit("close", "click-outside");
     },
     onWindowResizeDebounced() {
     },
@@ -9242,7 +9247,7 @@ const _sfc_main$16 = vue.defineComponent({
       event.stopPropagation();
     },
     onKeyEsc() {
-      this.$emit("close");
+      this.$emit("close", "escape");
     },
     onKeyTab(event) {
       if (this.keyboardTrap) {
@@ -10705,7 +10710,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["onEnter", "onAfterEnter", "onLeave"]);
 }
 const FExpand = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["render", _sfc_render$u]]);
-const tooltipAttachTo = Symbol("tooltipAttachTo");
+const tooltipAttachTo = /* @__PURE__ */ Symbol("tooltipAttachTo");
 let initialized = false;
 const reducedMotion = vue.ref(false);
 function useAnimation(options) {
@@ -11050,9 +11055,9 @@ function* labelClasses(options) {
   yield labelClass;
 }
 const injectionKeys = {
-  sharedName: Symbol("sharedName"),
-  showDetails: Symbol("showDetails"),
-  getFieldsetLabelText: Symbol("getFieldsetLabelText")
+  sharedName: /* @__PURE__ */ Symbol("sharedName"),
+  showDetails: /* @__PURE__ */ Symbol("showDetails"),
+  getFieldsetLabelText: /* @__PURE__ */ Symbol("getFieldsetLabelText")
 };
 function useFieldset() {
   return {
@@ -11749,6 +11754,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     const currentFocusedItemIndex = vue.ref(-1);
     const popupItems = vue.computed(() => __props.items.filter(isContextMenuTextItem));
     const hasIcons = vue.computed(() => __props.items.some((it) => isContextMenuTextItem(it) && it.icon));
+    let focusHandle = null;
     const ariaLabel = vue.computed(() => {
       if (__props.ariaLabel) {
         return __props.ariaLabel;
@@ -11781,6 +11787,18 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
       if (isOpen) {
         currentFocusedItemIndex.value = -1;
         selectedItem.value = "";
+        vue.nextTick(() => {
+          if (contextmenuRef.value) {
+            focusHandle = logic.pushFocus(contextmenuRef.value);
+          }
+        });
+      } else {
+        if (focusHandle) {
+          logic.popFocus(focusHandle, {
+            restoreFocus: true
+          });
+          focusHandle = null;
+        }
       }
     }, {
       immediate: true
@@ -11788,14 +11806,32 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     function hasSeparatorAfterItemAt(index) {
       return separatorPositions.value.includes(index);
     }
-    function closePopup() {
+    function closePopup(reason) {
+      if (focusHandle) {
+        switch (reason) {
+          case "click-outside":
+            logic.popFocus(focusHandle, {
+              restoreFocus: false
+            });
+            break;
+          case "tab":
+          case "escape":
+          case "select":
+          default:
+            logic.popFocus(focusHandle, {
+              restoreFocus: true
+            });
+            break;
+        }
+        focusHandle = null;
+      }
       emit("close");
     }
     function onClickItem(item) {
       if (isContextMenuTextItem(item) && item.key) {
         selectedItem.value = item.key;
         emit("select", selectedItem.value);
-        closePopup();
+        closePopup("select");
       }
     }
     function tabIndex(index) {
@@ -11811,12 +11847,12 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       if (event.key === "Escape") {
-        closePopup();
+        closePopup("escape");
         return;
       }
       if (event.key === "Tab") {
         event.preventDefault();
-        closePopup();
+        closePopup("tab");
         return;
       }
       const action = actionFromKeyboardEvent(event);
@@ -11861,10 +11897,9 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
         "is-open": __props.isOpen,
         "keyboard-trap": false,
         anchor: __props.anchor,
-        "set-focus": true,
-        "focus-element": () => contextmenuRef.value,
+        "set-focus": false,
         inline: "never",
-        onClose: _cache[0] || (_cache[0] = ($event) => closePopup())
+        onClose: _cache[0] || (_cache[0] = ($event) => closePopup($event))
       }, {
         default: vue.withCtx(() => [vue.createElementVNode("nav", {
           class: "contextmenu",
@@ -11892,7 +11927,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
           }, vue.toDisplayString(item.label), 513)], 8, _hoisted_4$k), _cache[2] || (_cache[2] = vue.createTextVNode()), hasSeparatorAfterItemAt(index) ? (vue.openBlock(), vue.createElementBlock("hr", _hoisted_5$h)) : vue.createCommentVNode("", true)], 8, _hoisted_3$o);
         }), 128))], 512)], 40, _hoisted_1$G)]),
         _: 1
-      }, 8, ["is-open", "anchor", "focus-element"]);
+      }, 8, ["is-open", "anchor"]);
     };
   }
 });
@@ -16002,7 +16037,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
 });
 const _style_0$3 = '/* background color */\n/* highlight color */\n/* the width of the visible handle */\n/* how much extra click/hover area the handle has */\n/* how much extra space the handle occupies when hovering (not counting the click area) */\n/* how long before visually indicating the hover state */\n/* how long the animation for the visual indicator is */\n:host {\n  display: contents;\n}\n:host([hidden]) {\n  display: none;\n}\n:host ::slotted(*) {\n  display: contents;\n}\n.resize {\n  flex-grow: 1;\n  display: flex;\n  align-items: stretch;\n}\n.resize--overlay {\n  position: absolute;\n  z-index: 1;\n  background: var(--f-page-layout-background);\n}\n.resize--left {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--left .resize__content {\n  flex-direction: row;\n}\n.resize--left.resize--overlay {\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--right {\n  flex-direction: row-reverse;\n}\n.resize--right:not(.resize--disabled) {\n  width: calc(var(--size) + 2px);\n}\n.resize--right .resize__content {\n  flex-direction: row;\n}\n.resize--right.resize--overlay {\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n.resize--top {\n  flex-direction: column;\n}\n.resize--top:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize--bottom {\n  flex-direction: column-reverse;\n}\n.resize--bottom:not(.resize--disabled) {\n  height: calc(var(--size) + 2px);\n}\n.resize__offset {\n  width: calc(var(--offset) + 2px);\n}\n.resize__content {\n  flex: 1 1 auto;\n  overflow: auto;\n  box-sizing: border-box;\n  display: flex;\n}\n.resize--column .resize__content {\n  flex-direction: column;\n}\n.resize--row .resize__content {\n  flex-direction: row;\n}\n.resize--left:not(.resize--disabled) .resize__content, .resize--right:not(.resize--disabled) .resize__content {\n  min-width: var(--min);\n  max-width: var(--max);\n  flex-basis: var(--size);\n}\n.resize--top:not(.resize--disabled) .resize__content, .resize--bottom:not(.resize--disabled) .resize__content {\n  min-height: var(--min);\n  max-height: var(--max);\n  flex-basis: var(--size);\n}\n.resize__handle {\n  flex: 0 0 2px;\n  background: var(--fkds-color-border-primary);\n  touch-action: none;\n  user-select: none;\n  z-index: 1;\n  position: relative;\n  transition: z-index 0s 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle {\n    background: CanvasText;\n}\n}\n.resize__handle[aria-orientation=horizontal] {\n  cursor: row-resize;\n  height: 2px;\n}\n.resize__handle[aria-orientation=horizontal]::before {\n  inset: -2px 0;\n}\n.resize__handle[aria-orientation=horizontal]::after {\n  inset: -4px 0;\n}\n.resize__handle[aria-orientation=vertical] {\n  cursor: col-resize;\n  width: 2px;\n}\n.resize__handle[aria-orientation=vertical]::before {\n  inset: 0 -2px;\n}\n.resize__handle[aria-orientation=vertical]::after {\n  inset: 0 -4px;\n}\n.resize__handle::before {\n  content: "";\n  pointer-events: none;\n  position: absolute;\n  background-color: transparent;\n  transition: background-color 200ms ease-in;\n}\n.resize__handle::after {\n  content: "";\n  position: absolute;\n}\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n  background-color: var(--fkds-color-action-border-primary-hover);\n  transition-delay: 200ms;\n}\n@media (forced-colors: active) {\n.resize__handle:focus::before, .resize__handle:hover::before, .resize__handle.drag::before {\n    background-color: Highlight;\n}\n}\n.resize__handle {\n  /* disable regular focus indicator as this component has its own */\n}\n.resize__handle:focus {\n  outline: none;\n  box-shadow: none;\n}\n.resize__handle {\n  /* when focus by keyboard we dont want the delay or transition */\n}\n.resize__handle:focus::before {\n  transition: none;\n}\n.resize__handle {\n  /* as the handle area expand we increase z-index for the handle to make sure it covers other separators */\n}\n.resize__handle:hover, .resize__handle:focus, .resize__handle.drag {\n  z-index: 2;\n  transition: z-index 0s 0s;\n}\n.resize__handle.disabled {\n  cursor: auto;\n}\n.resize__handle.disabled::before {\n  display: none;\n}';
 const FResizePane = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["styles", [_style_0$3]]]);
-const injectionKey = Symbol.for("FResizePane:useResize");
+const injectionKey = /* @__PURE__ */ Symbol.for("FResizePane:useResize");
 function toOptionalRef(value) {
   if (typeof value === "undefined") {
     return value;
@@ -19871,7 +19906,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   })), _cache[1] || (_cache[1] = vue.createTextVNode()), vue.createElementVNode("div", _hoisted_5$2, [vue.createElementVNode("div", _hoisted_6$2, [vue.renderSlot(_ctx.$slots, "right")])])], 512)]);
 }
 const FPageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$4]]);
-const paginateDatasetKey = Symbol("paginateDataset");
+const paginateDatasetKey = /* @__PURE__ */ Symbol("paginateDataset");
 const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "FPaginateDataset",
   props: {