pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,53 +1,53 @@
 <template>
-  <Modal
-    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
-    @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"
-          :error="otpError"
-        />
-      </div>
-
-      <div class="text-center font-body-large">
-        <template v-if="countdown !== '00:00'">
-          กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
-          จะส่งรหัสยืนยันอีกครั้ง
-        </template>
-        <template v-else>
-          ไม่ได้รับรหัส?
-          <Button variant="link" color="primary" @click="onResend"
-            >ส่งรหัสอีกครั้ง</Button
-          >
-        </template>
-      </div>
-    </div>
-
-    <template #footer="{ meta }">
-      <Button
-        type="submit"
-        color="primary"
-        :disabled="!meta.valid || isLoading"
-        class="w-full"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
+    @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"
+          :error="otpError"
+        />
+      </div>
+
+      <div class="text-center font-body-large">
+        <template v-if="countdown !== '00:00'">
+          กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
+          จะส่งรหัสยืนยันอีกครั้ง
+        </template>
+        <template v-else>
+          ไม่ได้รับรหัส?
+          <Button variant="link" color="primary" @click="onResend"
+            >ส่งรหัสอีกครั้ง</Button
+          >
+        </template>
+      </div>
+    </div>
+
+    <template #footer="{ meta }">
+      <Button
+        type="submit"
+        color="primary"
+        :disabled="!meta.valid || isLoading"
+        class="w-full"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,76 +1,78 @@
 <template>
-  <Modal class="w-[425px]" title="โปรไฟล์" @close="onClose" v-model="modelValue">
-    <template #header>
-      <div v-if="step !== 'menu'" class="flex flex-col gap-[8px]">
-        <div class="flex gap-[8px] items-center w-full">
-          <Button variant="text" @click="step = 'menu'">
-            <Icon name="lucide:chevron-left" :size="24" />
-          </Button>
-          <div class="font-title-medium-prominent">
-            <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
-            <div v-if="step === 'category'">หมวดหมู่</div>
-          </div>
-        </div>
-        <div v-if="step === 'profile-name'" class="font-body-large">
-          หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
-          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
-        </div>
-        <div v-if="step === 'category'" class="font-body-large">
-          เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์
-        </div>
-      </div>
-      <div v-if="step === 'menu'" class="flex flex-col gap-[8px]">
-        <div class="font-title-medium-prominent">โปรไฟล์</div>
-        <div class="font-body-large">
-          จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ และการเข้าถึงโปรไฟล์
-          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
-        </div>
-      </div>
-    </template>
-
-    <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
-      <div class="flex flex-col gap-[4px]">
-        <template v-for="(menu, i) in listMenu" :key="menu.label">
+  <Modal class="w-[425px]" title="โปรไฟล์" @close="onClose" v-model="modelValue">
+    <template #header>
+      <div v-if="step !== 'menu'" class="flex flex-col gap-[8px]">
+        <div class="flex gap-[8px] items-center w-full">
+          <Button variant="text" @click="step = 'menu'">
+            <Icon name="lucide:chevron-left" :size="24" />
+          </Button>
+          <div class="font-title-medium-prominent">
+            <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
+            <div v-if="step === 'category'">หมวดหมู่</div>
+          </div>
+        </div>
+        <div v-if="step === 'profile-name'" class="font-body-large">
+          หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
+        <div v-if="step === 'category'" class="font-body-large">
+          เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์
+        </div>
+      </div>
+      <div v-if="step === 'menu'" class="flex flex-col gap-[8px]">
+        <div class="font-title-medium-prominent">โปรไฟล์</div>
+        <div class="font-body-large">
+          จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ และการเข้าถึงโปรไฟล์
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
+      <div class="flex flex-col gap-[4px]">
+        <template v-for="(menu, i) in listMenu" :key="menu.label">
           <div @click="handleMenuClick(menu)" :class="[
   'flex justify-between items-center',
   isMenuClickable(menu) ? 'cursor-pointer ' : ''
