@expcat/tigercat-vue 2.0.4 → 2.1.0

package/dist/chunk-7DWWNFRP.mjs

@@ -0,0 +1,302 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu
+} from "./chunk-KROVW4AW.mjs";
+import {
+  Button
+} from "./chunk-YZBQ6IR7.mjs";
+import {
+  ButtonGroup
+} from "./chunk-Z2ZECCGD.mjs";
+
+// src/components/SplitButton.ts
+import { Comment, Fragment, defineComponent, h } from "vue";
+import {
+  DROPDOWN_CHEVRON_PATH,
+  composeComponentClasses,
+  getDropdownChevronClasses,
+  getSplitButtonPrimaryClasses,
+  getSplitButtonRootClasses,
+  getSplitButtonTriggerClasses,
+  mergeStyleValues,
+  resolveSplitButtonSize,
+  resolveSplitButtonTriggerAriaLabel,
+  resolveSplitButtonVariant
+} from "@expcat/tigercat-core";
+function flattenVNodes(nodes) {
+  const out = [];
+  for (const node of nodes ?? []) {
+    if (!node || node.type === Comment) continue;
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      out.push(...flattenVNodes(node.children));
+      continue;
+    }
+    out.push(node);
+  }
+  return out;
+}
+function wrapMenu(nodes) {
+  const flattened = flattenVNodes(nodes);
+  if (flattened.length === 0) return null;
+  const existing = flattened.find((node) => node.type === DropdownMenu);
+  if (existing) return existing;
+  return h(DropdownMenu, null, { default: () => flattened });
+}
+function partitionDefaultSlot(nodes) {
+  const primary = [];
+  const menuItems = [];
+  let menu = null;
+  for (const node of flattenVNodes(nodes)) {
+    if (node.type === DropdownMenu) {
+      menu = node;
+      continue;
+    }
+    if (node.type === DropdownItem) {
+      menuItems.push(node);
+      continue;
+    }
+    primary.push(node);
+  }
+  if (!menu && menuItems.length > 0) {
+    menu = h(DropdownMenu, null, { default: () => menuItems });
+  }
+  return { primary, menu };
+}
+function createChevron(open) {
+  return h(
+    "svg",
+    {
+      class: getDropdownChevronClasses(open),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    [h("path", { d: DROPDOWN_CHEVRON_PATH })]
+  );
+}
+var SplitButton = defineComponent({
+  name: "TigerSplitButton",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Visual variant applied to the primary action and the menu trigger
+     * @default 'primary'
+     */
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    /**
+     * Size applied to the primary action and the menu trigger
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Whether both the primary action and the menu trigger are disabled
+     */
+    disabled: Boolean,
+    /**
+     * Whether the primary action is in a loading state. Also disables the menu trigger.
+     */
+    loading: Boolean,
+    /**
+     * Whether to apply danger/destructive styling to both buttons
+     */
+    danger: Boolean,
+    /**
+     * Whether the split control should take the full width of its parent
+     */
+    block: Boolean,
+    /**
+     * HTML button type for the primary action
+     * @default 'button'
+     */
+    htmlType: {
+      type: String,
+      default: "button"
+    },
+    /**
+     * Position of the icon relative to the primary action text
+     * @default 'left'
+     */
+    iconPosition: {
+      type: String,
+      default: "left"
+    },
+    /**
+     * Whether the menu 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 the menu when a menu item is clicked
+     * @default true
+     */
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Render the menu into document.body (Teleport)
+     * @default true
+     */
+    portal: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Accessible name for the chevron menu trigger
+     * @default 'More options'
+     */
+    triggerAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Dropdown placement relative to the chevron trigger
+     * @default 'bottom-end'
+     */
+    placement: {
+      type: String,
+      default: "bottom-end"
+    },
+    /**
+     * Offset distance from the chevron trigger
+     * @default 4
+     */
+    offset: {
+      type: Number,
+      default: 4
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click", "update:open", "open-change"],
+  setup(props, { slots, emit, attrs }) {
+    return () => {
+      const attrsRecord = attrs;
+      const {
+        class: _class,
+        style: _style,
+        ...restAttrs
+      } = attrsRecord;
+      const variant = resolveSplitButtonVariant(props.variant);
+      const size = resolveSplitButtonSize(props.size);
+      const isDisabled = props.disabled || props.loading;
+      const triggerLabel = resolveSplitButtonTriggerAriaLabel(props.triggerAriaLabel);
+      const partitioned = partitionDefaultSlot(slots.default?.());
+      const menuNode = wrapMenu(slots.menu?.()) ?? partitioned.menu;
+      const primaryButton = h(
+        Button,
+        {
+          variant,
+          size,
+          disabled: props.disabled,
+          loading: props.loading,
+          danger: props.danger,
+          htmlType: props.htmlType,
+          iconPosition: props.iconPosition,
+          className: getSplitButtonPrimaryClasses({ block: props.block }),
+          "data-split-button-primary": "",
+          onClick: (event) => emit("click", event)
+        },
+        {
+          default: () => partitioned.primary,
+          icon: slots.icon,
+          "loading-icon": slots["loading-icon"]
+        }
+      );
+      const dropdown = h(
+        Dropdown,
+        {
+          trigger: "click",
+          showArrow: false,
+          disabled: isDisabled,
+          open: props.open,
+          defaultOpen: props.defaultOpen,
+          closeOnClick: props.closeOnClick,
+          portal: props.portal,
+          placement: props.placement,
+          offset: props.offset,
+          "onUpdate:open": (visible) => emit("update:open", visible),
+          onOpenChange: (visible) => emit("open-change", visible)
+        },
+        {
+          trigger: ({ open }) => h(
+            Button,
+            {
+              variant,
+              size,
+              disabled: isDisabled,
+              danger: props.danger,
+              htmlType: "button",
+              className: getSplitButtonTriggerClasses({ size }),
+              "aria-label": triggerLabel,
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              "data-split-button-trigger": ""
+            },
+            {
+              default: () => slots.trigger?.({ open }) ?? createChevron(open)
+            }
+          ),
+          default: () => menuNode
+        }
+      );
+      return h(
+        ButtonGroup,
+        {
+          ...restAttrs,
+          size,
+          className: composeComponentClasses(
+            getSplitButtonRootClasses({
+              block: props.block,
+              className: props.className
+            }),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-split-button": ""
+        },
+        { default: () => [primaryButton, dropdown] }
+      );
+    };
+  }
+});
+var SplitButton_default = SplitButton;
+
+export {
+  SplitButton,
+  SplitButton_default
+};

package/dist/chunk-AECXFT7D.mjs

@@ -0,0 +1,121 @@
+// src/components/Kbd.ts
+import { defineComponent, h } from "vue";
+import {
+  composeComponentClasses,
+  formatKbdSeparatorText,
+  getKbdParts,
+  getKbdRootClasses,
+  kbdKeyClasses,
+  kbdSeparatorClasses,
+  mergeStyleValues
+} from "@expcat/tigercat-core";
+function hasSlotContent(nodes) {
+  return Array.isArray(nodes) && nodes.length > 0;
+}
+var Kbd = defineComponent({
+  name: "TigerKbd",
+  inheritAttrs: false,
+  props: {
+    /**
+     * One key or a combo list. A string is a single key; an array is joined
+     * with `separator`. Combine with the default slot to append a final key.
+     */
+    keys: {
+      type: [String, Array],
+      default: void 0
+    },
+    /**
+     * Separator between combo keys
+     * @default '+'
+     */
+    separator: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Visual size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Visual variant. `default` reuses Tag default chrome; `subtle` is quieter.
+     * @default 'default'
+     */
+    variant: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const attrsRecord = attrs;
+      const parts = getKbdParts(props.keys, props.separator);
+      const slotNodes = slots.default?.();
+      const hasSlot = hasSlotContent(slotNodes);
+      const children = [];
+      for (const part of parts) {
+        if (part.type === "separator") {
+          children.push(
+            h("span", { class: kbdSeparatorClasses, "data-kbd-separator": "" }, ` ${part.value} `)
+          );
+        } else {
+          children.push(h("kbd", { class: kbdKeyClasses, "data-kbd-key": "" }, part.value));
+        }
+      }
+      if (hasSlot && slotNodes) {
+        if (parts.length > 0) {
+          children.push(
+            h(
+              "span",
+              { class: kbdSeparatorClasses, "data-kbd-separator": "" },
+              formatKbdSeparatorText(props.separator)
+            )
+          );
+        }
+        children.push(...slotNodes);
+      }
+      return h(
+        "kbd",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getKbdRootClasses({
+              size: props.size,
+              variant: props.variant,
+              className: props.className
+            }),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-kbd": "",
+          "data-kbd-size": props.size,
+          "data-kbd-variant": props.variant
+        },
+        children
+      );
+    };
+  }
+});
+var Kbd_default = Kbd;
+
+export {
+  Kbd,
+  Kbd_default
+};