@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-H4DEIGEG.mjs → chunk-ETJ4QD6U.mjs}

@@ -1,63 +1,63 @@
 import {
   Textarea
-} from "./chunk-3KAHJF7D.mjs";
-import {
-  Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-ZQCKZXQI.mjs";
 import {
   Tag
-} from "./chunk-342DH5CF.mjs";
+} from "./chunk-7PLYHGMY.mjs";
 import {
   Text
-} from "./chunk-NN6AINLG.mjs";
+} from "./chunk-I77GUQV4.mjs";
 import {
   Avatar
-} from "./chunk-ZFTRR3KW.mjs";
+} from "./chunk-OGXSLKXD.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/CommentThread.ts
-import { defineComponent, computed, h, ref } from "vue";
+import { defineComponent, computed, h, ref, watch, getCurrentInstance } from "vue";
 import {
   classNames,
   coerceClassValue,
   mergeStyleValues,
-  buildCommentTree,
+  canSubmitCommentReply,
   clipCommentTreeDepth,
+  formatBadgeCountLabel,
   formatCommentTime,
+  getCommentRepliesView,
+  getTextClasses,
+  nextCommentRevealedCount,
+  resolveCommentNodes,
   getCommentThreadLabels,
   mergeTigerLocale,
   nextCommentLikeState,
   resolveCommentLikeState,
   resolveLocaleText,
-  writeCommentLikeOverlay
+  writeCommentLikeOverlay,
+  commentThreadActionButtonClasses,
+  commentThreadPrimaryButtonClasses,
+  commentThreadLikeButtonClasses,
+  commentThreadLikedButtonClasses,
+  commentThreadReplyButtonClasses,
+  commentThreadNeutralButtonClasses,
+  commentThreadLikeIconClasses,
+  commentThreadDividerClasses,
+  commentThreadAvatarClasses,
+  commentThreadAuthorClasses,
+  commentThreadUserTitleClasses,
+  commentThreadTimeClasses,
+  commentThreadContentClasses,
+  commentThreadReplyEditorClasses,
+  commentThreadReplyTextareaClasses,
+  commentThreadCancelButtonClasses,
+  commentThreadSubmitButtonClasses,
+  commentThreadRepliesClasses,
+  commentThreadEmptyClasses,
+  commentThreadEmptyIconClasses
 } from "@expcat/tigercat-core";
