@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-VJ6YM2EW.mjs

@@ -0,0 +1,192 @@
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
+
+// src/components/OrgChart.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  computeOrgChartLayout,
+  getChartInnerRect,
+  getOrgChartNodeAriaLabel,
+  getOrgChartNodeClasses,
+  orgChartLinkClasses,
+  orgChartNodeLabelClasses,
+  orgChartNodeRectClasses,
+  orgChartNodeSubtitleClasses,
+  orgChartNodeTitleClasses
+} from "@expcat/tigercat-core";
+var OrgChart = defineComponent({
+  name: "TigerOrgChart",
+  props: {
+    data: { type: [Object, Array], required: true },
+    width: { type: Number, default: 720 },
+    height: { type: Number, default: 420 },
+    padding: { type: [Number, Object], default: 24 },
+    nodeWidth: { type: Number, default: 160 },
+    nodeHeight: { type: Number, default: 72 },
+    levelGap: { type: Number, default: 80 },
+    siblingGap: { type: Number, default: 32 },
+    direction: { type: String, default: "vertical" },
+    showAvatars: { type: Boolean, default: true },
+    showSubtitles: { type: Boolean, default: true },
+    hoverable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    selectedId: {
+      type: [String, Number, null],
+      default: void 0
+    },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.35 },
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    ariaLabel: { type: String, default: "Organization chart" },
+    className: { type: String }
+  },
+  emits: ["update:selectedId", "node-click", "node-hover"],
+  setup(props, { emit }) {
+    const innerSelectedId = ref(null);
+    const hoveredId = ref(null);
+    const resolvedSelectedId = computed(
+      () => props.selectedId === void 0 ? innerSelectedId.value : props.selectedId
+    );
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const layout = computed(
+      () => computeOrgChartLayout(props.data, {
+        nodeWidth: props.nodeWidth,
+        nodeHeight: props.nodeHeight,
+        levelGap: props.levelGap,
+        siblingGap: props.siblingGap,
+        direction: props.direction,
+        colors: props.colors
+      })
+    );
+    const offsetX = computed(() => Math.max(0, (innerRect.value.width - layout.value.width) / 2));
+    const offsetY = computed(() => Math.max(0, (innerRect.value.height - layout.value.height) / 2));
+    const activeId = computed(() => resolvedSelectedId.value ?? hoveredId.value);
+    const selectNode = (node) => {
+      if (props.selectable && !node.node.disabled) {
+        const nextId = resolvedSelectedId.value === node.id ? null : node.id;
+        innerSelectedId.value = nextId;
+        emit("update:selectedId", nextId);
+      }
+      emit("node-click", node.node);
+    };
+    const setHoveredNode = (node) => {
+      if (!props.hoverable) return;
+      hoveredId.value = node?.id ?? null;
+      emit("node-hover", node?.node ?? null);
+    };
+    const getNodeOpacity = (node) => {
+      if (activeId.value === null) return props.activeOpacity;
+      return activeId.value === node.id ? props.activeOpacity : props.inactiveOpacity;
+    };
+    return () => h(
+      ChartCanvas,
+      {
+        width: props.width,
+        height: props.height,
+        padding: props.padding,
+        title: props.title,
+        desc: props.desc,
+        className: classNames(props.className),
+        role: "img",
+        "aria-label": props.ariaLabel
+      },
+      {
+        default: () => h(
+          "g",
+          {
+            transform: `translate(${offsetX.value}, ${offsetY.value})`,
+            "data-series-type": "org-chart"
+          },
+          [
+            h(
+              "g",
+              { "data-org-chart-links": "true" },
+              layout.value.links.map(
+                (link) => h("path", {
+                  key: `${link.sourceId}-${link.targetId}`,
+                  d: link.path,
+                  class: orgChartLinkClasses
+                })
+              )
+            ),
+            h(
+              "g",
+              { "data-org-chart-nodes": "true" },
+              layout.value.nodes.map((node) => {
+                const selected = resolvedSelectedId.value === node.id;
+                const interactive = (props.hoverable || props.selectable) && !node.node.disabled;
+                const textStart = props.showAvatars && node.node.avatar ? 58 : 16;
+                return h(
+                  "g",
+                  {
+                    key: node.id,
+                    transform: `translate(${node.x}, ${node.y})`,
+                    class: getOrgChartNodeClasses(interactive, selected),
+                    opacity: getNodeOpacity(node),
+                    role: interactive ? "button" : "group",
+                    tabindex: interactive ? 0 : void 0,
+                    "aria-label": getOrgChartNodeAriaLabel(node.node),
+                    onMouseenter: () => setHoveredNode(node),
+                    onMouseleave: () => setHoveredNode(null),
+                    onClick: () => selectNode(node),
+                    onKeydown: (event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        selectNode(node);
+                      }
+                    }
+                  },
+                  [
+                    h("rect", {
+                      width: node.width,
+                      height: node.height,
+                      rx: 8,
+                      class: orgChartNodeRectClasses,
+                      stroke: selected ? node.color : void 0,
+                      strokeWidth: selected ? 2 : 1
+                    }),
+                    h("rect", { width: 4, height: node.height, rx: 2, fill: node.color }),
+                    props.showAvatars && node.node.avatar ? h("image", {
+                      href: node.node.avatar,
+                      x: 16,
+                      y: 16,
+                      width: 32,
+                      height: 32,
+                      preserveAspectRatio: "xMidYMid slice",
+                      "aria-hidden": "true"
+                    }) : void 0,
+                    h(
+                      "text",
+                      { x: textStart, y: 26, class: orgChartNodeLabelClasses },
+                      node.node.label
+                    ),
+                    node.node.title ? h(
+                      "text",
+                      { x: textStart, y: 44, class: orgChartNodeTitleClasses },
+                      node.node.title
+                    ) : void 0,
+                    props.showSubtitles && node.node.subtitle ? h(
+                      "text",
+                      { x: textStart, y: 60, class: orgChartNodeSubtitleClasses },
+                      node.node.subtitle
+                    ) : void 0
+                  ]
+                );
+              })
+            )
+          ]
+        )
+      }
+    );
+  }
+});
+var OrgChart_default = OrgChart;
+
+export {
+  OrgChart,
+  OrgChart_default
+};

