pukaad-ui-lib 1.227.1 → 1.227.3

package/dist/module.json

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

package/dist/module.mjs

@@ -57,13 +57,7 @@ const module$1 = defineNuxtModule({
       },
       format: ["webp"]
     });
-    await installModule("nuxt-google-translate", {
-      defaultLanguage: "th",
-      supportedLanguages: ["en", "th"]
-    });
     await installModule("nuxt-rating");
-    await installModule("@pinia/nuxt");
-    await installModule("pinia-plugin-persistedstate/nuxt");
     await installModule("shadcn-nuxt", {
       prefix: "shad",
       componentDir: resolver.resolve("./runtime/components/ui")

package/dist/runtime/components/avatar.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed } from "vue";
-import { UserIcon } from "lucide-vue-next";
 import { cn } from "@/runtime/plugins/shadcn";
 const props = defineProps({
   size: { type: [Number, String], required: false, default: 40 },

package/dist/runtime/components/display/display-image-place.d.vue.ts

@@ -2,11 +2,13 @@ type __VLS_Props = {
     photos?: string[];
     videos?: string[];
     variant?: "featured" | "album";
+    state?: "personal" | "office" | "business";
     title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;
     variant: "featured" | "album";
+    state: "personal" | "office" | "business";
     photos: string[];
     videos: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/display/display-image-place.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- Featured variant -->
-  <div v-if="variant === 'featured'" class="flex gap-[8px] h-[360px]">
+  <!-- Personal state → Featured layout -->
+  <div v-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
     <div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
       @click="openLightbox('photo', 0)">
       <Image :src="photos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
@@ -11,16 +11,23 @@
     </div>
 
     <div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
+      <!-- photos[2] — top-right slot
+           มีวิดีโอ: overlay ถ้า photos.length > 3 (photos[3+] ถูกซ่อน)
+           ไม่มีวิดีโอ: โชว์สะอาดเสมอ (photos[3] ไปโชว์ที่ slot ล่าง) -->
       <div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
         @click="openLightbox('photo', 2)">
         <Image :src="photos[2]" class="w-full h-full object-cover" width="auto" height="auto" />
-        <div v-if="photos.length > 3"
+        <div v-if="featuredPhoto2Overflow > 0"
           class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
           <Icon name="fa6-solid:image" :size="42" />
-          <span class="font-body-large">รูปภาพ ({{ convertNumber(photos.length - 3) }})</span>
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
         </div>
       </div>
 
+      <!-- bottom-right slot
+           มีวิดีโอ    : videos[0] thumbnail + overlay วิดีโอ
+           ไม่มีวิดีโอ : photos[3] — overlay "รูปภาพ (N)" เมื่อ photos.length > 4
+                         (N = photos.length - 3 นับรวม photos[3] ด้วย) -->
       <div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
         @click="openLightbox('video', 0)">
         <Image :src="videos[0]" class="w-full h-full object-cover" width="auto" height="auto" />
@@ -29,11 +36,20 @@
           <span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
         </div>
       </div>
+      <div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
+        @click="openLightbox('photo', 3)">
+        <Image :src="photos[3]" class="w-full h-full object-cover" width="auto" height="auto" />
+        <div v-if="featuredPhoto3Overflow > 0"
+          class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
+          <Icon name="fa6-solid:image" :size="42" />
+          <span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
+        </div>
+      </div>
     </div>
   </div>
 
-  <!-- Album variant -->
-  <div v-else-if="variant === 'album'" class="grid grid-cols-5 gap-[10px] w-[700px]">
+  <!-- Office / Business state → Album layout -->
+  <div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
     <!-- Row 1: photos[0..3] -->
     <div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
       class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
@@ -81,10 +97,26 @@ const props = defineProps({
   photos: { type: Array, required: false, default: () => [] },
   videos: { type: Array, required: false, default: () => [] },
   variant: { type: String, required: false, default: "featured" },
+  state: { type: String, required: false, default: "personal" },
   title: { type: String, required: false, default: "" }
 });
+const layoutMode = computed(() => {
+  if (props.state === "office" || props.state === "business") return "album";
+  if (props.state === "personal") return "featured";
+  return props.variant;
+});
 const photos = computed(() => props.photos.filter(Boolean));
 const videos = computed(() => props.videos.filter(Boolean));
+const featuredPhoto2Overflow = computed(() => {
+  if (videos.value.length === 0) return 0;
+  if (photos.value.length <= 3) return 0;
+  return photos.value.length - 2;
+});
+const featuredPhoto3Overflow = computed(() => {
+  if (videos.value.length > 0) return 0;
+  if (photos.value.length <= 4) return 0;
+  return photos.value.length - 3;
+});
 const galleryRow1 = computed(() => photos.value.slice(0, 4));
 const galleryRow2 = computed(() => photos.value.slice(4, 8));
 const galleryCountPhoto = computed(

package/dist/runtime/components/display/display-image-place.vue.d.ts

@@ -2,11 +2,13 @@ type __VLS_Props = {
     photos?: string[];
     videos?: string[];
     variant?: "featured" | "album";
+    state?: "personal" | "office" | "business";
     title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;
     variant: "featured" | "album";
+    state: "personal" | "office" | "business";
     photos: string[];
     videos: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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-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

@@ -13,8 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     color: InputSliderColor;
     fullWidth: boolean;
     step: number;
-    max: number;
     min: number;
+    max: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

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

@@ -13,8 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     color: InputSliderColor;
     fullWidth: boolean;
     step: number;
-    max: number;
     min: number;
+    max: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

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

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

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

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -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/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { DotsHorizontalIcon } from "@radix-icons/vue";
 import { cn } from "@/runtime/plugins/shadcn";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +13,7 @@ const props = defineProps({
     :class="cn('flex size-9 items-center justify-center', props.class)"
   >
     <slot>
-      <DotsHorizontalIcon class="size-4" />
+      <Icon name="lucide:ellipsis" class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>

package/dist/runtime/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ChevronRightIcon } from "@radix-icons/vue";
 import { cn } from "@/runtime/plugins/shadcn";
 const props = defineProps({
   class: { type: null, required: false }
@@ -14,7 +13,7 @@ const props = defineProps({
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <ChevronRightIcon />
+      <Icon name="lucide:chevron-right" />
     </slot>
   </li>
 </template>

package/dist/runtime/components/ui/native-select/NativeSelect.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { reactiveOmit, useVModel } from "@vueuse/core";
-import { ChevronDownIcon } from "lucide-vue-next";
 import { cn } from "@/runtime/plugins/shadcn";
 defineOptions({
   inheritAttrs: false
@@ -35,7 +34,8 @@ const delegatedProps = reactiveOmit(props, "class");
     >
       <slot />
     </select>
-    <ChevronDownIcon
+    <Icon
+      name="lucide:chevron-down"
       class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
       aria-hidden="true"
       data-slot="native-select-icon"

package/dist/runtime/components/ui/spinner/Spinner.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Loader2Icon } from "lucide-vue-next";
 import { cn } from "@/runtime/plugins/shadcn";
 const props = defineProps({
   class: { type: null, required: false }
@@ -7,7 +6,8 @@ const props = defineProps({
 </script>
 
 <template>
-  <Loader2Icon
+  <Icon
+    name="lucide:loader-2"
     role="status"
     aria-label="Loading"
     :class="cn('size-4 animate-spin', props.class)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.227.1",
+  "version": "1.227.3",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",
@@ -34,57 +34,41 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@cropper/element-canvas": "^2.0.0",
+    "@nuxt/fonts": "^0.13.0",
     "@nuxt/icon": "^1.10.3",
     "@nuxt/image": "^1.9.0",
-    "@pinia/nuxt": "^0.11.1",
+    "@nuxt/kit": "^4.0.0",
     "@tailwindcss/vite": "4.0.7",
     "@tanstack/vue-table": "^8.21.3",
     "@vee-validate/nuxt": "^4.15.0",
-    "@vee-validate/yup": "^4.15.0",
-    "@vee-validate/zod": "^4.15.1",
-    "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^12.7.0",
-    "changelogen": "^0.5.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cropperjs": "^1.6.2",
     "dayjs": "^1.11.13",
     "embla-carousel-vue": "^8.6.0",
-    "input-otp": "^1.4.2",
     "leaflet": "^1.9.4",
-    "lodash": "^4.17.21",
-    "nuxt": "^4.0.3",
-    "nuxt-google-translate": "^1.2.0",
     "nuxt-rating": "^0.1.6",
-    "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.4.1",
     "quill": "^2.0.3",
-    "quill-delta-to-html": "^0.12.1",
     "reka-ui": "^2.8.2",
     "shadcn-nuxt": "^2.3.3",
-    "shadcn-vue": "^2.3.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",
     "tailwindcss": "4.0.7",
-    "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3",
     "vee-validate": "^4.15.1",
-    "vitest": "^3.0.4",
-    "vue-cropperjs": "^5.0.0",
-    "vue-sfc-transformer": "^0.1.17",
-    "vue-tsc": "^3.1.3",
-    "vue3-recaptcha-v2": "^2.1.0",
-    "zod": "^3.25.76"
+    "vue3-recaptcha-v2": "^2.1.0"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.15.0 || ^4.0.0",
+    "vue": "^3.5.0"
   },
   "devDependencies": {
+    "@cropper/element-canvas": "^2.0.0",
     "@iconify-json/lucide": "^1.2.72",
     "@nuxt/devtools": "^1.7.0",
     "@nuxt/eslint-config": "^0.7.5",
-    "@nuxt/fonts": "^0.13.0",
-    "@nuxt/kit": "^4.0.0",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/schema": "^4.0.0",
     "@nuxt/test-utils": "^3.15.4",
@@ -93,6 +77,21 @@
     "@types/leaflet": "^1.9.21",
     "@types/node": "^24.9.1",
     "@types/vue-cropperjs": "^4.1.6",
-    "@vue/compiler-sfc": "^3.5.24"
+    "@vue/compiler-sfc": "^3.5.24",
+    "changelogen": "^0.5.7",
+    "input-otp": "^1.4.2",
+    "lodash": "^4.17.21",
+    "nuxt": "^4.0.3",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "quill-delta-to-html": "^0.12.1",
+    "shadcn-vue": "^2.3.2",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.9.3",
+    "vitest": "^3.0.4",
+    "vue-cropperjs": "^5.0.0",
+    "vue-sfc-transformer": "^0.1.17",
+    "vue-tsc": "^3.1.3",
+    "zod": "^3.25.76"
   }
-}
+}