@ozdao/martyrs 0.2.481 → 0.2.483

package/dist/martyrs/src/modules/community/components/sections/Comment.vue.cjs

@@ -2,16 +2,20 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const CardHeader = require("../../../globals/views/components/blocks/CardHeader.vue.cjs");
-const _hoisted_1 = { class: "pd-t-zero" };
-const _hoisted_2 = { class: "p-medium" };
-const _hoisted_3 = { class: "mn-t-thin flex-v-center flex-nowrap flex gap-small" };
-const _hoisted_4 = {
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "comment-wrapper" };
+const _hoisted_2 = { class: "comment-content" };
+const _hoisted_3 = { class: "pd-t-zero" };
+const _hoisted_4 = { class: "p-medium" };
+const _hoisted_5 = { class: "mn-t-thin flex-v-center flex-nowrap flex gap-small" };
+const _hoisted_6 = {
   key: 0,
   class: "mn-t-small bg-white pd-thin radius-regular"
 };
-const _hoisted_5 = {
-  key: 1,
-  class: "br-solid br-l br-grey-transp-25"
+const _hoisted_7 = { class: "mn-l-auto gap-thin flex-nowrap flex" };
+const _hoisted_8 = {
+  key: 0,
+  class: "mn-t-regular comment-children"
 };
 const _sfc_main = {
   __name: "Comment",
@@ -36,6 +40,14 @@ const _sfc_main = {
     const showReplyForm = vue.ref(false);
     const replyContent = vue.ref("");
     const isExpanded = vue.ref(shouldBeExpanded(props.comment.depth));
+    vue.ref(null);
+    function highlightLevel(event, state) {
+      var _a, _b;
+      const wrapper = (_b = (_a = event.currentTarget) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+      if (!wrapper) return;
+      const lines = wrapper.querySelectorAll(":scope > .child-wrapper > .tree-line");
+      lines.forEach((line) => line.classList.toggle("hovered", state));
+    }
     function shouldBeExpanded(depth) {
       return depth % 3 < 2;
     }
@@ -63,65 +75,83 @@ const _sfc_main = {
       emit("load-more", commentId, depth);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", null, [
-        vue.createVNode(CardHeader.default, {
-          class: "mn-b-thin w-100",
-          entity: __props.comment,
-          entityType: "comment",
-          user: __props.owner,
-          owner: { target: __props.comment.owner, type: "user" },
-          creator: { target: __props.comment.owner, type: "user" },
-          date: __props.comment.createdAt
-        }, null, 8, ["entity", "user", "owner", "creator", "date"]),
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.createElementVNode("p", _hoisted_2, vue.toDisplayString(__props.comment.content), 1)
-        ]),
-        vue.createElementVNode("div", _hoisted_3, [
-          totalReplies.value > 0 ? (vue.openBlock(), vue.createElementBlock("button", {
-            key: 0,
-            onClick: toggleChildren,
-            class: "t-second cursor-pointer t-medium font-second"
-          }, vue.toDisplayString(isExpanded.value ? "Hide" : totalReplies.value + (totalReplies.value === 1 ? " reply" : " replies")), 1)) : vue.createCommentVNode("", true),
-          __props.owner ? (vue.openBlock(), vue.createElementBlock("button", {
-            key: 1,
-            class: "font-second cursor-pointer t-transp t-medium",
-            onClick: _cache[0] || (_cache[0] = ($event) => showReplyForm.value = true)
-          }, " Reply ")) : vue.createCommentVNode("", true)
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(CardHeader.default, {
+            class: "mn-b-thin mn-b-thin w-100",
+            entity: __props.comment,
+            entityType: "comment",
+            user: __props.owner,
+            owner: { target: __props.comment.owner, type: "user" },
+            creator: { target: __props.comment.owner, type: "user" },
+            date: __props.comment.createdAt
+          }, null, 8, ["entity", "user", "owner", "creator", "date"]),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("p", _hoisted_4, vue.toDisplayString(__props.comment.content), 1)
+          ]),
+          vue.createElementVNode("div", _hoisted_5, [
+            totalReplies.value > 0 ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              onClick: toggleChildren,
+              class: "t-second cursor-pointer t-medium font-second"
+            }, vue.toDisplayString(isExpanded.value ? "Hide" : totalReplies.value + (totalReplies.value === 1 ? " reply" : " replies")), 1)) : vue.createCommentVNode("", true),
+            __props.owner ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 1,
+              class: "font-second cursor-pointer t-transp t-medium",
+              onClick: _cache[0] || (_cache[0] = ($event) => showReplyForm.value = true)
+            }, " Reply ")) : vue.createCommentVNode("", true)
+          ]),
+          showReplyForm.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.withDirectives(vue.createElementVNode("textarea", {
+              class: "w-100",
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => replyContent.value = $event)
+            }, null, 512), [
+              [vue.vModelText, replyContent.value]
+            ]),
+            vue.createElementVNode("div", _hoisted_7, [
+              vue.createElementVNode("button", {
+                class: "bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button",
+                onClick: _cache[2] || (_cache[2] = ($event) => showReplyForm.value = false)
+              }, "Cancel"),
+              vue.createElementVNode("button", {
+                class: "bg-main pd-r-regular pd-l-regular pd-thin button",
+                onClick: submitReply
+              }, "Send")
+            ])
+          ])) : vue.createCommentVNode("", true)
         ]),
