pukaad-ui-lib 1.282.0 → 1.282.2

package/dist/runtime/components/modal/modal-secure.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((state: ModalSecureState, data?: any) => any) | undefined;
 }>, {
-    phone: string;
     email: string;
+    phone: string;
     twoFaEnabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,11 +1,11 @@
 <template>
-  <component v-for="modal in modals" :key="modal.key" :is="modal.component" :email="props.email" :phone="props.phone"
-    mode="secure" @complete="(data) => handleComplete(modal.key, data)"
-    :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'" @close="isOpen = false" v-model="modalStates[modal.key]"
-    :request-path="modal.key === 'phoneOTP' ? '/otp/phone-request' : void 0"
-    :verify-path="modal.key === 'phoneOTP' ? '/otp/phone-verify' : void 0" :reset-token="resetTokenState"
-    :old-password="oldPasswordState"
-    :two-fa-code="twoFaCodeState" />
+  <component v-for="modal in modals" :key="modal.key" :is="modal.component" :email="props.email" :phone="props.phone"
+    mode="secure" @complete="(data) => handleComplete(modal.key, data)"
+    :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'" @close="isOpen = false" v-model="modalStates[modal.key]"
+    :request-path="modal.key === 'phoneOTP' ? '/otp/phone-request' : void 0"
+    :verify-path="modal.key === 'phoneOTP' ? '/otp/phone-verify' : void 0" :reset-token="resetTokenState"
+    :old-password="oldPasswordState"
+    :two-fa-code="twoFaCodeState" />
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-secure.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onComplete?: ((state: ModalSecureState, data?: any) => any) | undefined;
 }>, {
-    phone: string;
     email: string;
+    phone: string;
     twoFaEnabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,24 +1,24 @@
 <template>
-  <Modal title="แชร์" class="w-[426px]" v-model="isOpen" :loading="false">
-    <div class="flex flex-col gap-[16px]">
-      <Divider />
-      <div class="flex justify-between">
-        <div v-for="(share, i) of listShares" :key="i" @click="share.action()"
-          class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]">
-          <Icon :name="share.icon" size="40" />
-          <div class="font-body-large text-gray">
-            {{ share.label }}
-          </div>
-        </div>
-        <div class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]" @click="onCopyLink">
-          <div class="w-[40px] h-[40px] rounded-full bg-dark text-white flex items-center justify-center">
-            <Icon name="fa6-solid:link" size="20" />
-          </div>
-          <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
-        </div>
-      </div>
-    </div>
-  </Modal>
+  <Modal title="แชร์" class="w-[426px]" v-model="isOpen" :loading="false">
+    <div class="flex flex-col gap-[16px]">
+      <Divider />
+      <div class="flex justify-between">
+        <div v-for="(share, i) of listShares" :key="i" @click="share.action()"
+          class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]">
+          <Icon :name="share.icon" size="40" />
+          <div class="font-body-large text-gray">
+            {{ share.label }}
+          </div>
+        </div>
+        <div class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]" @click="onCopyLink">
+          <div class="w-[40px] h-[40px] rounded-full bg-dark text-white flex items-center justify-center">
+            <Icon name="fa6-solid:link" size="20" />
+          </div>
+          <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
+        </div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-user-account-search.vue

@@ -1,73 +1,73 @@
 <template>
