@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-OO27UB75.mjs

@@ -0,0 +1,222 @@
+import {
+  renderVueBodyTeleport,
+  useVueBackgroundInert,
+  useVueBodyScrollLock
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Loading.ts
+import { defineComponent, computed, h, ref, watch, onUnmounted } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getLoadingIndicator,
+  getLoadingLabel,
+  getLoadingTextClasses,
+  DEFAULT_LOADING_BACKGROUND,
+  loadingContainerBaseClasses,
+  loadingFullscreenBaseClasses,
+  loadingRegionBaseClasses,
+  loadingRegionOverlayClasses,
+  mergeStyleValues,
+  mergeTigerLocale,
+  normalizeSvgAttrs
+} from "@expcat/tigercat-core";
+function renderIndicator(node) {
+  if (node.kind === "items") {
+    return h(
+      "div",
+      { class: node.className, "aria-hidden": "true" },
+      node.items.map((item) => h("div", { class: item.className }))
+    );
+  }
+  return h(
+    "svg",
+    {
+      class: node.className,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: node.viewBox,
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    node.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
+  );
+}
+var Loading = defineComponent({
+  name: "TigerLoading",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "spinner"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    text: {
+      type: String,
+      default: void 0
+    },
+    spinning: {
+      type: Boolean,
+      default: true
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    delay: {
+      type: Number,
+      default: 0
+    },
+    background: {
+      type: String,
+      default: DEFAULT_LOADING_BACKGROUND
+    },
+    customColor: {
+      type: String,
+      default: void 0
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { attrs, slots }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const visible = ref(false);
+    const containerRef = ref(null);
+    let timer = null;
+    const hasRegion = computed(() => !!slots.default);
+    const showIndicator = computed(() => visible.value && props.spinning);
+    const showFullscreen = computed(
+      () => props.fullscreen && showIndicator.value && !hasRegion.value
+    );
+    const shouldLockBodyScroll = computed(() => showFullscreen.value && props.lockScroll);
+    useVueBodyScrollLock(shouldLockBodyScroll);
+    useVueBackgroundInert(showFullscreen, containerRef);
+    const clearTimer = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    watch(
+      () => props.delay,
+      (delay) => {
+        clearTimer();
+        if (delay <= 0) {
+          visible.value = true;
+          return;
+        }
+        visible.value = false;
+        timer = setTimeout(() => {
+          visible.value = true;
+        }, delay);
+      },
+      { immediate: true }
+    );
+    onUnmounted(() => {
+      clearTimer();
+    });
+    const indicator = computed(
+      () => getLoadingIndicator({
+        variant: props.variant,
+        size: props.size,
+        color: props.color,
+        customColor: props.customColor
+      })
+    );
+    const textClasses = computed(() => {
+      return getLoadingTextClasses(props.size, props.color, props.customColor);
+    });
+    const inlineStyle = computed(() => {
+      const baseStyle = {};
+      if (props.customColor) baseStyle.color = props.customColor;
+      if (props.fullscreen) baseStyle.backgroundColor = props.background;
+      return mergeStyleValues(baseStyle, attrs.style, props.style);
+    });
+    const overlayStyle = computed(() => {
+      const baseStyle = {};
+      if (props.customColor) baseStyle.color = props.customColor;
+      baseStyle.backgroundColor = props.background;
+      return mergeStyleValues(baseStyle, attrs.style, props.style);
+    });
+    const label = computed(() => getLoadingLabel(mergedLocale.value, props.text));
+    return () => {
+      const indicatorNode = renderIndicator(indicator.value);
+      const children = [indicatorNode];
+      if (props.text) {
+        children.push(h("div", { class: textClasses.value }, props.text));
+      }
+      const decorative = attrs["aria-hidden"] === true || attrs["aria-hidden"] === "true" || attrs.role === "presentation";
+      const statusProps = decorative ? { role: "presentation", "aria-hidden": true } : { role: "status", "aria-label": label.value, "aria-busy": true };
+      if (hasRegion.value) {
+        const content = slots.default?.();
+        return h("div", { class: classNames(loadingRegionBaseClasses, props.className) }, [
+          h("div", { inert: showIndicator.value || void 0 }, content),
+          showIndicator.value ? h(
+            "div",
+            {
+              ...attrs,
+              ref: containerRef,
+              class: classNames(loadingRegionOverlayClasses, coerceClassValue(attrs.class)),
+              style: overlayStyle.value,
+              ...statusProps
+            },
+            children
+          ) : null
+        ]);
+      }
+      if (!showIndicator.value) {
+        return null;
+      }
+      const loadingNode = h(
+        "div",
+        {
+          ...attrs,
+          ref: containerRef,
+          class: classNames(
+            props.fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: inlineStyle.value,
+          ...statusProps
+        },
+        children
+      );
+      if (props.fullscreen) {
+        return renderVueBodyTeleport([loadingNode]);
+      }
+      return loadingNode;
+    };
+  }
+});
+var Loading_default = Loading;
+
+export {
+  Loading,
+  Loading_default
+};

package/dist/{chunk-PWWWACHC.mjs → chunk-OY5PZMFI.mjs}

@@ -2,16 +2,19 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-PJQTRDIG.mjs";
+} from "./chunk-WUIS6PLE.mjs";
+import {
+  flattenSlotVNodes
+} from "./chunk-FEVDV3I6.mjs";
 import {
   Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-4KIZXFFG.mjs";
 import {
-  ButtonGroup
-} from "./chunk-Z2ZECCGD.mjs";
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/SplitButton.ts
-import { Comment, Fragment, defineComponent, h } from "vue";
+import { defineComponent, h } from "vue";
 import {
   DROPDOWN_CHEVRON_PATH,
   composeComponentClasses,
@@ -20,24 +23,13 @@ import {
   getSplitButtonRootClasses,
   getSplitButtonTriggerClasses,
   mergeStyleValues,
+  resolveLocaleText,
   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);
+  const flattened = flattenSlotVNodes(nodes);
   if (flattened.length === 0) return null;
   const existing = flattened.find((node) => node.type === DropdownMenu);
   if (existing) return existing;
@@ -47,7 +39,7 @@ function partitionDefaultSlot(nodes) {
   const primary = [];
   const menuItems = [];
   let menu = null;
-  for (const node of flattenVNodes(nodes)) {
+  for (const node of flattenSlotVNodes(nodes)) {
     if (node.type === DropdownMenu) {
       menu = node;
       continue;
@@ -63,11 +55,11 @@ function partitionDefaultSlot(nodes) {
   }
   return { primary, menu };
 }
-function createChevron(open) {
+function createChevron(open, size) {
   return h(
     "svg",
     {
-      class: getDropdownChevronClasses(open),
+      class: getDropdownChevronClasses(open, { tone: "current", size }),
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -84,119 +76,62 @@ 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"
+      default: void 0
     },
-    /**
-     * 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'
-     */
+    primaryAriaLabel: {
+      type: String,
+      default: void 0
+    },
     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
@@ -204,17 +139,22 @@ var SplitButton = defineComponent({
   },
   emits: ["click", "update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
     return () => {
       const attrsRecord = attrs;
       const {
         class: _class,
         style: _style,
+        type: attrType,
         ...restAttrs
       } = attrsRecord;
       const variant = resolveSplitButtonVariant(props.variant);
       const size = resolveSplitButtonSize(props.size);
-      const isDisabled = props.disabled || props.loading;
-      const triggerLabel = resolveSplitButtonTriggerAriaLabel(props.triggerAriaLabel);
+      const triggerLabel = resolveSplitButtonTriggerAriaLabel(
+        props.triggerAriaLabel,
+        resolveLocaleText("More options", config.value.locale?.common?.moreOptionsText)
+      );
+      const htmlType = props.htmlType ?? attrType ?? "button";
       const partitioned = partitionDefaultSlot(slots.default?.());
       const menuNode = wrapMenu(slots.menu?.()) ?? partitioned.menu;
       const primaryButton = h(
@@ -225,9 +165,10 @@ var SplitButton = defineComponent({
           disabled: props.disabled,
           loading: props.loading,
           danger: props.danger,
-          htmlType: props.htmlType,
+          htmlType,
           iconPosition: props.iconPosition,
           className: getSplitButtonPrimaryClasses({ block: props.block }),
+          "aria-label": props.primaryAriaLabel,
           "data-split-button-primary": "",
           onClick: (event) => emit("click", event)
         },
@@ -237,20 +178,27 @@ var SplitButton = defineComponent({
           "loading-icon": slots["loading-icon"]
         }
       );
-      const dropdown = h(
+      const dropdown = menuNode ? h(
         Dropdown,
         {
           trigger: "click",
           showArrow: false,
-          disabled: isDisabled,
+          asChild: true,
+          disabled: props.disabled,
           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)
+          "onUpdate:open": (visible) => {
+            if (props.loading) return;
+            emit("update:open", visible);
+          },
+          onOpenChange: (visible) => {
+            if (props.loading) return;
+            emit("open-change", visible);
+          }
         },
         {
           trigger: ({ open }) => h(
@@ -258,28 +206,29 @@ var SplitButton = defineComponent({
             {
               variant,
               size,
-              disabled: isDisabled,
+              disabled: props.disabled,
               danger: props.danger,
               htmlType: "button",
               className: getSplitButtonTriggerClasses({ size }),
               "aria-label": triggerLabel,
-              "aria-haspopup": "menu",
-              "aria-expanded": open,
-              "data-split-button-trigger": ""
+              "aria-disabled": props.loading || void 0,
+              "data-split-button-trigger": "",
+              onClick: (event) => {
+                if (props.loading) event.preventDefault();
+              }
             },
             {
-              default: () => slots.trigger?.({ open }) ?? createChevron(open)
+              default: () => slots.trigger?.({ open }) ?? createChevron(open, size)
             }
           ),
           default: () => menuNode
         }
-      );
+      ) : null;
       return h(
-        ButtonGroup,
+        "div",
         {
           ...restAttrs,
-          size,
-          className: composeComponentClasses(
+          class: composeComponentClasses(
             getSplitButtonRootClasses({
               block: props.block,
               className: props.className
@@ -287,9 +236,10 @@ var SplitButton = defineComponent({
             attrsRecord.class
           ),
           style: mergeStyleValues(attrsRecord.style, props.style),
+          role: "group",
           "data-split-button": ""
         },
-        { default: () => [primaryButton, dropdown] }
+        [primaryButton, dropdown]
       );
     };
   }

package/dist/{chunk-GSB4MNEX.mjs → chunk-PFE3YML2.mjs}

@@ -1,10 +1,19 @@
 // src/components/MessageRoot.ts
+import { isBrowser } from "@expcat/tigercat-core";
 var messageModulePromise = null;
+var resolvedMessage = null;
 function loadMessageModule() {
-  messageModulePromise ??= import("./components/Message.mjs");
+  messageModulePromise ??= import("./components/Message.mjs").then((module) => {
+    resolvedMessage = module.Message;
+    return module;
+  });
   return messageModulePromise;
 }
 function forwardMessage(method, options) {
+  if (!isBrowser()) return () => void 0;
+  if (resolvedMessage) {
+    return resolvedMessage[method](options);
+  }
   let closeMessage = null;
   let requestedClose = false;
   void loadMessageModule().then(({ Message: Message2 }) => {
@@ -41,6 +50,11 @@ var Message = {
     return forwardMessage("loading", options);
   },
   clear() {
+    if (!isBrowser()) return;
+    if (resolvedMessage) {
+      resolvedMessage.clear();
+      return;
+    }
     void loadMessageModule().then(({ Message: Message2 }) => {
       Message2.clear();
     });

package/dist/chunk-PJHLYJD5.mjs

@@ -0,0 +1,64 @@
+// src/components/Row.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getRowAlignJustifyVars,
+  getRowClasses,
+  getRowGutterStyleVars
+} from "@expcat/tigercat-core";
+var Row = defineComponent({
+  name: "TigerRow",
+  inheritAttrs: false,
+  props: {
+    gutter: {
+      type: [Number, Array],
+      default: 0
+    },
+    align: {
+      type: String,
+      default: "top"
+    },
+    justify: {
+      type: String,
+      default: "start"
+    },
+    wrap: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const rowStyle = computed(() => ({
+      ...getRowGutterStyleVars(props.gutter),
+      ...getRowAlignJustifyVars(props.align, props.justify)
+    }));
+    const rowClasses = computed(
+      () => classNames(
+        getRowClasses({ wrap: props.wrap }),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => {
+      const { class: _class, style: attrsStyle, ...rest } = attrs;
+      return h(
+        "div",
+        {
+          ...rest,
+          class: rowClasses.value,
+          style: [rowStyle.value, attrsStyle]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+export {
+  Row
+};