pukaad-ui-lib 1.402.0 → 1.404.0

package/dist/module.json

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

package/dist/runtime/components/display/display-video.vue

@@ -60,9 +60,13 @@
 
     <!-- ปุ่มขยายเต็มจอ -->
     <slot v-if="props.fullscreenButton" name="fullscreen" :click="onFullscreen">
-      <div class="absolute top-[16px] right-[16px] z-10">
-        <Button circle color="dark" @click="onFullscreen">
-          <Icon name="lucide:maximize" />
+      <div class="absolute top-[24px] right-[24px] z-10">
+        <Button variant="text" @click="onFullscreen">
+          <Icon
+            name="fa7-solid:up-right-and-down-left-from-center"
+            :size="24"
+            class="text-white"
+          />
         </Button>
       </div>
     </slot>

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
-    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -50,10 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     placeholder: string;
-    gap: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     fullWidth: boolean;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: 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;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-personal-card-id.d.vue.ts

@@ -11,12 +11,12 @@ 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: File | null) => any;
 } & {
-    complete: (file: File) => any;
     remove: () => any;
+    complete: (file: File) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onComplete?: ((file: File) => any) | undefined;
     onRemove?: (() => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

package/dist/runtime/components/input/input-personal-card-id.vue.d.ts

@@ -11,12 +11,12 @@ 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: File | null) => any;
 } & {
-    complete: (file: File) => any;
     remove: () => any;
+    complete: (file: File) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
-    onComplete?: ((file: File) => any) | undefined;
     onRemove?: (() => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
 }>, {
     name: string;
     disabledErrorMessage: boolean;

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: 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, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, 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, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, 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

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, 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

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

package/dist/runtime/components/read-more-text.vue

@@ -1,9 +1,12 @@
 <template>
- <div>แก้หมด</div>
+  <div ref="container" class="whitespace-pre-wrap break-words">
+    <template v-if="expanded || !isTruncated">{{ props.text }}</template>
+    <template v-else>{{ displayText }}...<span class="text-primary cursor-pointer" @click="toggle">ดูเพิ่มเติม</span></template>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch, nextTick, computed } from "vue";
+import { onMounted, ref, watch, nextTick } from "vue";
 const props = defineProps({
   text: { type: String, required: true, default: "" },
   maxLine: { type: Number, required: false, default: 3 }
@@ -12,13 +15,6 @@ const expanded = ref(false);
 const isTruncated = ref(false);
 const displayText = ref("");
 const container = ref(null);
-const formattedText = computed(() => {
-  const text = props.text || "";
-  return text.replace(
-    /@\[([^\]]+)\]\(([^)]+)\)/g,
-    '<span class="text-primary font-body-large-prominent">@$1</span>'
-  );
-});
 function computeTruncation() {
   const root = container.value;
   if (!root) return;
@@ -27,25 +23,27 @@ function computeTruncation() {
   isTruncated.value = false;
   if (expanded.value) return;
   if (!fullText.trim()) return;
-  const measure = document.createElement("span");
+  const width = root.clientWidth;
+  if (!width) return;
   const cs = getComputedStyle(root);
-  measure.style.cssText = `visibility:hidden;position:absolute;left:0;top:0;pointer-events:none;white-space:normal;width:${root.clientWidth}px;font:${cs.font};line-height:${cs.lineHeight};`;
-  root.appendChild(measure);
-  let lineHeightStr = cs.lineHeight;
-  let lineHeight = 0;
-  if (lineHeightStr.endsWith("px")) {
-    lineHeight = parseFloat(lineHeightStr);
-  } else {
-    const fontSizeStr = cs.fontSize;
-    const fontSize = fontSizeStr.endsWith("px") ? parseFloat(fontSizeStr) : 16;
-    lineHeight = fontSize * 1.5;
-  }
+  const measure = document.createElement("div");
+  measure.style.cssText = [
+    "visibility:hidden",
+    "position:fixed",
+    "top:-9999px",
+    `width:${width}px`,
+    `font:${cs.font}`,
+    `line-height:${cs.lineHeight}`,
+    `letter-spacing:${cs.letterSpacing}`,
+    "white-space:pre-wrap",
+    "word-break:break-word"
+  ].join(";");
+  document.body.appendChild(measure);
+  const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
   const maxHeight = lineHeight * props.maxLine;
-  measure.textContent = fullText + " ... \u0E14\u0E39\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21";
-  if (measure.scrollHeight <= maxHeight + 1) {
-    displayText.value = fullText;
-    isTruncated.value = false;
-    root.removeChild(measure);
+  measure.textContent = fullText;
+  if (measure.scrollHeight <= maxHeight + 2) {
+    measure.remove();
     return;
   }
   isTruncated.value = true;
@@ -54,9 +52,8 @@ function computeTruncation() {
   let best = 0;
   while (low <= high) {
     const mid = Math.floor((low + high) / 2);
-    const candidate = fullText.slice(0, mid).trimEnd() + "... \u0E14\u0E39\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21";
-    measure.textContent = candidate;
-    if (measure.scrollHeight <= maxHeight + 1) {
+    measure.textContent = fullText.slice(0, mid).trimEnd() + "...\u0E14\u0E39\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21";
+    if (measure.scrollHeight <= maxHeight + 2) {
       best = mid;
       low = mid + 1;
     } else {
@@ -64,7 +61,7 @@ function computeTruncation() {
     }
   }
   displayText.value = fullText.slice(0, best).trimEnd();
-  root.removeChild(measure);
+  measure.remove();
 }
 function toggle() {
   expanded.value = !expanded.value;
@@ -73,4 +70,8 @@ function toggle() {
 onMounted(() => {
   nextTick(computeTruncation);
 });
+watch(
+  () => [props.text, props.maxLine],
+  () => nextTick(computeTruncation)
+);
 </script>

package/package.json

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