pukaad-ui-lib 1.141.0 → 1.143.0

package/dist/module.json

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

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

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     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

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     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-textarea.d.vue.ts

@@ -45,11 +45,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
+    resize: "none" | "both" | "horizontal" | "vertical";
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     readonly: boolean;
-    resize: "none" | "both" | "horizontal" | "vertical";
     rows: number;
     heightScroll: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -45,11 +45,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
+    resize: "none" | "both" | "horizontal" | "vertical";
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     readonly: boolean;
-    resize: "none" | "both" | "horizontal" | "vertical";
     rows: number;
     heightScroll: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-profile-edit.d.vue.ts

@@ -1,5 +1,7 @@
+import type { ModalProfileEditDetail } from "@/types/components/modal/modal-profile-edit";
 interface Props {
     state?: "profile" | "business";
+    profileDetail?: ModalProfileEditDetail;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
@@ -12,6 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     state: "profile" | "business";
+    profileDetail: ModalProfileEditDetail;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-profile-edit.vue

@@ -87,9 +87,10 @@
             type="submit"
             color="primary"
             full-width
-            :disabled="!meta.valid"
+            :disabled="!meta.valid || isLoading"
           >
-            บันทึก
+            <span v-if="isLoading">กำลังบันทึก...</span>
+            <span v-else>บันทึก</span>
           </Button>
         </Form>
       </template>
@@ -159,8 +160,18 @@
 
 <script setup>
 import { ref, watch, onMounted } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
+const { $toast } = useNuxtApp();
+const api = useApi();
 const props = defineProps({
-  state: { type: String, required: false, default: "profile" }
+  state: { type: String, required: false, default: "profile" },
+  profileDetail: { type: Object, required: false, default: () => ({
+    profileName: "-",
+    basicId: "-",
+    premiumId: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14",
+    category: "-"
+  }) }
 });
 const modelValue = defineModel({ type: Boolean, ...{
   default: false
@@ -173,6 +184,7 @@ const namePremiumID = ref();
 const isOpenDropdown = ref(false);
 const profileCategory = ref();
 const profileCategoryItems = ref([]);
+const isLoading = ref(false);
 const isEmoji = (v) => {
   const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
   return emojiRegex.test(v);
@@ -229,9 +241,32 @@ const handleMenuClick = (menu) => {
     menu.action();
   }
 };
-const saveProfileName = () => {
-  console.log(profileName.value);
-  step.value = "menu";
+const saveProfileName = async () => {
+  if (!profileName.value) return;
+  isLoading.value = true;
+  try {
+    const res = await api("/profiles/me", {
+      method: "PUT",
+      body: {
+        profile_name: profileName.value
+      }
+    });
+    if (res.code === "SUCCESS_OK") {
+      $toast.success(res.message || "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
+      const profileItem = listMenu.value.find((m) => m.label === "\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C");
+      if (profileItem && profileName.value) {
+        profileItem.value = profileName.value;
+      }
+      step.value = "menu";
+    } else {
+      throw new Error(res.message || "\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E14\u0E49");
+    }
+  } catch (error) {
+    console.error("Update profile error:", error);
+    $toast.error(error.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C");
+  } finally {
+    isLoading.value = false;
+  }
 };
 const goToHelpCenter = () => {
   console.log("go to help center");
@@ -240,21 +275,20 @@ const goToDetailPremiumID = () => {
   console.log("go to detail premium id");
 };
 const getProfile = () => {
-  const fakeProfileName = "testProfile";
-  const fakeBasicID = "@100006047146577";
-  const fakePremiumID = "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14";
-  const fakeCategory = "testCategory";
   const commonMenus = [
     {
       label: "\u0E0A\u0E37\u0E48\u0E2D\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C",
-      value: fakeProfileName,
+      value: props.profileDetail?.profileName || "-",
       action: () => {
         step.value = "profile-name";
+        if (props.profileDetail?.profileName && props.profileDetail.profileName !== "-") {
+          profileName.value = props.profileDetail.profileName;
+        }
       }
     },
     {
       label: "\u0E40\u0E1A\u0E2A\u0E34\u0E04 ID",
-      value: fakeBasicID,
+      value: props.profileDetail?.basicId || "-",
       action: () => {
       }
     }
@@ -262,7 +296,7 @@ const getProfile = () => {
   const businessMenus = [
     {
       label: "\u0E1E\u0E23\u0E35\u0E40\u0E21\u0E35\u0E22\u0E21 ID",
-      value: fakePremiumID,
+      value: props.profileDetail?.premiumId || "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14",
       action: () => {
         step.value = "premium-id";
       }
@@ -271,7 +305,7 @@ const getProfile = () => {
   const profileMenus = [
     {
       label: "\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48",
-      value: fakeCategory,
+      value: props.profileDetail?.category || "-",
       action: () => {
         step.value = "category";
       }
@@ -297,7 +331,11 @@ watch(step, (state) => {
     reset();
   }
 });
-onMounted(() => {
-  getProfile();
-});
+watch(
+  () => props.profileDetail,
+  () => {
+    getProfile();
+  },
+  { deep: true, immediate: true }
+);
 </script>

package/dist/runtime/components/modal/modal-profile-edit.vue.d.ts

@@ -1,5 +1,7 @@
+import type { ModalProfileEditDetail } from "@/types/components/modal/modal-profile-edit";
 interface Props {
     state?: "profile" | "business";
+    profileDetail?: ModalProfileEditDetail;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
@@ -12,6 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     state: "profile" | "business";
+    profileDetail: ModalProfileEditDetail;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue

@@ -12,7 +12,10 @@
 
   <ModalShare v-model="isOpenModalShare" />
   <ModalReport state v-model="isOpenModalReport" />
-  <ModalProfileEdit v-model="isOpenModalProfileEdit" />
+  <ModalProfileEdit
+    v-model="isOpenModalProfileEdit"
+    :profile-detail="props.profileDetail"
+  />
 </template>
 
 <script setup>
@@ -20,6 +23,7 @@ import { computed, ref } from "vue";
 const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-announce", "report-review", "place-close-duplicate", "review-edit", "review-delete", "archive"]);
 const props = defineProps({
   state: { type: String, required: false },
+  profileDetail: { type: Object, required: false },
   items: { type: Array, required: false },
   variant: { type: null, required: false },
   circle: { type: Boolean, required: false },

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

@@ -3,21 +3,21 @@ export declare class Convert {
      * Convert number to Thai format
      * @example convertNumber(1500000) => "1.5 ล้าน"
      */
-    convertNumber(num: number): string;
+    convertNumber: (num: number) => string;
     /**
      * Convert date to Thai format
      * @example convertDate("2024-01-01") => "1 ม.ค. 2567"
      */
-    convertDate(date: string | Date | null | undefined, format?: string): string;
+    convertDate: (date: string | Date | null | undefined, format?: string) => string;
     /**
      * Convert date time to Thai format
      * @example convertDateTime("2024-01-01 12:00") => "1 ม.ค. 2567 12:00"
      */
-    convertDateTime(date: string | Date | null | undefined, format?: string): string;
+    convertDateTime: (date: string | Date | null | undefined, format?: string) => string;
     /**
      * Convert date to relative text
      * @example "เมื่อสักครู่", "10 นาทีที่ผ่านมา", "2 ชั่วโมงที่ผ่านมา", "17 ก.พ. 2569, 13:19"
      */
-    convertDateTorelativeText(date: string | Date | null | undefined): string;
+    convertDateTorelativeText: (date: string | Date | null | undefined) => string;
 }
 export declare function useConvert(): Convert;

package/dist/runtime/composables/useConvert.js

@@ -4,7 +4,7 @@ export class Convert {
    * Convert number to Thai format
    * @example convertNumber(1500000) => "1.5 ล้าน"
    */
-  convertNumber(num) {
+  convertNumber = (num) => {
     if (num >= 1e6) {
       const value = Math.floor(num / 1e6 * 10) / 10;
       return value.toString().replace(/\.0$/, "") + " \u0E25\u0E49\u0E32\u0E19";
@@ -22,28 +22,28 @@ export class Convert {
       return value.toString().replace(/\.0$/, "") + " \u0E1E\u0E31\u0E19";
     }
     return num.toString();
-  }
+  };
   /**
    * Convert date to Thai format
    * @example convertDate("2024-01-01") => "1 ม.ค. 2567"
    */
-  convertDate(date, format = "D MMM BBBB") {
+  convertDate = (date, format = "D MMM BBBB") => {
     if (!date) return "-";
     return dayjs(date).format(format);
-  }
+  };
   /**
    * Convert date time to Thai format
    * @example convertDateTime("2024-01-01 12:00") => "1 ม.ค. 2567 12:00"
    */
-  convertDateTime(date, format = "D MMM BBBB, HH:mm") {
+  convertDateTime = (date, format = "D MMM BBBB, HH:mm") => {
     if (!date) return "-";
     return dayjs(date).format(format);
-  }
+  };
   /**
    * Convert date to relative text
    * @example "เมื่อสักครู่", "10 นาทีที่ผ่านมา", "2 ชั่วโมงที่ผ่านมา", "17 ก.พ. 2569, 13:19"
    */
-  convertDateTorelativeText(date) {
+  convertDateTorelativeText = (date) => {
     if (!date) return "-";
     const target = dayjs(date);
     const now = dayjs();
@@ -59,7 +59,7 @@ export class Convert {
       return `${diffHour} \u0E0A\u0E31\u0E48\u0E27\u0E42\u0E21\u0E07\u0E17\u0E35\u0E48\u0E1C\u0E48\u0E32\u0E19\u0E21\u0E32`;
     }
     return this.convertDateTime(date, "D MMM BBBB, HH:mm");
-  }
+  };
 }
 const convertInstance = new Convert();
 export function useConvert() {

package/package.json

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