pukaad-ui-lib 1.0.1

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

@@ -0,0 +1,335 @@
+<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'"
+    width="499"
+    divider
+    :gap="imageFile ? 0 : 16"
+    @close="onCancel"
+    v-model="isOpenModal"
+  >
+    <div v-if="!imageFile" class="flex flex-col gap-[16px]">
+      <div class="px-[16px]">
+        <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>
+      </div>
+      <div v-if="props.item" class="px-[16px]">
+        <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 class="px-[16px]">
+        <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-[16px] items-center">
+          <div>
+            <Icon name="lucide:zoom-in" :size="20" />
+          </div>
+          <Button
+            variant="text"
+            disabled-padding
+            :disabled="!imageFile"
+            @click="onZoomOut"
+          >
+            <div>
+              <Icon name="f7:minus" :size="16" />
+            </div>
+          </Button>
+          <InputSlider
+            :thumb-size="16"
+            :min="isZoomMin"
+            :max="isZoomMax"
+            :step="isZoomStep"
+            :disabled="!imageFile"
+            full-width
+            v-model="isZoom"
+          />
+          <Button
+            variant="text"
+            disabled-padding
+            :disabled="!imageFile"
+            @click="onZoomIn"
+          >
+            <div>
+              <Icon name="f7:plus" :size="16" />
+            </div>
+          </Button>
+        </div>
+        <div class="flex gap-[16px] items-center">
+          <div>
+            <Icon name="lucide:refresh-cw" :size="20" />
+          </div>
+          <Button
+            variant="text"
+            disabled-padding
+            :disabled="!imageFile"
+            @click="onRotateLeft"
+          >
+            <div>
+              <Icon name="f7:minus" size="16" />
+            </div>
+          </Button>
+          <InputSlider
+            :thumb-size="16"
+            :min="isRotateMin"
+            :max="isRotateMax"
+            :step="isRotateStep"
+            :disabled="!imageFile"
+            full-width
+            v-model="isRotate"
+          />
+          <Button
+            variant="text"
+            disabled-padding
+            :disabled="!imageFile"
+            @click="onRotateRight"
+            aria-label="หมุนขวา"
+          >
+            <Icon name="f7:plus" :size="16" />
+          </Button>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[16px] w-full">
+        <Button variant="outline" full-width @click="onCancel">ยกเลิก</Button>
+        <Button
+          color="primary"
+          full-width
+          :disabled="!imageFile"
+          @click="onCropImage"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  item: { type: String, required: false }
+});
+const emit = defineEmits(["complete"]);
+const isOpenModal = defineModel({ type: Boolean, ...{ default: false } });
+const imageFile = ref();
+const fileInputRef = ref(null);
+const cropperRef = ref(null);
+const isDrag = ref(false);
+const imageUrl = ref(null);
+const isZoom = ref(0);
+const isZoomMin = 0;
+const isZoomMax = 5;
+const isZoomStep = 0.1;
+const isRotate = ref(0);
+const isRotateMin = -180;
+const isRotateMax = 180;
+const isRotateStep = 10;
+const cropperContainerSize = {
+  width: "470px",
+  height: "296px"
+};
+const onZoomOut = () => {
+  if (isZoom.value > isZoomMin) {
+    isZoom.value -= isZoomStep;
+  }
+};
+const onZoomIn = () => {
+  if (isZoom.value < isZoomMax) {
+    isZoom.value += isZoomStep;
+  }
+};
+const onRotateLeft = () => {
+  if (isRotate.value > isRotateMin) {
+    isRotate.value -= isRotateStep;
+  }
+};
+const onRotateRight = () => {
+  if (isRotate.value < isRotateMax) {
+    isRotate.value += isRotateStep;
+  }
+};
+const onCropImage = async () => {
+  if (!cropperRef.value) return;
+  const cropper = cropperRef.value;
+  imageFile.value = await getFileFromCanvas(
+    cropper,
+    "image_crop.jpg",
+    "image/jpeg"
+  );
+  emit("complete", imageFile.value);
+  onCancel();
+};
+function getFileFromCanvas(cropper, fileName, mimeType = "image/jpeg") {
+  return new Promise((resolve, reject) => {
+    const canvas = cropper.getCroppedCanvas();
+    if (!canvas || typeof canvas.toBlob !== "function") {
+      return reject(new Error("Canvas \u0E2B\u0E23\u0E37\u0E2D toBlob \u0E44\u0E21\u0E48\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19"));
+    }
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        return reject(new Error("\u0E2A\u0E23\u0E49\u0E32\u0E07 Blob \u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"));
+      }
+      const file = new File([blob], fileName, { type: mimeType });
+      resolve(file);
+    }, mimeType);
+  });
+}
+const onTriggerFileInput = () => {
+  fileInputRef.value?.click();
+};
+const onZoom = (event) => {
+  const numberZoom = event.detail.ratio;
+  if (numberZoom <= isZoomMax) {
+    isZoom.value = numberZoom;
+  } else {
+    event.preventDefault();
+  }
+};
+watch(
+  () => isZoom.value,
+  (newZoom) => {
+    if (cropperRef.value) {
+      const cropper = cropperRef.value;
+      cropper.zoomTo(newZoom);
+    }
+  }
+);
+watch(
+  () => isRotate.value,
+  (newRotate) => {
+    if (cropperRef.value) {
+      const cropper = cropperRef.value;
+      cropper.rotateTo(newRotate);
+    }
+  }
+);
+function onCancel() {
+  isOpenModal.value = false;
+  imageFile.value = void 0;
+  imageUrl.value = null;
+  isZoom.value = 0;
+  isRotate.value = 0;
+}
+const onSelectFile = (event) => {
+  let input = event.target;
+  if (input.files && input.files[0]) {
+    imageFile.value = input.files[0];
+    imageUrl.value = URL.createObjectURL(imageFile.value);
+    input.value = "";
+    isOpenModal.value = true;
+  }
+};
+const onDragOver = () => {
+  isDrag.value = true;
+};
+const onDragLeave = () => {
+  isDrag.value = false;
+};
+const onDrop = (event) => {
+  event.preventDefault();
+  isDrag.value = false;
+  const file = event.dataTransfer?.files?.[0];
+  if (file) {
+    imageFile.value = file;
+    imageUrl.value = URL.createObjectURL(file);
+    isOpenModal.value = true;
+  }
+};
+</script>
+
+<style>
+.cropper-shell .cropper-wrap-box{overflow:visible!important}.cropper-shell .cropper-view-box{outline:0!important}
+</style>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    item?: 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, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    complete: (file: File) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-phone-OTP.d.vue.ts

