pukaad-ui-lib 1.39.0 → 1.41.0

package/dist/runtime/components/loading.vue

@@ -1,21 +1,17 @@
 <template>
   <Transition name="loading-fade">
     <div
-      v-if="isLoading"
-      class="absolute inset-0 opacity-50 z-50 flex items-center justify-center backdrop-blur-2xl"
+      v-if="loading"
+      class="absolute inset-0 bg-white/50 flex items-center justify-center z-50"
     >
-      <div class="flex flex-col items-center gap-3">
-        <div class="loading-spinner"></div>
-        <span v-if="text" class="text-sm text-cloud">{{ text }}</span>
-      </div>
+      <div class="loading-spinner"></div>
     </div>
   </Transition>
 </template>
 
 <script setup>
 defineProps({
-  isLoading: { type: Boolean, required: false, default: false },
-  text: { type: String, required: false, default: "" }
+  loading: { type: Boolean, required: false, default: false }
 });
 </script>
 

package/dist/runtime/components/loading.vue.d.ts

@@ -1,10 +1,8 @@
 export interface LoadingProps {
-    isLoading?: boolean;
-    text?: string;
+    loading?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
-    text: string;
-    isLoading: boolean;
+    loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal title="แชร์" width="396" v-model="isOpen">
+  <Modal title="แชร์" width="396" v-model="isOpen" :loading="true">
     <div class="flex justify-between">
       <div
         v-for="(share, i) of listShares"

package/dist/runtime/components/modal/modal.d.vue.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     description?: string;
     footer?: string;
     disabledCloseBtn?: boolean;
-    isLoading?: boolean;
+    loading?: boolean;
     loadingText?: string;
 }
 type __VLS_Props = ModalProps;
@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    loading: boolean;
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -7,7 +7,7 @@
       @submit="onSubmit"
       @close="onClose"
     >
-      <Loading :is-loading="props.isLoading" :text="props.loadingText" />
+      <Loading :loading="props.loading" :text="props.loadingText" />
       <ShadDialogHeader>
         <slot name="header">
           <ShadDialogTitle>
@@ -38,7 +38,7 @@ const props = defineProps({
   description: { type: String, required: false },
   footer: { type: String, required: false },
   disabledCloseBtn: { type: Boolean, required: false, default: false },
-  isLoading: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false, default: false },
   loadingText: { type: String, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{

package/dist/runtime/components/modal/modal.vue.d.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     description?: string;
     footer?: string;
     disabledCloseBtn?: boolean;
-    isLoading?: boolean;
+    loading?: boolean;
     loadingText?: string;
 }
 type __VLS_Props = ModalProps;
@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    loading: boolean;
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/input-group/InputGroupButton.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
     variant: "default" | "outline" | "ghost" | "link" | "text" | "icon" | null;
-    size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
+    size: "sm" | "icon-sm" | "icon-xs" | "xs" | null;
 }, {}, {}, {}, 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/input-group/InputGroupButton.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
     variant: "default" | "outline" | "ghost" | "link" | "text" | "icon" | null;
-    size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
+    size: "sm" | "icon-sm" | "icon-xs" | "xs" | null;
 }, {}, {}, {}, 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/input-group/index.d.ts