-  <Modal
-    :title="step === 'search' ? '\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13' : '\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E34\u0E18\u0E35\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A'"
-    v-model="modelValue"
-    width="425px"
-    :loading="isLoading"
-  >
-    <!-- Step 1: phone + recaptcha -->
-    <div v-if="step === 'search'" class="flex flex-col gap-[24px]">
-      <p class="font-body-large">
-        ป้อนเบอร์โทรศัพท์ที่เชื่อมโยงกับบัญชีของคุณ เพื่อเปลี่ยนรหัสผ่าน
-      </p>
-      <InputPhone
-        label="เบอร์โทรศัพท์"
-        placeholder="กรอกเบอร์โทรศัพท์"
-        v-model="phone"
-      />
-      <InputRecaptcha ref="recaptchaRef" name="recaptcha" v-model="recaptcha" />
-    </div>
-
-    <!-- Step 2: select OTP method -->
-    <div v-else-if="step === 'list'" class="flex flex-col">
-      <template v-for="(item, index) in accountItems" :key="index">
-        <div class="py-[12px] px-[16px]">
-          <InputRadio
-            :item="item.value"
-            label-position="left"
-            v-model="selectedMethod"
-          >
-            <template v-slot:[`label-${item.value}-text`]>
-              <div
-                class="flex flex-col w-full text-gray font-body-medium-prominent"
-              >
-                <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
-                <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
-                <div>{{ item.label }}</div>
-              </div>
-            </template>
-          </InputRadio>
-        </div>
-        <Divider v-if="index !== accountItems.length - 1" />
-      </template>
-    </div>
-
-    <!-- Footer slot (must be direct child of Modal) -->
-    <template #footer>
-      <Button
-        v-if="step === 'search'"
-        class="w-full"
-        color="primary"
-        :disabled="!phone || !recaptcha || isLoading"
-        @click="onSearchNext"
-      >
-        ถัดไป
-      </Button>
-      <div v-else-if="step === 'list'" class="flex flex-col gap-[8px] w-full">
-        <Button
-          class="w-full"
-          color="primary"
-          :disabled="!selectedMethod"
-          @click="onListConfirm"
-        >
-          {{ props.confirmedText }}
-        </Button>
-        <Button variant="text" color="primary" class="w-full" @click="goBack"
-          >ไม่ใช่คุณใช่ไหม?</Button
-        >
-      </div>
-    </template>
-  </Modal>
+  <Modal
+    :title="step === 'search' ? '\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13' : '\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E34\u0E18\u0E35\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A'"
+    v-model="modelValue"
+    width="425px"
+    :loading="isLoading"
+  >
+    <!-- Step 1: phone + recaptcha -->
+    <div v-if="step === 'search'" class="flex flex-col gap-[24px]">
+      <p class="font-body-large">
+        ป้อนเบอร์โทรศัพท์ที่เชื่อมโยงกับบัญชีของคุณ เพื่อเปลี่ยนรหัสผ่าน
+      </p>
+      <InputPhone
+        label="เบอร์โทรศัพท์"
+        placeholder="กรอกเบอร์โทรศัพท์"
+        v-model="phone"
+      />
+      <InputRecaptcha ref="recaptchaRef" name="recaptcha" v-model="recaptcha" />
+    </div>
+
+    <!-- Step 2: select OTP method -->
+    <div v-else-if="step === 'list'" class="flex flex-col">
+      <template v-for="(item, index) in accountItems" :key="index">
+        <div class="py-[12px] px-[16px]">
+          <InputRadio
+            :item="item.value"
+            label-position="left"
+            v-model="selectedMethod"
+          >
+            <template v-slot:[`label-${item.value}-text`]>
+              <div
+                class="flex flex-col w-full text-gray font-body-medium-prominent"
+              >
+                <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
+                <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
+                <div>{{ item.label }}</div>
+              </div>
+            </template>
+          </InputRadio>
+        </div>
+        <Divider v-if="index !== accountItems.length - 1" />
+      </template>
+    </div>
+
+    <!-- Footer slot (must be direct child of Modal) -->
+    <template #footer>
+      <Button
+        v-if="step === 'search'"
+        class="w-full"
+        color="primary"
+        :disabled="!phone || !recaptcha || isLoading"
+        @click="onSearchNext"
+      >
+        ถัดไป
+      </Button>
+      <div v-else-if="step === 'list'" class="flex flex-col gap-[8px] w-full">
+        <Button
+          class="w-full"
+          color="primary"
+          :disabled="!selectedMethod"
+          @click="onListConfirm"
+        >
+          {{ props.confirmedText }}
+        </Button>
+        <Button variant="text" color="primary" class="w-full" @click="goBack"
+          >ไม่ใช่คุณใช่ไหม?</Button
+        >
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,33 +1,33 @@
 <template>
-  <ShadDialog v-model:open="isOpen">
-    <ShadDialogContent :class="props.class" :disabled-close-btn="props.disabledCloseBtn"
-      :no-padding="props.disablePadding" :disable-outside-pointer-events="false" v-slot="{ meta }" @submit="onSubmit"
-      @close="onClose">
-      <Loading :loading="props.loading" :text="props.loadingText" />
-      <ShadDialogHeader :class="props.disablePadding ? 'bg-background' : ''">
-        <slot name="header">
-          <ShadDialogTitle>
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </ShadDialogTitle>
-          <ShadDialogDescription v-if="props.description || $slots.description">
-            <slot name="description">
-              {{ props.description }}
-            </slot>
-          </ShadDialogDescription>
-        </slot>
-      </ShadDialogHeader>
+  <ShadDialog v-model:open="isOpen">
+    <ShadDialogContent :class="props.class" :disabled-close-btn="props.disabledCloseBtn"
+      :no-padding="props.disablePadding" :disable-outside-pointer-events="false" v-slot="{ meta }" @submit="onSubmit"
+      @close="onClose">
+      <Loading :loading="props.loading" :text="props.loadingText" />
+      <ShadDialogHeader :class="props.disablePadding ? 'bg-background' : ''">
+        <slot name="header">
+          <ShadDialogTitle>
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </ShadDialogTitle>
+          <ShadDialogDescription v-if="props.description || $slots.description">
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </ShadDialogDescription>
+        </slot>
+      </ShadDialogHeader>
       <div :class="props.contentMaxHeight ? '-mx-6 px-6' : void 0" :style="
   props.contentMaxHeight ? { maxHeight: `${props.contentMaxHeight}px`, overflowY: 'auto' } : void 0
