@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/chunk-QZ5OPNL4.mjs

@@ -0,0 +1,75 @@
+import { defineComponent, ref, watch, onBeforeUnmount, computed, h } from 'vue';
+import { canAnimateStatisticValue, createStatisticNumberAnimation, formatStatisticValue, classNames, statisticBaseClasses, coerceClassValue, getStatisticTitleClasses, getStatisticValueClasses, statisticPrefixClasses, statisticSuffixClasses } from '@expcat/tigercat-core';
+
+// src/components/Statistic.ts
+var Statistic = 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 },
+    animated: { type: Boolean, default: false },
+    animationDuration: { type: Number, default: void 0 },
+    size: { type: String, default: "md" }
+  },
+  setup(props, { attrs }) {
+    const initialValue = props.animated && canAnimateStatisticValue(props.value) ? 0 : props.value;
+    const displayValue = ref(initialValue);
+    const currentNumber = ref(canAnimateStatisticValue(initialValue) ? initialValue : 0);
+    let controller = null;
+    const stopAnimation = () => {
+      controller?.stop();
+      controller = null;
+    };
+    watch(
+      () => [props.value, props.animated, props.animationDuration],
+      () => {
+        stopAnimation();
+        if (!props.animated || !canAnimateStatisticValue(props.value)) {
+          displayValue.value = props.value;
+          if (canAnimateStatisticValue(props.value)) currentNumber.value = props.value;
+          return;
+        }
+        controller = createStatisticNumberAnimation({
+          from: currentNumber.value,
+          to: props.value,
+          duration: props.animationDuration,
+          onUpdate: (next) => {
+            currentNumber.value = next;
+            displayValue.value = next;
+          },
+          onComplete: () => {
+            currentNumber.value = props.value;
+            displayValue.value = props.value;
+            controller = null;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(stopAnimation);
+    const formatted = computed(
+      () => formatStatisticValue(displayValue.value, props.precision, props.groupSeparator)
+    );
+    return () => h(
+      "div",
+      {
+        class: classNames(statisticBaseClasses, coerceClassValue(attrs.class))
+      },
+      [
+        props.title ? h("div", { class: getStatisticTitleClasses(props.size) }, props.title) : null,
+        h("div", { class: getStatisticValueClasses(props.size) }, [
+          props.prefix ? h("span", { class: statisticPrefixClasses }, props.prefix) : null,
+          h("span", null, formatted.value),
+          props.suffix ? h("span", { class: statisticSuffixClasses }, props.suffix) : null
+        ])
+      ]
+    );
+  }
+});
+var Statistic_default = Statistic;
+
+export { Statistic, Statistic_default };

package/dist/chunk-RDJZOMI6.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Segmented.ts
+var Segmented = vue.defineComponent({
+  name: "TigerSegmented",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    block: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function handleSelect(option) {
+      if (option.disabled || props.disabled) return;
+      if (option.value === props.modelValue) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value);
+    }
+    return () => vue.h(
+      "div",
+      {
+        class: tigercatCore.classNames(
+          tigercatCore.getSegmentedContainerClasses(props.size, props.block),
+          tigercatCore.coerceClassValue(attrs.class)
+        ),
+        style: tigercatCore.getSegmentedContainerStyle(props.options.length),
+        role: "radiogroup"
+      },
+      [
+        vue.h("div", {
+          "data-tiger-segmented-indicator": "true",
+          "aria-hidden": "true",
+          class: tigercatCore.getSegmentedIndicatorClasses(props.size),
+          style: tigercatCore.getSegmentedIndicatorStyle(
+            props.options.findIndex((opt) => opt.value === props.modelValue),
+            props.options.length,
+            props.size
+          )
+        }),
+        ...props.options.map((opt) => {
+          const selected = opt.value === props.modelValue;
+          const isDisabled = !!opt.disabled || props.disabled;
+          return vue.h(
+            "label",
+            {
+              key: opt.value,
+              class: tigercatCore.classNames(
+                tigercatCore.getSegmentedOptionClasses(props.size, selected, isDisabled),
+                props.block ? "flex-1 text-center" : ""
+              ),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled,
+              onClick: () => handleSelect(opt)
+            },
+            [vue.h("span", null, opt.label)]
+          );
+        })
+      ]
+    );
+  }
+});
+var Segmented_default = Segmented;
+
+exports.Segmented = Segmented;
+exports.Segmented_default = Segmented_default;

package/dist/{chunk-SAMKKXAW.mjs → chunk-REF5Q6PG.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContextKey } from './chunk-3ICMBQPM.mjs';
+import { DropdownContextKey } from './chunk-FRMMT3K3.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
 import { classNames, getDropdownItemClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 

package/dist/{chunk-UHGRUTGW.js → chunk-RHCW2WXG.js}

@@ -60,6 +60,9 @@ var CollapsePanel = vue.defineComponent({
     const isActive = vue.computed(() => {
       return tigercatCore.isPanelActive(props.panelKey, collapseContext.activeKeys);
     });
+    const contentRef = vue.ref();
+    const initialContentStyle = tigercatCore.getInitialCollapseContentStyle(isActive.value);
+    let transitionController;
     const panelClasses = vue.computed(() => {
       return tigercatCore.classNames(
         tigercatCore.getCollapsePanelClasses(collapseContext.ghost, props.className),
@@ -86,6 +89,23 @@ var CollapsePanel = vue.defineComponent({
         collapseContext.handlePanelClick(props.panelKey);
       }
     };
+    vue.onMounted(() => {
+      if (!contentRef.value) return;
+      transitionController = tigercatCore.createCollapseTransitionController(contentRef.value, {
+        expanded: isActive.value
+      });
+    });
+    vue.watch(
+      isActive,
+      (expanded) => {
+        transitionController?.update(expanded);
+      },
+      { flush: "post" }
+    );
+    vue.onBeforeUnmount(() => {
+      transitionController?.dispose();
+      transitionController = void 0;
+    });
     return () => {
       const headerSlot = slots.header?.();
       const extraSlot = slots.extra?.();
@@ -142,11 +162,10 @@ var CollapsePanel = vue.defineComponent({
       const content = vue.h(
         "div",
         {
+          ref: contentRef,
+          "data-tiger-collapse-content": "",
           class: tigercatCore.collapsePanelContentWrapperClasses,
-          style: {
-            maxHeight: isActive.value ? "none" : "0",
-            opacity: isActive.value ? "1" : "0"
-          }
+          style: initialContentStyle
         },
         [
           vue.h(

package/dist/chunk-RKU54YLW.mjs

@@ -0,0 +1,283 @@
+import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount, h, Teleport } from 'vue';
+import { getPreviewNavState, calculateTransform, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, imageViewerIcons, imagePreviewCounterClasses, classNames, imagePreviewNavBtnClasses, imagePreviewWrapperClasses, clampScale, normalizeRotation, previewCloseIconPath, prevIconPath, nextIconPath, zoomOutIconPath, resetIconPath, zoomInIconPath } from '@expcat/tigercat-core';
+
+// src/components/ImagePreview.ts
+var svgIcon = (d, cls = "w-5 h-5") => h(
+  "svg",
+  {
+    class: cls,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  },
+  [
+    h("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d
+    })
+  ]
+);
+var ImagePreview = defineComponent({
+  name: "TigerImagePreview",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: false },
+    images: { type: Array, default: () => [] },
+    currentIndex: { type: Number, default: 0 },
+    zIndex: { type: Number, default: 1050 },
+    maskClosable: { type: Boolean, default: true },
+    scaleStep: { type: Number, default: 0.5 },
+    minScale: { type: Number, default: 0.25 },
+    maxScale: { type: Number, default: 5 }
+  },
+  emits: ["update:open", "update:currentIndex", "scale-change"],
+  setup(props, { emit }) {
+    const scale = ref(1);
+    const rotation = ref(0);
+    const offsetX = ref(0);
+    const offsetY = ref(0);
+    const index = ref(props.currentIndex);
+    const dragging = ref(false);
+    const dragStart = ref({ x: 0, y: 0, ox: 0, oy: 0 });
+    const resetTransform = () => {
+      scale.value = 1;
+      rotation.value = 0;
+      offsetX.value = 0;
+      offsetY.value = 0;
+    };
+    watch(
+      () => props.currentIndex,
+      (val) => {
+        index.value = val;
+        resetTransform();
+      }
+    );
+    const isOpen = computed(() => props.open);
+    watch(
+      () => isOpen.value,
+      (val) => {
+        if (val) {
+          resetTransform();
+          index.value = props.currentIndex;
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+      }
+    );
+    const navState = computed(() => getPreviewNavState(index.value, props.images.length));
+    const handleClose = () => {
+      emit("update:open", false);
+    };
+    const handleZoomIn = () => {
+      scale.value = clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
+      emit("scale-change", scale.value);
+    };
+    const handleZoomOut = () => {
+      scale.value = clampScale(scale.value - props.scaleStep, props.minScale, props.maxScale);
+      emit("scale-change", scale.value);
+    };
+    const handleReset = () => {
+      resetTransform();
+      emit("scale-change", 1);
+    };
+    const handleRotateLeft = () => {
+      rotation.value = normalizeRotation(rotation.value - 90);
+    };
+    const handleRotateRight = () => {
+      rotation.value = normalizeRotation(rotation.value + 90);
+    };
+    const handlePrev = () => {
+      if (navState.value.hasPrev) {
+        index.value--;
+        resetTransform();
+        emit("update:currentIndex", index.value);
+      }
+    };
+    const handleNext = () => {
+      if (navState.value.hasNext) {
+        index.value++;
+        resetTransform();
+        emit("update:currentIndex", index.value);
+      }
+    };
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -props.scaleStep : props.scaleStep;
+      scale.value = clampScale(scale.value + delta, props.minScale, props.maxScale);
+      emit("scale-change", scale.value);
+    };
+    const handleMouseDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      dragging.value = true;
+      dragStart.value = {
+        x: e.clientX,
+        y: e.clientY,
+        ox: offsetX.value,
+        oy: offsetY.value
+      };
+    };
+    const handleMouseMove = (e) => {
+      if (!dragging.value) return;
+      offsetX.value = dragStart.value.ox + (e.clientX - dragStart.value.x);
+      offsetY.value = dragStart.value.oy + (e.clientY - dragStart.value.y);
+    };
+    const handleMouseUp = () => {
+      dragging.value = false;
+    };
+    const handleMaskClick = (e) => {
+      if (props.maskClosable && e.target === e.currentTarget) {
+        handleClose();
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (!isOpen.value) return;
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    });
+    const transform = computed(
+      () => `${calculateTransform(scale.value, offsetX.value, offsetY.value)} rotate(${rotation.value}deg)`
+    );
+    return () => {
+      if (!isOpen.value || !props.images.length) return null;
+      const currentSrc = props.images[index.value] || props.images[0];
+      const mask = h("div", {
+        class: imagePreviewMaskClasses,
+        "aria-hidden": "true"
+      });
+      const img = h("img", {
+        src: currentSrc,
+        class: imagePreviewImgClasses,
+        style: { transform: transform.value },
+        alt: `Preview image ${index.value + 1}`,
+        draggable: false,
+        onMousedown: handleMouseDown,
+        onMousemove: handleMouseMove,
+        onMouseup: handleMouseUp,
+        onMouseleave: handleMouseUp
+      });
+      const closeBtn = h(
+        "button",
+        {
+          class: imagePreviewCloseBtnClasses,
+          onClick: handleClose,
+          "aria-label": "Close preview",
+          type: "button"
+        },
+        [svgIcon(previewCloseIconPath)]
+      );
+      const toolbar = h("div", { class: imagePreviewToolbarClasses }, [
+        h(
+          "button",
+          {
+            class: imagePreviewToolbarBtnClasses,
+            onClick: handleZoomOut,
+            "aria-label": "Zoom out",
+            type: "button"
+          },
+          [svgIcon(zoomOutIconPath)]
+        ),
+        h(
+          "button",
+          {
+            class: imagePreviewToolbarBtnClasses,
+            onClick: handleReset,
+            "aria-label": "Reset",
+            type: "button"
+          },
+          [svgIcon(resetIconPath)]
+        ),
+        h(
+          "button",
+          {
+            class: imagePreviewToolbarBtnClasses,
+            onClick: handleZoomIn,
+            "aria-label": "Zoom in",
+            type: "button"
+          },
+          [svgIcon(zoomInIconPath)]
+        ),
+        h(
+          "button",
+          {
+            class: imagePreviewToolbarBtnClasses,
+            onClick: handleRotateLeft,
+            "aria-label": "Rotate left",
+            type: "button"
+          },
+          [svgIcon(imageViewerIcons.rotateLeft)]
+        ),
+        h(
+          "button",
+          {
+            class: imagePreviewToolbarBtnClasses,
+            onClick: handleRotateRight,
+            "aria-label": "Rotate right",
+            type: "button"
+          },
+          [svgIcon(imageViewerIcons.rotateRight)]
+        ),
+        navState.value.counter ? h("span", { class: imagePreviewCounterClasses }, navState.value.counter) : null
+      ]);
+      const prevBtn = props.images.length > 1 ? h(
+        "button",
+        {
+          class: classNames(imagePreviewNavBtnClasses, "left-4"),
+          onClick: handlePrev,
+          disabled: !navState.value.hasPrev,
+          "aria-label": "Previous image",
+          type: "button"
+        },
+        [svgIcon(prevIconPath)]
+      ) : null;
+      const nextBtn = props.images.length > 1 ? h(
+        "button",
+        {
+          class: classNames(imagePreviewNavBtnClasses, "right-4"),
+          onClick: handleNext,
+          disabled: !navState.value.hasNext,
+          "aria-label": "Next image",
+          type: "button"
+        },
+        [svgIcon(nextIconPath)]
+      ) : null;
+      const wrapper = h(
+        "div",
+        {
+          class: imagePreviewWrapperClasses,
+          style: { zIndex: props.zIndex },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Image preview",
+          onClick: handleMaskClick,
+          onWheel: handleWheel
+        },
+        [mask, img, closeBtn, prevBtn, nextBtn, toolbar]
+      );
+      return h(Teleport, { to: "body" }, [wrapper]);
+    };
+  }
+});
+var ImagePreview_default = ImagePreview;
+
+export { ImagePreview, ImagePreview_default };

package/dist/{chunk-I6RGE7XQ.js → chunk-RKZN3URO.js}

@@ -30,6 +30,10 @@ var CodeEditor = vue.defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    highlighter: {
+      type: Object,
+      default: void 0
     }
   },
   emits: ["update:value", "change"],
@@ -85,6 +89,14 @@ var CodeEditor = vue.defineComponent({
       }
     };
     const renderHighlightedLine = (line, lineIndex) => {
+      const engine = props.highlighter;
+      if (engine?.highlightLine) {
+        return vue.h("div", {
+          key: lineIndex,
+          class: "min-h-[1.625rem]",
+          innerHTML: engine.highlightLine(line, props.language, props.theme) || (line === "" ? "\n" : "")
+        });
+      }
       const tokens = tigercatCore.tokenizeLine(line, props.language);
       const spans = tokens.map((token, ti) => {
         const cls = tigercatCore.getTokenClasses(token.type, props.theme);
@@ -105,7 +117,13 @@ var CodeEditor = vue.defineComponent({
         },
         lineNums.value.map((n) => vue.h("div", { key: n, class: "min-h-[1.625rem]" }, String(n)))
       ) : null;
-      const highlightNode = vue.h(
+      const blockEngine = props.highlighter;
+      const blockHtml = blockEngine && !blockEngine.highlightLine && blockEngine.highlightCode ? blockEngine.highlightCode(code.value, props.language, props.theme) : null;
+      const highlightNode = blockHtml !== null ? vue.h("div", {
+        class: tigercatCore.classNames(tigercatCore.codeEditorHighlightClasses, wrapClass),
+        "aria-hidden": "true",
+        innerHTML: blockHtml
+      }) : vue.h(
         "div",
         { class: tigercatCore.classNames(tigercatCore.codeEditorHighlightClasses, wrapClass), "aria-hidden": "true" },
         lines.value.map((line, i) => renderHighlightedLine(line, i))

package/dist/{chunk-34ZZLKQ4.js → chunk-RPWBZLHL.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -25,6 +25,7 @@ var GaugeChart = vue.defineComponent({
     },
     trackColor: { type: String, default: "var(--tiger-border,#e5e7eb)" },
     color: { type: String, default: "var(--tiger-primary,#2563eb)" },
+    gradient: { type: Boolean, default: false },
     // a11y
     title: { type: String },
     desc: { type: String },
@@ -35,9 +36,26 @@ var GaugeChart = vue.defineComponent({
     const radius = vue.computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2 - 4);
     const cx = vue.computed(() => innerRect.value.width / 2);
     const cy = vue.computed(() => innerRect.value.height / 2);
-    const needleAngle = vue.computed(
+    const gradientPrefix = tigercatCore.getGaugeGradientPrefix();
+    const valueGradientId = `${gradientPrefix}-value`;
+    const targetAngle = vue.computed(
       () => tigercatCore.valueToGaugeAngle(props.value, props.min, props.max, props.startAngle, props.endAngle)
     );
+    const animatedAngle = vue.ref(targetAngle.value);
+    let animCtrl = null;
+    vue.watch(targetAngle, (to, from) => {
+      animCtrl?.stop();
+      animCtrl = tigercatCore.createGaugeAnimation({
+        from,
+        to,
+        onUpdate: (v) => {
+          animatedAngle.value = v;
+        }
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      animCtrl?.stop();
+    });
     const ticks = vue.computed(
       () => props.showTicks ? tigercatCore.computeGaugeTicks(
         cx.value,
@@ -56,7 +74,7 @@ var GaugeChart = vue.defineComponent({
       const cY = cy.value;
       const aw = props.arcWidth;
       const trackPath = tigercatCore.createGaugeArcPath(c, cY, r, props.startAngle, props.endAngle, aw);
-      const valuePath = needleAngle.value > props.startAngle ? tigercatCore.createGaugeArcPath(c, cY, r, props.startAngle, needleAngle.value, aw) : null;
+      const valuePath = animatedAngle.value > props.startAngle ? tigercatCore.createGaugeArcPath(c, cY, r, props.startAngle, animatedAngle.value, aw) : null;
       const segmentArcs = props.segments?.map((seg, i) => {
         const sStart = tigercatCore.valueToGaugeAngle(
           seg.range[0],
@@ -79,10 +97,10 @@ var GaugeChart = vue.defineComponent({
           "stroke-width": 0
         });
       }) ?? [];
-      const needlePath = tigercatCore.createGaugeNeedlePath(c, cY, r - aw - 6, needleAngle.value);
+      const needlePath = tigercatCore.createGaugeNeedlePath(c, cY, r - aw - 6, animatedAngle.value);
       const formattedValue = props.valueFormatter ? props.valueFormatter(props.value) : `${props.value}`;
       return vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -93,6 +111,23 @@ var GaugeChart = vue.defineComponent({
         },
         {
           default: () => [
+            // Gradient defs (opt-in, only when gradient mode is on and value arc renders)
+            props.gradient && !props.segments && valuePath ? vue.h("defs", {}, [
+              vue.h(
+                "linearGradient",
+                {
+                  id: valueGradientId,
+                  x1: 0,
+                  y1: 0,
+                  x2: 0,
+                  y2: 1
+                },
+                [
+                  vue.h("stop", { offset: "0%", "stop-color": props.color, "stop-opacity": 1 }),
+                  vue.h("stop", { offset: "100%", "stop-color": props.color, "stop-opacity": 0.55 })
+                ]
+              )
+            ]) : null,
             // Track
             vue.h("path", {
               d: trackPath,
@@ -103,9 +138,8 @@ var GaugeChart = vue.defineComponent({
             ...props.segments ? segmentArcs : valuePath ? [
               vue.h("path", {
                 d: valuePath,
-                fill: props.color,
-                "stroke-width": 0,
-                style: { transition: "all 0.3s ease-out" }
+                fill: props.gradient ? `url(#${valueGradientId})` : props.color,
+                "stroke-width": 0
               })
             ] : [],
             // Ticks
@@ -136,8 +170,7 @@ var GaugeChart = vue.defineComponent({
             // Needle
             vue.h("path", {
               d: needlePath,
-              fill: "var(--tiger-text,#374151)",
-              style: { transition: "all 0.3s ease-out" }
+              fill: "var(--tiger-text,#374151)"
             }),
             // Center dot
             vue.h("circle", {
@@ -152,7 +185,7 @@ var GaugeChart = vue.defineComponent({
               {
                 x: c,
                 y: cY + r * 0.35,
-                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
                 "text-anchor": "middle",
                 "dominant-baseline": "middle"
               },