pukaad-ui-lib 1.341.0 → 1.342.0

package/dist/module.json

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

package/dist/runtime/assets/css/core.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-info-foreground:var(--info-foreground);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-navbar:11;--z-index-dropdown:12;--z-index-overlay:13;--z-index-loading:14;--z-index-drawer:15;--z-index-modal:16;--z-index-toast:100;--z-index-loading-page:101}:root{--radius:0.625rem;--red:#b71c1c;--error:var(--red);--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--info-foreground:var(--primary);--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}
+@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-info-foreground:var(--info-foreground);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-navbar:11;--z-index-dropdown:12;--z-index-overlay:13;--z-index-loading:14;--z-index-drawer:15;--z-index-modal:16;--z-index-toast:100;--z-index-loading-page:101}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--info-foreground:var(--primary);--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}

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

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

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

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

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

@@ -55,8 +55,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -55,8 +55,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    rows: number;
     limit: number;
+    rows: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    rows: number;
     limit: number;
+    rows: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/modal/modal-province-domain.d.vue.ts

@@ -1,3 +1,4 @@
+import { type Province } from "#pukaad-ui/runtime/composables/useThaiAddress";
 import type { ModalProviceDomainProps } from "#pukaad-ui/types/components/modal/modal-province-domain";
 type __VLS_Props = ModalProviceDomainProps;
 type __VLS_ModelProps = {
@@ -7,10 +8,10 @@ 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;
 } & {
-    confirmed: (value: string) => any;
+    confirmed: (province: Province) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onConfirmed?: ((value: string) => any) | undefined;
+    onConfirmed?: ((province: Province) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-province-domain.vue

@@ -1,23 +1,25 @@
 <template>
   <Modal
     title="เลือกจังหวัดที่คุณต้องการใช้งาน"
-    :column-gap="24"
+    description="เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ
+      เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง"
+    class="w-[425px]"
     v-model="modelValue"
   >
-    <div class="flex flex-col gap-[16px] w-full">
-      <div class="flex flex-col font-body-large text-center">
-        <div>เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ</div>
-        <div>เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง</div>
-      </div>
-      <InputAutocomplete
-        :items="provinces"
-        full-width
-        placeholder="เลือกจังหวัด"
-        v-model="selected"
-      />
-    </div>
+    <InputCombobox
+      placeholder="เลือกจังหวัด"
+      label="จังหวัด"
+      :options="provinceOptions"
+      v-model="selected"
+      placeholder-search="ค้นหาจังหวัด"
+    />
     <template #footer>
-      <Button full-width color="primary" :disabled="!selected" @click="onNext">
+      <Button
+        class="w-full"
+        color="primary"
+        :disabled="!selected"
+        @click="onNext"
+      >
         {{ props.confirmedText }}
       </Button>
     </template>
@@ -25,31 +27,38 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed, onMounted } from "vue";
+import {
+  useThaiAddress
+} from "#pukaad-ui/runtime/composables/useThaiAddress";
 const emit = defineEmits(["confirmed"]);
 const props = defineProps({
   confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" }
 });
+const { loadProvinces } = useThaiAddress();
 const selected = ref("");
-const provinces = ref([
-  {
-    label: "\u0E01\u0E23\u0E38\u0E07\u0E40\u0E17\u0E1E\u0E21\u0E2B\u0E32\u0E19\u0E04\u0E23",
-    value: "https://www.someting_eie.com"
-  },
-  {
-    label: "\u0E1A\u0E38\u0E23\u0E35\u0E23\u0E31\u0E21\u0E22\u0E4C",
-    value: "https://www.someting_eie.com"
-  },
-  {
-    label: "\u0E01\u0E23\u0E30\u0E1A\u0E35\u0E48",
-    value: "\u0E01\u0E23\u0E30\u0E1A\u0E35\u0E48"
-  }
-]);
+const provincesData = ref([]);
+const activeProvinces = computed(
+  () => provincesData.value.filter((province) => province.is_active)
+);
+const provinceOptions = computed(
+  () => activeProvinces.value.map((province) => ({
+    label: province.name_th,
+    value: String(province.id)
+  }))
+);
+onMounted(async () => {
+  provincesData.value = await loadProvinces();
+});
 const modelValue = defineModel({ type: Boolean, ...{
   default: false
 } });
 const onNext = () => {
-  emit("confirmed", selected.value);
+  const province = activeProvinces.value.find(
+    (p) => String(p.id) === selected.value
+  );
+  if (!province) return;
+  emit("confirmed", province);
   modelValue.value = false;
 };
 </script>

package/dist/runtime/components/modal/modal-province-domain.vue.d.ts

@@ -1,3 +1,4 @@
+import { type Province } from "#pukaad-ui/runtime/composables/useThaiAddress";
 import type { ModalProviceDomainProps } from "#pukaad-ui/types/components/modal/modal-province-domain";
 type __VLS_Props = ModalProviceDomainProps;
 type __VLS_ModelProps = {
@@ -7,10 +8,10 @@ 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;
 } & {
-    confirmed: (value: string) => any;
+    confirmed: (province: Province) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onConfirmed?: ((value: string) => any) | undefined;
+    onConfirmed?: ((province: Province) => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,4 @@
+import type { Province } from "./useThaiAddress.js";
+export declare function useProvinceRedirect(): {
+    goToProvinceDomain: (province: Province, path?: string) => any;
+};

package/dist/runtime/composables/useProvinceRedirect.js

@@ -0,0 +1,8 @@
+import { navigateTo } from "#imports";
+export function useProvinceRedirect() {
+  const goToProvinceDomain = (province, path = "") => {
+    if (!province?.domain) return;
+    return navigateTo(`//${province.domain}${path}`, { external: true });
+  };
+  return { goToProvinceDomain };
+}

package/package.json

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