@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-JM3ZZYTE.mjs

@@ -0,0 +1,181 @@
+import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { defineComponent, computed, h } from 'vue';
+import { getChartInnerRect, valueToGaugeAngle, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+
+var GaugeChart = defineComponent({
+  name: "TigerGaugeChart",
+  props: {
+    width: { type: Number, default: 280 },
+    height: { type: Number, default: 200 },
+    padding: { type: [Number, Object], default: 24 },
+    value: { type: Number, required: true },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    startAngle: { type: Number, default: 135 },
+    endAngle: { type: Number, default: 405 },
+    arcWidth: { type: Number, default: 20 },
+    showTicks: { type: Boolean, default: true },
+    tickCount: { type: Number, default: 5 },
+    valueFormatter: { type: Function },
+    label: { type: String },
+    segments: {
+      type: Array
+    },
+    trackColor: { type: String, default: "var(--tiger-border,#e5e7eb)" },
+    color: { type: String, default: "var(--tiger-primary,#2563eb)" },
+    // a11y
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
+  },
+  setup(props) {
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const radius = computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2 - 4);
+    const cx = computed(() => innerRect.value.width / 2);
+    const cy = computed(() => innerRect.value.height / 2);
+    const needleAngle = computed(
+      () => valueToGaugeAngle(props.value, props.min, props.max, props.startAngle, props.endAngle)
+    );
+    const ticks = computed(
+      () => props.showTicks ? computeGaugeTicks(
+        cx.value,
+        cy.value,
+        radius.value,
+        props.min,
+        props.max,
+        props.startAngle,
+        props.endAngle,
+        props.tickCount
+      ) : []
+    );
+    return () => {
+      const r = radius.value;
+      const c = cx.value;
+      const cY = cy.value;
+      const aw = props.arcWidth;
+      const trackPath = createGaugeArcPath(c, cY, r, props.startAngle, props.endAngle, aw);
+      const valuePath = needleAngle.value > props.startAngle ? createGaugeArcPath(c, cY, r, props.startAngle, needleAngle.value, aw) : null;
+      const segmentArcs = props.segments?.map((seg, i) => {
+        const sStart = valueToGaugeAngle(
+          seg.range[0],
+          props.min,
+          props.max,
+          props.startAngle,
+          props.endAngle
+        );
+        const sEnd = valueToGaugeAngle(
+          seg.range[1],
+          props.min,
+          props.max,
+          props.startAngle,
+          props.endAngle
+        );
+        return h("path", {
+          key: `seg-${i}`,
+          d: createGaugeArcPath(c, cY, r, sStart, sEnd, aw),
+          fill: seg.color,
+          "stroke-width": 0
+        });
+      }) ?? [];
+      const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, needleAngle.value);
+      const formattedValue = props.valueFormatter ? props.valueFormatter(props.value) : `${props.value}`;
+      return h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: classNames(props.className)
+        },
+        {
+          default: () => [
+            // Track
+            h("path", {
+              d: trackPath,
+              fill: props.trackColor,
+              "stroke-width": 0
+            }),
+            // Segments or value arc
+            ...props.segments ? segmentArcs : valuePath ? [
+              h("path", {
+                d: valuePath,
+                fill: props.color,
+                "stroke-width": 0,
+                style: { transition: "all 0.3s ease-out" }
+              })
+            ] : [],
+            // Ticks
+            ...ticks.value.map((tick, i) => [
+              h("line", {
+                key: `tick-${i}`,
+                x1: tick.x1,
+                y1: tick.y1,
+                x2: tick.x2,
+                y2: tick.y2,
+                stroke: "var(--tiger-text-secondary,#6b7280)",
+                "stroke-width": 1
+              }),
+              h(
+                "text",
+                {
+                  key: `tick-label-${i}`,
+                  x: tick.x2 + (tick.x2 - tick.x1) * 1.5,
+                  y: tick.y2 + (tick.y2 - tick.y1) * 1.5,
+                  class: chartAxisTickTextClasses,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  style: { fontSize: "10px" }
+                },
+                tick.label
+              )
+            ]).flat(),
+            // Needle
+            h("path", {
+              d: needlePath,
+              fill: "var(--tiger-text,#374151)",
+              style: { transition: "all 0.3s ease-out" }
+            }),
+            // Center dot
+            h("circle", {
+              cx: c,
+              cy: cY,
+              r: 5,
+              fill: "var(--tiger-text,#374151)"
+            }),
+            // Value text
+            h(
+              "text",
+              {
+                x: c,
+                y: cY + r * 0.35,
+                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+                "text-anchor": "middle",
+                "dominant-baseline": "middle"
+              },
+              formattedValue
+            ),
+            // Label
+            ...props.label ? [
+              h(
+                "text",
+                {
+                  x: c,
+                  y: cY + r * 0.35 + 20,
+                  class: chartAxisTickTextClasses,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle"
+                },
+                props.label
+              )
+            ] : []
+          ]
+        }
+      );
+    };
+  }
+});
+var GaugeChart_default = GaugeChart;
+
+export { GaugeChart, GaugeChart_default };

