@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/{chunk-EAMHOEAJ.js → chunk-5G5Q3TTH.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunk7TGLZQV5_js = require('./chunk-7TGLZQV5.js');
-var chunkCEAMHLIL_js = require('./chunk-CEAMHLIL.js');
-var chunkF5AI7CPC_js = require('./chunk-F5AI7CPC.js');
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkBNIUWON3_js = require('./chunk-BNIUWON3.js');
+var chunk5JSU44MQ_js = require('./chunk-5JSU44MQ.js');
+var chunkAAO2B46J_js = require('./chunk-AAO2B46J.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var chunkDN5GU5PC_js = require('./chunk-DN5GU5PC.js');
 var chunkDUQ7Q2GO_js = require('./chunk-DUQ7Q2GO.js');
-var chunkWEFQCJAG_js = require('./chunk-WEFQCJAG.js');
+var chunkXGXGAK27_js = require('./chunk-XGXGAK27.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -274,7 +274,7 @@ var NotificationCenter = vue.defineComponent({
         )
       );
     };
-    const renderListItem = (item, index) => {
+    const renderListItem = (item, _index) => {
       const isRead = Boolean(item.read);
       const timeText = item.time ? tigercatCore.formatActivityTime(item.time) : "";
       return vue.h(
@@ -314,7 +314,7 @@ var NotificationCenter = vue.defineComponent({
             ) : null
           ]),
           vue.h(
-            chunkDELTFEEJ_js.Button,
+            chunkU7CCKZAG_js.Button,
             {
               size: "sm",
               variant: "ghost",
@@ -329,7 +329,7 @@ var NotificationCenter = vue.defineComponent({
       );
     };
     const renderList = (items) => vue.h(
-      chunkF5AI7CPC_js.List,
+      chunkAAO2B46J_js.List,
       {
         dataSource: items,
         split: true,
@@ -343,7 +343,7 @@ var NotificationCenter = vue.defineComponent({
       }
     );
     const renderTabs = () => vue.h(
-      chunkCEAMHLIL_js.Tabs,
+      chunk5JSU44MQ_js.Tabs,
       {
         type: "line",
         size: "small",
@@ -360,7 +360,7 @@ var NotificationCenter = vue.defineComponent({
           const labelBase = group.title || String(group.key ?? index);
           const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
           return vue.h(
-            chunk7TGLZQV5_js.TabPane,
+            chunkBNIUWON3_js.TabPane,
             {
               key: getGroupKey(group, index),
               tabKey: getGroupKey(group, index),
@@ -391,7 +391,7 @@ var NotificationCenter = vue.defineComponent({
             ) : null
           ]),
           vue.h(
-            chunkDELTFEEJ_js.Button,
+            chunkU7CCKZAG_js.Button,
             {
               size: "sm",
               variant: "ghost",
@@ -418,7 +418,7 @@ var NotificationCenter = vue.defineComponent({
         },
         [
           vue.h(
-            chunkWEFQCJAG_js.Card,
+            chunkXGXGAK27_js.Card,
             { variant: "bordered", className: "w-full" },
             {
               header: () => header,

package/dist/{chunk-CEAMHLIL.js → chunk-5JSU44MQ.js}

@@ -70,6 +70,15 @@ var Tabs = vue.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
      */
@@ -134,6 +143,9 @@ var Tabs = vue.defineComponent({
       get destroyInactiveTabPane() {
         return props.destroyInactiveTabPane;
       },
+      get lazy() {
+        return props.lazy;
+      },
       idBase,
       handleTabClick,
       handleTabClose

package/dist/chunk-5XF5IAUD.mjs

@@ -0,0 +1,193 @@
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
+import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
+import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
+import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { defineComponent, computed, h } from 'vue';
+import { getChartInnerRect, resolveChartPalette, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+
+var TreeMapChart = defineComponent({
+  name: "TigerTreeMapChart",
+  props: {
+    width: { type: Number, default: 400 },
+    height: { type: Number, default: 300 },
+    padding: { type: [Number, Object], default: 8 },
+    data: { type: Array, required: true },
+    gap: { type: Number, default: 2 },
+    showLabels: { type: Boolean, default: true },
+    minLabelSize: { type: Number, default: 10 },
+    colors: { type: Array },
+    // 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 },
+    // Legend
+    showLegend: { type: Boolean, default: false },
+    legendPosition: { type: String, default: "bottom" },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
+    // Tooltip
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    // a11y
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "node-click", "node-hover"],
+  setup(props, { emit }) {
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave,
+      wrapperClasses
+    } = useChartInteraction({
+      hoverable: computed(() => props.hoverable),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: computed(() => props.activeOpacity),
+      inactiveOpacity: computed(() => props.inactiveOpacity),
+      legendPosition: computed(() => props.legendPosition),
+      emit,
+      getData: (index) => {
+        const node = nodes.value[index];
+        return node ? { label: node.label, value: node.value } : {};
+      },
+      eventNames: { hover: "node-hover", click: "node-click" }
+    });
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const palette = computed(() => resolveChartPalette(props.colors));
+    const nodes = computed(
+      () => computeTreeMapNodes(props.data, {
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        gap: props.gap,
+        colors: palette.value
+      })
+    );
+    const total = computed(() => nodes.value.reduce((s, n) => s + n.value, 0));
+    const legendItems = computed(
+      () => buildChartLegendItems({
+        data: nodes.value,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d) => d.label,
+        getColor: (d) => d.color
+      })
+    );
+    const tooltipContent = computed(
+      () => resolveChartTooltipContent(resolvedHoveredIndex.value, nodes.value, void 0, (node) => {
+        const pct = total.value > 0 ? (node.value / total.value * 100).toFixed(1) : "0";
+        return `${node.label}: ${node.value} (${pct}%)`;
+      })
+    );
+    return () => {
+      const interactive = props.hoverable || props.selectable;
+      const chart = h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          title: props.title,
+          desc: props.desc,
+          className: classNames(props.className)
+        },
+        {
+          default: () => {
+            return h(
+              ChartSeries,
+              { data: nodes.value, type: "treemap" },
+              {
+                default: () => nodes.value.map((node) => {
+                  const opacity = getChartElementOpacity(node.index, activeIndex.value, {
+                    activeOpacity: props.activeOpacity,
+                    inactiveOpacity: props.inactiveOpacity
+                  });
+                  const elems = [
+                    h("rect", {
+                      key: `node-${node.index}`,
+                      x: node.x,
+                      y: node.y,
+                      width: node.w,
+                      height: node.h,
+                      rx: 2,
+                      fill: node.color,
+                      opacity,
+                      class: classNames(interactive && "cursor-pointer"),
+                      style: { transition: "opacity 0.2s ease-out" },
+                      onMouseenter: (e) => handleMouseEnter(node.index, e),
+                      onMousemove: handleMouseMove,
+                      onMouseleave: handleMouseLeave,
+                      onClick: () => handleClick(node.index)
+                    })
+                  ];
+                  if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
+                    elems.push(
+                      h(
+                        "text",
+                        {
+                          key: `label-${node.index}`,
+                          x: node.x + node.w / 2,
+                          y: node.y + node.h / 2,
+                          class: "fill-white text-xs",
+                          "text-anchor": "middle",
+                          "dominant-baseline": "middle",
+                          style: {
+                            pointerEvents: "none",
+                            fontSize: `${Math.min(12, node.h * 0.3)}px`
+                          }
+                        },
+                        node.label
+                      )
+                    );
+                  }
+                  return elems;
+                }).flat()
+              }
+            );
+          }
+        }
+      );
+      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;
+      if (!props.showLegend) {
+        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+      }
+      return h("div", { class: wrapperClasses.value }, [
+        chart,
+        h(ChartLegend, {
+          items: legendItems.value,
+          position: props.legendPosition,
+          markerSize: props.legendMarkerSize,
+          gap: props.legendGap,
+          interactive,
+          onItemClick: handleLegendClick,
+          onItemHover: handleLegendHover,
+          onItemLeave: handleLegendLeave
+        }),
+        tooltip
+      ]);
+    };
+  }
+});
+var TreeMapChart_default = TreeMapChart;
+
+export { TreeMapChart, TreeMapChart_default };

package/dist/chunk-5Y3HYEQD.js

@@ -0,0 +1,64 @@
+'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)
+        ),
+        role: "radiogroup"
+      },
+      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-LDCTSE6Y.mjs → chunk-665NGSV3.mjs}

@@ -1,4 +1,4 @@
-import { init_ImagePreview, ImagePreview } from './chunk-MMQ34S5M.mjs';
+import { init_ImagePreview, ImagePreview } from './chunk-ZUVR5UZL.mjs';
 import { defineComponent, ref, provide, onBeforeUnmount, h } from 'vue';
 
 // src/components/ImageGroup.ts
@@ -40,10 +40,10 @@ var ImageGroup = defineComponent({
     return () => {
       const children = slots.default?.();
       const preview = props.preview ? h(ImagePreview, {
-        visible: previewVisible.value,
+        open: previewVisible.value,
         images: images.value,
         currentIndex: previewIndex.value,
-        "onUpdate:visible": (val) => {
+        "onUpdate:open": (val) => {
           previewVisible.value = val;
           if (!val) emit("preview-visible-change", false);
         },

package/dist/{chunk-WIPPSHI6.mjs → chunk-6A57RY3H.mjs}

@@ -4,22 +4,22 @@ import { getTransformOrigin, buildTriggerHandlerMap } from '@expcat/tigercat-cor
 
 function useFloatingPopup(options) {
   const { props, emit, multiTrigger = true } = options;
-  const internalVisible = ref(props.visible ?? props.defaultVisible ?? false);
-  const isControlled = computed(() => props.visible !== void 0);
+  const internalVisible = ref(props.open ?? props.defaultOpen ?? false);
+  const isControlled = computed(() => props.open !== void 0);
   watch(
-    () => props.visible,
+    () => props.open,
     (next) => {
       if (next !== void 0) internalVisible.value = next;
     }
   );
   const currentVisible = computed(
-    () => isControlled.value ? Boolean(props.visible) : internalVisible.value
+    () => isControlled.value ? Boolean(props.open) : internalVisible.value
   );
   const setVisible = (next) => {
     if (props.disabled && next) return;
     if (!isControlled.value) internalVisible.value = next;
-    emit("update:visible", next);
-    emit("visible-change", next);
+    emit("update:open", next);
+    emit("open-change", next);
   };
   const containerRef = ref(null);
   const triggerRef = ref(null);

package/dist/{chunk-7AFJ7TKW.js → chunk-6DP7XE77.js}

@@ -35,7 +35,7 @@ var init_ImagePreview = chunkPNKVD2UK_js.__esm({
       name: "TigerImagePreview",
       inheritAttrs: false,
       props: {
-        visible: { type: Boolean, default: false },
+        open: { type: Boolean, default: false },
         images: { type: Array, default: () => [] },
         currentIndex: { type: Number, default: 0 },
         zIndex: { type: Number, default: 1050 },
@@ -44,7 +44,7 @@ var init_ImagePreview = chunkPNKVD2UK_js.__esm({
         minScale: { type: Number, default: 0.25 },
         maxScale: { type: Number, default: 5 }
       },
-      emits: ["update:visible", "update:currentIndex", "scale-change"],
+      emits: ["update:open", "update:currentIndex", "scale-change"],
       setup(props, { emit }) {
         const scale = vue.ref(1);
         const offsetX = vue.ref(0);
@@ -64,8 +64,9 @@ var init_ImagePreview = chunkPNKVD2UK_js.__esm({
             resetTransform();
           }
         );
+        const isOpen = vue.computed(() => props.open);
         vue.watch(
-          () => props.visible,
+          () => isOpen.value,
           (val) => {
             if (val) {
               resetTransform();
@@ -78,7 +79,7 @@ var init_ImagePreview = chunkPNKVD2UK_js.__esm({
         );
         const navState = vue.computed(() => tigercatCore.getPreviewNavState(index.value, props.images.length));
         const handleClose = () => {
-          emit("update:visible", false);
+          emit("update:open", false);
         };
         const handleZoomIn = () => {
           scale.value = tigercatCore.clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
@@ -137,7 +138,7 @@ var init_ImagePreview = chunkPNKVD2UK_js.__esm({
           }
         };
         const handleKeyDown = (e) => {
-          if (!props.visible) return;
+          if (!isOpen.value) return;
           switch (e.key) {
             case "Escape":
               handleClose();
@@ -159,7 +160,7 @@ var init_ImagePreview = chunkPNKVD2UK_js.__esm({
         });
         const transform = vue.computed(() => tigercatCore.calculateTransform(scale.value, offsetX.value, offsetY.value));
         return () => {
-          if (!props.visible || !props.images.length) return null;
+          if (!isOpen.value || !props.images.length) return null;
           const currentSrc = props.images[index.value] || props.images[0];
           const mask = vue.h("div", {
             class: tigercatCore.imagePreviewMaskClasses,

package/dist/chunk-6VG6ARQG.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var Tour = vue.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 = vue.ref(0);
+    const currentStep = vue.computed(() => props.current ?? internalStep.value);
+    const step = vue.computed(() => props.steps[currentStep.value]);
+    const targetRect = vue.ref();
+    const popoverRef = vue.ref(null);
+    const updateRect = () => {
+      if (step.value?.target) {
+        targetRect.value = tigercatCore.getTourTargetRect(step.value.target);
+      } else {
+        targetRect.value = void 0;
+      }
+    };
+    vue.watch(
+      () => [props.open, currentStep.value],
+      () => {
+        if (props.open) updateRect();
+      }
+    );
+    vue.onMounted(() => {
+      if (props.open) updateRect();
+    });
+    let resizeHandler;
+    vue.onMounted(() => {
+      resizeHandler = () => {
+        if (props.open) updateRect();
+      };
+      window.addEventListener("resize", resizeHandler);
+      window.addEventListener("scroll", resizeHandler, true);
+    });
+    vue.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 = tigercatCore.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(
+          vue.h("div", {
+            style: tigercatCore.getTourSpotlightStyle(targetRect.value),
+            "aria-hidden": "true"
+          })
+        );
+      } else if (showMask) {
+        children.push(
+          vue.h("div", {
+            class: "fixed inset-0 z-[1000] bg-black/45",
+            "aria-hidden": "true",
+            onClick: close
+          })
+        );
+      }
+      const popoverChildren = [];
+      if (props.closable) {
+        popoverChildren.push(
+          vue.h(
+            "button",
+            {
+              class: tigercatCore.tourCloseButtonClasses,
+              type: "button",
+              "aria-label": "Close tour",
+              onClick: close
+            },
+            chunkJCMGBKS6_js.createStatusIcon(tigercatCore.closeIconPathD, "h-4 w-4")
+          )
+        );
+      }
+      if (step.value.title) {
+        popoverChildren.push(vue.h("div", { class: tigercatCore.tourTitleClasses }, step.value.title));
+      }
+      if (step.value.description) {
+        popoverChildren.push(vue.h("div", { class: tigercatCore.tourDescriptionClasses }, step.value.description));
+      }
+      const footerChildren = [];
+      if (props.showIndicators) {
+        footerChildren.push(
+          vue.h(
+            "span",
+            { class: tigercatCore.tourIndicatorClasses },
+            `${currentStep.value + 1} / ${props.steps.length}`
+          )
+        );
+      }
+      const buttons = [];
+      if (!isFirst) {
+        buttons.push(
+          vue.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(
+        vue.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(vue.h("div", { class: "flex items-center" }, buttons));
+      popoverChildren.push(vue.h("div", { class: tigercatCore.tourFooterClasses }, footerChildren));
+      children.push(
+        vue.h(
+          "div",
+          {
+            ref: popoverRef,
+            class: tigercatCore.classNames(tigercatCore.tourPopoverClasses, props.className),
+            style: popoverStyle,
+            role: "dialog",
+            "aria-modal": "true"
+          },
+          popoverChildren
+        )
+      );
+      return vue.h(vue.Teleport, { to: "body" }, children);
+    };
+  }
+});
+var Tour_default = Tour;
+
+exports.Tour = Tour;
+exports.Tour_default = Tour_default;