@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-WCZGYU7M.js → chunk-VPNIZPIF.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkNOTJRUAK_js = require('./chunk-NOTJRUAK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
+// src/components/Steps.ts
+var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
 var StepsItem = vue.defineComponent({
   name: "TigerStepsItem",
   inheritAttrs: false,
@@ -67,7 +68,7 @@ var StepsItem = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const stepsContext = vue.inject(chunkNOTJRUAK_js.StepsContextKey, {
+    const stepsContext = vue.inject(StepsContextKey, {
       current: 0,
       status: "process",
       direction: "horizontal",
@@ -100,7 +101,13 @@ var StepsItem = vue.defineComponent({
       );
     });
     const tailClasses = vue.computed(() => {
-      return tigercatCore.getStepTailClasses(stepsContext.direction, stepStatus.value, props.isLast, stepsContext.size, stepsContext.simple);
+      return tigercatCore.getStepTailClasses(
+        stepsContext.direction,
+        stepStatus.value,
+        props.isLast,
+        stepsContext.size,
+        stepsContext.simple
+      );
     });
     const contentClasses = vue.computed(() => {
       return tigercatCore.getStepContentClasses(stepsContext.direction);
@@ -165,11 +172,7 @@ var StepsItem = vue.defineComponent({
     };
     const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
     return () => {
-      const {
-        class: _class,
-        style: _style,
-        ...restAttrs
-      } = attrs;
+      const { class: _class, style: _style, ...restAttrs } = attrs;
       if (stepsContext.direction === "vertical") {
         return vue.h(
           "li",
@@ -181,9 +184,7 @@ var StepsItem = vue.defineComponent({
             ...restAttrs
           },
           [
-            // Icon and tail wrapper
             vue.h("div", { class: "relative" }, [renderIcon(), vue.h("div", { class: tailClasses.value })]),
-            // Content
             renderContent()
           ]
         );
@@ -197,19 +198,140 @@ var StepsItem = vue.defineComponent({
           "aria-disabled": props.disabled || void 0,
           ...restAttrs
         },
-        [
-          // Icon
-          renderIcon(),
-          // Tail (connector)
-          vue.h("div", { class: tailClasses.value }),
-          // Content
-          renderContent()
-        ]
+        [renderIcon(), vue.h("div", { class: tailClasses.value }), renderContent()]
+      );
+    };
+  }
+});
+var Steps = vue.defineComponent({
+  name: "TigerSteps",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Current step index (0-based)
+     * @default 0
+     */
+    current: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Step status (for current step)
+     * @default 'process'
+     */
+    status: {
+      type: String,
+      default: "process"
+    },
+    /**
+     * Steps direction/orientation
+     * @default 'horizontal'
+     */
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * Step size
+     * @default 'default'
+     */
+    size: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * Whether to use simple style (no description, smaller icons)
+     * @default false
+     */
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether steps are clickable
+     * @default false
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change", "update:current"],
+  setup(props, { slots, attrs, emit }) {
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getStepsContainerClasses(props.direction),
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
+    const handleStepClick = (index) => {
+      if (!props.clickable) {
+        return;
+      }
+      emit("update:current", index);
+      emit("change", index);
+    };
+    vue.provide(
+      StepsContextKey,
+      vue.reactive({
+        current: vue.computed(() => props.current),
+        status: vue.computed(() => props.status),
+        direction: vue.computed(() => props.direction),
+        size: vue.computed(() => props.size),
+        simple: vue.computed(() => props.simple),
+        clickable: vue.computed(() => props.clickable),
+        handleStepClick: vue.computed(() => props.clickable ? handleStepClick : void 0)
+      })
+    );
+    return () => {
+      const children = slots.default?.() || [];
+      const { class: _class, style: _style, ...restAttrs } = attrs;
+      const stepsWithProps = children.map((child, index) => {
+        const childType = child?.type;
+        const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
+        if (childName === "TigerStepsItem") {
+          const childProps = child.props ?? {};
+          const stepItemType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
+          return vue.h(
+            stepItemType,
+            {
+              ...childProps,
+              stepIndex: index,
+              isLast: index === children.length - 1
+            },
+            child.children ?? void 0
+          );
+        }
+        return child;
+      });
+      return vue.h(
+        "ol",
+        {
+          class: containerClasses.value,
+          style: mergedStyle.value,
+          ...restAttrs
+        },
+        stepsWithProps
       );
     };
   }
 });
-var StepsItem_default = StepsItem;
+var Steps_default = Steps;
 
+exports.Steps = Steps;
+exports.StepsContextKey = StepsContextKey;
 exports.StepsItem = StepsItem;
-exports.StepsItem_default = StepsItem_default;
+exports.Steps_default = Steps_default;

package/dist/{chunk-F5HOHSFH.mjs → chunk-VVS2CQS4.mjs}

@@ -69,9 +69,9 @@ var ChartLegend = defineComponent({
             key: `legend-${item.index}`,
             type: props.interactive ? "button" : void 0,
             class: classNames(
-              "flex items-center gap-2 text-sm",
+              "flex items-center gap-2 text-sm rounded-[var(--tiger-chart-legend-row-radius,0)]",
               "text-[color:var(--tiger-text-secondary,#6b7280)]",
-              props.interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] transition-colors" : "cursor-default",
+              props.interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
               item.active === false ? "opacity-50" : void 0
             ),
             role: "listitem",
@@ -86,7 +86,8 @@ var ChartLegend = defineComponent({
               style: {
                 width: `${props.markerSize}px`,
                 height: `${props.markerSize}px`,
-                backgroundColor: item.color
+                background: `var(--tiger-chart-legend-marker-image, ${item.color})`,
+                "--tiger-chart-legend-marker-color": item.color
               },
               "aria-hidden": "true",
               "data-legend-marker": "true"

package/dist/chunk-VYFJ3LYD.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var chunkGEPFTYKC_js = require('./chunk-GEPFTYKC.js');
+var vue = require('vue');
+
+var Kanban = vue.defineComponent({
+  name: "TigerKanban",
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: Array,
+      default: void 0
+    },
+    defaultColumns: {
+      type: Array,
+      default: () => []
+    },
+    draggable: { type: Boolean, default: true },
+    columnDraggable: { type: Boolean, default: true },
+    enforceWipLimit: { type: Boolean, default: false },
+    beforeCardMove: {
+      type: Function,
+      default: void 0
+    },
+    beforeColumnMove: {
+      type: Function,
+      default: void 0
+    },
+    onCardAdd: {
+      type: Function,
+      default: void 0
+    },
+    filterText: { type: String, default: "" },
+    hiddenColumns: {
+      type: Array,
+      default: () => []
+    },
+    showCardCount: { type: Boolean, default: true },
+    allowAddCard: { type: Boolean, default: true },
+    allowAddColumn: { type: Boolean, default: false },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["card-move", "column-move", "update:columns", "card-add", "column-add"],
+  setup(props, { emit, attrs, slots }) {
+    const handleCardAdd = (colId) => {
+      props.onCardAdd?.(colId);
+      emit("card-add", colId);
+    };
+    return () => vue.h(
+      chunkGEPFTYKC_js.TaskBoard,
+      {
+        ...attrs,
+        columns: props.columns,
+        defaultColumns: props.defaultColumns,
+        draggable: props.draggable,
+        columnDraggable: props.columnDraggable,
+        enforceWipLimit: props.enforceWipLimit,
+        beforeCardMove: props.beforeCardMove,
+        beforeColumnMove: props.beforeColumnMove,
+        // Only set onCardAdd when needed — its presence affects button visibility
+        onCardAdd: props.allowAddCard || props.onCardAdd ? handleCardAdd : void 0,
+        filterText: props.filterText,
+        hiddenColumns: props.hiddenColumns,
+        showCardCount: props.showCardCount,
+        allowAddCard: props.allowAddCard,
+        allowAddColumn: props.allowAddColumn,
+        locale: props.locale,
+        className: props.className,
+        style: props.style,
+        "onCard-move": (e) => emit("card-move", e),
+        "onColumn-move": (e) => emit("column-move", e),
+        "onUpdate:columns": (cols) => emit("update:columns", cols),
+        "onColumn-add": () => emit("column-add")
+      },
+      slots
+    );
+  }
+});
+var Kanban_default = Kanban;
+
+exports.Kanban = Kanban;
+exports.Kanban_default = Kanban_default;

package/dist/{chunk-D6AWPRGV.js → chunk-VYGI74MJ.js}

@@ -111,6 +111,7 @@ var Form = vue.defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = vue.reactive([]);
     const fieldRules = vue.reactive({});
+    const errorsByField = vue.computed(() => tigercatCore.createFormErrorMap(errors));
     const history = vue.ref(
       tigercatCore.createFormHistory(props.model ?? {}, props.maxHistorySize)
     );
@@ -273,6 +274,7 @@ var Form = vue.defineComponent({
       disabled: props.disabled,
       loading: props.loading,
       errors,
+      errorsByField: errorsByField.value,
       registerFieldRules,
       validateField,
       clearValidate

package/dist/chunk-W5RZPTFD.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, h } from 'vue';
+import { createChartResizeObserverController, resolveResponsiveChartSize, getChartInnerRect, classNames, chartCanvasBaseClasses, coerceClassValue } from '@expcat/tigercat-core';
+
+// src/components/ChartCanvas.ts
+var ChartCanvas = defineComponent({
+  name: "TigerChartCanvas",
+  inheritAttrs: false,
+  props: {
+    width: {
+      type: Number,
+      default: 320
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    responsive: {
+      type: Boolean,
+      default: false
+    },
+    padding: {
+      type: [Number, Object],
+      default: 24
+    },
+    className: {
+      type: String
+    },
+    title: {
+      type: String
+    },
+    desc: {
+      type: String
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const svgRef = ref(null);
+    const observedSize = ref(null);
+    const resizeController = createChartResizeObserverController({
+      onSizeChange: (size) => {
+        observedSize.value = size;
+      }
+    });
+    const resolvedSize = computed(
+      () => resolveResponsiveChartSize(
+        { width: props.width, height: props.height },
+        props.responsive ? observedSize.value : null
+      )
+    );
+    const innerRect = computed(
+      () => getChartInnerRect(resolvedSize.value.width, resolvedSize.value.height, props.padding)
+    );
+    const svgClasses = computed(
+      () => classNames(chartCanvasBaseClasses, coerceClassValue(attrs.class), props.className)
+    );
+    const svgStyle = computed(() => ({
+      ...attrs.style
+    }));
+    const syncResponsiveObserver = () => {
+      if (!props.responsive) {
+        resizeController.disconnect();
+        observedSize.value = null;
+        return;
+      }
+      const target = svgRef.value?.parentElement;
+      if (target) {
+        resizeController.observe(target);
+      }
+    };
+    onMounted(syncResponsiveObserver);
+    watch(() => props.responsive, syncResponsiveObserver);
+    onBeforeUnmount(() => resizeController.disconnect());
+    return () => {
+      const rect = innerRect.value;
+      const size = resolvedSize.value;
+      return h(
+        "svg",
+        {
+          ...attrs,
+          ref: svgRef,
+          width: size.width,
+          height: size.height,
+          viewBox: `0 0 ${size.width} ${size.height}`,
+          class: svgClasses.value,
+          style: svgStyle.value
+        },
+        [
+          props.title ? h("title", props.title) : null,
+          props.desc ? h("desc", props.desc) : null,
+          h(
+            "g",
+            {
+              transform: `translate(${rect.x}, ${rect.y})`
+            },
+            slots.default?.({ innerRect: rect })
+          )
+        ].filter(Boolean)
+      );
+    };
+  }
+});
+var ChartCanvas_default = ChartCanvas;
+
+export { ChartCanvas, ChartCanvas_default };

package/dist/{chunk-NAHD6ZRR.mjs → chunk-W6ZFHHD3.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, provide, computed, h } from 'vue';
-import { avatarGroupItemClasses, avatarSizeClasses, classNames, avatarGroupBaseClasses, coerceClassValue, avatarGroupOverflowClasses } from '@expcat/tigercat-core';
+import { defineComponent, provide, h } from 'vue';
+import { getAvatarGroupItemClasses, getVisibleGroupItems, getAvatarGroupClasses, coerceClassValue, getAvatarGroupOverflowLabel, getAvatarGroupOverflowClasses, getAvatarGroupOverflowText } from '@expcat/tigercat-core';
 
 // src/components/AvatarGroup.ts
 var AVATAR_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerAvatarGroup");
@@ -23,9 +23,8 @@ var AvatarGroup = defineComponent({
   setup(props, { slots, attrs }) {
     provide(AVATAR_GROUP_INJECTION_KEY, {
       size: props.size,
-      itemClass: avatarGroupItemClasses
+      itemClass: getAvatarGroupItemClasses()
     });
-    const overflowSizeClass = computed(() => avatarSizeClasses[props.size ?? "md"]);
     return () => {
       const children = slots.default?.() ?? [];
       const flatChildren = children.flatMap(
@@ -33,27 +32,24 @@ var AvatarGroup = defineComponent({
       );
       const attrsRecord = attrs;
       const attrsClass = attrsRecord.class;
-      const total = flatChildren.length;
-      const visibleCount = props.max != null && props.max < total ? props.max : total;
-      const overflow = total - visibleCount;
-      const visible = flatChildren.slice(0, visibleCount);
+      const { visibleItems, overflowCount } = getVisibleGroupItems(flatChildren, props.max);
       return h(
         "div",
         {
           ...attrs,
-          class: classNames(avatarGroupBaseClasses, props.className, coerceClassValue(attrsClass)),
+          class: getAvatarGroupClasses(props.className, coerceClassValue(attrsClass)),
           role: "group",
           "aria-label": "Avatar group"
         },
         [
-          ...visible,
-          overflow > 0 ? h(
+          ...visibleItems,
+          overflowCount > 0 ? h(
             "span",
             {
-              class: classNames(avatarGroupOverflowClasses, overflowSizeClass.value),
-              "aria-label": `${overflow} more`
+              class: getAvatarGroupOverflowClasses(props.size ?? "md"),
+              "aria-label": getAvatarGroupOverflowLabel(overflowCount)
             },
-            `+${overflow}`
+            getAvatarGroupOverflowText(overflowCount)
           ) : null
         ]
       );

package/dist/{chunk-PCGHIFIJ.js → chunk-WGNJHM34.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkVTLTKTCK_js = require('./chunk-VTLTKTCK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
+// src/components/Breadcrumb.ts
+var BreadcrumbContextKey = /* @__PURE__ */ Symbol("BreadcrumbContext");
 var BreadcrumbItem = vue.defineComponent({
   name: "TigerBreadcrumbItem",
   props: {
@@ -65,7 +66,7 @@ var BreadcrumbItem = vue.defineComponent({
     click: (event) => event instanceof MouseEvent
   },
   setup(props, { slots, emit, attrs }) {
-    const breadcrumbContext = vue.inject(chunkVTLTKTCK_js.BreadcrumbContextKey, {
+    const breadcrumbContext = vue.inject(BreadcrumbContextKey, {
       separator: "/"
     });
     const itemClasses = vue.computed(() => {
@@ -78,8 +79,8 @@ var BreadcrumbItem = vue.defineComponent({
       return tigercatCore.getBreadcrumbSeparatorClasses();
     });
     const separatorContent = vue.computed(() => {
-      const sep = props.separator !== void 0 ? props.separator : breadcrumbContext.separator;
-      return tigercatCore.getSeparatorContent(sep);
+      const separator = props.separator !== void 0 ? props.separator : breadcrumbContext.separator;
+      return tigercatCore.getSeparatorContent(separator);
     });
     const handleClick = (event) => {
       if (!props.current) {
@@ -134,7 +135,84 @@ var BreadcrumbItem = vue.defineComponent({
     };
   }
 });
-var BreadcrumbItem_default = BreadcrumbItem;
+var Breadcrumb = vue.defineComponent({
+  name: "TigerBreadcrumb",
+  props: {
+    /**
+     * Custom separator between breadcrumb items
+     * @default '/'
+     */
+    separator: {
+      type: String,
+      default: "/"
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Extra content aligned to the end of the breadcrumb
+     */
+    extra: {
+      type: null,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const extraContent = vue.computed(() => {
+      const slotValue = slots.extra?.();
+      if (slotValue && slotValue.length > 0) return slotValue;
+      if (props.extra != null) return props.extra;
+      return null;
+    });
+    const containerClasses = vue.computed(() => {
+      return tigercatCore.classNames(tigercatCore.breadcrumbContainerClasses, extraContent.value && "w-full", props.className);
+    });
+    vue.provide(BreadcrumbContextKey, {
+      separator: props.separator
+    });
+    return () => {
+      return vue.h(
+        "nav",
+        {
+          "aria-label": "Breadcrumb",
+          ...attrs,
+          class: [containerClasses.value, attrs.class],
+          style: [props.style, attrs.style]
+        },
+        [
+          vue.h(
+            "ol",
+            {
+              class: "flex items-center flex-wrap gap-2"
+            },
+            slots.default?.()
+          ),
+          extraContent.value ? vue.h(
+            "div",
+            {
+              class: "ml-auto flex items-center"
+            },
+            extraContent.value
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Breadcrumb_default = Breadcrumb;
 
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbContextKey = BreadcrumbContextKey;
 exports.BreadcrumbItem = BreadcrumbItem;
-exports.BreadcrumbItem_default = BreadcrumbItem_default;
+exports.Breadcrumb_default = Breadcrumb_default;