pukaad-ui-lib 1.84.0 → 1.86.0

package/dist/module.json

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

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

@@ -2,9 +2,7 @@ interface Item {
     title: string;
     image?: string;
     description?: string;
-    author: {
-        profile_name: string;
-    };
+    name: string;
 }
 type __VLS_Props = {
     items: Item[];

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

@@ -1,37 +1,30 @@
 <template>
-  <Card variant="outline" width="380">
-    <div class="w-auto max-h-[626px] flex flex-col gap-[8px]">
-      <div class="flex">
-        <div class="text-surface font-title-medium-prominent">
-          เรื่องอื่นๆ ที่เกี่ยวข้อง
-        </div>
-      </div>
-      <div v-if="props.items.length > 0">
+  <Card title="เรื่องอื่นๆ ที่เกี่ยวข้อง" class="w-[380px]" variant="outline">
+    <div class="min-h-[440px]">
+      <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
         <div v-for="(item, index) in props.items" :key="index">
-          <div v-if="item.image" class="flex gap-[16px] py-[8px] items-center">
-            <div>
-              <Image
-                width="100"
-                height="100"
-                :src="item.image"
-                class="rounded-[4px]"
-              />
-            </div>
+          <div v-if="item.image" class="flex gap-[8px]">
+            <Image
+              width="100"
+              height="100"
+              :src="item.image"
+              class="rounded-[4px]"
+            />
             <div class="flex flex-col gap-[4px]">
-              <div class="line-clamp-3 font-body-large">
+              <div class="line-clamp-3 font-body-large-prominent">
                 {{ item.title }}
               </div>
               <div class="text-primary font-body-small cursor-pointer">
-                {{ item.author.profile_name }}
+                {{ item.name }}
               </div>
             </div>
           </div>
-          <div v-else class="flex flex-col py-[8px] w-[348px] gap-[4px]">
-            <div class="font-body-large line-clamp-2">
+          <div v-else class="flex flex-col gap-[4px]">
+            <div class="font-body-large-prominent line-clamp-2">
               {{ item.title }}
             </div>
             <div class="text-primary font-body-small cursor-pointer">
-              {{ item.author.profile_name }}
+              {{ item.name }}
             </div>
             <div class="text-gray font-body-medium line-clamp-1">
               {{ item.description }}
@@ -41,10 +34,10 @@
       </div>
       <div
         v-else
-        class="w-[348px] flex flex-col gap-[10px] items-center justify-center"
+        class="flex flex-col gap-[8px] items-center justify-center h-[440px]"
       >
-        <Icon name="pukaad:page-not-found" size="60" class="text-primary" />
-        <div class="font-body-large">ไม่พบสถานที่</div>
+        <Icon name="pukaad:page-not-found" size="60" />
+        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
       </div>
     </div>
   </Card>

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

@@ -2,9 +2,7 @@ interface Item {
     title: string;
     image?: string;
     description?: string;
-    author: {
-        profile_name: string;
-    };
+    name: string;
 }
 type __VLS_Props = {
     items: Item[];

package/dist/runtime/components/card/card-recommend-place.d.vue.ts

@@ -10,10 +10,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "item-click": (...args: any[]) => void;
-    "view-all": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onItem-click"?: ((...args: any[]) => any) | undefined;
-    "onView-all"?: ((...args: any[]) => any) | undefined;
 }>, {
     items: Item[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,52 +1,47 @@
 <template>
-  <Card column-gap="8" variant="outline" width="380">
-    <template #header>
+  <Card title="ที่ไหนน่าสนใจ" class="w-[380px]" variant="outline">
+    <template v-if="props.items.length > 0" #header>
       <div class="flex justify-between items-center">
         <div class="font-title-medium-prominent">ที่ไหนน่าสนใจ</div>
-        <Button
-          color="primary"
-          variant="text"
-          disabled-padding
-          size="tiny"
-          append-icon="lucide:chevron-right"
-          :icon-size="16"
-          @click="emit('view-all')"
-        >
-          ดูทั้งหมด
+        <Button color="primary" variant="text" @click="onViewAll">
+          <div class="flex items-center gap-[2px] font-body-small">
+            ดูทั้งหมด
+            <Icon name="lucide:chevron-right" size="16" />
+          </div>
         </Button>
       </div>
     </template>
-    <div v-if="!props.items || props.items.length === 0">
+
+    <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
       <div
-        class="flex flex-col items-center justify-center h-[392px] gap-[10px]"
+        v-for="item in props.items"
+        :key="item.id"
+        class="flex items-center gap-[16px] cursor-pointer"
+        @click="handleClickCard(item)"
       >
-        <Icon name="pukaad:page-not-found" size="60" />
-        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+        <Image
+          :src="item.image"
+          width="100"
+          height="56"
+          class="rounded-[4px]"
+        />
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-large w-[232px] truncate">
+            {{ item.title }}
+          </div>
+          <div class="flex items-center gap-[4px] text-gray font-body-small">
+            <InputRating v-model="item.rating" readonly :rating-size="10" />
+            {{ $format.number(item.review_count) }}
+          </div>
+        </div>
       </div>
     </div>
     <div
       v-else
-      v-for="item in props.items"
-      :key="item.id"
-      class="flex items-center gap-[16px] cursor-pointer py-[8px]"
-      @click="handleClickCard(item)"
+      class="flex flex-col gap-[8px] items-center justify-center h-[334px]"
     >
-      <Image
-        :src="item.image"
-        alt="image"
-        width="100"
-        height="56"
-        class="rounded-[4px]"
-      />
-      <div class="flex flex-col gap-[4px]">
-        <div class="font-body-large max-w-[232px] truncate">
-          {{ item.title }}
-        </div>
-        <div class="flex gap-[8px] text-gray font-body-medium">
-          <InputRating v-model="item.rating" readonly :rating-size="14" />
-          {{ item.review_count }} พัน
-        </div>
-      </div>
+      <Icon name="pukaad:page-not-found" size="60" />
+      <div class="font-body-large text-gray">ไม่พบสถานที่</div>
     </div>
   </Card>
 </template>
@@ -55,8 +50,11 @@
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] }
 });
