pukaad-ui-lib 1.377.0 → 1.379.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.377.0",
+  "version": "1.379.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/svg/id-card-guideline.svg

@@ -0,0 +1,7 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="447" height="296" viewBox="0 0 447 296" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ID Card Guideline">
+<rect id="Rectangle 3023" x="3" y="3" width="441" height="290" rx="18" stroke="#1976B8" stroke-width="6"/>
+<circle id="Ellipse 40" cx="39" cy="40" r="25" stroke="#1976B8" stroke-width="6"/>
+<rect id="Rectangle 3024" x="337" y="141" width="95" height="135" stroke="#1976B8" stroke-width="6"/>
+</g>
+</svg>

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -49,13 +49,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
-    options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -49,13 +49,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
-    options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     name: string;
     fullHeight: boolean;
     fullWidth: boolean;
-    disabledErrorMessage: boolean;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     name: string;
     fullHeight: boolean;
     fullWidth: boolean;
-    disabledErrorMessage: boolean;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;

package/dist/runtime/components/input/input-link.d.vue.ts

@@ -17,8 +17,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     format: "legacy" | "contact_channel";
     hideType: boolean;
     hideAddButton: boolean;

package/dist/runtime/components/input/input-link.vue.d.ts

@@ -17,8 +17,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     format: "legacy" | "contact_channel";
     hideType: boolean;
     hideAddButton: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
-    showCounter: boolean;
+    placeholder: string;
     limit: number;
+    showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
-    showCounter: boolean;
+    placeholder: string;
     limit: number;
+    showCounter: boolean;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-personal-card-id.d.vue.ts