-
-// ../core/src/internal/comment-thread-styles.ts
-var buttonBaseClasses = "tiger-motion-aware px-2 py-0.5 h-auto min-h-0 text-xs rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadActionButtonClasses = `${buttonBaseClasses} text-[var(--tiger-text-muted,#6b7280)] font-medium flex items-center gap-1.5`;
-var commentThreadPrimaryButtonClasses = `${buttonBaseClasses} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-semibold hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]`;
-var commentThreadLikeButtonClasses = "hover:text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]";
-var commentThreadLikedButtonClasses = "text-[var(--tiger-primary,#2563eb)] bg-[var(--tiger-outline-bg-hover,#eff6ff)] font-semibold border-[var(--tiger-primary,#2563eb)]/40";
-var commentThreadReplyButtonClasses = "hover:text-[var(--tiger-success,#16a34a)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]";
-var commentThreadNeutralButtonClasses = "hover:text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f3f4f6)]";
-var commentThreadLikeIconClasses = "tiger-motion-aware w-3.5 h-3.5 transition-transform active:scale-125";
-var commentThreadDividerClasses = "border-b border-[var(--tiger-border,#e5e7eb)]";
-var commentThreadAvatarClasses = "tiger-motion-aware shrink-0 mt-0.5 ring-1 ring-[var(--tiger-border,#e5e7eb)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
-var commentThreadAuthorClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer";
-var commentThreadUserTitleClasses = "bg-[var(--tiger-surface-muted,#f3f4f6)] px-1.5 py-0.5 rounded text-[var(--tiger-text-muted,#6b7280)] font-medium";
-var commentThreadTimeClasses = "ml-auto text-[var(--tiger-text-muted,#6b7280)] font-normal";
-var commentThreadContentClasses = "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-2 mb-3 pr-2";
-var commentThreadReplyEditorClasses = "tiger-motion-aware mt-3 space-y-3 bg-[var(--tiger-surface-muted,#f9fafb)] border border-[var(--tiger-border,#e5e7eb)] p-4 rounded-[var(--tiger-radius-lg,0.75rem)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadReplyTextareaClasses = "tiger-motion-aware bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#d1d5db)] focus:ring-2 focus:ring-[var(--tiger-primary,#2563eb)]/20 focus:border-[var(--tiger-primary,#2563eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-inner [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadCancelButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)] rounded-[var(--tiger-radius-md,0.5rem)] transition-colors";
-var commentThreadSubmitButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs font-semibold shadow-sm hover:shadow rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
-var commentThreadRepliesClasses = "tiger-motion-aware mt-4 ml-1 pl-4 border-l-2 border-[var(--tiger-border,#e5e7eb)] hover:border-[var(--tiger-primary,#2563eb)]/40 space-y-4 transition-colors";
-var commentThreadEmptyClasses = "tiger-motion-aware flex flex-col items-center justify-center border border-dashed border-[var(--tiger-border,#d1d5db)] rounded-[var(--tiger-radius-lg,0.75rem)] py-12 px-4 bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors";
-var commentThreadEmptyIconClasses = "w-10 h-10 text-[var(--tiger-text-muted,#9ca3af)] mb-3";
-
-// src/components/CommentThread.ts
 var CommentThread = defineComponent({
   name: "TigerCommentThread",
   inheritAttrs: false,
@@ -155,6 +155,10 @@ var CommentThread = defineComponent({
       default: true
     },
     showMore: {
+      type: Boolean,
+      default: false
+    },
+    showComposer: {
       type: Boolean,
       default: true
     },
@@ -167,22 +171,41 @@ var CommentThread = defineComponent({
       default: void 0
     }
   },
-  emits: ["like", "reply", "more", "action", "update:expandedKeys", "load-more"],
+  emits: ["like", "reply", "more", "action", "update:expandedKeys", "load-more", "user-click"],
   setup(props, { emit, attrs }) {
+    const instance = getCurrentInstance();
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getCommentThreadLabels(mergedLocale.value, props.labels));
+    const vnodeProps = () => instance?.vnode.props ?? {};
     const innerExpandedKeys = ref([...props.defaultExpandedKeys]);
-    const expandedAllKeys = ref(/* @__PURE__ */ new Set());
+    const revealedCounts = ref(/* @__PURE__ */ new Map());
     const likeOverlay = ref(/* @__PURE__ */ new Map());
     const replyingTo = ref(null);
     const replyValue = ref("");
+    const composerValue = ref("");
+    const replyInFlight = ref(false);
+    const clippedIds = ref(/* @__PURE__ */ new Set());
     const mergedExpandedKeys = computed(() => props.expandedKeys ?? innerExpandedKeys.value);
     const expandedSet = computed(() => new Set(mergedExpandedKeys.value));
     const resolvedNodes = computed(() => {
-      const tree = props.nodes && props.nodes.length > 0 ? props.nodes : buildCommentTree(props.items ?? []);
-      return clipCommentTreeDepth(tree, props.maxDepth);
+      const clipped = /* @__PURE__ */ new Set();
+      const tree = resolveCommentNodes(props.nodes, props.items);
+      const next = clipCommentTreeDepth(tree, props.maxDepth, clipped);
+      clippedIds.value = clipped;
+      return next;
     });
+    watch(
+      () => [props.nodes, props.items],
+      () => {
+        likeOverlay.value = /* @__PURE__ */ new Map();
+        revealedCounts.value = /* @__PURE__ */ new Map();
+      }
+    );
+    const hasLoadMoreHandler = computed(() => typeof vnodeProps().onLoadMore === "function");
+    const hasReplyHandler = computed(() => typeof vnodeProps().onReply === "function");
+    const hasMoreHandler = computed(() => typeof vnodeProps().onMore === "function");
+    const hasUserClickHandler = computed(() => typeof vnodeProps().onUserClick === "function");
     const wrapperClasses = computed(
       () => classNames(
         "tiger-comment-thread flex flex-col",
@@ -203,7 +226,19 @@ var CommentThread = defineComponent({
       updateExpandedKeys(next);
     };
     const handleLoadMore = (node) => {
-      expandedAllKeys.value = /* @__PURE__ */ new Set([...expandedAllKeys.value, node.id]);
+      const children = node.children ?? [];
+      const current = revealedCounts.value.get(node.id) ?? props.maxReplies;
+      const view = getCommentRepliesView(children, {
+        maxReplies: props.maxReplies,
+        revealedCount: current,
+        hasLoadMoreHandler: hasLoadMoreHandler.value
+      });
+      if (view.loadMoreKind === "remaining") {
+        const next = new Map(revealedCounts.value);
+        next.set(node.id, nextCommentRevealedCount(current, props.maxReplies, children.length));
+        revealedCounts.value = next;
+        return;
+      }
       emit("load-more", node);
     };
     const handleLike = (node) => {
@@ -212,25 +247,38 @@ var CommentThread = defineComponent({
       emit("like", node, next.liked);
     };
     const handleReplySubmit = (node) => {
-      const trimmed = replyValue.value.trim();
-      if (!trimmed) return;
-      emit("reply", node, replyValue.value);
-      replyValue.value = "";
-      replyingTo.value = null;
-      if (!expandedSet.value.has(node.id)) {
-        const next = [...mergedExpandedKeys.value, node.id];
-        updateExpandedKeys(next);
+      const source = node ? replyValue.value : composerValue.value;
+      if (!canSubmitCommentReply(source, replyInFlight.value) || !hasReplyHandler.value) return;
+      replyInFlight.value = true;
+      emit("reply", node, source.trim());
+      if (node) {
+        replyValue.value = "";
+        replyingTo.value = null;
+        if (!expandedSet.value.has(node.id)) {
+          updateExpandedKeys([...mergedExpandedKeys.value, node.id]);
+        }
+      } else {
+        composerValue.value = "";
       }
+      queueMicrotask(() => {
+        replyInFlight.value = false;
+      });
     };
-    const renderNode = (node, depth, isLast) => {
+    const renderNode = (node, depth, isLast, pos) => {
       const children = node.children ?? [];
-      const hasChildren = children.length > 0;
+      const hasChildren = children.length > 0 || clippedIds.value.has(node.id);
       const isExpanded = expandedSet.value.has(node.id);
-      const showReplies = hasChildren && isExpanded;
-      const showAllReplies = expandedAllKeys.value.has(node.id);
+      const repliesView = getCommentRepliesView(children, {
+        maxReplies: props.maxReplies,
+        revealedCount: revealedCounts.value.get(node.id) ?? props.maxReplies,
+        hasLoadMoreHandler: hasLoadMoreHandler.value
+      });
+      const showReplies = hasChildren && isExpanded && children.length > 0;
       const repliesId = `tiger-comment-replies-${node.id}`;
-      const visibleChildren = showReplies ? props.maxReplies > 0 && !showAllReplies ? children.slice(0, props.maxReplies) : children : [];
-      const showLoadMore = showReplies && props.maxReplies > 0 && children.length > props.maxReplies && !showAllReplies;
+      const visibleChildren = showReplies ? repliesView.visible : [];
+      const showLoadMore = showReplies && repliesView.loadMoreKind != null;
+      pos.current += 1;
+      const posinset = pos.current;
       const actions = [];
       if (props.showLike) {
         const { liked, likes } = resolveCommentLikeState(node, likeOverlay.value);
@@ -243,6 +291,7 @@ var CommentThread = defineComponent({
               key: "like",
               size: "sm",
               variant: "ghost",
+              "aria-pressed": liked,
               className: classNames(
                 commentThreadActionButtonClasses,
                 commentThreadLikeButtonClasses,
@@ -318,7 +367,7 @@ var CommentThread = defineComponent({
           )
         );
       }
-      if (props.showMore) {
+      if (props.showMore && (hasMoreHandler.value || node.actions && node.actions.length > 0)) {
         actions.push(
           h(
             Button,
@@ -373,8 +422,8 @@ var CommentThread = defineComponent({
                 ),
                 disabled: action.disabled,
                 onClick: () => {
-                  action.onClick?.(node, action);
-                  emit("action", node, action);
+                  if (action.onClick) action.onClick(node, action);
+                  else emit("action", node, action);
                 }
               },
               { default: () => action.label }
@@ -383,14 +432,16 @@ var CommentThread = defineComponent({
         });
       }
       return h(
-        "div",
+        "article",
         {
           class: classNames(
             "tiger-comment-thread-item",
             depth === 1 && "py-5",
             depth === 1 && !isLast && props.showDivider && commentThreadDividerClasses
           ),
-          key: node.id
+          key: node.id,
+          "aria-posinset": posinset,
+          "aria-setsize": pos.total
         },
         [
           h("div", { class: "flex gap-3" }, [
@@ -398,17 +449,29 @@ var CommentThread = defineComponent({
               size: depth === 1 ? "md" : "sm",
               src: node.user.avatar,
               text: node.user.name,
-              className: commentThreadAvatarClasses
+              className: commentThreadAvatarClasses,
+              "aria-hidden": Boolean(node.user.name)
             }) : null,
             h("div", { class: "flex-1 min-w-0" }, [
               h("div", { class: "flex items-center gap-2 flex-wrap" }, [
-                node.user?.name ? h(
+                node.user?.name ? hasUserClickHandler.value ? h(
+                  "button",
+                  {
+                    type: "button",
+                    class: classNames(
+                      getTextClasses({ size: "sm", weight: "bold" }),
+                      commentThreadAuthorClasses
+                    ),
+                    onClick: () => emit("user-click", node)
+                  },
+                  node.user.name
+                ) : h(
                   Text,
                   {
                     tag: "span",
                     size: "sm",
                     weight: "bold",
-                    class: commentThreadAuthorClasses
+                    class: commentThreadAuthorClasses.replace("cursor-pointer", "")
                   },
                   { default: () => node.user?.name }
                 ) : null,
@@ -443,7 +506,7 @@ var CommentThread = defineComponent({
                     { default: () => tag.label }
                   )
                 ),
-                node.time ? h(
+                formatCommentTime(node.time, mergedLocale.value) ? h(
                   Text,
                   {
                     tag: "span",
@@ -451,7 +514,7 @@ var CommentThread = defineComponent({
                     color: "muted",
                     class: commentThreadTimeClasses
                   },
-                  { default: () => formatCommentTime(node.time) }
+                  { default: () => formatCommentTime(node.time, mergedLocale.value) }
                 ) : null
               ]),
               h(
@@ -502,10 +565,11 @@ var CommentThread = defineComponent({
                         size: "sm",
                         variant: "primary",
                         className: commentThreadSubmitButtonClasses,
+                        disabled: !canSubmitCommentReply(replyValue.value, false) || !hasReplyHandler.value,
                         onClick: () => handleReplySubmit(node)
                       },
                       {
-                        default: () => resolveLocaleText(labels.value.replyButtonText, props.replyButtonText)
+                        default: () => resolveLocaleText(labels.value.replySubmitText, props.replyButtonText)
                       }
                     )
                   ])
@@ -521,17 +585,25 @@ var CommentThread = defineComponent({
                     commentThreadPrimaryButtonClasses
                   ),
                   "aria-expanded": isExpanded,
-                  "aria-controls": repliesId,
-                  onClick: () => toggleExpanded(node.id)
+                  "aria-controls": children.length > 0 ? repliesId : void 0,
+                  disabled: clippedIds.value.has(node.id) && children.length === 0,
+                  onClick: () => {
+                    if (clippedIds.value.has(node.id) && children.length === 0) return;
+                    toggleExpanded(node.id);
+                  }
                 },
                 {
-                  default: () => isExpanded ? resolveLocaleText(
+                  default: () => clippedIds.value.has(node.id) && children.length === 0 ? labels.value.maxDepthReachedText : isExpanded ? resolveLocaleText(
                     labels.value.collapseRepliesText,
                     props.collapseRepliesText
-                  ) : resolveLocaleText(
-                    labels.value.expandRepliesText,
-                    props.expandRepliesText
-                  ).replace("{count}", String(children.length))
+                  ) : formatBadgeCountLabel(
+                    resolveLocaleText(
+                      labels.value.expandRepliesText,
+                      props.expandRepliesText
+                    ),
+                    children.length,
+                    mergedLocale.value?.locale
+                  )
                 }
               ) : null,
               showReplies ? h(
@@ -542,7 +614,7 @@ var CommentThread = defineComponent({
                 },
                 [
                   ...visibleChildren.map(
-                    (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
+                    (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1, pos)
                   ),
                   showLoadMore ? h(
                     Button,
@@ -553,7 +625,11 @@ var CommentThread = defineComponent({
                       onClick: () => handleLoadMore(node)
                     },
                     {
-                      default: () => resolveLocaleText(labels.value.loadMoreText, props.loadMoreText)
+                      default: () => repliesView.loadMoreKind === "remaining" ? formatBadgeCountLabel(
+                        labels.value.remainingRepliesText,
+                        repliesView.remaining,
+                        mergedLocale.value?.locale
+                      ) : resolveLocaleText(labels.value.loadMoreText, props.loadMoreText)
                     }
                   ) : null
                 ]
@@ -563,8 +639,48 @@ var CommentThread = defineComponent({
         ]
       );
     };
+    const countVisible = (list) => list.reduce((sum, node) => {
+      if (!expandedSet.value.has(node.id)) return sum + 1;
+      const view = getCommentRepliesView(node.children, {
+        maxReplies: props.maxReplies,
+        revealedCount: revealedCounts.value.get(node.id) ?? props.maxReplies,
+        hasLoadMoreHandler: hasLoadMoreHandler.value
+      });
+      return sum + 1 + countVisible(view.visible);
+    }, 0);
     return () => {
-      const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : "Comment thread");
+      const ariaLabel = attrs["aria-label"] ?? (attrs["aria-labelledby"] ? void 0 : labels.value.listAriaLabel);
+      const pos = { current: 0, total: countVisible(resolvedNodes.value) };
+      const composer = props.showComposer ? h("div", { class: commentThreadReplyEditorClasses }, [
+        h(Textarea, {
+          rows: 3,
+          modelValue: composerValue.value,
+          placeholder: resolveLocaleText(labels.value.replyPlaceholder, props.replyPlaceholder),
+          className: commentThreadReplyTextareaClasses,
+          "aria-label": resolveLocaleText(
+            labels.value.replyPlaceholder,
+            props.replyPlaceholder
+          ),
+          "onUpdate:modelValue": (value) => {
+            composerValue.value = value;
+          }
+        }),
+        h("div", { class: "flex items-center gap-2 justify-end" }, [
+          h(
+            Button,
+            {
+              size: "sm",
+              variant: "primary",
+              className: commentThreadSubmitButtonClasses,
+              disabled: !canSubmitCommentReply(composerValue.value, false) || !hasReplyHandler.value,
+              onClick: () => handleReplySubmit()
+            },
+            {
+              default: () => resolveLocaleText(labels.value.replySubmitText, props.replyButtonText)
+            }
+          )
+        ])
+      ]) : null;
       const children = resolvedNodes.value.length === 0 ? [
         h(
           "div",
@@ -575,6 +691,7 @@ var CommentThread = defineComponent({
             h(
               "svg",
               {
+                "aria-hidden": "true",
                 class: commentThreadEmptyIconClasses,
                 fill: "none",
                 viewBox: "0 0 24 24",
@@ -599,7 +716,7 @@ var CommentThread = defineComponent({
           ]
         )
       ] : resolvedNodes.value.map(
-        (node, index) => renderNode(node, 1, index === resolvedNodes.value.length - 1)
+        (node, index) => renderNode(node, 1, index === resolvedNodes.value.length - 1, pos)
       );
       return h(
         "div",
@@ -611,7 +728,7 @@ var CommentThread = defineComponent({
           "data-tiger-comment-thread": true,
           "aria-label": ariaLabel
         },
-        children
+        [composer, ...children]
       );
     };
   }