pukaad-ui-lib 1.460.0 → 1.461.0

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

@@ -1,179 +1,179 @@
 <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"
-        @update:current-index="currentIndex = $event"
-      />
-
-      <!-- overlay ผู้ดูแลสื่อ + ปุ่มรายงาน — โชว์เสมอ (ไม่ผูกกับ description) ยกเว้นตอนโหมด review -->
-      <div
-        v-if="!props.review"
-        class="absolute bottom-0 w-full z-10"
-        style="
-          background: linear-gradient(
-            to top,
-            rgba(0, 0, 0, 0.75) 0%,
-            transparent 100%
-          );
-        "
-      >
-        <div
-          class="p-[16px] flex flex-col gap-[8px] text-white font-body-large"
-        >
-          <div class="flex justify-between items-center">
-            <div class="font-body-large-prominent">
-              {{ props.uploaderLabel }}
-            </div>
-            <Icon
-              name="lucide:flag"
-              class="cursor-pointer"
-              @click="isOpenModalReport = true"
-            />
-          </div>
-          <div v-if="currentItem?.description">
-            {{ currentItem.description }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
-      <div
-        v-if="props.review"
-        class="absolute bottom-0 w-full z-10"
-        style="
-          background: linear-gradient(
-            to top,
-            rgba(0, 0, 0, 0.75) 0%,
-            transparent 100%
-          );
-        "
-      >
-        <div class="flex flex-col w-full">
-          <div
-            v-if="!showMoreDescription"
-            class="flex gap-[16px] p-[16px] w-full text-white"
-          >
-            <Avatar
-              :src="props.review.user?.avatar"
-              :alt="props.review.user?.name"
-              :size="36"
-              class="shrink-0"
-            />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex justify-between w-full">
-                  <span class="font-body-large">
-                    {{ props.review.user?.name }}
-                  </span>
-                  <Icon name="lucide:flag" />
-                </div>
-                <div class="flex flex-col">
-                  <span class="font-body-small">
-                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
-                    รีวิว •
-                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
-                    ชื่นชอบรีวิว
-                  </span>
-                  <div
-                    v-if="props.review.review"
-                    class="flex items-center gap-[8px]"
-                  >
-                    <InputRating
-                      :size="14"
-                      readonly
-                      :model-value="props.review.review.rating"
-                    />
-                    <span class="font-body-small opacity-75">
-                      {{
+  <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"
+        @update:current-index="currentIndex = $event"
+      />
+
+      <!-- overlay ผู้ดูแลสื่อ + ปุ่มรายงาน — โชว์เสมอ (ไม่ผูกกับ description) ยกเว้นตอนโหมด review -->
+      <div
+        v-if="!props.review"
+        class="absolute bottom-0 w-full z-10"
+        style="
+          background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.75) 0%,
+            transparent 100%
+          );
+        "
+      >
+        <div
+          class="p-[16px] flex flex-col gap-[8px] text-white font-body-large"
+        >
+          <div class="flex justify-between items-center">
+            <div class="font-body-large-prominent">
+              {{ props.uploaderLabel }}
+            </div>
+            <Icon
+              name="lucide:flag"
+              class="cursor-pointer"
+              @click="isOpenModalReport = true"
+            />
+          </div>
+          <div v-if="currentItem?.description">
+            {{ currentItem.description }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
+      <div
+        v-if="props.review"
+        class="absolute bottom-0 w-full z-10"
+        style="
+          background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.75) 0%,
+            transparent 100%
+          );
+        "
+      >
+        <div class="flex flex-col w-full">
+          <div
+            v-if="!showMoreDescription"
+            class="flex gap-[16px] p-[16px] w-full text-white"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon name="lucide:flag" />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{
                         convertDateToRelativeText(
   props.review.review.created_at ?? ""
-)
-                      }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <p
-                v-if="props.review.review?.description"
-                class="font-body-large line-clamp-1 cursor-pointer"
-                @click="showMoreDescription = true"
-              >
-                {{ props.review.review.description }}
-              </p>
-            </div>
-          </div>
-          <div
-            v-if="showMoreDescription"
-            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
-          >
-            <Avatar
-              :src="props.review.user?.avatar"
-              :alt="props.review.user?.name"
-              :size="36"
-              class="shrink-0"
-            />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex justify-between w-full">
-                  <span class="font-body-large">
-                    {{ props.review.user?.name }}
-                  </span>
-                  <Icon
-                    name="lucide:x"
-                    class="cursor-pointer"
-                    @click="showMoreDescription = false"
-                  />
-                </div>
-                <div class="flex flex-col">
-                  <span class="font-body-small">
-                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
-                    รีวิว •
-                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
-                    ชื่นชอบรีวิว
-                  </span>
-                  <div
-                    v-if="props.review.review"
-                    class="flex items-center gap-[8px]"
-                  >
-                    <InputRating
-                      :size="14"
-                      readonly
-                      :model-value="props.review.review.rating"
-                    />
-                    <span class="font-body-small opacity-75">
-                      {{
+)
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large line-clamp-1 cursor-pointer"
+                @click="showMoreDescription = true"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+          <div
+            v-if="showMoreDescription"
+            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon
+                    name="lucide:x"
+                    class="cursor-pointer"
+                    @click="showMoreDescription = false"
+                  />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{
                         convertDateToRelativeText(
   props.review.review.created_at ?? ""
-)
-                      }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <p
-                v-if="props.review.review?.description"
-                class="font-body-large max-h-[280px] overflow-y-auto"
-              >
-                {{ props.review.review.description }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <ModalReport
-    v-model="isOpenModalReport"
-    state="media"
-    @submit="onReportSubmit"
-  />
+)
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large max-h-[280px] overflow-y-auto"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+
+  <ModalReport
+    v-model="isOpenModalReport"
+    state="media"
+    @submit="onReportSubmit"
+  />
 </template>
 
 <script setup>

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

@@ -1,157 +1,157 @@
 <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\u0E2B\u0E19\u0E31\u0E07\u0E2A\u0E37\u0E2D\u0E40\u0E14\u0E34\u0E19\u0E17\u0E32\u0E07" : "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E2B\u0E19\u0E31\u0E07\u0E2A\u0E37\u0E2D\u0E40\u0E14\u0E34\u0E19\u0E17\u0E32\u0E07" }}
-      </span>
-    </template>
-    <template #description v-if="!imageUrl">
-      <ul
-        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium text-gray"
-      >
-        <li>จัดวางภาพถ่ายหนังสือเดินทางตรงช่อง กรอบทั้ง 2 หน้า</li>
-        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ และเห็นขอบทั้ง 4 มุม</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/554] 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/554] 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\u0E2B\u0E19\u0E31\u0E07\u0E2A\u0E37\u0E2D\u0E40\u0E14\u0E34\u0E19\u0E17\u0E32\u0E07" : "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E2B\u0E19\u0E31\u0E07\u0E2A\u0E37\u0E2D\u0E40\u0E14\u0E34\u0E19\u0E17\u0E32\u0E07" }}
+      </span>
+    </template>
+    <template #description v-if="!imageUrl">
+      <ul
+        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium text-gray"
+      >
+        <li>จัดวางภาพถ่ายหนังสือเดินทางตรงช่อง กรอบทั้ง 2 หน้า</li>
+        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ และเห็นขอบทั้ง 4 มุม</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/554] 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/554] 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 -->
-    <div v-else class="flex flex-col gap-[16px]">
-      <div
-        class="passport-cropper relative w-full aspect-[464/554] bg-smoke 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"
-          :rotatable="true"
-          :highlight="false"
-          :auto-crop-area="1"
-          :responsive="true"
-          :zoom-on-wheel="false"
-          :zoom-on-touch="false"
-          :toggle-drag-mode-on-dblclick="false"
-          :modal="false"
-          @ready="onReady"
-          @zoom="onZoom"
-        />
-        <div
-          class="absolute inset-0 pointer-events-none [&>svg]:w-full [&>svg]:h-full"
-          v-html="passportGuidelineSvg"
-        />
-      </div>
-      <div class="p-[16px] flex gap-[40px] items-center">
-        <div class="flex-1 flex gap-[8px] items-center">
-          <Icon name="lucide:zoom-in" :size="20" />
-          <div class="cursor-pointer" @click="onZoomOut">
-            <Icon name="f7:minus" :size="20" />
-          </div>
-          <InputSlider
-            :thumb-size="16"
-            :min="zoomMin"
-            :max="zoomMax"
-            :step="ZOOM_STEP"
-            full-width
-            v-model="zoom"
-          />
-          <div class="cursor-pointer" @click="onZoomIn">
-            <Icon name="f7:plus" :size="20" />
-          </div>
-        </div>
-        <div class="flex-1 flex gap-[8px] items-center">
-          <Icon name="lucide:refresh-cw" :size="20" />
-          <div class="cursor-pointer" @click="onRotateLeft">
-            <Icon name="f7:minus" :size="20" />
-          </div>
-          <InputSlider
-            :thumb-size="16"
-            :min="ROTATE_MIN"
-            :max="ROTATE_MAX"
-            :step="ROTATE_STEP"
-            full-width
-            v-model="rotate"
-          />
-          <div class="cursor-pointer" @click="onRotateRight">
-            <Icon name="f7:plus" :size="20" />
-          </div>
-        </div>
-      </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 -->
+    <div v-else class="flex flex-col gap-[16px]">
+      <div
+        class="passport-cropper relative w-full aspect-[464/554] bg-smoke 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"
+          :rotatable="true"
+          :highlight="false"
+          :auto-crop-area="1"
+          :responsive="true"
+          :zoom-on-wheel="false"
+          :zoom-on-touch="false"
+          :toggle-drag-mode-on-dblclick="false"
+          :modal="false"
+          @ready="onReady"
+          @zoom="onZoom"
+        />
+        <div
+          class="absolute inset-0 pointer-events-none [&>svg]:w-full [&>svg]:h-full"
+          v-html="passportGuidelineSvg"
+        />
+      </div>
+      <div class="p-[16px] flex gap-[40px] items-center">
+        <div class="flex-1 flex gap-[8px] items-center">
+          <Icon name="lucide:zoom-in" :size="20" />
+          <div class="cursor-pointer" @click="onZoomOut">
+            <Icon name="f7:minus" :size="20" />
+          </div>
+          <InputSlider
+            :thumb-size="16"
+            :min="zoomMin"
+            :max="zoomMax"
+            :step="ZOOM_STEP"
+            full-width
+            v-model="zoom"
+          />
+          <div class="cursor-pointer" @click="onZoomIn">
+            <Icon name="f7:plus" :size="20" />
+          </div>
+        </div>
+        <div class="flex-1 flex gap-[8px] items-center">
+          <Icon name="lucide:refresh-cw" :size="20" />
+          <div class="cursor-pointer" @click="onRotateLeft">
+            <Icon name="f7:minus" :size="20" />
+          </div>
+          <InputSlider
+            :thumb-size="16"
+            :min="ROTATE_MIN"
+            :max="ROTATE_MAX"
+            :step="ROTATE_STEP"
+            full-width
+            v-model="rotate"
+          />
+          <div class="cursor-pointer" @click="onRotateRight">
+            <Icon name="f7:plus" :size="20" />
+          </div>
+        </div>
+      </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>