@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-KYQAAQKV.mjs

@@ -0,0 +1,192 @@
+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, computeFunnelSegments, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+
+var FunnelChart = defineComponent({
+  name: "TigerFunnelChart",
+  props: {
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: 300 },
+    padding: { type: [Number, Object], default: 24 },
+    data: { type: Array, required: true },
+    direction: { type: String, default: "vertical" },
+    gap: { type: Number, default: 2 },
+    pinch: { type: Boolean, default: false },
+    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", "segment-click", "segment-hover"],
+  setup(props, { emit }) {
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleKeyDown,
+      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) => props.data[index],
+      eventNames: { hover: "segment-hover", click: "segment-click" }
+    });
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const palette = computed(() => resolveChartPalette(props.colors));
+    const segments = computed(
+      () => computeFunnelSegments(props.data, {
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        gap: props.gap,
+        pinch: props.pinch,
+        colors: palette.value
+      })
+    );
+    const total = computed(() => props.data.reduce((s, d) => s + d.value, 0));
+    const legendItems = computed(
+      () => buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d, i) => d.label ?? `Stage ${i + 1}`,
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
+      })
+    );
+    const tooltipContent = computed(
+      () => resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const pct = total.value > 0 ? (datum.value / total.value * 100).toFixed(1) : "0";
+          const label = datum.label ?? `Stage ${index + 1}`;
+          return `${label}: ${datum.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: () => {
+            const paths = h(
+              ChartSeries,
+              { data: props.data, type: "funnel" },
+              {
+                default: () => segments.value.map((seg) => {
+                  const opacity = getChartElementOpacity(seg.index, activeIndex.value, {
+                    activeOpacity: props.activeOpacity,
+                    inactiveOpacity: props.inactiveOpacity
+                  });
+                  return h("path", {
+                    key: `seg-${seg.index}`,
+                    d: seg.path,
+                    fill: seg.color,
+                    opacity,
+                    class: classNames(interactive && "cursor-pointer"),
+                    style: {
+                      transition: "opacity 0.2s ease-out"
+                    },
+                    tabindex: props.selectable ? 0 : void 0,
+                    role: props.selectable ? "button" : "img",
+                    "aria-label": seg.label,
+                    onMouseenter: (e) => handleMouseEnter(seg.index, e),
+                    onMousemove: handleMouseMove,
+                    onMouseleave: handleMouseLeave,
+                    onClick: () => handleClick(seg.index),
+                    onKeydown: (e) => handleKeyDown(e, seg.index)
+                  });
+                })
+              }
+            );
+            const labels = segments.value.map(
+              (seg) => h(
+                "text",
+                {
+                  key: `label-${seg.index}`,
+                  x: seg.cx,
+                  y: seg.cy,
+                  class: chartAxisTickTextClasses,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle"
+                },
+                seg.label
+              )
+            );
+            return [paths, ...labels];
+          }
+        }
+      );
+      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 FunnelChart_default = FunnelChart;
+
+export { FunnelChart, FunnelChart_default };

package/dist/{chunk-KCJPJQIS.js → chunk-LFV3KYO2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunk6FXYRDYH_js = require('./chunk-6FXYRDYH.js');
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var chunk2KDSHEZT_js = require('./chunk-2KDSHEZT.js');
 var chunkDUQ7Q2GO_js = require('./chunk-DUQ7Q2GO.js');
 var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
@@ -151,7 +151,7 @@ var CommentThread = vue.defineComponent({
     const ACTION_BTN = `${BTN_BASE} text-gray-400 hover:text-gray-600 font-normal hover:bg-gray-50`;
     const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-medium hover:bg-[var(--tiger-primary,#2563eb)]/5`;
     const renderActionButton = (label, key, onClick, active) => vue.h(
-      chunkDELTFEEJ_js.Button,
+      chunkU7CCKZAG_js.Button,
       {
         key,
         size: "sm",
@@ -201,7 +201,7 @@ var CommentThread = vue.defineComponent({
           const actionKey = action.key ?? `${node.id}-action-${index}`;
           actions.push(
             vue.h(
-              chunkDELTFEEJ_js.Button,
+              chunkU7CCKZAG_js.Button,
               {
                 key: actionKey,
                 size: "sm",
@@ -295,7 +295,7 @@ var CommentThread = vue.defineComponent({
                   }),
                   vue.h("div", { class: "flex items-center gap-2 justify-end" }, [
                     vue.h(
-                      chunkDELTFEEJ_js.Button,
+                      chunkU7CCKZAG_js.Button,
                       {
                         size: "sm",
                         variant: "ghost",
@@ -307,7 +307,7 @@ var CommentThread = vue.defineComponent({
                       { default: () => props.cancelReplyText }
                     ),
                     vue.h(
-                      chunkDELTFEEJ_js.Button,
+                      chunkU7CCKZAG_js.Button,
                       {
                         size: "sm",
                         variant: "primary",
@@ -319,7 +319,7 @@ var CommentThread = vue.defineComponent({
                 ]
               ) : null,
               hasChildren ? vue.h(
-                chunkDELTFEEJ_js.Button,
+                chunkU7CCKZAG_js.Button,
                 {
                   size: "sm",
                   variant: "ghost",
@@ -343,7 +343,7 @@ var CommentThread = vue.defineComponent({
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMore ? vue.h(
-                    chunkDELTFEEJ_js.Button,
+                    chunkU7CCKZAG_js.Button,
                     {
                       size: "sm",
                       variant: "ghost",

package/dist/chunk-LGVPLGK3.mjs

@@ -0,0 +1,361 @@
+import { h, defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
+import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, coerceClassValue, icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, cascaderSearchInputClasses, cascaderEmptyStateClasses, cascaderSearchResultClasses, cascaderColumnClasses, isCascaderOptionExpandable, getCascaderOptionClasses, cascaderDropdownClasses, cascaderBaseClasses } from '@expcat/tigercat-core';
+
+// src/components/Cascader.ts
+var cascaderInstanceId = 0;
+var ChevronRightIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  },
+  [
+    h("path", {
+      "fill-rule": "evenodd",
+      d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var Cascader = defineComponent({
+  name: "TigerCascader",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "Please select"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    showSearch: {
+      type: [Boolean, Object],
+      default: false
+    },
+    expandTrigger: {
+      type: String,
+      default: "click"
+    },
+    changeOnSelect: {
+      type: Boolean,
+      default: false
+    },
+    separator: {
+      type: String,
+      default: " / "
+    },
+    notFoundText: {
+      type: String,
+      default: "No results found"
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++cascaderInstanceId;
+    const isOpen = ref(false);
+    const searchQuery = ref("");
+    const activePath = ref([]);
+    const triggerRef = ref(null);
+    const dropdownRef = ref(null);
+    const searchInputRef = ref(null);
+    const displayLabel = computed(() => {
+      if (!props.modelValue || props.modelValue.length === 0) return "";
+      return getCascaderDisplayLabel(props.options, props.modelValue, props.separator);
+    });
+    const columns = computed(() => {
+      return getCascaderColumns(props.options, activePath.value);
+    });
+    const isSearchMode = computed(() => {
+      return props.showSearch && searchQuery.value.length > 0;
+    });
+    const flattenedOptions = computed(() => {
+      if (!props.showSearch) return [];
+      return flattenCascaderOptions(props.options);
+    });
+    const searchResults = computed(() => {
+      if (!isSearchMode.value) return [];
+      return filterCascaderOptions(flattenedOptions.value, searchQuery.value, props.showSearch);
+    });
+    const triggerClasses = computed(
+      () => classNames(
+        getCascaderTriggerClasses(props.size, props.disabled, isOpen.value),
+        coerceClassValue(attrs.class)
+      )
+    );
+    watch(isOpen, (open) => {
+      if (open) {
+        activePath.value = props.modelValue ? [...props.modelValue] : [];
+        searchQuery.value = "";
+      }
+    });
+    function toggleOpen() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+    }
+    function handleOptionClick(option, level) {
+      if (option.disabled) return;
+      const newPath = activePath.value.slice(0, level);
+      newPath.push(option.value);
+      activePath.value = newPath;
+      const hasChildren = isCascaderOptionExpandable(option);
+      if (!hasChildren) {
+        emit("update:modelValue", newPath);
+        emit("change", newPath);
+        closeDropdown();
+      } else if (props.changeOnSelect) {
+        emit("update:modelValue", newPath);
+        emit("change", newPath);
+      }
+    }
+    function handleOptionHover(option, level) {
+      if (props.expandTrigger !== "hover" || option.disabled) return;
+      const newPath = activePath.value.slice(0, level);
+      newPath.push(option.value);
+      activePath.value = newPath;
+    }
+    function handleSearchResultClick(valuePath, disabled) {
+      if (disabled) return;
+      emit("update:modelValue", valuePath);
+      emit("change", valuePath);
+      closeDropdown();
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      emit("update:modelValue", []);
+      emit("change", []);
+    }
+    function handleSearchInput(e) {
+      searchQuery.value = e.target.value;
+    }
+    function handleTriggerKeyDown(e) {
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleOpen();
+          break;
+        case "Escape":
+          e.preventDefault();
+          closeDropdown();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen.value) {
+            isOpen.value = true;
+          }
+          break;
+      }
+    }
+    function handleDocumentClick(e) {
+      const target = e.target;
+      if (triggerRef.value && !triggerRef.value.contains(target) && dropdownRef.value && !dropdownRef.value.contains(target)) {
+        closeDropdown();
+      }
+    }
+    watch(isOpen, (open) => {
+      if (open) {
+        document.addEventListener("click", handleDocumentClick, true);
+      } else {
+        document.removeEventListener("click", handleDocumentClick, true);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", handleDocumentClick, true);
+    });
+    return () => {
+      const hasValue = props.modelValue && props.modelValue.length > 0;
+      const showClear = props.clearable && hasValue && !props.disabled;
+      const listboxId = `tiger-cascader-listbox-${instanceId}`;
+      const chevronIcon = h(
+        "svg",
+        {
+          class: classNames(
+            "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+            isOpen.value && "rotate-180"
+          ),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: icon20ViewBox,
+          fill: "currentColor"
+        },
+        [
+          h("path", {
+            "fill-rule": "evenodd",
+            d: chevronDownSolidIcon20PathD,
+            "clip-rule": "evenodd"
+          })
+        ]
+      );
+      const clearIcon = showClear ? h(
+        "span",
+        {
+          class: "flex items-center",
+          role: "button",
+          "aria-label": "Clear selection",
+          onClick: handleClear
+        },
+        [
+          h(
+            "svg",
+            {
+              class: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: icon20ViewBox,
+              fill: "currentColor"
+            },
+            [
+              h("path", {
+                "fill-rule": "evenodd",
+                d: closeSolidIcon20PathD,
+                "clip-rule": "evenodd"
+              })
+            ]
+          )
+        ]
+      ) : null;
+      const trigger = h(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          class: triggerClasses.value,
+          disabled: props.disabled,
+          role: "combobox",
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": "listbox",
+          "aria-controls": isOpen.value ? listboxId : void 0,
+          onClick: toggleOpen,
+          onKeydown: handleTriggerKeyDown
+        },
+        [
+          h(
+            "span",
+            {
+              class: classNames(
+                "flex-1 text-left truncate",
+                !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              )
+            },
+            hasValue ? displayLabel.value : props.placeholder
+          ),
+          h("span", { class: "flex items-center gap-1" }, [clearIcon, chevronIcon])
+        ]
+      );
+      let dropdownContent = null;
+      if (isOpen.value) {
+        const children = [];
+        if (props.showSearch) {
+          children.push(
+            h("input", {
+              ref: searchInputRef,
+              type: "text",
+              class: cascaderSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery.value,
+              onInput: handleSearchInput,
+              "aria-label": "Search options"
+            })
+          );
+        }
+        if (isSearchMode.value) {
+          if (searchResults.value.length === 0) {
+            children.push(h("div", { class: cascaderEmptyStateClasses }, props.notFoundText));
+          } else {
+            const searchList = h(
+              "div",
+              { class: "max-h-64 overflow-auto", role: "listbox", id: listboxId },
+              searchResults.value.map(
+                (item) => h(
+                  "div",
+                  {
+                    class: classNames(
+                      cascaderSearchResultClasses,
+                      item.disabled && "opacity-50 cursor-not-allowed"
+                    ),
+                    role: "option",
+                    "aria-selected": props.modelValue?.join(",") === item.valuePath.join(","),
+                    "aria-disabled": item.disabled,
+                    onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
+                  },
+                  item.label
+                )
+              )
+            );
+            children.push(searchList);
+          }
+        } else {
+          const columnElements = columns.value.map(
+            (col, colIndex) => h(
+              "div",
+              {
+                class: cascaderColumnClasses,
+                role: "listbox",
+                id: colIndex === 0 ? listboxId : void 0,
+                "aria-label": `Level ${colIndex + 1}`
+              },
+              col.options.map((option) => {
+                const isSelected = col.selectedValue === option.value;
+                const hasChildren = isCascaderOptionExpandable(option);
+                return h(
+                  "div",
+                  {
+                    class: getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
+                    role: "option",
+                    "aria-selected": isSelected,
+                    "aria-disabled": option.disabled,
+                    onClick: () => handleOptionClick(option, colIndex),
+                    onMouseenter: () => handleOptionHover(option, colIndex)
+                  },
+                  [
+                    h("span", { class: "flex-1 truncate" }, option.label),
+                    hasChildren ? ChevronRightIcon : null
+                  ]
+                );
+              })
+            )
+          );
+          children.push(h("div", { class: "flex" }, columnElements));
+        }
+        dropdownContent = h(
+          "div",
+          {
+            ref: dropdownRef,
+            class: classNames(cascaderDropdownClasses, isSearchMode.value && "flex-col")
+          },
+          children
+        );
+      }
+      return h(
+        "div",
+        {
+          class: cascaderBaseClasses,
+          "data-testid": "cascader"
+        },
+        [trigger, dropdownContent]
+      );
+    };
+  }
+});
+var Cascader_default = Cascader;
+
+export { Cascader, Cascader_default };

package/dist/chunk-LHPBK4MG.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/VirtualList.ts
+var VirtualList = vue.defineComponent({
+  name: "TigerVirtualList",
+  props: {
+    itemCount: { type: Number, default: 0 },
+    itemHeight: { type: Number, default: 40 },
+    height: { type: Number, default: 400 },
+    overscan: { type: Number, default: 5 }
+  },
+  emits: ["scroll"],
+  setup(props, { emit, attrs, slots }) {
+    const scrollTop = vue.ref(0);
+    const containerRef = vue.ref(null);
+    const range = vue.computed(
+      () => tigercatCore.getFixedVirtualRange(
+        scrollTop.value,
+        props.height,
+        props.itemHeight,
+        props.itemCount,
+        props.overscan
+      )
+    );
+    function handleScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+        emit("scroll", scrollTop.value);
+      }
+    }
+    return () => {
+      const { startIndex, endIndex, offsetTop, totalHeight } = range.value;
+      const items = [];
+      for (let i = startIndex; i <= endIndex; i++) {
+        const slotContent = slots.default?.({ index: i });
+        items.push(
+          vue.h(
+            "div",
+            {
+              key: i,
+              style: {
+                height: `${props.itemHeight}px`,
+                width: "100%"
+              }
+            },
+            slotContent
+          )
+        );
+      }
+      return vue.h(
+        "div",
+        {
+          ref: containerRef,
+          class: tigercatCore.classNames(tigercatCore.virtualListContainerClasses, tigercatCore.coerceClassValue(attrs.class)),
+          style: { height: `${props.height}px` },
+          onScroll: handleScroll
+        },
+        [
+          vue.h(
+            "div",
+            {
+              class: tigercatCore.virtualListInnerClasses,
+              style: { height: `${totalHeight}px` }
+            },
+            [
+              vue.h(
+                "div",
+                {
+                  style: {
+                    transform: `translateY(${offsetTop}px)`,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%"
+                  }
+                },
+                items
+              )
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var VirtualList_default = VirtualList;
+
+exports.VirtualList = VirtualList;
+exports.VirtualList_default = VirtualList_default;