@@ -12,7 +12,7 @@ export declare const inputGroupAddonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
 export declare const inputGroupButtonVariants: (props?: ({
-    size?: "icon-xs" | "sm" | "icon-sm" | "xs" | null | undefined;
+    size?: "sm" | "icon-sm" | "icon-xs" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
 export interface InputGroupButtonProps {

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts

@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts

@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts

@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts

@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/tabs/TabsList.vue

@@ -15,10 +15,12 @@ const delegatedProps = reactiveOmit(props, "class");
   <TabsList
     data-slot="tabs-list"
     v-bind="delegatedProps"
-    :class="cn(
-  'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
-  props.class
-)"
+    :class="
+  cn(
+    'bg-muted text-body-medium dark:text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+    props.class
+  )
+"
   >
     <slot />
   </TabsList>

package/dist/runtime/components/ui/tabs/TabsTrigger.vue

@@ -16,10 +16,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <TabsTrigger
     data-slot="tabs-trigger"
-    :class="cn(
-  'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-  props.class
-)"
+    :class="
+  cn(
+    'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-body-medi dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:text-gray [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+    props.class
+  )
+"
     v-bind="forwardedProps"
   >
     <slot />

package/dist/runtime/composables/useThaiAddress.d.ts

@@ -0,0 +1,45 @@
+export interface Province {
+    id: number;
+    name_th: string;
+    name_en: string;
+    [key: string]: any;
+}
+export interface Amphur {
+    id: number;
+    name_th: string;
+    name_en: string;
+    province_id: number;
+    [key: string]: any;
+}
+export interface Tambon {
+    id: number;
+    name_th: string;
+    name_en: string;
+    amphur_id: number;
+    zipcode_code: number;
+    [key: string]: any;
+}
+export interface Zipcode {
+    code: number;
+    amphur_ids: number[];
+    tambon_ids: number[];
+    [key: string]: any;
+}
+export interface SearchResult {
+    type: 'province' | 'amphur' | 'tambon';
+    id: number;
+    name_th: string;
+    name_en: string;
+    parentId?: number;
+    label: string;
+}
+export declare function useThaiAddress(): {
+    getProvinces: () => Province[];
+    getProvinceById: (id: number) => Province | undefined;
+    getAmphursByProvinceId: (provinceId: number) => Amphur[];
+    getAmphurById: (id: number) => Amphur | undefined;
+    getTambonsByAmphurId: (amphurId: number) => Tambon[];
+    getTambonById: (id: number) => Tambon | undefined;
+    getZipcodeByTambonId: (tambonId: number) => string | undefined;
+    searchAddress: (query: string) => SearchResult[];
+};

package/dist/runtime/composables/useThaiAddress.js

@@ -0,0 +1,81 @@
+import provincesData from "@/runtime/assets/json/address/Province.json";
+import amphursData from "@/runtime/assets/json/address/Amphur.json";
+import tambonsData from "@/runtime/assets/json/address/Tambon.json";
+export function useThaiAddress() {
+  const getProvinces = () => {
+    return provincesData;
+  };
+  const getProvinceById = (id) => {
+    return provincesData.find((p) => p.id === id);
+  };
+  const getAmphursByProvinceId = (provinceId) => {
+    return amphursData.filter((a) => a.province_id === provinceId);
+  };
+  const getAmphurById = (id) => {
+    return amphursData.find((a) => a.id === id);
+  };
+  const getTambonsByAmphurId = (amphurId) => {
+    return tambonsData.filter((t) => t.amphur_id === amphurId);
+  };
+  const getTambonById = (id) => {
+    return tambonsData.find((t) => t.id === id);
+  };
+  const getZipcodeByTambonId = (tambonId) => {
+    const tambon = getTambonById(tambonId);
+    return tambon?.zipcode_code?.toString();
+  };
+  const searchAddress = (query) => {
+    if (!query || query.length < 2) return [];
+    const lowerQuery = query.toLowerCase();
+    const results = [];
+    provincesData.forEach((p) => {
+      if (p.name_th.includes(query) || p.name_en.toLowerCase().includes(lowerQuery)) {
+        results.push({
+          type: "province",
+          id: p.id,
+          name_th: p.name_th,
+          name_en: p.name_en,
+          label: `\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14${p.name_th} (${p.name_en})`
+        });
+      }
+    });
+    amphursData.forEach((a) => {
+      if (a.name_th.includes(query) || a.name_en.toLowerCase().includes(lowerQuery)) {
+        const province = getProvinceById(a.province_id);
+        results.push({
+          type: "amphur",
+          id: a.id,
+          name_th: a.name_th,
+          name_en: a.name_en,
+          parentId: a.province_id,
+          label: `\u0E2D\u0E33\u0E40\u0E20\u0E2D${a.name_th} (${a.name_en}) - ${province?.name_th}`
+        });
+      }
+    });
+    tambonsData.forEach((t) => {
+      if (t.name_th.includes(query) || t.name_en.toLowerCase().includes(lowerQuery)) {
+        const amphur = getAmphurById(t.amphur_id);
+        const province = amphur ? getProvinceById(amphur.province_id) : null;
+        results.push({
+          type: "tambon",
+          id: t.id,
+          name_th: t.name_th,
+          name_en: t.name_en,
+          parentId: t.amphur_id,
+          label: `\u0E15\u0E33\u0E1A\u0E25${t.name_th} (${t.name_en}) - ${amphur?.name_th} - ${province?.name_th}`
+        });
+      }
+    });
+    return results;
+  };
+  return {
+    getProvinces,
+    getProvinceById,
+    getAmphursByProvinceId,
+    getAmphurById,
+    getTambonsByAmphurId,
+    getTambonById,
+    getZipcodeByTambonId,
+    searchAddress
+  };
+}

package/package.json

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