-        showReplyForm.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-          vue.withDirectives(vue.createElementVNode("textarea", {
-            class: "w-100",
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => replyContent.value = $event)
-          }, null, 512), [
-            [vue.vModelText, replyContent.value]
+        vue.createVNode(vue.Transition, { name: "collapse" }, {
+          default: vue.withCtx(() => [
+            isExpanded.value && __props.comment.children && __props.comment.children.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.comment.children, (childComment, index) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: childComment._id,
+                  class: "child-wrapper"
+                }, [
+                  vue.createElementVNode("div", {
+                    onClick: toggleChildren,
+                    onMouseenter: _cache[3] || (_cache[3] = ($event) => highlightLevel($event, true)),
+                    onMouseleave: _cache[4] || (_cache[4] = ($event) => highlightLevel($event, false)),
+                    class: vue.normalizeClass(["tree-line cursor-pointer", { "last-child": index === __props.comment.children.length - 1 }])
+                  }, null, 34),
+                  vue.createVNode(Comment, {
+                    comment: childComment,
+                    target: __props.target,
+                    owner: __props.owner,
+                    onReply: handleReply,
+                    onLoadMore: handleLoadMore,
+                    class: "child-comment mn-b-regular"
+                  }, null, 8, ["comment", "target", "owner"])
+                ]);
+              }), 128))
+            ])) : vue.createCommentVNode("", true)
           ]),
-          vue.createElementVNode("div", { class: "mn-l-auto gap-thin flex-nowrap flex" }, [
-            vue.createElementVNode("button", {
-              class: "bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button",
-              onClick: submitReply
-            }, "Cancel"),
-            vue.createElementVNode("button", {
-              class: "bg-main pd-r-regular pd-l-regular pd-thin button",
-              onClick: submitReply
-            }, "Send")
-          ])
-        ])) : vue.createCommentVNode("", true),
-        isExpanded.value && __props.comment.children && __props.comment.children.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.comment.children, (childComment) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main, {
-              key: childComment._id,
-              comment: childComment,
-              target: __props.target,
-              owner: __props.owner,
-              onReply: handleReply,
-              onLoadMore: handleLoadMore,
-              class: "mn-l-medium mn-t-small"
-            }, null, 8, ["comment", "target", "owner"]);
-          }), 128))
-        ])) : vue.createCommentVNode("", true)
+          _: 1
+        })
       ]);
     };
   }
 };
-exports.default = _sfc_main;
+const Comment = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-07523fcd"]]);
+exports.default = Comment;
 //# sourceMappingURL=Comment.vue.cjs.map

