@expcat/tigercat-vue 1.3.4 → 1.5.0

package/dist/{chunk-DEJKRMMU.mjs → chunk-4IZUJJUO.mjs}

@@ -1,5 +1,17 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/ImageCropper.ts
-import { defineComponent, h, ref, computed, watch, onMounted } from "vue";
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  getCurrentInstance
+} from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -15,12 +27,18 @@ import {
   getInitialCropRect,
   resizeCropRect,
   moveCropRect,
-  cropCanvas
+  cropCanvas,
+  getImageEditorLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var ImageCropper = defineComponent({
   name: "TigerImageCropper",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     src: { type: String, required: true },
     aspectRatio: { type: Number, default: void 0 },
     minWidth: { type: Number, default: 20 },
@@ -39,6 +57,11 @@ var ImageCropper = defineComponent({
   },
   emits: ["crop-change", "ready"],
   setup(props, { emit, attrs, expose }) {
+    const instance = getCurrentInstance();
+    const maskId = `tiger-crop-mask-${instance?.uid ?? "0"}`;
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
     const containerRef = ref(null);
     const imageRef = ref(null);
     const imageLoaded = ref(false);
@@ -270,7 +293,7 @@ var ImageCropper = defineComponent({
               minHeight: "200px"
             }),
             role: "img",
-            "aria-label": "Loading image for cropping"
+            "aria-label": labels.value.loadingCropImageAriaLabel
           },
           [
             h("div", {
@@ -288,7 +311,7 @@ var ImageCropper = defineComponent({
           height: `${displayHeight.value}px`
         },
         draggable: false,
-        alt: "Image to crop"
+        alt: labels.value.imageToCropAriaLabel
       });
       const mask = h(
         "svg",
@@ -300,7 +323,7 @@ var ImageCropper = defineComponent({
         },
         [
           h("defs", null, [
-            h("mask", { id: "crop-mask" }, [
+            h("mask", { id: maskId }, [
               h("rect", {
                 width: displayWidth.value,
                 height: displayHeight.value,
@@ -319,7 +342,7 @@ var ImageCropper = defineComponent({
             width: displayWidth.value,
             height: displayHeight.value,
             fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-            mask: "url(#crop-mask)"
+            mask: `url(#${maskId})`
           })
         ]
       );
@@ -342,7 +365,7 @@ var ImageCropper = defineComponent({
         },
         role: "button",
         tabindex: 0,
-        "aria-label": "Move crop area",
+        "aria-label": labels.value.moveCropAreaAriaLabel,
         onMousedown: (e) => handleMouseDown(e, "move"),
         onTouchstart: (e) => handleTouchStart(e, "move"),
         onKeydown: handleMoveKeyDown
@@ -412,7 +435,7 @@ var ImageCropper = defineComponent({
           style: pos,
           role: "button",
           tabindex: 0,
-          "aria-label": `Resize crop area ${handle}`,
+          "aria-label": labels.value.resizeCropAreaAriaLabel.replace("{handle}", handle),
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
           onTouchstart: (e) => handleTouchStart(e, "resize", handle),
           onKeydown: (e) => handleResizeKeyDown(e, handle)
@@ -429,7 +452,7 @@ var ImageCropper = defineComponent({
             height: `${displayHeight.value}px`
           }),
           role: "application",
-          "aria-label": "Image cropper",
+          "aria-label": labels.value.cropperDialogAriaLabel,
           "aria-roledescription": "image cropper"
         },
         [img, mask, selection, dragArea, ...guideLines, ...handles]

package/dist/{chunk-IPZVGA6Y.mjs → chunk-4QCJUILG.mjs}

@@ -1,6 +1,9 @@
 import {
   VirtualList
-} from "./chunk-PENI3H3I.mjs";
+} from "./chunk-HS4YQGZQ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
 
 // src/components/Tree.ts
 import { defineComponent, computed, ref, h, watch, nextTick } from "vue";
@@ -22,6 +25,8 @@ import {
   getSpinnerSVG,
   normalizeSvgAttrs,
   getVisibleTreeItems,
+  getFirstVisibleChildKey,
+  getTreeKeyboardAction,
   getParentKeys,
   getAllKeys,
   findNode,
@@ -30,7 +35,9 @@ import {
   getCheckedKeysByStrategy,
   filterTreeNodes,
   getAutoExpandKeys,
-  checkedSetsFromState
+  checkedSetsFromState,
+  resolveLocaleText,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var spinnerSvg = getSpinnerSVG("spinner");
 var ExpandIcon = (expanded, hasChildren) => {
@@ -218,7 +225,7 @@ var Tree = defineComponent({
      */
     emptyText: {
       type: String,
-      default: "No data"
+      default: void 0
     },
     /**
      * Accessible label for the tree container
@@ -263,6 +270,13 @@ var Tree = defineComponent({
     className: {
       type: String,
       default: void 0
+    },
+    /**
+     * Locale overrides merged on top of ConfigProvider locale
+     */
+    locale: {
+      type: Object,
+      default: void 0
     }
   },
   emits: [
@@ -279,6 +293,8 @@ var Tree = defineComponent({
   ],
   setup(props, { emit, attrs }) {
     const rootEl = ref(null);
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const effectiveSelectable = computed(() => {
       if (props.selectionMode !== void 0) {
         return props.selectionMode !== "none";
@@ -496,21 +512,6 @@ var Tree = defineComponent({
     function getCurrentKey(fallbackKey) {
       return activeKey.value ?? defaultActiveKey.value ?? fallbackKey;
     }
-    function getNavigationIndex(key) {
-      return focusableKeys.value.findIndex((k) => k === key);
-    }
-    function getFirstChildKey(key) {
-      const list = visibleItems.value;
-      const index = list.findIndex((i) => i.key === key);
-      if (index < 0) return void 0;
-      const base = list[index];
-      for (let i = index + 1; i < list.length; i++) {
-        const item = list[i];
-        if (item.level <= base.level) break;
-        if (item.parentKey === key && !item.node.disabled) return item.key;
-      }
-      return void 0;
-    }
     function renderTreeRow(node, level) {
       const hasChildren = !!(node.children && node.children.length > 0);
       const isExpanded = computedExpandedKeys.value.has(node.key);
@@ -602,83 +603,41 @@ var Tree = defineComponent({
           onKeydown: (e) => {
             if (node.disabled) return;
             const currentKey = getCurrentKey(node.key);
-            const currentIndex = getNavigationIndex(currentKey);
             const parents = getParentKeys(props.treeData, node.key);
             const parentKey = parents[parents.length - 1];
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
-              focusKey(focusableKeys.value[currentIndex + 1] ?? currentKey);
-              return;
-            }
-            if (e.key === "ArrowUp") {
-              e.preventDefault();
-              focusKey(focusableKeys.value[currentIndex - 1] ?? currentKey);
-              return;
-            }
-            if (e.key === "Home") {
-              e.preventDefault();
-              focusKey(focusableKeys.value[0] ?? currentKey);
-              return;
-            }
-            if (e.key === "End") {
-              e.preventDefault();
-              focusKey(focusableKeys.value[focusableKeys.value.length - 1] ?? currentKey);
-              return;
-            }
-            if (e.key === "ArrowRight") {
-              e.preventDefault();
-              if (isExpandable && !isExpanded) {
-                handleExpand(node.key);
-                return;
-              }
-              if (isExpandable && isExpanded) {
-                focusKey(getFirstChildKey(node.key) ?? currentKey);
-              }
-              return;
-            }
-            if (e.key === "ArrowLeft") {
-              e.preventDefault();
-              if (isExpandable && isExpanded) {
-                handleExpand(node.key);
-                return;
-              }
-              focusKey(parentKey ?? currentKey);
-              return;
-            }
-            if (e.key === "Escape") {
-              e.preventDefault();
-              if (isExpandable && isExpanded) {
-                handleExpand(node.key);
-                return;
-              }
-              if (parentKey !== void 0) {
-                if (computedExpandedKeys.value.has(parentKey)) {
-                  handleExpand(parentKey);
-                }
-                focusKey(parentKey);
-              }
-              return;
-            }
-            if (e.key === "Enter") {
-              e.preventDefault();
-              if (effectiveSelectable.value) {
-                handleSelect(node.key, e);
-                return;
-              }
-              if (isExpandable) {
-                handleExpand(node.key);
-              }
-              return;
-            }
-            if (e.key === " ") {
-              e.preventDefault();
-              if (props.checkable) {
-                handleCheck(node.key, !isChecked);
-                return;
-              }
-              if (isExpandable) {
-                handleExpand(node.key);
-              }
+            const action = getTreeKeyboardAction({
+              key: e.key,
+              nodeKey: node.key,
+              currentKey,
+              focusableKeys: focusableKeys.value,
+              parentKey,
+              firstChildKey: getFirstVisibleChildKey(visibleItems.value, node.key),
+              isExpandable,
+              isExpanded,
+              isParentExpanded: parentKey !== void 0 && computedExpandedKeys.value.has(parentKey),
+              isChecked,
+              selectable: effectiveSelectable.value,
+              checkable: !!props.checkable
+            });
+            if (!action) return;
+            e.preventDefault();
+            switch (action.type) {
+              case "focus":
+                focusKey(action.key);
+                break;
+              case "toggleExpand":
+                handleExpand(action.key);
+                break;
+              case "select":
+                handleSelect(action.key, e);
+                break;
+              case "check":
+                handleCheck(action.key, action.checked);
+                break;
+              case "collapseAndFocus":
+                if (action.collapseKey !== void 0) handleExpand(action.collapseKey);
+                focusKey(action.focusKey);
+                break;
             }
           },
           onClick: (e) => {
@@ -693,7 +652,8 @@ var Tree = defineComponent({
       );
     }
     function renderTreeNode(node, level) {
-      const hasChildren = !!(node.children && node.children.length > 0);
+      const children = node.children ?? [];
+      const hasChildren = children.length > 0;
       const isExpanded = computedExpandedKeys.value.has(node.key);
       const isFiltered = filteredNodeKeys.value.size > 0;
       const isMatched = filteredNodeKeys.value.has(node.key);
@@ -714,7 +674,7 @@ var Tree = defineComponent({
             {
               class: classNames(treeNodeChildrenClasses, props.showLine && treeLineClasses)
             },
-            node.children.map((child) => renderTreeNode(child, level + 1))
+            children.map((child) => renderTreeNode(child, level + 1))
           )
         ]
       );
@@ -734,13 +694,22 @@ var Tree = defineComponent({
             role: "tree",
             "aria-label": props.ariaLabel
           },
-          [h("div", { class: treeEmptyStateClasses }, props.emptyText)]
+          [
+            h(
+              "div",
+              { class: treeEmptyStateClasses },
+              resolveLocaleText("No data", props.emptyText, mergedLocale.value?.common?.emptyText)
+            )
+          ]
         );
       }
       const searchInput = props.searchable ? h("input", {
         type: "text",
         class: "w-full mb-2 px-2 py-1 text-sm border border-[var(--tiger-border,#e5e7eb)] rounded bg-[var(--tiger-surface,#ffffff)] focus:outline-none focus:ring-1 focus:ring-[var(--tiger-primary,#2563eb)]",
-        placeholder: "Search...",
+        placeholder: resolveLocaleText(
+          "Search...",
+          mergedLocale.value?.common?.searchPlaceholder
+        ),
         value: internalSearchValue.value,
         onInput: (e) => {
           internalSearchValue.value = e.target.value;

package/dist/{chunk-NWS45JQP.mjs → chunk-4RK5BDGR.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-R2HO74FE.mjs";
 import {
   ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
+} from "./chunk-HLPSHCXO.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-G2LB4QCL.mjs";
 import {
   ChartAxis
 } from "./chunk-ZWVA7HT3.mjs";
@@ -21,7 +21,7 @@ import {
 } from "./chunk-MI6TL3CQ.mjs";
 
 // src/components/AreaChart.ts
-import { defineComponent, computed, h, ref, useId } from "vue";
+import { defineComponent, computed, getCurrentInstance, h, ref, useId } from "vue";
 import {
   classNames,
   createAreaPath,
@@ -249,12 +249,16 @@ var AreaChart = defineComponent({
     "point-hover"
   ],
   setup(props, { emit }) {
+    const instance = getCurrentInstance();
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("area", useId());
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const resolvedSeries = computed(
-      () => resolveSeriesData(props.series, props.data)
+      () => resolveSeriesData(props.series, props.data, {
+        color: props.areaColor,
+        pointColor: props.pointColor
+      })
     );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
@@ -409,6 +413,18 @@ var AreaChart = defineComponent({
       hoveredPointInfo.value = null;
       emit("point-hover", null, null, null);
     };
+    const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
+      if (!props.hoverable) return;
+      const rect = el.getBoundingClientRect();
+      hoveredPointInfo.value = { seriesIndex, pointIndex };
+      tooltipPosition.value = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+      emit(
+        "point-hover",
+        seriesIndex,
+        pointIndex,
+        resolvedSeries.value[seriesIndex]?.data[pointIndex]
+      );
+    };
     const handlePointClick = (seriesIndex, pointIndex) => {
       emit(
         "point-click",
@@ -425,6 +441,7 @@ var AreaChart = defineComponent({
       handleSeriesSelect(seriesIndex);
     };
     return () => {
+      const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
       const reversedSeriesData = [...seriesData.value].reverse();
       const chart = h(
         ChartCanvas,
@@ -633,6 +650,8 @@ var AreaChart = defineComponent({
                 sd.points.map((point) => {
                   const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                   const hoverSize = sd.pointSize + 2;
+                  const datum = resolvedSeries.value[sd.seriesIndex]?.data?.[point.pointIndex];
+                  const pointInteractive = props.hoverable || pointClickable;
                   return h("circle", {
                     key: `point-${sd.seriesKey}-${point.pointIndex}`,
                     cx: point.x,
@@ -641,17 +660,46 @@ var AreaChart = defineComponent({
                     fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     "stroke-width": sd.pointHollow ? 2 : 0,
-                    class: linePointTransitionClasses,
+                    class: classNames(
+                      linePointTransitionClasses,
+                      pointInteractive && "cursor-pointer"
+                    ),
                     style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
+                    role: pointInteractive ? "button" : "img",
+                    "aria-label": datum?.label ?? String(datum?.y ?? ""),
+                    tabindex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                    onMousemove: handlePointMouseMove,
-                    onMouseleave: handlePointMouseLeave,
-                    onClick: (e) => {
+                    onMouseenter: props.hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMousemove: props.hoverable ? handlePointMouseMove : void 0,
+                    onMouseleave: props.hoverable ? handlePointMouseLeave : void 0,
+                    onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);
-                    }
+                    } : void 0,
+                    onFocus: props.hoverable ? (e) => showPointTooltipFromElement(
+                      e.currentTarget,
+                      sd.seriesIndex,
+                      point.pointIndex
+                    ) : void 0,
+                    onBlur: props.hoverable ? handlePointMouseLeave : void 0,
+                    onKeydown: pointInteractive ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (pointClickable) {
+                          handlePointClick(sd.seriesIndex, point.pointIndex);
+                        } else {
+                          showPointTooltipFromElement(
+                            e.currentTarget,
+                            sd.seriesIndex,
+                            point.pointIndex
+                          );
+                        }
+                      } else if (e.key === "Escape" && props.hoverable) {
+                        handlePointMouseLeave();
+                      }
+                    } : void 0
                   });
                 })
               )

package/dist/{chunk-RKZN3URO.js → chunk-55BSMMUN.js}

@@ -12,6 +12,8 @@ var _vue = require('vue');
 
 
 
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var CodeEditor = _vue.defineComponent.call(void 0, {
   name: "TigerCodeEditor",
@@ -49,6 +51,12 @@ var CodeEditor = _vue.defineComponent.call(void 0, {
   setup(props, { emit, attrs }) {
     const internalValue = _vue.ref.call(void 0, props.defaultValue || "");
     const textareaRef = _vue.ref.call(void 0, null);
+    const activeLine = _vue.ref.call(void 0, 0);
+    const updateActiveLine = () => {
+      const ta = textareaRef.value;
+      if (!ta) return;
+      activeLine.value = _tigercatcore.getActiveLineIndex.call(void 0, ta.value, ta.selectionStart);
+    };
     const code = _vue.computed.call(void 0, () => props.value !== void 0 ? props.value : internalValue.value);
     _vue.watch.call(void 0, 
       () => props.value,
@@ -77,10 +85,12 @@ var CodeEditor = _vue.defineComponent.call(void 0, {
       return s;
     });
     const onInput = (e) => {
-      const val = e.target.value;
+      const target = e.target;
+      const val = target.value;
       internalValue.value = val;
       emit("update:value", val);
       emit("change", val);
+      activeLine.value = _tigercatcore.getActiveLineIndex.call(void 0, val, target.selectionStart);
     };
     const onKeyDown = (e) => {
       if (e.key === "Tab") {
@@ -98,11 +108,18 @@ var CodeEditor = _vue.defineComponent.call(void 0, {
       }
     };
     const renderHighlightedLine = (line, lineIndex) => {
+      const showActiveLine = props.highlightActiveLine && !props.disabled;
+      const isActive = showActiveLine && lineIndex === activeLine.value;
+      const lineClass = _tigercatcore.classNames.call(void 0, 
+        "min-h-[1.625rem]",
+        isActive && _tigercatcore.getCodeEditorActiveLineClasses.call(void 0, props.theme)
+      );
       const engine = props.highlighter;
       if (_optionalChain([engine, 'optionalAccess', _ => _.highlightLine])) {
         return _vue.h.call(void 0, "div", {
           key: lineIndex,
-          class: "min-h-[1.625rem]",
+          class: lineClass,
+          "data-active-line": isActive ? "" : void 0,
           innerHTML: engine.highlightLine(line, props.language, props.theme) || (line === "" ? "\n" : "")
         });
       }
@@ -111,10 +128,11 @@ var CodeEditor = _vue.defineComponent.call(void 0, {
         const cls = _tigercatcore.getTokenClasses.call(void 0, token.type, props.theme);
         return cls ? _vue.h.call(void 0, "span", { class: cls, key: ti }, token.value) : token.value;
       });
-      return _vue.h.call(void 0, "div", { key: lineIndex, class: "min-h-[1.625rem]" }, [
-        ...spans,
-        line === "" ? "\n" : null
-      ]);
+      return _vue.h.call(void 0, 
+        "div",
+        { key: lineIndex, class: lineClass, "data-active-line": isActive ? "" : void 0 },
+        [...spans, line === "" ? "\n" : null]
+      );
     };
     return () => {
       const wrapClass = props.wordWrap ? "whitespace-pre-wrap break-all" : "";
@@ -143,6 +161,9 @@ var CodeEditor = _vue.defineComponent.call(void 0, {
         value: code.value,
         onInput,
         onKeydown: onKeyDown,
+        onSelect: updateActiveLine,
+        onClick: updateActiveLine,
+        onKeyup: updateActiveLine,
         readonly: props.readOnly || props.disabled,
         disabled: props.disabled,
         placeholder: props.placeholder,

package/dist/{chunk-NHBN6VAY.mjs → chunk-57VPT3MN.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-R2HO74FE.mjs";
 import {
   ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
+} from "./chunk-HLPSHCXO.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-G2LB4QCL.mjs";
 import {
   ChartCanvas
 } from "./chunk-W5RZPTFD.mjs";