@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-XYIAHZNM.mjs

@@ -0,0 +1,181 @@
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
+import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
+import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { defineComponent, computed, h } from 'vue';
+import { getChartInnerRect, computeHeatmapCells, resolveChartTooltipContent, classNames, chartAxisTickTextClasses, getChartElementOpacity } from '@expcat/tigercat-core';
+
+var HeatmapChart = 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
+    } = useChartInteraction({
+      hoverable: computed(() => props.hoverable),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: computed(() => props.activeOpacity),
+      inactiveOpacity: computed(() => props.inactiveOpacity),
+      emit,
+      getData: (index) => props.data[index],
+      eventNames: { hover: "cell-hover", click: "cell-click" }
+    });
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const cells = computed(
+      () => 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 = computed(
+      () => 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 = h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: 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 h(
+                "text",
+                {
+                  key: `x-${i}`,
+                  x: i * (cellW + props.cellGap) + cellW / 2,
+                  y: rect.height + 16,
+                  class: 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 h(
+                "text",
+                {
+                  key: `y-${i}`,
+                  x: -8,
+                  y: i * (cellH + props.cellGap) + cellH / 2,
+                  class: chartAxisTickTextClasses,
+                  "text-anchor": "end",
+                  "dominant-baseline": "middle"
+                },
+                label
+              );
+            });
+            const cellElems = cells.value.map((cell, idx) => {
+              const opacity = getChartElementOpacity(idx, activeIndex.value, {
+                activeOpacity: props.activeOpacity,
+                inactiveOpacity: props.inactiveOpacity
+              });
+              const elems = [
+                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: 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(
+                  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 ? h(ChartTooltip, {
+        content: tooltipContent.value,
+        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+    };
+  }
+});
+var HeatmapChart_default = HeatmapChart;
+
+export { HeatmapChart, HeatmapChart_default };

package/dist/{chunk-7J44XQKW.mjs → chunk-YFD6RD7P.mjs}

@@ -9,10 +9,10 @@ var Drawer = defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Whether the drawer is visible
+     * Whether the drawer is open
      * @default false
      */
-    visible: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -32,6 +32,13 @@ var Drawer = defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Custom width/height (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
     /**
      * Drawer title
      */
@@ -125,7 +132,7 @@ var Drawer = defineComponent({
       default: false
     }
   },
-  emits: ["update:visible", "close", "after-enter", "after-leave"],
+  emits: ["update:open", "close", "after-enter", "after-leave"],
   setup(props, { slots, emit, attrs }) {
     const instanceId = ref(createDrawerId());
     const hasBeenOpened = ref(false);
@@ -134,7 +141,7 @@ var Drawer = defineComponent({
     const previousActiveElement = ref(null);
     const titleId = computed(() => `${instanceId.value}-title`);
     const shouldRender = computed(() => {
-      if (props.visible) {
+      if (props.open) {
         hasBeenOpened.value = true;
         return true;
       }
@@ -142,7 +149,7 @@ var Drawer = defineComponent({
       return hasBeenOpened.value;
     });
     const handleClose = () => {
-      emit("update:visible", false);
+      emit("update:open", false);
       emit("close");
     };
     const handleMaskClick = (event) => {
@@ -151,10 +158,10 @@ var Drawer = defineComponent({
         handleClose();
       }
     };
-    const escapeEnabled = computed(() => props.visible);
+    const escapeEnabled = computed(() => props.open);
     let cleanupEscape;
     const handleKeyDown = (event) => {
-      if (event.key === "Tab" && props.visible && dialogRef.value) {
+      if (event.key === "Tab" && props.open && dialogRef.value) {
         const focusables = getFocusableElements(dialogRef.value);
         const result = getFocusTrapNavigation(event, focusables, document.activeElement);
         if (result.shouldHandle && result.next) {
@@ -175,7 +182,7 @@ var Drawer = defineComponent({
       document.removeEventListener("keydown", handleKeyDown);
     });
     watch(
-      () => props.visible,
+      () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
           previousActiveElement.value = captureActiveElement();
@@ -187,7 +194,7 @@ var Drawer = defineComponent({
       }
     );
     watch(
-      () => props.visible,
+      () => props.open,
       (nextVisible, prevVisible, onCleanup) => {
         if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
           return;
@@ -207,16 +214,20 @@ var Drawer = defineComponent({
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
       const containerClasses = classNames(
         getDrawerContainerClasses(),
-        !props.visible && "pointer-events-none"
+        !props.open && "pointer-events-none"
       );
-      const maskClasses = getDrawerMaskClasses(props.visible);
+      const maskClasses = getDrawerMaskClasses(props.open);
       const panelClasses = classNames(
-        getDrawerPanelClasses(props.placement, props.visible, props.size),
+        getDrawerPanelClasses(props.placement, props.open, props.size),
         "flex flex-col",
         props.className,
         coerceClassValue(attrs.class)
       );
-      const mergedStyle = mergeStyleValues(attrs.style, props.style);
+      const isHorizontal = props.placement === "left" || props.placement === "right";
+      const widthStyle = props.width ? {
+        [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
+      } : void 0;
+      const mergedStyle = mergeStyleValues(attrs.style, props.style, widthStyle);
       const headerClasses = getDrawerHeaderClasses();
       const bodyClasses = getDrawerBodyClasses(props.bodyClassName);
       const footerClasses = getDrawerFooterClasses();
@@ -295,8 +306,8 @@ var Drawer = defineComponent({
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.visible,
-          "aria-hidden": !props.visible ? "true" : void 0,
+          hidden: !props.open,
+          "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },
         [mask, panel]

package/dist/{chunk-MB7W46IY.mjs → chunk-YH7N5GZF.mjs}

@@ -1,4 +1,4 @@
-import { init_ImagePreview, ImagePreview_exports } from './chunk-MMQ34S5M.mjs';
+import { init_ImagePreview, ImagePreview_exports } from './chunk-ZUVR5UZL.mjs';
 import { __toCommonJS } from './chunk-53M2BTB5.mjs';
 import { defineComponent, ref, inject, onMounted, onBeforeUnmount, computed, h } from 'vue';
 import { classNames, imageBaseClasses, imagePreviewCursorClass, coerceClassValue, toCSSSize, mergeStyleValues, getImageImgClasses, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
@@ -22,7 +22,7 @@ var Image = defineComponent({
       default: void 0
     }
   },
-  emits: ["load", "error", "preview-visible-change"],
+  emits: ["load", "error", "preview-open-change", "preview-visible-change"],
   setup(props, { slots, emit, attrs }) {
     const loading = ref(true);
     const error = ref(false);
@@ -156,11 +156,12 @@ var Image = defineComponent({
       const previewEl = !group && previewVisible.value && props.src ? (() => {
         const { ImagePreview } = (init_ImagePreview(), __toCommonJS(ImagePreview_exports));
         return h(ImagePreview, {
-          visible: previewVisible.value,
+          open: previewVisible.value,
           images: [props.src],
           currentIndex: 0,
-          "onUpdate:visible": (val) => {
+          "onUpdate:open": (val) => {
             previewVisible.value = val;
+            emit("preview-open-change", val);
             emit("preview-visible-change", val);
           }
         });

package/dist/chunk-YUEBMBOH.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, h } from 'vue';
+import { resolveAffixTarget, mergeStyleValues, classNames, coerceClassValue, calculateAffixState } from '@expcat/tigercat-core';
+
+// src/components/Affix.ts
+var Affix = defineComponent({
+  name: "TigerAffix",
+  inheritAttrs: false,
+  props: {
+    offsetTop: { type: Number, default: 0 },
+    offsetBottom: { type: Number, default: void 0 },
+    target: { type: String, default: void 0 },
+    zIndex: { type: Number, default: 10 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change"],
+  setup(props, { slots, emit, attrs }) {
+    const wrapperRef = ref(null);
+    const placeholderRef = ref(null);
+    const state = ref({ affixed: false, style: {} });
+    const originalRect = ref(
+      null
+    );
+    const update = () => {
+      if (!wrapperRef.value) return;
+      const el = state.value.affixed && placeholderRef.value ? placeholderRef.value : wrapperRef.value;
+      const rect = el.getBoundingClientRect();
+      if (!originalRect.value || !state.value.affixed) {
+        originalRect.value = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      const resolved = resolveAffixTarget(props.target);
+      const containerRect = resolved.getRect();
+      const newState = calculateAffixState(
+        originalRect.value,
+        containerRect,
+        props.offsetBottom !== void 0 ? void 0 : props.offsetTop,
+        props.offsetBottom,
+        props.zIndex
+      );
+      if (newState.affixed !== state.value.affixed) {
+        emit("change", newState.affixed);
+      }
+      state.value = newState;
+    };
+    let scrollTarget = null;
+    onMounted(() => {
+      const resolved = resolveAffixTarget(props.target);
+      scrollTarget = resolved.element;
+      scrollTarget.addEventListener("scroll", update, { passive: true });
+      window.addEventListener("resize", update, { passive: true });
+      update();
+    });
+    onBeforeUnmount(() => {
+      scrollTarget?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const children = slots.default?.();
+      if (state.value.affixed) {
+        return h("div", { ref: placeholderRef }, [
+          h("div", {
+            style: {
+              width: `${originalRect.value?.width ?? 0}px`,
+              height: `${originalRect.value?.height ?? 0}px`
+            }
+          }),
+          h(
+            "div",
+            {
+              ref: wrapperRef,
+              ...attrs,
+              class: classNames(props.className, coerceClassValue(attrsRecord.class)),
+              style: mergeStyleValues(state.value.style, props.style)
+            },
+            children
+          )
+        ]);
+      }
+      return h(
+        "div",
+        {
+          ref: wrapperRef,
+          ...attrs,
+          class: classNames(props.className, coerceClassValue(attrsRecord.class)),
+          style: mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+    };
+  }
+});
+var Affix_default = Affix;
+
+export { Affix, Affix_default };

package/dist/chunk-YYZBVHVC.mjs

@@ -0,0 +1,203 @@
+import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, h, Teleport } from 'vue';
+import { getTourPopoverPosition, getTourSpotlightStyle, tourCloseButtonClasses, closeIconPathD, tourTitleClasses, tourDescriptionClasses, tourIndicatorClasses, tourFooterClasses, classNames, tourPopoverClasses, getTourTargetRect } from '@expcat/tigercat-core';
+
+var Tour = defineComponent({
+  name: "TigerTour",
+  inheritAttrs: false,
+  props: {
+    steps: {
+      type: Array,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    current: {
+      type: Number,
+      default: void 0
+    },
+    nextText: { type: String, default: "Next" },
+    prevText: { type: String, default: "Previous" },
+    finishText: { type: String, default: "Finish" },
+    closable: { type: Boolean, default: true },
+    showIndicators: { type: Boolean, default: true },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:open", "update:current", "close", "finish", "change"],
+  setup(props, { emit }) {
+    const internalStep = ref(0);
+    const currentStep = computed(() => props.current ?? internalStep.value);
+    const step = computed(() => props.steps[currentStep.value]);
+    const targetRect = ref();
+    const popoverRef = ref(null);
+    const updateRect = () => {
+      if (step.value?.target) {
+        targetRect.value = getTourTargetRect(step.value.target);
+      } else {
+        targetRect.value = void 0;
+      }
+    };
+    watch(
+      () => [props.open, currentStep.value],
+      () => {
+        if (props.open) updateRect();
+      }
+    );
+    onMounted(() => {
+      if (props.open) updateRect();
+    });
+    let resizeHandler;
+    onMounted(() => {
+      resizeHandler = () => {
+        if (props.open) updateRect();
+      };
+      window.addEventListener("resize", resizeHandler);
+      window.addEventListener("scroll", resizeHandler, true);
+    });
+    onBeforeUnmount(() => {
+      if (resizeHandler) {
+        window.removeEventListener("resize", resizeHandler);
+        window.removeEventListener("scroll", resizeHandler, true);
+      }
+    });
+    const goTo = (idx) => {
+      internalStep.value = idx;
+      emit("update:current", idx);
+      emit("change", idx);
+    };
+    const next = () => {
+      if (currentStep.value < props.steps.length - 1) {
+        goTo(currentStep.value + 1);
+      } else {
+        emit("finish");
+        emit("update:open", false);
+      }
+    };
+    const prev = () => {
+      if (currentStep.value > 0) {
+        goTo(currentStep.value - 1);
+      }
+    };
+    const close = () => {
+      emit("close");
+      emit("update:open", false);
+    };
+    return () => {
+      if (!props.open || !step.value) return null;
+      const placement = step.value.placement ?? "bottom";
+      const showMask = step.value.mask !== false;
+      const isLast = currentStep.value === props.steps.length - 1;
+      const isFirst = currentStep.value === 0;
+      let popoverStyle = {};
+      if (targetRect.value) {
+        const pos = getTourPopoverPosition(targetRect.value, 320, 160, placement);
+        popoverStyle = {
+          position: "absolute",
+          top: `${pos.top}px`,
+          left: `${pos.left}px`
+        };
+      } else {
+        popoverStyle = {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        };
+      }
+      const children = [];
+      if (showMask && targetRect.value) {
+        children.push(
+          h("div", {
+            style: getTourSpotlightStyle(targetRect.value),
+            "aria-hidden": "true"
+          })
+        );
+      } else if (showMask) {
+        children.push(
+          h("div", {
+            class: "fixed inset-0 z-[1000] bg-black/45",
+            "aria-hidden": "true",
+            onClick: close
+          })
+        );
+      }
+      const popoverChildren = [];
+      if (props.closable) {
+        popoverChildren.push(
+          h(
+            "button",
+            {
+              class: tourCloseButtonClasses,
+              type: "button",
+              "aria-label": "Close tour",
+              onClick: close
+            },
+            createStatusIcon(closeIconPathD, "h-4 w-4")
+          )
+        );
+      }
+      if (step.value.title) {
+        popoverChildren.push(h("div", { class: tourTitleClasses }, step.value.title));
+      }
+      if (step.value.description) {
+        popoverChildren.push(h("div", { class: tourDescriptionClasses }, step.value.description));
+      }
+      const footerChildren = [];
+      if (props.showIndicators) {
+        footerChildren.push(
+          h(
+            "span",
+            { class: tourIndicatorClasses },
+            `${currentStep.value + 1} / ${props.steps.length}`
+          )
+        );
+      }
+      const buttons = [];
+      if (!isFirst) {
+        buttons.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: "px-3 py-1.5 text-sm rounded-md border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors mr-2",
+              onClick: prev
+            },
+            props.prevText
+          )
+        );
+      }
+      buttons.push(
+        h(
+          "button",
+          {
+            type: "button",
+            class: "px-3 py-1.5 text-sm rounded-md bg-[var(--tiger-primary,#2563eb)] text-white hover:bg-[var(--tiger-primary-hover,#1d4ed8)] transition-colors",
+            onClick: next
+          },
+          isLast ? props.finishText : props.nextText
+        )
+      );
+      footerChildren.push(h("div", { class: "flex items-center" }, buttons));
+      popoverChildren.push(h("div", { class: tourFooterClasses }, footerChildren));
+      children.push(
+        h(
+          "div",
+          {
+            ref: popoverRef,
+            class: classNames(tourPopoverClasses, props.className),
+            style: popoverStyle,
+            role: "dialog",
+            "aria-modal": "true"
+          },
+          popoverChildren
+        )
+      );
+      return h(Teleport, { to: "body" }, children);
+    };
+  }
+});
+var Tour_default = Tour;
+
+export { Tour, Tour_default };

package/dist/{chunk-LLK2OK3K.mjs → chunk-Z2NMFYF4.mjs}

@@ -1,5 +1,5 @@
 import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { Tag } from './chunk-3G4VPV4D.mjs';
 import { Text } from './chunk-6V7XCCXN.mjs';
 import { Avatar } from './chunk-COCECPMG.mjs';