pukaad-ui-lib 1.168.0 → 1.169.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.168.0",
+  "version": "1.169.1",
   "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;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     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;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     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;
-    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

@@ -18,8 +18,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

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

package/dist/runtime/components/modal/modal-email-OTP.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal
     title="รหัสยืนยันตัวตน"
-    :description="`\u0E1B\u0E49\u0E2D\u0E19\u0E23\u0E2B\u0E31\u0E2A 6 \u0E2B\u0E25\u0E31\u0E01\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E44\u0E1B\u0E22\u0E31\u0E07\u0E2D\u0E35\u0E40\u0E21\u0E25 ${props.email}`"
+    :description="`\u0E1B\u0E49\u0E2D\u0E19\u0E23\u0E2B\u0E31\u0E2A 6 \u0E2B\u0E25\u0E31\u0E01\u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E44\u0E1B\u0E22\u0E31\u0E07\u0E2D\u0E35\u0E40\u0E21\u0E25 ${maskedEmail}`"
     @submit="onVerifyOTP"
     v-model="isOpen"
   >
@@ -19,12 +19,12 @@
         จะส่งรหัสยืนยันอีกครั้ง
       </div>
     </div>
-    <template #footer="{ meta }">
+    <template #footer>
       <Button
         class="w-full"
         color="primary"
         type="submit"
-        :disabled="!meta.valid"
+        :disabled="valueOTP.length !== 6"
       >
         {{ props.confirmedText }}
       </Button>
@@ -33,12 +33,13 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from "vue";
-import { useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { ref, onMounted, computed, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
 import { useCountDown } from "@/runtime/composables/useCountDown";
-const { CountdownTime } = useCountDown();
+import { useApi } from "@/runtime/composables/useApi";
 const { $toast } = useNuxtApp();
-const { BASE_URL_API } = useRuntimeConfig().public;
+const api = useApi();
+const { CountdownTime } = useCountDown();
 const emits = defineEmits(["complete"]);
 const props = defineProps({
   email: { type: String, required: false },
@@ -51,14 +52,18 @@ const valueOTP = ref("");
 const timeExp = ref("");
 const displayTimeExp = CountdownTime(timeExp);
 const isTimeExp = computed(() => {
-  if (displayTimeExp.value !== "00:00") return false;
-  return true;
+  return !timeExp.value || displayTimeExp.value === "00:00";
+});
+const maskedEmail = computed(() => {
+  if (!props.email) return "";
+  const [local, domain] = props.email.split("@");
+  if (!local || !domain || local.length <= 2) return props.email;
+  return `${local[0]}${"*".repeat(local.length - 2)}${local[local.length - 1]}@${domain}`;
 });
 const onVerifyOTP = async () => {
   try {
-    await $fetch(`${BASE_URL_API}/me/email-otp-verify`, {
+    await api("/me/email-otp-verify", {
       method: "POST",
-      credentials: "include",
       body: {
         code: valueOTP.value,
         email: props.email
@@ -73,23 +78,27 @@ const onVerifyOTP = async () => {
 };
 const handleSendEmail = async () => {
   try {
-    if (!props.email) throw "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 email";
-    const { data } = await $fetch(
-      `${BASE_URL_API}/me/email-otp-request`,
+    if (!props.email) throw new Error("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 email");
+    const response = await api(
+      "/me/email-otp-request",
       {
         method: "POST",
-        credentials: "include",
         body: {
           email: props.email
         }
       }
     );
-    timeExp.value = data.expired_time;
+    timeExp.value = response.expired_time;
   } catch (err) {
     $toast.error("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E1A\u0E32\u0E07\u0E2D\u0E22\u0E48\u0E32\u0E07 !");
   }
 };
-onMounted(() => {
-  handleSendEmail();
+watch(isOpen, (v) => {
+  if (v) {
+    valueOTP.value = "";
+    handleSendEmail();
+  } else {
+    timeExp.value = "";
+  }
 });
 </script>

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

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => 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, {},
     onClose?: (() => 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/package.json

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

package/dist/runtime/components/drawer/drawer-history.d.vue.ts

@@ -1,20 +0,0 @@
-export interface Profile {
-    profileImageUrl: string;
-    profileName: string;
-}
-export interface History {
-    profile: Profile;
-    action: string;
-    page: string;
-    createdAt: string;
-}
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/drawer/drawer-history.vue

@@ -1,76 +0,0 @@
-<template>
-  <Drawer class="w-[748px]" title="ประวัติ" v-model="isDrawerOpen">
-    <div class="flex flex-col gap-[24px]">
-      <InputTextField
-        name="search"
-        placeholder="ค้นหาประวัติ"
-        icon-prepend="lucide:search"
-        v-model="search"
-      />
-      <div>
-        <div
-          v-for="(item, index) in histories"
-          :key="index"
-          class="p-[8px] flex gap-[8px] border-b-[1px] border-mercury items-center"
-        >
-          <Avatar :size="30" :src="item.profile.profileImageUrl" />
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex gap-[4px]">
-              <div class="font-body-medium-prominent">
-                {{ item.profile.profileName }}
-              </div>
-              <div class="font-body-medium text-primary">
-                {{ item.action }}
-              </div>
-              <div class="font-body-medium">
-                {{ item.page }}
-              </div>
-            </div>
-            <div class="font-body-small text-gray">
-              ดำเนินการเมื่อ {{ convertDateTime(item.createdAt) }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Drawer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useConvert } from "@/runtime/composables/useConvert";
-const search = ref("");
-const isDrawerOpen = defineModel({ type: Boolean, ...{
-  default: false
-} });
-const { convertDateTime } = useConvert();
-const histories = ref([
-  {
-    profile: {
-      profileImageUrl: "https://github.com/shadcn.png",
-      profileName: "Janejira Somboon"
-    },
-    action: "\u0E44\u0E14\u0E49\u0E17\u0E33\u0E01\u0E32\u0E23\u0E40\u0E1E\u0E34\u0E48\u0E21",
-    page: "\u0E19\u0E42\u0E22\u0E1A\u0E32\u0E22\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E1A\u0E38\u0E04\u0E04\u0E25 (PDPA)",
-    createdAt: "2024-01-01 12:00"
-  },
-  {
-    profile: {
-      profileImageUrl: "https://github.com/shadcn.png",
-      profileName: "Janejira Somboon"
-    },
-    action: "\u0E44\u0E14\u0E49\u0E17\u0E33\u0E01\u0E32\u0E23\u0E41\u0E01\u0E49\u0E44\u0E02",
-    page: "\u0E19\u0E42\u0E22\u0E1A\u0E32\u0E22\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E1A\u0E38\u0E04\u0E04\u0E25 (PDPA)",
-    createdAt: "2024-01-01 12:00"
-  },
-  {
-    profile: {
-      profileImageUrl: "https://github.com/shadcn.png",
-      profileName: "Janejira Somboon"
-    },
-    action: "\u0E44\u0E14\u0E49\u0E17\u0E33\u0E01\u0E32\u0E23\u0E25\u0E1A",
-    page: "\u0E19\u0E42\u0E22\u0E1A\u0E32\u0E22\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E2A\u0E48\u0E27\u0E19\u0E1A\u0E38\u0E04\u0E04\u0E25 (PDPA)",
-    createdAt: "2024-01-01 12:00"
-  }
-]);
-</script>

package/dist/runtime/components/drawer/drawer-history.vue.d.ts

@@ -1,20 +0,0 @@
-export interface Profile {
-    profileImageUrl: string;
-    profileName: string;
-}
-export interface History {
-    profile: Profile;
-    action: string;
-    page: string;
-    createdAt: string;
-}
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;