pukaad-ui-lib 1.0.1

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.d.vue.ts

@@ -0,0 +1,40 @@
+import type { PickerOptionMenuUserProps } from "@/types/components/picker/picker-option-menu/picker-option-menu-user";
+declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "blog-pin": () => any;
+    "blog-unpin": () => any;
+    "blog-edit": () => any;
+    "report-announce": () => any;
+    "profile-edit": () => any;
+    "profile-share": () => any;
+    "profile-follower-delete": () => any;
+    "profile-block": () => any;
+    "blog-delete": () => any;
+    "report-blog": () => any;
+    "report-place": () => any;
+    "report-profile": () => any;
+    "report-review": () => any;
+    "place-close-duplicate": () => any;
+    "review-edit": () => any;
+    "review-delete": () => any;
+    archive: () => any;
+}, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
+    "onBlog-pin"?: (() => any) | undefined;
+    "onBlog-unpin"?: (() => any) | undefined;
+    "onBlog-edit"?: (() => any) | undefined;
+    "onReport-announce"?: (() => any) | undefined;
+    "onProfile-edit"?: (() => any) | undefined;
+    "onProfile-share"?: (() => any) | undefined;
+    "onProfile-follower-delete"?: (() => any) | undefined;
+    "onProfile-block"?: (() => any) | undefined;
+    "onBlog-delete"?: (() => any) | undefined;
+    "onReport-blog"?: (() => any) | undefined;
+    "onReport-place"?: (() => any) | undefined;
+    "onReport-profile"?: (() => any) | undefined;
+    "onReport-review"?: (() => any) | undefined;
+    "onPlace-close-duplicate"?: (() => any) | undefined;
+    "onReview-edit"?: (() => any) | undefined;
+    "onReview-delete"?: (() => any) | undefined;
+    onArchive?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue

