pukaad-ui-lib 1.40.0 → 1.41.0

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

@@ -5,6 +5,7 @@
         ref="inputTextFieldRef"
         v-model="displayText"
         :name="props.name"
+        :label="props.label"
         :rules="computedRules"
         :required="props.required"
         :disabled-border="props.disabledBorder"
@@ -46,40 +47,42 @@
       </InputTextField>
     </ShadPopoverAnchor>
     <ShadPopoverContent @openAutoFocus.prevent>
-      <ShadCommand>
-        <ShadCommandInput />
-        <ShadCommandList>
-          <ShadCommandGroup v-if="options && options.length > 0">
-            <slot name="options">
-              <ShadCommandItem
-                v-for="option in options"
-                :key="option.value"
-                :value="option.value"
-                :disabled="isOptionDisabled(option.value)"
-                :class="[
+      <slot name="popover-content" :close="() => popoverOpen = false">
+        <ShadCommand>
+          <ShadCommandInput />
+          <ShadCommandList>
+            <ShadCommandGroup v-if="options && options.length > 0">
+              <slot name="options">
+                <ShadCommandItem
+                  v-for="option in options"
+                  :key="option.value"
+                  :value="option.value"
+                  :disabled="isOptionDisabled(option.value)"
+                  :class="[
   isOptionDisabled(option.value) && 'cursor-not-allowed'
 ]"
-                @click="() => handleSelect(option.value)"
-              >
-                <ShadCheckbox
-                  v-if="props.multiple"
-                  :model-value="isSelected(option.value)"
-                  :disabled="isOptionDisabled(option.value)"
-                  class="mr-2 pointer-events-none"
-                />
+                  @click="() => handleSelect(option.value)"
+                >
+                  <ShadCheckbox
+                    v-if="props.multiple"
+                    :model-value="isSelected(option.value)"
+                    :disabled="isOptionDisabled(option.value)"
+                    class="mr-2 pointer-events-none"
+                  />
 
-                {{ option.label }}
-                <Icon
-                  v-if="!props.multiple && isSelected(option.value)"
-                  name="lucide:check"
-                  class="ml-auto h-4 w-4"
-                />
-              </ShadCommandItem>
-            </slot>
-          </ShadCommandGroup>
-          <ShadCommandEmpty :force-show="!options || options.length === 0" />
-        </ShadCommandList>
-      </ShadCommand>
+                  {{ option.label }}
+                  <Icon
+                    v-if="!props.multiple && isSelected(option.value)"
+                    name="lucide:check"
+                    class="ml-auto h-4 w-4"
+                  />
+                </ShadCommandItem>
+              </slot>
+            </ShadCommandGroup>
+            <ShadCommandEmpty :force-show="!options || options.length === 0" />
+          </ShadCommandList>
+        </ShadCommand>
+      </slot>
     </ShadPopoverContent>
   </ShadPopover>
 </template>
@@ -98,6 +101,7 @@ const props = defineProps({
   options: { type: Array, required: false },
   multiple: { type: Boolean, required: false, default: false }
 });
+const emits = defineEmits(["clear"]);
 const modelValue = defineModel({ type: [String, Array], ...{
   default: () => ""
 } });
@@ -105,6 +109,10 @@ const popoverOpen = ref(false);
 const inputTextFieldRef = ref();
 const displayText = ref("");
 const updateDisplayText = () => {
+  if (!props.options || props.options.length === 0) {
+    displayText.value = props.multiple ? modelValue.value.join(", ") : modelValue.value || "";
+    return;
+  }
   if (props.multiple) {
     const selectedValues = modelValue.value;
     if (!selectedValues || selectedValues.length === 0) {
@@ -170,6 +178,7 @@ const handleIconClick = () => {
       modelValue.value = "";
     }
     displayText.value = "";
+    emits("clear");
   }
   popoverOpen.value = true;
 };
@@ -209,8 +218,12 @@ const handleSelect = (value) => {
 const setErrors = (errMsg) => {
   inputTextFieldRef.value?.setErrors(errMsg);
 };
+const validate = async () => {
+  return await inputTextFieldRef.value?.validate?.();
+};
 defineExpose({
   setErrors,
+  validate,
   inputTextFieldRef
 });
 </script>

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

@@ -19,18 +19,26 @@ type __VLS_ModelProps = {
     modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_25: {}, __VLS_67: {};
+declare var __VLS_25: {}, __VLS_44: {
+    close: () => boolean;
+}, __VLS_69: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_25) => any;
 } & {
-    options?: (props: typeof __VLS_67) => any;
+    'popover-content'?: (props: typeof __VLS_44) => any;
+} & {
+    options?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
+    validate: () => Promise<any>;
     inputTextFieldRef: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | string[]) => any;
+} & {
+    clear: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
     name: string;

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: 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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: 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, {},
     color: InputSliderColor;
     fullWidth: boolean;
     label: string;
+    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, {},
     color: InputSliderColor;
     fullWidth: boolean;
     label: string;
+    step: number;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -33,6 +33,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
+    validate: () => Promise<any>;
+    fieldRef: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 } & {

package/dist/runtime/components/input/input-text-field.vue

@@ -34,7 +34,8 @@
 
       <ShadInputGroup
         :class="[
-  props.disabledBorder && 'border-0 ring-0 focus-within:border-0 focus-within:ring-0'
+  'bg-white',
+  props.disabledBorder && 'border-0 ring-0 focus-within:border-0 focus-within:ring-0 '
 ]"
       >
         <ShadFormControl>
@@ -129,7 +130,12 @@ const defaultRules = (v) => {
 const setErrors = (errMsg) => {
   fieldRef.value?.setErrors(errMsg);
 };
+const validate = async () => {
+  return await fieldRef.value?.validate?.();
+};
 defineExpose({
-  setErrors
+  setErrors,
+  validate,
+  fieldRef
 });
 </script>

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -33,6 +33,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
+    validate: () => Promise<any>;
+    fieldRef: import("vue").Ref<any, any>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 } & {

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.40.0",
+  "version": "1.41.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",