@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-S276SM7L.mjs

@@ -0,0 +1,146 @@
+import { defineComponent, ref, computed, onBeforeUnmount, h } from 'vue';
+import { defaultResizeHandles, classNames, resizableBaseClasses, coerceClassValue, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
+
+// src/components/Resizable.ts
+var Resizable = defineComponent({
+  name: "TigerResizable",
+  props: {
+    defaultWidth: { type: Number, default: void 0 },
+    defaultHeight: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 },
+    maxWidth: { type: Number, default: void 0 },
+    maxHeight: { type: Number, default: void 0 },
+    handles: {
+      type: Array,
+      default: () => [...defaultResizeHandles]
+    },
+    axis: {
+      type: String,
+      default: "both"
+    },
+    disabled: { type: Boolean, default: false },
+    lockAspectRatio: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const width = ref(props.defaultWidth);
+    const height = ref(props.defaultHeight);
+    const draggingHandle = ref(null);
+    const startMouseX = ref(0);
+    const startMouseY = ref(0);
+    const startWidth = ref(0);
+    const startHeight = ref(0);
+    const containerClasses = computed(
+      () => classNames(
+        resizableBaseClasses,
+        "group/resizable",
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(() => {
+      const s = {};
+      if (width.value != null) s.width = `${width.value}px`;
+      if (height.value != null) s.height = `${height.value}px`;
+      return s;
+    });
+    const onMouseDown = (handle, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingHandle.value = handle;
+      startMouseX.value = e.clientX;
+      startMouseY.value = e.clientY;
+      startWidth.value = width.value ?? 0;
+      startHeight.value = height.value ?? 0;
+      emit("resize-start", {
+        width: startWidth.value,
+        height: startHeight.value,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (!draggingHandle.value) return;
+      const mouseDeltaX = e.clientX - startMouseX.value;
+      const mouseDeltaY = e.clientY - startMouseY.value;
+      const { deltaWidth, deltaHeight } = calculateResizeDelta(
+        draggingHandle.value,
+        mouseDeltaX,
+        mouseDeltaY,
+        props.axis
+      );
+      let newW = startWidth.value + deltaWidth;
+      let newH = startHeight.value + deltaHeight;
+      if (props.lockAspectRatio) {
+        const ar = applyAspectRatio(newW, newH, startWidth.value, startHeight.value);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = clampDimensions(
+        newW,
+        newH,
+        props.minWidth,
+        props.minHeight,
+        props.maxWidth,
+        props.maxHeight
+      );
+      width.value = clamped.width;
+      height.value = clamped.height;
+      emit("resize", {
+        width: clamped.width,
+        height: clamped.height,
+        handle: draggingHandle.value,
+        deltaX: clamped.width - startWidth.value,
+        deltaY: clamped.height - startHeight.value
+      });
+    };
+    const onMouseUp = () => {
+      if (draggingHandle.value) {
+        emit("resize-end", {
+          width: width.value ?? 0,
+          height: height.value ?? 0,
+          handle: draggingHandle.value,
+          deltaX: (width.value ?? 0) - startWidth.value,
+          deltaY: (height.value ?? 0) - startHeight.value
+        });
+      }
+      draggingHandle.value = null;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const handleNodes = props.handles.map(
+        (pos) => h("div", {
+          class: getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
+          "data-handle": pos,
+          onMousedown: (e) => onMouseDown(pos, e)
+        })
+      );
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-resizable": ""
+        },
+        [...slots.default?.() || [], ...handleNodes]
+      );
+    };
+  }
+});
+var Resizable_default = Resizable;
+
+export { Resizable, Resizable_default };

package/dist/{chunk-S4GFEADD.js → chunk-SEKYX56R.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkATOLZW76_js = require('./chunk-ATOLZW76.js');
+var chunkD6AWPRGV_js = require('./chunk-D6AWPRGV.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -65,10 +65,18 @@ var FormItem = vue.defineComponent({
      */
     size: {
       type: String
+    },
+    /**
+     * Error display mode
+     * @default 'inline'
+     */
+    errorDisplayMode: {
+      type: String,
+      default: "inline"
     }
   },
   setup(props, { slots }) {
-    const formContextRef = vue.inject(chunkATOLZW76_js.FormContextKey, null);
+    const formContextRef = vue.inject(chunkD6AWPRGV_js.FormContextKey, null);
     const formContext = vue.computed(() => formContextRef?.value ?? null);
     const errorMessage = vue.ref("");
     const shakeTrigger = vue.ref(0);
@@ -266,7 +274,7 @@ var FormItem = vue.defineComponent({
       const contentElement = vue.h(
         "div",
         {
-          class: contentClasses.value
+          class: tigercatCore.classNames(contentClasses.value, props.errorDisplayMode === "popup" && "relative")
         },
         [
           vue.h(
@@ -288,7 +296,13 @@ var FormItem = vue.defineComponent({
             {
               id: hasError.value ? errorId : void 0,
               role: hasError.value ? "alert" : void 0,
-              class: errorClasses.value,
+              class: props.errorDisplayMode === "block" ? tigercatCore.classNames(
+                "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
+                !hasError.value && "hidden"
+              ) : props.errorDisplayMode === "popup" ? tigercatCore.classNames(
+                "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
+                !hasError.value && "hidden"
+              ) : errorClasses.value,
               "aria-hidden": hasError.value ? void 0 : "true"
             },
             hasError.value ? errorMessage.value : ""

package/dist/chunk-SI3JIHH4.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
+    } = 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-T52TU2RW.mjs

@@ -0,0 +1,190 @@
+import { defineComponent, ref, watch, onMounted, computed, onBeforeUnmount, h } from 'vue';
+import { classNames, getSplitterContainerClasses, coerceClassValue, getPaneStyle, getSplitterGutterClasses, resizePanes, getSplitterGutterHandleClasses } from '@expcat/tigercat-core';
+
+// src/components/Splitter.ts
+var Splitter = defineComponent({
+  name: "TigerSplitter",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    sizes: {
+      type: Array,
+      default: void 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    gutterSize: {
+      type: Number,
+      default: 4
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:sizes", "resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const containerRef = ref(null);
+    const paneSizes = ref([]);
+    const draggingIndex = ref(-1);
+    const startPos = ref(0);
+    const startSizes = ref([]);
+    watch(
+      () => props.sizes,
+      (newSizes) => {
+        if (newSizes) paneSizes.value = [...newSizes];
+      },
+      { immediate: true }
+    );
+    const initSizes = () => {
+      if (props.sizes && props.sizes.length > 0) {
+        paneSizes.value = [...props.sizes];
+        return;
+      }
+      const el = containerRef.value;
+      if (!el) return;
+      const slotChildren = slots.default?.() || [];
+      const paneCount = slotChildren.length;
+      if (paneCount === 0) return;
+      const totalGutter = (paneCount - 1) * props.gutterSize;
+      const total = props.direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
+      const eachSize = total / paneCount;
+      paneSizes.value = Array.from({ length: paneCount }, () => eachSize);
+    };
+    onMounted(initSizes);
+    const containerClasses = computed(
+      () => classNames(
+        getSplitterContainerClasses(props.direction, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const getMins = () => paneSizes.value.map(() => props.min);
+    const getMaxes = () => paneSizes.value.map(() => props.max);
+    const onMouseDown = (index, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingIndex.value = index;
+      startPos.value = props.direction === "horizontal" ? e.clientX : e.clientY;
+      startSizes.value = [...paneSizes.value];
+      emit("resize-start", { index, sizes: [...paneSizes.value] });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (draggingIndex.value < 0) return;
+      const currentPos = props.direction === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPos - startPos.value;
+      const newSizes = resizePanes(
+        startSizes.value,
+        draggingIndex.value,
+        delta,
+        getMins(),
+        getMaxes()
+      );
+      if (newSizes) {
+        paneSizes.value = newSizes;
+        emit("update:sizes", newSizes);
+        emit("resize", { index: draggingIndex.value, sizes: newSizes });
+      }
+    };
+    const onMouseUp = () => {
+      if (draggingIndex.value >= 0) {
+        emit("resize-end", {
+          index: draggingIndex.value,
+          sizes: [...paneSizes.value]
+        });
+      }
+      draggingIndex.value = -1;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const children = slots.default?.() || [];
+      const nodes = [];
+      children.forEach((child, i) => {
+        const size = paneSizes.value[i];
+        const paneStyle = size != null ? getPaneStyle(size, props.direction) : void 0;
+        nodes.push(
+          h(
+            "div",
+            {
+              class: "tiger-splitter-pane relative overflow-auto",
+              style: paneStyle,
+              "data-pane-index": i
+            },
+            [child]
+          )
+        );
+        if (i < children.length - 1) {
+          const isDragging = draggingIndex.value === i;
+          nodes.push(
+            h(
+              "div",
+              {
+                class: getSplitterGutterClasses(props.direction, isDragging, props.disabled),
+                role: "separator",
+                "aria-orientation": props.direction === "horizontal" ? "vertical" : "horizontal",
+                tabindex: props.disabled ? -1 : 0,
+                "data-gutter-index": i,
+                onMousedown: (e) => onMouseDown(i, e),
+                onKeydown: (e) => {
+                  if (props.disabled) return;
+                  const step = 10;
+                  let delta = 0;
+                  if (props.direction === "horizontal" && e.key === "ArrowLeft" || props.direction === "vertical" && e.key === "ArrowUp") {
+                    delta = -step;
+                  } else if (props.direction === "horizontal" && e.key === "ArrowRight" || props.direction === "vertical" && e.key === "ArrowDown") {
+                    delta = step;
+                  }
+                  if (delta !== 0) {
+                    e.preventDefault();
+                    const newSizes = resizePanes(paneSizes.value, i, delta, getMins(), getMaxes());
+                    if (newSizes) {
+                      paneSizes.value = newSizes;
+                      emit("update:sizes", newSizes);
+                      emit("resize", { index: i, sizes: newSizes });
+                    }
+                  }
+                }
+              },
+              [h("div", { class: getSplitterGutterHandleClasses(props.direction) })]
+            )
+          );
+        }
+      });
+      return h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value,
+          style: props.style,
+          "data-direction": props.direction
+        },
+        nodes
+      );
+    };
+  }
+});
+var Splitter_default = Splitter;
+
+export { Splitter, Splitter_default };

package/dist/{chunk-VBXPDCRX.js → chunk-TDL4BUUB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkBFNHRBWN_js = require('./chunk-BFNHRBWN.js');
+var chunk2WZGK7XJ_js = require('./chunk-2WZGK7XJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -28,10 +28,10 @@ var Popconfirm = vue.defineComponent({
   name: "TigerPopconfirm",
   inheritAttrs: false,
   props: {
-    /** Whether the popconfirm is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) @default false */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the popconfirm is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) @default false */
+    defaultOpen: { type: Boolean, default: false },
     /** Popconfirm title/question text */
     title: { type: String, default: "\u786E\u5B9A\u8981\u6267\u884C\u6B64\u64CD\u4F5C\u5417\uFF1F" },
     /** Popconfirm description text */
@@ -59,7 +59,7 @@ var Popconfirm = vue.defineComponent({
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
-  emits: ["update:visible", "visible-change", "confirm", "cancel"],
+  emits: ["update:open", "open-change", "confirm", "cancel"],
   setup(props, { slots, emit, attrs }) {
     const {
       currentVisible,
@@ -69,7 +69,7 @@ var Popconfirm = vue.defineComponent({
       floatingRef,
       floatingStyles,
       actualPlacement
-    } = chunkBFNHRBWN_js.useFloatingPopup({ props, emit, multiTrigger: false });
+    } = chunk2WZGK7XJ_js.useFloatingPopup({ props, emit, multiTrigger: false });
     const popconfirmId = createPopconfirmId();
     const titleId = `${popconfirmId}-title`;
     const descriptionId = `${popconfirmId}-description`;

package/dist/{chunk-NTUGEHEI.mjs → chunk-TW64ZNZY.mjs}

@@ -1,6 +1,6 @@
-import { Input } from './chunk-VURU7TLN.mjs';
+import { Input } from './chunk-2WJADO6O.mjs';
 import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { Avatar } from './chunk-COCECPMG.mjs';
 import { defineComponent, ref, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';