pukaad-ui-lib 1.201.0 → 1.203.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.201.0",
+  "version": "1.203.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/comment.d.vue.ts

@@ -32,11 +32,23 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     reply: (commentId: string, replyToUserId: string | undefined, content: string) => any;
     "like-comment": (comment: CommentItem) => any;
     "like-reply": (reply: Reply) => any;
+    "edit-comment": (comment: CommentItem, content: string) => any;
+    "edit-reply": (reply: Reply, content: string) => any;
+    "delete-comment": (comment: CommentItem) => any;
+    "delete-reply": (reply: Reply) => any;
+    "report-comment": (comment: CommentItem) => any;
+    "report-reply": (reply: Reply) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((content: string) => any) | undefined;
     onReply?: ((commentId: string, replyToUserId: string | undefined, content: string) => any) | undefined;
     "onLike-comment"?: ((comment: CommentItem) => any) | undefined;
     "onLike-reply"?: ((reply: Reply) => any) | undefined;
+    "onEdit-comment"?: ((comment: CommentItem, content: string) => any) | undefined;
+    "onEdit-reply"?: ((reply: Reply, content: string) => any) | undefined;
+    "onDelete-comment"?: ((comment: CommentItem) => any) | undefined;
+    "onDelete-reply"?: ((reply: Reply) => any) | undefined;
+    "onReport-comment"?: ((comment: CommentItem) => any) | undefined;
+    "onReport-reply"?: ((reply: Reply) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/comment.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="flex flex-col gap-[16px]">
       <div class="flex gap-[8px] w-full">
-        <Avatar :size="30" />
+        <Avatar :size="30" :src="currentUser.avatar" />
         <div
           ref="mainInputRef"
           contenteditable="true"
@@ -37,40 +37,93 @@
       class="flex flex-col gap-[16px] w-full"
     >
       <div class="flex flex-col gap-[4px] w-full">
-        <div class="flex gap-[8px]">
+        <div
+          class="flex gap-[8px]"
+          @mouseenter="hoveredId = cmt.id"
+          @mouseleave="hoveredId = null"
+        >
           <Avatar
             :size="30"
+            :src="cmt.user.avatar"
             class="cursor-pointer"
             @click="onViewProfileComment(cmt.user.id)"
           />
-          <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
-            <div
-              class="font-body-large-prominent cursor-pointer"
-              @click="onViewProfileComment(cmt.user.id)"
-            >
-              {{ cmt.user.name }}
+          <template v-if="editingId === cmt.id">
+            <div class="flex-1 flex flex-col gap-[8px]">
+              <div
+                :ref="(el) => setEditInputRef(el, cmt.id)"
+                contenteditable="true"
+                class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
+                @input="onEditInput($event, cmt.id)"
+                @keydown.enter.exact.prevent="onSendEdit(cmt, 'comment')"
+                @keydown.shift.enter.prevent="onInsertLineBreak"
+              />
+              <div class="flex justify-end gap-[8px]">
+                <Button
+                  variant="outline"
+                  class="w-[56px]"
+                  @click="onCancelEdit"
+                >
+                  ยกเลิก
+                </Button>
+                <Button
+                  color="primary"
+                  class="w-[56px]"
+                  :disabled="!editTextMap[cmt.id]"
+                  @click="onSendEdit(cmt, 'comment')"
+                >
+                  ส่ง
+                </Button>
+              </div>
             </div>
-            <div
-              :ref="
+          </template>
+          <template v-else>
+            <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
+              <div
+                class="font-body-large-prominent cursor-pointer"
+                @click="onViewProfileComment(cmt.user.id)"
+              >
+                {{ cmt.user.name }}
+              </div>
+              <div
+                :ref="
   (el) => registerContentRef(el, `comment-${cmt.id}`)
 "
-              class="font-body-large whitespace-pre-wrap"
-            >
-              <template
-                v-if="
+                class="font-body-large whitespace-pre-wrap"
+              >
+                <template
+                  v-if="
   isContentExpanded(`comment-${cmt.id}`) || !isContentOverflowing(`comment-${cmt.id}`)
 "
-                >{{ normalizeContent(cmt.content) }}</template
-              >
-              <template v-else
-                >{{ getTruncatedText(`comment-${cmt.id}`) }}...<span
-                  class="text-primary cursor-pointer"
-                  @click="toggleContentExpand(`comment-${cmt.id}`)"
-                  >ดูเพิ่มเติม</span
-                ></template
-              >
+                  >{{ normalizeContent(cmt.content) }}</template
+                >
+                <template v-else
+                  >{{ getTruncatedText(`comment-${cmt.id}`) }}...<span
+                    class="text-primary cursor-pointer"
+                    @click="toggleContentExpand(`comment-${cmt.id}`)"
+                    >ดูเพิ่มเติม</span
+                  ></template
+                >
+              </div>
             </div>
-          </div>
+            <div
+              class="self-center transition-opacity"
+              :class="
+  isMenuVisible(cmt.id) ? 'opacity-100' : 'opacity-0 pointer-events-none'
+"
+            >
+              <PickerOptionMenu
+                horizontal
+                variant="ghost"
+                circle
+                size="icon-sm"
+                icon-size="20"
+                :items="getCommentMenuItems(cmt)"
+                :open="openMenuId === cmt.id"
+                @update:open="(v) => openMenuId = v ? cmt.id : null"
+              />
+            </div>
+          </template>
         </div>
         <div class="pl-[38px] flex gap-[16px] text-gray">
           <div class="font-body-medium">
@@ -86,7 +139,7 @@
 "
               :class="[cmt.is_liked && 'text-primary']"
             />
-            <div :class="[cmt.is_liked && 'text-primary']">
+            <div v-if="cmt.like_count > 0" :class="[cmt.is_liked && 'text-primary']">
               {{ $convert.convertNumber(cmt.like_count) }}
             </div>
           </div>
@@ -98,17 +151,17 @@
           </div>
         </div>
         <div
-          v-if="hasOtherUserReplies(cmt)"
+          v-if="getHiddenCount(cmt) > 0"
           class="pl-[38px] flex flex-col gap-[16px]"
         >
           <Button
             variant="text"
-            class="justify-start text-primary p-0 h-auto gap-[4px]"
+            class="justify-start text-primary h-auto gap-[4px] w-fit"
             @click="onToggleReplyComment(cmt.id)"
           >
             <div class="font-body-large-prominent">
               การตอบกลับ
-              {{ $convert.convertNumber(getOtherUserRepliesCount(cmt)) }}
+              {{ $convert.convertNumber(getHiddenCount(cmt)) }}
               รายการ
             </div>
             <Icon
@@ -121,7 +174,7 @@
       </div>
       <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
         <div class="flex gap-[8px] w-full">
-          <Avatar :size="30" />
+          <Avatar :size="30" :src="currentUser.avatar" />
           <div class="flex-1">
             <div
               :ref="(el) => setReplyInputRef(el, cmt.id)"
@@ -153,63 +206,119 @@
         </div>
       </div>
       <div
-        v-if="openedComments.includes(cmt.id) || hasCurrentUserReplies(cmt)"
-        class="pl-[38px] flex flex-col gap-[16px] w-full"
+        v-if="cmt.reply.length > 0"
+        v-show="openedComments.includes(cmt.id) || cmt.reply.some((r) => pinnedReplyIds.has(r.id))"
+        class="pl-[38px] flex flex-col gap-[16px]"
       >
         <div
           v-for="reply in cmt.reply"
-          v-show="
-  openedComments.includes(cmt.id) || reply.user.id === currentUser.id
-"
+          v-show="isReplyVisible(cmt, reply)"
           :key="reply.id"
-          :data-reply-id="reply.id"
           class="flex flex-col gap-[16px]"
         >
-          <div class="flex flex-col gap-[4px] w-full">
-            <div class="flex gap-[8px]">
+          <div class="flex flex-col gap-[4px]">
+            <div
+              class="flex gap-[8px]"
+              @mouseenter="hoveredId = reply.id"
+              @mouseleave="hoveredId = null"
+            >
               <Avatar
                 :size="30"
+                :src="reply.user.avatar"
                 class="cursor-pointer"
                 @click="onViewProfileComment(reply.user.id)"
               />
-              <div class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]">
+              <template v-if="editingId === reply.id">
+                <div class="flex-1 flex flex-col gap-[8px]">
+                  <div
+                    :ref="(el) => setEditInputRef(el, reply.id)"
+                    contenteditable="true"
+                    class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
+                    @input="onEditInput($event, reply.id)"
+                    @keydown.enter.exact.prevent="onSendEdit(reply, 'reply')"
+                    @keydown.shift.enter.prevent="onInsertLineBreak"
+                  />
+                  <div class="flex justify-end gap-[8px]">
+                    <Button
+                      variant="outline"
+                      class="w-[56px]"
+                      @click="onCancelEdit"
+                    >
+                      ยกเลิก
+                    </Button>
+                    <Button
+                      color="primary"
+                      class="w-[56px]"
+                      :disabled="!editTextMap[reply.id]"
+                      @click="onSendEdit(reply, 'reply')"
+                    >
+                      ส่ง
+                    </Button>
+                  </div>
+                </div>
+              </template>
+              <template v-else>
                 <div