@@ -0,0 +1,25 @@
+export interface InputPersonalCardIdProps {
+    name?: string;
+    disabledErrorMessage?: boolean;
+    preview?: string;
+}
+type __VLS_Props = InputPersonalCardIdProps;
+type __VLS_ModelProps = {
+    modelValue?: File | null;
+};
+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: File | null) => any;
+} & {
+    complete: (file: File) => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {
+    name: string;
+    disabledErrorMessage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-personal-card-id.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="space-y-[4px]">
+    <div
+      class="relative w-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
+      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
+      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
+      @click="isOpenModal = true"
+    >
+      <div
+        v-if="!previewUrl"
+        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
+      >
+        <Icon name="lucide:upload" :size="24" />
+        <div class="font-body-small">ลากหรือคลิกเพื่ออัปโหลด</div>
+      </div>
+
+      <template v-else>
+        <div
+          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
+        >
+          <Icon name="lucide:upload" :size="20" />
+          <div class="font-body-medium">อัปโหลดรูปภาพบัตรประชาชน</div>
+        </div>
+        <div
+          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
+          @click.stop="onRemove"
+        >
+          <Icon name="lucide:x" :size="16" />
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="!props.disabledErrorMessage && errorMessage"
+      class="font-body-small text-destructive"
+    >
+      {{ errorMessage }}
+    </div>
+
+    <ModalPersonalCardID
+      v-model="isOpenModal"
+      :item="previewUrl"
+      @complete="onComplete"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { useField } from "vee-validate";
+const props = defineProps({
+  name: { type: String, required: false, default: "input-personal-card-id" },
+  disabledErrorMessage: { type: Boolean, required: false, default: false },
+  preview: { type: String, required: false }
+});
+const emit = defineEmits(["complete", "remove"]);
+const { errorMessage } = useField(props.name);
+const modelValue = defineModel({ type: null, ...{ default: null } });
+const isOpenModal = ref(false);
+const previewUrl = ref(props.preview);
+watch(
+  () => props.preview,
+  (v) => {
+    previewUrl.value = v;
+  }
+);
+const onComplete = (file) => {
+  previewUrl.value = URL.createObjectURL(file);
+  modelValue.value = file;
+  emit("complete", file);
+};
+const onRemove = () => {
+  if (previewUrl.value?.startsWith("blob:")) {
+    URL.revokeObjectURL(previewUrl.value);
+  }
+  previewUrl.value = void 0;
+  modelValue.value = null;
+  emit("remove");
+};
+</script>

package/dist/runtime/components/input/input-personal-card-id.vue.d.ts

@@ -0,0 +1,25 @@
+export interface InputPersonalCardIdProps {
+    name?: string;
+    disabledErrorMessage?: boolean;
+    preview?: string;
+}
+type __VLS_Props = InputPersonalCardIdProps;
+type __VLS_ModelProps = {
+    modelValue?: File | null;
+};
+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: File | null) => any;
+} & {
+    complete: (file: File) => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File | null) => any) | undefined;
+    onComplete?: ((file: File) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {
+    name: string;
+    disabledErrorMessage: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-suggest.d.vue.ts

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     description: string;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-suggest.vue.d.ts

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     description: string;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -59,10 +59,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -59,10 +59,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -47,10 +47,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     readonly: boolean;
     heightScroll: boolean;
     spaceToComma: boolean;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -47,10 +47,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     readonly: boolean;
     heightScroll: boolean;
     spaceToComma: boolean;

package/dist/runtime/components/input/input-typed-field.d.vue.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-typed-field.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,29 +1,30 @@
 <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"
-  >
+  <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\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" }}
+      </span>
+    </template>
     <template #description v-if="!imageFile">
       <ul
-        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium-prominent text-gray"
+        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium text-gray"
       >
         <li>จัดวางรูปหน้าและตราครุฑตรงช่องกรอบ</li>
-        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ</li>
+        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ และเห็นขอบทั้ง4 มุม</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]">
+      <div v-if="props.item" class="w-full">
+        <div class="relative w-full aspect-[224/126]">
           <Image
             :src="props.item"
-            width="467"
-            height="263"
-            class="rounded-[8px]"
+            width="auto"
+            height="auto"
+            fit="cover"
+            class="rounded-[4px]"
           />
           <div class="absolute bottom-0 w-full">
             <input
@@ -34,7 +35,7 @@
               @change="onSelectFile"
             />
             <div
-              class="cursor-pointer text-white bg-black/50 flex gap-[4px] items-center justify-center py-[8px] rounded-b-[8px]"
+              class="cursor-pointer text-white bg-black/50 flex gap-[4px] items-center justify-center py-[8px] rounded-b-[4px]"
               @click="onTriggerFileInput"
             >
               <div>
@@ -45,7 +46,7 @@
           </div>
         </div>
       </div>
-      <div v-else>
+      <div v-else class="w-full">
         <input
           ref="fileInputRef"
           type="file"
@@ -54,7 +55,7 @@
           @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="w-full aspect-[224/126] flex flex-col justify-center items-center gap-[4px] cursor-pointer border-[2px] border-dashed rounded-[4px]"
           :class="
   isDrag ? 'bg-info  border-primary text-primary' : 'bg-white border-mercury text-gray'
 "
@@ -63,7 +64,7 @@
           @dragleave.prevent="onDragLeave"
           @drop.prevent="onDrop"
         >
-          <div class="flex flex-col gap-[4px] items-center">
+          <div class="flex flex-col gap-[8px] items-center">
             <div class="flex justify-center">
               <Icon name="lucide:upload" :size="24" />
             </div>
@@ -98,15 +99,9 @@
             @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>
+            class="absolute inset-0 w-[447px] h-[296px] mx-auto my-auto pointer-events-none"
+            v-html="idCardGuidelineSvg"
+          />
         </div>
       </div>
       <div class="p-[16px] flex gap-[40px] items-center">
@@ -153,13 +148,13 @@
       </div>
     </div>
     <template #footer>
-      <div class="flex gap-[16px]">
-        <Button variant="outline" class="w-[224px]" @click="onCancel"
+      <div class="flex gap-[8px] w-full">
+        <Button variant="outline" class="flex-1" @click="onCancel"
           >ยกเลิก</Button
         >
         <Button
           color="primary"
-          class="w-[224px]"
+          class="flex-1"
           :disabled="!imageFile"
           @click="onCropImage"
         >
@@ -172,6 +167,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import idCardGuidelineSvg from "#pukaad-ui/runtime/assets/svg/id-card-guideline.svg?raw";
 const props = defineProps({
   item: { type: String, required: false }
 });
@@ -191,7 +187,7 @@ const isRotateMin = -180;
 const isRotateMax = 180;
 const isRotateStep = 10;
 const cropperContainerSize = {
-  width: "470px",
+  width: "447px",
   height: "296px"
 };
 const onZoomOut = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.377.0",
+  "version": "1.379.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",