package/dist/chunk-VL7GENWD.mjs

@@ -1,7 +1,6 @@
-import { defineComponent, computed, resolveDynamicComponent, h } from 'vue';
-import { getContainerClasses } from '@expcat/tigercat-core';
-
 // src/components/Container.ts
+import { defineComponent, computed, h, resolveDynamicComponent } from "vue";
+import { getContainerClasses } from "@expcat/tigercat-core";
 var Container = defineComponent({
   name: "TigerContainer",
   inheritAttrs: false,
@@ -64,4 +63,7 @@ var Container = defineComponent({
 });
 var Container_default = Container;
 
-export { Container, Container_default };
+export {
+  Container,
+  Container_default
+};

package/dist/chunk-VPNIZPIF.js

@@ -0,0 +1,356 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Steps.ts
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
+var StepsItem = _vue.defineComponent.call(void 0, {
+  name: "TigerStepsItem",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Step title
+     */
+    title: {
+      type: String,
+      required: true
+    },
+    /**
+     * Step description
+     */
+    description: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Step icon (slot content or custom icon)
+     */
+    icon: {
+      type: [String, Object],
+      default: void 0
+    },
+    /**
+     * Step status (overrides automatic status)
+     */
+    status: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether the step is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Internal prop: step index (automatically set by parent)
+     */
+    stepIndex: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Internal prop: is last step (automatically set by parent)
+     */
+    isLast: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const stepsContext = _vue.inject.call(void 0, StepsContextKey, {
+      current: 0,
+      status: "process",
+      direction: "horizontal",
+      size: "default",
+      simple: false,
+      clickable: false
+    });
+    const stepStatus = _vue.computed.call(void 0, () => {
+      return _tigercatcore.calculateStepStatus.call(void 0, 
+        props.stepIndex,
+        stepsContext.current,
+        stepsContext.status,
+        props.status
+      );
+    });
+    const itemClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getStepItemClasses.call(void 0, stepsContext.direction, props.isLast),
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+    });
+    const iconClasses = _vue.computed.call(void 0, () => {
+      const hasCustomIcon = !!(props.icon || slots.icon);
+      return _tigercatcore.getStepIconClasses.call(void 0, 
+        stepStatus.value,
+        stepsContext.size,
+        stepsContext.simple,
+        hasCustomIcon
+      );
+    });
+    const tailClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepTailClasses.call(void 0, 
+        stepsContext.direction,
+        stepStatus.value,
+        props.isLast,
+        stepsContext.size,
+        stepsContext.simple
+      );
+    });
+    const contentClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepContentClasses.call(void 0, stepsContext.direction);
+    });
+    const titleClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepTitleClasses.call(void 0, 
+        stepStatus.value,
+        stepsContext.size,
+        stepsContext.clickable && !props.disabled
+      );
+    });
+    const descriptionClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepDescriptionClasses.call(void 0, stepStatus.value, stepsContext.size);
+    });
+    const handleClick = () => {
+      if (props.disabled || !stepsContext.handleStepClick) {
+        return;
+      }
+      stepsContext.handleStepClick(props.stepIndex);
+    };
+    const renderIcon = () => {
+      if (slots.icon) {
+        return _vue.h.call(void 0, "div", { class: iconClasses.value }, slots.icon());
+      }
+      if (props.icon) {
+        return _vue.h.call(void 0, "div", { class: iconClasses.value }, props.icon);
+      }
+      if (stepStatus.value === "finish") {
+        return _vue.h.call(void 0, "div", { class: iconClasses.value, "aria-hidden": "true" }, _tigercatcore.stepFinishChar);
+      }
+      return _vue.h.call(void 0, "div", { class: iconClasses.value }, String(props.stepIndex + 1));
+    };
+    const renderContent = () => {
+      const children = [];
+      if (stepsContext.clickable) {
+        children.push(
+          _vue.h.call(void 0, 
+            "button",
+            {
+              type: "button",
+              class: titleClasses.value,
+              onClick: handleClick,
+              disabled: props.disabled,
+              "aria-disabled": props.disabled || void 0
+            },
+            props.title
+          )
+        );
+      } else {
+        children.push(_vue.h.call(void 0, "div", { class: titleClasses.value }, props.title));
+      }
+      if (!stepsContext.simple && (props.description || slots.description)) {
+        children.push(
+          _vue.h.call(void 0, 
+            "div",
+            { class: descriptionClasses.value },
+            slots.description ? slots.description() : props.description
+          )
+        );
+      }
+      return _vue.h.call(void 0, "div", { class: contentClasses.value }, children);
+    };
+    const mergedStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
+    return () => {
+      const { class: _class, style: _style, ...restAttrs } = attrs;
+      if (stepsContext.direction === "vertical") {
+        return _vue.h.call(void 0, 
+          "li",
+          {
+            class: itemClasses.value,
+            style: mergedStyle.value,
+            "aria-current": props.stepIndex === stepsContext.current ? "step" : void 0,
+            "aria-disabled": props.disabled || void 0,
+            ...restAttrs
+          },
+          [
+            _vue.h.call(void 0, "div", { class: "relative" }, [renderIcon(), _vue.h.call(void 0, "div", { class: tailClasses.value })]),
+            renderContent()
+          ]
+        );
+      }
+      return _vue.h.call(void 0, 
+        "li",
+        {
+          class: itemClasses.value,
+          style: mergedStyle.value,
+          "aria-current": props.stepIndex === stepsContext.current ? "step" : void 0,
+          "aria-disabled": props.disabled || void 0,
+          ...restAttrs
+        },
+        [renderIcon(), _vue.h.call(void 0, "div", { class: tailClasses.value }), renderContent()]
+      );
+    };
+  }
+});
+var Steps = _vue.defineComponent.call(void 0, {
+  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.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getStepsContainerClasses.call(void 0, props.direction),
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      )
+    );
+    const mergedStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
+    const handleStepClick = (index) => {
+      if (!props.clickable) {
+        return;
+      }
+      emit("update:current", index);
+      emit("change", index);
+    };
+    _vue.provide.call(void 0, 
+      StepsContextKey,
+      _vue.reactive.call(void 0, {
+        current: _vue.computed.call(void 0, () => props.current),
+        status: _vue.computed.call(void 0, () => props.status),
+        direction: _vue.computed.call(void 0, () => props.direction),
+        size: _vue.computed.call(void 0, () => props.size),
+        simple: _vue.computed.call(void 0, () => props.simple),
+        clickable: _vue.computed.call(void 0, () => props.clickable),
+        handleStepClick: _vue.computed.call(void 0, () => props.clickable ? handleStepClick : void 0)
+      })
+    );
+    return () => {
+      const children = _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]) || [];
+      const { class: _class, style: _style, ...restAttrs } = attrs;
+      const stepsWithProps = children.map((child, index) => {
+        const childType = _optionalChain([child, 'optionalAccess', _3 => _3.type]);
+        const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
+        if (childName === "TigerStepsItem") {
+          const childProps = _nullishCoalesce(child.props, () => ( {}));
+          const stepItemType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
+          return _vue.h.call(void 0, 
+            stepItemType,
+            {
+              ...childProps,
+              stepIndex: index,
+              isLast: index === children.length - 1
+            },
+            _nullishCoalesce(child.children, () => ( void 0))
+          );
+        }
+        return child;
+      });
+      return _vue.h.call(void 0, 
+        "ol",
+        {
+          class: containerClasses.value,
+          style: mergedStyle.value,
+          ...restAttrs
+        },
+        stepsWithProps
+      );
+    };
+  }
+});
+var Steps_default = Steps;
+
+
+
+
+
+
+exports.StepsContextKey = StepsContextKey; exports.StepsItem = StepsItem; exports.Steps = Steps; exports.Steps_default = Steps_default;

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

@@ -1,7 +1,6 @@
-import { defineComponent, computed, h } from 'vue';
-import { classNames } from '@expcat/tigercat-core';
-
 // src/components/ChartLegend.ts
+import { defineComponent, h, computed } from "vue";
+import { classNames } from "@expcat/tigercat-core";
 var ChartLegend = defineComponent({
   name: "TigerChartLegend",
   props: {
@@ -69,9 +68,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 +85,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"
@@ -100,4 +100,7 @@ var ChartLegend = defineComponent({
 });
 var ChartLegend_default = ChartLegend;
 
-export { ChartLegend, ChartLegend_default };
+export {
+  ChartLegend,
+  ChartLegend_default
+};