pukaad-ui-lib 1.197.5 → 1.197.6

package/dist/module.json

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

package/dist/runtime/components/comment.vue

@@ -108,9 +108,7 @@
           >
             <div class="font-body-large-prominent">
               การตอบกลับ
-              {{
-                $convert.convertNumber(getOtherUserRepliesCount(cmt))
-              }}
+              {{ $convert.convertNumber(getOtherUserRepliesCount(cmt)) }}
               รายการ
             </div>
             <Icon
@@ -155,9 +153,7 @@
         </div>
       </div>
       <div
-        v-if="
-  openedComments.includes(cmt.id) || hasCurrentUserReplies(cmt)
-"
+        v-if="openedComments.includes(cmt.id) || hasCurrentUserReplies(cmt)"
         class="pl-[38px] flex flex-col gap-[16px] w-full"
       >
         <div
@@ -504,7 +500,7 @@ const onViewProfileComment = (path_name) => {
     router.push(`/${path_name}`);
   }
 };
-const getOtherUserRepliesCount = (cmt) => cmt.reply.filter((r) => r.user.id !== currentUser.id).length;
+const getOtherUserRepliesCount = (cmt) => (cmt.reply || []).filter((r) => r.user?.id !== currentUser?.id).length;
 const hasOtherUserReplies = (cmt) => getOtherUserRepliesCount(cmt) > 0;
-const hasCurrentUserReplies = (cmt) => cmt.reply.some((r) => r.user.id === currentUser.id);
+const hasCurrentUserReplies = (cmt) => (cmt.reply || []).some((r) => r.user?.id === currentUser?.id);
 </script>

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