-]">
-            <div class="flex flex-col w-full">
-              <div class="font-body-large-prominent">{{ menu.label }}</div>
-              <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
-            </div>
-            <Icon v-if="isMenuClickable(menu)" name="lucide:chevron-right" :size="24" class="text-black" />
-          </div>
-          <Divider v-if="i < listMenu.length - 1" />
-        </template>
-      </div>
-    </div>
-
-    <div v-else class="flex flex-col gap-[16px]">
-      <template v-if="step === 'profile-name'">
-        <Form v-slot="{ meta }" class="flex flex-col gap-[16px]" @submit="saveProfileName">
-          <InputProfileName 
-            name="profileName" 
-            label="ชื่อโปรไฟล์" 
-            :placeholder="listMenu[0]?.value || '-'" 
-            v-model="profileName" 
-          />
-          <Button type="submit" color="primary" full-width :disabled="!meta.valid || isLoading">
-            <span v-if="isLoading">กำลังบันทึก...</span>
-            <span v-else>บันทึก</span>
-          </Button>
-        </Form>
-      </template>
-
-      <template v-if="step === 'category'">
-        <div class="flex flex-col gap-[16px]">
-          <InputAutocomplete v-model="profileCategory" :options="profileCategoryItems" name="profileCategory"
-            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง" label="หมวดหมู่" />
-          <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
-        </div>
-      </template>
-    </div>
-  </Modal>
+]">
+            <div class="flex flex-col w-full">
+              <div class="font-body-large-prominent">{{ menu.label }}</div>
+              <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+            </div>
+            <Icon v-if="isMenuClickable(menu)" name="lucide:chevron-right" :size="24" class="text-black" />
+          </div>
+          <Divider v-if="i < listMenu.length - 1" />
+        </template>
+      </div>
+    </div>
+
+    <div v-else class="flex flex-col gap-[16px]">
+      <template v-if="step === 'profile-name'">
+        <Form v-slot="{ meta }" class="flex flex-col gap-[16px]" @submit="saveProfileName">
+          <InputProfileName 
+            name="profileName" 
+            label="ชื่อโปรไฟล์" 
+            :placeholder="listMenu[0]?.value || '-'" 
+            v-model="profileName" 
+          />
+          <Button type="submit" color="primary" full-width :disabled="!meta.valid || isLoading">
+            <span v-if="isLoading">กำลังบันทึก...</span>
+            <span v-else>บันทึก</span>
+          </Button>
+        </Form>
+      </template>
+
+
+
+      <template v-if="step === 'category'">
+        <div class="flex flex-col gap-[16px]">
+          <InputAutocomplete v-model="profileCategory" :options="profileCategoryItems" name="profileCategory"
+            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง" label="หมวดหมู่" />
+          <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
+        </div>
+      </template>
+    </div>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-province-domain.vue

@@ -1,29 +1,29 @@
 <template>
-  <Modal
-    title="เลือกจังหวัดที่คุณต้องการใช้งาน"
-    description="เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ
-      เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง"
-    class="w-[425px]"
-    v-model="modelValue"
-  >
-    <InputCombobox
-      placeholder="เลือกจังหวัด"
-      label="จังหวัด"
-      :options="provinceOptions"
-      v-model="selected"
-      placeholder-search="ค้นหาจังหวัด"
-    />
-    <template #footer>
-      <Button
-        class="w-full"
-        color="primary"
-        :disabled="!selected"
-        @click="onNext"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="เลือกจังหวัดที่คุณต้องการใช้งาน"
+    description="เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ
+      เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง"
+    class="w-[425px]"
+    v-model="modelValue"
+  >
+    <InputCombobox
+      placeholder="เลือกจังหวัด"
+      label="จังหวัด"
+      :options="provinceOptions"
+      v-model="selected"
+      placeholder-search="ค้นหาจังหวัด"
+    />
+    <template #footer>
+      <Button
+        class="w-full"
+        color="primary"
+        :disabled="!selected"
+        @click="onNext"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,52 +1,52 @@
 <template>
-  <Modal
-    :title="title"
-    :loading="props.loading"
-    @close="onCancel"
-    @submit="onSendReport"
-    v-model="modelValue"
-    class="w-[512px]"
-  >
-    <div class="flex flex-col">
-      <div
-        v-for="(item, i) in items"
-        :key="i"
-        class="flex flex-col border-bright px-[8px] py-[6px] border-b last:border-b-0"
-      >
-        <InputRadio
-          name="report_value"
-          :label="item[0]?.label"
-          :items="item"
-          v-model="formState.selectedValue"
-        />
-        <div
-          v-show="formState.selectedValue === item[0]?.value"
-          class="mt-[8px]"
-        >
-          <InputTextarea
-            name="report_detail"
-            :rows="4"
-            height-scroll
-            :placeholder="placeholderText"
-            v-model="formState.description"
-          />
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <Button class="w-full" variant="outline" type="button" @click="onCancel">
-        ยกเลิก
-      </Button>
-      <Button
-        class="w-full"
-        type="submit"
-        color="primary"
-        :disabled="formState.selectedValue === ''"
-      >
-        ส่ง
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    :title="title"
+    :loading="props.loading"
+    @close="onCancel"
+    @submit="onSendReport"
+    v-model="modelValue"
+    class="w-[512px]"
+  >
+    <div class="flex flex-col">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="flex flex-col border-bright px-[8px] py-[6px] border-b last:border-b-0"
+      >
+        <InputRadio
+          name="report_value"
+          :label="item[0]?.label"
+          :items="item"
+          v-model="formState.selectedValue"
+        />
+        <div
+          v-show="formState.selectedValue === item[0]?.value"
+          class="mt-[8px]"
+        >
+          <InputTextarea
+            name="report_detail"
+            :rows="4"
+            height-scroll
+            :placeholder="placeholderText"
+            v-model="formState.description"
+          />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <Button class="w-full" variant="outline" type="button" @click="onCancel">
+        ยกเลิก
+      </Button>
+      <Button
+        class="w-full"
+        type="submit"
+        color="primary"
+        :disabled="formState.selectedValue === ''"
+      >
+        ส่ง
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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-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>