@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-I77ACTTI.mjs → chunk-YZP4K6KI.mjs}

@@ -1,6 +1,6 @@
-import { RadioGroupKey } from './chunk-SHXM2ZXC.mjs';
+import { RadioGroupKey } from './chunk-Y4V7BOVR.mjs';
 import { defineComponent, getCurrentInstance, inject, computed, ref, h } from 'vue';
-import { getRadioColorClasses, getRadioVisualClasses, getRadioDotClasses, getRadioLabelClasses, classNames, coerceClassValue } from '@expcat/tigercat-core';
+import { getRadioVisualClasses, defaultRadioColors, getRadioDotClasses, getRadioLabelClasses, classNames, radioRootBaseClasses, coerceClassValue } from '@expcat/tigercat-core';
 
 var Radio = defineComponent({
   name: "TigerRadio",
@@ -91,29 +91,28 @@ var Radio = defineComponent({
       if (isInGroup.value) return groupContext.value?.value === props.value;
       return internalChecked.value;
     });
-    const colors = getRadioColorClasses();
-    const radioClasses = computed(() => {
-      return getRadioVisualClasses({
+    const radioClasses = computed(
+      () => getRadioVisualClasses({
         size: actualSize.value,
         checked: !!isChecked.value,
         disabled: actualDisabled.value,
-        colors
-      });
-    });
-    const dotClasses = computed(() => {
-      return getRadioDotClasses({
+        colors: defaultRadioColors
+      })
+    );
+    const dotClasses = computed(
+      () => getRadioDotClasses({
         size: actualSize.value,
         checked: !!isChecked.value,
-        colors
-      });
-    });
-    const labelClasses = computed(() => {
-      return getRadioLabelClasses({
+        colors: defaultRadioColors
+      })
+    );
+    const labelClasses = computed(
+      () => getRadioLabelClasses({
         size: actualSize.value,
         disabled: actualDisabled.value,
-        colors
-      });
-    });
+        colors: defaultRadioColors
+      })
+    );
     const handleChange = (event) => {
       if (actualDisabled.value) {
         event.preventDefault();
@@ -138,7 +137,7 @@ var Radio = defineComponent({
     return () => {
       const rootStyle = [attrs.style, props.style];
       const rootClass = classNames(
-        "inline-flex items-center",
+        radioRootBaseClasses,
         props.className,
         coerceClassValue(attrs.class)
       );

package/dist/chunk-ZA2PLF7O.mjs

@@ -0,0 +1,60 @@
+import { RowContextKey } from './chunk-2SCIJ2RW.mjs';
+import { defineComponent, inject, computed, h } from 'vue';
+import { classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses, getColMergedStyleVars, getGutterStyles } from '@expcat/tigercat-core';
+
+var Col = defineComponent({
+  name: "TigerCol",
+  props: {
+    /** Column span (1-24) or responsive object @default 24 */
+    span: {
+      type: [Number, Object],
+      default: 24
+    },
+    /** Column offset (0-24) or responsive object @default 0 */
+    offset: {
+      type: [Number, Object],
+      default: 0
+    },
+    /** Column order or responsive object */
+    order: {
+      type: [Number, Object]
+    },
+    /** Flex layout style */
+    flex: {
+      type: [String, Number]
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const rowContext = inject(RowContextKey, null);
+    const gutter = computed(() => rowContext?.gutter.value ?? 0);
+    const isFlexSpanMode = computed(() => props.flex !== void 0 && props.span === 0);
+    const colClasses = computed(
+      () => classNames(
+        isFlexSpanMode.value ? "" : getSpanClasses(props.span),
+        getOffsetClasses(props.offset),
+        getOrderClasses(props.order),
+        getFlexClasses(props.flex)
+      )
+    );
+    const colMergedStyle = computed(() => ({
+      ...getGutterStyles(gutter.value).colStyle,
+      ...getColMergedStyleVars(
+        isFlexSpanMode.value ? void 0 : props.span,
+        props.offset,
+        props.order,
+        props.flex
+      )
+    }));
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        class: [colClasses.value, attrs.class],
+        style: [colMergedStyle.value, attrs.style]
+      },
+      slots.default?.()
+    );
+  }
+});
+
+export { Col };

package/dist/chunk-ZED7TU62.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Link.ts
+var Link = vue.defineComponent({
+  name: "TigerLink",
+  props: {
+    /** @default 'primary' */
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    /** @default 'md' */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** @default false */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    href: { type: String },
+    target: {
+      type: String
+    },
+    /** Auto-set to 'noopener noreferrer' when target="_blank" */
+    rel: { type: String },
+    /** @default true */
+    underline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: {
+    click: (event) => event instanceof MouseEvent
+  },
+  setup(props, { slots, emit, attrs }) {
+    const linkClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.linkBaseClasses,
+        tigercatCore.getLinkVariantClasses(props.variant, void 0, { disabled: props.disabled }),
+        tigercatCore.linkSizeClasses[props.size],
+        props.underline && "hover:underline",
+        props.disabled && tigercatCore.linkDisabledClasses
+      )
+    );
+    const computedRel = vue.computed(() => tigercatCore.getSecureRel(props.target, props.rel));
+    const handleClick = (event) => {
+      if (props.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      emit("click", event);
+    };
+    const handleKeydown = (event) => {
+      if (props.disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    return () => vue.h(
+      "a",
+      {
+        ...attrs,
+        class: [linkClasses.value, attrs.class],
+        href: props.disabled ? void 0 : props.href,
+        target: props.target,
+        rel: computedRel.value,
+        "aria-disabled": props.disabled ? "true" : void 0,
+        tabindex: props.disabled ? -1 : attrs.tabindex,
+        onClick: handleClick,
+        onKeydown: handleKeydown
+      },
+      slots.default?.()
+    );
+  }
+});
+var Link_default = Link;
+
+exports.Link = Link;
+exports.Link_default = Link_default;

package/dist/{chunk-6NHAWLQA.mjs → chunk-ZLYXAZUY.mjs}

@@ -1,24 +1,18 @@
-import { useChartInteraction } from './chunk-264DR3I2.mjs';
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
 import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { ChartLegend } from './chunk-F5HOHSFH.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
 import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
-import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, getNumberExtent, createLinearScale, DEFAULT_CHART_COLORS, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { defineComponent, ref, onMounted, computed, h } from 'vue';
+import { getScatterGradientPrefix, getChartInnerRect, getNumberExtent, createLinearScale, resolveChartPalette, getChartElementOpacity, getScatterHoverSize, buildChartLegendItems, resolveChartTooltipContent, SCATTER_ENTRANCE_KEYFRAMES, classNames, getScatterHoverShadow, scatterPointTransitionClasses, SCATTER_ENTRANCE_CLASS, getScatterPointPath } from '@expcat/tigercat-core';
 
 var ScatterChart = defineComponent({
   name: "TigerScatterChart",
   props: {
-    width: {
-      type: Number,
-      default: 320
-    },
-    height: {
-      type: Number,
-      default: 200
-    },
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: 200 },
     padding: {
       type: [Number, Object],
       default: 24
@@ -27,63 +21,33 @@ var ScatterChart = defineComponent({
       type: Array,
       required: true
     },
-    xScale: {
-      type: Object
-    },
-    yScale: {
-      type: Object
-    },
-    pointSize: {
-      type: Number,
-      default: 4
-    },
+    xScale: { type: Object },
+    yScale: { type: Object },
+    pointSize: { type: Number, default: 6 },
     pointColor: {
       type: String,
       default: "var(--tiger-primary,#2563eb)"
     },
-    pointOpacity: {
-      type: Number
-    },
-    showGrid: {
-      type: Boolean,
-      default: true
-    },
-    showAxis: {
-      type: Boolean,
-      default: true
-    },
-    showXAxis: {
-      type: Boolean,
-      default: true
-    },
-    showYAxis: {
-      type: Boolean,
-      default: true
-    },
-    includeZero: {
-      type: Boolean,
-      default: false
-    },
-    xAxisLabel: {
-      type: String
-    },
-    yAxisLabel: {
-      type: String
-    },
-    xTicks: {
-      type: Number,
-      default: 5
-    },
-    yTicks: {
-      type: Number,
-      default: 5
-    },
-    xTickValues: {
-      type: Array
-    },
-    yTickValues: {
-      type: Array
-    },
+    pointOpacity: { type: Number },
+    pointStyle: {
+      type: String,
+      default: "circle"
+    },
+    gradient: { type: Boolean, default: false },
+    animated: { type: Boolean, default: false },
+    pointBorderWidth: { type: Number, default: 0 },
+    pointBorderColor: { type: String, default: "white" },
+    showGrid: { type: Boolean, default: true },
+    showAxis: { type: Boolean, default: true },
+    showXAxis: { type: Boolean, default: true },
+    showYAxis: { type: Boolean, default: true },
+    includeZero: { type: Boolean, default: false },
+    xAxisLabel: { type: String },
+    yAxisLabel: { type: String },
+    xTicks: { type: Number, default: 5 },
+    yTicks: { type: Number, default: 5 },
+    xTickValues: { type: Array },
+    yTickValues: { type: Array },
     xTickFormat: {
       type: Function
     },
@@ -94,79 +58,49 @@ var ScatterChart = defineComponent({
       type: String,
       default: "solid"
     },
-    gridStrokeWidth: {
-      type: Number,
-      default: 1
-    },
-    // Interaction props
-    hoverable: {
-      type: Boolean,
-      default: false
-    },
+    gridStrokeWidth: { type: Number, default: 1 },
+    // 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
-    },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    selectable: { type: Boolean, default: false },
     selectedIndex: {
       type: Number,
       default: void 0
     },
-    // Legend props
-    showLegend: {
-      type: Boolean,
-      default: false
-    },
+    // Legend
+    showLegend: { type: Boolean, default: false },
     legendPosition: {
       type: String,
       default: "bottom"
     },
-    legendMarkerSize: {
-      type: Number,
-      default: 10
-    },
-    legendGap: {
-      type: Number,
-      default: 8
-    },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
     legendFormatter: {
       type: Function
     },
-    // Tooltip props
-    showTooltip: {
-      type: Boolean,
-      default: true
-    },
+    // Tooltip
+    showTooltip: { type: Boolean, default: true },
     tooltipFormatter: {
       type: Function
     },
     // Other
-    colors: {
-      type: Array
-    },
-    title: {
-      type: String
-    },
-    desc: {
-      type: String
-    },
-    className: {
-      type: String
-    }
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "point-click", "point-hover"],
   setup(props, { emit }) {
+    const gradientPrefix = getScatterGradientPrefix();
+    const mounted = ref(false);
+    onMounted(() => {
+      if (props.animated) mounted.value = true;
+    });
     const {
       tooltipPosition,
       resolvedHoveredIndex,
@@ -182,9 +116,9 @@ var ScatterChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
@@ -205,11 +139,9 @@ var ScatterChart = defineComponent({
       const extent = getNumberExtent(yValues.value, { includeZero: props.includeZero });
       return createLinearScale(extent, [innerRect.value.height, 0]);
     });
-    const showXAxis = computed(() => props.showAxis && props.showXAxis);
-    const showYAxis = computed(() => props.showAxis && props.showYAxis);
-    const palette = computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : props.pointColor ? [props.pointColor] : [...DEFAULT_CHART_COLORS]
-    );
+    const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
+    const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
+    const palette = computed(() => resolveChartPalette(props.colors, props.pointColor));
     const points = computed(
       () => props.data.map((item, index) => {
         const color = item.color ?? palette.value[index % palette.value.length];
@@ -217,36 +149,58 @@ var ScatterChart = defineComponent({
           activeOpacity: props.activeOpacity,
           inactiveOpacity: props.inactiveOpacity
         });
+        const isHovered = resolvedHoveredIndex.value === index;
+        const baseSize = item.size ?? props.pointSize;
+        const r = isHovered ? getScatterHoverSize(baseSize) : baseSize;
         return {
           cx: resolvedXScale.value.map(item.x),
           cy: resolvedYScale.value.map(item.y),
-          r: item.size ?? props.pointSize,
+          r,
+          baseSize,
           color,
           opacity: props.pointOpacity ?? opacity,
+          isHovered,
           datum: item
         };
       })
     );
     const legendItems = computed(
-      () => props.data.map((item, index) => ({
-        index,
-        label: props.legendFormatter ? props.legendFormatter(item, index) : item.label ?? `(${item.x}, ${item.y})`,
-        color: item.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = computed(
-      () => props.tooltipFormatter ?? ((datum, index) => {
-        const label = datum.label ?? `Point ${index + 1}`;
-        return `${label}: (${datum.x}, ${datum.y})`;
+      () => buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d, i) => props.legendFormatter ? props.legendFormatter(d, i) : d.label ?? `(${d.x}, ${d.y})`,
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = computed(() => {
-      if (resolvedHoveredIndex.value === null) return "";
-      const datum = props.data[resolvedHoveredIndex.value];
-      return datum ? formatTooltip.value(datum, resolvedHoveredIndex.value) : "";
-    });
+    const tooltipContent = computed(
+      () => resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const label = datum.label ?? `Point ${index + 1}`;
+          return `${label}: (${datum.x}, ${datum.y})`;
+        }
+      )
+    );
     return () => {
+      const defs = props.gradient ? h(
+        "defs",
+        null,
+        palette.value.map(
+          (color, i) => h(
+            "radialGradient",
+            { id: `${gradientPrefix}-${i}`, cx: "35%", cy: "35%", r: "65%" },
+            [
+              h("stop", { offset: "0%", "stop-color": "#fff", "stop-opacity": "0.5" }),
+              h("stop", { offset: "50%", "stop-color": color, "stop-opacity": "0.95" }),
+              h("stop", { offset: "100%", "stop-color": color, "stop-opacity": "1" })
+            ]
+          )
+        )
+      ) : null;
+      const animStyle = props.animated && mounted.value ? h("style", null, SCATTER_ENTRANCE_KEYFRAMES) : null;
       const chart = h(
         ChartCanvas,
         {
@@ -259,6 +213,8 @@ var ScatterChart = defineComponent({
         },
         {
           default: () => [
+            defs,
+            animStyle,
             props.showGrid ? h(ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -270,7 +226,7 @@ var ScatterChart = defineComponent({
               lineStyle: props.gridLineStyle,
               strokeWidth: props.gridStrokeWidth
             }) : null,
-            showXAxis.value ? h(ChartAxis, {
+            shouldShowXAxis.value ? h(ChartAxis, {
               scale: resolvedXScale.value,
               orientation: "bottom",
               y: innerRect.value.height,
@@ -279,7 +235,7 @@ var ScatterChart = defineComponent({
               tickFormat: props.xTickFormat,
               label: props.xAxisLabel
             }) : null,
-            showYAxis.value ? h(ChartAxis, {
+            shouldShowYAxis.value ? h(ChartAxis, {
               scale: resolvedYScale.value,
               orientation: "left",
               ticks: props.yTicks,
@@ -289,23 +245,28 @@ var ScatterChart = defineComponent({
             }) : null,
             h(
               ChartSeries,
+              { data: props.data, type: "scatter" },
               {
-                data: props.data,
-                type: "scatter"
-              },
-              {
-                default: () => points.value.map(
-                  (point, index) => h("circle", {
-                    key: `point-${index}`,
-                    cx: point.cx,
-                    cy: point.cy,
-                    r: point.r,
-                    fill: point.color,
+                default: () => points.value.map((point, index) => {
+                  const paletteIdx = index % palette.value.length;
+                  const fill = props.gradient ? `url(#${gradientPrefix}-${paletteIdx})` : point.color;
+                  const interactive = props.hoverable || props.selectable;
+                  const filterStyle = point.isHovered ? getScatterHoverShadow(point.color) : void 0;
+                  const animDelay = props.animated && mounted.value ? `${index * 60}ms` : void 0;
+                  const styleStr = [
+                    filterStyle ? `filter:${filterStyle}` : "",
+                    animDelay ? `animation:${SCATTER_ENTRANCE_CLASS} 500ms cubic-bezier(.34,1.56,.64,1) ${animDelay} both` : ""
+                  ].filter(Boolean).join(";");
+                  const shared = {
+                    fill,
                     opacity: point.opacity,
+                    stroke: props.pointBorderColor,
+                    "stroke-width": props.pointBorderWidth,
                     class: classNames(
-                      "transition-opacity duration-150",
-                      (props.hoverable || props.selectable) && "cursor-pointer"
+                      scatterPointTransitionClasses,
+                      interactive && "cursor-pointer"
                     ),
+                    style: styleStr || void 0,
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
                     "aria-label": point.datum.label ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
@@ -315,8 +276,23 @@ var ScatterChart = defineComponent({
                     onMouseleave: handleMouseLeave,
                     onClick: () => handleClick(index),
                     onKeydown: (e) => handleKeyDown(e, index)
-                  })
-                )
+                  };
+                  if (props.pointStyle === "circle") {
+                    return h("circle", {
+                      key: `point-${index}`,
+                      cx: point.cx,
+                      cy: point.cy,
+                      r: point.r,
+                      ...shared
+                    });
+                  }
+                  return h("path", {
+                    key: `point-${index}`,
+                    d: getScatterPointPath(props.pointStyle, point.r),
+                    transform: `translate(${point.cx},${point.cy})`,
+                    ...shared
+                  });
+                })
               }
             )
           ].filter(Boolean)

package/dist/chunk-ZNVQ2OFX.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Space.ts
+var Space = vue.defineComponent({
+  name: "TigerSpace",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    size: {
+      type: [String, Number],
+      default: "md"
+    },
+    align: {
+      type: String,
+      default: "start"
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const classes = vue.computed(() => tigercatCore.getSpaceClasses(props));
+    const style = vue.computed(() => tigercatCore.getSpaceStyle(props.size));
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        class: [classes.value, attrs.class],
+        style: [style.value, attrs.style]
+      },
+      slots.default?.()
+    );
+  }
+});
+var Space_default = Space;
+
+exports.Space = Space;
+exports.Space_default = Space_default;