@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-W4A6L2TC.mjs

@@ -0,0 +1,161 @@
+// src/components/Card.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getCardClasses,
+  getCardCoverWrapperClasses,
+  resolveCardPadding,
+  resolveCardRoot,
+  handleCardActivation,
+  cardHeaderClasses,
+  cardFooterClasses,
+  cardCoverClasses,
+  cardActionsClasses,
+  cardDirectionClasses,
+  cardHorizontalBodyClasses
+} from "@expcat/tigercat-core";
+var Card = defineComponent({
+  name: "TigerCard",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "default"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    padding: {
+      type: [Boolean, String],
+      default: void 0
+    },
+    hoverable: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    cover: {
+      type: String,
+      default: void 0
+    },
+    coverAlt: {
+      type: String,
+      default: ""
+    },
+    href: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const paddingClass = computed(() => resolveCardPadding(props.size, props.padding));
+    const isHorizontal = computed(() => props.direction === "horizontal");
+    return () => {
+      const attrsRecord = attrs;
+      const hasCover = Boolean(slots.cover) || Boolean(props.cover);
+      const nestedInteractive = Boolean(slots.actions);
+      const clickable = typeof attrsRecord.onClick === "function" || Boolean(props.href?.trim());
+      const root = resolveCardRoot({
+        href: props.href,
+        clickable,
+        nestedInteractive
+      });
+      const cardClasses = classNames(
+        getCardClasses(props.variant, props.hoverable, clickable),
+        cardDirectionClasses[props.direction],
+        !hasCover && paddingClass.value,
+        props.className,
+        coerceClassValue(attrsRecord.class)
+      );
+      const coverNode = hasCover ? h(
+        "div",
+        {
+          class: getCardCoverWrapperClasses(isHorizontal.value),
+          "data-tiger-card-cover": ""
+        },
+        slots.cover ? slots.cover() : [
+          h("img", {
+            src: props.cover,
+            alt: props.coverAlt,
+            class: cardCoverClasses
+          })
+        ]
+      ) : null;
+      const bodyChildren = [
+        slots.header ? h("div", { class: cardHeaderClasses }, slots.header()) : null,
+        slots.default ? h("div", {}, slots.default()) : null,
+        slots.footer ? h("div", { class: cardFooterClasses }, slots.footer()) : null,
+        slots.actions ? h(
+          "div",
+          {
+            class: classNames(cardActionsClasses, cardFooterClasses),
+            onClick: (event) => event.stopPropagation(),
+            onKeydown: (event) => event.stopPropagation()
+          },
+          slots.actions()
+        ) : null
+      ];
+      const content = hasCover ? h(
+        "div",
+        {
+          class: classNames(cardHorizontalBodyClasses, paddingClass.value),
+          "data-tiger-card-body": ""
+        },
+        bodyChildren
+      ) : isHorizontal.value ? h("div", { class: cardHorizontalBodyClasses, "data-tiger-card-body": "" }, bodyChildren) : bodyChildren;
+      const onKeydown = (event) => {
+        const user = attrsRecord.onKeydown;
+        if (typeof user === "function") {
+          ;
+          user(event);
+        }
+        if (event.defaultPrevented || root.tag === "a") return;
+        if (root.role) {
+          handleCardActivation(event, () => {
+            const click = attrsRecord.onClick;
+            if (typeof click === "function") {
+              ;
+              click(event);
+              return;
+            }
+            if (props.href) window.location.assign(props.href);
+          });
+        }
+      };
+      return h(
+        root.tag,
+        {
+          ...attrs,
+          class: cardClasses,
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          href: root.tag === "a" ? props.href : void 0,
+          role: root.role,
+          tabindex: root.tabIndex,
+          "data-tiger-card": "",
+          onKeydown
+        },
+        [coverNode, content]
+      );
+    };
+  }
+});
+var Card_default = Card;
+
+export {
+  Card,
+  Card_default
+};