package/dist/martyrs/src/modules/community/components/sections/Comment.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.vue.cjs","sources":["../../../../../../../src/modules/community/components/sections/Comment.vue"],"sourcesContent":["<template>\n  <div>\n    <CardHeader \n      class=\"mn-b-thin w-100\"\n      :entity=\"comment\"\n      :entityType=\"'comment'\"\n      :user=\"owner\"\n      :owner=\"{target: comment.owner, type: 'user'}\" \n      :creator=\"{target: comment.owner, type: 'user'}\"\n      :date=\"comment.createdAt\"\n    />\n    <div class=\"pd-t-zero\">\n      <p class=\"p-medium\">{{ comment.content }}</p>\n    </div>\n\n    <div class=\"mn-t-thin flex-v-center flex-nowrap flex gap-small\">\n      \n      <button \n        v-if=\"totalReplies > 0\" \n        @click=\"toggleChildren\"\n        class=\"t-second cursor-pointer t-medium  font-second\"\n      >\n        {{ isExpanded ? 'Hide' : totalReplies + (totalReplies === 1 ? ' reply' : ' replies') }} \n      </button>\n\n      <button \n        v-if=\"owner\" \n        class=\"font-second cursor-pointer t-transp t-medium\" \n        @click=\"showReplyForm = true\"\n      > \n        Reply\n      </button>\n    \n    </div>\n\n     <div v-if=\"showReplyForm\" class=\"mn-t-small bg-white pd-thin radius-regular\">\n        <textarea class=\"w-100\" v-model=\"replyContent\"></textarea>\n        <div class=\"mn-l-auto gap-thin flex-nowrap flex\">\n          <button class=\"bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button\" @click=\"submitReply\">Cancel</button>\n          <button class=\"bg-main pd-r-regular pd-l-regular pd-thin button\" @click=\"submitReply\">Send</button>\n        </div>\n      </div>\n\n    <div v-if=\"isExpanded && comment.children && comment.children.length\" class=\"br-solid br-l br-grey-transp-25\">\n      <Comment\n        v-for=\"childComment in comment.children\"\n        :key=\"childComment._id\"\n        :comment=\"childComment\"\n        :target=\"target\"\n        :owner=\"owner\"\n        @reply=\"handleReply\"\n        @load-more=\"handleLoadMore\"\n        class=\"mn-l-medium mn-t-small \"\n      />\n    </div>\n   \n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nimport Comment from './Comment.vue';\n\nimport CardHeader  from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'\n\nconst props = defineProps({\n  comment: {\n    type: Object,\n    required: true\n  },\n  target: {\n    type: String,\n    required: true\n  },\n  owner: {\n    type: String,\n    required: true\n  }\n});\n\nconst emit = defineEmits(['reply', 'load-more']);\n\nconst showReplyForm = ref(false);\nconst replyContent = ref('');\nconst isExpanded = ref(shouldBeExpanded(props.comment.depth))\n\nfunction shouldBeExpanded(depth) {\n  return depth % 3 < 2\n}\n\nconst totalReplies = computed(() => {\n  function countReplies(comment) {\n    if (!comment.children || comment.children.length === 0) {\n      return 0\n    }\n    return comment.children.length + comment.children.reduce((sum, child) => sum + countReplies(child), 0)\n  }\n  return countReplies(props.comment)\n})\n\nconst toggleChildren = () => {\n  isExpanded.value = !isExpanded.value\n}\n\nconst submitReply = () => {\n  emit('reply', props.comment._id, replyContent.value);\n  replyContent.value = '';\n  showReplyForm.value = false;\n};\n\nconst handleReply = (parentId, content) => {\n  emit('reply', parentId, content);\n};\n\nconst loadMoreChildren = () => {\n  emit('load-more', props.comment._id, props.comment.depth + 1);\n};\n\nconst handleLoadMore = (commentId, depth) => {\n  emit('load-more', commentId, depth);\n};\n</script>"],"names":["ref","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,UAAM,QAAQ;AAed,UAAM,OAAO;AAEb,UAAM,gBAAgBA,IAAG,IAAC,KAAK;AAC/B,UAAM,eAAeA,IAAG,IAAC,EAAE;AAC3B,UAAM,aAAaA,IAAAA,IAAI,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAE5D,aAAS,iBAAiB,OAAO;AAC/B,aAAO,QAAQ,IAAI;AAAA,IACrB;AAEA,UAAM,eAAeC,IAAQ,SAAC,MAAM;AAClC,eAAS,aAAa,SAAS;AAC7B,YAAI,CAAC,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACtD,iBAAO;AAAA,QACb;AACI,eAAO,QAAQ,SAAS,SAAS,QAAQ,SAAS,OAAO,CAAC,KAAK,UAAU,MAAM,aAAa,KAAK,GAAG,CAAC;AAAA,MACzG;AACE,aAAO,aAAa,MAAM,OAAO;AAAA,IACnC,CAAC;AAED,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IACjC;AAEA,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,QAAQ,KAAK,aAAa,KAAK;AACnD,mBAAa,QAAQ;AACrB,oBAAc,QAAQ;AAAA,IACxB;AAEA,UAAM,cAAc,CAAC,UAAU,YAAY;AACzC,WAAK,SAAS,UAAU,OAAO;AAAA,IACjC;AAMA,UAAM,iBAAiB,CAAC,WAAW,UAAU;AAC3C,WAAK,aAAa,WAAW,KAAK;AAAA,IACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Comment.vue.cjs","sources":["../../../../../../../src/modules/community/components/sections/Comment.vue"],"sourcesContent":["<template>\n  <div class=\"comment-wrapper\">\n    <div class=\"comment-content \">\n      <CardHeader \n        class=\"mn-b-thin mn-b-thin w-100\"\n        :entity=\"comment\"\n        :entityType=\"'comment'\"\n        :user=\"owner\"\n        :owner=\"{target: comment.owner, type: 'user'}\" \n        :creator=\"{target: comment.owner, type: 'user'}\"\n        :date=\"comment.createdAt\"\n      />\n      <div class=\"pd-t-zero\">\n        <p class=\"p-medium\">{{ comment.content }}</p>\n      </div>\n      <div class=\"mn-t-thin flex-v-center flex-nowrap flex gap-small\">\n        <button \n          v-if=\"totalReplies > 0\" \n          @click=\"toggleChildren\"\n          class=\"t-second cursor-pointer t-medium font-second\"\n        >\n          {{ isExpanded ? 'Hide' : totalReplies + (totalReplies === 1 ? ' reply' : ' replies') }} \n        </button>\n        <button \n          v-if=\"owner\" \n          class=\"font-second cursor-pointer t-transp t-medium\" \n          @click=\"showReplyForm = true\"\n        > \n          Reply\n        </button>\n      </div>\n      <div v-if=\"showReplyForm\" class=\"mn-t-small bg-white pd-thin radius-regular\">\n        <textarea class=\"w-100\" v-model=\"replyContent\"></textarea>\n        <div class=\"mn-l-auto gap-thin flex-nowrap flex\">\n          <button class=\"bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button\" @click=\"showReplyForm = false\">Cancel</button>\n          <button class=\"bg-main pd-r-regular pd-l-regular pd-thin button\" @click=\"submitReply\">Send</button>\n        </div>\n      </div>\n    </div>\n\n    <transition name=\"collapse\">\n      <div v-if=\"isExpanded && comment.children && comment.children.length\" class=\"mn-t-regular comment-children\">\n        <div\n          v-for=\"(childComment, index) in comment.children\"\n          :key=\"childComment._id\"\n          class=\"child-wrapper\"\n        >\n          <!-- Кликабельная область с линией -->\n          <div \n            @click=\"toggleChildren\" \n             @mouseenter=\"highlightLevel($event, true)\"\n            @mouseleave=\"highlightLevel($event, false)\"\n            class=\"tree-line cursor-pointer\"\n            :class=\"{ 'last-child': index === comment.children.length - 1 }\"\n          ></div>\n          \n          <Comment\n            :comment=\"childComment\"\n            :target=\"target\"\n            :owner=\"owner\"\n            @reply=\"handleReply\"\n            @load-more=\"handleLoadMore\"\n            class=\"child-comment mn-b-regular\"\n          />\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport Comment from './Comment.vue';\nimport CardHeader from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'\n\nconst props = defineProps({\n  comment: {\n    type: Object,\n    required: true\n  },\n  target: {\n    type: String,\n    required: true\n  },\n  owner: {\n    type: String,\n    required: true\n  }\n});\n\nconst emit = defineEmits(['reply', 'load-more']);\n\nconst showReplyForm = ref(false);\nconst replyContent = ref('');\nconst isExpanded = ref(shouldBeExpanded(props.comment.depth))\n\n\nconst childrenContainer = ref(null)\n\nfunction highlightLevel(event, state) {\n  const wrapper = event.currentTarget?.parentElement?.parentElement;\n  if (!wrapper) return;\n\n  const lines = wrapper.querySelectorAll(':scope > .child-wrapper > .tree-line');\n  lines.forEach(line => line.classList.toggle('hovered', state));\n} \n\nfunction shouldBeExpanded(depth) {\n  return depth % 3 < 2\n}\n\nconst totalReplies = computed(() => {\n  function countReplies(comment) {\n    if (!comment.children || comment.children.length === 0) {\n      return 0\n    }\n    return comment.children.length + comment.children.reduce((sum, child) => sum + countReplies(child), 0)\n  }\n  return countReplies(props.comment)\n})\n\nconst toggleChildren = () => {\n  isExpanded.value = !isExpanded.value\n}\n\nconst submitReply = () => {\n  emit('reply', props.comment._id, replyContent.value);\n  replyContent.value = '';\n  showReplyForm.value = false;\n};\n\nconst handleReply = (parentId, content) => {\n  emit('reply', parentId, content);\n};\n\nconst handleLoadMore = (commentId, depth) => {\n  emit('load-more', commentId, depth);\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.comment-children {\n  margin-top: 1rem;\n}\n\n.child-wrapper {\n  position: relative;\n}\n\n.child-comment {\n  padding-left: 1.5rem;\n}\n\n.tree-line {\n  position: absolute;\n  left: calc(-1rem + 2px);\n  top: -1rem;\n  width: 2rem;\n  height: calc(100% + 2rem);\n}\n\n.tree-line::before {\n  content: '';\n  position: absolute;\n  left: 1rem;\n  top: 0;\n  width: 2px;\n  height: 100%;\n   border-left: 1px solid rgba(var(--grey), 1);\n  transition: background 0.2s ease;\n}\n\n.tree-line::after {\n  content: '';\n  position: absolute;\n  left: 1rem;\n  top: 2rem;\n  width: 1rem;\n  height: 2px;\n  border-bottom: 1px solid rgba(var(--grey), 1);\n  transition: background 0.2s ease;\n\n}\n\n.child-wrapper {\n  &:last-child {\n    .tree-line::after {\n      display: none;\n    }\n  }\n}\n\n.tree-line.last-child::before {\n  height: 2rem;\n  border-bottom-left-radius: 0.5rem;\n  border-left: 1px solid rgba(var(--grey), 1);\n  border-bottom: 1px solid rgba(var(--grey), 1);\n  background: none;\n  width: 1rem;\n}\n\n\n.tree-line.hovered::before,\n.tree-line.hovered::after {\n  border-color: rgba(var(--second), 1);\n}\n\n.tree-line.last-child.hovered::before {\n  border-color: rgba(var(--second), 1);\n}\n\n/* Анимация */\n.collapse-enter-active,\n.collapse-leave-active {\n  transition: all 0.3s ease;\n}\n\n.collapse-enter-from {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n.collapse-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n</style>"],"names":["ref","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,UAAM,QAAQ;AAed,UAAM,OAAO;AAEb,UAAM,gBAAgBA,IAAG,IAAC,KAAK;AAC/B,UAAM,eAAeA,IAAG,IAAC,EAAE;AAC3B,UAAM,aAAaA,IAAAA,IAAI,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAGlCA,QAAAA,IAAI,IAAI;AAElC,aAAS,eAAe,OAAO,OAAO;;AACpC,YAAM,WAAU,iBAAM,kBAAN,mBAAqB,kBAArB,mBAAoC;AACpD,UAAI,CAAC,QAAS;AAEd,YAAM,QAAQ,QAAQ,iBAAiB,sCAAsC;AAC7E,YAAM,QAAQ,UAAQ,KAAK,UAAU,OAAO,WAAW,KAAK,CAAC;AAAA,IAC/D;AAEA,aAAS,iBAAiB,OAAO;AAC/B,aAAO,QAAQ,IAAI;AAAA,IACrB;AAEA,UAAM,eAAeC,IAAQ,SAAC,MAAM;AAClC,eAAS,aAAa,SAAS;AAC7B,YAAI,CAAC,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACtD,iBAAO;AAAA,QACb;AACI,eAAO,QAAQ,SAAS,SAAS,QAAQ,SAAS,OAAO,CAAC,KAAK,UAAU,MAAM,aAAa,KAAK,GAAG,CAAC;AAAA,MACzG;AACE,aAAO,aAAa,MAAM,OAAO;AAAA,IACnC,CAAC;AAED,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IACjC;AAEA,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,QAAQ,KAAK,aAAa,KAAK;AACnD,mBAAa,QAAQ;AACrB,oBAAc,QAAQ;AAAA,IACxB;AAEA,UAAM,cAAc,CAAC,UAAU,YAAY;AACzC,WAAK,SAAS,UAAU,OAAO;AAAA,IACjC;AAEA,UAAM,iBAAiB,CAAC,WAAW,UAAU;AAC3C,WAAK,aAAa,WAAW,KAAK;AAAA,IACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/community/components/sections/Comment.vue.js

@@ -1,15 +1,19 @@
-import { ref, computed, createElementBlock, openBlock, createVNode, createElementVNode, createCommentVNode, toDisplayString, withDirectives, vModelText, Fragment, renderList, createBlock } from "vue";
+import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, createCommentVNode, toDisplayString, withDirectives, vModelText, Transition, withCtx, Fragment, renderList, normalizeClass } from "vue";
 import _sfc_main$1 from "../../../globals/views/components/blocks/CardHeader.vue.js";
-const _hoisted_1 = { class: "pd-t-zero" };
-const _hoisted_2 = { class: "p-medium" };
-const _hoisted_3 = { class: "mn-t-thin flex-v-center flex-nowrap flex gap-small" };
-const _hoisted_4 = {
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "comment-wrapper" };
+const _hoisted_2 = { class: "comment-content" };
+const _hoisted_3 = { class: "pd-t-zero" };
+const _hoisted_4 = { class: "p-medium" };
+const _hoisted_5 = { class: "mn-t-thin flex-v-center flex-nowrap flex gap-small" };
+const _hoisted_6 = {
   key: 0,
   class: "mn-t-small bg-white pd-thin radius-regular"
 };
-const _hoisted_5 = {
-  key: 1,
-  class: "br-solid br-l br-grey-transp-25"
+const _hoisted_7 = { class: "mn-l-auto gap-thin flex-nowrap flex" };
+const _hoisted_8 = {
+  key: 0,
+  class: "mn-t-regular comment-children"
 };
 const _sfc_main = {
   __name: "Comment",
@@ -34,6 +38,14 @@ const _sfc_main = {
     const showReplyForm = ref(false);
     const replyContent = ref("");
     const isExpanded = ref(shouldBeExpanded(props.comment.depth));
+    ref(null);
+    function highlightLevel(event, state) {
+      var _a, _b;
+      const wrapper = (_b = (_a = event.currentTarget) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+      if (!wrapper) return;
+      const lines = wrapper.querySelectorAll(":scope > .child-wrapper > .tree-line");
+      lines.forEach((line) => line.classList.toggle("hovered", state));
+    }
     function shouldBeExpanded(depth) {
       return depth % 3 < 2;
     }
@@ -61,67 +73,85 @@ const _sfc_main = {
       emit("load-more", commentId, depth);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$1, {
-          class: "mn-b-thin w-100",
-          entity: __props.comment,
-          entityType: "comment",
-          user: __props.owner,
-          owner: { target: __props.comment.owner, type: "user" },
-          creator: { target: __props.comment.owner, type: "user" },
-          date: __props.comment.createdAt
-        }, null, 8, ["entity", "user", "owner", "creator", "date"]),
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("p", _hoisted_2, toDisplayString(__props.comment.content), 1)
-        ]),
-        createElementVNode("div", _hoisted_3, [
-          totalReplies.value > 0 ? (openBlock(), createElementBlock("button", {
-            key: 0,
-            onClick: toggleChildren,
-            class: "t-second cursor-pointer t-medium font-second"
-          }, toDisplayString(isExpanded.value ? "Hide" : totalReplies.value + (totalReplies.value === 1 ? " reply" : " replies")), 1)) : createCommentVNode("", true),
-          __props.owner ? (openBlock(), createElementBlock("button", {
-            key: 1,
-            class: "font-second cursor-pointer t-transp t-medium",
-            onClick: _cache[0] || (_cache[0] = ($event) => showReplyForm.value = true)
-          }, " Reply ")) : createCommentVNode("", true)
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$1, {
+            class: "mn-b-thin mn-b-thin w-100",
+            entity: __props.comment,
+            entityType: "comment",
+            user: __props.owner,
+            owner: { target: __props.comment.owner, type: "user" },
+            creator: { target: __props.comment.owner, type: "user" },
+            date: __props.comment.createdAt
+          }, null, 8, ["entity", "user", "owner", "creator", "date"]),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("p", _hoisted_4, toDisplayString(__props.comment.content), 1)
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            totalReplies.value > 0 ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              onClick: toggleChildren,
+              class: "t-second cursor-pointer t-medium font-second"
+            }, toDisplayString(isExpanded.value ? "Hide" : totalReplies.value + (totalReplies.value === 1 ? " reply" : " replies")), 1)) : createCommentVNode("", true),
+            __props.owner ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              class: "font-second cursor-pointer t-transp t-medium",
+              onClick: _cache[0] || (_cache[0] = ($event) => showReplyForm.value = true)
+            }, " Reply ")) : createCommentVNode("", true)
+          ]),
+          showReplyForm.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            withDirectives(createElementVNode("textarea", {
+              class: "w-100",
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => replyContent.value = $event)
+            }, null, 512), [
+              [vModelText, replyContent.value]
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              createElementVNode("button", {
+                class: "bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button",
+                onClick: _cache[2] || (_cache[2] = ($event) => showReplyForm.value = false)
+              }, "Cancel"),
+              createElementVNode("button", {
+                class: "bg-main pd-r-regular pd-l-regular pd-thin button",
+                onClick: submitReply
+              }, "Send")
+            ])
+          ])) : createCommentVNode("", true)
         ]),
