@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-6E73XACM.mjs → chunk-Q6OYCTQO.mjs}

@@ -6,78 +6,42 @@ var Loading = defineComponent({
   name: "TigerLoading",
   inheritAttrs: false,
   props: {
-    /**
-     * Loading spinner variant - determines animation style
-     * @default 'spinner'
-     */
     variant: {
       type: String,
       default: "spinner"
     },
-    /**
-     * Size of the loading indicator
-     * @default 'md'
-     */
     size: {
       type: String,
       default: "md"
     },
-    /**
-     * Color variant
-     * @default 'primary'
-     */
     color: {
       type: String,
       default: "primary"
     },
-    /**
-     * Custom text to display below the spinner
-     */
     text: {
       type: String,
       default: void 0
     },
-    /**
-     * Whether to show loading as fullscreen overlay
-     * @default false
-     */
     fullscreen: {
       type: Boolean,
       default: false
     },
-    /**
-     * Delay before showing the loading indicator (ms)
-     * @default 0
-     */
     delay: {
       type: Number,
       default: 0
     },
-    /**
-     * Custom background color (for fullscreen mode)
-     * @default 'rgba(255, 255, 255, 0.9)'
-     */
     background: {
       type: String,
       default: "rgba(255, 255, 255, 0.9)"
     },
-    /**
-     * Custom spinner color (overrides color variant)
-     */
     customColor: {
       type: String,
       default: void 0
     },
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
-      default: ""
+      default: void 0
     },
-    /**
-     * Custom styles
-     */
     style: {
       type: Object,
       default: void 0

package/dist/{chunk-L5QECL5P.mjs → chunk-QERCB3HM.mjs}

@@ -1,7 +1,15 @@
-import { FormContextKey } from './chunk-TTZDVYGX.mjs';
+import { FormContextKey } from './chunk-5XY7MXWC.mjs';
 import { defineComponent, inject, computed, ref, watch, onUnmounted, isVNode, cloneVNode, h } from 'vue';
-import { getFieldError, getFormItemClasses, getFormItemLabelClasses, getFormItemContentClasses, classNames, getFormItemErrorClasses, getFormItemFieldClasses, getFormItemAsteriskClasses, getFormItemAsteriskStyle } from '@expcat/tigercat-core';
+import { getFieldError, getFormItemClasses, getFormItemLabelClasses, getFormItemContentClasses, classNames, getFormItemErrorClasses, getFormItemFieldClasses, getFormItemAsteriskClasses } from '@expcat/tigercat-core';
 
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
 var formItemIdCounter = 0;
 var FormItem = defineComponent({
   name: "TigerFormItem",
@@ -61,6 +69,8 @@ var FormItem = defineComponent({
     const formContextRef = inject(FormContextKey, null);
     const formContext = computed(() => formContextRef?.value ?? null);
     const errorMessage = ref("");
+    const shakeTrigger = ref(0);
+    const prevFormError = ref("");
     const instanceId = ++formItemIdCounter;
     const baseId = `tiger-form-item-${instanceId}`;
     const labelId = `${baseId}-label`;
@@ -116,8 +126,12 @@ var FormItem = defineComponent({
       () => formContext.value?.errors,
       (errors) => {
         if (props.name && errors) {
-          const error = getFieldError(props.name, errors);
-          errorMessage.value = error || "";
+          const error = getFieldError(props.name, errors) || "";
+          errorMessage.value = error;
+          if (error && error !== prevFormError.value) {
+            shakeTrigger.value++;
+          }
+          prevFormError.value = error;
         }
       },
       { deep: true, immediate: true }
@@ -195,27 +209,11 @@ var FormItem = defineComponent({
     });
     const contentClasses = computed(() => getFormItemContentClasses(labelPosition.value));
     const errorClasses = computed(() => {
-      return classNames(
-        getFormItemErrorClasses(actualSize.value),
-        hasError.value && "tiger-form-item__error--show"
-      );
+      return classNames(getFormItemErrorClasses(actualSize.value), hasError.value && "opacity-100");
     });
-    const fieldClasses = computed(() => getFormItemFieldClasses());
-    const asteriskClasses = computed(() => getFormItemAsteriskClasses());
-    const asteriskStyle = computed(() => getFormItemAsteriskStyle());
+    const fieldClasses = getFormItemFieldClasses();
+    const asteriskClasses = getFormItemAsteriskClasses();
     return () => {
-      const mergeAriaDescribedBy = (existing, next) => {
-        if (!existing) {
-          return next;
-        }
-        if (!next) {
-          return existing;
-        }
-        const parts = new Set(
-          `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
-        );
-        return Array.from(parts).join(" ");
-      };
       const defaultSlot = slots.default?.() ?? [];
       const only = defaultSlot.length === 1 ? defaultSlot[0] : void 0;
       const isSingleVNode = only != null && isVNode(only);
@@ -232,36 +230,22 @@ var FormItem = defineComponent({
         }
         const vnode = only;
         const existingProps = vnode.props ?? {};
-        const existingOnBlur = existingProps.onBlur;
-        const existingOnFocusout = existingProps.onFocusout;
-        const existingOnInput = existingProps.onInput;
-        const existingOnChange = existingProps.onChange;
+        const isNativeElement = typeof vnode.type === "string";
         const merged = cloneVNode(
           vnode,
           {
             id: effectiveFieldId,
+            status: !isNativeElement && hasError.value ? "error" : existingProps.status,
+            errorMessage: !isNativeElement && hasError.value && !props.showMessage ? errorMessage.value : existingProps.errorMessage,
+            _shakeTrigger: !isNativeElement && hasError.value ? shakeTrigger.value : void 0,
             "aria-invalid": hasError.value ? "true" : existingProps["aria-invalid"],
             "aria-required": isRequired.value ? "true" : existingProps["aria-required"],
             "aria-describedby": mergeAriaDescribedBy(
               existingProps["aria-describedby"],
               describedById.value
             ),
-            onBlur: (event) => {
-              existingOnBlur?.(event);
-              handleBlur();
-            },
-            onFocusout: (event) => {
-              existingOnFocusout?.(event);
-              handleBlur();
-            },
-            onInput: (event) => {
-              existingOnInput?.(event);
-              handleChange();
-            },
-            onChange: (event) => {
-              existingOnChange?.(event);
-              handleChange();
-            }
+            onFocusout: handleBlur,
+            onInput: handleChange
           },
           true
         );
@@ -275,10 +259,7 @@ var FormItem = defineComponent({
           id: labelId,
           for: effectiveFieldId
         },
-        [
-          isRequired.value && h("span", { class: asteriskClasses.value, style: asteriskStyle.value }, "*"),
-          props.label
-        ]
+        [isRequired.value && h("span", { class: asteriskClasses }, "*"), props.label]
       ) : null;
       const contentElement = h(
         "div",
@@ -289,26 +270,26 @@ var FormItem = defineComponent({
           h(
             "div",
             {
-              class: fieldClasses.value,
+              class: fieldClasses,
               role: "group",
               "aria-labelledby": props.label ? labelId : void 0,
               "aria-describedby": describedById.value,
               "aria-invalid": hasError.value ? "true" : void 0,
               "aria-required": isRequired.value ? "true" : void 0,
               onFocusout: isSingleVNode ? void 0 : handleBlur,
-              onInput: isSingleVNode ? void 0 : handleChange,
-              onChange: isSingleVNode ? void 0 : handleChange
+              onInput: isSingleVNode ? void 0 : handleChange
             },
             fieldChildren
           ),
-          props.showMessage && hasError.value && h(
+          props.showMessage && h(
             "div",
             {
-              id: errorId,
-              role: "alert",
-              class: errorClasses.value
+              id: hasError.value ? errorId : void 0,
+              role: hasError.value ? "alert" : void 0,
+              class: errorClasses.value,
+              "aria-hidden": hasError.value ? void 0 : "true"
             },
-            errorMessage.value
+            hasError.value ? errorMessage.value : ""
           )
         ]
       );

package/dist/{chunk-4FUWM7WP.js → chunk-QK3KKTYV.js}

@@ -72,31 +72,27 @@ var Code = vue.defineComponent({
     vue.onBeforeUnmount(() => {
       clearTimer();
     });
-    return () => {
-      const attrsRecord = attrs;
-      const attrsStyle = attrsRecord.style;
-      return vue.h(
-        "div",
-        {
-          ...attrs,
-          class: containerClasses.value,
-          style: tigercatCore.mergeStyleValues(attrsStyle, props.style)
-        },
-        [
-          vue.h("pre", { class: tigercatCore.codeBlockPreClasses }, [vue.h("code", { class: "block" }, props.code)]),
-          props.copyable ? vue.h(
-            "button",
-            {
-              type: "button",
-              class: copyButtonClasses.value,
-              onClick: handleCopy,
-              "aria-label": isCopied.value ? props.copiedLabel : props.copyLabel
-            },
-            isCopied.value ? props.copiedLabel : props.copyLabel
-          ) : null
-        ]
-      );
-    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        class: containerClasses.value,
+        style: props.style
+      },
+      [
+        vue.h("pre", { class: tigercatCore.codeBlockPreClasses }, [vue.h("code", { class: "block" }, props.code)]),
+        props.copyable ? vue.h(
+          "button",
+          {
+            type: "button",
+            class: copyButtonClasses.value,
+            onClick: handleCopy,
+            "aria-label": isCopied.value ? props.copiedLabel : props.copyLabel
+          },
+          isCopied.value ? props.copiedLabel : props.copyLabel
+        ) : null
+      ]
+    );
   }
 });
 var Code_default = Code;

package/dist/{chunk-4VHNAGSP.js → chunk-QLK4ZC2B.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkZAEX6EMJ_js = require('./chunk-ZAEX6EMJ.js');
-var chunkSF63KE5T_js = require('./chunk-SF63KE5T.js');
-var chunk2ONL76L4_js = require('./chunk-2ONL76L4.js');
-var chunkU65XZCPB_js = require('./chunk-U65XZCPB.js');
+var chunkWC4B72TZ_js = require('./chunk-WC4B72TZ.js');
+var chunk6FXYRDYH_js = require('./chunk-6FXYRDYH.js');
+var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -173,7 +173,7 @@ var ChatWindow = vue.defineComponent({
           key: message.id ?? index
         },
         [
-          props.showAvatar && message.user ? vue.h(chunkU65XZCPB_js.Avatar, {
+          props.showAvatar && message.user ? vue.h(chunkWPIDP6IG_js.Avatar, {
             size: "sm",
             src: message.user.avatar,
             text: message.user.name,
@@ -223,9 +223,9 @@ var ChatWindow = vue.defineComponent({
         "aria-label": resolvedInputLabel
       };
       if (props.inputType === "input") {
-        return vue.h(chunkZAEX6EMJ_js.Input, commonProps);
+        return vue.h(chunkWC4B72TZ_js.Input, commonProps);
       }
-      return vue.h(chunkSF63KE5T_js.Textarea, { ...commonProps, rows: props.inputRows });
+      return vue.h(chunk6FXYRDYH_js.Textarea, { ...commonProps, rows: props.inputRows });
     };
     return () => vue.h(
       "div",
@@ -270,7 +270,7 @@ var ChatWindow = vue.defineComponent({
           [
             vue.h("div", { class: "flex-1" }, [renderInput()]),
             vue.h(
-              chunk2ONL76L4_js.Button,
+              chunkDELTFEEJ_js.Button,
               {
                 disabled: !canSend.value,
                 onClick: handleSend,

package/dist/chunk-QY6PYAJA.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Progress.ts
+var Progress = vue.defineComponent({
+  name: "TigerProgress",
+  inheritAttrs: false,
+  props: {
+    variant: { type: String, default: "primary" },
+    size: { type: String, default: "md" },
+    type: { type: String, default: "line" },
+    percentage: { type: Number, default: 0 },
+    status: { type: String, default: "normal" },
+    showText: { type: Boolean, default: void 0 },
+    text: { type: String, default: void 0 },
+    format: { type: Function, default: void 0 },
+    striped: { type: Boolean, default: false },
+    stripedAnimation: { type: Boolean, default: false },
+    strokeWidth: { type: Number, default: 6 },
+    width: { type: [String, Number], default: "auto" },
+    height: { type: Number, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 }
+  },
+  setup(props, { attrs }) {
+    const clamped = vue.computed(() => tigercatCore.clampPercentage(props.percentage));
+    const effectiveVariant = vue.computed(
+      () => tigercatCore.getStatusVariant(props.status) || props.variant
+    );
+    const shouldShowText = vue.computed(() => props.showText ?? props.type === "line");
+    const displayText = vue.computed(
+      () => shouldShowText.value ? tigercatCore.formatProgressText(clamped.value, props.text, props.format) : ""
+    );
+    const resolvedAriaLabel = vue.computed(() => {
+      const label = attrs["aria-label"];
+      return label ?? (attrs["aria-labelledby"] != null ? void 0 : `Progress: ${clamped.value}%`);
+    });
+    const ariaProps = vue.computed(() => ({
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel.value,
+      "aria-labelledby": attrs["aria-labelledby"],
+      "aria-describedby": attrs["aria-describedby"],
+      "aria-valuenow": clamped.value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }));
+    const renderLineProgress = () => {
+      const containerStyle = props.width !== "auto" ? { width: typeof props.width === "number" ? `${props.width}px` : props.width } : {};
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(
+            "flex items-center w-full",
+            tigercatCore.coerceClassValue(attrs.class),
+            props.className
+          ),
+          style: {
+            ...attrs.style,
+            ...props.style ?? {},
+            ...containerStyle
+          }
+        },
+        [
+          vue.h(
+            "div",
+            {
+              class: tigercatCore.classNames(
+                tigercatCore.progressLineBaseClasses,
+                tigercatCore.progressTrackBgClasses,
+                !props.height && tigercatCore.progressLineSizeClasses[props.size]
+              ),
+              style: { flex: 1, ...props.height ? { height: `${props.height}px` } : {} }
+            },
+            [
+              vue.h("div", {
+                class: tigercatCore.classNames(
+                  tigercatCore.progressLineInnerClasses,
+                  tigercatCore.getProgressVariantClasses(effectiveVariant.value),
+                  props.striped && tigercatCore.progressStripedClasses,
+                  props.striped && props.stripedAnimation && tigercatCore.progressStripedAnimationClasses
+                ),
+                style: { width: `${clamped.value}%` },
+                ...ariaProps.value
+              })
+            ]
+          ),
+          shouldShowText.value ? vue.h(
+            "span",
+            {
+              class: tigercatCore.classNames(
+                tigercatCore.progressTextBaseClasses,
+                tigercatCore.progressTextSizeClasses[props.size],
+                tigercatCore.getProgressTextColorClasses(effectiveVariant.value)
+              )
+            },
+            displayText.value
+          ) : void 0
+        ].filter(Boolean)
+      );
+    };
+    const renderCircleProgress = () => {
+      const { width, height, radius, cx, cy } = tigercatCore.getCircleSize(props.size, props.strokeWidth);
+      const { strokeDasharray, strokeDashoffset } = tigercatCore.calculateCirclePath(radius, clamped.value);
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(
+            tigercatCore.progressCircleBaseClasses,
+            tigercatCore.coerceClassValue(attrs.class),
+            props.className
+          ),
+          style: {
+            ...attrs.style,
+            ...props.style ?? {},
+            width: `${width}px`,
+            height: `${height}px`
+          }
+        },
+        [
+          vue.h("svg", { width, height, viewBox: `0 0 ${width} ${height}` }, [
+            vue.h("circle", {
+              cx,
+              cy,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              class: tigercatCore.progressCircleTrackStrokeClasses,
+              "stroke-width": props.strokeWidth
+            }),
+            vue.h("circle", {
+              cx,
+              cy,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              class: tigercatCore.getProgressVariantClasses(effectiveVariant.value).replace("bg-", "text-"),
+              "stroke-width": props.strokeWidth,
+              "stroke-linecap": "round",
+              "stroke-dasharray": strokeDasharray,
+              "stroke-dashoffset": strokeDashoffset,
+              style: {
+                transition: "stroke-dashoffset 0.3s ease",
+                transform: "rotate(-90deg)",
+                transformOrigin: "center"
+              },
+              ...ariaProps.value
+            })
+          ]),
+          shouldShowText.value ? vue.h(
+            "div",
+            {
+              class: tigercatCore.classNames(
+                tigercatCore.progressCircleTextClasses,
+                tigercatCore.progressTextSizeClasses[props.size],
+                "font-medium",
+                tigercatCore.getProgressTextColorClasses(effectiveVariant.value)
+              )
+            },
+            displayText.value
+          ) : void 0
+        ].filter(Boolean)
+      );
+    };
+    return () => props.type === "circle" ? renderCircleProgress() : renderLineProgress();
+  }
+});
+var Progress_default = Progress;
+
+exports.Progress = Progress;
+exports.Progress_default = Progress_default;

package/dist/{chunk-I3Z247PO.js → chunk-R77ZKZ5F.js}

@@ -88,7 +88,9 @@ var Anchor = vue.defineComponent({
     const inkRef = vue.ref(null);
     const isScrolling = vue.ref(false);
     let animationFrameId = null;
+    let scrollTimeoutId = null;
     const getContainer = () => props.getContainer();
+    const scrollOffset = vue.computed(() => props.targetOffset ?? props.offsetTop);
     const registerLink = (href) => {
       if (href && !links.value.includes(href)) {
         links.value = [...links.value, href];
@@ -104,8 +106,12 @@ var Anchor = vue.defineComponent({
       }
       animationFrameId = requestAnimationFrame(() => {
         const container = getContainer();
-        const scrollOffset = props.targetOffset ?? props.offsetTop;
-        const newActiveLink = tigercatCore.findActiveAnchor(links.value, container, props.bounds, scrollOffset);
+        const newActiveLink = tigercatCore.findActiveAnchor(
+          links.value,
+          container,
+          props.bounds,
+          scrollOffset.value
+        );
         const finalActiveLink = props.getCurrentAnchor ? props.getCurrentAnchor(newActiveLink) : newActiveLink;
         if (finalActiveLink !== activeLink.value) {
           activeLink.value = finalActiveLink;
@@ -114,17 +120,17 @@ var Anchor = vue.defineComponent({
       });
     };
     const scrollTo = (href) => {
-      const container = getContainer();
-      const scrollOffset = props.targetOffset ?? props.offsetTop;
-      tigercatCore.scrollToAnchor(href, container, scrollOffset);
+      tigercatCore.scrollToAnchor(href, getContainer(), scrollOffset.value);
     };
     const handleLinkClick = (href, event) => {
       emit("click", event, href);
       isScrolling.value = true;
       activeLink.value = href;
       scrollTo(href);
-      setTimeout(() => {
+      if (scrollTimeoutId !== null) clearTimeout(scrollTimeoutId);
+      scrollTimeoutId = setTimeout(() => {
         isScrolling.value = false;
+        scrollTimeoutId = null;
       }, 500);
     };
     const updateInkPosition = () => {
@@ -167,6 +173,9 @@ var Anchor = vue.defineComponent({
       if (animationFrameId !== null) {
         cancelAnimationFrame(animationFrameId);
       }
+      if (scrollTimeoutId !== null) {
+        clearTimeout(scrollTimeoutId);
+      }
     });
     const wrapperClasses = vue.computed(() => {
       return tigercatCore.classNames(
@@ -183,10 +192,7 @@ var Anchor = vue.defineComponent({
     const linkListClasses = vue.computed(() => {
       return tigercatCore.getAnchorLinkListClasses(props.direction);
     });
-    const showInk = vue.computed(() => {
-      if (!props.affix) return true;
-      return props.showInkInFixed;
-    });
+    const showInk = vue.computed(() => !props.affix || props.showInkInFixed);
     const wrapperStyle = vue.computed(() => {
       const baseStyle = {};
       if (props.affix && props.offsetTop > 0) {
@@ -202,15 +208,10 @@ var Anchor = vue.defineComponent({
       handleLinkClick,
       scrollTo
     });
-    vue.watch(activeLink, (newVal) => {
-      contextValue.activeLink = newVal;
+    vue.watch([activeLink, () => props.direction], ([newActive, newDir]) => {
+      contextValue.activeLink = newActive;
+      contextValue.direction = newDir;
     });
-    vue.watch(
-      () => props.direction,
-      (newVal) => {
-        contextValue.direction = newVal;
-      }
-    );
     vue.provide(AnchorContextKey, contextValue);
     return () => {
       const inkIndicator = showInk.value ? [