pukaad-ui-lib 1.282.0 → 1.282.2

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>

package/dist/runtime/components/modal/modal-forgot-password.vue

@@ -1,13 +1,13 @@
 <template>
-  <component
-    v-for="modal in modals"
-    :key="modal.key"
-    :is="modal.component"
-    v-bind="modalProps[modal.key]"
-    v-model="modalStates[modal.key]"
-    @complete="(data) => handleComplete(modal.key, data)"
-    @close="isOpen = false"
-  />
+  <component
+    v-for="modal in modals"
+    :key="modal.key"
+    :is="modal.component"
+    v-bind="modalProps[modal.key]"
+    v-model="modalStates[modal.key]"
+    @complete="(data) => handleComplete(modal.key, data)"
+    @close="isOpen = false"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-media-view.vue

@@ -1,16 +1,16 @@
 <template>
-  <Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
-    <template #header>
-      <ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
-    </template>
-    <div class="relative h-[824px] bg-black overflow-hidden">
-      <Carousel
-        :items="props.items"
-        :select-index="props.startIndex"
-        class="h-full"
-      />
-    </div>
-  </Modal>
+  <Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
+    <template #header>
+      <ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
+    </template>
+    <div class="relative h-[824px] bg-black overflow-hidden">
+      <Carousel
+        :items="props.items"
+        :select-index="props.startIndex"
+        class="h-full"
+      />
+    </div>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,34 +1,34 @@
 <template>
