@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvCommentsListItem.js

@@ -1,222 +1,98 @@
-import { mdiChevronDown as P } from "@mdi/js";
-import { toRefs as B, ref as y, computed as i, inject as j, onMounted as S, resolveComponent as v, openBlock as r, createElementBlock as m, createElementVNode as f, createVNode as k, toDisplayString as p, createCommentVNode as c, createBlock as U, normalizeClass as H, createTextVNode as Y, Fragment as z, renderList as F, nextTick as q } from "vue";
-import G from "./KvMaterialIcon.js";
-import J from "./KvCommentsReplyButton.js";
-import Q from "./KvCommentsHeartButton.js";
-import W from "./KvCommentsAdd.js";
-import X from "./KvUserAvatar.js";
-import Z from "../_virtual/_plugin-vue_export-helper.js";
-const $ = "reply-comment", ee = "like-comment", N = "add-reaction", te = {
-  name: "KvCommentsListItem",
-  components: {
-    KvCommentsReplyButton: J,
-    KvCommentsHeartButton: Q,
-    KvCommentsAdd: W,
-    KvUserAvatar: X,
-    KvMaterialIcon: G
-  },
-  props: {
-    /**
-     * The full URL for the user image
-     */
-    userImageUrl: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The name to display for the user
-     */
-    userDisplayName: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The ID for the user
-     */
-    userPublicId: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Activity comment
-     */
-    comment: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * The nest level of the comment
-     */
-    nestLevel: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: [
-    N
-  ],
-  setup(h, { emit: s }) {
-    const {
-      comment: e,
-      userPublicId: n
-    } = B(h), u = y(!1), g = y(null), a = y(), _ = y(!1), b = i(() => {
-      var t;
-      return ((t = e == null ? void 0 : e.value) == null ? void 0 : t.text) ?? "";
-    }), w = i(() => {
-      var t;
-      return ((t = e == null ? void 0 : e.value) == null ? void 0 : t.publicLenderId) ?? "";
-    }), C = i(() => {
-      var t, l;
-      return ((l = (t = a == null ? void 0 : a.value) == null ? void 0 : t.image) == null ? void 0 : l.url) ?? "";
-    }), I = i(() => {
-      var t;
-      return ((t = a == null ? void 0 : a.value) == null ? void 0 : t.name) ?? "";
-    }), o = i(() => {
-      var t, l;
-      return ((l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.comment) ?? null;
-    }), E = i(() => {
-      var t, l;
-      return ((l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.like) ?? [];
-    }), R = i(() => E.value.find((t) => t.publicLenderId === n.value)), O = i(() => R.value !== void 0), T = () => {
-      u.value = !u.value, q(() => {
-        u.value && g.value.$refs.input.focus();
-      });
-    }, x = (t, l) => {
-      var L;
-      const d = {
-        reaction: t,
-        id: ((L = e == null ? void 0 : e.value) == null ? void 0 : L.id) ?? null,
-        isChild: !0,
-        value: l
-      };
-      s(N, d);
-    }, D = () => {
-      u.value = !1;
-    }, A = i(() => {
-      var t, l, d;
-      return ((d = (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.like) == null ? void 0 : d.length) ?? 0;
-    }), M = i(() => {
-      var t, l, d;
-      return ((d = (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t.children) == null ? void 0 : l.comment) == null ? void 0 : d.length) ?? 0;
-    }), V = () => {
-      _.value = !_.value;
-    }, K = j("fetchLenderInfo");
-    return S(async () => {
-      if (w.value) {
-        const t = await K(w.value);
-        a.value = t;
-      }
-    }), {
-      hideInput: D,
-      showInput: u,
-      commentsAddRef: g,
-      replyClick: T,
-      addReaction: x,
-      REPLY_COMMENT_EVENT: $,
-      LIKE_COMMENT_EVENT: ee,
-      ADD_REACTION_EVENT: N,
-      commentText: b,
-      authorImage: C,
-      authorName: I,
-      childComments: o,
-      isLiked: O,
-      numberOfLikes: A,
-      numberOfReplies: M,
-      repliesOpened: _,
-      toggleReplies: V,
-      mdiChevronDown: P
-    };
-  }
-}, ne = { class: "tw-flex tw-items-center tw-gap-1" }, le = {
+import E from "./KvCommentsListItem2.js";
+import { ADD_REACTION_EVENT as z, LIKE_COMMENT_EVENT as F, REPLY_COMMENT_EVENT as S } from "./KvCommentsListItem2.js";
+import { resolveComponent as m, openBlock as t, createElementBlock as l, createElementVNode as r, createVNode as a, toDisplayString as d, createCommentVNode as s, createBlock as N, normalizeClass as b, createTextVNode as g, Fragment as C, renderList as h } from "vue";
+import I from "../_virtual/_plugin-vue_export-helper.js";
+const O = { class: "tw-flex tw-items-center tw-gap-1" }, R = {
   key: 0,
   class: "data-hj-suppress tw-font-medium"
-}, se = { class: "tw-flex tw-items-center tw-gap-x-1" }, oe = { class: "tw-flex tw-items-center tw-gap-0.5" }, ie = {
+}, T = { class: "tw-flex tw-items-center tw-gap-x-1" }, p = { class: "tw-flex tw-items-center tw-gap-0.5" }, x = {
   key: 0,
   "data-testid": "like-count",
   class: "tw-font-medium"
-}, re = {
+}, L = {
   key: 0,
   class: "tw-w-full"
-}, ae = {
+}, V = {
   key: 1,
   class: "tw-my-1"
-}, me = { key: 1 };
-function de(h, s, e, n, u, g) {
-  const a = v("kv-user-avatar"), _ = v("kv-comments-heart-button"), b = v("kv-comments-reply-button"), w = v("kv-comments-add"), C = v("kv-material-icon"), I = v("kv-comments-list-item", !0);
-  return r(), m("div", null, [
-    f("div", null, [
-      f("div", ne, [
-        k(a, {
-          "lender-name": n.authorName,
-          "lender-image-url": n.authorImage,
+}, M = { key: 1 };
+function D(c, o, n, e, A, P) {
+  const u = m("kv-user-avatar"), _ = m("kv-comments-heart-button"), w = m("kv-comments-reply-button"), k = m("kv-comments-add"), v = m("kv-material-icon"), f = m("kv-comments-list-item", !0);
+  return t(), l("div", null, [
+    r("div", null, [
+      r("div", O, [
+        a(u, {
+          "lender-name": e.authorName,
+          "lender-image-url": e.authorImage,
           class: "tw-w-3 tw-h-3",
           "is-small": ""
         }, null, 8, ["lender-name", "lender-image-url"]),
-        n.authorName ? (r(), m("p", le, p(n.authorName), 1)) : c("", !0)
+        e.authorName ? (t(), l("p", R, d(e.authorName), 1)) : s("", !0)
       ]),
-      f("p", null, p(n.commentText), 1)
+      r("p", null, d(e.commentText), 1)
     ]),
-    f("div", se, [
-      f("div", oe, [
-        k(_, {
+    r("div", T, [
+      r("div", p, [
+        a(_, {
           "is-small": !0,
-          "is-liked": n.isLiked,
-          disabled: !e.userPublicId,
-          onClick: s[0] || (s[0] = (o) => n.addReaction(n.LIKE_COMMENT_EVENT, o))
+          "is-liked": e.isLiked,
+          disabled: !n.userPublicId,
+          onClick: o[0] || (o[0] = (i) => e.addReaction(e.LIKE_COMMENT_EVENT, i))
         }, null, 8, ["is-liked", "disabled"]),
-        n.numberOfLikes ? (r(), m("p", ie, p(n.numberOfLikes), 1)) : c("", !0)
+        e.numberOfLikes ? (t(), l("p", x, d(e.numberOfLikes), 1)) : s("", !0)
       ]),
-      e.userPublicId && e.nestLevel === 0 ? (r(), U(b, {
+      n.userPublicId && n.nestLevel === 0 ? (t(), N(w, {
         key: 0,
-        onClick: n.replyClick
-      }, null, 8, ["onClick"])) : c("", !0)
+        onClick: e.replyClick
+      }, null, 8, ["onClick"])) : s("", !0)
     ]),
-    n.showInput ? (r(), m("div", re, [
-      k(w, {
+    e.showInput ? (t(), l("div", L, [
+      a(k, {
         ref: "commentsAddRef",
-        "user-image-url": e.userImageUrl,
-        "user-display-name": e.userDisplayName,
+        "user-image-url": n.userImageUrl,
+        "user-display-name": n.userDisplayName,
         "is-reply": !0,
         class: "tw-ml-3",
-        onAddComment: s[1] || (s[1] = (o) => n.addReaction(n.REPLY_COMMENT_EVENT, o)),
-        onHideInput: n.hideInput
+        onAddComment: o[1] || (o[1] = (i) => e.addReaction(e.REPLY_COMMENT_EVENT, i)),
+        onHideInput: e.hideInput
       }, null, 8, ["user-image-url", "user-display-name", "onHideInput"])
-    ])) : c("", !0),
-    n.childComments ? (r(), m("div", ae, [
-      n.numberOfReplies ? (r(), m("button", {
+    ])) : s("", !0),
+    e.childComments ? (t(), l("div", V, [
+      e.numberOfReplies ? (t(), l("button", {
         key: 0,
         class: "tw-ml-3 tw-text-action tw-font-medium tw-mb-1 tw-flex tw-items-center",
-        onClick: s[2] || (s[2] = (...o) => n.toggleReplies && n.toggleReplies(...o))
+        onClick: o[2] || (o[2] = (...i) => e.toggleReplies && e.toggleReplies(...i))
       }, [
-        k(C, {
-          class: H(["tw-h-2.5 tw-w-2.5 tw-transition tw-transform tw-duration-500 tw-ease", { "tw-rotate-180": n.repliesOpened }]),
-          icon: n.mdiChevronDown
+        a(v, {
+          class: b(["tw-h-2.5 tw-w-2.5 tw-transition tw-transform tw-duration-500 tw-ease", { "tw-rotate-180": e.repliesOpened }]),
+          icon: e.mdiChevronDown
         }, null, 8, ["class", "icon"]),
-        Y(" " + p(n.numberOfReplies) + " " + p(n.numberOfReplies > 1 ? "replies" : "reply"), 1)
-      ])) : c("", !0),
-      n.repliesOpened ? (r(), m("div", me, [
-        (r(!0), m(z, null, F(n.childComments, (o) => (r(), m("div", {
-          key: o.id,
+        g(" " + d(e.numberOfReplies) + " " + d(e.numberOfReplies > 1 ? "replies" : "reply"), 1)
+      ])) : s("", !0),
+      e.repliesOpened ? (t(), l("div", M, [
+        (t(!0), l(C, null, h(e.childComments, (i) => (t(), l("div", {
+          key: i.id,
           class: "tw-ml-3"
         }, [
-          k(I, {
-            "user-image-url": e.userImageUrl,
-            "user-display-name": e.userDisplayName,
-            "user-public-id": e.userPublicId,
-            comment: o,
-            "nest-level": e.nestLevel + 1,
-            onAddReaction: s[3] || (s[3] = (E) => {
-              h.$emit(n.ADD_REACTION_EVENT, E);
+          a(f, {
+            "user-image-url": n.userImageUrl,
+            "user-display-name": n.userDisplayName,
+            "user-public-id": n.userPublicId,
+            comment: i,
+            "nest-level": n.nestLevel + 1,
+            onAddReaction: o[3] || (o[3] = (y) => {
+              c.$emit("add-reaction", y);
             })
           }, null, 8, ["user-image-url", "user-display-name", "user-public-id", "comment", "nest-level"])
         ]))), 128))
-      ])) : c("", !0)
-    ])) : c("", !0)
+      ])) : s("", !0)
+    ])) : s("", !0)
   ]);
 }
-const ye = /* @__PURE__ */ Z(te, [["render", de]]);
+const U = /* @__PURE__ */ I(E, [["render", D]]);
 export {
-  ee as LIKE_COMMENT_EVENT,
-  $ as REPLY_COMMENT_EVENT,
-  ye as default
+  z as ADD_REACTION_EVENT,
+  F as LIKE_COMMENT_EVENT,
+  S as REPLY_COMMENT_EVENT,
+  U as default
 };