@@ -0,0 +1,231 @@
+<template>
+  <PickerOptionMenu
+    :items="items"
+    :variant="props.variant"
+    :disabled-padding="props.disabledPadding"
+    :circle="props.circle"
+    :horizontal="props.horizontal"
+    :size="props.size"
+    :icon-size="props.iconSize"
+    :disabled="props.disabled"
+  />
+
+  <ModalShare v-model="isOpenModalShare" />
+  <ModalReport state v-model="isOpenModalReport" />
+  <ModalProfileEdit v-model="isOpenModalProfileEdit" />
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-announce", "report-review", "place-close-duplicate", "review-edit", "review-delete", "archive"]);
+const props = defineProps({
+  state: { type: String, required: false },
+  items: { type: Array, required: false },
+  variant: { type: null, required: false },
+  circle: { type: Boolean, required: false },
+  horizontal: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  iconSize: { type: String, required: false },
+  disabledPadding: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const isOpenModalShare = ref(false);
+const isOpenModalReport = ref(false);
+const isOpenModalProfileEdit = ref(false);
+const reportState = ref();
+const menu = [
+  {
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C",
+    name: "profile-edit",
+    icon: "lucide:square-pen",
+    action: () => {
+      isOpenModalProfileEdit.value = true;
+      emit("profile-edit");
+    }
+  },
+  {
+    label: "\u0E41\u0E02\u0E23\u0E4C\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C",
+    name: "profile-share",
+    icon: "fa6-regular:share-from-square",
+    action: () => {
+      isOpenModalShare.value = true;
+      emit("profile-share");
+    }
+  },
+  {
+    label: "\u0E25\u0E1A\u0E1C\u0E39\u0E49\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E23\u0E32\u0E22\u0E19\u0E35\u0E49",
+    name: "profile-follower-delete",
+    icon: "fa6-solid:user-minus",
+    action: () => {
+      emit("profile-follower-delete");
+    }
+  },
+  {
+    label: "\u0E1A\u0E25\u0E47\u0E2D\u0E04",
+    name: "profile-block",
+    icon: "mdi:block-helper",
+    action: () => {
+      emit("profile-block");
+    }
+  },
+  {
+    label: "\u0E04\u0E25\u0E31\u0E07",
+    name: "archive",
+    icon: "lucide:archive",
+    action: () => {
+      emit("archive");
+    }
+  },
+  {
+    label: "\u0E1B\u0E31\u0E01\u0E2B\u0E21\u0E38\u0E14\u0E1A\u0E25\u0E47\u0E2D\u0E04",
+    name: "blog-pin",
+    icon: "lucide:pin",
+    action: () => {
+      emit("blog-pin");
+    }
+  },
+  {
+    label: "\u0E40\u0E25\u0E34\u0E01\u0E1B\u0E31\u0E01\u0E2B\u0E21\u0E38\u0E14\u0E1A\u0E25\u0E47\u0E2D\u0E04",
+    name: "blog-unpin",
+    icon: "lucide:pin-off",
+    action: () => {
+      emit("blog-unpin");
+    }
+  },
+  {
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E25\u0E47\u0E2D\u0E01",
+    name: "blog-edit",
+    icon: "lucide:square-pen",
+    action: () => {
+      emit("blog-edit");
+    }
+  },
+  {
+    label: "\u0E25\u0E1A\u0E1A\u0E25\u0E47\u0E2D\u0E04\u0E19\u0E35\u0E49",
+    name: "blog-delete",
+    icon: "lucide:trash-2",
+    action: () => {
+      emit("blog-delete");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E1A\u0E25\u0E47\u0E2D\u0E01\u0E19\u0E35\u0E49",
+    name: "report-blog",
+    icon: "fa6-regular:flag",
+    action: () => {
+      isOpenModalReport.value = true;
+      reportState.value = "blog";
+      emit("report-blog");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E19\u0E35\u0E49",
+    name: "report-profile",
+    icon: "fa6-regular:flag",
+    action: () => {
+      isOpenModalReport.value = true;
+      reportState.value = "profile";
+      emit("report-profile");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19",
+    name: "report-place",
+    icon: "lsicon:circle-information-outline",
+    action: () => {
+      isOpenModalReport.value = true;
+      reportState.value = "place";
+      emit("report-place");
+    }
+  },
+  {
+    label: "\u0E41\u0E08\u0E49\u0E07\u0E1B\u0E34\u0E14\u0E2B\u0E23\u0E37\u0E2D\u0E0B\u0E49\u0E33",
+    name: "place-close-duplicate",
+    icon: "material-symbols:location-off-outline",
+    action: () => {
+      emit("place-close-duplicate");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E1B\u0E23\u0E30\u0E01\u0E32\u0E28\u0E19\u0E35\u0E49",
+    name: "report-announce",
+    icon: "fa6-regular:flag",
+    action: () => {
+      isOpenModalReport.value = true;
+      reportState.value = "announce";
+      emit("report-announce");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27\u0E19\u0E35\u0E49",
+    name: "report-review",
+    icon: "fa6-regular:flag",
+    action: () => {
+      isOpenModalReport.value = true;
+      reportState.value = "review";
+      emit("report-review");
+    }
+  },
+  {
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    name: "review-edit",
+    icon: "lucide:square-pen",
+    action: () => {
+      emit("review-edit");
+    }
+  },
+  {
+    label: "\u0E25\u0E1A",
+    name: "review-delete",
+    icon: "lucide:trash-2",
+    action: () => {
+      emit("review-delete");
+    }
+  }
+];
+const items = computed(() => {
+  if (props.state === "profile") {
+    return menu.filter(
+      (fil) => ["profile-share", "report-profile"].includes(fil.name)
+    );
+  }
+  if (props.state === "my-profile") {
+    return menu.filter(
+      (fil) => ["profile-edit", "profile-share", "archive"].includes(fil.name)
+    );
+  }
+  if (props.state === "follower") {
+    return menu.filter(
+      (fil) => ["profile-follower-delete", "profile-block", "report-profile"].includes(
+        fil.name
+      )
+    );
+  }
+  if (props.state === "blog") {
+    return menu.filter(
+      (fil) => ["report-blog"].includes(fil.name)
+    );
+  }
+  if (props.state === "my-blog") {
+    return menu.filter(
+      (fil) => ["blog-pin", "blog-edit", "blog-delete"].includes(fil.name)
+    );
+  }
+  if (props.state === "my-blog-pined") {
+    return menu.filter(
+      (fil) => ["blog-unpin", "blog-edit", "blog-delete"].includes(fil.name)
+    );
+  }
+  if (props.state === "place") {
+    return menu.filter(
+      (item) => ["report-place", "place-close-duplicate"].includes(item.name)
+    );
+  }
+  if (props.state === "report-announce") {
+    return menu.filter(
+      (item) => ["report-announce"].includes(item.name)
+    );
+  }
+  return menu;
+});
+</script>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue.d.ts

@@ -0,0 +1,40 @@
+import type { PickerOptionMenuUserProps } from "@/types/components/picker/picker-option-menu/picker-option-menu-user";
+declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "blog-pin": () => any;
+    "blog-unpin": () => any;
+    "blog-edit": () => any;
+    "report-announce": () => any;
+    "profile-edit": () => any;
+    "profile-share": () => any;
+    "profile-follower-delete": () => any;
+    "profile-block": () => any;
+    "blog-delete": () => any;
+    "report-blog": () => any;
+    "report-place": () => any;
+    "report-profile": () => any;
+    "report-review": () => any;
+    "place-close-duplicate": () => any;
+    "review-edit": () => any;
+    "review-delete": () => any;
+    archive: () => any;
+}, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
+    "onBlog-pin"?: (() => any) | undefined;
+    "onBlog-unpin"?: (() => any) | undefined;
+    "onBlog-edit"?: (() => any) | undefined;
+    "onReport-announce"?: (() => any) | undefined;
+    "onProfile-edit"?: (() => any) | undefined;
+    "onProfile-share"?: (() => any) | undefined;
+    "onProfile-follower-delete"?: (() => any) | undefined;
+    "onProfile-block"?: (() => any) | undefined;
+    "onBlog-delete"?: (() => any) | undefined;
+    "onReport-blog"?: (() => any) | undefined;
+    "onReport-place"?: (() => any) | undefined;
+    "onReport-profile"?: (() => any) | undefined;
+    "onReport-review"?: (() => any) | undefined;
+    "onPlace-close-duplicate"?: (() => any) | undefined;
+    "onReview-edit"?: (() => any) | undefined;
+    "onReview-delete"?: (() => any) | undefined;
+    onArchive?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.d.vue.ts

@@ -0,0 +1,13 @@
+import type { PickerOptionMenuProps, PickerOptionMenuItem } from "@/types/components/picker/picker-option-menu/picker-option-menu";
+declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PickerOptionMenuProps> & Readonly<{}>, {
+    variant: ButtonVariant;
+    items: PickerOptionMenuItem[];
+    circle: boolean;
+    size: ButtonSize;
+    horizontal: boolean;
+    disabled: boolean;
+    disabledPadding: boolean;
+    iconSize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.vue

@@ -0,0 +1,54 @@
+<template>
+  <Dropdown v-model="isOpenDrawer">
+    <Button
+      :variant="props.variant"
+      :disabled-padding="props.disabledPadding"
+      :circle="props.circle"
+      :color="props.variant === 'text' ? 'black' : 'default'"
+      :icon-size="props.iconSize"
+      :size="props.size"
+      :prepend-icon="
+  props.horizontal ? 'lucide:ellipsis' : 'lucide:ellipsis-vertical'
+"
+      :disabled="props.disabled"
+    />
+
+    <template #content>
+      <div v-for="(item, i) in props.items" :key="i" class="flex flex-col">
+        <div
+          :class="[
+  'flex gap-[4px] p-[8px] items-center cursor-pointer hover:bg-smoke',
+  i == 0 && 'rounded-t-[8px]',
+  i == props.items.length - 1 && 'rounded-b-[8px]'
+]"
+          @click="onAction(item)"
+        >
+          <Icon :name="item.icon" size="16" />
+          <div class="font-body-large">
+            {{ item.label }}
+          </div>
+        </div>
+        <Divider v-if="i !== props.items.length - 1" height="0" />
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  variant: { type: null, required: false, default: "text" },
+  circle: { type: Boolean, required: false, default: false },
+  horizontal: { type: Boolean, required: false, default: false },
+  size: { type: null, required: false, default: "medium" },
+  iconSize: { type: String, required: false, default: "20" },
+  disabledPadding: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const isOpenDrawer = ref(false);
+const onAction = (item) => {
+  item.action();
+  isOpenDrawer.value = false;
+};
+</script>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.vue.d.ts

@@ -0,0 +1,13 @@
+import type { PickerOptionMenuProps, PickerOptionMenuItem } from "@/types/components/picker/picker-option-menu/picker-option-menu";
+declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PickerOptionMenuProps> & Readonly<{}>, {
+    variant: ButtonVariant;
+    items: PickerOptionMenuItem[];
+    circle: boolean;
+    size: ButtonSize;
+    horizontal: boolean;
+    disabled: boolean;
+    disabledPadding: boolean;
+    iconSize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/profile-cover.d.vue.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/profile-cover.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- <div class="h-[512px] w-full">
+    <div class="relative">
+      <Image :height="512" />
+      <div class="absolute bottom-[24px] right-[24px]" v-if="props.isMyProfile">
+        <PickerImageCoverProfile />
+      </div>
+    </div>
+    <div class="relative w-full p-[24px] pl-[200px]">
+      <div
+        class="absolute left-[24px] top-[-86px] flex justify-center p-[24px]"
+      >
+        <div class="relative">
+          <Avatar :size="128" class="border-[6px] border-white" />
+          <div class="absolute bottom-0 right-0" v-if="props.isMyProfile">
+            <PickerImageProfile>
+              <Button
+                circle
+                size="small"
+                :icon-size="20"
+                prepend-icon="lucide:camera"
+              />
+            </PickerImageProfile>
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-[100px]">
+        <div class="flex flex-col gap-[8px] w-full">
+          <div class="inline-flex flex-wrap items-center gap-[16px]">
+            <div class="font-headline-medium-prominent">
+              {{ props.item?.profile_name || props.item?.id || "-" }}
+            </div>
+            <Icon name="pukaad:verify" size="20" />
+          </div>
+          <div class="flex gap-[24px] text-gray font-body-large">
+            <div
+              v-for="info in infoToShow"
+              :key="info.label"
+              class="flex gap-[4px]"
+            >
+              {{ info.label }}
+              <div class="text-black">{{ info.value }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-[16px] items-center">
+          <template v-if="props.isMyProfile">
+            <Button
+              prepend-icon="lucide:plus"
+              :icon-size="20"
+              color="primary"
+              @click="emit('create-post')"
+            >
+              สร้างโพสต์
+            </Button>
+            <PickerOptionMenuUser state="my-profile" disabled-padding />
+          </template>
+          <template v-else>
+            <Button
+              prepend-icon="lucide:message-circle"
+              :icon-size="20"
+              color="primary"
+              @click="emit('chat')"
+            >
+              แชท
+            </Button>
+            <Button
+              v-if="!props.isMyProfile"
+              prepend-icon="lucide:user-round-plus"
+              :icon-size="20"
+              variant="outline"
+              @click="emit('follow')"
+            >
+              ติดตาม
+            </Button>
+            <PickerOptionMenuUser state="profile" disabled-padding />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div> -->
+</template>
+
+<script setup>
+
+</script>

package/dist/runtime/components/profile-cover.vue.d.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/progress-bar.d.vue.ts

@@ -0,0 +1,10 @@
+import type { ProgressBarProps } from "@/types/components/progress-bar";
+declare const __VLS_export: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {
+    height: number | string;
+    fullWidth: boolean;
+    colorActive: string;
+    colorBackground: string;
+    value: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/progress-bar.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="rounded-full"
+    :style="{
+  backgroundColor: props.colorBackground,
+  height: `${props.height}px`,
+  width: props.fullWidth ? '100%' : `${props.width}px`
+}"
+  >
+    <div
+      class="rounded-full"
+      :style="{
+  backgroundColor: props.colorActive,
+  height: `${props.height}px`,
+  width: `${value}%`
+}"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  colorActive: { type: String, required: false, default: "#FBC02D" },
+  colorBackground: { type: String, required: false, default: "#E0E0E0" },
+  height: { type: [Number, String], required: false, default: 10 },
+  width: { type: [Number, String], required: false },
+  fullWidth: { type: Boolean, required: false, default: false },
+  value: { type: [Number, String], required: false, default: 0 }
+});
+const value = computed(() => {
+  const isValue = typeof props.value === "string" ? parseInt(props.value) : props.value;
+  if (isValue > 100) return 100;
+  return isValue;
+});
+</script>

package/dist/runtime/components/progress-bar.vue.d.ts

@@ -0,0 +1,10 @@
+import type { ProgressBarProps } from "@/types/components/progress-bar";
+declare const __VLS_export: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {
+    height: number | string;
+    fullWidth: boolean;
+    colorActive: string;
+    colorBackground: string;
+    value: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+import type { ReadMoreTextProps } from "@/types/components/read-more-text";
+declare const __VLS_export: import("vue").DefineComponent<ReadMoreTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReadMoreTextProps> & Readonly<{}>, {
+    text: string;
+    maxLine: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,76 @@
+<template>
+ <div>แก้หมด</div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch, nextTick, computed } from "vue";
+const props = defineProps({
+  text: { type: String, required: true, default: "" },
+  maxLine: { type: Number, required: false, default: 3 }
+});
+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;
+  const fullText = props.text || "";
+  displayText.value = fullText;
+  isTruncated.value = false;
+  if (expanded.value) return;
+  if (!fullText.trim()) return;
+  const measure = document.createElement("span");
+  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 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);
+    return;
+  }
+  isTruncated.value = true;
+  let low = 0;
+  let high = fullText.length;
+  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) {
+      best = mid;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  displayText.value = fullText.slice(0, best).trimEnd();
+  root.removeChild(measure);
+}
+function toggle() {
+  expanded.value = !expanded.value;
+  if (!expanded.value) nextTick(computeTruncation);
+}
+onMounted(() => {
+  nextTick(computeTruncation);
+});
+</script>

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

@@ -0,0 +1,7 @@
+import type { ReadMoreTextProps } from "@/types/components/read-more-text";
+declare const __VLS_export: import("vue").DefineComponent<ReadMoreTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ReadMoreTextProps> & Readonly<{}>, {
+    text: string;
+    maxLine: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;