@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/{chunk-6PZZNM3S.js → chunk-G4ZD6COW.js}

@@ -11,10 +11,10 @@ var Drawer = vue.defineComponent({
   inheritAttrs: false,
   props: {
     /**
-     * Whether the drawer is visible
+     * Whether the drawer is open
      * @default false
      */
-    visible: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -34,6 +34,13 @@ var Drawer = vue.defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Custom width/height (overrides size)
+     */
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
     /**
      * Drawer title
      */
@@ -127,7 +134,7 @@ var Drawer = vue.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 = vue.ref(createDrawerId());
     const hasBeenOpened = vue.ref(false);
@@ -136,7 +143,7 @@ var Drawer = vue.defineComponent({
     const previousActiveElement = vue.ref(null);
     const titleId = vue.computed(() => `${instanceId.value}-title`);
     const shouldRender = vue.computed(() => {
-      if (props.visible) {
+      if (props.open) {
         hasBeenOpened.value = true;
         return true;
       }
@@ -144,7 +151,7 @@ var Drawer = vue.defineComponent({
       return hasBeenOpened.value;
     });
     const handleClose = () => {
-      emit("update:visible", false);
+      emit("update:open", false);
       emit("close");
     };
     const handleMaskClick = (event) => {
@@ -153,10 +160,10 @@ var Drawer = vue.defineComponent({
         handleClose();
       }
     };
-    const escapeEnabled = vue.computed(() => props.visible);
+    const escapeEnabled = vue.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 = tigercatCore.getFocusableElements(dialogRef.value);
         const result = tigercatCore.getFocusTrapNavigation(event, focusables, document.activeElement);
         if (result.shouldHandle && result.next) {
@@ -177,7 +184,7 @@ var Drawer = vue.defineComponent({
       document.removeEventListener("keydown", handleKeyDown);
     });
     vue.watch(
-      () => props.visible,
+      () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
           previousActiveElement.value = tigercatCore.captureActiveElement();
@@ -189,7 +196,7 @@ var Drawer = vue.defineComponent({
       }
     );
     vue.watch(
-      () => props.visible,
+      () => props.open,
       (nextVisible, prevVisible, onCleanup) => {
         if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
           return;
@@ -209,16 +216,20 @@ var Drawer = vue.defineComponent({
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
       const containerClasses = tigercatCore.classNames(
         tigercatCore.getDrawerContainerClasses(),
-        !props.visible && "pointer-events-none"
+        !props.open && "pointer-events-none"
       );
-      const maskClasses = tigercatCore.getDrawerMaskClasses(props.visible);
+      const maskClasses = tigercatCore.getDrawerMaskClasses(props.open);
       const panelClasses = tigercatCore.classNames(
-        tigercatCore.getDrawerPanelClasses(props.placement, props.visible, props.size),
+        tigercatCore.getDrawerPanelClasses(props.placement, props.open, props.size),
         "flex flex-col",
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       );
-      const mergedStyle = tigercatCore.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 = tigercatCore.mergeStyleValues(attrs.style, props.style, widthStyle);
       const headerClasses = tigercatCore.getDrawerHeaderClasses();
       const bodyClasses = tigercatCore.getDrawerBodyClasses(props.bodyClassName);
       const footerClasses = tigercatCore.getDrawerFooterClasses();
@@ -297,8 +308,8 @@ var Drawer = vue.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-B6ER2B2D.js → chunk-GA5S2KNZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkLUN3PRLX_js = require('./chunk-LUN3PRLX.js');
+var chunkV4PBWEAU_js = require('./chunk-V4PBWEAU.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -161,7 +161,7 @@ var Upload = vue.defineComponent({
     const inputRef = vue.ref(null);
     const isDragging = vue.ref(false);
     const spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
-    const config = chunkLUN3PRLX_js.useTigerConfig();
+    const config = chunkV4PBWEAU_js.useTigerConfig();
     const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
     const labels = vue.computed(() => tigercatCore.getUploadLabels(mergedLocale.value, props.labels));
     const isControlled = vue.computed(() => props.fileList !== void 0);

package/dist/chunk-GHPSCR6M.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/AvatarGroup.ts
+var AVATAR_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerAvatarGroup");
+var AvatarGroup = vue.defineComponent({
+  name: "TigerAvatarGroup",
+  inheritAttrs: false,
+  props: {
+    max: {
+      type: Number,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    vue.provide(AVATAR_GROUP_INJECTION_KEY, {
+      size: props.size,
+      itemClass: tigercatCore.avatarGroupItemClasses
+    });
+    const overflowSizeClass = vue.computed(() => tigercatCore.avatarSizeClasses[props.size ?? "md"]);
+    return () => {
+      const children = slots.default?.() ?? [];
+      const flatChildren = children.flatMap(
+        (vnode) => Array.isArray(vnode.children) ? vnode.children : [vnode]
+      );
+      const attrsRecord = attrs;
+      const attrsClass = attrsRecord.class;
+      const total = flatChildren.length;
+      const visibleCount = props.max != null && props.max < total ? props.max : total;
+      const overflow = total - visibleCount;
+      const visible = flatChildren.slice(0, visibleCount);
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(tigercatCore.avatarGroupBaseClasses, props.className, tigercatCore.coerceClassValue(attrsClass)),
+          role: "group",
+          "aria-label": "Avatar group"
+        },
+        [
+          ...visible,
+          overflow > 0 ? vue.h(
+            "span",
+            {
+              class: tigercatCore.classNames(tigercatCore.avatarGroupOverflowClasses, overflowSizeClass.value),
+              "aria-label": `${overflow} more`
+            },
+            `+${overflow}`
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AvatarGroup_default = AvatarGroup;
+
+exports.AVATAR_GROUP_INJECTION_KEY = AVATAR_GROUP_INJECTION_KEY;
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarGroup_default = AvatarGroup_default;

package/dist/{chunk-3WM7WK7E.js → chunk-GJFT5IQR.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');
 
@@ -9,10 +9,10 @@ var Popover = vue.defineComponent({
   name: "TigerPopover",
   inheritAttrs: false,
   props: {
-    /** Whether the popover is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the popover is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) */
+    defaultOpen: { type: Boolean, default: false },
     /** Popover title text */
     title: { type: String, default: void 0 },
     /** Popover content text */
@@ -31,7 +31,7 @@ var Popover = vue.defineComponent({
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const {
@@ -41,7 +41,7 @@ var Popover = vue.defineComponent({
       floatingRef,
       floatingStyles,
       triggerHandlers
-    } = chunkBFNHRBWN_js.useFloatingPopup({ props, emit });
+    } = chunk2WZGK7XJ_js.useFloatingPopup({ props, emit });
     const popoverId = createPopoverId();
     const titleId = `${popoverId}-title`;
     const contentId = `${popoverId}-content`;
@@ -82,35 +82,31 @@ var Popover = vue.defineComponent({
             defaultSlot
           ),
           // Floating content
-          currentVisible.value ? vue.h(
-            "div",
-            { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false },
-            [
-              vue.h(
-                "div",
-                {
-                  id: popoverId,
-                  role: "dialog",
-                  "aria-modal": "false",
-                  "aria-labelledby": hasTitle ? titleId : void 0,
-                  "aria-describedby": hasContent ? contentId : void 0,
-                  class: contentClasses.value
-                },
-                [
-                  hasTitle && vue.h(
-                    "div",
-                    { id: titleId, class: tigercatCore.POPOVER_TITLE_CLASSES },
-                    slots.title ? slots.title() : props.title
-                  ),
-                  hasContent && vue.h(
-                    "div",
-                    { id: contentId, class: tigercatCore.POPOVER_TEXT_CLASSES },
-                    slots.content ? slots.content() : props.content
-                  )
-                ].filter(Boolean)
-              )
-            ]
-          ) : null
+          currentVisible.value ? vue.h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
+            vue.h(
+              "div",
+              {
+                id: popoverId,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": hasTitle ? titleId : void 0,
+                "aria-describedby": hasContent ? contentId : void 0,
+                class: contentClasses.value
+              },
+              [
+                hasTitle && vue.h(
+                  "div",
+                  { id: titleId, class: tigercatCore.POPOVER_TITLE_CLASSES },
+                  slots.title ? slots.title() : props.title
+                ),
+                hasContent && vue.h(
+                  "div",
+                  { id: contentId, class: tigercatCore.POPOVER_TEXT_CLASSES },
+                  slots.content ? slots.content() : props.content
+                )
+              ].filter(Boolean)
+            )
+          ]) : null
         ]
       );
     };

package/dist/chunk-GMYSHJCU.mjs

@@ -0,0 +1,143 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { calculateVirtualRange, classNames, getVirtualTableContainerClasses, coerceClassValue, virtualTableHeaderCellClasses, virtualTableHeaderClasses, getVirtualRowKey, virtualTableCellClasses, getVirtualTableRowClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
+
+// src/components/VirtualTable.ts
+var VirtualTable = defineComponent({
+  name: "TigerVirtualTable",
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    rowHeight: { type: Number, default: 48 },
+    height: { type: Number, default: 400 },
+    overscan: { type: Number, default: 5 },
+    stickyHeader: { type: Boolean, default: true },
+    rowKey: {
+      type: [String, Function],
+      default: void 0
+    },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: "No data" },
+    selectable: { type: Boolean, default: false },
+    selectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["row-click", "select"],
+  setup(props, { emit, attrs }) {
+    const containerRef = ref(null);
+    const scrollTop = ref(0);
+    const range = computed(
+      () => calculateVirtualRange(
+        scrollTop.value,
+        props.height,
+        props.data.length,
+        props.rowHeight,
+        props.overscan
+      )
+    );
+    const visibleData = computed(() => props.data.slice(range.value.start, range.value.end));
+    function onScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+      }
+    }
+    const containerClasses = computed(
+      () => classNames(
+        getVirtualTableContainerClasses(props.bordered, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const selectedSet = computed(() => new Set(props.selectedKeys));
+    return () => {
+      const headerCells = props.columns.map(
+        (col) => h(
+          "th",
+          {
+            key: col.key,
+            class: virtualTableHeaderCellClasses,
+            style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+          },
+          col.title ?? ""
+        )
+      );
+      const headerRow = h("tr", {}, headerCells);
+      const thead = h(
+        "thead",
+        { class: props.stickyHeader ? virtualTableHeaderClasses : void 0 },
+        [headerRow]
+      );
+      const rows = visibleData.value.map((row, localIdx) => {
+        const globalIdx = range.value.start + localIdx;
+        const key = getVirtualRowKey(
+          row,
+          globalIdx,
+          props.rowKey
+        );
+        const isSelected = selectedSet.value.has(key);
+        const cells = props.columns.map(
+          (col) => h(
+            "td",
+            {
+              key: col.key,
+              class: virtualTableCellClasses
+            },
+            String(row[col.key] ?? "")
+          )
+        );
+        return h(
+          "tr",
+          {
+            key,
+            class: getVirtualTableRowClasses(globalIdx, props.striped, isSelected),
+            onClick: () => {
+              emit("row-click", row, globalIdx);
+              if (props.selectable) emit("select", key, row, globalIdx);
+            }
+          },
+          cells
+        );
+      });
+      const topSpacer = h("tr", {
+        key: "__top-spacer",
+        style: { height: `${range.value.offsetTop}px` },
+        "aria-hidden": true
+      });
+      const bottomHeight = range.value.totalHeight - range.value.end * props.rowHeight;
+      const bottomSpacer = bottomHeight > 0 ? h("tr", {
+        key: "__bottom-spacer",
+        style: { height: `${bottomHeight}px` },
+        "aria-hidden": true
+      }) : null;
+      const tbody = h("tbody", {}, [topSpacer, ...rows, bottomSpacer]);
+      const table = h("table", { class: "w-full table-fixed" }, [thead, tbody]);
+      const emptyEl = props.data.length === 0 && !props.loading ? h("div", { class: virtualTableEmptyClasses }, props.emptyText) : null;
+      const loadingEl = props.loading ? h("div", { class: virtualTableLoadingClasses }, "Loading...") : null;
+      return h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value,
+          style: { height: `${props.height}px` },
+          onScroll,
+          role: "grid",
+          "aria-rowcount": props.data.length
+        },
+        [table, emptyEl, loadingEl]
+      );
+    };
+  }
+});
+var VirtualTable_default = VirtualTable;
+
+export { VirtualTable, VirtualTable_default };

package/dist/chunk-GTSS7RAT.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: _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-U7MDGSCQ.mjs → chunk-HKYYO326.mjs}

@@ -68,6 +68,15 @@ var Tabs = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Whether to lazily render tab panes (only render when first activated)
+     * @default false
+     * @since 0.6.0
+     */
+    lazy: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Additional CSS classes
      */
@@ -132,6 +141,9 @@ var Tabs = defineComponent({
       get destroyInactiveTabPane() {
         return props.destroyInactiveTabPane;
       },
+      get lazy() {
+        return props.lazy;
+      },
       idBase,
       handleTabClick,
       handleTabClose