pukaad-ui-lib 1.193.0 → 1.195.0

package/dist/module.json

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

package/dist/runtime/components/card/card-reaction.vue

@@ -33,6 +33,7 @@
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
 import { useApi } from "../../composables/useApi";
+const api = useApi();
 const isOpenModalShare = ref(false);
 const props = defineProps({
   itemCount: { type: Object, required: false, default: () => ({
@@ -119,7 +120,6 @@ async function toggleLike() {
   counts.liked += reaction.liked ? 1 : -1;
   if (props.state === "blog" && props.id) {
     try {
-      const api = useApi();
       await api(`/blogs/${props.id}/like`, {
         method: reaction.liked ? "POST" : "DELETE"
       });

package/dist/runtime/components/comment.vue

@@ -12,10 +12,9 @@
           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="แสดงความคิดเห็น"
           @focus="isShowMainActions = true"
-          @input="
-  mainCommentInput = $event.target.innerText.trim()
-"
+          @input="onMainCommentInput"
           @keydown.enter.exact.prevent="onSendComment"
+          @keydown.shift.enter.prevent="onInsertLineBreak"
         />
       </div>
       <div v-if="isShowMainActions" class="flex justify-end gap-[8px]">
@@ -55,13 +54,13 @@
               :ref="
   (el) => registerContentRef(el, `comment-${cmt.id}`)
 "
-              class="font-body-large"
+              class="font-body-large whitespace-pre-wrap"
             >
               <template
                 v-if="
   isContentExpanded(`comment-${cmt.id}`) || !isContentOverflowing(`comment-${cmt.id}`)
 "
-                >{{ cmt.content }}</template
+                >{{ normalizeContent(cmt.content) }}</template
               >
               <template v-else
                 >{{ getTruncatedText(`comment-${cmt.id}`) }}...<span
@@ -135,6 +134,7 @@
               data-placeholder="เขียนการตอบกลับ..."
               @input="onReplyInput($event, cmt.id)"
               @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
+              @keydown.shift.enter.prevent="onInsertLineBreak"
             />
           </div>
         </div>
@@ -189,7 +189,7 @@
                   :ref="
   (el) => registerContentRef(el, `reply-${reply.id}`)
 "
-                  class="font-body-large"
+                  class="font-body-large whitespace-pre-wrap"
                 >
                   <template
                     v-if="
@@ -200,9 +200,14 @@
                       @click="onViewProfileComment(reply.reply_to.path_name)"
                       class="text-primary cursor-pointer mr-1"
                       >{{ reply.reply_to.name }}</span
-                    >{{ reply.content }}</template
+                    >{{ normalizeContent(reply.content) }}</template
                   >
                   <template v-else
+                    ><span
+                      v-if="reply.reply_to"
+                      @click="onViewProfileComment(reply.reply_to.path_name)"
+                      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}`)"
@@ -252,6 +257,7 @@
                   data-placeholder="เขียนการตอบกลับ..."
                   @input="onReplyInput($event, reply.id)"
                   @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
+                  @keydown.shift.enter.prevent="onInsertLineBreak"
                 />
               </div>
             </div>
@@ -395,46 +401,62 @@ const onToggleReplyComment = (id) => {
 const isContentExpanded = (id) => expandedContentIds.value.includes(id);
 const isContentOverflowing = (id) => typeof truncatedTexts.value[id] === "string";
 const getTruncatedText = (id) => truncatedTexts.value[id];
+const normalizeContent = (text) => text.replace(/\n{3,}/g, "\n\n");
+const measureContent = (el, id) => {
+  const rect = el.getBoundingClientRect();
+  const width = rect.width;
+  if (!width) return;
+  const fullText = el.textContent ?? "";
+  const style = getComputedStyle(el);
+  const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5;
+  const maxH = lineHeight * 3;
+  const clone = document.createElement("div");
+  clone.style.cssText = [
+    `visibility:hidden`,
+    `position:fixed`,
+    `top:-9999px`,
+    `width:${width}px`,
+    `font-size:${style.fontSize}`,
+    `font-family:${style.fontFamily}`,
+    `font-weight:${style.fontWeight}`,
+    `line-height:${style.lineHeight}`,
+    `letter-spacing:${style.letterSpacing}`,
+    `word-break:break-word`,
+    `white-space:pre-wrap`
+  ].join(";");
+  clone.textContent = fullText;
+  document.body.appendChild(clone);
+  if (clone.scrollHeight <= maxH + 2) {
+    clone.remove();
+    truncatedTexts.value[id] = null;
+    return;
+  }
+  let lo = 0, hi = fullText.length;
+  while (lo < hi) {
+    const mid = Math.floor((lo + hi + 1) / 2);
+    clone.textContent = fullText.slice(0, mid) + "...\u0E14\u0E39\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21";
+    if (clone.scrollHeight <= maxH + 2) lo = mid;
+    else hi = mid - 1;
+  }
+  clone.remove();
+  truncatedTexts.value[id] = fullText.slice(0, lo);
+};
 const registerContentRef = (el, id) => {
   if (!el || id in truncatedTexts.value) return;
   nextTick(() => {
     const rect = el.getBoundingClientRect();
     const width = rect.width;
-    if (!width) return;
-    const fullText = el.textContent ?? "";
-    const style = getComputedStyle(el);
-    const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5;
-    const maxH = lineHeight * 3;
-    const clone = document.createElement("div");
-    clone.style.cssText = [
-      `visibility:hidden`,
-      `position:fixed`,
-      `top:-9999px`,
-      `width:${width}px`,
-      `font-size:${style.fontSize}`,
-      `font-family:${style.fontFamily}`,
-      `font-weight:${style.fontWeight}`,
-      `line-height:${style.lineHeight}`,
-      `letter-spacing:${style.letterSpacing}`,
-      `word-break:break-word`,
-      `white-space:normal`
-    ].join(";");
-    clone.textContent = fullText;
-    document.body.appendChild(clone);
-    if (clone.scrollHeight <= maxH + 2) {
-      clone.remove();
-      truncatedTexts.value[id] = null;
+    if (!width) {
+      const ro = new ResizeObserver((_, obs) => {
+        if (el.getBoundingClientRect().width > 0) {
+          obs.disconnect();
+          measureContent(el, id);
+        }
+      });
+      ro.observe(el);
       return;
     }
-    let lo = 0, hi = fullText.length;
-    while (lo < hi) {
-      const mid = Math.floor((lo + hi + 1) / 2);
-      clone.textContent = fullText.slice(0, mid) + "...\u0E14\u0E39\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21";
-      if (clone.scrollHeight <= maxH + 2) lo = mid;
-      else hi = mid - 1;
-    }
-    clone.remove();
-    truncatedTexts.value[id] = fullText.slice(0, lo);
+    measureContent(el, id);
   });
 };
 const toggleContentExpand = (id) => {
@@ -473,7 +495,7 @@ const setReplyInputRef = (el, id) => {
 };
 const onReplyComment = (id, user) => {
   replyingToId.value = id;
-  replyToUser.value = user;
+  replyToUser.value = user.id !== currentUser.id ? user : null;
   replyTextMap.value[id] = "";
   nextTick(() => {
     const el = replyInputRefs.value[id];
@@ -498,16 +520,52 @@ const onReplyComment = (id, user) => {
     el.focus();
   });
 };
+const readTextWithBreaks = (el, skipMention = false) => {
+  const nodes = Array.from(el.childNodes);
+  while (nodes.length && nodes.at(-1)?.nodeName === "BR") nodes.pop();
+  let text = "";
+  nodes.forEach((node) => {
+    if (skipMention && node.dataset?.type === "mention")
+      return;
+    if (node.nodeName === "BR") {
+      text += "\n";
+      return;
+    }
+    if (node.nodeName === "DIV") {
+      text += "\n" + node.innerText;
+      return;
+    }
+    text += node.textContent ?? "";
+  });
+  return text.replace(/\n{3,}/g, "\n\n").replace(/^\u00A0/, "").trim();
+};
+const onInsertLineBreak = (event) => {
+  const el = event.target;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  const br = document.createElement("br");
+  range.insertNode(br);
+  if (!br.nextSibling || br.nextSibling.nodeName !== "BR" && br.nextSibling.textContent === "") {
+    const phantom = document.createElement("br");
+    br.after(phantom);
+  }
+  range.setStartAfter(br);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+};
+const onMainCommentInput = (event) => {
+  const el = event.target;
+  mainCommentInput.value = readTextWithBreaks(el);
+};
 const onReplyInput = (event, id) => {
   const el = event.target;
   const chipExists = !!el.querySelector('[data-type="mention"]');
   if (!chipExists) replyToUser.value = null;
-  let text = "";
-  el.childNodes.forEach((node) => {
-    if (node.dataset?.type === "mention") return;
-    text += node.textContent;
-  });
-  replyTextMap.value[id] = text.replace(/^\u00A0/, "").trim();
+  replyTextMap.value[id] = readTextWithBreaks(el, true);
 };
 const onCancelReplyComment = () => {
   const id = replyingToId.value;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-password.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-password.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-slider.d.vue.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-slider.vue.d.ts

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     label: string;
     color: InputSliderColor;
     fullWidth: boolean;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     limit: number;
+    resize: "none" | "both" | "horizontal" | "vertical";
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
     rows: number;
     heightScroll: boolean;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     limit: number;
+    resize: "none" | "both" | "horizontal" | "vertical";
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
     rows: number;
     heightScroll: boolean;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.193.0",
+  "version": "1.195.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",