-const emit = defineEmits(["item-click", "view-all"]);
+const emit = defineEmits(["item-click"]);
 const handleClickCard = (item) => {
   emit("item-click", item);
 };
+const onViewAll = () => {
+  console.log("\u0E14\u0E39\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
+};
 </script>

package/dist/runtime/components/card/card-recommend-place.vue.d.ts

@@ -10,10 +10,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "item-click": (...args: any[]) => void;
-    "view-all": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onItem-click"?: ((...args: any[]) => any) | undefined;
-    "onView-all"?: ((...args: any[]) => any) | undefined;
 }>, {
     items: Item[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/{card-recommend-publisher.d.vue.ts → card-recommend-profile.d.vue.ts}

@@ -1,22 +1,18 @@
 interface Item {
     id: number;
-    profile_name: string;
-    profile_verified: boolean;
-    profile_posts: number;
-    profile_followers: number;
-    profile_image: {
-        image_url: string;
-    };
+    name: string;
+    verified: boolean;
+    post_count: number;
+    follower_count: number;
+    image: string;
 }
 type __VLS_Props = {
     items?: Item[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "item-click": (...args: any[]) => void;
-    "view-all": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onItem-click"?: ((...args: any[]) => any) | undefined;
-    "onView-all"?: ((...args: any[]) => any) | undefined;
 }>, {
     items: Item[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-recommend-profile.vue

@@ -0,0 +1,61 @@
+<template>
+  <Card title="ติดตามใครดี" variant="outline" class="w-[380px]">
+    <template v-if="props.items.length > 0" #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ติดตามใครดี</div>
+        <Button color="primary" variant="text" @click="onViewAll">
+          <div class="flex items-center gap-[2px] font-body-small">
+            ดูทั้งหมด<Icon name="lucide:chevron-right" size="16" />
+          </div>
+        </Button>
+      </div>
+    </template>
+    <div v-if="props.items.length > 0" class="flex flex-col gap-[16px]">
+      <div
+        v-for="item in props.items"
+        :key="item.id"
+        class="flex items-center gap-[16px] cursor-pointer"
+        @click="handleClickCard(item)"
+      >
+        <Avatar :src="item.image" alt="image" size="40" />
+        <div class="flex flex-col gap-[4px]">
+          <div class="flex items-center gap-[4px]">
+            <div class="font-body-large max-w-[272px] truncate">
+              {{ item.name }}
+            </div>
+            <Icon
+              v-if="item.verified === true"
+              name="pukaad-verify"
+              :size="13"
+            />
+          </div>
+          <div class="text-gray font-body-small">
+            กำลังเผยแพร่ {{ $format.number(item.post_count) }} • ผู้ติดตาม
+            {{ $format.number(item.follower_count) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div
+        class="flex flex-col items-center justify-center h-[310px] gap-[10px]"
+      >
+        <Icon name="pukaad:page-not-found" size="60" />
+        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["item-click"]);
+const handleClickCard = (item) => {
+  emit("item-click", item);
+};
+const onViewAll = () => {
+  console.log("onViewAll");
+};
+</script>

package/dist/runtime/components/card/{card-recommend-publisher.vue.d.ts → card-recommend-profile.vue.d.ts}

@@ -1,22 +1,18 @@
 interface Item {
     id: number;
-    profile_name: string;
-    profile_verified: boolean;
-    profile_posts: number;
-    profile_followers: number;
-    profile_image: {
-        image_url: string;
-    };
+    name: string;
+    verified: boolean;
+    post_count: number;
+    follower_count: number;
+    image: string;
 }
 type __VLS_Props = {
     items?: Item[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "item-click": (...args: any[]) => void;
-    "view-all": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onItem-click"?: ((...args: any[]) => any) | undefined;
-    "onView-all"?: ((...args: any[]) => any) | undefined;
 }>, {
     items: Item[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/image/image.vue

@@ -7,6 +7,8 @@
     :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`,
+  minWidth: props.width != 'auto' ? `${props.width}px` : void 0,
+  minHeight: props.height != 'auto' ? `${props.height}px` : void 0,
   objectFit: props.fit
 }"
     loading="lazy"
@@ -16,7 +18,9 @@
       v-if="isLoaded || src"
       :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
-  height: props.height == 'auto' ? '100%' : `${props.height}px`
+  height: props.height == 'auto' ? '100%' : `${props.height}px`,
+  minWidth: props.width != 'auto' ? `${props.width}px` : void 0,
+  minHeight: props.height != 'auto' ? `${props.height}px` : void 0
 }"
     >
       <img
@@ -36,11 +40,11 @@
       :class="['flex justify-center items-center bg-fade', props.class]"
       :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
-  height: props.height == 'auto' ? '100%' : `${props.height}px`
+  height: props.height == 'auto' ? '100%' : `${props.height}px`,
+  minWidth: props.width != 'auto' ? `${props.width}px` : void 0,
+  minHeight: props.height != 'auto' ? `${props.height}px` : void 0
 }"
     ></div>
-
-  
   </NuxtImg>
 </template>
 

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

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

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

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

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

@@ -156,5 +156,5 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.quill-wrapper{border-bottom:1px solid #e8e8e8}.quill-wrapper :deep(.ql-toolbar.ql-snow){background-color:#f5f5f5;border:none;border-radius:8px}.quill-wrapper :deep(.ql-container.ql-snow){border:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;overflow:hidden}.quill-wrapper :deep(.ql-editor){font-family:Sarabun-Regular;font-size:16px;margin-top:8px;min-height:var(--height)!important;padding:4px 12px}.quill-wrapper :deep(.ql-editor.ql-blank:before){color:#c4c4c4;content:attr(data-placeholder);font-size:16px;font-style:normal}.quill-wrapper.drag-not-allowed :deep(.ql-editor){background-color:#fef2f2;border:2px dashed #ef4444;cursor:not-allowed}
+.quill-wrapper{border-bottom:1px solid #e8e8e8}.quill-wrapper :deep(.ql-toolbar.ql-snow){background-color:#f5f5f5;border:none;border-radius:8px}.quill-wrapper :deep(.ql-container.ql-snow){border:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;overflow:hidden}.quill-wrapper :deep(.ql-editor){font-family:Sarabun-Regular;font-size:16px;margin-top:8px;max-height:var(--height)!important;min-height:var(--height)!important;overflow-y:auto;padding:4px 12px}.quill-wrapper :deep(.ql-editor.ql-blank:before){color:#c4c4c4;content:attr(data-placeholder);font-size:16px;font-style:normal}.quill-wrapper.drag-not-allowed :deep(.ql-editor){background-color:#fef2f2;border:2px dashed #ef4444;cursor:not-allowed}
 </style>

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     limit: number;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     limit: number;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

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

package/dist/runtime/components/card/card-recommend-publisher.vue

@@ -1,63 +0,0 @@
-<template>
-  <Card gap="8" variant="outline">
-    <template #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ติดตามใครดี</div>
-        <Button
-          color="primary"
-          variant="text"
-          disabled-padding
-          size="tiny"
-          append-icon="lucide:chevron-right"
-          :icon-size="16"
-          @click="emit('view-all')"
-        >
-          ดูทั้งหมด
-        </Button>
-      </div>
-    </template>
-    <div v-if="!items || items.length === 0">
-      <div
-        class="flex flex-col items-center justify-center h-[392px] gap-[10px]"
-      >
-        <Icon name="pukaad:page-not-found" size="60" />
-        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-      </div>
-    </div>
-    <div
-      v-else
-      v-for="item in props.items"
-      :key="item.id"
-      class="flex py-[8px] gap-[16px] items-center cursor-pointer"
-      @click="handleClickCard(item)"
-    >
-      <!-- <Avatar :src="item.profile_image.image_url" alt="image" size="40" /> -->
-      <div class="flex flex-col gap-[4px]">
-        <div class="flex items-center gap-[4px]">
-          <div class="font-body-large max-w-[268px] truncate">
-            {{ item.profile_name }}
-          </div>
-          <Icon
-            v-if="item.profile_verified === true"
-            name="pukaad-verify"
-            size="20"
-          />
-        </div>
-        <div class="text-gray font-body-medium">
-          กำลังเผยแพร่ {{ item.profile_posts }} • ผู้ติดตาม
-          {{ item.profile_followers }}
-        </div>
-      </div>
-    </div>
-  </Card>
-</template>
-
-<script setup>
-const props = defineProps({
-  items: { type: Array, required: false, default: () => [] }
-});
-const emit = defineEmits(["item-click", "view-all"]);
-const handleClickCard = (item) => {
-  emit("item-click", item);
-};
-</script>