-                  class="font-body-large-prominent cursor-pointer"
-                  @click="onViewProfileComment(reply.user.id)"
+                  class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]"
                 >
-                  {{ reply.user.name }}
+                  <div
+                    class="font-body-large-prominent cursor-pointer"
+                    @click="onViewProfileComment(reply.user.id)"
+                  >
+                    {{ reply.user.name }}
+                  </div>
+                  <div
+                    :ref="
+  (el) => registerContentRef(
+    el,
+    `reply-${reply.id}`
+  )
+"
+                    class="font-body-large whitespace-pre-wrap"
+                  >
+                    <template
+                      v-if="
+  isContentExpanded(`reply-${reply.id}`) || !isContentOverflowing(`reply-${reply.id}`)
+"
+                      ><span
+                        v-if="reply.reply_to"
+                        @click="onViewProfileComment(reply.reply_to.id)"
+                        class="text-primary cursor-pointer mr-1"
+                        >{{ reply.reply_to.name }}</span
+                      >{{ normalizeContent(reply.content) }}</template
+                    >
+                    <template v-else
+                      ><span
+                        v-if="reply.reply_to"
+                        @click="onViewProfileComment(reply.reply_to.id)"
+                        class="text-primary cursor-pointer mr-1"
+                        >{{ reply.reply_to.name }}</span
+                      >{{ getTruncatedText(`reply-${reply.id}`) }}...<span
+                        class="text-primary cursor-pointer"
+                        @click="toggleContentExpand(`reply-${reply.id}`)"
+                        >ดูเพิ่มเติม</span
+                      ></template
+                    >
+                  </div>
                 </div>
                 <div