package/dist/{chunk-UWVUDZVA.js → chunk-JN63Z5E5.js}

@@ -1,29 +1,11 @@
 'use strict';
 
+var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/TimePicker.ts
-var createIcon = (path, className) => {
-  return vue.h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: tigercatCore.icon20ViewBox,
-      fill: "currentColor"
-    },
-    [
-      vue.h("path", {
-        "fill-rule": "evenodd",
-        d: path,
-        "clip-rule": "evenodd"
-      })
-    ]
-  );
-};
-var ClockIcon = createIcon(tigercatCore.ClockIconPath, "w-5 h-5");
-var CloseIcon = createIcon(tigercatCore.TimePickerCloseIconPath, "w-4 h-4");
+var ClockIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.ClockIconPath, "w-5 h-5");
+var CloseIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.TimePickerCloseIconPath, "w-4 h-4");
 var TimePicker = vue.defineComponent({
   name: "TigerTimePicker",
   inheritAttrs: false,

package/dist/chunk-JSIQIWYP.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Statistic.ts
+var Statistic = vue.defineComponent({
+  name: "TigerStatistic",
+  props: {
+    title: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    precision: { type: Number, default: void 0 },
+    prefix: { type: String, default: void 0 },
+    suffix: { type: String, default: void 0 },
+    groupSeparator: { type: Boolean, default: false },
+    size: { type: String, default: "md" }
+  },
+  setup(props, { attrs }) {
+    const formatted = vue.computed(
+      () => tigercatCore.formatStatisticValue(props.value, props.precision, props.groupSeparator)
+    );
+    return () => vue.h(
+      "div",
+      {
+        class: tigercatCore.classNames(tigercatCore.statisticBaseClasses, tigercatCore.coerceClassValue(attrs.class))
+      },
+      [
+        props.title ? vue.h("div", { class: tigercatCore.getStatisticTitleClasses(props.size) }, props.title) : null,
+        vue.h("div", { class: tigercatCore.getStatisticValueClasses(props.size) }, [
+          props.prefix ? vue.h("span", { class: tigercatCore.statisticPrefixClasses }, props.prefix) : null,
+          vue.h("span", null, formatted.value),
+          props.suffix ? vue.h("span", { class: tigercatCore.statisticSuffixClasses }, props.suffix) : null
+        ])
+      ]
+    );
+  }
+});
+var Statistic_default = Statistic;
+
+exports.Statistic = Statistic;
+exports.Statistic_default = Statistic_default;

package/dist/{chunk-UKJSG75K.js → chunk-KFE7T7CN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkOOKS4KMK_js = require('./chunk-OOKS4KMK.js');
+var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -40,7 +40,7 @@ var MessageContainer = vue.defineComponent({
       const a11yRole = message.type === "error" ? "alert" : "status";
       const ariaLive = message.type === "error" ? "assertive" : "polite";
       const children = [
-        chunkOOKS4KMK_js.createStatusIconWithLoading(
+        chunkJCMGBKS6_js.createStatusIconWithLoading(
           iconPath,
           iconClass,
           message.type === "loading",
@@ -58,7 +58,7 @@ var MessageContainer = vue.defineComponent({
               "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
               type: "button"
             },
-            chunkOOKS4KMK_js.createStatusIcon(tigercatCore.messageCloseIconPath, "w-4 h-4")
+            chunkJCMGBKS6_js.createStatusIcon(tigercatCore.messageCloseIconPath, "w-4 h-4")
           )
         );
       }

package/dist/chunk-KI35GUL5.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
+var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
+var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var HeatmapChart = vue.defineComponent({
+  name: "TigerHeatmapChart",
+  props: {
+    width: { type: Number, default: 400 },
+    height: { type: Number, default: 300 },
+    padding: { type: [Number, Object], default: 40 },
+    data: { type: Array, required: true },
+    xLabels: { type: Array, required: true },
+    yLabels: { type: Array, required: true },
+    minColor: { type: String, default: "#f0f9ff" },
+    maxColor: { type: String, default: "#2563eb" },
+    cellRadius: { type: Number, default: 2 },
+    cellGap: { type: Number, default: 1 },
+    showValues: { type: Boolean, default: false },
+    valueFormatter: { type: Function },
+    // Interaction
+    hoverable: { type: Boolean, default: false },
+    hoveredIndex: { type: Number, default: void 0 },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    selectable: { type: Boolean, default: false },
+    selectedIndex: { type: Number, default: void 0 },
+    // Tooltip
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    // a11y
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "cell-click", "cell-hover"],
+  setup(props, { emit }) {
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      wrapperClasses: _wrapperClasses
+    } = chunkFLAJKB2O_js.useChartInteraction({
+      hoverable: vue.computed(() => props.hoverable),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: vue.computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: vue.computed(() => props.activeOpacity),
+      inactiveOpacity: vue.computed(() => props.inactiveOpacity),
+      emit,
+      getData: (index) => props.data[index],
+      eventNames: { hover: "cell-hover", click: "cell-click" }
+    });
+    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
+    const cells = vue.computed(
+      () => tigercatCore.computeHeatmapCells(props.data, {
+        xLabels: props.xLabels,
+        yLabels: props.yLabels,
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        cellGap: props.cellGap,
+        minColor: props.minColor,
+        maxColor: props.maxColor
+      })
+    );
+    const tooltipContent = vue.computed(
+      () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex.value, cells.value, void 0, (cell) => {
+        const val = props.valueFormatter ? props.valueFormatter(cell.value) : `${cell.value}`;
+        return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+      })
+    );
+    return () => {
+      const interactive = props.hoverable || props.selectable;
+      const rect = innerRect.value;
+      const chart = vue.h(
+        chunkFCV4ML6I_js.ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: tigercatCore.classNames(props.className)
+        },
+        {
+          default: () => {
+            const xAxisLabels = props.xLabels.map((label, i) => {
+              const cellW = (rect.width - props.cellGap * (props.xLabels.length - 1)) / props.xLabels.length;
+              return vue.h(
+                "text",
+                {
+                  key: `x-${i}`,
+                  x: i * (cellW + props.cellGap) + cellW / 2,
+                  y: rect.height + 16,
+                  class: tigercatCore.chartAxisTickTextClasses,
+                  "text-anchor": "middle"
+                },
+                label
+              );
+            });
+            const yAxisLabels = props.yLabels.map((label, i) => {
+              const cellH = (rect.height - props.cellGap * (props.yLabels.length - 1)) / props.yLabels.length;
+              return vue.h(
+                "text",
+                {
+                  key: `y-${i}`,
+                  x: -8,
+                  y: i * (cellH + props.cellGap) + cellH / 2,
+                  class: tigercatCore.chartAxisTickTextClasses,
+                  "text-anchor": "end",
+                  "dominant-baseline": "middle"
+                },
+                label
+              );
+            });
+            const cellElems = cells.value.map((cell, idx) => {
+              const opacity = tigercatCore.getChartElementOpacity(idx, activeIndex.value, {
+                activeOpacity: props.activeOpacity,
+                inactiveOpacity: props.inactiveOpacity
+              });
+              const elems = [
+                vue.h("rect", {
+                  key: `cell-${idx}`,
+                  x: cell.x,
+                  y: cell.y,
+                  width: cell.w,
+                  height: cell.h,
+                  rx: props.cellRadius,
+                  fill: cell.fill,
+                  opacity,
+                  class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                  style: { transition: "opacity 0.2s ease-out" },
+                  onMouseenter: (e) => handleMouseEnter(idx, e),
+                  onMousemove: handleMouseMove,
+                  onMouseleave: handleMouseLeave,
+                  onClick: () => handleClick(idx)
+                })
+              ];
+              if (props.showValues) {
+                const val = props.valueFormatter ? props.valueFormatter(cell.value) : `${cell.value}`;
+                elems.push(
+                  vue.h(
+                    "text",
+                    {
+                      key: `val-${idx}`,
+                      x: cell.x + cell.w / 2,
+                      y: cell.y + cell.h / 2,
+                      class: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                      "text-anchor": "middle",
+                      "dominant-baseline": "middle"
+                    },
+                    val
+                  )
+                );
+              }
+              return elems;
+            }).flat();
+            return [...xAxisLabels, ...yAxisLabels, ...cellElems];
+          }
+        }
+      );
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+        content: tooltipContent.value,
+        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
+    };
+  }
+});
+var HeatmapChart_default = HeatmapChart;
+
+exports.HeatmapChart = HeatmapChart;
+exports.HeatmapChart_default = HeatmapChart_default;

package/dist/{chunk-YXN3YY5Y.mjs → chunk-KOTSKHPQ.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { classNames, getCardClasses, cardSizeClasses, mergeStyleValues, coerceClassValue, cardCoverWrapperClasses, cardCoverClasses, cardActionsClasses, cardFooterClasses, cardHeaderClasses } from '@expcat/tigercat-core';
+import { classNames, getCardClasses, cardDirectionClasses, cardSizeClasses, mergeStyleValues, coerceClassValue, cardCoverWrapperClasses, cardCoverClasses, cardActionsClasses, cardFooterClasses, cardHorizontalBodyClasses, cardHeaderClasses } from '@expcat/tigercat-core';
 
 // src/components/Card.ts
 var Card = defineComponent({
@@ -30,6 +30,14 @@ var Card = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Card layout direction
+     * @default 'vertical'
+     */
+    direction: {
+      type: String,
+      default: "vertical"
+    },
     /**
      * Cover image URL
      */
@@ -63,9 +71,11 @@ var Card = defineComponent({
     const cardClasses = computed(
       () => classNames(
         getCardClasses(props.variant, props.hoverable),
+        cardDirectionClasses[props.direction],
         !props.cover && cardSizeClasses[props.size]
       )
     );
+    const isHorizontal = computed(() => props.direction === "horizontal");
     const sectionSizeClass = computed(() => props.cover ? cardSizeClasses[props.size] : void 0);
     const getSectionClasses = (baseClasses) => classNames(baseClasses, sectionSizeClass.value);
     return () => {
@@ -84,19 +94,27 @@ var Card = defineComponent({
             h("img", {
               src: props.cover,
               alt: props.coverAlt,
-              class: cardCoverClasses
+              class: classNames(
+                cardCoverClasses,
+                isHorizontal.value && "h-full w-48 object-cover"
+              )
             })
           ]) : null,
-          slots.header ? h("div", { class: getSectionClasses(cardHeaderClasses) }, slots.header()) : null,
-          slots.default ? h("div", { class: sectionSizeClass.value }, slots.default()) : null,
-          slots.footer ? h("div", { class: getSectionClasses(cardFooterClasses) }, slots.footer()) : null,
-          slots.actions ? h(
-            "div",
-            {
-              class: getSectionClasses(classNames(cardActionsClasses, cardFooterClasses))
-            },
-            slots.actions()
-          ) : null
+          (() => {
+            const bodyChildren = [
+              slots.header ? h("div", { class: getSectionClasses(cardHeaderClasses) }, slots.header()) : null,
+              slots.default ? h("div", { class: sectionSizeClass.value }, slots.default()) : null,
+              slots.footer ? h("div", { class: getSectionClasses(cardFooterClasses) }, slots.footer()) : null,
+              slots.actions ? h(
+                "div",
+                {
+                  class: getSectionClasses(classNames(cardActionsClasses, cardFooterClasses))
+                },
+                slots.actions()
+              ) : null
+            ];
+            return isHorizontal.value ? h("div", { class: cardHorizontalBodyClasses }, bodyChildren) : bodyChildren;
+          })()
         ]
       );
     };