@expcat/tigercat-vue 2.1.0 → 2.1.2

package/dist/{chunk-4HUYX5WW.mjs → chunk-EC62TY2Y.mjs}

@@ -2,6 +2,9 @@ import {
   renderVueOverlayTeleport,
   useVueAnchoredOverlay
 } from "./chunk-Q7Y22OFX.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/ColorPicker.ts
 import { defineComponent, h, ref, computed, watch } from "vue";
@@ -11,15 +14,27 @@ import {
   colorPickerPanelClasses,
   colorPickerInputClasses,
   colorPickerPresetClasses,
-  hexToRgb,
   rgbToHex,
   rgbToHsv,
   hsvToRgb,
   formatColorString,
   parseColorInput,
+  parseColorParts,
   classNames,
-  coerceClassValue
+  coerceClassValue,
+  mergeTigerLocale,
+  getColorPickerLabels,
+  formatColorPickerSelectPreset
 } from "@expcat/tigercat-core";
+function rgbFromValue(value) {
+  const parts = parseColorParts(value);
+  return parts ? { r: parts.r, g: parts.g, b: parts.b } : { r: 0, g: 0, b: 0 };
+}
+function explicitAlphaFromValue(value) {
+  if (!/^(rgba|hsla)\(/i.test(value.trim())) return null;
+  const parts = parseColorParts(value);
+  return parts ? parts.a : null;
+}
 var ColorPicker = defineComponent({
   name: "TigerColorPicker",
   props: {
@@ -28,12 +43,17 @@ var ColorPicker = defineComponent({
     size: { type: String, default: "md" },
     showAlpha: { type: Boolean, default: false },
     format: { type: String, default: "hex" },
-    presets: { type: Array, default: void 0 }
+    presets: { type: Array, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 }
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getColorPickerLabels(mergedLocale.value, props.labels));
     const isOpen = ref(false);
-    const alpha = ref(1);
+    const alpha = ref(explicitAlphaFromValue(props.modelValue) ?? 1);
     const containerRef = ref(null);
     const triggerRef = ref(null);
     const panelRef = ref(null);
@@ -49,8 +69,15 @@ var ColorPicker = defineComponent({
       restoreFocusOnDismiss: true,
       onDismiss: closePanel
     });
-    const rgb = computed(() => hexToRgb(props.modelValue));
+    const rgb = computed(() => rgbFromValue(props.modelValue));
     const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
+    watch(
+      () => props.modelValue,
+      (value) => {
+        const next = explicitAlphaFromValue(value);
+        if (next !== null) alpha.value = next;
+      }
+    );
     const displayValue = computed(
       () => formatColorString(
         rgb.value.r,
@@ -84,7 +111,12 @@ var ColorPicker = defineComponent({
       }
     }
     function handleAlphaChange(e) {
-      alpha.value = Number(e.target.value) / 100;
+      const nextAlpha = Number(e.target.value) / 100;
+      alpha.value = nextAlpha;
+      const format = props.format === "hex" ? "rgb" : props.format;
+      const next = formatColorString(rgb.value.r, rgb.value.g, rgb.value.b, format, nextAlpha);
+      emit("update:modelValue", next);
+      emit("change", next);
     }
     function handleHueChange(e) {
       const hue = Number(e.target.value);
@@ -96,10 +128,10 @@ var ColorPicker = defineComponent({
     function handleInputChange(e) {
       const val = e.target.value;
       inputValue.value = val;
-      const hex = parseColorInput(val);
-      if (hex) {
-        emit("update:modelValue", hex);
-        emit("change", hex);
+      const parsed = parseColorInput(val);
+      if (parsed) {
+        emit("update:modelValue", parsed);
+        emit("change", parsed);
       }
     }
     function handlePresetClick(color) {
@@ -112,6 +144,10 @@ var ColorPicker = defineComponent({
         handlePresetClick(color);
       }
     }
+    function handleClear() {
+      emit("update:modelValue", "");
+      emit("change", "");
+    }
     return () => h(
       "div",
       {
@@ -125,7 +161,9 @@ var ColorPicker = defineComponent({
           class: getColorPickerTriggerClasses(props.size, props.disabled),
           style: { backgroundColor: swatchColor.value },
           role: "button",
-          "aria-label": "Pick color",
+          "data-tiger-colorpicker-trigger": "",
+          "aria-label": labels.value.trigger,
+          title: labels.value.trigger,
           "aria-haspopup": "dialog",
           "aria-expanded": isOpen.value,
           "aria-disabled": props.disabled || void 0,
@@ -141,15 +179,35 @@ var ColorPicker = defineComponent({
               ref: panelRef,
               class: classNames(colorPickerPanelClasses, overlay.floatingClasses.value),
               style: overlay.floatingStyles.value,
-              "data-positioned": overlay.positioned.value
+              "data-positioned": overlay.positioned.value,
+              "data-tiger-colorpicker-panel": "",
+              role: "dialog",
+              "aria-label": labels.value.panelTitle
             },
             [
+              h("div", { class: "mb-2 flex items-center justify-between gap-2" }, [
+                h(
+                  "span",
+                  { class: "text-xs font-medium text-[var(--tiger-text,#111827)]" },
+                  labels.value.panelTitle
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: "text-xs text-[var(--tiger-primary,#2563eb)] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-primary,#2563eb)]",
+                    "data-tiger-colorpicker-clear": "",
+                    onClick: handleClear
+                  },
+                  labels.value.clear
+                )
+              ]),
               // Hue slider
               h("div", { class: "mb-2" }, [
                 h(
                   "label",
                   { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-                  "Hue"
+                  labels.value.hue
                 ),
                 h("input", {
                   type: "range",
@@ -157,7 +215,7 @@ var ColorPicker = defineComponent({
                   max: 360,
                   value: hsv.value.h,
                   class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": "Hue",
+                  "aria-label": labels.value.hue,
                   onInput: handleHueChange
                 })
               ]),
@@ -166,7 +224,7 @@ var ColorPicker = defineComponent({
                 h(
                   "label",
                   { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-                  "Alpha"
+                  labels.value.alpha
                 ),
                 h("input", {
                   type: "range",
@@ -174,7 +232,7 @@ var ColorPicker = defineComponent({
                   max: 100,
                   value: Math.round(alpha.value * 100),
                   class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": "Alpha",
+                  "aria-label": labels.value.alpha,
                   onInput: handleAlphaChange
                 })
               ]) : null,
@@ -191,7 +249,7 @@ var ColorPicker = defineComponent({
                   type: "text",
                   class: colorPickerInputClasses,
                   value: inputValue.value,
-                  "aria-label": "Color value",
+                  "aria-label": labels.value.value,
                   onInput: handleInputChange
                 })
               ]),
@@ -200,7 +258,7 @@ var ColorPicker = defineComponent({
                 h("div", {
                   class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
                   style: { backgroundColor: swatchColor.value },
-                  "aria-label": "Color preview"
+                  "aria-label": labels.value.preview
                 }),
                 h(
                   "span",
@@ -217,7 +275,10 @@ var ColorPicker = defineComponent({
                     style: { backgroundColor: color },
                     role: "button",
                     tabindex: 0,
-                    "aria-label": `Select ${color}`,
+                    "aria-label": formatColorPickerSelectPreset(
+                      labels.value.selectPreset,
+                      color
+                    ),
                     onClick: () => handlePresetClick(color),
                     onKeydown: (e) => handlePresetKeydown(e, color)
                   })

package/dist/{chunk-D3U2NJ32.mjs → chunk-FEQ7PZXI.mjs}

@@ -19,6 +19,7 @@ var ColorSwatch = defineComponent({
   name: "TigerColorSwatch",
   props: {
     modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String },
     disabled: { type: Boolean, default: false },
     size: { type: String, default: "md" },
     colors: { type: Array, default: void 0 },
@@ -28,12 +29,16 @@ var ColorSwatch = defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(props, { attrs, emit }) {
+    const innerValue = ref(props.defaultValue);
     const focusIndex = ref(-1);
     const optionRefs = ref([]);
     const normalizedGroups = computed(() => normalizeColorSwatchGroups(props.groups, props.colors));
     const options = computed(() => flattenColorSwatchGroups(normalizedGroups.value));
+    const selectedValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : innerValue.value
+    );
     const selectedIndex = computed(
-      () => options.value.findIndex((option) => isColorSwatchSelected(option.value, props.modelValue))
+      () => options.value.findIndex((option) => isColorSwatchSelected(option.value, selectedValue.value))
     );
     const firstEnabledIndex = computed(() => options.value.findIndex((option) => !option.disabled));
     const activeIndex = computed(
@@ -41,6 +46,7 @@ var ColorSwatch = defineComponent({
     );
     function handleSelect(option) {
       if (props.disabled || option.disabled) return;
+      if (props.modelValue === void 0) innerValue.value = option.value;
       emit("update:modelValue", option.value);
       emit("change", option.value, option);
     }
@@ -89,7 +95,7 @@ var ColorSwatch = defineComponent({
                 group.colors.map((option) => {
                   const optionIndex = flatIndex;
                   flatIndex += 1;
-                  const selected = isColorSwatchSelected(option.value, props.modelValue);
+                  const selected = isColorSwatchSelected(option.value, selectedValue.value);
                   const optionDisabled = props.disabled || !!option.disabled;
                   const tabIndex = !optionDisabled && optionIndex === (focusIndex.value >= 0 ? focusIndex.value : activeIndex.value) ? 0 : -1;
                   return h(

package/dist/{chunk-PE5OA4YG.mjs → chunk-FHUGOSEY.mjs}

@@ -10,6 +10,8 @@ function unref(value) {
 }
 function useChartInteraction(options) {
   const { emit, getData, eventNames } = options;
+  const isHoverable = () => unref(options.hoverable);
+  const isShowTooltip = () => options.showTooltip === void 0 ? true : unref(options.showTooltip);
   const localHoveredIndex = ref(null);
   const localSelectedIndex = ref(null);
   const tooltipPosition = ref({ x: 0, y: 0 });
@@ -43,11 +45,13 @@ function useChartInteraction(options) {
     });
   };
   const handleMouseEnter = (index, event) => {
-    if (!unref(options.hoverable)) return;
+    const hoverable = isHoverable();
+    if (!hoverable && !isShowTooltip()) return;
     if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = index;
     }
     tooltipPosition.value = { x: event.clientX, y: event.clientY };
+    if (!hoverable) return;
     emit("update:hoveredIndex", index);
     if (eventNames?.hover && getData) {
       emit(eventNames.hover, index, getData(index));
@@ -58,10 +62,12 @@ function useChartInteraction(options) {
   };
   const handleMouseLeave = () => {
     tooltipScheduler.cancel();
-    if (!unref(options.hoverable)) return;
+    const hoverable = isHoverable();
+    if (!hoverable && !isShowTooltip()) return;
     if (options.hoveredIndexProp?.() === void 0) {
       localHoveredIndex.value = null;
     }
+    if (!hoverable) return;
     emit("update:hoveredIndex", null);
     if (eventNames?.hover) {
       emit(eventNames.hover, null, null);

package/dist/{chunk-OAPIT53X.mjs → chunk-FIEECAJV.mjs}

@@ -30,9 +30,10 @@ import {
   tourFooterClasses,
   tourIndicatorClasses,
   tourCloseButtonClasses,
+  tourMaskClasses,
   getTourTargetRect,
   getTourPopoverPosition,
-  getTourSpotlightStyle,
+  getTourMaskHoleStyle,
   getActiveTourSteps,
   getCurrentActiveTourStep,
   getActiveTourStepPosition,
@@ -161,6 +162,7 @@ var Tour = defineComponent({
         goTo(nextStep.index);
       } else {
         emit("finish");
+        emit("close");
         emit("update:open", false);
       }
     };
@@ -215,18 +217,13 @@ var Tour = defineComponent({
         };
       }
       const children = [];
-      if (showMask && targetRect.value) {
+      if (showMask) {
         children.push(
           h("div", {
-            style: getTourSpotlightStyle(targetRect.value),
-            "aria-hidden": "true"
-          })
-        );
-      } else if (showMask) {
-        children.push(
-          h("div", {
-            class: "fixed inset-0 z-[1000] bg-black/45",
+            class: tourMaskClasses,
+            "data-tiger-tour-mask": "",
             "aria-hidden": "true",
+            style: targetRect.value ? getTourMaskHoleStyle(targetRect.value) : void 0,
             onClick: close
           })
         );

package/dist/{chunk-7SFB77JR.mjs → chunk-GBPMQJJJ.mjs}

@@ -12,6 +12,7 @@ import {
 import {
   classNames,
   coerceClassValue,
+  createProgrammaticScrollLock,
   createScrollSpyObserver,
   createScrollSpyPayload,
   flattenScrollSpyItems,
@@ -93,6 +94,7 @@ var ScrollSpy = defineComponent({
     );
     const flatItems = computed(() => flattenScrollSpyItems(props.items));
     let stopObserver = null;
+    const scrollLock = createProgrammaticScrollLock(() => props.getContainer());
     const emitActive = (item, source) => {
       const nextKeyString = getScrollSpyKeyString(item.key);
       if (nextKeyString === activeKeyString.value) return;
@@ -108,7 +110,10 @@ var ScrollSpy = defineComponent({
         offsetTop: props.offsetTop,
         targetOffset: props.targetOffset,
         bounds: props.bounds,
-        onChange: (item) => emitActive(item, "scroll")
+        onChange: (item) => {
+          if (scrollLock.isLocked()) return;
+          emitActive(item, "scroll");
+        }
       });
     };
     const handleClick = (item, event) => {
@@ -116,6 +121,7 @@ var ScrollSpy = defineComponent({
       if (item.disabled) return;
       emit("click", item, event);
       emitActive(item, "click");
+      scrollLock.lock();
       scrollToScrollSpyItem(item, props.getContainer(), props.targetOffset ?? props.offsetTop);
     };
     onMounted(() => {
@@ -141,6 +147,7 @@ var ScrollSpy = defineComponent({
     );
     onBeforeUnmount(() => {
       stopObserver?.();
+      scrollLock.dispose();
     });
     const renderItems = (items, nested = false) => h(
       "ul",

package/dist/{chunk-6AMWX5K4.mjs → chunk-GQOPDD44.mjs}

@@ -1,6 +1,6 @@
 import {
   Pagination
-} from "./chunk-2LIIMWBR.mjs";
+} from "./chunk-OYU47A57.mjs";
 import {
   VirtualList
 } from "./chunk-HS4YQGZQ.mjs";

package/dist/{chunk-5RXYJWNA.mjs → chunk-H4DEIGEG.mjs}

@@ -1,6 +1,6 @@
 import {
   Textarea
-} from "./chunk-2OI6GWOT.mjs";
+} from "./chunk-3KAHJF7D.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";
@@ -13,6 +13,9 @@ import {
 import {
   Avatar
 } from "./chunk-ZFTRR3KW.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
 
 // src/components/CommentThread.ts
 import { defineComponent, computed, h, ref } from "vue";
@@ -22,7 +25,13 @@ import {
   mergeStyleValues,
   buildCommentTree,
   clipCommentTreeDepth,
-  formatCommentTime
+  formatCommentTime,
+  getCommentThreadLabels,
+  mergeTigerLocale,
+  nextCommentLikeState,
+  resolveCommentLikeState,
+  resolveLocaleText,
+  writeCommentLikeOverlay
 } from "@expcat/tigercat-core";
 
 // ../core/src/internal/comment-thread-styles.ts
@@ -79,39 +88,55 @@ var CommentThread = defineComponent({
     },
     emptyText: {
       type: String,
-      default: "\u6682\u65E0\u8BC4\u8BBA"
+      default: void 0
     },
     replyPlaceholder: {
       type: String,
-      default: "\u5199\u4E0B\u56DE\u590D..."
+      default: void 0
     },
     replyButtonText: {
       type: String,
-      default: "\u56DE\u590D"
+      default: void 0
     },
     cancelReplyText: {
       type: String,
-      default: "\u53D6\u6D88"
+      default: void 0
     },
     likeText: {
       type: String,
-      default: "\u70B9\u8D5E"
+      default: void 0
     },
     likedText: {
       type: String,
-      default: "\u5DF2\u8D5E"
+      default: void 0
     },
     replyText: {
       type: String,
-      default: "\u56DE\u590D"
+      default: void 0
     },
     moreText: {
       type: String,
-      default: "\u66F4\u591A"
+      default: void 0
     },
     loadMoreText: {
       type: String,
-      default: "\u52A0\u8F7D\u66F4\u591A"
+      default: void 0
+    },
+    collapseRepliesText: {
+      type: String,
+      default: void 0
+    },
+    expandRepliesText: {
+      type: String,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
     },
     showAvatar: {
       type: Boolean,
@@ -144,8 +169,12 @@ var CommentThread = defineComponent({
   },
   emits: ["like", "reply", "more", "action", "update:expandedKeys", "load-more"],
   setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getCommentThreadLabels(mergedLocale.value, props.labels));
     const innerExpandedKeys = ref([...props.defaultExpandedKeys]);
     const expandedAllKeys = ref(/* @__PURE__ */ new Set());
+    const likeOverlay = ref(/* @__PURE__ */ new Map());
     const replyingTo = ref(null);
     const replyValue = ref("");
     const mergedExpandedKeys = computed(() => props.expandedKeys ?? innerExpandedKeys.value);
@@ -177,6 +206,11 @@ var CommentThread = defineComponent({
       expandedAllKeys.value = /* @__PURE__ */ new Set([...expandedAllKeys.value, node.id]);
       emit("load-more", node);
     };
+    const handleLike = (node) => {
+      const next = nextCommentLikeState(node, likeOverlay.value);
+      likeOverlay.value = writeCommentLikeOverlay(likeOverlay.value, node.id, next);
+      emit("like", node, next.liked);
+    };
     const handleReplySubmit = (node) => {
       const trimmed = replyValue.value.trim();
       if (!trimmed) return;
@@ -199,8 +233,9 @@ var CommentThread = defineComponent({
       const showLoadMore = showReplies && props.maxReplies > 0 && children.length > props.maxReplies && !showAllReplies;
       const actions = [];
       if (props.showLike) {
-        const likeLabel = node.liked ? props.likedText : props.likeText;
-        const likeCount = node.likes ? ` ${node.likes}` : "";
+        const { liked, likes } = resolveCommentLikeState(node, likeOverlay.value);
+        const likeLabel = liked ? resolveLocaleText(labels.value.likedText, props.likedText) : resolveLocaleText(labels.value.likeText, props.likeText);
+        const likeCount = likes ? ` ${likes}` : "";
         actions.push(
           h(
             Button,
@@ -211,9 +246,9 @@ var CommentThread = defineComponent({
               className: classNames(
                 commentThreadActionButtonClasses,
                 commentThreadLikeButtonClasses,
-                node.liked && commentThreadLikedButtonClasses
+                liked && commentThreadLikedButtonClasses
               ),
-              onClick: () => emit("like", node, !node.liked)
+              onClick: () => handleLike(node)
             },
             {
               default: () => h("span", { class: "flex items-center gap-1.5" }, [
@@ -222,7 +257,7 @@ var CommentThread = defineComponent({
                   {
                     class: classNames(
                       commentThreadLikeIconClasses,
-                      node.liked ? "fill-current" : "stroke-current fill-none"
+                      liked ? "fill-current" : "stroke-current fill-none"
                     ),
                     viewBox: "0 0 24 24",
                     strokeWidth: "2"
@@ -277,7 +312,7 @@ var CommentThread = defineComponent({
                     })
                   ]
                 ),
-                h("span", props.replyText)
+                h("span", resolveLocaleText(labels.value.replyText, props.replyText))
               ])
             }
           )
@@ -316,7 +351,7 @@ var CommentThread = defineComponent({
                     })
                   ]
                 ),
-                h("span", props.moreText)
+                h("span", resolveLocaleText(labels.value.moreText, props.moreText))
               ])
             }
           )
@@ -436,7 +471,10 @@ var CommentThread = defineComponent({
                   h(Textarea, {
                     rows: 3,
                     modelValue: replyValue.value,
-                    placeholder: props.replyPlaceholder,
+                    placeholder: resolveLocaleText(
+                      labels.value.replyPlaceholder,
+                      props.replyPlaceholder
+                    ),
                     className: commentThreadReplyTextareaClasses,
                     "onUpdate:modelValue": (value) => {
                       replyValue.value = value;
@@ -454,7 +492,9 @@ var CommentThread = defineComponent({
                           replyValue.value = "";
                         }
                       },
-                      { default: () => props.cancelReplyText }
+                      {
+                        default: () => resolveLocaleText(labels.value.cancelReplyText, props.cancelReplyText)
+                      }
                     ),
                     h(
                       Button,
@@ -464,7 +504,9 @@ var CommentThread = defineComponent({
                         className: commentThreadSubmitButtonClasses,
                         onClick: () => handleReplySubmit(node)
                       },
-                      { default: () => props.replyButtonText }
+                      {
+                        default: () => resolveLocaleText(labels.value.replyButtonText, props.replyButtonText)
+                      }
                     )
                   ])
                 ]
@@ -483,7 +525,13 @@ var CommentThread = defineComponent({
                   onClick: () => toggleExpanded(node.id)
                 },
                 {
-                  default: () => isExpanded ? "\u25BE \u6536\u8D77\u56DE\u590D" : `\u25B8 \u5C55\u5F00 ${children.length} \u6761\u56DE\u590D`
+                  default: () => isExpanded ? resolveLocaleText(
+                    labels.value.collapseRepliesText,
+                    props.collapseRepliesText
+                  ) : resolveLocaleText(
+                    labels.value.expandRepliesText,
+                    props.expandRepliesText
+                  ).replace("{count}", String(children.length))
                 }
               ) : null,
               showReplies ? h(
@@ -504,7 +552,9 @@ var CommentThread = defineComponent({
                       className: commentThreadPrimaryButtonClasses,
                       onClick: () => handleLoadMore(node)
                     },
-                    { default: () => props.loadMoreText }
+                    {
+                      default: () => resolveLocaleText(labels.value.loadMoreText, props.loadMoreText)
+                    }
                   ) : null
                 ]
               ) : null
@@ -514,7 +564,7 @@ var CommentThread = defineComponent({
       );
     };
     return () => {
-      const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B");
+      const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : "Comment thread");
       const children = resolvedNodes.value.length === 0 ? [
         h(
           "div",
@@ -542,7 +592,9 @@ var CommentThread = defineComponent({
             h(
               Text,
               { tag: "div", size: "sm", color: "muted", class: "font-medium" },
-              { default: () => props.emptyText }
+              {
+                default: () => resolveLocaleText(labels.value.emptyText, props.emptyText)
+              }
             )
           ]
         )