@expcat/tigercat-vue 2.0.19 → 2.1.1

package/dist/{chunk-XLNK3Z2P.mjs → chunk-POWDTOMF.mjs}

@@ -10,7 +10,7 @@ import { defineComponent, computed, ref, watch, h, inject, getCurrentInstance }
 import {
   classNames,
   coerceClassValue,
-  getInputClasses,
+  getInputFieldClasses,
   getInputWrapperClasses,
   getInputAffixClasses,
   getInputErrorClasses,
@@ -177,14 +177,18 @@ var Input = defineComponent({
         }
       }
     );
-    watch([effectiveStatus, effectiveShakeTrigger], ([newStatus]) => {
-      if (newStatus === "error" && wrapperRef.value) {
-        const el = wrapperRef.value;
-        el.classList.remove(SHAKE_CLASS);
-        void el.offsetWidth;
-        el.classList.add(SHAKE_CLASS);
-      }
-    });
+    watch(
+      [effectiveStatus, effectiveShakeTrigger],
+      ([newStatus]) => {
+        if (newStatus === "error" && wrapperRef.value) {
+          const el = wrapperRef.value;
+          el.classList.remove(SHAKE_CLASS);
+          void el.offsetWidth;
+          el.classList.add(SHAKE_CLASS);
+        }
+      },
+      { flush: "post" }
+    );
     const handleAnimationEnd = () => {
       wrapperRef.value?.classList.remove(SHAKE_CLASS);
     };
