pukaad-ui-lib 1.230.0 → 1.232.0

package/dist/module.json

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

package/dist/runtime/assets/json/social-icon.json

@@ -40,7 +40,7 @@
     "example": "https://threads.net/@username"
   },
   {
-    "icon": "pukaad-social:Tiktok",
+    "icon": "pukaad-social:TikTok",
     "name": "TikTok",
     "example": "https://tiktok.com/@username"
   },
@@ -60,7 +60,7 @@
     "example": "https://example.com"
   },
   {
-    "icon": "pukaad-social:Whatsapp",
+    "icon": "pukaad-social:WhatsApp",
     "name": "WhatsApp",
     "example": "https://wa.me/1234567890"
   },

package/dist/runtime/components/button.vue

@@ -1,21 +1,13 @@
 <template>
-  <ShadButton
-    :class="[
+  <ShadButton :class="[
   'font-body-medium relative',
-  props.variant === 'text' && '!p-0',
+  props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]"
-    :variant="props.variant"
-    :color="props.color"
-    :type="props.type"
-    :disabled="props.loading || props.disabled"
-  >
+]" :variant="props.variant" :color="props.color" :type="props.type" :disabled="props.loading || props.disabled">
     <span class="inline-grid place-items-center">
-      <span
-        class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }"
-      >
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
         <slot />
       </span>
       <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />

package/dist/runtime/components/card/card-place-detail.vue

@@ -69,7 +69,7 @@ const businessHours = computed(
 );
 const socialLinks = computed(
   () => (props.item.contact_channels ?? []).filter((ch) => ch.value).map((ch) => ({
-    name: ch.channel_type?.toLowerCase() ?? "link",
+    name: ch.channel_type ?? "link",
     link: ch.value
   }))
 );

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

@@ -21,17 +21,7 @@ type __VLS_Props = {
     id?: string;
     state?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    comment: () => any;
-    like: (liked: boolean) => any;
-    bookmark: (bookmarked: boolean) => any;
-    share: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onComment?: (() => any) | undefined;
-    onLike?: ((liked: boolean) => any) | undefined;
-    onBookmark?: ((bookmarked: boolean) => any) | undefined;
-    onShare?: (() => any) | undefined;
-}>, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
     disabledPadding: boolean;

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

@@ -35,7 +35,6 @@ import { computed, reactive, ref, watch } from "vue";
 import { useApi } from "../../composables/useApi";
 const api = useApi();
 const isOpenModalShare = ref(false);
