pukaad-ui-lib 1.3.2 → 1.4.2

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

@@ -1,39 +1,39 @@
 <template>
-  <Field
-    :name="props.name"
-    v-slot="{ field, errorMessage }"
-    :validate-on-blur="props.validateOnBlur"
-    :validate-on-input="props.validateOnInput"
-    :standalone="props.standalone"
-    :rules="rules || defaultRule"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[4px]">
-      <slot
-        v-if="$slots.label || props.label"
-        name="label"
-        :label="props.label"
-      >
-        <div class="text-gray flex items-center">
-          <div class="font-body-large-prominent flex-1">
-            {{ props.label }}
-            <span v-if="props.required" class="text-error">*</span>
-          </div>
-          <div v-if="props.showCounter" :class="['font-body-small']">
-            <div
-              v-if="props.maxLength"
-              :class="[textCounter > props.maxLength && 'text-error']"
-            >
-              {{ textCounter }} / {{ props.maxLength }}
-            </div>
-            <div v-else>{{ textCounter }} ตัวอักษร</div>
-          </div>
-        </div>
-      </slot>
-
-      <textarea
-        v-bind="field"
-        ref="textareaRef"
+  <Field
+    :name="props.name"
+    v-slot="{ field, errorMessage }"
+    :validate-on-blur="props.validateOnBlur"
+    :validate-on-input="props.validateOnInput"
+    :standalone="props.standalone"
+    :rules="rules || defaultRule"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[4px]">
+      <slot
+        v-if="$slots.label || props.label"
+        name="label"
+        :label="props.label"
+      >
+        <div class="text-gray flex items-center">
+          <div class="font-body-large-prominent flex-1">
+            {{ props.label }}
+            <span v-if="props.required" class="text-error">*</span>
+          </div>
+          <div v-if="props.showCounter" :class="['font-body-small']">
+            <div
+              v-if="props.maxLength"
+              :class="[textCounter > props.maxLength && 'text-error']"
+            >
+              {{ textCounter }} / {{ props.maxLength }}
+            </div>
+            <div v-else>{{ textCounter }} ตัวอักษร</div>
+          </div>
+        </div>
+      </slot>
+
+      <textarea
+        v-bind="field"
+        ref="textareaRef"
         :class="[
   'w-full bg-white',
   'font-body-large placeholder:text-cloud rounded-[8px] overflow-auto',
@@ -41,29 +41,29 @@
   errorMessage && !props.disabled ? ' focus:ring-error' : borderFocus,
   errorMessage && !props.disabled ? 'ring-[1px] ring-error' : variaint,
   padding
-]"
-        :placeholder="props.placeholder"
-        :disabled="props.disabled"
+]"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
         :style="{
   resize: props.resize,
   height: props.fullHeight ? '100%' : `${props.height}px`,
   width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-        :rows="props.rows"
-        :readonly="props.readonly"
-        @input="autoHeight()"
-      />
-
-      <div
-        v-if="!props.disabledErrorMessage && errorMessage"
-        class="font-body-small text-error"
-      >
-        <slot name="error">
-          {{ errorMessage }}
-        </slot>
-      </div>
-    </div>
-  </Field>
+}"
+        :rows="props.rows"
+        :readonly="props.readonly"
+        @input="autoHeight()"
+      />
+
+      <div
+        v-if="!props.disabledErrorMessage && errorMessage"
+        class="font-body-small text-error"
+      >
+        <slot name="error">
+          {{ errorMessage }}
+        </slot>
+      </div>
+    </div>
+  </Field>
 </template>
 
 <script setup>

package/dist/runtime/components/label/label-announce-time.vue

@@ -1,13 +1,13 @@
 <template>
-  <!-- <div
-    v-if="timeStatus.show"
-    :class="[
-      'inline-flex rounded-[4px] p-[4px] font-body-small text-white',
-      timeStatus.backgroundColor,
-    ]"
-  >
-    {{ timeStatus.text }}
-  </div> -->
+  <!-- <div
+    v-if="timeStatus.show"
+    :class="[
+      'inline-flex rounded-[4px] p-[4px] font-body-small text-white',
+      timeStatus.backgroundColor,
+    ]"
+  >
+    {{ timeStatus.text }}
+  </div> -->
 </template>
 
 <script setup>

package/dist/runtime/components/label/label-card-atom.vue

@@ -1,9 +1,9 @@
 <template>
