pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/modal/modal-2FA-generate.vue

@@ -1,52 +1,52 @@
 <template>
-  <Modal class="w-[512px]" title="คำแนะนำการตั้งค่า" :loading="isLoading" v-model="isOpen">
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex flex-col gap-[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent text-black">1.ดาวน์โหลดแอพยืนยันตัวตน</div>
-        <div>
-          เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
-        </div>
-      </div>
-      <div class="flex flex-col gap-[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent text-black">
-          2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
-        </div>
-        <div>
-          สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
-          ยืนยันตัวตน
-        </div>
-      </div>
-      <div class="flex justify-center items-center">
-        <div class="flex items-center gap-[32px]">
-          <Image width="146" height="145" :src="barcode2FA" />
-          <div class="w-[168px] gap-[8px] flex flex-col justify-between">
-            <div class="font-body-large-prominent">
-              {{ key }}
-            </div>
-            <div class="cursor-pointer text-primary font-body-large" @click="copyToClipboard(key)">
-              คัดลอกคีย์
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col gap-[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent text-black">
-          3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
-        </div>
-        <div>
-          หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
-          แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
-          ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <Button color="primary" class="w-full" :disabled="isDisabled" @click="onComplete">
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal class="w-[512px]" title="คำแนะนำการตั้งค่า" :loading="isLoading" v-model="isOpen">
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex flex-col gap-[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent text-black">1.ดาวน์โหลดแอพยืนยันตัวตน</div>
+        <div>
+          เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
+        </div>
+      </div>
+      <div class="flex flex-col gap-[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent text-black">
+          2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
+        </div>
+        <div>
+          สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
+          ยืนยันตัวตน
+        </div>
+      </div>
+      <div class="flex justify-center items-center">
+        <div class="flex items-center gap-[32px]">
+          <Image width="146" height="145" :src="barcode2FA" />
+          <div class="w-[168px] gap-[8px] flex flex-col justify-between">
+            <div class="font-body-large-prominent">
+              {{ key }}
+            </div>
+            <div class="cursor-pointer text-primary font-body-large" @click="copyToClipboard(key)">
+              คัดลอกคีย์
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent text-black">
+          3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
+        </div>
+        <div>
+          หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
+          แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
+          ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <Button color="primary" class="w-full" :disabled="isDisabled" @click="onComplete">
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-2FA.vue

@@ -1,32 +1,32 @@
 <template>
-  <Modal
-    title="การยืนยันตัวตนแบบสองชั้น"
-    :loading="isLoading"
-    @submit="onVerify2FA"
-    v-model="isOpen"
-    description="ป้อนรหัสยืนยัน 6 หลักจากแอปยืนยันตัวตน"
-  >
-    <div class="space-y-[24px]">
-      <div class="flex justify-center items-center">
-        <InputOTP
-          ref="twoFaRef"
-          name="otp"
-          v-model="valueOTP"
-          :rules="() => true"
-        />
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <Button
-        class="w-full"
-        type="submit"
-        color="primary"
-        :disabled="!meta.valid"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="การยืนยันตัวตนแบบสองชั้น"
+    :loading="isLoading"
+    @submit="onVerify2FA"
+    v-model="isOpen"
+    description="ป้อนรหัสยืนยัน 6 หลักจากแอปยืนยันตัวตน"
+  >
+    <div class="space-y-[24px]">
+      <div class="flex justify-center items-center">
+        <InputOTP
+          ref="twoFaRef"
+          name="otp"
+          v-model="valueOTP"
+          :rules="() => true"
+        />
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <Button
+        class="w-full"
+        type="submit"
+        color="primary"
+        :disabled="!meta.valid"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled-alert.vue

@@ -1,37 +1,37 @@
 <template>
-  <Modal
-    title="ลบบัญชีโดยถาวร"
-    title-position="left"
-    width="500"
-    :loading="isLoading"
-    @close="onClose"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="font-body-large">
-        เมื่อคุณลบบัญชี Pukaad คุณจะไม่สามารถกู้คืนบัญชีข้อมูลหรือเนื้อหา
-        ทั้งหมดของคุณได้อีกรวมถึง โปรไฟล์หลัก ข้อความส่วนตัวและสิ่งที่คุณเคย
-        แชร์ในชุมชน
-      </div>
-      <div class="flex flex-col gap-[8px] text-error">
-        <div class="font-body-large-prominent">การลบบัญชี</div>
-        <div class="font-body-large">
-          เพื่อป้องกันการลบบัญชีโดยไม่ได้ตั้งใจบัญชีของคุณจะถูกปิดแบบชั่วคราว
-          ก่อน และจะถูกลบถาวรใน 30 วัน หากคุณไม่เข้าสู่ระบบอีก
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex gap-[16px] w-full">
-        <Button class="w-full" variant="outline" color="black" @click="onClose">
-          ยกเลิก
-        </Button>
-        <Button class="w-full" color="primary" @click="onNext">
-          {{ props.confirmedText }}
-        </Button>
-      </div>
-    </template>
-  </Modal>
+  <Modal
+    title="ลบบัญชีโดยถาวร"
+    title-position="left"
+    width="500"
+    :loading="isLoading"
+    @close="onClose"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="font-body-large">
+        เมื่อคุณลบบัญชี Pukaad คุณจะไม่สามารถกู้คืนบัญชีข้อมูลหรือเนื้อหา
+        ทั้งหมดของคุณได้อีกรวมถึง โปรไฟล์หลัก ข้อความส่วนตัวและสิ่งที่คุณเคย
+        แชร์ในชุมชน
+      </div>
+      <div class="flex flex-col gap-[8px] text-error">
+        <div class="font-body-large-prominent">การลบบัญชี</div>
+        <div class="font-body-large">
+          เพื่อป้องกันการลบบัญชีโดยไม่ได้ตั้งใจบัญชีของคุณจะถูกปิดแบบชั่วคราว
+          ก่อน และจะถูกลบถาวรใน 30 วัน หากคุณไม่เข้าสู่ระบบอีก
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[16px] w-full">
+        <Button class="w-full" variant="outline" color="black" @click="onClose">
+          ยกเลิก
+        </Button>
+        <Button class="w-full" color="primary" @click="onNext">
+          {{ props.confirmedText }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled-confirmed.vue

@@ -1,36 +1,36 @@
 <template>
-  <Modal
-    title="ยืนยันการลบบัญชีโดยถาวร"
-    title-position="left"
-    width="500"
-    :loading="loadingModal"
-    @close="onClose"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="font-body-large">
-        เมื่อคุณกด “ลบบัญชี” บัญชีของคุณจะถูกลบโดยถาวรทันที
-        คุณจะไม่สามารถกู้คืนบัญชี ข้อมูล เนื้อหา หรือการเข้าถึงใด ๆ ได้อีก
-        การดำเนินการนี้ถาวรและไม่สามารถย้อนกลับได้
-      </div>
-      <div class="flex items-center gap-[4px] text-error">
-        <Icon name="lucide:triangle-alert" size="20" />
-        <div class="font-body-large">
-          โปรดตรวจสอบให้แน่ใจว่าคุณต้องการลบบัญชีนี้อย่างถาวรจริง
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex gap-[16px]">
-        <Button full-width type="outline" variant="black" @click="onClose">
-          ยกเลิก
-        </Button>
-        <Button full-width variant="error" @click="onDeleteAccount">
-          {{ props.confirmedText }}
-        </Button>
-      </div>
-    </template>
-  </Modal>
+  <Modal
+    title="ยืนยันการลบบัญชีโดยถาวร"
+    title-position="left"
+    width="500"
+    :loading="loadingModal"
+    @close="onClose"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="font-body-large">
+        เมื่อคุณกด “ลบบัญชี” บัญชีของคุณจะถูกลบโดยถาวรทันที
+        คุณจะไม่สามารถกู้คืนบัญชี ข้อมูล เนื้อหา หรือการเข้าถึงใด ๆ ได้อีก
+        การดำเนินการนี้ถาวรและไม่สามารถย้อนกลับได้
+      </div>
+      <div class="flex items-center gap-[4px] text-error">
+        <Icon name="lucide:triangle-alert" size="20" />
+        <div class="font-body-large">
+          โปรดตรวจสอบให้แน่ใจว่าคุณต้องการลบบัญชีนี้อย่างถาวรจริง
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[16px]">
+        <Button full-width type="outline" variant="black" @click="onClose">
+          ยกเลิก
+        </Button>
+        <Button full-width variant="error" @click="onDeleteAccount">
+          {{ props.confirmedText }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled-reason.vue

@@ -1,52 +1,52 @@
 <template>
-  <Modal
-    title="ลบบัญชี"
-    width="500"
-    :loading="loadingModal"
-    @close="onCancel"
-    @submit="onSubmit"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[8px]">
-      <div class="text-body-large-prominent">ก่อนที่คุณจะลบ เราช่วยคุณได้</div>
-      <div class="text-gray">
-        เราเสียใจที่จะต้องบอกลาคุณ เราอยากทราบเหตุผลที่คุณจะลบบัญชีของ คุณ
-        เนื่องจากเราอาจช่วยปัญหาที่พบทั่วไปได้ คุณอาจดำเนินการต่อโดยไม่
-        แจ้งเหตุผลได้เช่นกัน
-      </div>
-
-      <div
-        v-for="(item, i) in items"
-        :key="i"
+  <Modal
+    title="ลบบัญชี"
+    width="500"
+    :loading="loadingModal"
+    @close="onCancel"
+    @submit="onSubmit"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[8px]">
+      <div class="text-body-large-prominent">ก่อนที่คุณจะลบ เราช่วยคุณได้</div>
+      <div class="text-gray">
+        เราเสียใจที่จะต้องบอกลาคุณ เราอยากทราบเหตุผลที่คุณจะลบบัญชีของ คุณ
+        เนื่องจากเราอาจช่วยปัญหาที่พบทั่วไปได้ คุณอาจดำเนินการต่อโดยไม่
+        แจ้งเหตุผลได้เช่นกัน
+      </div>
+
+      <div
+        v-for="(item, i) in items"
+        :key="i"
         :class="[
   'flex flex-col p-[16px]',
   i < items.length - 1 && 'border-b-[1px] border-mercury'
-]"
-      >
-        <InputRadio
-          name="reason"
-          column-gap="auto"
-          :label="item.label"
-          label-position="left"
-          :item="item.value"
-          v-model="formState.reason"
-        />
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <Button full-width variant="outline" color="black" @click="onCancel">
-        ยกเลิก
-      </Button>
-      <Button
-        type="submit"
-        color="primary"
-        full-width
-        :disabled="!formState.reason"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+]"
+      >
+        <InputRadio
+          name="reason"
+          column-gap="auto"
+          :label="item.label"
+          label-position="left"
+          :item="item.value"
+          v-model="formState.reason"
+        />
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <Button full-width variant="outline" color="black" @click="onCancel">
+        ยกเลิก
+      </Button>
+      <Button
+        type="submit"
+        color="primary"
+        full-width
+        :disabled="!formState.reason"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled.vue

@@ -1,13 +1,13 @@
 <template>
-  <component
-    v-for="modal in modals"
-    :key="modal.key"
-    :is="modal.component"
-    :confimed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
-    @close="modelValue = false"
-    @complete="onComplete(modal.key)"
-    v-model="modalStates[modal.key]"
-  />
+  <component
+    v-for="modal in modals"
+    :key="modal.key"
+    :is="modal.component"
+    :confimed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
+    @close="modelValue = false"
+    @complete="onComplete(modal.key)"
+    v-model="modalStates[modal.key]"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-display-image.vue

@@ -1,68 +1,83 @@
 <template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"
-      leave-active-class="transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isOpen"
-        class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/95 backdrop-blur-sm outline-none"
-        @click.self="close"
-        @keydown.escape="close"
-        tabindex="0"
-        ref="overlayRef"
-      >
-        <!-- Close button -->
-        <button
-          class="absolute top-4 left-4 z-10 flex items-center justify-center size-11 border-none rounded-full bg-white/10 text-white/85 cursor-pointer transition-all duration-200 ease-in-out hover:bg-white/20 hover:text-white hover:scale-105"
-          @click="close"
-          aria-label="ปิด"
-        >
-          <Icon name="lucide:x" size="28" />
-        </button>
-
-        <!-- Image container -->
-        <div
-          class="flex items-center justify-center w-full h-full overflow-hidden"
-        >
-          <img
-            :src="props.src"
-            :alt="props.alt || '\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E'"
-            class="max-w-[90vw] max-h-[90vh] object-contain select-none rounded-sm"
-            draggable="false"
-          />
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  <DialogRoot :open="isOpen" @update:open="onOpenChange">
+    <DialogPortal>
+      <Transition
+        enter-active-class="transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"
+        leave-active-class="transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <DialogOverlay
+          class="fixed inset-0 z-[9999] bg-black/95 backdrop-blur-sm"
+        />
+      </Transition>
+      <Transition
+        enter-active-class="transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"
+        leave-active-class="transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <DialogContent
+          class="fixed inset-0 z-[9999] flex items-center justify-center outline-none"
+          :aria-describedby="undefined"
+          @open-auto-focus="onOpenAutoFocus"
+          @close-auto-focus="onCloseAutoFocus"
+          @click.self="close"
+        >
+          <DialogTitle class="sr-only">
+            {{ props.alt || "\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E" }}
+          </DialogTitle>
+          <DialogClose
+            type="button"
+            class="absolute top-4 left-4 z-10 flex items-center justify-center size-11 border-none rounded-full bg-white/10 text-white/85 cursor-pointer transition-all duration-200 ease-in-out hover:bg-white/20 hover:text-white hover:scale-105"
+            aria-label="ปิด"
+          >
+            <Icon name="lucide:x" size="28" />
+          </DialogClose>
+          <img
+            :src="props.src"
+            :alt="props.alt || '\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E'"
+            class="max-w-[90vw] max-h-[90vh] object-contain select-none rounded-sm"
+            draggable="false"
+          />
+        </DialogContent>
+      </Transition>
+    </DialogPortal>
+  </DialogRoot>
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onBeforeUnmount } from "vue";
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle
+} from "reka-ui";
 const props = defineProps({
   src: { type: String, required: false, default: "" },
   alt: { type: String, required: false, default: "" }
 });
 const emits = defineEmits(["close"]);
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
-const overlayRef = ref(null);
+let returnFocusElement = null;
+function onOpenChange(open) {
+  if (isOpen.value === open) return;
+  isOpen.value = open;
+  if (!open) emits("close");
+}
 function close() {
-  isOpen.value = false;
-  emits("close");
+  onOpenChange(false);
+}
+function onOpenAutoFocus() {
+  returnFocusElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 }
-watch(isOpen, (val) => {
-  if (val) {
-    document.body.style.overflow = "hidden";
-    nextTick(() => {
-      overlayRef.value?.focus();
-    });
-  } else {
-    document.body.style.overflow = "";
+function onCloseAutoFocus(event) {
+  event.preventDefault();
+  if (returnFocusElement?.isConnected) {
+    returnFocusElement.focus({ preventScroll: true });
   }
-});
-onBeforeUnmount(() => {
-  document.body.style.overflow = "";
-});
+  returnFocusElement = null;
+}
 </script>

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

@@ -1,36 +1,36 @@
 <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 ${maskedEmail}`"
-    @submit="onVerifyOTP"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-2 items-center">
-      <InputOTP :disabled="isTimeExp" v-model="valueOTP" />
-      <div v-if="isLoading" class="text-center">กำลังส่งรหัสยืนยัน...</div>
-      <div v-else-if="isTimeExp" class="text-center">
-        รหัสหมดอายุ
-        <span class="text-primary cursor-pointer" @click="handleSendEmail">
-          ขอรหัสผ่านใหม่
-        </span>
-      </div>
-      <div v-else class="text-center">
-        กรุณารอ
-        <span class="text-primary">{{ displayTimeExp }}</span> นาที
-        จะส่งรหัสยืนยันอีกครั้ง
-      </div>
-    </div>
-    <template #footer>
-      <Button
-        class="w-full"
-        color="primary"
-        type="submit"
-        :disabled="valueOTP.length !== 6"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <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 ${maskedEmail}`"
+    @submit="onVerifyOTP"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-2 items-center">
+      <InputOTP :disabled="isTimeExp" v-model="valueOTP" />
+      <div v-if="isLoading" class="text-center">กำลังส่งรหัสยืนยัน...</div>
+      <div v-else-if="isTimeExp" class="text-center">
+        รหัสหมดอายุ
+        <span class="text-primary cursor-pointer" @click="handleSendEmail">
+          ขอรหัสผ่านใหม่
+        </span>
+      </div>
+      <div v-else class="text-center">
+        กรุณารอ
+        <span class="text-primary">{{ displayTimeExp }}</span> นาที
+        จะส่งรหัสยืนยันอีกครั้ง
+      </div>
+    </div>
+    <template #footer>
+      <Button
+        class="w-full"
+        color="primary"
+        type="submit"
+        :disabled="valueOTP.length !== 6"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>