@ozdao/martyrs 0.2.488 → 0.2.491

package/dist/martyrs/src/modules/community/components/pages/CreateBlogPost.vue.js

@@ -0,0 +1,307 @@
+import { ref, onMounted, computed, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, unref, Transition, withCtx, Fragment, renderList, isMemoSame, createTextVNode } from "vue";
+import "isomorphic-dompurify";
+/* empty css                                                    */
+import _sfc_main$1 from "../../../constructor/components/sections/Constructor.vue.js";
+import _sfc_main$2 from "../../../../components/Popup/Popup.vue.js";
+import "../../../../../../_virtual/index2.js";
+/* empty css                                             */
+/* empty css                                                   */
+import _sfc_main$3 from "../../../../components/FieldTags/BlockTags.vue.js";
+import _sfc_main$6 from "../../../../components/Checkbox/Checkbox.vue.js";
+import Field from "../../../../components/Field/Field.vue.js";
+import _sfc_main$7 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$5 from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$4 from "../../../globals/views/components/blocks/Card.vue.js";
+import { useRoute, useRouter } from "vue-router";
+import { read, clean, state as state$1, remove, update, create } from "../../store/blogposts.js";
+import { state } from "../../../auth/views/store/auth.js";
+import { actions } from "../../../organizations/store/organizations.js";
+import { useGlobalMixins } from "../../../globals/views/mixins/mixins.js";
+const _hoisted_1 = { class: "w-100 bg-light radius-medium pos-relative" };
+const _hoisted_2 = {
+  style: { "min-height": "100%" },
+  class: "w-100 pd-big"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "pd-small pos-sticky pos-l-0 pos-b-0 w-100"
+};
+const _hoisted_4 = { class: "pd-thin radius-big bg-main w-100 flex-nowrap flex" };
+const _hoisted_5 = {
+  key: 1,
+  class: "mn-b-thin h-25r o-x-hidden o-y-scroll bg-light radius-big pd-small"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "mn-b-thin"
+};
+const _hoisted_7 = {
+  key: 3,
+  class: "mn-b-medium br-grey-transp-25 br-2px br-solid pd-small radius-big"
+};
+const _sfc_main = {
+  __name: "CreateBlogPost",
+  setup(__props) {
+    const { hasAccess } = useGlobalMixins();
+    const route = useRoute();
+    const router = useRouter();
+    let post = ref(null);
+    ref(null);
+    const selectedTags = ref([]);
+    const selectedOrganization = ref(null);
+    onMounted(async () => {
+      if (route.params.url) {
+        const data = await read({ user: state.user._id, url: route.params.url });
+        post.value = data.pop();
+        if (!post.value) {
+          router.push({ name: "notfound" });
+        }
+        if (post.value.owner.type === "organization") {
+          const isAccess = hasAccess(post.value.owner.target._id, "posts", "edit", state.accesses, state.access.roles);
+          if (!isAccess) {
+            router.push({ name: "unauthorized" });
+          }
+        }
+        if (post.value.owner.type === "user" && post.value.creator.target._id !== state.user._id) {
+          router.push({ name: "unauthorized" });
+        }
+      } else {
+        clean();
+        post.value = state$1.current;
+      }
+      if (!post.value.owner) post.value.owner = {
+        target: state.user._id,
+        type: "user"
+      };
+      if (!post.value.creator) post.value.creator = {
+        target: state.user._id,
+        type: "user",
+        hidden: false
+      };
+      if (post.value.owner.type === "organization") selectedOrganization.value = {
+        _id: post.value.owner.target._id,
+        name: post.value.owner.target.profile.name,
+        photo: post.value.owner.target.profile.photo
+      };
+    });
+    const tag = ref("");
+    const autocompleteItems = ref([
+      { text: "story" },
+      { text: "news" },
+      { text: "guide" },
+      { text: "discussion" },
+      { text: "photos" }
+    ]);
+    computed(() => {
+      return autocompleteItems.value.filter((i) => {
+        return i.text.toLowerCase().includes(tag.value.toLowerCase());
+      });
+    });
+    computed(() => {
+      return autocompleteItems.value.filter((item) => {
+        return !selectedTags.value.some((tag2) => tag2.text === item.text);
+      });
+    });
+    const isPublicationPopup = ref(false);
+    function openPulicationPopup() {
+      isPublicationPopup.value = true;
+    }
+    function closePublicationPopup() {
+      isPublicationPopup.value = false;
+    }
+    function onDrafts() {
+      if (selectedTags.value.length > 0) selectedTags.value.map((tag2) => tag2.text);
+      post.value.status = "draft";
+      post.value.name = post.value.content[0].content;
+      if (route.params.url) {
+        update(post.value).then((response) => {
+          router.push({ name: "BlogPost", params: { url: response.url } });
+        }).catch((error) => {
+          console.log(error);
+        });
+      } else {
+        create(post.value).then((response) => {
+          router.push({ name: "BlogPost", params: { url: response.url } });
+        }).catch((error) => {
+          console.log(error);
+        });
+      }
+    }
+    function onSubmit() {
+      if (selectedOrganization.value) post.value.owner = {
+        target: selectedOrganization.value._id,
+        type: "organization"
+      };
+      if (!selectedOrganization.value) post.value.creator.hidden = false;
+      if (!selectedOrganization.value) post.value.organization = post.value.creator;
+      post.value.status = "published";
+      post.value.name = post.value.content[0].content;
+      if (route.params.url) {
+        update(post.value).then((response) => {
+          console.log(post.value);
+          router.push({ name: "BlogPost", params: { url: response.url } });
+        }).catch((error) => {
+          console.error(error);
+        });
+      } else {
+        create(post.value).then((response) => {
+          router.push({ name: "BlogPost", params: { url: response.url } });
+        }).catch((error) => {
+          console.error(error);
+        });
+      }
+    }
+    function onDelete() {
+      if (confirm("Are you sure you want to delete this post?")) {
+        remove(post.value._id).then((response) => {
+          router.push({ name: "User Posts", params: { _id: post.value.creator.target._id } });
+        }).catch((error) => {
+          console.log(error);
+        });
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("article", _hoisted_1, [
+        createElementVNode("section", _hoisted_2, [
+          _cache[10] || (_cache[10] = createElementVNode("div", { class: "w-full h-full" }, null, -1)),
+          unref(post) ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            content: unref(post).content,
+            onUpdate: _cache[0] || (_cache[0] = (update2) => unref(post).content = update2)
+          }, null, 8, ["content"])) : createCommentVNode("", true)
+        ]),
+        createVNode(Transition, { name: "scaleIn" }, {
+          default: withCtx(() => [
+            unref(post) ? (openBlock(), createElementBlock("section", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, [
+                unref(route).params.url ? (openBlock(), createElementBlock("button", {
+                  key: 0,
+                  onClick: _cache[1] || (_cache[1] = ($event) => onDelete()),
+                  class: "mn-r-auto bg-red t-white t-black button"
+                }, _cache[11] || (_cache[11] = [
+                  createElementVNode("span", null, "Delete", -1)
+                ]))) : createCommentVNode("", true),
+                createElementVNode("button", {
+                  onClick: _cache[2] || (_cache[2] = ($event) => onDrafts()),
+                  class: "mn-l-auto bg-white t-black button"
+                }, _cache[12] || (_cache[12] = [
+                  createElementVNode("span", null, "To Drafts", -1)
+                ])),
+                createElementVNode("button", {
+                  onClick: _cache[3] || (_cache[3] = ($event) => openPulicationPopup()),
+                  class: "mn-l-thin bg-black t-white button"
+                }, _cache[13] || (_cache[13] = [
+                  createElementVNode("span", null, "Publish", -1)
+                ]))
+              ])
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        createVNode(_sfc_main$2, {
+          onClosePopup: closePublicationPopup,
+          isPopupOpen: isPublicationPopup.value,
+          class: "w-m-33r t-left pd-big bg-white radius-big"
+        }, {
+          default: withCtx(() => {
+            var _a, _b;
+            return [
+              _cache[15] || (_cache[15] = createElementVNode("h3", { class: "mn-b-small" }, "Final Touches", -1)),
+              createVNode(_sfc_main$3, {
+                onTagsChanged: _cache[4] || (_cache[4] = (newTags) => unref(post).tags = newTags),
+                tags: unref(post).tags,
+                class: "mn-b-small"
+              }, null, 8, ["tags"]),
+              _cache[16] || (_cache[16] = createElementVNode("h5", { class: "mn-b-small" }, "Add source:", -1)),
+              createVNode(Field, {
+                field: unref(post).source,
+                "onUpdate:field": _cache[5] || (_cache[5] = ($event) => unref(post).source = $event),
+                placeholder: "Add full link to the source",
+                class: "mn-b-medium bg-light radius-medium pd-small"
+              }, null, 8, ["field"]),
+              _cache[17] || (_cache[17] = createElementVNode("h5", { class: "mn-b-small" }, "Add to public", -1)),
+              selectedOrganization.value ? (openBlock(), createBlock(_sfc_main$4, {
+                key: 0,
+                photo: (_a = selectedOrganization.value.profile) == null ? void 0 : _a.photo,
+                title: (_b = selectedOrganization.value.profile) == null ? void 0 : _b.name,
+                onClick: _cache[6] || (_cache[6] = () => {
+                  selectedOrganization.value = null;
+                }),
+                class: "h-4r w-100 bg-light pd-thin radius-medium mn-b-thin"
+              }, null, 8, ["photo", "title"])) : (openBlock(), createElementBlock("section", _hoisted_5, [
+                createVNode(_sfc_main$5, {
+                  showLoadMore: false,
+                  search: {
+                    placeholder: "Search organization...",
+                    class: "bg-white mn-b-thin"
+                  },
+                  states: {
+                    empty: {
+                      title: "No organizations Found",
+                      description: "Currently, there are no such organizations available."
+                    }
+                  },
+                  store: {
+                    read: (options) => actions.read(options),
+                    state: null
+                  },
+                  options: {
+                    user: state.user._id,
+                    postable: state.user._id,
+                    lookup: ["memberships"]
+                  }
+                }, {
+                  default: withCtx(({
+                    items
+                  }) => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(items, (organization, index, ___, _cached) => {
+                      var _a2, _b2;
+                      const _memo = [organization._id, organization.profile.name];
+                      if (_cached && isMemoSame(_cached, _memo)) return _cached;
+                      const _item = (openBlock(), createBlock(_sfc_main$4, {
+                        photo: (_a2 = organization.profile) == null ? void 0 : _a2.photo,
+                        title: (_b2 = organization.profile) == null ? void 0 : _b2.name,
+                        onClick: () => {
+                          selectedOrganization.value = organization;
+                        },
+                        class: "h-4r bg-white pd-thin radius-medium w-100 mn-b-thin"
+                      }, null, 8, ["photo", "title", "onClick"]));
+                      _item.memo = _memo;
+                      return _item;
+                    }, _cache, 7), 256))
+                  ]),
+                  _: 1
+                }, 8, ["store", "options"])
+              ])),
+              selectedOrganization.value ? (openBlock(), createElementBlock("h5", _hoisted_6, "Options:")) : createCommentVNode("", true),
+              selectedOrganization.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                createVNode(_sfc_main$6, {
+                  label: "Hide Author",
+                  radio: unref(post).creator.hidden,
+                  "onUpdate:radio": _cache[9] || (_cache[9] = (event) => unref(post).creator.hidden = event),
+                  name: "prices",
+                  class: "w-100"
+                }, null, 8, ["radio"])
+              ])) : createCommentVNode("", true),
+              createVNode(_sfc_main$7, {
+                submit: onSubmit,
+                callback: _ctx.redirectTo,
+                class: "w-100 bg-black t-white"
+              }, {
+                default: withCtx(() => _cache[14] || (_cache[14] = [
+                  createTextVNode("Publish")
+                ])),
+                _: 1
+              }, 8, ["callback"])
+            ];
+          }),
+          _: 1
+        }, 8, ["isPopupOpen"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=CreateBlogPost.vue.js.map

package/dist/martyrs/src/modules/community/components/pages/CreateBlogPost.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateBlogPost.vue.js","sources":["../../../../../../../src/modules/community/components/pages/CreateBlogPost.vue"],"sourcesContent":["<template>\n  <article \n    class=\"w-100 bg-light radius-medium pos-relative\"\n  >\n    <section  \n      style=\"min-height: 100%;\"\n      class=\"w-100 pd-big\"\n    >\n      <!-- Title -->\n      <div \n        class=\"w-full h-full\"\n      >\n        <!-- <Textarea \n          v-if=\"post\" \n          :prop=\"post\" \n          :setFocus=\"true\"\n          content=\"name\" \n          placeholder=\"Enter post title\" \n          class=\"h2\"\n        /> -->\n      </div>\n\n      <Constructor \n        v-if=\"post\" \n        :content=\"post.content\"\n        @update=\"update => post.content = update\"\n      />\n\n    </section>\n\n    <transition  name=\"scaleIn\" >\n      <section v-if=\"post\" class=\"pd-small pos-sticky pos-l-0 pos-b-0 w-100 \">\n        <div class=\"pd-thin radius-big  bg-main w-100 flex-nowrap flex\">\n          <button v-if=\"route.params.url\" @click=\"onDelete()\" class=\"mn-r-auto bg-red t-white t-black button\"><span>Delete</span></button>\n          <button @click=\"onDrafts()\" class=\"mn-l-auto bg-white t-black button\"><span>To Drafts</span></button>\n          <button @click=\"openPulicationPopup()\" class=\"mn-l-thin bg-black t-white button\"><span>Publish</span></button>\n        </div>\n      </section>\n    </transition>\n\n    <Popup  \n      @close-popup=\"closePublicationPopup\" \n      :isPopupOpen=\"isPublicationPopup\"\n      class=\"w-m-33r t-left pd-big bg-white radius-big\"\n    >\n      <h3 class=\"mn-b-small\">Final Touches</h3>\n      \n      <BlockTags\n        @tags-changed=\"newTags => post.tags = newTags\"\n        :tags=\"post.tags\"\n        class=\"mn-b-small\"\n      />\n\n      <h5 class=\"mn-b-small\">Add source:</h5>\n      <Field \n        v-model:field=\"post.source\"    \n        placeholder=\"Add full link to the source\" \n        class=\"mn-b-medium bg-light radius-medium pd-small\" \n      />\n\n      <h5 class=\"mn-b-small\">Add to public</h5>\n      <Card\n        v-if=\"selectedOrganization\"\n        :photo=\"selectedOrganization.profile?.photo\"\n        :title=\"selectedOrganization.profile?.name\"\n        @click=\"() => { \n          selectedOrganization = null\n        }\"\n        class=\"h-4r w-100 bg-light pd-thin radius-medium  mn-b-thin\"\n      />\n\n      <section v-else class=\"mn-b-thin h-25r o-x-hidden o-y-scroll bg-light radius-big pd-small \">\n        <Feed\n          :showLoadMore=\"false\" \n          :search=\"{\n            placeholder: 'Search organization...',\n            class: 'bg-white mn-b-thin'\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No organizations Found',\n              description: 'Currently, there are no such organizations available.'\n            }\n          }\"\n          :store=\"{\n            read: (options) => organizations.actions.read(options),\n            state: null\n          }\"\n          :options=\"{\n            user: auth.state.user._id,\n            postable: auth.state.user._id,\n            lookup: ['memberships']\n          }\"\n          v-slot=\"{ \n            items \n          }\"\n        >\n          <Card\n            v-for=\"(organization, index) in items\" \n            v-memo=\"[organization._id, organization.profile.name]\"\n            :photo=\"organization.profile?.photo\"\n            :title=\"organization.profile?.name\"\n            @click=\"() => { \n              selectedOrganization = organization\n            }\"\n            class=\"h-4r bg-white pd-thin radius-medium w-100 mn-b-thin\"\n          />\n        </Feed>\n      </section>\n\n      <h5 v-if=\"selectedOrganization\" class=\"mn-b-thin\">Options:</h5>\n      <div v-if=\"selectedOrganization\" class=\"mn-b-medium br-grey-transp-25 br-2px br-solid pd-small radius-big\">\n        <Checkbox \n          :label=\"'Hide Author'\"\n          :radio=\"post.creator.hidden\"\n          @update:radio=\"event => post.creator.hidden = event\"\n          name=\"prices\"\n          class=\"w-100\"\n        />\n      </div>\n        \n      <Button :submit=\"onSubmit\" :callback=\"redirectTo\" class=\"w-100 bg-black t-white\">Publish</Button>\n    </Popup>\n      \n  </article>\n</template>\n\n<script setup>\nimport Textarea from '@martyrs/src/modules/constructor/components/elements/Textarea.vue';\nimport Constructor from '@martyrs/src/modules/constructor/components/sections/Constructor.vue';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue'\nimport FieldTags from '@martyrs/src/components/FieldTags/FieldTags.vue'\nimport BlockTags from '@martyrs/src/components/FieldTags/BlockTags.vue'\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'\nimport Field from '@martyrs/src/components/Field/Field.vue'\nimport Button from '@martyrs/src/components/Button/Button.vue';   \nimport Feed from '@martyrs/src/components/Feed/Feed.vue'\n\nimport Card from '@martyrs/src/modules/globals/views/components/blocks/Card.vue';\n\nimport { ref, onMounted, watchEffect, nextTick, computed } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport { VueDraggableNext } from 'vue-draggable-next';\n// Store & Router\nimport * as blog from '@martyrs/src/modules/community/store/blogposts.js';\nimport * as auth  from '@martyrs/src/modules/auth/views/store/auth.js'\nimport * as organizations  from '@martyrs/src/modules/organizations/store/organizations.js'\n    \nimport { useGlobalMixins } from \"@martyrs/src/modules/globals/views/mixins/mixins.js\"\n\nconst { hasAccess } = useGlobalMixins()\n\nconst route = useRoute();\nconst router = useRouter();\n\nlet post = ref(null);\nlet publics = ref(null);\n\nconst selectedTags = ref([]);\nconst selectedOrganization = ref(null);\n\nonMounted(async () =>{\n  \n  if (route.params.url) {\n    const data = await blog.read({ user: auth.state.user._id, url: route.params.url });\n    \n    post.value = data.pop();\n\n    if (!post.value) {\n      router.push({name: 'notfound'})\n    }\n\n    if (post.value.owner.type === 'organization') {\n      // Если пост принадлежит организации, проверяем права на редактирование через `hasAccess`\n      const isAccess = hasAccess(post.value.owner.target._id, 'posts', 'edit', auth.state.accesses, auth.state.access.roles);\n\n      if (!isAccess) {\n        router.push({name: 'unauthorized'})\n      }\n    }\n\n     if (post.value.owner.type === 'user' && post.value.creator.target._id !== auth.state.user._id) {\n      router.push({name: 'unauthorized'})\n    }\n  } else {\n    blog.clean();\n    post.value = blog.state.current;\n  }\n\n  if (!post.value.owner) post.value.owner = {\n    target: auth.state.user._id,\n    type: 'user'\n  }\n\n  if (!post.value.creator) post.value.creator = {\n    target: auth.state.user._id,\n    type: 'user',\n    hidden: false\n  }\n\n\n  if (post.value.owner.type === 'organization') selectedOrganization.value = {\n    _id: post.value.owner.target._id,\n    name: post.value.owner.target.profile.name,\n    photo: post.value.owner.target.profile.photo\n  }\n})\n// /////////////////////////////////////////\n// Publication Form\n// /////////////////////////////////////////\nconst tag = ref('');\nconst autocompleteItems = ref([\n  { text: 'story' },\n  { text: 'news' },\n  { text: 'guide' },\n  { text: 'discussion' },\n  { text: 'photos' },\n]);\n\nconst filteredItems = computed(() => {\n  return autocompleteItems.value.filter(i => {\n    return i.text.toLowerCase().includes(tag.value.toLowerCase());\n  });\n});\n\nconst filteredSuggestedItems = computed(() => {\n    return autocompleteItems.value.filter(item => {\n      return !selectedTags.value.some(tag => tag.text === item.text);\n    });\n  })\n\nfunction addTag (tag) {\n  selectedTags.value.push(tag)\n}\n// /////////////////////////////////////////\n// Publication Popup\n// /////////////////////////////////////////\nconst isPublicationPopup = ref(false)\n\nfunction openPulicationPopup() {\n  isPublicationPopup.value = true;\n}\nfunction closePublicationPopup() {\n  isPublicationPopup.value = false;\n}\n\nfunction onDrafts() {\n\n  if (selectedTags.value.length > 0) selectedTags.value.map(tag => (tag.text))\n\n  post.value.status = \"draft\"\n  post.value.name = post.value.content[0].content\n\n  if (route.params.url) {\n    blog.update(post.value)\n      .then(response => {\n        router.push({ name: 'BlogPost', params: { url: response.url } });\n      })\n      .catch(error => {\n        console.log(error);\n      });\n  } else {\n    blog.create(post.value)\n      .then(response => {\n        router.push({ name: 'BlogPost', params: { url: response.url } });\n      })\n      .catch(error => {\n        console.log(error);\n      });\n  }\n}\n\nfunction onSubmit() {\n\n  if (selectedOrganization.value) post.value.owner = {\n    target: selectedOrganization.value._id,\n    type: 'organization'\n  }\n\n  if (!selectedOrganization.value) post.value.creator.hidden = false\n  if (!selectedOrganization.value) post.value.organization = post.value.creator\n\n  post.value.status = \"published\"\n  post.value.name = post.value.content[0].content\n\n  if (route.params.url) {\n    blog.update(post.value)\n      .then(response => {\n        console.log(post.value)\n        router.push({ name: 'BlogPost', params: { url: response.url } });\n      })\n      .catch(error => {\n        console.error(error);\n      });\n  } else {\n    blog.create(post.value)\n      .then(response => {\n        router.push({ name: 'BlogPost', params: { url: response.url } });\n      })\n      .catch(error => {\n        console.error(error);\n      });\n  }\n}\n\nfunction onDelete() {\n  if (confirm('Are you sure you want to delete this post?')) {\n    blog.remove(post.value._id)\n      .then(response => {\n        router.push({ name: 'User Posts', params: { _id: post.value.creator.target._id } });\n      })\n      .catch(error => {\n        console.log(error);\n      });\n  }\n}\n</script>\n\n\n<style lang=\"scss\">\n\n</style>\n"],"names":["blog.read","auth.state","blog.clean","blog.state","tag","blog.update","blog.create","blog.remove"],"mappings":"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"}

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

@@ -0,0 +1,157 @@
+"use strict";
+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 _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_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",
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    },
+    target: {
+      type: String,
+      required: true
+    },
+    owner: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["reply", "load-more"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    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;
+    }
+    const totalReplies = vue.computed(() => {
+      function countReplies(comment) {
+        if (!comment.children || comment.children.length === 0) {
+          return 0;
+        }
+        return comment.children.length + comment.children.reduce((sum, child) => sum + countReplies(child), 0);
+      }
+      return countReplies(props.comment);
+    });
+    const toggleChildren = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+    const submitReply = () => {
+      emit("reply", props.comment._id, replyContent.value);
+      replyContent.value = "";
+      showReplyForm.value = false;
+    };
+    const handleReply = (parentId, content) => {
+      emit("reply", parentId, content);
+    };
+    const handleLoadMore = (commentId, depth) => {
+      emit("load-more", commentId, depth);
+    };
+    return (_ctx, _cache) => {
+      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)
+        ]),
+        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)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+};
+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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}