-  <!-- <div :class="['flex py-[2px]', state, color]">
-    <div class="font-body-extra-small text-word-on-surface">
-      {{ props.text }}
-    </div>
-  </div> -->
+  <!-- <div :class="['flex py-[2px]', state, color]">
+    <div class="font-body-extra-small text-word-on-surface">
+      {{ props.text }}
+    </div>
+  </div> -->
 </template>
 
 <script setup>
@@ -11,7 +11,7 @@
 </script>
 
 <style scoped>
-/* .state-last {
-//   clip-path: "polygon(0 0, 100% 0, 90% 100%, 0 100%)";
-// } */
+/* .state-last {
+//   clip-path: "polygon(0 0, 100% 0, 90% 100%, 0 100%)";
+// } */
 </style>

package/dist/runtime/components/list/list-menu.vue

@@ -1,22 +1,22 @@
 <template>
-  <ul class="bg-white space-y-[4px]">
-    <li
-      v-for="(menu, i_menu) in props.items"
-      :key="i_menu"
+  <ul class="bg-white space-y-[4px]">
+    <li
+      v-for="(menu, i_menu) in props.items"
+      :key="i_menu"
       :class="[
   'flex items-center h-[44px] gap-[12px]',
   'rounded-[8px] p-[16px] font-body-large-prominent',
   'hover:bg-primary-container hover:text-word-primary cursor-pointer',
   menu.to === route.path ? 'bg-primary-container text-word-primary' : 'text-word-surface'
-]"
-      @click="onAction(menu.to, menu.action)"
-    >
-      <Icon size="24" :name="menu.icon" />
-      <div>
-        {{ menu.label }}
-      </div>
-    </li>
-  </ul>
+]"
+      @click="onAction(menu.to, menu.action)"
+    >
+      <Icon size="24" :name="menu.icon" />
+      <div>
+        {{ menu.label }}
+      </div>
+    </li>
+  </ul>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-2FA-generate.vue

@@ -1,66 +1,66 @@
 <template>