-">
-        <slot name="default" :meta="meta" />
-      </div>
-      <ShadDialogFooter v-if="$slots.footer">
-        <slot name="footer" :meta="meta" />
-      </ShadDialogFooter>
-    </ShadDialogContent>
-  </ShadDialog>
+">
+        <slot name="default" :meta="meta" />
+      </div>
+      <ShadDialogFooter v-if="$slots.footer">
+        <slot name="footer" :meta="meta" />
+      </ShadDialogFooter>
+    </ShadDialogContent>
+  </ShadDialog>
 </template>
 
 <script setup>

package/dist/runtime/components/pagination.vue

@@ -1,51 +1,51 @@
 <template>
-  <ShadPagination
-    v-slot="{ page }"
-    :items-per-page="itemPerPage"
-    :total="totalItems"
-    :show-edges="true"
-    v-model:page="pageModel"
-  >
-    <ShadPaginationContent v-slot="{ items }">
-      <ShadPaginationFirst />
-      <ShadPaginationPrevious />
-      <template v-for="(item, index) in items" :key="index">
-        <ShadPaginationItem
-          v-if="item.type === 'page'"
-          :value="item.value"
-          :is-active="item.value === page"
-        >
-          {{ item.value }}
-        </ShadPaginationItem>
-        <ShadPaginationEllipsis
-          v-else-if="item.type === 'ellipsis'"
-          :index="index"
-        />
-      </template>
-      <ShadPaginationNext />
-      <ShadPaginationLast />
-
-      <ShadDropdownMenu>
-        <ShadDropdownMenuTrigger>
-          <Button variant="outline">
-            <div class="flex gap-2 items-center">
-              <div>{{ itemPerPage }} / หน้า</div>
-              <Icon name="lucide:chevron-down" />
-            </div>
-          </Button>
-        </ShadDropdownMenuTrigger>
-        <ShadDropdownMenuContent class="max-h-96">
-          <ShadDropdownMenuItem
-            v-for="n in [10, 50, 100]"
-            :key="n"
-            @click="onSlectItemPerPage(n)"
-          >
-            {{ n }} / หน้า
-          </ShadDropdownMenuItem>
-        </ShadDropdownMenuContent>
-      </ShadDropdownMenu>
-    </ShadPaginationContent>
-  </ShadPagination>
+  <ShadPagination
+    v-slot="{ page }"
+    :items-per-page="itemPerPage"
+    :total="totalItems"
+    :show-edges="true"
+    v-model:page="pageModel"
+  >
+    <ShadPaginationContent v-slot="{ items }">
+      <ShadPaginationFirst />
+      <ShadPaginationPrevious />
+      <template v-for="(item, index) in items" :key="index">
+        <ShadPaginationItem
+          v-if="item.type === 'page'"
+          :value="item.value"
+          :is-active="item.value === page"
+        >
+          {{ item.value }}
+        </ShadPaginationItem>
+        <ShadPaginationEllipsis
+          v-else-if="item.type === 'ellipsis'"
+          :index="index"
+        />
+      </template>
+      <ShadPaginationNext />
+      <ShadPaginationLast />
+
+      <ShadDropdownMenu>
+        <ShadDropdownMenuTrigger>
+          <Button variant="outline">
+            <div class="flex gap-2 items-center">
+              <div>{{ itemPerPage }} / หน้า</div>
+              <Icon name="lucide:chevron-down" />
+            </div>
+          </Button>
+        </ShadDropdownMenuTrigger>
+        <ShadDropdownMenuContent class="max-h-96">
+          <ShadDropdownMenuItem
+            v-for="n in [10, 50, 100]"
+            :key="n"
+            @click="onSlectItemPerPage(n)"
+          >
+            {{ n }} / หน้า
+          </ShadDropdownMenuItem>
+        </ShadDropdownMenuContent>
+      </ShadDropdownMenu>
+    </ShadPaginationContent>
+  </ShadPagination>
 </template>
 
 <script setup>

package/dist/runtime/components/picker/picker-image-cover-profile.vue

@@ -1,84 +1,84 @@
 <template>