@@ -0,0 +1,22 @@
+import type { ModalPhoneOTPProps } from "@/types/components/modal/modal-phone-otp";
+type __VLS_Props = ModalPhoneOTPProps;
+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;
+} & {
+    close: () => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    confirmedText: string;
+    phone: string;
+    phoneLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,74 @@
+<template>
+  <Modal
+    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
+    title-position="center"
+    :loading="loadingModal"
+    @close="emit('close')"
+    @submit="onVerifyOTP"
+    v-model="isOpen"
+  >
+    <div class="space-y-[16px]">
+      <div class="text-center font-body-large">
+        <div>
+          ส่งรหัส 6 หลักไปที่เบอร์โทรศัพท์
+          <span>{{ props.phoneLabel || props.phone }}</span>
+        </div>
+        <div v-if="textRef">(Ref : {{ textRef }})</div>
+      </div>
+
+      <div class="flex justify-center">
+        <InputOTP name="otp" columnGap="auto" v-model="valueOTP" />
+      </div>
+
+      <div class="text-center font-body-large">
+        กรุณารอ <span class="text-primary">04.59</span> นาที
+        จะส่งรหัสยืนยันอีกครั้ง
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <Button
+        type="submit"
+        color="primary"
+        full-width
+        :disabled="!meta.valid"
+        class="w-full"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const emit = defineEmits(["complete", "close"]);
+const props = defineProps({
+  phoneLabel: { type: String, required: false, default: "" },
+  phone: { type: String, required: false, default: "" },
+  confirmedText: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
+  name: { type: String, required: false },
+  type: { type: String, required: false },
+  gap: { type: Number, required: false },
+  digit: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  placeholder: { type: String, required: false }
+});
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const textRef = ref("");
+const valueOTP = ref("");
+const loadingModal = ref(false);
+const onVerifyOTP = () => {
+  loadingModal.value = true;
+  setTimeout(() => {
+    emit("complete", valueOTP.value);
+    isOpen.value = false;
+    loadingModal.value = false;
+  }, 1e3);
+};
+watch(isOpen, (value) => {
+  textRef.value = "";
+  valueOTP.value = "";
+});
+</script>

package/dist/runtime/components/modal/modal-phone-OTP.vue.d.ts

@@ -0,0 +1,22 @@
+import type { ModalPhoneOTPProps } from "@/types/components/modal/modal-phone-otp";
+type __VLS_Props = ModalPhoneOTPProps;
+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;
+} & {
+    close: () => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    confirmedText: string;
+    phone: string;
+    phoneLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-profile-edit.d.vue.ts

@@ -0,0 +1,17 @@
+interface Props {
+    state?: "profile" | "business";
+}
+type __VLS_Props = Props;
+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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    state: "profile" | "business";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;