-const emit = defineEmits(["like", "bookmark", "comment", "share"]);
 const props = defineProps({
   itemCount: { type: Object, required: false, default: () => ({
     liked: 0,
@@ -119,7 +118,6 @@ async function toggleLike() {
   const previousLiked = reaction.liked;
   reaction.liked = !previousLiked;
   counts.liked += reaction.liked ? 1 : -1;
-  emit("like", !!reaction.liked);
   if (props.state === "blog" && props.id) {
     try {
       await api(`/blogs/${props.id}/like`, {
@@ -135,14 +133,11 @@ async function toggleLike() {
 function toggleBookmark() {
   reaction.bookmarked = !reaction.bookmarked;
   counts.bookmarked += reaction.bookmarked ? 1 : -1;
-  emit("bookmark", !!reaction.bookmarked);
 }
 function toggleComment() {
   console.log("comment  ");
-  emit("comment");
 }
 function toggleShared() {
   isOpenModalShare.value = !isOpenModalShare.value;
-  emit("share");
 }
 </script>

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

@@ -21,17 +21,7 @@ type __VLS_Props = {
     id?: string;
     state?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    comment: () => any;
-    like: (liked: boolean) => any;
-    bookmark: (bookmarked: boolean) => any;
-    share: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onComment?: (() => any) | undefined;
-    onLike?: ((liked: boolean) => any) | undefined;
-    onBookmark?: ((bookmarked: boolean) => any) | undefined;
-    onShare?: (() => any) | undefined;
-}>, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
     disabledPadding: boolean;

package/dist/runtime/components/card/card-user-blog.d.vue.ts

@@ -24,14 +24,8 @@ type __VLS_Props = {
     isMyProfile?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    comment: () => any;
-    like: (liked: boolean) => any;
-    share: () => any;
     "blog-edit": (item: CardUserBlogProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onComment?: (() => any) | undefined;
-    onLike?: ((liked: boolean) => any) | undefined;
-    onShare?: (() => any) | undefined;
     "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
 }>, {
     isMyProfile: boolean;

package/dist/runtime/components/card/card-user-blog.vue

@@ -62,6 +62,7 @@
     <CardReaction
       disabled-divider-top
       disabled-divider-bottom
+      :id="props.item.id"
       :item-count="{
   liked: props.item.like_count,
   commented: props.item.comment_count,
@@ -70,9 +71,7 @@
       :itemActive="{
   liked: props.item.liked
 }"
-      @like="emit('like', $event)"
-      @comment="emit('comment')"
-      @share="emit('share')"
+      state="blog"
     />
   </div>
 </template>
@@ -87,7 +86,7 @@ const props = defineProps({
   isMyProfile: { type: Boolean, required: false, default: false }
 });
 const router = useRouter();
-const emit = defineEmits(["blog-edit", "like", "comment", "share"]);
+const emit = defineEmits(["blog-edit"]);
 const isPinned = ref(props.item.ispinned);
 watch(
   () => props.item.ispinned,

package/dist/runtime/components/card/card-user-blog.vue.d.ts

@@ -24,14 +24,8 @@ type __VLS_Props = {
     isMyProfile?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    comment: () => any;
-    like: (liked: boolean) => any;
-    share: () => any;
     "blog-edit": (item: CardUserBlogProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onComment?: (() => any) | undefined;
-    onLike?: ((liked: boolean) => any) | undefined;
-    onShare?: (() => any) | undefined;
     "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
 }>, {
     isMyProfile: boolean;

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -1,37 +1,13 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
+  <Drawer class="w-[748px]" :title="drawerTitle" @close="onClose" disabled-auto-close @submit="onSubmit"
+    v-model="isOpen">
     <div class="flex flex-col gap-[16px]">
-      <InputTextField
-        name="title"
-        label="หัวข้อ"
-        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-        showCounter
-        :limit="180"
-        v-model="form.title"
-        disabled-border
-        required
-      />
+      <InputTextField name="title" label="หัวข้อ" placeholder="ตั้งชื่อบทความให้น่าสนใจ" showCounter :limit="180"
+        v-model="form.title" disabled-border required />
 
-      <InputContent
-        placeholder="อยากเล่าอะไร"
-        :height="288"
-        v-model="form.content"
-      />
+      <InputContent placeholder="อยากเล่าอะไร" :height="288" v-model="form.content" />
 
-      <InputTag
-        v-model="form.tags"
-        name="tags"
-        label="แท็ก"
-        placeholder="เพิ่มแท็ก"
-        :limit="5"
-      />
+      <InputTag v-model="form.tags" name="tags" label="แท็ก" placeholder="เพิ่มแท็ก" :limit="5" />
 
       <!-- <InputCheckbox
         name="disableComment"
@@ -41,12 +17,8 @@
 
       <div class="flex flex-col gap-[8px]">
         <div class="text-gray font-body-large">ภาพหน้าปก</div>
-        <InputFile
-          :limit="1"
-          name="coverImage"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.coverImage"
-        />
+        <InputFile :limit="1" name="coverImage" accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.coverImage" />
         <div class="flex flex-col text-gray font-body-small">
           <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
           <div>ขนาดไม่เกิน 30 mb</div>
@@ -58,11 +30,7 @@
       <div class="flex justify-end gap-[16px] items-center">
         <Button variant="outline" @click="onClose">ยกเลิก</Button>
         <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="!meta.valid || isLoading"
-        >
+        <Button type="submit" color="primary" :disabled="!meta.valid || isLoading">
           <span v-if="isLoading">กำลังบันทึก...</span>
           <span v-else>เผยแพร่</span>
         </Button>

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-link.vue

@@ -114,7 +114,7 @@ const listSocial = [
   },
   {
     name: "WhatsApp",
-    icon: "Whatsapp",
+    icon: "WhatsApp",
     example: "https://wa.me/1234567890",
     regex: /(?:https?:\/\/)?(?:wa\.me|api\.whatsapp\.com)\/.+/i
   },

package/dist/runtime/components/modal/modal-phone-OTP.vue

@@ -1,10 +1,5 @@
 <template>
-  <Modal
-    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
-    @close="emit('close')"
-    @submit="onVerifyOTP"
-    v-model="isOpen"
-  >
+  <Modal title="ป้อนรหัสรักษาความปลอดภัย (OTP)" @close="emit('close')" @submit="onVerifyOTP" v-model="isOpen">
     <div class="space-y-[16px]">
       <div class="text-center font-body-large">
         <div>
@@ -15,26 +10,23 @@
       </div>
 
       <div class="flex justify-center">
-        <InputOTP
-          name="otp"
-          columnGap="auto"
-          v-model="valueOTP"
-          :error="otpError"
-        />
+        <InputOTP name="otp" columnGap="auto" v-model="valueOTP" :error="otpError" />
       </div>
 
       <div class="text-center font-body-large">
-        กรุณารอ <span class="text-primary">04.59</span> นาที
-        จะส่งรหัสยืนยันอีกครั้ง
+        <template v-if="countdown !== '00:00'">
+          กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
+          จะส่งรหัสยืนยันอีกครั้ง
+        </template>
+        <template v-else>
+          ไม่ได้รับรหัส?
+          <Button variant="link" color="primary" @click="onResend">ส่งรหัสอีกครั้ง</Button>
+        </template>
       </div>
     </div>
+
     <template #footer="{ meta }">
-      <Button
-        type="submit"
-        color="primary"
-        :disabled="!meta.valid"
-        class="w-full"
-      >
+      <Button type="submit" color="primary" :disabled="!meta.valid" class="w-full">
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -43,6 +35,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import { useCountDown } from "../../composables/useCountDown";
 const emit = defineEmits(["complete", "close"]);
 const props = defineProps({
   phoneLabel: { type: String, required: false, default: "" },
@@ -55,13 +48,21 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   placeholder: { type: String, required: false }
 });
-const isOpen = defineModel({ type: Boolean, ...{
-  default: false
-} });
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
 const textRef = ref("");
 const valueOTP = ref("");
 const otpError = ref("");
-const loadingModal = ref(false);
+const { CountdownTime } = useCountDown();
+const expireAt = ref("");
+const countdown = CountdownTime(expireAt);
+const resetCountdown = () => {
+  expireAt.value = new Date(Date.now() + 5 * 60 * 1e3).toISOString();
+};
+const onResend = () => {
+  valueOTP.value = "";
+  otpError.value = "";
+  resetCountdown();
+};
 const onVerifyOTP = () => {
   if (valueOTP.value === "123456") {
     otpError.value = "";
@@ -75,5 +76,6 @@ watch(isOpen, (value) => {
   textRef.value = "";
   valueOTP.value = "";
   otpError.value = "";
+  if (value) resetCountdown();
 });
 </script>

package/dist/runtime/components/modal/modal-profile-edit.vue

@@ -1,156 +1,69 @@
 <template>
-  <Modal
-    width="468"
-    title="โปรไฟล์"
-    title-position="center"
-    @close="onClose"
-    v-model="modelValue"
-  >
+  <Modal class="w-[425px]" title="โปรไฟล์" @close="onClose" v-model="modelValue">
     <template #header>
-      <div v-if="step !== 'menu'">
+      <div v-if="step !== 'menu'" class="flex flex-col gap-[8px]">
         <div class="flex gap-[8px] items-center w-full">
           <Button variant="text" @click="step = 'menu'">
             <Icon name="lucide:chevron-left" :size="24" />
           </Button>
           <div class="font-title-medium-prominent">
             <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
-            <div v-if="step === 'premium-id'">พรีเมียม ID</div>
             <div v-if="step === 'category'">หมวดหมู่</div>
           </div>
         </div>
+        <div v-if="step === 'profile-name'" class="font-body-large">
+          หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
+        <div v-if="step === 'category'" class="font-body-large">
+          เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์
+        </div>
+      </div>
+      <div v-if="step === 'menu'" class="flex flex-col gap-[8px]">
+        <div class="font-title-medium-prominent">โปรไฟล์</div>
+        <div class="font-body-large">
+          จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ และการเข้าถึงโปรไฟล์
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
       </div>
     </template>
 
     <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
-      <div class="font-body-large">
-        จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ
-        และการเข้าถึงโปรไฟล์
-        <span class="text-primary cursor-pointer"> เรียนรู้เพิ่มเติม</span>
-      </div>
-      <div class="flex flex-col border border-mercury rounded-[8px]">
-        <div
-          v-for="(menu, i) in listMenu"
-          :key="menu.label"
-          @click="handleMenuClick(menu)"
-          :class="[
-  'flex p-[16px] justify-between items-center',
-  isMenuClickable(menu) ? 'cursor-pointer hover:bg-smoke' : '',
-  i < listMenu.length - 1 ? 'border-b border-mercury' : isMenuClickable(menu) ? 'hover:rounded-b-[8px]' : ''
-]"
-        >
-          <div class="flex flex-col min-w-[378px]">
-            <div class="font-body-large-prominent">{{ menu.label }}</div>
-            <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+      <div class="flex flex-col gap-[4px]">
+        <template v-for="(menu, i) in listMenu" :key="menu.label">
+          <div @click="handleMenuClick(menu)" :class="[
+  'flex justify-between items-center',
+  isMenuClickable(menu) ? 'cursor-pointer ' : ''
+]">
+            <div class="flex flex-col w-full">
+              <div class="font-body-large-prominent">{{ menu.label }}</div>
+              <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+            </div>
+            <Icon v-if="isMenuClickable(menu)" name="lucide:chevron-right" :size="24" class="text-black" />
           </div>
-          <Button
-            v-if="isMenuClickable(menu)"
-            variant="text"
-            size="small"
-            color="black"
-            icon-size="18"
-            prepend-icon="lucide:chevron-right"
-          />
-        </div>
+          <Divider v-if="i < listMenu.length - 1" />
+        </template>
       </div>
     </div>
 
     <div v-else class="flex flex-col gap-[16px]">
       <template v-if="step === 'profile-name'">
-        <div class="flex flex-col gap-[16px]">
-          <div class="font-body-large">
-            หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
-            <Button
-              variant="text"
-              color="primary"
-              disabled-padding
-              @click="goToHelpCenter"
-            >
-              เรียนรู้เพิ่มเติม
-            </Button>
-          </div>
-        </div>
-        <Form
-          v-slot="{ meta }"
-          class="flex flex-col gap-[16px]"
-          @submit="saveProfileName"
-        >
-          <InputTextField
-            name="profileName"
-            label="ชื่อโปรไฟล์"
-            :placeholder="listMenu[0]?.value || '-'"
-            full-width
-            validate-on-input
-            :rules="ruleProfileName"
-            v-model="profileName"
-          />
-          <Button
-            type="submit"
-            color="primary"
-            full-width
-            :disabled="!meta.valid || isLoading"
-          >
+        <Form v-slot="{ meta }" class="flex flex-col gap-[16px]" @submit="saveProfileName">
+          <InputTextField name="profileName" label="ชื่อโปรไฟล์" :placeholder="listMenu[0]?.value || '-'" full-width
+            validate-on-input :rules="ruleProfileName" v-model="profileName" />
+          <Button type="submit" color="primary" full-width :disabled="!meta.valid || isLoading">
             <span v-if="isLoading">กำลังบันทึก...</span>
             <span v-else>บันทึก</span>
           </Button>
         </Form>
       </template>
 
-      <template v-if="step === 'premium-id'">
-        <div class="flex flex-col gap-[16px]">
-          <div class="font-body-large">
-            ดูรายละเอียดเกี่ยวกับการใช้พรีเมียม ID และซื้อพรีเมียม ID ได้ที่นี่
 
-            <Button
-              variant="text"
-              color="primary"
-              disabled-padding
-              @click="goToDetailPremiumID"
-            >
-              ดูรายละเอียดเกี่ยวกับพรีเมียม ID
-            </Button>
-          </div>
-          <div class="flex gap-[40px]">
-            <div class="font-body-large w-[140px]">พรีเมียม ID</div>
-            <div class="font-body-large text-gray">ไม่มี</div>
-          </div>
-          <div class="flex gap-[40px]">
-            <div class="font-body-large w-[140px]">วันชำระเงินครั้งต่อไป</div>
-            <div class="font-body-large text-gray">ไม่มี</div>
-          </div>
-          <Divider :height="0" />
-          <div class="font-body-large-prominent">
-            ค่าบริการรายปีของพรีเมียม ID
-          </div>
-          <div class="flex gap-[40px]">
-            <div class="font-body-large w-[140px]">ราคา (ไม่รวมภาษี)</div>
-            <div class="font-body-large text-gray">฿444</div>
-          </div>
-          <Divider :height="0" />
-          <InputTextField
-            v-model="namePremiumID"
-            label="ซื้อพรีเมียม ID"
-            show-counter
-            :limit="18"
-            prepend-icon="lucide:at-sign"
-          />
-          <Button
-            color="primary"
-            :disabled="!namePremiumID || namePremiumID.length > 18"
-            >ซื้อพรีเมียม ID</Button
-          >
-        </div>
-      </template>
 
       <template v-if="step === 'category'">
         <div class="flex flex-col gap-[16px]">
-          <div class="font-body-large">เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์</div>
-          <InputAutocomplete
-            v-model="profileCategory"
-            :options="profileCategoryItems"
-            name="profileCategory"
-            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง"
-            label="หมวดหมู่"
-          />
+          <InputAutocomplete v-model="profileCategory" :options="profileCategoryItems" name="profileCategory"
+            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง" label="หมวดหมู่" />
           <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
         </div>
       </template>
@@ -179,10 +92,6 @@ const modelValue = defineModel({ type: Boolean, ...{
 } });
 const step = ref("menu");
 const profileName = ref();
-const premiumId = ref();
-const category = ref();
-const namePremiumID = ref();
-const isOpenDropdown = ref(false);
 const profileCategory = ref();
 const profileCategoryItems = ref([]);
 const isLoading = ref(false);
@@ -277,9 +186,6 @@ const saveProfileName = async (values, { setErrors }) => {
 const goToHelpCenter = () => {
   console.log("go to help center");
 };
-const goToDetailPremiumID = () => {
-  console.log("go to detail premium id");
-};
 const getProfile = () => {
   const commonMenus = [
     {
@@ -299,15 +205,6 @@ const getProfile = () => {
       }
     }
   ];
-  const businessMenus = [
-    {
-      label: "\u0E1E\u0E23\u0E35\u0E40\u0E21\u0E35\u0E22\u0E21 ID",
-      value: props.profileDetail?.premiumId || "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14",
-      action: () => {
-        step.value = "premium-id";
-      }
-    }
-  ];
   const profileMenus = [
     {
       label: "\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48",
@@ -317,15 +214,10 @@ const getProfile = () => {
       }
     }
   ];
-  if (props.state === "business") {
-    listMenu.value = [...commonMenus, ...businessMenus, ...profileMenus];
-  } else {
-    listMenu.value = [...commonMenus, ...profileMenus];
-  }
+  listMenu.value = [...commonMenus, ...profileMenus];
 };
 const reset = () => {
   profileName.value = "";
-  premiumId.value = "";
 };
 const onClose = () => {
   reset();

package/dist/runtime/components/modal/modal-share.vue

@@ -1,25 +1,21 @@
 <template>
-  <Modal title="แชร์" width="396" v-model="isOpen" :loading="true">
-    <div class="flex justify-between">
-      <div
-        v-for="(share, i) of listShares"
-        :key="i"
-        @click="share.action()"
-        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
-      >
-        <Icon :name="share.icon" size="40" />
-        <div class="font-body-large text-gray">
-          {{ share.label }}
+  <Modal title="แชร์" class="w-[426px]" v-model="isOpen" :loading="false">
+    <div class="flex flex-col gap-[16px]">
+      <Divider />
+      <div class="flex justify-between">
+        <div v-for="(share, i) of listShares" :key="i" @click="share.action()"
+          class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]">
+          <Icon :name="share.icon" size="40" />
+          <div class="font-body-large text-gray">
+            {{ share.label }}
+          </div>
+        </div>
+        <div class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]" @click="onCopyLink">
+          <div class="w-[40px] h-[40px] rounded-full bg-dark text-white flex items-center justify-center">
+            <Icon name="fa6-solid:link" size="20" />
+          </div>
+          <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
         </div>
-      </div>
-      <div
-        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
-        @click="onCopyLink"
-      >
-        <ShadAvatar size="40">
-          <Icon name="fa6-solid:link" size="40" />
-        </ShadAvatar>
-        <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
       </div>
     </div>
   </Modal>

package/dist/runtime/components/ui/button/index.js

@@ -8,7 +8,7 @@ export const buttonVariants = cva(
         default: "shadow-sm",
         outline: "shadow-sm",
         ghost: "",
-        link: "underline-offset-4 hover:underline",
+        link: "underline-offset-4 hover:underline p-0 h-auto",
         text: "",
         icon: "has-[>svg]:px-0"
       },
@@ -129,6 +129,27 @@ export const buttonVariants = cva(
         variant: "text",
         color: "destructive",
         class: "text-destructive hover:opacity-80"
+      },
+      // link variant - inline link style, primary blue by default, no padding
+      {
+        variant: "link",
+        color: "default",
+        class: "text-foreground hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "primary",
+        class: "text-primary hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "secondary",
+        class: "text-secondary hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "destructive",
+        class: "text-destructive hover:opacity-80"
       }
     ],
     defaultVariants: {

package/package.json

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