pukaad-ui-lib 1.169.1 → 1.170.1

package/dist/module.json

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

package/dist/runtime/components/card/card-reaction.d.vue.ts

@@ -18,10 +18,14 @@ type __VLS_Props = {
     disabledDividerBottom?: boolean;
     disabled?: boolean;
     iconSize?: number | string;
+    id?: string;
+    state?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    id: string;
     disabled: boolean;
     disabledPadding: boolean;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

package/dist/runtime/components/card/card-reaction.vue

@@ -32,6 +32,7 @@
 
 <script setup>
 import { computed, reactive, ref, watch } from "vue";
+import { useApi } from "../../composables/useApi";
 const isOpenModalShare = ref(false);
 const props = defineProps({
   itemCount: { type: Object, required: false, default: () => ({
@@ -50,7 +51,9 @@ const props = defineProps({
   disabledDividerTop: { type: Boolean, required: false, default: false },
   disabledDividerBottom: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
-  iconSize: { type: [Number, String], required: false, default: 20 }
+  iconSize: { type: [Number, String], required: false, default: 20 },
+  id: { type: String, required: false, default: "" },
+  state: { type: String, required: false, default: "" }
 });
 const computedPadding = computed(
   () => props.disabledPadding ? 0 : props.padding
@@ -110,9 +113,22 @@ const reactions = [
     action: toggleShared
   }
 ];
-function toggleLike() {
-  reaction.liked = !reaction.liked;
+async function toggleLike() {
+  const previousLiked = reaction.liked;
+  reaction.liked = !previousLiked;
   counts.liked += reaction.liked ? 1 : -1;
+  if (props.state === "blog" && props.id) {
+    try {
+      const api = useApi();
+      await api(`/blogs/${props.id}/like`, {
+        method: reaction.liked ? "POST" : "DELETE"
+      });
+    } catch (error) {
+      console.error(error);
+      reaction.liked = previousLiked;
+      counts.liked += previousLiked ? 1 : -1;
+    }
+  }
 }
 function toggleBookmark() {
   reaction.bookmarked = !reaction.bookmarked;

package/dist/runtime/components/card/card-reaction.vue.d.ts

@@ -18,10 +18,14 @@ type __VLS_Props = {
     disabledDividerBottom?: boolean;
     disabled?: boolean;
     iconSize?: number | string;
+    id?: string;
+    state?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    id: string;
     disabled: boolean;
     disabledPadding: boolean;
+    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -7,7 +7,8 @@
   >
     <div class="flex flex-col gap-2 items-center">
       <InputOTP :disabled="isTimeExp" v-model="valueOTP" />
-      <div v-if="isTimeExp" class="text-center">
+      <div v-if="isLoading" class="text-center">กำลังส่งรหัสยืนยัน...</div>
+      <div v-else-if="isTimeExp" class="text-center">
         รหัสหมดอายุ
         <span class="text-primary cursor-pointer" @click="handleSendEmail">
           ขอรหัสผ่านใหม่
@@ -50,6 +51,7 @@ const isOpen = defineModel({ type: Boolean, ...{
 } });
 const valueOTP = ref("");
 const timeExp = ref("");
+const isLoading = ref(false);
 const displayTimeExp = CountdownTime(timeExp);
 const isTimeExp = computed(() => {
   return !timeExp.value || displayTimeExp.value === "00:00";
@@ -78,6 +80,7 @@ const onVerifyOTP = async () => {
 };
 const handleSendEmail = async () => {
   try {
+    isLoading.value = true;
     if (!props.email) throw new Error("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 email");
     const response = await api(
       "/me/email-otp-request",
@@ -88,9 +91,11 @@ const handleSendEmail = async () => {
         }
       }
     );
-    timeExp.value = response.expired_time;
+    timeExp.value = response.data.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 !");
+  } finally {
+    isLoading.value = false;
   }
 };
 watch(isOpen, (v) => {

package/package.json

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