-        showReplyForm.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          withDirectives(createElementVNode("textarea", {
-            class: "w-100",
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => replyContent.value = $event)
-          }, null, 512), [
-            [vModelText, replyContent.value]
+        createVNode(Transition, { name: "collapse" }, {
+          default: withCtx(() => [
+            isExpanded.value && __props.comment.children && __props.comment.children.length ? (openBlock(), createElementBlock("div", _hoisted_8, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.comment.children, (childComment, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: childComment._id,
+                  class: "child-wrapper"
+                }, [
+                  createElementVNode("div", {
+                    onClick: toggleChildren,
+                    onMouseenter: _cache[3] || (_cache[3] = ($event) => highlightLevel($event, true)),
+                    onMouseleave: _cache[4] || (_cache[4] = ($event) => highlightLevel($event, false)),
+                    class: normalizeClass(["tree-line cursor-pointer", { "last-child": index === __props.comment.children.length - 1 }])
+                  }, null, 34),
+                  createVNode(Comment, {
+                    comment: childComment,
+                    target: __props.target,
+                    owner: __props.owner,
+                    onReply: handleReply,
+                    onLoadMore: handleLoadMore,
+                    class: "child-comment mn-b-regular"
+                  }, null, 8, ["comment", "target", "owner"])
+                ]);
+              }), 128))
+            ])) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", { class: "mn-l-auto gap-thin flex-nowrap flex" }, [
-            createElementVNode("button", {
-              class: "bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button",
-              onClick: submitReply
-            }, "Cancel"),
-            createElementVNode("button", {
-              class: "bg-main pd-r-regular pd-l-regular pd-thin button",
-              onClick: submitReply
-            }, "Send")
-          ])
-        ])) : createCommentVNode("", true),
-        isExpanded.value && __props.comment.children && __props.comment.children.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.comment.children, (childComment) => {
-            return openBlock(), createBlock(_sfc_main, {
-              key: childComment._id,
-              comment: childComment,
-              target: __props.target,
-              owner: __props.owner,
-              onReply: handleReply,
-              onLoadMore: handleLoadMore,
-              class: "mn-l-medium mn-t-small"
-            }, null, 8, ["comment", "target", "owner"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
+          _: 1
+        })
       ]);
     };
   }
 };