-                  :ref="
-  (el) => registerContentRef(el, `reply-${reply.id}`)
+                  class="self-center transition-opacity"
+                  :class="
+  isMenuVisible(reply.id) ? 'opacity-100' : 'opacity-0 pointer-events-none'
 "
-                  class="font-body-large whitespace-pre-wrap"
                 >
-                  <template
-                    v-if="
-  isContentExpanded(`reply-${reply.id}`) || !isContentOverflowing(`reply-${reply.id}`)
-"
-                    ><span
-                      v-if="reply.reply_to"
-                      @click="onViewProfileComment(reply.reply_to.id)"
-                      class="text-primary cursor-pointer mr-1"
-                      >{{ reply.reply_to.name }}</span
-                    >{{ normalizeContent(reply.content) }}</template
-                  >
-                  <template v-else
-                    ><span
-                      v-if="reply.reply_to"
-                      @click="onViewProfileComment(reply.reply_to.id)"
-                      class="text-primary cursor-pointer mr-1"
-                      >{{ reply.reply_to.name }}</span
-                    >{{ getTruncatedText(`reply-${reply.id}`) }}...<span
-                      class="text-primary cursor-pointer"
-                      @click="toggleContentExpand(`reply-${reply.id}`)"
-                      >ดูเพิ่มเติม</span
-                    ></template
-                  >
+                  <PickerOptionMenu
+                    horizontal
+                    variant="ghost"
+                    circle
+                    size="icon-xs"
+                    icon-size="20"
+                    :items="getReplyMenuItems(reply)"
+                    :open="openMenuId === reply.id"
+                    @update:open="(v) => openMenuId = v ? reply.id : null"
+                  />
                 </div>
-              </div>
+              </template>
             </div>
             <div class="pl-[38px] flex gap-[16px] text-gray">
               <div class="font-body-medium">
@@ -225,7 +334,7 @@
 "
                   :class="[reply.is_liked && 'text-primary']"
                 />
-                <div :class="[reply.is_liked && 'text-primary']">
+                <div v-if="reply.like_count > 0" :class="[reply.is_liked && 'text-primary']">
                   {{ $convert.convertNumber(reply.like_count) }}
                 </div>
               </div>
@@ -242,12 +351,12 @@
             class="flex flex-col gap-[16px]"
           >
             <div class="flex gap-[8px] w-full">
-              <Avatar :size="30" />
+              <Avatar :size="30" :src="currentUser.avatar" />
               <div class="flex-1">
                 <div
                   :ref="(el) => setReplyInputRef(el, reply.id)"
                   contenteditable="true"