-  <div class="w-full">
-    <ShadDropdownMenu>
-      <ShadDropdownMenuTrigger as-child>
-        <Button variant="outline" class="bg-white">
-          <Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
-        </Button>
-      </ShadDropdownMenuTrigger>
-
-      <ShadDropdownMenuContent align="start">
-        <ShadDropdownMenuItem
-          v-if="hasImage"
-          class="flex gap-[4px] items-center cursor-pointer"
-          @click="onEditImage"
-        >
-          <Icon name="lucide:crop" :size="16" />
-          <span class="font-body-medium">จัดตำแหน่ง</span>
-        </ShadDropdownMenuItem>
-        <ShadDropdownMenuItem
-          class="flex gap-[4px] items-center cursor-pointer"
-          @click="onUploadImage"
-        >
-          <Icon name="lucide:upload" :size="16" />
-          <span class="font-body-medium">อัปโหลดรูปภาพ</span>
-        </ShadDropdownMenuItem>
-      </ShadDropdownMenuContent>
-    </ShadDropdownMenu>
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/*"
-      class="hidden"
-      @change="onFileChange"
-    />
-    <Modal
-      title="ปรับแต่งรูปภาพหน้าปก"
-      class="w-[512px]"
-      v-model="isOpenModal"
-      @close="onCancel"
-    >
-      <div
-        ref="containerRef"
-        class="relative w-full h-[261px] overflow-hidden select-none cursor-move group"
-        @mousedown="startDrag"
-        @touchstart="startDrag"
-      >
-        <img
-          v-if="imageUrl"
-          :src="imageUrl"
-          class="absolute inset-0 w-full h-full object-cover pointer-events-none"
-          :style="{ objectPosition: `${posX}% ${posY}%` }"
-          @load="onImageLoad"
-          alt="Cover Preview"
-          draggable="false"
-        />
-
-        <div
-          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity"
-          :class="{ 'opacity-0': isDragging, 'opacity-100': !isDragging }"
-        >
-          <div
-            class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-[8px] bg-black/50"
-          >
-            <Icon name="lucide:move" class="text-white" :size="16" />
-            <span class="text-white font-body-medium">ลากเพื่อจัดตำแหน่ง</span>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex items-center gap-[16px] w-full">
-          <Button variant="outline" class="w-full" @click="onCancel">
-            ยกเลิก
-          </Button>
-          <Button color="primary" class="w-full" @click="onSave">
-            บันทึก
-          </Button>
-        </div>
-      </template>
-    </Modal>
-  </div>
+  <div class="w-full">
+    <ShadDropdownMenu>
+      <ShadDropdownMenuTrigger as-child>
+        <Button variant="outline" class="bg-white">
+          <Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
+        </Button>
+      </ShadDropdownMenuTrigger>
+
+      <ShadDropdownMenuContent align="start">
+        <ShadDropdownMenuItem
+          v-if="hasImage"
+          class="flex gap-[4px] items-center cursor-pointer"
+          @click="onEditImage"
+        >
+          <Icon name="lucide:crop" :size="16" />
+          <span class="font-body-medium">จัดตำแหน่ง</span>
+        </ShadDropdownMenuItem>
+        <ShadDropdownMenuItem
+          class="flex gap-[4px] items-center cursor-pointer"
+          @click="onUploadImage"
+        >
+          <Icon name="lucide:upload" :size="16" />
+          <span class="font-body-medium">อัปโหลดรูปภาพ</span>
+        </ShadDropdownMenuItem>
+      </ShadDropdownMenuContent>
+    </ShadDropdownMenu>
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onFileChange"
+    />
+    <Modal
+      title="ปรับแต่งรูปภาพหน้าปก"
+      class="w-[512px]"
+      v-model="isOpenModal"
+      @close="onCancel"
+    >
+      <div
+        ref="containerRef"
+        class="relative w-full h-[261px] overflow-hidden select-none cursor-move group"
+        @mousedown="startDrag"
+        @touchstart="startDrag"
+      >
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="absolute inset-0 w-full h-full object-cover pointer-events-none"
+          :style="{ objectPosition: `${posX}% ${posY}%` }"
+          @load="onImageLoad"
+          alt="Cover Preview"
+          draggable="false"
+        />
+
+        <div
+          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity"
+          :class="{ 'opacity-0': isDragging, 'opacity-100': !isDragging }"
+        >
+          <div
+            class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-[8px] bg-black/50"
+          >
+            <Icon name="lucide:move" class="text-white" :size="16" />
+            <span class="text-white font-body-medium">ลากเพื่อจัดตำแหน่ง</span>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex items-center gap-[16px] w-full">
+          <Button variant="outline" class="w-full" @click="onCancel">
+            ยกเลิก
+          </Button>
+          <Button color="primary" class="w-full" @click="onSave">
+            บันทึก
+          </Button>
+        </div>
+      </template>
+    </Modal>
+  </div>
 </template>
 
 <script setup>