@@ -195,14 +199,6 @@ var Input = defineComponent({
     const activeError = computed(
       () => effectiveStatus.value === "error" && !!effectiveErrorMessage.value
     );
-    const inputClasses = computed(
-      () => getInputClasses({
-        size: effectiveSize.value,
-        status: effectiveStatus.value,
-        hasPrefix: hasPrefix.value,
-        hasSuffix: hasSuffix.value
-      })
-    );
     const effectiveType = computed(() => {
       if (props.showPassword && props.type === "password") {
         return passwordVisible.value ? "text" : "password";
@@ -233,55 +229,56 @@ var Input = defineComponent({
       const currentValStr = String(localValue.value);
       const showClear = props.clearable && !props.disabled && !props.readonly && currentValStr.length > 0;
       const showPasswordToggle = props.showPassword && props.type === "password" && !props.disabled;
+      const dualSuffix = showClear && showPasswordToggle;
+      const inputClasses = getInputFieldClasses({
+        size: effectiveSize.value,
+        status: effectiveStatus.value,
+        hasPrefix: hasPrefix.value,
+        hasSuffix: hasSuffix.value,
+        hasDualSuffix: dualSuffix
+      });
       const suffixNodes = [];
-      if (activeError.value) {
+      if (showClear) {
+        suffixNodes.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: getInputClearButtonClasses(
+                effectiveSize.value,
+                dualSuffix ? { offset: true } : void 0
+              ),
+              onClick: handleClear,
+              "aria-label": "Clear input",
+              tabindex: -1
+            },
+            "\u2715"
+          )
+        );
+      }
+      if (showPasswordToggle) {
+        suffixNodes.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: getInputPasswordToggleClasses(effectiveSize.value),
+              onClick: togglePasswordVisibility,
+              "aria-label": passwordVisible.value ? "Hide password" : "Show password",
+              tabindex: -1
+            },
+            passwordVisible.value ? "\u{1F648}" : "\u{1F441}"
+          )
+        );
+      }
+      if (!showClear && !showPasswordToggle && hasSuffix.value) {
         suffixNodes.push(
           h(
             "div",
-            { id: errorMsgId, class: getInputErrorClasses(effectiveSize.value) },
-            effectiveErrorMessage.value
+            { class: getInputAffixClasses("suffix", effectiveSize.value) },
+            slots.suffix ? slots.suffix() : props.suffix
           )
         );
-      } else {
-        if (showClear) {
-          suffixNodes.push(
-            h(
-              "button",
-              {
-                type: "button",
-                class: getInputClearButtonClasses(effectiveSize.value),
-                onClick: handleClear,
-                "aria-label": "Clear input",
-                tabindex: -1
-              },
-              "\u2715"
-            )
-          );
-        }
-        if (showPasswordToggle) {
-          suffixNodes.push(
-            h(
-              "button",
-              {
-                type: "button",
-                class: getInputPasswordToggleClasses(effectiveSize.value),
-                onClick: togglePasswordVisibility,
-                "aria-label": passwordVisible.value ? "Hide password" : "Show password",
-                tabindex: -1
-              },
-              passwordVisible.value ? "\u{1F648}" : "\u{1F441}"
-            )
-          );
-        }
-        if (!showClear && !showPasswordToggle && hasSuffix.value) {
-          suffixNodes.push(
-            h(
-              "div",
-              { class: getInputAffixClasses("suffix", effectiveSize.value) },
-              slots.suffix ? slots.suffix() : props.suffix
-            )
-          );
-        }
       }
       const wrapperChildren = [
         hasPrefix.value && h(
@@ -292,7 +289,7 @@ var Input = defineComponent({
         h("input", {
           ...restAttrs,
           ref: inputRef,
-          class: inputClasses.value,
+          class: inputClasses,
           type: effectiveType.value,
           value: localValue.value,
           placeholder: props.placeholder,
@@ -314,29 +311,41 @@ var Input = defineComponent({
         }),
         ...suffixNodes
       ];
-      const nodes = [
-        h(
-          "div",
-          {
-            ref: wrapperRef,
-            class: classNames(
-              getInputWrapperClasses(),
-              props.className,
-              coerceClassValue(attrClass)
-            ),
-            style: [attrStyle, props.style],
-            onAnimationend: handleAnimationEnd
-          },
-          wrapperChildren
-        )
-      ];
+      const chromeNode = h(
+        "div",
+        {
+          ref: wrapperRef,
+          class: classNames(
+            getInputWrapperClasses(effectiveStatus.value),
+            props.className,
+            coerceClassValue(attrClass)
+          ),
+          style: [attrStyle, props.style],
+          onAnimationend: handleAnimationEnd
+        },
+        wrapperChildren
+      );
+      const extras = [];
+      if (activeError.value) {
+        extras.push(
+          h(
+            "div",
+            {
+              id: errorMsgId,
+              class: getInputErrorClasses(effectiveSize.value),
+              "aria-live": "polite"
+            },
+            effectiveErrorMessage.value
+          )
+        );
+      }
       if (props.showCount) {
         const count = currentValStr.length;
         const isOver = props.maxLength !== void 0 && count > props.maxLength;
         const countText = props.maxLength !== void 0 ? `${count} / ${props.maxLength}` : `${count}`;
-        nodes.push(h("div", { class: getInputCountClasses(isOver) }, countText));
+        extras.push(h("div", { class: getInputCountClasses(isOver) }, countText));
       }
-      return nodes.length === 1 ? nodes[0] : h("div", null, nodes);
+      return extras.length === 0 ? chromeNode : h("div", { class: "w-full" }, [chromeNode, ...extras]);
     };
   }
 });

package/dist/{chunk-AXDBME5A.mjs → chunk-PSGVG4TN.mjs}

@@ -5,9 +5,11 @@ import {
   coerceClassValue,
   getSplitterContainerClasses,
   getSplitterGutterClasses,
+  getSplitterGutterCssVars,
   getSplitterGutterHandleClasses,
   getPaneStyle,
   resizePanes,
+  resolveInitialPaneSizes,
   createDocumentDragSession
 } from "@expcat/tigercat-core";
 var Splitter = defineComponent({
@@ -54,29 +56,41 @@ var Splitter = defineComponent({
     const startPos = ref(0);
     const startSizes = ref([]);
     let dragSession = null;
-    watch(
-      () => props.sizes,
-      (newSizes) => {
-        if (newSizes) paneSizes.value = [...newSizes];
-      },
-      { immediate: true }
-    );
-    const initSizes = () => {
-      if (props.sizes && props.sizes.length > 0) {
-        paneSizes.value = [...props.sizes];
-        return;
-      }
+    const getPaneCount = () => {
+      if (props.sizes && props.sizes.length > 0) return props.sizes.length;
       const el = containerRef.value;
-      if (!el) return;
-      const slotChildren = slots.default?.() || [];
-      const paneCount = slotChildren.length;
+      if (!el) return 0;
+      let n = 0;
+      for (let i = 0; i < el.children.length; i++) {
+        if (el.children[i].classList.contains("tiger-splitter-pane")) n++;
+      }
+      return n;
+    };
+    const resolveAndApplySizes = () => {
+      const paneCount = getPaneCount();
       if (paneCount === 0) return;
-      const totalGutter = (paneCount - 1) * props.gutterSize;
-      const total = props.direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
-      const eachSize = total / paneCount;
-      paneSizes.value = Array.from({ length: paneCount }, () => eachSize);
+      const el = containerRef.value;
+      const containerSize = el ? props.direction === "horizontal" ? el.clientWidth : el.clientHeight : 0;
+      const resolved = resolveInitialPaneSizes(
+        paneCount,
+        containerSize,
+        props.gutterSize,
+        props.sizes,
+        props.min,
+        props.max
+      );
+      if (resolved) {
+        paneSizes.value = resolved;
+      }
     };
-    onMounted(initSizes);
+    watch(
+      () => [props.sizes, props.min, props.max, props.gutterSize, props.direction],
+      () => {
+        resolveAndApplySizes();
+      },
+      { immediate: true, deep: true }
+    );
+    onMounted(resolveAndApplySizes);
     const containerClasses = computed(
       () => classNames(
         getSplitterContainerClasses(props.direction, props.className),
@@ -196,7 +210,10 @@ var Splitter = defineComponent({
         {
           ref: containerRef,
           class: containerClasses.value,
-          style: props.style,
+          style: {
+            ...props.style,
+            ...getSplitterGutterCssVars(props.gutterSize)
+          },
           "data-direction": props.direction
         },
         nodes

package/dist/chunk-PWWWACHC.mjs

@@ -0,0 +1,302 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu
+} from "./chunk-PJQTRDIG.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-UUWTKCMY.mjs → chunk-QWLD5FMJ.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-LPZBXTJ6.mjs";
+} from "./chunk-SAC4PAG3.mjs";
 
 // src/components/ImageGroup.ts
 import { defineComponent, h, ref, provide, onBeforeUnmount } from "vue";

package/dist/{chunk-ALIUAGJO.mjs → chunk-QZLOF36M.mjs}

@@ -22,6 +22,7 @@ import {
   getAnchorLinkClasses,
   getAnchorLinkListClasses,
   createAnchorObserver,
+  createProgrammaticScrollLock,
   scrollToAnchor
 } from "@expcat/tigercat-core";
 var AnchorContextKey = /* @__PURE__ */ Symbol("AnchorContext");
@@ -200,9 +201,8 @@ var Anchor = defineComponent({
     const links = ref([]);
     const anchorRef = ref(null);
     const inkRef = ref(null);
-    const isScrolling = ref(false);
-    let scrollTimeoutId = null;
     const getContainer = () => props.getContainer();
+    const scrollLock = createProgrammaticScrollLock(getContainer);
     const scrollOffset = computed(() => props.targetOffset ?? props.offsetTop);
     const registerLink = (href) => {
       if (href && !links.value.includes(href)) {
@@ -219,9 +219,10 @@ var Anchor = defineComponent({
       const root = container === window ? null : container;
       stopObserver = createAnchorObserver(links.value, {
         offsetTop: scrollOffset.value,
+        bounds: props.bounds,
         root,
         onChange: (newActiveLink) => {
-          if (isScrolling.value) return;
+          if (scrollLock.isLocked()) return;
           const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
           if (finalActiveLink !== activeLink.value) {
             activeLink.value = finalActiveLink;
@@ -235,14 +236,9 @@ var Anchor = defineComponent({
     };
     const handleLinkClick = (href, event) => {
       emit("click", event, href);
-      isScrolling.value = true;
+      scrollLock.lock();
       activeLink.value = href;
       scrollTo(href);
-      if (scrollTimeoutId !== null) clearTimeout(scrollTimeoutId);
-      scrollTimeoutId = setTimeout(() => {
-        isScrolling.value = false;
-        scrollTimeoutId = null;
-      }, 500);
     };
     const updateInkPosition = () => {
       if (!inkRef.value || !anchorRef.value || !activeLink.value) {
@@ -274,14 +270,12 @@ var Anchor = defineComponent({
         setTimeout(updateInkPosition, 0);
       });
     });
-    watch([links, scrollOffset, () => props.getContainer], () => {
+    watch([links, scrollOffset, () => props.getContainer, () => props.bounds], () => {
       nextTick(() => setupObserver());
     });
     onBeforeUnmount(() => {
       stopObserver?.();
-      if (scrollTimeoutId !== null) {
-        clearTimeout(scrollTimeoutId);
-      }
+      scrollLock.dispose();
     });
     const wrapperClasses = computed(() => {
       return classNames(