-                  class="w-full min-h-[40px] px-[12px] py-[8px] rounded-lg border border-gray-300 font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400"
+                  class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
                   data-placeholder="เขียนการตอบกลับ..."
                   @input="onReplyInput($event, reply.id)"
                   @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
@@ -280,7 +389,7 @@
 </template>
 
 <script setup>
-import { ref, nextTick, computed } from "vue";
+import { ref, nextTick, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useConvert } from "@/runtime/composables/useConvert";
 const props = defineProps({
@@ -288,10 +397,9 @@ const props = defineProps({
   commentCount: { type: Number, required: true },
   currentUser: { type: Object, required: true }
 });
-const emit = defineEmits(["submit", "reply", "like-comment", "like-reply"]);
+const emit = defineEmits(["submit", "reply", "like-comment", "like-reply", "edit-comment", "edit-reply", "delete-comment", "delete-reply", "report-comment", "report-reply"]);
 const router = useRouter();
 const { convertDateTorelativeText } = useConvert();
-const currentUser = computed(() => props.currentUser);
 const openedComments = ref([]);
 const expandedContentIds = ref([]);
 const truncatedTexts = ref({});
@@ -302,6 +410,48 @@ const replyingToId = ref(null);
 const replyToUser = ref(null);
 const replyInputRefs = ref({});
 const replyTextMap = ref({});
+const pinnedReplyIds = ref(/* @__PURE__ */ new Set());
+let knownReplyIds = null;
+watch(
+  () => props.comments.flatMap((c) => c.reply.map((r) => r.id)),
+  (allIds) => {
+    if (knownReplyIds === null) {
+      if (allIds.length === 0) return;
+      knownReplyIds = new Set(allIds);
+      return;
+    }
+    const liveIds = new Set(allIds);
+    allIds.forEach((id) => {
+      if (knownReplyIds.has(id)) return;
+      knownReplyIds.add(id);
+      pinnedReplyIds.value.add(id);
+    });
+    knownReplyIds.forEach((id) => {
+      if (!liveIds.has(id)) {
+        knownReplyIds.delete(id);
+        pinnedReplyIds.value.delete(id);
+      }
+    });
+  },
+  { immediate: true }
+);
+const getHiddenCount = (cmt) => cmt.reply.filter((r) => !pinnedReplyIds.value.has(r.id)).length;
+const isReplyVisible = (cmt, reply) => openedComments.value.includes(cmt.id) || pinnedReplyIds.value.has(reply.id);
+const hoveredId = ref(null);
+const openMenuId = ref(null);
+const isMenuVisible = (id) => hoveredId.value === id || openMenuId.value === id;
+const editingId = ref(null);
+const editInputRefs = ref({});
+const editTextMap = ref({});
+const isSelfUser = (user) => !!props.currentUser.id && user.id === props.currentUser.id;
+const buildMentionChip = (name) => {
+  const chip = document.createElement("span");
+  chip.dataset.type = "mention";
+  chip.contentEditable = "false";
+  chip.className = "inline-flex items-center text-primary font-body-large-prominent select-none mr-1";
+  chip.textContent = name;
+  return chip;
+};
 const onToggleReplyComment = (id) => {
   if (openedComments.value.includes(id)) {
     openedComments.value = openedComments.value.filter((i) => i !== id);
@@ -396,21 +546,17 @@ const setReplyInputRef = (el, id) => {
   else delete replyInputRefs.value[id];
 };
 const onReplyComment = (id, user) => {
+  const isSelf = isSelfUser(user);
   replyingToId.value = id;
-  replyToUser.value = user.id !== currentUser.value.id ? user : null;
+  replyToUser.value = isSelf ? null : user;
   replyTextMap.value[id] = "";
   nextTick(() => {
     const el = replyInputRefs.value[id];
     if (!el) return;
     el.innerHTML = "";
-    if (user.id !== currentUser.value.id) {
-      const chip = document.createElement("span");
-      chip.dataset.type = "mention";
-      chip.contentEditable = "false";
-      chip.className = "inline-flex items-center text-primary font-body-large-prominent select-none mr-1";
-      chip.textContent = user.name;
+    if (!isSelf) {
       const space = document.createTextNode("\xA0");
-      el.appendChild(chip);
+      el.appendChild(buildMentionChip(user.name));
       el.appendChild(space);
       const range = document.createRange();
       const sel = window.getSelection();
@@ -498,7 +644,88 @@ const onToggleLikeReplyComment = (reply) => {
 const onViewProfileComment = (id) => {
   if (id) router.push(`/@${id}`);
 };
-const getOtherUserRepliesCount = (cmt) => (cmt.reply || []).filter((r) => r.user?.id !== currentUser.value?.id).length;
-const hasOtherUserReplies = (cmt) => getOtherUserRepliesCount(cmt) > 0;
-const hasCurrentUserReplies = (cmt) => (cmt.reply || []).some((r) => r.user?.id === currentUser.value?.id);
+const setEditInputRef = (el, id) => {
+  if (el) editInputRefs.value[id] = el;
+  else delete editInputRefs.value[id];
+};
+const onEditClick = (id, content, replyTo) => {
+  editingId.value = id;
+  editTextMap.value[id] = content;
+  nextTick(() => {
+    const el = editInputRefs.value[id];
+    if (!el) return;
+    el.innerHTML = "";
+    if (replyTo) {
+      el.appendChild(buildMentionChip(replyTo.name));
+      el.appendChild(document.createTextNode("\xA0"));
+    }
+    el.appendChild(document.createTextNode(content));
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    el.focus();
+  });
+};
+const onEditInput = (event, id) => {
+  const el = event.target;
+  editTextMap.value[id] = readTextWithBreaks(el, true);
+};
+const onCancelEdit = () => {
+  const id = editingId.value;
+  if (id) delete editTextMap.value[id];
+  editingId.value = null;
+};
+const onSendEdit = (item, type) => {
+  const content = editTextMap.value[item.id]?.trim() ?? "";
+  if (!content) return;
+  if (type === "comment") emit("edit-comment", item, content);
+  else emit("edit-reply", item, content);
+  delete editTextMap.value[item.id];
+  editingId.value = null;
+};
+const getCommentMenuItems = (comment) => isSelfUser(comment.user) ? [
+  {
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    name: "edit",
+    icon: "lucide:pencil",
+    action: () => onEditClick(comment.id, comment.content)
+  },
+  {
+    label: "\u0E25\u0E1A",
+    name: "delete",
+    icon: "lucide:trash-2",
+    action: () => emit("delete-comment", comment)
+  }
+] : [
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19",
+    name: "report",
+    icon: "lucide:flag",
+    action: () => emit("report-comment", comment)
+  }
+];
+const getReplyMenuItems = (reply) => isSelfUser(reply.user) ? [
+  {
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    name: "edit",
+    icon: "lucide:pencil",
+    action: () => onEditClick(reply.id, reply.content, reply.reply_to)
+  },
+  {
+    label: "\u0E25\u0E1A",
+    name: "delete",
+    icon: "lucide:trash-2",
+    action: () => emit("delete-reply", reply)
+  }
+] : [
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19",
+    name: "report",
+    icon: "lucide:flag",
+    action: () => emit("report-reply", reply)
+  }
+];
 </script>

package/dist/runtime/components/comment.vue.d.ts

@@ -32,11 +32,23 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     reply: (commentId: string, replyToUserId: string | undefined, content: string) => any;
     "like-comment": (comment: CommentItem) => any;
     "like-reply": (reply: Reply) => any;
+    "edit-comment": (comment: CommentItem, content: string) => any;
+    "edit-reply": (reply: Reply, content: string) => any;
+    "delete-comment": (comment: CommentItem) => any;
+    "delete-reply": (reply: Reply) => any;
+    "report-comment": (comment: CommentItem) => any;
+    "report-reply": (reply: Reply) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((content: string) => any) | undefined;
     onReply?: ((commentId: string, replyToUserId: string | undefined, content: string) => any) | undefined;
     "onLike-comment"?: ((comment: CommentItem) => any) | undefined;
     "onLike-reply"?: ((reply: Reply) => any) | undefined;
+    "onEdit-comment"?: ((comment: CommentItem, content: string) => any) | undefined;
+    "onEdit-reply"?: ((reply: Reply, content: string) => any) | undefined;
+    "onDelete-comment"?: ((comment: CommentItem) => any) | undefined;
+    "onDelete-reply"?: ((reply: Reply) => any) | undefined;
+    "onReport-comment"?: ((comment: CommentItem) => any) | undefined;
+    "onReport-reply"?: ((reply: Reply) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-report.d.vue.ts

@@ -1,3 +1,24 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import type { ModalReportProps } from "@/types/components/modal/modal-report";
+type __VLS_Props = ModalReportProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (payload: {
+        value: string;
+        detail: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((payload: {
+        value: string;
+        detail: string;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;