package/dist/{chunk-PJQTRDIG.mjs → chunk-WUIS6PLE.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/Dropdown.ts
 import {
@@ -16,7 +20,8 @@ import {
   onMounted,
   nextTick,
   cloneVNode,
-  watch
+  watch,
+  useId
 } from "vue";
 import {
   classNames,
@@ -32,16 +37,17 @@ import {
   DROPDOWN_ENTER_CLASS,
   handleMenuNavigation,
   focusFirstMenuItem,
-  captureActiveElement,
-  restoreFocus
+  restoreFocus,
+  createFloatingHoverDelayController,
+  DEFAULT_DROPDOWN_TRIGGER,
+  getOverlayTriggerAria,
+  getOverlayTriggerKeyboardAction,
+  devWarn
 } from "@expcat/tigercat-core";
 var DropdownMenu = defineComponent({
   name: "TigerDropdownMenu",
   inheritAttrs: false,
   props: {
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
@@ -71,6 +77,7 @@ var DropdownMenu = defineComponent({
           ...restAttrs,
           class: menuClasses.value,
           role: "menu",
+          "data-tiger-dropdown-menu": "",
           style: mergedStyle.value
         },
         slots.default?.()
@@ -78,41 +85,31 @@ var DropdownMenu = defineComponent({
     };
   }
 });
-var dropdownIdCounter = 0;
-var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
 var DropdownItem = defineComponent({
   name: "TigerDropdownItem",
   inheritAttrs: false,
   props: {
-    /**
-     * Whether the item is disabled
-     * @default false
-     */
     disabled: {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether the item is divided from previous item
-     * @default false
-     */
     divided: {
       type: Boolean,
       default: false
     },
-    /**
-     * When set, overrides the parent Dropdown `closeOnClick`.
-     * Omitted inherits the parent. Must default to undefined (not false): a
-     * bare Boolean would coerce omitted to false and break parent inheritance.
-     */
     closeOnClick: {
       type: Boolean,
       default: void 0
     },
-    /**
-     * Additional CSS classes
-     */
+    href: {
+      type: String,
+      default: void 0
+    },
+    itemKey: {
+      type: [String, Number],
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -128,6 +125,9 @@ var DropdownItem = defineComponent({
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
     const context = inject(DropdownContextKey, null);
+    if (context == null) {
+      devWarn("DropdownItem.orphan", "DropdownItem must be used inside Dropdown.");
+    }
     const handleClick = (event) => {
       if (props.disabled) {
         event.preventDefault();
@@ -153,16 +153,17 @@ var DropdownItem = 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
         },
@@ -175,81 +176,42 @@ var Dropdown = defineComponent({
   name: "TigerDropdown",
   inheritAttrs: false,
   props: {
-    /**
-     * Trigger mode - click or hover
-     * @default 'hover'
-     */
     trigger: {
       type: String,
-      default: "hover"
+      default: DEFAULT_DROPDOWN_TRIGGER
     },
-    /**
-     * Dropdown placement relative to trigger
-     * @default 'bottom-start'
-     */
     placement: {
       type: String,
       default: "bottom-start"
     },
-    /**
-     * Offset distance from trigger element
-     * @default 4
-     */
     offset: {
       type: Number,
       default: 4
     },
-    /**
-     * Whether the dropdown is disabled
-     * @default false
-     */
     disabled: {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether the dropdown is open (controlled mode)
-     */
     open: {
       type: Boolean,
       default: void 0
     },
-    /**
-     * Default open state (uncontrolled mode)
-     * @default false
-     */
     defaultOpen: {
       type: Boolean,
       default: false
     },
-    /**
-     * Whether to close dropdown on menu item click
-     * @default true
-     */
     closeOnClick: {
       type: Boolean,
       default: true
     },
-    /**
-     * Whether to show the dropdown arrow/chevron indicator
-     * @default true
-     */
     showArrow: {
       type: Boolean,
       default: true
     },
-    /**
-     * Render the menu into document.body (Teleport) so it is not clipped or
-     * covered by overflow/sticky ancestors (e.g. fixed table columns).
-     * @default true
-     */
     portal: {
       type: Boolean,
       default: true
     },
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
@@ -257,6 +219,10 @@ var Dropdown = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    asChild: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:open", "open-change"],
@@ -265,7 +231,7 @@ var Dropdown = defineComponent({
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
     onMounted(() => injectDropdownStyles());
-    const menuId = createDropdownMenuId();
+    const menuId = `tiger-dropdown-menu-${useId()}`;
     const previousActiveElement = ref(null);
     const internalVisible = ref(props.defaultOpen);
     const currentVisible = computed(
@@ -274,10 +240,22 @@ var Dropdown = defineComponent({
     const containerRef = ref(null);
     const triggerRef = ref(null);
     const floatingRef = ref(null);
+    const openIntent = ref("menu");
+    const skipRestore = ref(false);
+    const hoverController = createFloatingHoverDelayController({
+      show: () => {
+        openIntent.value = "hover";
+        setVisible(true);
+      },
+      hide: () => {
+        skipRestore.value = true;
+        setVisible(false);
+      }
+    });
     const setVisible = (visible) => {
       if (props.disabled && visible) return;
       if (visible && !currentVisible.value) {
-        previousActiveElement.value = captureActiveElement();
+        previousActiveElement.value = triggerRef.value;
       }
       if (props.open === void 0) {
         internalVisible.value = visible;
@@ -285,56 +263,88 @@ var Dropdown = defineComponent({
       emit("update:open", visible);
       emit("open-change", visible);
       if (visible) {
+        if (openIntent.value === "hover") return;
         nextTick(() => {
-          if (floatingRef.value) {
-            focusFirstMenuItem(floatingRef.value);
-          }
+          if (floatingRef.value) focusFirstMenuItem(floatingRef.value);
         });
-      } else {
+        return;
+      }
+      hoverController.cancel();
+      if (!skipRestore.value) {
         restoreFocus(previousActiveElement.value);
-        previousActiveElement.value = null;
       }
+      previousActiveElement.value = null;
+      skipRestore.value = false;
     };
+    watch(currentVisible, (visible) => {
+      if (!visible || openIntent.value === "hover") return;
+      nextTick(() => {
+        if (floatingRef.value) focusFirstMenuItem(floatingRef.value);
+      });
+    });
     const handleItemClick = () => {
+      skipRestore.value = false;
       setVisible(false);
     };
-    let hoverTimer = null;
     const handleMouseEnter = () => {
-      if (props.trigger !== "hover") return;
-      if (hoverTimer) clearTimeout(hoverTimer);
-      hoverTimer = setTimeout(() => setVisible(true), 100);
+      if (props.trigger !== "hover" || props.disabled) return;
+      hoverController.enter();
     };
     const handleMouseLeave = () => {
       if (props.trigger !== "hover") return;
-      if (hoverTimer) clearTimeout(hoverTimer);
-      hoverTimer = setTimeout(() => setVisible(false), 150);
+      hoverController.leave();
     };
     const handleClick = () => {
-      if (props.trigger !== "click") return;
+      if (props.disabled) return;
+      if (triggerRef.value?.getAttribute("aria-disabled") === "true") return;
+      if (props.trigger === "hover") hoverController.cancel();
+      openIntent.value = "menu";
       setVisible(!currentVisible.value);
     };
+    const handleTriggerKeyDown = (event) => {
+      const keyboardEvent = event;
+      const action = getOverlayTriggerKeyboardAction(keyboardEvent, {
+        kind: "menu",
+        open: currentVisible.value,
+        disabled: props.disabled
+      });
+      if (!action) return;
+      keyboardEvent.preventDefault();
+      hoverController.cancel();
+      if (action === "close") {
+        setVisible(false);
+        return;
+      }
+      openIntent.value = "menu";
+      if (!currentVisible.value) setVisible(true);
+    };
     const handleMenuKeyDown = (event) => {
+      if (event.key === "Tab") {
+        skipRestore.value = true;
+        setVisible(false);
+        return;
+      }
       if (floatingRef.value) {
         handleMenuNavigation(floatingRef.value, event);
       }
     };
-    const clickOutsideEnabled = computed(() => props.trigger === "click");
     const portalEnabled = computed(() => props.portal);
     const overlay = useVueAnchoredOverlay({
       referenceRef: triggerRef,
       floatingRef,
       enabled: currentVisible,
-      placement: props.placement,
-      offset: props.offset,
+      placement: () => props.placement,
+      offset: () => props.offset,
       portal: portalEnabled,
       containerRef,
-      dismissOnOutside: clickOutsideEnabled,
+      dismissOnOutside: true,
       dismissOnEscape: true,
-      onDismiss: () => setVisible(false)
-    });
-    onBeforeUnmount(() => {
-      if (hoverTimer) clearTimeout(hoverTimer);
+      onDismiss: (reason) => {
+        skipRestore.value = reason !== "escape";
+        setVisible(false);
+      }
     });
+    onBeforeUnmount(() => hoverController.dispose());
     const containerClasses = computed(
       () => classNames(
         getDropdownContainerClasses(),
@@ -360,26 +370,33 @@ var Dropdown = defineComponent({
     );
     provide(DropdownContextKey, dropdownContext);
     return () => {
-      const defaultSlot = slots.default?.();
+      const defaultSlot = slots.default?.() ?? [];
       const triggerSlot = slots.trigger?.({ open: currentVisible.value });
-      if ((!defaultSlot || defaultSlot.length === 0) && (!triggerSlot || triggerSlot.length === 0)) {
-        return null;
-      }
       let triggerNode = null;
       let menuNode = null;
+      let sawTrigger = false;
       if (triggerSlot && triggerSlot.length > 0) {
-        triggerNode = triggerSlot.length === 1 ? triggerSlot[0] : h("span", triggerSlot);
+        triggerNode = triggerSlot.length === 1 ? triggerSlot[0] : triggerSlot;
+        sawTrigger = true;
       }
-      defaultSlot?.forEach((node) => {
+      defaultSlot.forEach((node) => {
         if (node.type === DropdownMenu) {
           menuNode = node;
           return;
         }
-        if (!triggerSlot) {
-          triggerNode = node;
+        if (sawTrigger) {
+          if (!slots.trigger) {
+            devWarn(
+              "Dropdown.extraTrigger",
+              "Dropdown only uses the first non-menu child as the trigger."
+            );
+          }
+          return;
         }
+        triggerNode = node;
+        sawTrigger = true;
       });
-      const chevronNode = props.showArrow ? h(
+      const chevronNode = props.showArrow && !props.asChild ? h(
         "svg",
         {
           class: getDropdownChevronClasses(currentVisible.value),
@@ -393,21 +410,27 @@ var Dropdown = defineComponent({
         },
         [h("path", { d: DROPDOWN_CHEVRON_PATH })]
       ) : null;
-      const trigger = triggerNode ? 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: triggerNode,
+        setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+        className: props.asChild ? void 0 : triggerClasses.value,
+        disabled: props.disabled,
+        extraChildren: chevronNode,
+        aria: triggerAria,
+        handlers: {
           onClick: handleClick,
+          onKeydown: handleTriggerKeyDown,
           onMouseenter: handleMouseEnter,
-          onMouseleave: handleMouseLeave,
-          "aria-haspopup": "menu",
-          "aria-expanded": currentVisible.value,
-          "aria-controls": currentVisible.value ? menuId : void 0,
-          "data-state": currentVisible.value ? "open" : "closed"
-        },
-        [triggerNode, chevronNode]
-      ) : null;
+          onMouseleave: handleMouseLeave
+        }
+      });
       const menuWrapper = menuNode ? h(
         "div",
         {