pukaad-ui-lib 1.0.1

package/dist/runtime/components/modal/modal-review-detail.vue

@@ -0,0 +1,192 @@
+<template>
+  <Modal
+    v-model="modelValue"
+    :title="props.title"
+    :width="1280"
+    divider
+    @close="onClosed"
+  >
+    <Carousel
+      :items="props.items"
+      :select-index="currentIndex"
+      @clicked-image="switcComment = false"
+      :width="1280"
+      :height="768"
+    >
+      <Card v-if="switcComment" full-width>
+        <div class="flex gap-[16px] max-h-[318px]">
+          <div>
+            <!-- <Avatar :src="props.review.user?.avatar" :name="props.review.user?.name" /> -->
+          </div>
+          <div class="flex flex-col gap-[8px] w-full">
+            <div class="flex flex-col gap-[2px]">
+              <div class="flex justify-between items-center">
+                <div class="font-body-large">{{ props.review.user?.name }}</div>
+                <div class="flex gap-[8px] items-center">
+                  <Button
+                    type="text"
+                    :variant="liked ? 'primary' : 'black'"
+                    :icon-size="20"
+                    size="tiny"
+                    :prepend-icon="
+  liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
+"
+                    :aria-pressed="liked"
+                    @click="toggleLike"
+                    disabled-padding
+                  >
+                    <div>
+                      {{ likeCount }}
+                    </div>
+                  </Button>
+                  <PickerOptionMenuUser :state="menuType" disabled-padding />
+                </div>
+              </div>
+              <div class="flex flex-col gap-[6px]">
+                <div class="font-body-small">
+                  {{ props.review.user?.review_count }} รีวิว •
+                  {{ props.review.user?.like_count }} ชื่นชอบรีวิว
+                </div>
+                <div class="flex gap-[8px] items-center">
+                  <InputRating
+                    :size="16"
+                    readonly
+                    :model-value="props.review.review?.rating"
+                  />
+                  <div class="font-body-small">
+                    {{ props.review.review?.created_at }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="props.review.review?.description"
+              class="font-body-large max-h-[208px] overflow-y-auto"
+            >
+              {{ props.review.review?.description }}
+            </div>
+          </div>
+        </div>
+      </Card>
+      <div
+        v-else
+        class="w-full bg-gradient-to-b from-transparent to-black/70 p-[16px] text-white flex gap-[16px]"
+      >
+        <div>
+          <!-- <Avatar
+            :src="props.review.user?.avatar"
+            :name="props.review.user?.name"
+          /> -->
+        </div>
+        <div class="flex flex-col gap-[8px] w-full">
+          <div class="flex flex-col gap-[2px]">
+            <div class="flex justify-between items-center">
+              <div class="font-body-large">{{ props.review.user?.name }}</div>
+              <div class="flex gap-[8px] items-center">
+                <Button variant="text" disabled-padding @click="toggleComment">
+                  <Icon
+                    name="lucide:message-square-warning"
+                    :size="20"
+                    color="white"
+                  />
+                </Button>
+              </div>
+            </div>
+            <div class="flex flex-col gap-[6px]">
+              <div class="font-body-small">
+                {{ props.review.user?.review_count }} รีวิว •
+                {{ props.review.user?.like_count }} ชื่นชอบรีวิว
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <InputRating
+                  :size="16"
+                  readonly
+                  :model-value="props.review.review?.rating"
+                />
+                <div class="font-body-small">
+                  {{ props.review.review?.created_at }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="props.review.review?.description"
+            class="font-body-large line-clamp-1"
+          >
+            {{ props.review.review?.description }}
+          </div>
+        </div>
+      </div>
+    </Carousel>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, watch, computed } from "vue";
+import Carousel from "../carousel.vue";
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+const switcComment = ref(false);
+const emit = defineEmits(["toggle-like"]);
+const props = defineProps({
+  title: { type: String, required: true, default: "\u0E41\u0E2A\u0E14\u0E07\u0E2A\u0E37\u0E48\u0E2D" },
+  items: { type: Array, required: true, default: () => [] },
+  review: { type: Object, required: true, default: () => ({
+    review_id: "0",
+    user: {
+      user_id: "0",
+      name: "Guest",
+      avatar: "",
+      path_name: "",
+      review_count: 0,
+      like_count: 0
+    },
+    review: {
+      rating: 0,
+      created_at: "",
+      description: "",
+      like_count: 0,
+      liked: false
+    }
+  }) },
+  selectIndex: { type: Number, required: true, default: 0 },
+  isProfile: { type: Boolean, required: true, default: false }
+});
+const currentIndex = ref(props.selectIndex);
+const liked = ref(props.review.review.liked);
+const likeCount = ref(props.review.review.like_count);
+function onClosed() {
+  modelValue.value = false;
+  currentIndex.value = props.selectIndex;
+  switcComment.value = false;
+}
+function toggleLike() {
+  if (liked.value) {
+    likeCount.value -= 1;
+    liked.value = false;
+  } else {
+    likeCount.value += 1;
+    liked.value = true;
+  }
+  emit("toggle-like", props.review.review_id, liked.value);
+}
+function toggleComment() {
+  switcComment.value = !switcComment.value;
+}
+const menuType = computed(() => props.isProfile ? "my-profile" : "profile");
+watch(
+  () => props.selectIndex,
+  (newVal) => currentIndex.value = newVal
+);
+watch(
+  () => props.review.review.liked,
+  (newVal) => {
+    liked.value = newVal;
+  }
+);
+watch(
+  () => props.review.review.like_count,
+  (newVal) => {
+    likeCount.value = newVal;
+  }
+);
+</script>

package/dist/runtime/components/modal/modal-review-detail.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ModalReviewDetailProps } from "@/types/components/modal/modal-review-detail";
+type __VLS_Props = ModalReviewDetailProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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;
+    "toggle-like": (reviewId: string, liked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onToggle-like"?: ((reviewId: string, liked: boolean) => any) | undefined;
+}>, {
+    items: string[];
+    selectIndex: number;
+    title: string;
+    isProfile: boolean;
+    review: import("../../../types/components/card/card-review.js").CardReviewProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-secure.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ModalSecureProps, ModalSecureState } from "~/types/components/modal/modal-secure";
+type __VLS_Props = ModalSecureProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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;
+} & {
+    complete: (state: ModalSecureState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((state: ModalSecureState) => any) | undefined;
+}>, {
+    email: string;
+    twoFaEnabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-secure.vue

@@ -0,0 +1,170 @@
+<template>
+  <component
+    v-for="modal in modals"
+    :key="modal.key"
+    :is="modal.component"
+    :email="props.email"
+    @complete="handleComplete(modal.key)"
+    :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
+    @close="isOpen = false"
+    v-model="modalStates[modal.key]"
+  />
+</template>
+
+<script setup>
+import { useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { reactive, watch, ref } from "vue";
+import ModalPassword from "@/runtime/components/modal/modal-password.vue";
+import ModalPasswordNew from "@/runtime/components/modal/modal-password-new.vue";
+import Modal2FA from "@/runtime/components/modal/modal-2FA.vue";
+import Modal2FAGenerate from "@/runtime/components/modal/modal-2FA-generate.vue";
+import ModalPhoneOTP from "@/runtime/components/modal/modal-phone-OTP.vue";
+import ModalEmailOTP from "@/runtime/components/modal/modal-email-OTP.vue";
+const { $toast } = useNuxtApp();
+const { BASE_URL_API } = useRuntimeConfig().public;
+const emit = defineEmits(["complete"]);
+const props = defineProps({
+  state: { type: String, required: true },
+  email: { type: String, required: false, default: "" },
+  twoFaEnabled: { type: Boolean, required: true, default: false }
+});
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const isLastStep = ref(false);
+const modals = [
+  { key: "password", component: ModalPassword },
+  { key: "passwordNew", component: ModalPasswordNew },
+  { key: "twoFa", component: Modal2FA },
+  { key: "twoFaGenerate", component: Modal2FAGenerate },
+  { key: "phoneOTP", component: ModalPhoneOTP },
+  { key: "emailOTP", component: ModalEmailOTP }
+];
+const modalStates = reactive(
+  Object.fromEntries(modals.map((m) => [m.key, false]))
+);
+const handleComplete = (key) => {
+  modalStates[key] = false;
+  if (props.state === "add-phone") {
+    if (key === "password") {
+      if (props.twoFaEnabled) {
+        modalStates.twoFa = true;
+      } else {
+        isLastStep.value = true;
+        modalStates.phoneOTP = true;
+      }
+    } else if (key === "twoFa") {
+      isLastStep.value = true;
+      modalStates.phoneOTP = true;
+    } else if (key === "phoneOTP") {
+      isOpen.value = false;
+      emit("complete", "add-phone");
+    }
+  }
+  if (props.state === "delete-phone") {
+    if (key === "password") {
+      if (props.twoFaEnabled) {
+        isLastStep.value = true;
+        modalStates.twoFa = true;
+      } else {
+        isOpen.value = false;
+        emit("complete", "delete-phone");
+      }
+    } else if (key === "twoFa") {
+      isOpen.value = false;
+      emit("complete", "delete-phone");
+    }
+  }
+  if (props.state === "add-email") {
+    if (key === "password") {
+      if (props.twoFaEnabled) {
+        modalStates.twoFa = true;
+      } else {
+        isLastStep.value = true;
+        modalStates.emailOTP = true;
+      }
+    } else if (key === "emailOTP") {
+      isOpen.value = false;
+      emit("complete", "add-email");
+    }
+  }
+  if (props.state === "delete-email") {
+    if (key === "password") {
+      if (props.twoFaEnabled) {
+        modalStates.twoFa = true;
+      } else {
+        isLastStep.value = true;
+        isOpen.value = false;
+        emit("complete", "delete-email");
+      }
+    } else if (key === "twoFa") {
+      isOpen.value = false;
+      emit("complete", "delete-email");
+    }
+  }
+  if (props.state === "enabled-2fa") {
+    if (key === "password") {
+      modalStates.twoFaGenerate = true;
+    } else if (key === "twoFaGenerate") {
+      isLastStep.value = true;
+      modalStates.twoFa = true;
+    } else if (key === "twoFa") {
+      onEnabled2FA();
+    }
+  }
+  if (props.state === "disabled-2fa") {
+    if (key === "password") {
+      isLastStep.value = true;
+      modalStates.twoFa = true;
+      return;
+    }
+    if (key === "twoFa") {
+      onDisabled2FA();
+      return;
+    }
+  }
+};
+const onEnabled2FA = async () => {
+  try {
+    const { status } = await $fetch(
+      `${BASE_URL_API}/me/two-fa-enabled`,
+      {
+        method: "POST",
+        credentials: "include"
+      }
+    );
+    if (status != "success") throw "2FA \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+    $toast.success("\u0E40\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E15\u0E31\u0E27\u0E15\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
+    isOpen.value = false;
+    emit("complete", "enabled-2fa");
+  } catch (error) {
+    $toast.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E40\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E15\u0E31\u0E27\u0E15\u0E19\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
+    console.error("Error:", error);
+  }
+};
+const onDisabled2FA = async () => {
+  try {
+    const { status } = await $fetch(
+      `${BASE_URL_API}/me/two-fa-disabled`,
+      {
+        method: "POST",
+        credentials: "include"
+      }
+    );
+    if (status != "success") throw "2FA \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+    $toast.success("\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E15\u0E31\u0E27\u0E15\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
+    isOpen.value = false;
+    emit("complete", "disabled-2fa");
+  } catch (error) {
+    $toast.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E15\u0E31\u0E27\u0E15\u0E19\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
+    console.error("Error:", error);
+  }
+};
+watch(isOpen, (v) => {
+  if (!v) return;
+  modalStates.password = true;
+  if (["delete-phone", "delete-email"].includes(props.state)) {
+    isLastStep.value = true;
+  }
+});
+</script>

package/dist/runtime/components/modal/modal-secure.vue.d.ts

@@ -0,0 +1,19 @@
+import type { ModalSecureProps, ModalSecureState } from "~/types/components/modal/modal-secure";
+type __VLS_Props = ModalSecureProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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;
+} & {
+    complete: (state: ModalSecureState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((state: ModalSecureState) => any) | undefined;
+}>, {
+    email: string;
+    twoFaEnabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-share.d.vue.ts

@@ -0,0 +1,10 @@
+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/modal/modal-share.vue

@@ -0,0 +1,64 @@
+<template>
+  <Modal title="แชร์" width="396" v-model="isOpen">
+    <div class="flex justify-between">
+      <div
+        v-for="(share, i) of listShares"
+        :key="i"
+        @click="share.action()"
+        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
+      >
+        <Icon :name="share.icon" size="40" />
+        <div class="font-body-large text-gray">
+          {{ share.label }}
+        </div>
+      </div>
+      <div
+        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
+        @click="onCopyLink"
+      >
+        <ShadAvatar size="40">
+          <Icon name="fa6-solid:link" size="40" />
+        </ShadAvatar>
+        <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { useClipboard } from "@/runtime/composables/useCopy";
+const { copyToClipboard } = useClipboard();
+const listShares = [
+  {
+    name: "facebook",
+    label: "Facebook",
+    icon: "pukaad-social:Facebook",
+    action: () => {
+      window.open("https://www.facebook.com/", "_blank");
+    }
+  },
+  {
+    name: "x",
+    label: "X",
+    icon: "pukaad-social:X",
+    action: () => {
+      window.open("https://www.x.com/", "_blank");
+    }
+  },
+  {
+    name: "line",
+    label: "Line",
+    icon: "pukaad-social:Line",
+    action: () => {
+      window.open("https://line.me/", "_blank");
+    }
+  }
+];
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const onCopyLink = async () => {
+  const link = window.location.href;
+  await copyToClipboard(link);
+};
+</script>

package/dist/runtime/components/modal/modal-share.vue.d.ts

@@ -0,0 +1,10 @@
+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/modal/modal-user-account-list.d.vue.ts

@@ -0,0 +1,18 @@
+import type { ModalUserAccountListProps, ModalUserAccountListItem } from "@/types/components/modal/modal-user-account-list";
+type __VLS_Props = ModalUserAccountListProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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;
+} & {
+    complete: (value: ModalUserAccountListItem | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((value: ModalUserAccountListItem | null) => any) | undefined;
+}>, {
+    items: ModalUserAccountListItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-user-account-list.vue

@@ -0,0 +1,51 @@
+<template>
+  <Modal title="เลือกวิธีตรวจสอบ" v-model="modelValue">
+    <template v-for="(item, index) in props.items" :key="index">
+      <div class="py-[12px] px-[16px]">
+        <InputRadio :item="item.value" label-position="left" v-model="selected">
+          <template v-slot:[`label-${item.value}-text`]>
+            <div
+              class="flex flex-col w-full text-gray font-body-medium-prominent"
+            >
+              <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
+              <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
+              <div>{{ item.label }}</div>
+            </div>
+          </template>
+        </InputRadio>
+      </div>
+      <Divider v-if="index !== props.items.length - 1" />
+    </template>
+
+    <template #footer>
+      <Button
+        color="primary"
+        full-width
+        @click="onConfirm"
+        :disabled="!selected"
+      >
+        ยืนยัน
+      </Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const emit = defineEmits(["complete"]);
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] }
+});
+const selected = ref(null);
+const modelValue = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const onConfirm = () => {
+  const selectedItem = props.items.find(
+    (item) => item.value === selected.value
+  );
+  emit("complete", selectedItem ?? null);
+  modelValue.value = false;
+  selected.value = null;
+};
+</script>

package/dist/runtime/components/modal/modal-user-account-list.vue.d.ts

@@ -0,0 +1,18 @@
+import type { ModalUserAccountListProps, ModalUserAccountListItem } from "@/types/components/modal/modal-user-account-list";
+type __VLS_Props = ModalUserAccountListProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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;
+} & {
+    complete: (value: ModalUserAccountListItem | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((value: ModalUserAccountListItem | null) => any) | undefined;
+}>, {
+    items: ModalUserAccountListItem[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-user-account-search.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    confirmedText?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    complete: (...args: any[]) => void;
+    "update:modelValue": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((...args: any[]) => any) | undefined;
+}>, {
+    confirmedText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-user-account-search.vue

@@ -0,0 +1,44 @@
+<template>
+  <Modal title="ค้นหาบัญชีของคุณ" v-model="modelValue">
+    <div class="flex flex-col gap-[16px]">
+      <div class="font-body-large text-2xl text-center px-[50px]">
+        ป้อนเบอร์โทรศัพท์ที่เชื่อมโยงกับบัญชีของคุณ เพื่อเปลี่ยนรหัสผ่าน
+      </div>
+      <InputPhone
+        label="เบอร์โทรศัพท์"
+        placeholder="กรอกเบอร์โทรศัพท์"
+        v-model="phone"
+        full-width
+      />
+      <InputRecaptcha ref="recaptchaRef" name="recaptcha" v-model="recaptcha" />
+    </div>
+    <template #footer>
+      <Button
+        full-width
+        variant="primary"
+        :disabled="!phone || !recaptcha"
+        @click="onNext"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const emit = defineEmits(["complete"]);
+const props = defineProps({
+  confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" }
+});
+const recaptchaRef = ref(null);
+const modelValue = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const phone = ref("");
+const recaptcha = ref("");
+const onNext = () => {
+  emit("complete");
+  modelValue.value = false;
+};
+</script>