+const Comment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-07523fcd"]]);
 export {
-  _sfc_main as default
+  Comment as default
 };
 //# sourceMappingURL=Comment.vue.js.map

package/dist/martyrs/src/modules/community/components/sections/Comment.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.vue.js","sources":["../../../../../../../src/modules/community/components/sections/Comment.vue"],"sourcesContent":["<template>\n  <div>\n    <CardHeader \n      class=\"mn-b-thin w-100\"\n      :entity=\"comment\"\n      :entityType=\"'comment'\"\n      :user=\"owner\"\n      :owner=\"{target: comment.owner, type: 'user'}\" \n      :creator=\"{target: comment.owner, type: 'user'}\"\n      :date=\"comment.createdAt\"\n    />\n    <div class=\"pd-t-zero\">\n      <p class=\"p-medium\">{{ comment.content }}</p>\n    </div>\n\n    <div class=\"mn-t-thin flex-v-center flex-nowrap flex gap-small\">\n      \n      <button \n        v-if=\"totalReplies > 0\" \n        @click=\"toggleChildren\"\n        class=\"t-second cursor-pointer t-medium  font-second\"\n      >\n        {{ isExpanded ? 'Hide' : totalReplies + (totalReplies === 1 ? ' reply' : ' replies') }} \n      </button>\n\n      <button \n        v-if=\"owner\" \n        class=\"font-second cursor-pointer t-transp t-medium\" \n        @click=\"showReplyForm = true\"\n      > \n        Reply\n      </button>\n    \n    </div>\n\n     <div v-if=\"showReplyForm\" class=\"mn-t-small bg-white pd-thin radius-regular\">\n        <textarea class=\"w-100\" v-model=\"replyContent\"></textarea>\n        <div class=\"mn-l-auto gap-thin flex-nowrap flex\">\n          <button class=\"bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button\" @click=\"submitReply\">Cancel</button>\n          <button class=\"bg-main pd-r-regular pd-l-regular pd-thin button\" @click=\"submitReply\">Send</button>\n        </div>\n      </div>\n\n    <div v-if=\"isExpanded && comment.children && comment.children.length\" class=\"br-solid br-l br-grey-transp-25\">\n      <Comment\n        v-for=\"childComment in comment.children\"\n        :key=\"childComment._id\"\n        :comment=\"childComment\"\n        :target=\"target\"\n        :owner=\"owner\"\n        @reply=\"handleReply\"\n        @load-more=\"handleLoadMore\"\n        class=\"mn-l-medium mn-t-small \"\n      />\n    </div>\n   \n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nimport Comment from './Comment.vue';\n\nimport CardHeader  from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'\n\nconst props = defineProps({\n  comment: {\n    type: Object,\n    required: true\n  },\n  target: {\n    type: String,\n    required: true\n  },\n  owner: {\n    type: String,\n    required: true\n  }\n});\n\nconst emit = defineEmits(['reply', 'load-more']);\n\nconst showReplyForm = ref(false);\nconst replyContent = ref('');\nconst isExpanded = ref(shouldBeExpanded(props.comment.depth))\n\nfunction shouldBeExpanded(depth) {\n  return depth % 3 < 2\n}\n\nconst totalReplies = computed(() => {\n  function countReplies(comment) {\n    if (!comment.children || comment.children.length === 0) {\n      return 0\n    }\n    return comment.children.length + comment.children.reduce((sum, child) => sum + countReplies(child), 0)\n  }\n  return countReplies(props.comment)\n})\n\nconst toggleChildren = () => {\n  isExpanded.value = !isExpanded.value\n}\n\nconst submitReply = () => {\n  emit('reply', props.comment._id, replyContent.value);\n  replyContent.value = '';\n  showReplyForm.value = false;\n};\n\nconst handleReply = (parentId, content) => {\n  emit('reply', parentId, content);\n};\n\nconst loadMoreChildren = () => {\n  emit('load-more', props.comment._id, props.comment.depth + 1);\n};\n\nconst handleLoadMore = (commentId, depth) => {\n  emit('load-more', commentId, depth);\n};\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,UAAM,QAAQ;AAed,UAAM,OAAO;AAEb,UAAM,gBAAgB,IAAI,KAAK;AAC/B,UAAM,eAAe,IAAI,EAAE;AAC3B,UAAM,aAAa,IAAI,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAE5D,aAAS,iBAAiB,OAAO;AAC/B,aAAO,QAAQ,IAAI;AAAA,IACrB;AAEA,UAAM,eAAe,SAAS,MAAM;AAClC,eAAS,aAAa,SAAS;AAC7B,YAAI,CAAC,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACtD,iBAAO;AAAA,QACb;AACI,eAAO,QAAQ,SAAS,SAAS,QAAQ,SAAS,OAAO,CAAC,KAAK,UAAU,MAAM,aAAa,KAAK,GAAG,CAAC;AAAA,MACzG;AACE,aAAO,aAAa,MAAM,OAAO;AAAA,IACnC,CAAC;AAED,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IACjC;AAEA,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,QAAQ,KAAK,aAAa,KAAK;AACnD,mBAAa,QAAQ;AACrB,oBAAc,QAAQ;AAAA,IACxB;AAEA,UAAM,cAAc,CAAC,UAAU,YAAY;AACzC,WAAK,SAAS,UAAU,OAAO;AAAA,IACjC;AAMA,UAAM,iBAAiB,CAAC,WAAW,UAAU;AAC3C,WAAK,aAAa,WAAW,KAAK;AAAA,IACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Comment.vue.js","sources":["../../../../../../../src/modules/community/components/sections/Comment.vue"],"sourcesContent":["<template>\n  <div class=\"comment-wrapper\">\n    <div class=\"comment-content \">\n      <CardHeader \n        class=\"mn-b-thin mn-b-thin w-100\"\n        :entity=\"comment\"\n        :entityType=\"'comment'\"\n        :user=\"owner\"\n        :owner=\"{target: comment.owner, type: 'user'}\" \n        :creator=\"{target: comment.owner, type: 'user'}\"\n        :date=\"comment.createdAt\"\n      />\n      <div class=\"pd-t-zero\">\n        <p class=\"p-medium\">{{ comment.content }}</p>\n      </div>\n      <div class=\"mn-t-thin flex-v-center flex-nowrap flex gap-small\">\n        <button \n          v-if=\"totalReplies > 0\" \n          @click=\"toggleChildren\"\n          class=\"t-second cursor-pointer t-medium font-second\"\n        >\n          {{ isExpanded ? 'Hide' : totalReplies + (totalReplies === 1 ? ' reply' : ' replies') }} \n        </button>\n        <button \n          v-if=\"owner\" \n          class=\"font-second cursor-pointer t-transp t-medium\" \n          @click=\"showReplyForm = true\"\n        > \n          Reply\n        </button>\n      </div>\n      <div v-if=\"showReplyForm\" class=\"mn-t-small bg-white pd-thin radius-regular\">\n        <textarea class=\"w-100\" v-model=\"replyContent\"></textarea>\n        <div class=\"mn-l-auto gap-thin flex-nowrap flex\">\n          <button class=\"bg-grey-transp-25 pd-r-regular pd-l-regular pd-thin button\" @click=\"showReplyForm = false\">Cancel</button>\n          <button class=\"bg-main pd-r-regular pd-l-regular pd-thin button\" @click=\"submitReply\">Send</button>\n        </div>\n      </div>\n    </div>\n\n    <transition name=\"collapse\">\n      <div v-if=\"isExpanded && comment.children && comment.children.length\" class=\"mn-t-regular comment-children\">\n        <div\n          v-for=\"(childComment, index) in comment.children\"\n          :key=\"childComment._id\"\n          class=\"child-wrapper\"\n        >\n          <!-- Кликабельная область с линией -->\n          <div \n            @click=\"toggleChildren\" \n             @mouseenter=\"highlightLevel($event, true)\"\n            @mouseleave=\"highlightLevel($event, false)\"\n            class=\"tree-line cursor-pointer\"\n            :class=\"{ 'last-child': index === comment.children.length - 1 }\"\n          ></div>\n          \n          <Comment\n            :comment=\"childComment\"\n            :target=\"target\"\n            :owner=\"owner\"\n            @reply=\"handleReply\"\n            @load-more=\"handleLoadMore\"\n            class=\"child-comment mn-b-regular\"\n          />\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport Comment from './Comment.vue';\nimport CardHeader from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'\n\nconst props = defineProps({\n  comment: {\n    type: Object,\n    required: true\n  },\n  target: {\n    type: String,\n    required: true\n  },\n  owner: {\n    type: String,\n    required: true\n  }\n});\n\nconst emit = defineEmits(['reply', 'load-more']);\n\nconst showReplyForm = ref(false);\nconst replyContent = ref('');\nconst isExpanded = ref(shouldBeExpanded(props.comment.depth))\n\n\nconst childrenContainer = ref(null)\n\nfunction highlightLevel(event, state) {\n  const wrapper = event.currentTarget?.parentElement?.parentElement;\n  if (!wrapper) return;\n\n  const lines = wrapper.querySelectorAll(':scope > .child-wrapper > .tree-line');\n  lines.forEach(line => line.classList.toggle('hovered', state));\n} \n\nfunction shouldBeExpanded(depth) {\n  return depth % 3 < 2\n}\n\nconst totalReplies = computed(() => {\n  function countReplies(comment) {\n    if (!comment.children || comment.children.length === 0) {\n      return 0\n    }\n    return comment.children.length + comment.children.reduce((sum, child) => sum + countReplies(child), 0)\n  }\n  return countReplies(props.comment)\n})\n\nconst toggleChildren = () => {\n  isExpanded.value = !isExpanded.value\n}\n\nconst submitReply = () => {\n  emit('reply', props.comment._id, replyContent.value);\n  replyContent.value = '';\n  showReplyForm.value = false;\n};\n\nconst handleReply = (parentId, content) => {\n  emit('reply', parentId, content);\n};\n\nconst handleLoadMore = (commentId, depth) => {\n  emit('load-more', commentId, depth);\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.comment-children {\n  margin-top: 1rem;\n}\n\n.child-wrapper {\n  position: relative;\n}\n\n.child-comment {\n  padding-left: 1.5rem;\n}\n\n.tree-line {\n  position: absolute;\n  left: calc(-1rem + 2px);\n  top: -1rem;\n  width: 2rem;\n  height: calc(100% + 2rem);\n}\n\n.tree-line::before {\n  content: '';\n  position: absolute;\n  left: 1rem;\n  top: 0;\n  width: 2px;\n  height: 100%;\n   border-left: 1px solid rgba(var(--grey), 1);\n  transition: background 0.2s ease;\n}\n\n.tree-line::after {\n  content: '';\n  position: absolute;\n  left: 1rem;\n  top: 2rem;\n  width: 1rem;\n  height: 2px;\n  border-bottom: 1px solid rgba(var(--grey), 1);\n  transition: background 0.2s ease;\n\n}\n\n.child-wrapper {\n  &:last-child {\n    .tree-line::after {\n      display: none;\n    }\n  }\n}\n\n.tree-line.last-child::before {\n  height: 2rem;\n  border-bottom-left-radius: 0.5rem;\n  border-left: 1px solid rgba(var(--grey), 1);\n  border-bottom: 1px solid rgba(var(--grey), 1);\n  background: none;\n  width: 1rem;\n}\n\n\n.tree-line.hovered::before,\n.tree-line.hovered::after {\n  border-color: rgba(var(--second), 1);\n}\n\n.tree-line.last-child.hovered::before {\n  border-color: rgba(var(--second), 1);\n}\n\n/* Анимация */\n.collapse-enter-active,\n.collapse-leave-active {\n  transition: all 0.3s ease;\n}\n\n.collapse-enter-from {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n.collapse-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,UAAM,QAAQ;AAed,UAAM,OAAO;AAEb,UAAM,gBAAgB,IAAI,KAAK;AAC/B,UAAM,eAAe,IAAI,EAAE;AAC3B,UAAM,aAAa,IAAI,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAGlC,QAAI,IAAI;AAElC,aAAS,eAAe,OAAO,OAAO;;AACpC,YAAM,WAAU,iBAAM,kBAAN,mBAAqB,kBAArB,mBAAoC;AACpD,UAAI,CAAC,QAAS;AAEd,YAAM,QAAQ,QAAQ,iBAAiB,sCAAsC;AAC7E,YAAM,QAAQ,UAAQ,KAAK,UAAU,OAAO,WAAW,KAAK,CAAC;AAAA,IAC/D;AAEA,aAAS,iBAAiB,OAAO;AAC/B,aAAO,QAAQ,IAAI;AAAA,IACrB;AAEA,UAAM,eAAe,SAAS,MAAM;AAClC,eAAS,aAAa,SAAS;AAC7B,YAAI,CAAC,QAAQ,YAAY,QAAQ,SAAS,WAAW,GAAG;AACtD,iBAAO;AAAA,QACb;AACI,eAAO,QAAQ,SAAS,SAAS,QAAQ,SAAS,OAAO,CAAC,KAAK,UAAU,MAAM,aAAa,KAAK,GAAG,CAAC;AAAA,MACzG;AACE,aAAO,aAAa,MAAM,OAAO;AAAA,IACnC,CAAC;AAED,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IACjC;AAEA,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,QAAQ,KAAK,aAAa,KAAK;AACnD,mBAAa,QAAQ;AACrB,oBAAc,QAAQ;AAAA,IACxB;AAEA,UAAM,cAAc,CAAC,UAAU,YAAY;AACzC,WAAK,SAAS,UAAU,OAAO;AAAA,IACjC;AAEA,UAAM,iBAAiB,CAAC,WAAW,UAAU;AAC3C,WAAK,aAAa,WAAW,KAAK;AAAA,IACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}