-  <Modal
-    :title="props.title"
-    :loading="loading"
-    v-model="isOpen"
-    @close="emit('close')"
-    @submit="handleSubmit"
-  >
-    <div v-if="props.description" class="font-body-large">
-      {{ props.description }}
-    </div>
-    <InputPassword
-      ref="inputRef"
-      disabled-forgot-password
-      required
-      label="รหัสผ่าน"
-      placeholder="กรอกรหัสผ่าน"
-      v-model="password"
-    />
-
-    <template #footer="{ meta }">
-      <Button
-        type="submit"
-        color="primary"
-        class="w-full"
-        :disabled="!meta.valid"
-      >
-        {{ props.confirmText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    :title="props.title"
+    :loading="loading"
+    v-model="isOpen"
+    @close="emit('close')"
+    @submit="handleSubmit"
+  >
+    <div v-if="props.description" class="font-body-large">
+      {{ props.description }}
+    </div>
+    <InputPassword
+      ref="inputRef"
+      disabled-forgot-password
+      required
+      label="รหัสผ่าน"
+      placeholder="กรอกรหัสผ่าน"
+      v-model="password"
+    />
+
+    <template #footer="{ meta }">
+      <Button
+        type="submit"
+        color="primary"
+        class="w-full"
+        :disabled="!meta.valid"
+      >
+        {{ props.confirmText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-password-new.vue

@@ -1,18 +1,18 @@
 <template>
-  <Modal :title="props.title" :loading="loading" v-model="isOpen" @close="emit('close')" @submit="handleSubmit"
-    width="425px">
-    <div class="flex flex-col gap-2">
-      <InputPassword disabled-forgot-password new required label="รหัสผ่าน" placeholder="กรอกรหัสผ่าน"
-        v-model="password" />
-      <InputCheckbox v-if="!props.disabledForceLogout" label="ออกจากระบบ Pukaad ในอุปกรณ์อื่นๆทั้งหมด"
-        v-model="logoutAll" />
-    </div>
-    <template #footer="{ meta }">
-      <Button type="submit" color="primary" class="w-full" :disabled="!meta.valid">
-        {{ props.confirmText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal :title="props.title" :loading="loading" v-model="isOpen" @close="emit('close')" @submit="handleSubmit"
+    width="425px">
+    <div class="flex flex-col gap-2">
+      <InputPassword disabled-forgot-password new required label="รหัสผ่าน" placeholder="กรอกรหัสผ่าน"
+        v-model="password" />
+      <InputCheckbox v-if="!props.disabledForceLogout" label="ออกจากระบบ Pukaad ในอุปกรณ์อื่นๆทั้งหมด"
+        v-model="logoutAll" />
+    </div>
+    <template #footer="{ meta }">
+      <Button type="submit" color="primary" class="w-full" :disabled="!meta.valid">
+        {{ props.confirmText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-password-verify.vue

@@ -1,17 +1,17 @@
 <template>
-  <Modal :title="props.title" :loading="loading" v-model="isOpen" @close="emit('close')" @submit="handleSubmit">
-    <div v-if="props.description" class="font-body-large">
-      {{ props.description }}
-    </div>
-    <InputPassword ref="inputRef" disabled-forgot-password required label="รหัสผ่าน" placeholder="กรอกรหัสผ่าน"
-      v-model="password" />
-
-    <template #footer="{ meta }">
-      <Button type="submit" color="primary" class="w-full" :disabled="!meta.valid">
-        {{ props.confirmText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal :title="props.title" :loading="loading" v-model="isOpen" @close="emit('close')" @submit="handleSubmit">
+    <div v-if="props.description" class="font-body-large">
+      {{ props.description }}
+    </div>
+    <InputPassword ref="inputRef" disabled-forgot-password required label="รหัสผ่าน" placeholder="กรอกรหัสผ่าน"
+      v-model="password" />
+
+    <template #footer="{ meta }">
+      <Button type="submit" color="primary" class="w-full" :disabled="!meta.valid">
+        {{ props.confirmText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-personal-card-ID.vue

@@ -1,173 +1,173 @@
 <template>
-  <Modal
-    :title="props.item ? '\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E31\u0E15\u0E23\u0E1B\u0E23\u0E30\u0E0A\u0E32\u0E0A\u0E19' : '\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E1A\u0E31\u0E15\u0E23\u0E1B\u0E23\u0E30\u0E0A\u0E32\u0E0A\u0E19'"
-    class="lg:max-w-[512px] gap-[24px]"
-    @close="onCancel"
-    v-model="isOpenModal"
-  >
-    <template #description v-if="!imageFile">
-      <ul
-        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium-prominent text-gray"
-      >
-        <li>จัดวางรูปหน้าและตราครุฑตรงช่องกรอบ</li>
-        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ</li>
-        <li>มีแสงสว่างเพียงพอ และไม่มีแสงสะท้อน</li>
-        <li>ไม่มีนิ้วมือมาปิดบังบัตรประชาชน</li>
-        <li>บัตรประชาชนต้องไม่หมดอายุ</li>
-      </ul>
-    </template>
-    <div v-if="!imageFile" class="flex flex-col">
-      <div v-if="props.item">
-        <div class="relative w-[467px] h-[263px]">
-          <Image
-            :src="props.item"
-            width="467"
-            height="263"
-            class="rounded-[8px]"
-          />
-          <div class="absolute bottom-0 w-full">
-            <input
-              ref="fileInputRef"
-              type="file"
-              accept="image/*"
-              class="hidden"
-              @change="onSelectFile"
-            />
-            <div
-              class="cursor-pointer text-white bg-black/50 flex gap-[4px] items-center justify-center py-[8px] rounded-b-[8px]"
-              @click="onTriggerFileInput"
-            >
-              <div>
-                <Icon name="lucide:upload" :size="24" />
-              </div>
-              <div class="font-body-medium">อัปโหลดรูปภาพบัตรประชาชน</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-else>
-        <input
-          ref="fileInputRef"
-          type="file"
-          accept="image/*"
-          class="hidden"
-          @change="onSelectFile"
-        />
-        <div
-          class="w-[467px] h-[263px] flex flex-col justify-center items-center gap-[4px] cursor-pointer border-[2px] border-dashed rounded-[8px]"
+  <Modal
+    :title="props.item ? '\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E31\u0E15\u0E23\u0E1B\u0E23\u0E30\u0E0A\u0E32\u0E0A\u0E19' : '\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E1A\u0E31\u0E15\u0E23\u0E1B\u0E23\u0E30\u0E0A\u0E32\u0E0A\u0E19'"
+    class="lg:max-w-[512px] gap-[24px]"
+    @close="onCancel"
+    v-model="isOpenModal"
+  >
+    <template #description v-if="!imageFile">
+      <ul
+        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium-prominent text-gray"
+      >
+        <li>จัดวางรูปหน้าและตราครุฑตรงช่องกรอบ</li>
+        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ</li>
+        <li>มีแสงสว่างเพียงพอ และไม่มีแสงสะท้อน</li>
+        <li>ไม่มีนิ้วมือมาปิดบังบัตรประชาชน</li>
+        <li>บัตรประชาชนต้องไม่หมดอายุ</li>
+      </ul>
+    </template>
+    <div v-if="!imageFile" class="flex flex-col">
+      <div v-if="props.item">
+        <div class="relative w-[467px] h-[263px]">
+          <Image
+            :src="props.item"
+            width="467"
+            height="263"
+            class="rounded-[8px]"
+          />
+          <div class="absolute bottom-0 w-full">
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept="image/*"
+              class="hidden"
+              @change="onSelectFile"
+            />
+            <div
+              class="cursor-pointer text-white bg-black/50 flex gap-[4px] items-center justify-center py-[8px] rounded-b-[8px]"
+              @click="onTriggerFileInput"
+            >
+              <div>
+                <Icon name="lucide:upload" :size="24" />
+              </div>
+              <div class="font-body-medium">อัปโหลดรูปภาพบัตรประชาชน</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept="image/*"
+          class="hidden"
+          @change="onSelectFile"
+        />
+        <div
+          class="w-[467px] h-[263px] flex flex-col justify-center items-center gap-[4px] cursor-pointer border-[2px] border-dashed rounded-[8px]"
           :class="
   isDrag ? 'bg-info  border-primary text-primary' : 'bg-white border-mercury text-gray'
-"
-          @click="onTriggerFileInput"
-          @dragover.prevent="onDragOver"
-          @dragleave.prevent="onDragLeave"
-          @drop.prevent="onDrop"
-        >
-          <div class="flex flex-col gap-[4px] items-center">
-            <div class="flex justify-center">
-              <Icon name="lucide:upload" :size="24" />
-            </div>
-            <div class="font-body-large">อัปโหลดรูปภาพบัตรประชาชน</div>
-            <div class="font-body-small">หรือลากและวาง</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-if="imageFile">
-      <div class="h-[406px] flex justify-center items-center overflow-hidden">
-        <div class="relative cropper-shell">
-          <ImageCropper
-            ref="cropperRef"
-            :src="imageUrl"
-            :container-style="cropperContainerSize"
-            drag-mode="move"
-            :view-mode="3"
-            :guides="false"
-            :movable="true"
-            :crop-box-movable="false"
-            :crop-box-resizable="false"
-            :background="false"
-            :center="false"
-            :rotatable="true"
-            :highlight="false"
-            :auto-crop-area="1"
-            :responsive="true"
-            :zoom-on-wheel="false"
-            :zoom-on-touch="false"
-            :modal="false"
-            @zoom="onZoom"
-          />
-          <div
-            class="absolute inset-0 border-[6px] border-primary rounded-[18px] pointer-events-none w-[470px] h-[296px] mx-auto my-auto"
-          >
-            <div
-              class="absolute top-[8px] left-[8px] border-[6px] border-primary rounded-full w-[58px] h-[58px]"
-            />
-            <div
-              class="absolute bottom-[24px] right-[12px] border-[6px] border-primary w-[103px] h-[127px]"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="p-[16px] flex gap-[40px] items-center">
-        <div class="flex gap-[8px] items-center">
-          <div>
-            <Icon name="lucide:zoom-in" :size="20" />
-          </div>
-          <div class="cursor-pointer" @click="onZoomOut">
-            <Icon name="f7:minus" :size="20" />
-          </div>
-          <InputSlider
-            :thumb-size="16"
-            :min="isZoomMin"
-            :max="isZoomMax"
-            :step="isZoomStep"
-            :disabled="!imageFile"
-            full-width
-            v-model="isZoom"
-          />
-          <div class="cursor-pointer" @click="onZoomIn">
-            <Icon name="f7:plus" :size="20" />
-          </div>
-        </div>
-        <div class="flex gap-[8px] items-center">
-          <div>
-            <Icon name="lucide:refresh-cw" :size="20" />
-          </div>
-          <div class="cursor-pointer" @click="onRotateLeft">
-            <Icon name="f7:minus" :size="20" />
-          </div>
-          <InputSlider
-            :thumb-size="16"
-            :min="isRotateMin"
-            :max="isRotateMax"
-            :step="isRotateStep"
-            :disabled="!imageFile"
-            full-width
-            v-model="isRotate"
-          />
-          <div class="cursor-pointer" @click="onRotateRight">
-            <Icon name="f7:plus" :size="20" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex gap-[16px]">
-        <Button variant="outline" class="w-[224px]" @click="onCancel"
-          >ยกเลิก</Button
-        >
-        <Button
-          color="primary"
-          class="w-[224px]"
-          :disabled="!imageFile"
-          @click="onCropImage"
-        >
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Modal>
+"
+          @click="onTriggerFileInput"
+          @dragover.prevent="onDragOver"
+          @dragleave.prevent="onDragLeave"
+          @drop.prevent="onDrop"
+        >
+          <div class="flex flex-col gap-[4px] items-center">
+            <div class="flex justify-center">
+              <Icon name="lucide:upload" :size="24" />
+            </div>
+            <div class="font-body-large">อัปโหลดรูปภาพบัตรประชาชน</div>
+            <div class="font-body-small">หรือลากและวาง</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="imageFile">
+      <div class="h-[406px] flex justify-center items-center overflow-hidden">
+        <div class="relative cropper-shell">
+          <ImageCropper
+            ref="cropperRef"
+            :src="imageUrl"
+            :container-style="cropperContainerSize"
+            drag-mode="move"
+            :view-mode="3"
+            :guides="false"
+            :movable="true"
+            :crop-box-movable="false"
+            :crop-box-resizable="false"
+            :background="false"
+            :center="false"
+            :rotatable="true"
+            :highlight="false"
+            :auto-crop-area="1"
+            :responsive="true"
+            :zoom-on-wheel="false"
+            :zoom-on-touch="false"
+            :modal="false"
+            @zoom="onZoom"
+          />
+          <div
+            class="absolute inset-0 border-[6px] border-primary rounded-[18px] pointer-events-none w-[470px] h-[296px] mx-auto my-auto"
+          >
+            <div
+              class="absolute top-[8px] left-[8px] border-[6px] border-primary rounded-full w-[58px] h-[58px]"
+            />
+            <div
+              class="absolute bottom-[24px] right-[12px] border-[6px] border-primary w-[103px] h-[127px]"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="p-[16px] flex gap-[40px] items-center">
+        <div class="flex gap-[8px] items-center">
+          <div>
+            <Icon name="lucide:zoom-in" :size="20" />
+          </div>
+          <div class="cursor-pointer" @click="onZoomOut">
+            <Icon name="f7:minus" :size="20" />
+          </div>
+          <InputSlider
+            :thumb-size="16"
+            :min="isZoomMin"
+            :max="isZoomMax"
+            :step="isZoomStep"
+            :disabled="!imageFile"
+            full-width
+            v-model="isZoom"
+          />
+          <div class="cursor-pointer" @click="onZoomIn">
+            <Icon name="f7:plus" :size="20" />
+          </div>
+        </div>
+        <div class="flex gap-[8px] items-center">
+          <div>
+            <Icon name="lucide:refresh-cw" :size="20" />
+          </div>
+          <div class="cursor-pointer" @click="onRotateLeft">
+            <Icon name="f7:minus" :size="20" />
+          </div>
+          <InputSlider
+            :thumb-size="16"
+            :min="isRotateMin"
+            :max="isRotateMax"
+            :step="isRotateStep"
+            :disabled="!imageFile"
+            full-width
+            v-model="isRotate"
+          />
+          <div class="cursor-pointer" @click="onRotateRight">
+            <Icon name="f7:plus" :size="20" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[16px]">
+        <Button variant="outline" class="w-[224px]" @click="onCancel"
+          >ยกเลิก</Button
+        >
+        <Button
+          color="primary"
+          class="w-[224px]"
+          :disabled="!imageFile"
+          @click="onCropImage"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>