-  <Modal
-    width="550"
-    title="คำแนะนำการตั้งค่า"
-    title-position="center"
-    :loading="isLoading"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex flex-col gap[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent">1.ดาวน์โหลดแอพยืนยันตัวตน</div>
-        <div>
-          เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
-        </div>
-      </div>
-      <div class="flex flex-col gap[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent">
-          2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
-        </div>
-        <div>
-          สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
-          ยืนยันตัวตน
-        </div>
-      </div>
-      <div class="flex justify-center items-center">
-        <div class="flex items-center gap-[32px]">
-          <Image width="146" height="145" :src="barcode2FA" />
-          <div class="w-[168px] gap-[8px] flex flex-col justify-between">
-            <div class="font-body-large-prominent">
-              {{ key }}
-            </div>
-            <div
-              class="cursor-pointer text-primary font-body-large"
-              @click="copyToClipboard(key)"
-            >
-              คัดลอกคีย์
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col gap[8px] text-gray font-body-large">
-        <div class="font-body-large-prominent">
-          3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
-        </div>
-        <div>
-          หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
-          แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
-          ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <Button
-        color="primary"
-        full-width
-        :disabled="isDisabled"
-        @click="onComplete"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    width="550"
+    title="คำแนะนำการตั้งค่า"
+    title-position="center"
+    :loading="isLoading"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex flex-col gap[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent">1.ดาวน์โหลดแอพยืนยันตัวตน</div>
+        <div>
+          เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
+        </div>
+      </div>
+      <div class="flex flex-col gap[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent">
+          2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
+        </div>
+        <div>
+          สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
+          ยืนยันตัวตน
+        </div>
+      </div>
+      <div class="flex justify-center items-center">
+        <div class="flex items-center gap-[32px]">
+          <Image width="146" height="145" :src="barcode2FA" />
+          <div class="w-[168px] gap-[8px] flex flex-col justify-between">
+            <div class="font-body-large-prominent">
+              {{ key }}
+            </div>
+            <div
+              class="cursor-pointer text-primary font-body-large"
+              @click="copyToClipboard(key)"
+            >
+              คัดลอกคีย์
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap[8px] text-gray font-body-large">
+        <div class="font-body-large-prominent">
+          3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
+        </div>
+        <div>
+          หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
+          แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
+          ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <Button
+        color="primary"
+        full-width
+        :disabled="isDisabled"
+        @click="onComplete"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-2FA.vue

@@ -1,25 +1,25 @@
 <template>
-  <Modal
-    title="การยืนยันตัวตนแบบสองชั้น"
-    title-position="center"
-    :loading="isLoading"
-    @submit="onVerify2FA"
-    v-model="isOpen"
-  >
-    <div class="space-y-[16px]">
-      <div class="text-center font-body-large">
-        ป้อนรหัสยืนยันที่คุณเห็นในแอปยืนยันตัวตน
-      </div>
-      <div class="flex justify-center items-center">
-        <InputOTP ref="twoFaRef" name="otp" v-model="valueOTP" />
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <Button type="submit" color="primary" fullWidth :disabled="!meta.valid">
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="การยืนยันตัวตนแบบสองชั้น"
+    title-position="center"
+    :loading="isLoading"
+    @submit="onVerify2FA"
+    v-model="isOpen"
+  >
+    <div class="space-y-[16px]">
+      <div class="text-center font-body-large">
+        ป้อนรหัสยืนยันที่คุณเห็นในแอปยืนยันตัวตน
+      </div>
+      <div class="flex justify-center items-center">
+        <InputOTP ref="twoFaRef" name="otp" v-model="valueOTP" />
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <Button type="submit" color="primary" fullWidth :disabled="!meta.valid">
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled-alert.vue

@@ -1,37 +1,37 @@
 <template>
-  <Modal
-    title="ลบบัญชีโดยถาวร"
-    title-position="left"
-    width="500"
-    :loading="isLoading"
-    @close="onClose"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="font-body-large">
-        เมื่อคุณลบบัญชี Pukaad คุณจะไม่สามารถกู้คืนบัญชีข้อมูลหรือเนื้อหา
-        ทั้งหมดของคุณได้อีกรวมถึง โปรไฟล์หลัก ข้อความส่วนตัวและสิ่งที่คุณเคย
-        แชร์ในชุมชน
-      </div>
-      <div class="flex flex-col gap-[8px] text-error">
-        <div class="font-body-large-prominent">การลบบัญชี</div>
-        <div class="font-body-large">
-          เพื่อป้องกันการลบบัญชีโดยไม่ได้ตั้งใจบัญชีของคุณจะถูกปิดแบบชั่วคราว
-          ก่อน และจะถูกลบถาวรใน 30 วัน หากคุณไม่เข้าสู่ระบบอีก
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex gap-[16px]">
-        <Button full-width variant="outline" color="black" @click="onClose">
-          ยกเลิก
-        </Button>
-        <Button full-width color="primary" @click="onNext">
-          {{ props.confirmedText }}
-        </Button>
-      </div>
-    </template>
-  </Modal>
+  <Modal
+    title="ลบบัญชีโดยถาวร"
+    title-position="left"
+    width="500"
+    :loading="isLoading"
+    @close="onClose"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="font-body-large">
+        เมื่อคุณลบบัญชี Pukaad คุณจะไม่สามารถกู้คืนบัญชีข้อมูลหรือเนื้อหา
+        ทั้งหมดของคุณได้อีกรวมถึง โปรไฟล์หลัก ข้อความส่วนตัวและสิ่งที่คุณเคย
+        แชร์ในชุมชน
+      </div>
+      <div class="flex flex-col gap-[8px] text-error">
+        <div class="font-body-large-prominent">การลบบัญชี</div>
+        <div class="font-body-large">
+          เพื่อป้องกันการลบบัญชีโดยไม่ได้ตั้งใจบัญชีของคุณจะถูกปิดแบบชั่วคราว
+          ก่อน และจะถูกลบถาวรใน 30 วัน หากคุณไม่เข้าสู่ระบบอีก
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[16px]">
+        <Button full-width variant="outline" color="black" @click="onClose">
+          ยกเลิก
+        </Button>
+        <Button full-width color="primary" @click="onNext">
+          {{ props.confirmedText }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled-confirmed.vue

@@ -1,36 +1,36 @@
 <template>
-  <Modal
-    title="ยืนยันการลบบัญชีโดยถาวร"
-    title-position="left"
-    width="500"
-    :loading="loadingModal"
-    @close="onClose"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="font-body-large">
-        เมื่อคุณกด “ลบบัญชี” บัญชีของคุณจะถูกลบโดยถาวรทันที
-        คุณจะไม่สามารถกู้คืนบัญชี ข้อมูล เนื้อหา หรือการเข้าถึงใด ๆ ได้อีก
-        การดำเนินการนี้ถาวรและไม่สามารถย้อนกลับได้
-      </div>
-      <div class="flex items-center gap-[4px] text-error">
-        <Icon name="lucide:triangle-alert" size="20" />
-        <div class="font-body-large">
-          โปรดตรวจสอบให้แน่ใจว่าคุณต้องการลบบัญชีนี้อย่างถาวรจริง
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex gap-[16px]">
-        <Button full-width type="outline" variant="black" @click="onClose">
-          ยกเลิก
-        </Button>
-        <Button full-width variant="error" @click="onDeleteAccount">
-          {{ props.confirmedText }}
-        </Button>
-      </div>
-    </template>
-  </Modal>
+  <Modal
+    title="ยืนยันการลบบัญชีโดยถาวร"
+    title-position="left"
+    width="500"
+    :loading="loadingModal"
+    @close="onClose"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="font-body-large">
+        เมื่อคุณกด “ลบบัญชี” บัญชีของคุณจะถูกลบโดยถาวรทันที
+        คุณจะไม่สามารถกู้คืนบัญชี ข้อมูล เนื้อหา หรือการเข้าถึงใด ๆ ได้อีก
+        การดำเนินการนี้ถาวรและไม่สามารถย้อนกลับได้
+      </div>
+      <div class="flex items-center gap-[4px] text-error">
+        <Icon name="lucide:triangle-alert" size="20" />
+        <div class="font-body-large">
+          โปรดตรวจสอบให้แน่ใจว่าคุณต้องการลบบัญชีนี้อย่างถาวรจริง
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[16px]">
+        <Button full-width type="outline" variant="black" @click="onClose">
+          ยกเลิก
+        </Button>
+        <Button full-width variant="error" @click="onDeleteAccount">
+          {{ props.confirmedText }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled-reason.vue

@@ -1,52 +1,52 @@
 <template>
-  <Modal
-    title="ลบบัญชี"
-    width="500"
-    :loading="loadingModal"
-    @close="onCancel"
-    @submit="onSubmit"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[8px]">
-      <div class="text-body-large-prominent">ก่อนที่คุณจะลบ เราช่วยคุณได้</div>
-      <div class="text-gray">
-        เราเสียใจที่จะต้องบอกลาคุณ เราอยากทราบเหตุผลที่คุณจะลบบัญชีของ คุณ
-        เนื่องจากเราอาจช่วยปัญหาที่พบทั่วไปได้ คุณอาจดำเนินการต่อโดยไม่
-        แจ้งเหตุผลได้เช่นกัน
-      </div>
-
-      <div
-        v-for="(item, i) in items"
-        :key="i"
+  <Modal
+    title="ลบบัญชี"
+    width="500"
+    :loading="loadingModal"
+    @close="onCancel"
+    @submit="onSubmit"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[8px]">
+      <div class="text-body-large-prominent">ก่อนที่คุณจะลบ เราช่วยคุณได้</div>
+      <div class="text-gray">
+        เราเสียใจที่จะต้องบอกลาคุณ เราอยากทราบเหตุผลที่คุณจะลบบัญชีของ คุณ
+        เนื่องจากเราอาจช่วยปัญหาที่พบทั่วไปได้ คุณอาจดำเนินการต่อโดยไม่
+        แจ้งเหตุผลได้เช่นกัน
+      </div>
+
+      <div
+        v-for="(item, i) in items"
+        :key="i"
         :class="[
   'flex flex-col p-[16px]',
   i < items.length - 1 && 'border-b-[1px] border-mercury'
-]"
-      >
-        <InputRadio
-          name="reason"
-          column-gap="auto"
-          :label="item.label"
-          label-position="left"
-          :item="item.value"
-          v-model="formState.reason"
-        />
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <Button full-width variant="outline" color="black" @click="onCancel">
-        ยกเลิก
-      </Button>
-      <Button
-        type="submit"
-        color="primary"
-        full-width
-        :disabled="!formState.reason"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+]"
+      >
+        <InputRadio
+          name="reason"
+          column-gap="auto"
+          :label="item.label"
+          label-position="left"
+          :item="item.value"
+          v-model="formState.reason"
+        />
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <Button full-width variant="outline" color="black" @click="onCancel">
+        ยกเลิก
+      </Button>
+      <Button
+        type="submit"
+        color="primary"
+        full-width
+        :disabled="!formState.reason"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-account-disabled.vue

@@ -1,13 +1,13 @@
 <template>
-  <component
-    v-for="modal in modals"
-    :key="modal.key"
-    :is="modal.component"
-    :confimed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
-    @close="modelValue = false"
-    @complete="onComplete(modal.key)"
-    v-model="modalStates[modal.key]"
-  />
+  <component
+    v-for="modal in modals"
+    :key="modal.key"
+    :is="modal.component"
+    :confimed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
+    @close="modelValue = false"
+    @complete="onComplete(modal.key)"
+    v-model="modalStates[modal.key]"
+  />
 </template>
 
 <script setup>