@@ -48,8 +48,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     limit: number;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -48,8 +48,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     limit: number;
+    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     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;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     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;
-    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-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-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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;
-    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, {},
     onClose?: (() => 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

@@ -28,8 +28,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

@@ -28,8 +28,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/ui/dropdown-menu/DropdownMenuContent.vue

@@ -21,6 +21,7 @@ const props = defineProps({
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
   arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioGroup.d.vue.ts

@@ -4,9 +4,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DropdownMenuRadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (payload: string) => any;
+    "update:modelValue": (payload: import("reka-ui").AcceptableValue) => any;
 }, string, import("vue").PublicProps, Readonly<DropdownMenuRadioGroupProps> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -4,7 +4,7 @@ import {
   useForwardPropsEmits
 } from "reka-ui";
 const props = defineProps({
-  modelValue: { type: String, required: false },
+  modelValue: { type: null, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false }
 });

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue.d.ts

@@ -4,9 +4,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DropdownMenuRadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (payload: string) => any;
+    "update:modelValue": (payload: import("reka-ui").AcceptableValue) => any;
 }, string, import("vue").PublicProps, Readonly<DropdownMenuRadioGroupProps> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -7,7 +7,7 @@ import {
 } from "reka-ui";
 import { cn } from "@/runtime/plugins/shadcn";
 const props = defineProps({
-  value: { type: String, required: true },
+  value: { type: null, required: true },
   disabled: { type: Boolean, required: false },
   textValue: { type: String, required: false },
   asChild: { type: Boolean, required: false },

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -16,6 +16,7 @@ const props = defineProps({
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
   arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

package/dist/runtime/components/ui/popover/PopoverContent.vue

@@ -17,6 +17,7 @@ const props = defineProps({
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
   arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

package/dist/runtime/components/ui/select/SelectContent.vue

@@ -25,6 +25,7 @@ const props = defineProps({
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
   arrowPadding: { type: Number, required: false },
+  hideShiftedArrow: { type: Boolean, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
   positionStrategy: { type: String, required: false },

package/package.json

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

package/dist/runtime/components/drawer/drawer-history.d.vue.ts

@@ -1,20 +0,0 @@
-export interface Profile {
-    profileImageUrl: string;
-    profileName: string;
-}
-export interface History {
-    profile: Profile;
-    action: string;
-    page: string;
-    createdAt: string;
-}
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/drawer/drawer-history.vue

@@ -1,76 +0,0 @@
-<template>
-  <Drawer class="w-[748px]" title="ประวัติ" v-model="isDrawerOpen">
-    <div class="flex flex-col gap-[24px]">
-      <InputTextField
-        name="search"
-        placeholder="ค้นหาประวัติ"
-        icon-prepend="lucide:search"
-        v-model="search"
-      />
-      <div>
-        <div
-          v-for="(item, index) in histories"
-          :key="index"
-          class="p-[8px] flex gap-[8px] border-b-[1px] border-mercury items-center"
-        >
-          <Avatar :size="30" :src="item.profile.profileImageUrl" />
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex gap-[4px]">
-              <div class="font-body-medium-prominent">
-                {{ item.profile.profileName }}
-              </div>
-              <div class="font-body-medium text-primary">
-                {{ item.action }}
-              </div>
-              <div class="font-body-medium">
-                {{ item.page }}
-              </div>
-            </div>
-            <div class="font-body-small text-gray">
-              ดำเนินการเมื่อ {{ convertDateTime(item.createdAt) }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Drawer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useConvert } from "@/runtime/composables/useConvert";
-const search = ref("");
-const isDrawerOpen = defineModel({ type: Boolean, ...{
-  default: false
-} });
-const { convertDateTime } = useConvert();
-const histories = ref([
-  {
-    profile: {
-      profileImageUrl: "https://github.com/shadcn.png",
-      profileName: "Janejira Somboon"
-    },
-    action: "\u0E44\u0E14\u0E49\u0E17\u0E33\u0E01\u0E32\u0E23\u0E40\u0E1E\u0E34\u0E48\u0E21",
-    page: "\u0E19\u0E42\u0E22\u0E1A\u0E32\u0E22\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E1A\u0E38\u0E04\u0E04\u0E25 (PDPA)",
-    createdAt: "2024-01-01 12:00"
-  },
-  {
-    profile: {
-      profileImageUrl: "https://github.com/shadcn.png",
-      profileName: "Janejira Somboon"
-    },
-    action: "\u0E44\u0E14\u0E49\u0E17\u0E33\u0E01\u0E32\u0E23\u0E41\u0E01\u0E49\u0E44\u0E02",
-    page: "\u0E19\u0E42\u0E22\u0E1A\u0E32\u0E22\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E1A\u0E38\u0E04\u0E04\u0E25 (PDPA)",
-    createdAt: "2024-01-01 12:00"
-  },
-  {
-    profile: {
-      profileImageUrl: "https://github.com/shadcn.png",
-      profileName: "Janejira Somboon"
-    },
-    action: "\u0E44\u0E14\u0E49\u0E17\u0E33\u0E01\u0E32\u0E23\u0E25\u0E1A",
-    page: "\u0E19\u0E42\u0E22\u0E1A\u0E32\u0E22\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E1A\u0E38\u0E04\u0E04\u0E25 (PDPA)",
-    createdAt: "2024-01-01 12:00"
-  }
-]);
-</script>

package/dist/runtime/components/drawer/drawer-history.vue.d.ts

@@ -1,20 +0,0 @@
-export interface Profile {
-    profileImageUrl: string;
-    profileName: string;
-}
-export interface History {
-    profile: Profile;
-    action: string;
-    page: string;
-    createdAt: string;
-}
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/drawer/drawer-notification.d.vue.ts

@@ -1,22 +0,0 @@
-import type { DrawerNotificationProps } from "@/types/components/drawer/drawer-notification";
-type __VLS_Props = DrawerNotificationProps;
-declare const isOpen: import("vue").ModelRef<boolean, string, boolean, boolean>;
-type __VLS_ModelProps = {
-    modelValue?: typeof isOpen['value'];
-};
-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;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    items: {
-        general?: import("@/types/components/drawer/drawer-notification").general[];
-        order?: import("@/types/components/drawer/drawer-notification").order[];
-        promotion?: import("@/types/components/drawer/drawer-notification").promotion[];
-        activity?: import("@/types/components/drawer/drawer-notification").activity[];
-        system?: import("@/types/components/drawer/drawer-notification").system[];
-    };
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/drawer/drawer-notification.vue

@@ -1,340 +0,0 @@
-<template>
-  <Drawer title="การแจ้งเตือน" v-model="isOpen" :width="707">
-    <template #header>
-      <div class="flex justify-between p-[16px]">
-        <div class="font-title-medium-prominent">การแจ้งเตือน</div>
-        <div class="flex gap-[16px]">
-          <Dropdown>
-            <template #default="{ isOpen }">
-              <Button color="black" variant="text" disabled-padding>
-                <Icon :size="24" name="lucide:settings" />
-              </Button>
-            </template>
-            <template #content>
-              <div class="w-[252px] font-body-large">
-                <div
-                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
-                >
-                  <Icon :size="16" name="lucide:check" />
-                  <div class="font-body-medium">
-                    ทำเครื่องหมายว่าอ่านแล้วทั้งหมด
-                  </div>
-                </div>
-                <Divider />
-                <NuxtLink
-                  to="/setting/notification"
-                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
-                  @click="closeDrawer"
-                >
-                  <Icon :size="20" name="lucide:settings" />
-                  <div class="font-body-medium">ตั้งค่าการแจ้งเตือน</div>
-                </NuxtLink>
-              </div>
-            </template>
-          </Dropdown>
-          <Button
-            color="black"
-            variant="text"
-            disabled-padding
-            @click="closeDrawer"
-          >
-            <Icon :name="'lucide:x'" :size="24" />
-          </Button>
-        </div>
-      </div>
-    </template>
-    <div class="flex flex-col gap-[16px]">
-      <Card full-width>
-        <Tab
-          :items="items"
-          disabled-content
-          tabButtonSize="small"
-          :tabButtonGap="16"
-          v-model="tab"
-        >
-          <template
-            v-for="(item, i) in items"
-            :key="i"
-            #[`tab-${item.value}-label-text`]
-          >
-            <div class="flex gap-[8px] items-center">
-              <Icon :name="item.icon" :size="20" />
-              <div class="relative">
-                {{ item.label }}
-                <!-- <Avatar
-                  v-if="item.is_noti"
-                  class="absolute top-0 -right-[8px]"
-                  :size="8"
-                  color="error"
-                /> -->
-              </div>
-            </div>
-          </template>
-        </Tab>
-      </Card>
-      <Tab v-model="tab" :items="items" :tabButtonGap="16" disabled-header>
-        <template #tab-content-general>
-          <div class="flex flex-col gap-[4px] w-full">
-            <div v-for="(item, index) in props.items.general" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <!-- <Avatar :size="40" :src="item.avatar" /> -->
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex items-center gap-[8px] ml-auto">
-                    <Image
-                      v-if="item.image"
-                      :width="40"
-                      :height="40"
-                      :src="item.image"
-                      class="rounded-[4px]"
-                    />
-                    <div
-                      v-else-if="item.video_url"
-                      class="relative w-[40px] h-[40px] rounded-[4px] bg-black flex justify-center items-center overflow-hidden"
-                    >
-                      <video
-                        class="w-[40px] h-[40px] object-cover rounded-[4px]"
-                        :src="item.video_url"
-                        preload="metadata"
-                      />
-                      <div
-                        class="absolute bg-black/50 w-[24px] h-[24px] rounded-full flex justify-center items-center"
-                      >
-                        <Icon
-                          name="material-symbols:play-arrow"
-                          class="text-white"
-                        />
-                      </div>
-                    </div>
-                    <div class="w-[20px]">
-                      <Icon
-                        v-if="item.is_unread"
-                        class="text-primary"
-                        :size="20"
-                        name="fad:armrecording"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-order>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.order" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Image
-                      v-if="item.image_url"
-                      :width="40"
-                      :height="40"
-                      :src="item.image_url"
-                      class="rounded-[4px]"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <p class="font-body-large">
-                      <template
-                        v-for="(text, index) in item.content"
-                        :key="index"
-                      >
-                        <span
-                          :class="
-  text.is_active ? 'text-primary' : 'text-black'
-"
-                        >
-                          {{ text.text }}
-                        </span>
-                      </template>
-                    </p>
-
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex items-center w-[20px] gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-promotion>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.promotion" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Image
-                      v-if="item.image_url"
-                      :width="40"
-                      :height="40"
-                      :src="item.image_url"
-                      class="rounded-[4px]"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-activity>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.activity" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Image
-                      v-if="item.image_url"
-                      :width="40"
-                      :height="40"
-                      :src="item.image_url"
-                      class="rounded-[4px]"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-system>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.system" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Icon
-                      class="text-gray"
-                      name="pukaad:memsg-square"
-                      :width="40"
-                      :height="40"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-      </Tab>
-    </div>
-  </Drawer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-const props = defineProps({
-  items: { type: Object, required: false, default: () => ({
-    general: [],
-    order: [],
-    promotion: [],
-    activity: [],
-    system: []
-  }) }
-});
-const isOpen = defineModel({ type: Boolean, default: false });
-const tab = ref(null);
-const items = [
-  {
-    label: "\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B",
-    icon: "lucide:layers",
-    is_noti: false,
-    value: "general"
-  },
-  {
-    label: "\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E0B\u0E37\u0E49\u0E2D",
-    icon: "lucide:shopping-cart",
-    is_noti: true,
-    value: "order"
-  },
-  {
-    label: "\u0E42\u0E1B\u0E23\u0E42\u0E21\u0E0A\u0E31\u0E48\u0E19",
-    icon: "lucide:megaphone",
-    is_noti: true,
-    value: "promotion"
-  },
-  {
-    label: "\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21",
-    icon: "lucide:gift",
-    is_noti: true,
-    value: "activity"
-  },
-  {
-    label: "\u0E23\u0E30\u0E1A\u0E1A",
-    icon: "lucide:network",
-    is_noti: true,
-    value: "system"
-  }
-];
-const closeDrawer = () => {
-  isOpen.value = false;
-};
-</script>

package/dist/runtime/components/drawer/drawer-notification.vue.d.ts

@@ -1,22 +0,0 @@
-import type { DrawerNotificationProps } from "@/types/components/drawer/drawer-notification";
-type __VLS_Props = DrawerNotificationProps;
-declare const isOpen: import("vue").ModelRef<boolean, string, boolean, boolean>;
-type __VLS_ModelProps = {
-    modelValue?: typeof isOpen['value'];
-};
-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;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    items: {
-        general?: import("@/types/components/drawer/drawer-notification").general[];
-        order?: import("@/types/components/drawer/drawer-notification").order[];
-        promotion?: import("@/types/components/drawer/drawer-notification").promotion[];
-        activity?: import("@/types/components/drawer/drawer-notification").activity[];
-        system?: import("@/types/components/drawer/drawer-notification").system[];
-    };
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;