pukaad-ui-lib 1.459.0 → 1.461.0

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,38 +1,38 @@
 <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-selfie.vue

@@ -1,122 +1,122 @@
 <template>
-  <Modal class="lg:max-w-[512px]" @close="onCancel" v-model="isOpenModal">
-    <template #title>
-      <span class="font-title-medium-prominent">
-        {{ props.item ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E43\u0E1A\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E25\u0E30\u0E1A\u0E31\u0E15\u0E23" : "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E43\u0E1A\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E25\u0E30\u0E1A\u0E31\u0E15\u0E23" }}
-      </span>
-    </template>
-    <template #description>
-      <ul
-        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium text-gray"
-      >
-        <li>ไม่ใส่หมวกหรือแว่นตา และถอดแมสก์ออก</li>
-        <li>จัดวางใบหน้าและบัตรตรงช่องกรอบ</li>
-        <li>ไม่มีนิ้วมือมาปิดบังบัตรประชาชน</li>
-        <li>อยู่ในบริเวณที่มีแสงสว่างเพียงพอ</li>
-        <li>ใบหน้าชัดเจน ตรงกับรูปถ่ายบัตรประชาชน</li>
-      </ul>
-    </template>
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/*"
-      class="hidden"
-      @change="onSelectFile"
-    />
-
-    <!-- ยังไม่เลือกรูป -->
-    <div v-if="!imageUrl" class="flex flex-col">
-      <div v-if="props.item" class="w-full">
-        <div class="relative w-full aspect-[464/621] rounded-[8px] overflow-hidden">
-          <Image
-            :src="props.item"
-            width="auto"
-            height="auto"
-            fit="cover"
-            class="rounded-[8px]"
-          />
-          <div class="absolute bottom-0 w-full">
-            <div
-              class="cursor-pointer text-white bg-black/50 flex gap-[4px] items-center justify-center py-[8px] rounded-b-[8px]"
-              @click="onTriggerFileInput"
-            >
-              <Icon name="lucide:upload" :size="24" />
-              <div class="font-body-medium">อัปโหลดรูปภาพใบหน้าและบัตร</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        v-else
-        class="w-full aspect-[464/621] flex flex-col justify-center items-center gap-[8px] cursor-pointer border-[2px] border-dashed rounded-[4px] transition-colors"
+  <Modal class="lg:max-w-[512px]" @close="onCancel" v-model="isOpenModal">
+    <template #title>
+      <span class="font-title-medium-prominent">
+        {{ props.item ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E43\u0E1A\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E25\u0E30\u0E1A\u0E31\u0E15\u0E23" : "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E43\u0E1A\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E25\u0E30\u0E1A\u0E31\u0E15\u0E23" }}
+      </span>
+    </template>
+    <template #description>
+      <ul
+        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium text-gray"
+      >
+        <li>ไม่ใส่หมวกหรือแว่นตา และถอดแมสก์ออก</li>
+        <li>จัดวางใบหน้าและบัตรตรงช่องกรอบ</li>
+        <li>ไม่มีนิ้วมือมาปิดบังบัตรประชาชน</li>
+        <li>อยู่ในบริเวณที่มีแสงสว่างเพียงพอ</li>
+        <li>ใบหน้าชัดเจน ตรงกับรูปถ่ายบัตรประชาชน</li>
+      </ul>
+    </template>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onSelectFile"
+    />
+
+    <!-- ยังไม่เลือกรูป -->
+    <div v-if="!imageUrl" class="flex flex-col">
+      <div v-if="props.item" class="w-full">
+        <div class="relative w-full aspect-[464/621] rounded-[8px] overflow-hidden">
+          <Image
+            :src="props.item"
+            width="auto"
+            height="auto"
+            fit="cover"
+            class="rounded-[8px]"
+          />
+          <div class="absolute bottom-0 w-full">
+            <div
+              class="cursor-pointer text-white bg-black/50 flex gap-[4px] items-center justify-center py-[8px] rounded-b-[8px]"
+              @click="onTriggerFileInput"
+            >
+              <Icon name="lucide:upload" :size="24" />
+              <div class="font-body-medium">อัปโหลดรูปภาพใบหน้าและบัตร</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="w-full aspect-[464/621] flex flex-col justify-center items-center gap-[8px] cursor-pointer border-[2px] border-dashed rounded-[4px] transition-colors"
         :class="
   isDrag ? 'bg-info border-primary text-primary' : 'bg-white border-mercury text-gray'
-"
-        @click="onTriggerFileInput"
-        @dragover.prevent="isDrag = true"
-        @dragleave.prevent="isDrag = false"
-        @drop.prevent="onDrop"
-      >
-        <Icon name="lucide:upload" :size="24" />
-        <div class="font-body-large">อัปโหลดรูปภาพใบหน้าและบัตร</div>
-        <div class="font-body-small">หรือลากและวาง</div>
-      </div>
-    </div>
-
-    <!-- เลือกรูปแล้ว: crop (ลากเพื่อจัดตำแหน่ง, scroll/pinch เพื่อซูม) -->
-    <div
-      v-else
-      class="selfie-cropper relative w-full aspect-[464/621] rounded-[8px] overflow-hidden"
-    >
-      <ImageCropper
-        ref="cropperRef"
-        :src="imageUrl"
-        :container-style="cropperContainerStyle"
-        :aspect-ratio="CROP_WIDTH / CROP_HEIGHT"
-        drag-mode="move"
-        :view-mode="3"
-        :guides="false"
-        :movable="true"
-        :crop-box-movable="false"
-        :crop-box-resizable="false"
-        :background="false"
-        :center="false"
-        :highlight="false"
-        :auto-crop-area="1"
-        :responsive="true"
-        :zoom-on-wheel="true"
-        :zoom-on-touch="true"
-        :toggle-drag-mode-on-dblclick="false"
-        :modal="false"
-      />
-      <div
-        class="absolute inset-0 flex items-center justify-center pointer-events-none"
-      >
-        <!-- 305x530 จากกรอบ 464x621 ตาม Figma -->
-        <div
-          class="w-[65.73%] h-[85.35%] [&>svg]:w-full [&>svg]:h-full"
-          v-html="idCardSelfieGuidelineSvg"
-        />
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex gap-[8px] w-full">
-        <Button variant="outline" class="flex-1" @click="onCancel">
-          ยกเลิก
-        </Button>
-        <Button
-          color="primary"
-          class="flex-1"
-          :disabled="!imageUrl || isProcessing"
-          @click="onCropImage"
-        >
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Modal>
+"
+        @click="onTriggerFileInput"
+        @dragover.prevent="isDrag = true"
+        @dragleave.prevent="isDrag = false"
+        @drop.prevent="onDrop"
+      >
+        <Icon name="lucide:upload" :size="24" />
+        <div class="font-body-large">อัปโหลดรูปภาพใบหน้าและบัตร</div>
+        <div class="font-body-small">หรือลากและวาง</div>
+      </div>
+    </div>
+
+    <!-- เลือกรูปแล้ว: crop (ลากเพื่อจัดตำแหน่ง, scroll/pinch เพื่อซูม) -->
+    <div
+      v-else
+      class="selfie-cropper relative w-full aspect-[464/621] rounded-[8px] overflow-hidden"
+    >
+      <ImageCropper
+        ref="cropperRef"
+        :src="imageUrl"
+        :container-style="cropperContainerStyle"
+        :aspect-ratio="CROP_WIDTH / CROP_HEIGHT"
+        drag-mode="move"
+        :view-mode="3"
+        :guides="false"
+        :movable="true"
+        :crop-box-movable="false"
+        :crop-box-resizable="false"
+        :background="false"
+        :center="false"
+        :highlight="false"
+        :auto-crop-area="1"
+        :responsive="true"
+        :zoom-on-wheel="true"
+        :zoom-on-touch="true"
+        :toggle-drag-mode-on-dblclick="false"
+        :modal="false"
+      />
+      <div
+        class="absolute inset-0 flex items-center justify-center pointer-events-none"
+      >
+        <!-- 305x530 จากกรอบ 464x621 ตาม Figma -->
+        <div
+          class="w-[65.73%] h-[85.35%] [&>svg]:w-full [&>svg]:h-full"
+          v-html="idCardSelfieGuidelineSvg"
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex gap-[8px] w-full">
+        <Button variant="outline" class="flex-1" @click="onCancel">
+          ยกเลิก
+        </Button>
+        <Button
+          color="primary"
+          class="flex-1"
+          :disabled="!imageUrl || isProcessing"
+          @click="onCropImage"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>