@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/{chunk-VFS5XAZ3.mjs → chunk-CGNBG7NB.mjs}

@@ -1,7 +1,11 @@
+import {
+  assignOverlayTriggerRef,
+  renderOverlayTrigger
+} from "./chunk-CMYPAPF2.mjs";
 import {
   renderVueOverlayTeleport,
   useVueAnchoredOverlay
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-Y63TRXZO.mjs";
 
 // src/components/ContextMenu.ts
 import {
@@ -15,7 +19,8 @@ import {
   onMounted,
   nextTick,
   cloneVNode,
-  watch
+  watch,
+  useId
 } from "vue";
 import {
   classNames,
@@ -29,8 +34,11 @@ import {
   getContextMenuSubChevronClasses,
   getContextMenuPointStyle,
   getContextMenuOpenPoint,
+  getContextMenuSubPlacement,
+  getOverlayTriggerAria,
   injectContextMenuStyles,
   CONTEXT_MENU_ENTER_CLASS,
+  CONTEXT_MENU_SUB_HIDE_DELAY_MS,
   CONTEXT_MENU_SUB_CHEVRON_PATH,
   isContextMenuKeyboardEvent,
   handleMenuNavigation,
@@ -78,8 +86,6 @@ var ContextMenuMenu = defineComponent({
     };
   }
 });
-var contextMenuIdCounter = 0;
-var createContextMenuId = () => `tiger-context-menu-${++contextMenuIdCounter}`;
 var ContextMenuContextKey = /* @__PURE__ */ Symbol("ContextMenuContext");
 var ContextMenuItem = defineComponent({
   name: "TigerContextMenuItem",
@@ -93,6 +99,10 @@ var ContextMenuItem = defineComponent({
       type: Boolean,
       default: false
     },
+    href: {
+      type: String,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -132,16 +142,17 @@ var ContextMenuItem = defineComponent({
         style: _style,
         ...restAttrs
       } = attrsRecord;
+      const isLink = Boolean(props.href) && !props.disabled;
       return h(
-        "button",
+        isLink ? "a" : "button",
         {
           ...restAttrs,
-          type: "button",
+          ...isLink ? { href: props.href } : { type: "button" },
           class: itemClasses.value,
           role: "menuitem",
           tabindex: -1,
-          "aria-disabled": props.disabled,
-          disabled: props.disabled,
+          "aria-disabled": props.disabled || void 0,
+          disabled: isLink ? void 0 : props.disabled,
           onClick: handleClick,
           style: mergedStyle.value
         },
@@ -187,11 +198,14 @@ var ContextMenuSub = defineComponent({
     let popupCloseTimer = null;
     const isExpanded = computed(() => isHovered.value || isOpenByKeyboard.value);
     const portalEnabled = computed(() => Boolean(context?.portal.value));
+    const subMenuId = `tiger-context-menu-sub-${useId()}`;
     const overlay = useVueAnchoredOverlay({
       referenceRef: titleRef,
       floatingRef: popupRef,
       enabled: computed(() => Boolean(context) && isExpanded.value && !props.disabled),
-      placement: "right-start",
+      placement: () => getContextMenuSubPlacement(
+        titleRef.value?.closest("[dir]")?.getAttribute("dir") ?? (typeof document === "undefined" ? void 0 : document.documentElement.getAttribute("dir"))
+      ),
       offset: 4,
       portal: portalEnabled,
       dismissOnEscape: true,
@@ -229,7 +243,7 @@ var ContextMenuSub = defineComponent({
         isOpenByKeyboard.value = false;
       };
       if (portalEnabled.value) {
-        popupCloseTimer = setTimeout(close, 120);
+        popupCloseTimer = setTimeout(close, CONTEXT_MENU_SUB_HIDE_DELAY_MS);
         return;
       }
       close();
@@ -241,7 +255,10 @@ var ContextMenuSub = defineComponent({
     };
     const handleTitleKeyDown = (event) => {
       if (props.disabled) return;
-      if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+      const dir = titleRef.value?.closest("[dir]")?.getAttribute("dir") ?? document.documentElement.getAttribute("dir");
+      const openKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+      const closeKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+      if (event.key === openKey || event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         event.stopPropagation();
         isOpenByKeyboard.value = true;
@@ -249,7 +266,7 @@ var ContextMenuSub = defineComponent({
         focusPopupFirstItem();
         return;
       }
-      if (event.key === "ArrowLeft" || event.key === "Escape") {
+      if (event.key === closeKey || event.key === "Escape") {
         if (isExpanded.value) {
           event.preventDefault();
           event.stopPropagation();
@@ -304,6 +321,7 @@ var ContextMenuSub = defineComponent({
           tabindex: -1,
           "aria-haspopup": "menu",
           "aria-expanded": isExpanded.value,
+          "aria-controls": isExpanded.value ? subMenuId : void 0,
           "aria-disabled": props.disabled || void 0,
           "data-state": isExpanded.value ? "open" : "closed",
           "data-tiger-context-menu-sub-trigger": "",
@@ -311,12 +329,20 @@ var ContextMenuSub = defineComponent({
           onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
+            if (props.disabled) return;
+            if (isExpanded.value) {
+              isOpenByKeyboard.value = false;
+              isHovered.value = false;
+              return;
+            }
+            isOpenByKeyboard.value = true;
+            isHovered.value = true;
           },
           onMouseenter: handleMouseEnter,
           onKeydown: handleTitleKeyDown
         },
         [
-          h("span", { class: "flex-1 text-left" }, props.title),
+          h("span", { class: "flex-1 text-start" }, props.title),
           h(
             "svg",
             {
@@ -351,6 +377,7 @@ var ContextMenuSub = defineComponent({
           h(
             "div",
             {
+              id: subMenuId,
               class: getContextMenuMenuClasses(),
               role: "menu"
             },
@@ -410,6 +437,10 @@ var ContextMenu = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    asChild: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:open", "open-change"],
@@ -421,7 +452,7 @@ var ContextMenu = defineComponent({
       injectContextMenuStyles();
       if (currentVisible.value) ensurePoint();
     });
-    const menuId = createContextMenuId();
+    const menuId = `tiger-context-menu-${useId()}`;
     const previousActiveElement = ref(null);
     const internalVisible = ref(props.defaultOpen);
     const currentVisible = computed(
@@ -452,6 +483,7 @@ var ContextMenu = defineComponent({
           });
         });
       } else {
+        hasExplicitPoint.value = false;
         restoreFocus(previousActiveElement.value);
         previousActiveElement.value = null;
       }
@@ -487,6 +519,10 @@ var ContextMenu = defineComponent({
       openAt(getContextMenuOpenPoint(null, triggerRef.value));
     };
     const handleMenuKeyDown = (event) => {
+      if (event.key === "Tab") {
+        setVisible(false);
+        return;
+      }
       if (floatingRef.value) {
         handleMenuNavigation(floatingRef.value, event);
       }
@@ -499,8 +535,8 @@ var ContextMenu = defineComponent({
       referenceRef: pointRef,
       floatingRef,
       enabled: currentVisible,
-      placement: props.placement,
-      offset: props.offset,
+      placement: () => props.placement,
+      offset: () => props.offset,
       portal: portalEnabled,
       dismissOnOutside: true,
       dismissOnEscape: true,
@@ -535,21 +571,24 @@ var ContextMenu = defineComponent({
         }
         triggerNodes.push(node);
       });
-      const trigger = h(
-        "div",
-        {
-          ref: triggerRef,
-          class: triggerClasses.value,
+      const triggerAria = getOverlayTriggerAria({
+        kind: "menu",
+        open: currentVisible.value,
+        controlsId: menuId,
+        disabled: props.disabled
+      });
+      const trigger = renderOverlayTrigger({
+        asChild: props.asChild,
+        child: triggerNodes.length === 1 ? triggerNodes[0] : triggerNodes,
+        setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+        className: triggerClasses.value,
+        disabled: props.disabled,
+        aria: { ...triggerAria, "data-tiger-context-menu-trigger": "" },
+        handlers: {
           onContextmenu: handleContextMenu,
-          onKeydown: handleTriggerKeyDown,
-          "aria-haspopup": "menu",
-          "aria-expanded": currentVisible.value,
-          "aria-controls": currentVisible.value ? menuId : void 0,
-          "data-state": currentVisible.value ? "open" : "closed",
-          "data-tiger-context-menu-trigger": ""
-        },
-        triggerNodes
-      );
+          onKeydown: handleTriggerKeyDown
+        }
+      });
       const pointNode = h("div", {
         ref: pointRef,
         style: pointStyle.value,

package/dist/chunk-CMYPAPF2.mjs

@@ -0,0 +1,94 @@
+// src/utils/overlay-trigger.ts
+import { cloneVNode, h, isVNode } from "vue";
+import {
+  classNames,
+  shouldMergeOverlayTriggerChild
+} from "@expcat/tigercat-core";
+function resolveOverlayTriggerElement(el) {
+  if (el == null) return null;
+  if (el instanceof HTMLElement) return el;
+  if (typeof el === "object" && el !== null && "$el" in el) {
+    const root = el.$el;
+    if (root instanceof HTMLElement) return root;
+  }
+  return null;
+}
+function assignOverlayTriggerRef(target, el) {
+  target.value = resolveOverlayTriggerElement(el);
+}
+function isSingleVNode(child) {
+  return isVNode(child);
+}
+function renderOverlayTrigger(options) {
+  const {
+    asChild,
+    child,
+    setTriggerRef,
+    className,
+    disabled,
+    extraChildren,
+    aria,
+    handlers,
+    preventDefaultOnClick
+  } = options;
+  const single = Array.isArray(child) && child.length === 1 ? child[0] : child;
+  const mergeable = isSingleVNode(single) && shouldMergeOverlayTriggerChild(asChild, single.type);
+  const onClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (preventDefaultOnClick) event.preventDefault();
+    handlers.onClick?.(event);
+  };
+  const mergedHandlers = {
+    onClick,
+    onKeydown: handlers.onKeydown ?? handlers.onKeyDown,
+    onMouseenter: handlers.onMouseenter ?? handlers.onMouseEnter,
+    onMouseleave: handlers.onMouseleave ?? handlers.onMouseLeave,
+    onFocusin: handlers.onFocusin ?? handlers.onFocus,
+    onFocusout: handlers.onFocusout ?? handlers.onBlur,
+    onContextmenu: handlers.onContextmenu ?? handlers.onContextMenu
+  };
+  for (const key of Object.keys(mergedHandlers)) {
+    if (mergedHandlers[key] == null) delete mergedHandlers[key];
+  }
+  if (mergeable && isSingleVNode(single)) {
+    return cloneVNode(single, {
+      ref: setTriggerRef,
+      class: classNames(
+        single.props?.class,
+        className
+      ),
+      disabled: disabled || void 0,
+      ...aria,
+      ...mergedHandlers
+    });
+  }
+  const children = [];
+  if (Array.isArray(child)) children.push(...child);
+  else if (child != null) children.push(child);
+  if (extraChildren) {
+    if (Array.isArray(extraChildren)) children.push(...extraChildren);
+    else children.push(extraChildren);
+  }
+  return h(
+    "button",
+    {
+      ref: setTriggerRef,
+      type: "button",
+      class: className,
+      disabled: disabled || void 0,
+      ...aria,
+      ...mergedHandlers
+    },
+    children
+  );
+}
+
+export {
+  resolveOverlayTriggerElement,
+  assignOverlayTriggerRef,
+  renderOverlayTrigger
+};

package/dist/chunk-CSRUF7G6.mjs

@@ -0,0 +1,291 @@
+import {
+  flattenElementVNodes
+} from "./chunk-FEVDV3I6.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Splitter.ts
+import { defineComponent, h, ref, computed, onMounted, onBeforeUnmount, useId } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  createDocumentDragSession,
+  devWarn,
+  formatSplitterGutterLabel,
+  getPaneStyle,
+  getSplitterContainerClasses,
+  getSplitterGutterClasses,
+  getSplitterGutterCssVars,
+  getSplitterGutterHandleClasses,
+  getSplitterGutterValueNow,
+  getSplitterKeyboardDelta,
+  getSplitterLabels,
+  getSplitterPointerDelta,
+  isSplitterRtl,
+  layoutPanePixels,
+  measureSplitterContainer,
+  mergeStyleValues,
+  panePixelsToRatios,
+  reconcileSplitterRatios,
+  resolveInitialPaneSizes,
+  resizePanes,
+  splitterPaneBaseClasses
+} from "@expcat/tigercat-core";
+var Splitter = defineComponent({
+  name: "TigerSplitter",
+  inheritAttrs: false,
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    sizes: {
+      type: Array,
+      default: void 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    gutterSize: {
+      type: Number,
+      default: 4
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:sizes", "resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getSplitterLabels(config.value.locale));
+    const instanceId = useId();
+    const containerRef = ref(null);
+    const containerSize = ref(0);
+    const ratioState = ref({ ratios: [], sizesKey: void 0 });
+    const draggingIndex = ref(-1);
+    const startPos = ref({ x: 0, y: 0 });
+    const startSizes = ref([]);
+    let dragSession = null;
+    let resizeObserver = null;
+    const rtl = computed(() => {
+      const attrDir = attrs.dir;
+      const dir = typeof attrDir === "string" ? attrDir : config.value.direction;
+      return isSplitterRtl(dir);
+    });
+    const collectPanes = () => flattenElementVNodes(slots.default?.());
+    const syncRatios = (count) => {
+      const available = containerSize.value > 0 ? containerSize.value - Math.max(0, count - 1) * props.gutterSize : 0;
+      ratioState.value = reconcileSplitterRatios(ratioState.value, count, props.sizes, available);
+    };
+    const applyMeasure = () => {
+      const size = measureSplitterContainer(containerRef.value, props.direction);
+      if (size > 0) containerSize.value = size;
+    };
+    const bindContainer = (el) => {
+      containerRef.value = el instanceof HTMLElement ? el : null;
+      applyMeasure();
+    };
+    onMounted(() => {
+      applyMeasure();
+      const el = containerRef.value;
+      if (el && typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => applyMeasure());
+        resizeObserver.observe(el);
+      }
+    });
+    const containerClasses = computed(
+      () => classNames(
+        getSplitterContainerClasses(props.direction, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const paneCount = () => ratioState.value.ratios.length;
+    const getMins = (count = paneCount()) => Array.from({ length: count }, () => props.min);
+    const getMaxes = (count = paneCount()) => Array.from({ length: count }, () => props.max);
+    const currentPixels = (liveSize = containerSize.value) => {
+      const ratios = ratioState.value.ratios;
+      if (liveSize > 0) {
+        return layoutPanePixels(ratios, liveSize, props.gutterSize, props.min, props.max);
+      }
+      return resolveInitialPaneSizes(
+        ratios.length,
+        0,
+        props.gutterSize,
+        props.sizes,
+        props.min,
+        props.max
+      ) ?? [];
+    };
+    const commitSizes = (nextPixels, index, phase) => {
+      ratioState.value = {
+        ratios: panePixelsToRatios(nextPixels),
+        sizesKey: ratioState.value.sizesKey
+      };
+      emit("update:sizes", nextPixels);
+      emit("resize", { index, sizes: nextPixels });
+      if (phase === "end" || phase === "keyboard") {
+        emit("resize-end", { index, sizes: nextPixels });
+      }
+    };
+    const cleanupDragSession = () => {
+      dragSession?.dispose();
+      dragSession = null;
+    };
+    const onPointerDown = (index, e) => {
+      if (props.disabled || e.button !== 0) return;
+      e.preventDefault();
+      cleanupDragSession();
+      const liveSize = measureSplitterContainer(containerRef.value, props.direction);
+      if (liveSize > 0) containerSize.value = liveSize;
+      draggingIndex.value = index;
+      startPos.value = { x: e.clientX, y: e.clientY };
+      startSizes.value = currentPixels(liveSize > 0 ? liveSize : containerSize.value);
+      emit("resize-start", { index, sizes: [...startSizes.value] });
+      dragSession = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget?.ownerDocument,
+        pointerId: e.pointerId,
+        pointerTarget: e.currentTarget instanceof Element ? e.currentTarget : null,
+        lockAxis: props.direction === "horizontal" ? "x" : "y",
+        onMove: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY, "move");
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY, "end");
+          draggingIndex.value = -1;
+          dragSession = null;
+        }
+      });
+    };
+    const applyDragResize = (currentX, currentY, phase) => {
+      if (draggingIndex.value < 0) return;
+      const delta = getSplitterPointerDelta(
+        props.direction,
+        startPos.value.x,
+        startPos.value.y,
+        currentX,
+        currentY,
+        rtl.value
+      );
+      const newSizes = resizePanes(
+        startSizes.value,
+        draggingIndex.value,
+        delta,
+        getMins(),
+        getMaxes()
+      );
+      if (newSizes) commitSizes(newSizes, draggingIndex.value, phase);
+    };
+    onBeforeUnmount(() => {
+      cleanupDragSession();
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    });
+    return () => {
+      const nodes = [];
+      const panes = collectPanes();
+      syncRatios(panes.length);
+      if (props.sizes && props.sizes.length !== panes.length && panes.length > 0) {
+        devWarn(
+          "Splitter.sizes.length",
+          `Splitter sizes length (${props.sizes.length}) does not match pane count (${panes.length}). Extra panes share remaining space.`
+        );
+      }
+      const ratios = ratioState.value.ratios;
+      const measured = containerSize.value > 0;
+      const pixels = measured ? layoutPanePixels(ratios, containerSize.value, props.gutterSize, props.min, props.max) : [];
+      panes.forEach((child, i) => {
+        const size = measured ? pixels[i] : null;
+        const paneStyle = getPaneStyle(size, props.direction, {
+          ratio: ratios[i] ?? 0,
+          measured
+        });
+        nodes.push(
+          h(
+            "div",
+            {
+              id: `${instanceId}-pane-${i}`,
+              class: splitterPaneBaseClasses,
+              style: paneStyle,
+              "data-pane-index": i
+            },
+            [child]
+          )
+        );
+        if (i < panes.length - 1) {
+          const isDragging = draggingIndex.value === i;
+          const labelledby = attrs["aria-labelledby"];
+          nodes.push(
+            h(
+              "div",
+              {
+                class: getSplitterGutterClasses(props.direction, isDragging, props.disabled),
+                role: "separator",
+                "aria-orientation": props.direction === "horizontal" ? "vertical" : "horizontal",
+                "aria-controls": `${instanceId}-pane-${i}`,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": getSplitterGutterValueNow(measured ? pixels : [], i),
+                "aria-label": typeof labelledby === "string" ? void 0 : formatSplitterGutterLabel(labels.value.gutterAriaLabel, i),
+                "aria-labelledby": typeof labelledby === "string" ? labelledby : void 0,
+                tabindex: props.disabled ? -1 : 0,
+                "data-gutter-index": i,
+                onPointerdown: (e) => onPointerDown(i, e),
+                onKeydown: (e) => {
+                  if (props.disabled) return;
+                  const delta = getSplitterKeyboardDelta(e.key, props.direction, rtl.value);
+                  if (delta == null) return;
+                  e.preventDefault();
+                  const newSizes = resizePanes(currentPixels(), i, delta, getMins(), getMaxes());
+                  if (newSizes) commitSizes(newSizes, i, "keyboard");
+                }
+              },
+              [
+                h("div", {
+                  class: getSplitterGutterHandleClasses(props.direction),
+                  "aria-hidden": "true"
+                })
+              ]
+            )
+          );
+        }
+      });
+      return h(
+        "div",
+        {
+          ...attrs,
+          ref: bindContainer,
+          class: containerClasses.value,
+          style: mergeStyleValues(attrs.style, {
+            ...props.style,
+            ...getSplitterGutterCssVars(props.gutterSize)
+          }),
+          "data-direction": props.direction
+        },
+        nodes
+      );
+    };
+  }
+});
+var Splitter_default = Splitter;
+
+export {
+  Splitter,
+  Splitter_default
+};