pukaad-ui-lib 1.459.0 → 1.461.0

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

@@ -1,58 +1,58 @@
 <template>
-  <div class="flex items-start gap-[8px]">
-    <div class="min-w-0 flex-1">
-      <div
-        v-if="props.label || props.showCounter"
-        class="mb-[8px] flex w-full items-center justify-between gap-2"
-      >
-        <div class="font-body-large-prominent text-gray">
-          {{ props.label }}
-          <span v-if="props.required" class="text-destructive">*</span>
-        </div>
-        <div
-          v-if="props.showCounter && props.limit > 0"
+  <div class="flex items-start gap-[8px]">
+    <div class="min-w-0 flex-1">
+      <div
+        v-if="props.label || props.showCounter"
+        class="mb-[8px] flex w-full items-center justify-between gap-2"
+      >
+        <div class="font-body-large-prominent text-gray">
+          {{ props.label }}
+          <span v-if="props.required" class="text-destructive">*</span>
+        </div>
+        <div
+          v-if="props.showCounter && props.limit > 0"
           :class="[
   'font-body-small text-gray',
   (value || '').length > props.limit && 'text-destructive'
-]"
-        >
-          {{ (value || "").length }}/{{ props.limit }}
-        </div>
-      </div>
-
-      <div class="flex items-start gap-[8px] font-body-large">
-        <InputSelect
-          v-if="!props.hideType"
-          :name="`${props.name}-type`"
-          :class="props.selectClass"
-          :options="props.options"
-          :model-value="type"
-          @update:model-value="onSelectType"
-        />
-        <div :class="['flex-1', props.fieldClass]">
-          <InputTextField
-            :key="fieldKey"
-            :name="`${props.name}-value`"
-            class="w-full"
-            :placeholder="props.placeholder"
-            :rules="props.rules"
-            @change="onFieldChange"
-            v-model="value"
-          />
-        </div>
-      </div>
-    </div>
-
-    <Button
-      v-if="props.removable"
-      variant="icon"
-      color="destructive"
-      size="icon"
-      @click="emit('remove')"
-    >
-      <Icon name="lucide:trash-2" class="size-[20px]" />
-    </Button>
-  </div>
+]"
+        >
+          {{ (value || "").length }}/{{ props.limit }}
+        </div>
+      </div>
+
+      <div class="flex items-start gap-[8px] font-body-large">
+        <InputSelect
+          v-if="!props.hideType"
+          :name="`${props.name}-type`"
+          :class="props.selectClass"
+          :options="props.options"
+          :model-value="type"
+          @update:model-value="onSelectType"
+        />
+        <div :class="['flex-1', props.fieldClass]">
+          <InputTextField
+            :key="fieldKey"
+            :name="`${props.name}-value`"
+            class="w-full"
+            :placeholder="props.placeholder"
+            :rules="props.rules"
+            @change="onFieldChange"
+            v-model="value"
+          />
+        </div>
+      </div>
+    </div>
+
+    <Button
+      v-if="props.removable"
+      variant="icon"
+      color="destructive"
+      size="icon"
+      @click="emit('remove')"
+    >
+      <Icon name="lucide:trash-2" class="size-[20px]" />
+    </Button>
+  </div>
 </template>
 
 <script setup>

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

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

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

@@ -1,57 +1,57 @@
 <template>
-  <div :class="['relative', props.class]">
-    <div
-      ref="scroller"
-      class="flex items-center gap-[8px] scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-      :class="isEllipsis ? 'overflow-hidden' : 'overflow-x-auto'"
-      @scroll="syncArrows"
-    >
-      <div
-        v-for="(item, index) in labels"
-        :key="`${item.text}-${index}`"
+  <div :class="['relative', props.class]">
+    <div
+      ref="scroller"
+      class="flex items-center gap-[8px] scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      :class="isEllipsis ? 'overflow-hidden' : 'overflow-x-auto'"
+      @scroll="syncArrows"
+    >
+      <div
+        v-for="(item, index) in labels"
+        :key="`${item.text}-${index}`"
         :class="[
   'inline-flex items-center rounded-[2px] bg-mercury px-[4px] py-[2px] font-label-sans-serif-large',
   isEllipsis ? 'min-w-0' : 'shrink-0',
   props.clickable && 'cursor-pointer'
-]"
-        @click="props.clickable && emit('click', item)"
-      >
-        <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{{
-          item.text
-        }}</span>
-      </div>
-    </div>
-
-    <template v-if="canSlide">
-      <div
-        v-if="canScrollLeft"
-        class="absolute top-0 left-0 flex h-[32px] w-[50px] items-center bg-gradient-to-r from-bright from-50% to-transparent pl-[4px]"
-      >
-        <Button
-          variant="icon"
-          circle
-          class="size-[24px] hover:bg-mercury hover:drop-shadow"
-          @click="slide(-1)"
-        >
-          <Icon name="lucide:chevron-left" size="16" />
-        </Button>
-      </div>
-
-      <div
-        v-if="canScrollRight"
-        class="absolute top-0 right-0 flex h-[32px] w-[50px] items-center justify-end bg-gradient-to-l from-bright from-50% to-transparent pr-[4px]"
-      >
-        <Button
-          variant="icon"
-          circle
-          class="size-[24px] hover:bg-mercury hover:drop-shadow"
-          @click="slide(1)"
-        >
-          <Icon name="lucide:chevron-right" size="16" />
-        </Button>
-      </div>
-    </template>
-  </div>
+]"
+        @click="props.clickable && emit('click', item)"
+      >
+        <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{{
+          item.text
+        }}</span>
+      </div>
+    </div>
+
+    <template v-if="canSlide">
+      <div
+        v-if="canScrollLeft"
+        class="absolute top-0 left-0 flex h-[32px] w-[50px] items-center bg-gradient-to-r from-bright from-50% to-transparent pl-[4px]"
+      >
+        <Button
+          variant="icon"
+          circle
+          class="size-[24px] hover:bg-mercury hover:drop-shadow"
+          @click="slide(-1)"
+        >
+          <Icon name="lucide:chevron-left" size="16" />
+        </Button>
+      </div>
+
+      <div
+        v-if="canScrollRight"
+        class="absolute top-0 right-0 flex h-[32px] w-[50px] items-center justify-end bg-gradient-to-l from-bright from-50% to-transparent pr-[4px]"
+      >
+        <Button
+          variant="icon"
+          circle
+          class="size-[24px] hover:bg-mercury hover:drop-shadow"
+          @click="slide(1)"
+        >
+          <Icon name="lucide:chevron-right" size="16" />
+        </Button>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/label/label.vue

@@ -1,55 +1,55 @@
 <template>
-  <div v-if="hasItems" class="relative flex items-center">
-    <div
-      ref="scroller"
+  <div v-if="hasItems" class="relative flex items-center">
+    <div
+      ref="scroller"
       :class="[
   'flex items-center gap-[8px]',
   isSlide ? 'w-full scroll-smooth overflow-x-hidden' : 'flex-wrap'
-]"
-      @scroll="syncArrows"
-    >
-      <div
-        v-for="(item, index) in props.items"
-        :id="item.id != null ? String(item.id) : void 0"
-        :key="item.id ?? `${item.label}-${index}`"
+]"
+      @scroll="syncArrows"
+    >
+      <div
+        v-for="(item, index) in props.items"
+        :id="item.id != null ? String(item.id) : void 0"
+        :key="item.id ?? `${item.label}-${index}`"
         :class="[
   'inline-flex items-center rounded-[2px] bg-mercury px-[4px] py-[2px] font-label-sans-serif-large text-black shrink-0 max-w-full select-none h-[24px]',
   props.clickable && 'cursor-pointer'
-]"
-        @click="handleItemClick(item)"
-      >
-        <span class="truncate">{{ item.label }}</span>
-      </div>
-    </div>
-
-    <div
-      v-if="isSlide && canScrollLeft"
-      class="absolute top-0 left-0 flex h-full w-[48px] items-center bg-gradient-to-r from-white via-white to-transparent pl-[4px] pointer-events-none"
-    >
-      <Button
-        variant="icon"
-        circle
-        class="pointer-events-auto size-[24px]"
-        @click="slideScroll(-1)"
-      >
-        <Icon name="lucide:chevron-left" :size="16" />
-      </Button>
-    </div>
-
-    <div
-      v-if="isSlide && canScrollRight"
-      class="absolute top-0 right-0 flex h-full w-[48px] items-center justify-end bg-gradient-to-l from-white via-white to-transparent pr-[4px] pointer-events-none"
-    >
-      <Button
-        variant="icon"
-        circle
-        class="pointer-events-auto size-[24px]"
-        @click="slideScroll(1)"
-      >
-        <Icon name="lucide:chevron-right" :size="16" />
-      </Button>
-    </div>
-  </div>
+]"
+        @click="handleItemClick(item)"
+      >
+        <span class="truncate">{{ item.label }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="isSlide && canScrollLeft"
+      class="absolute top-0 left-0 flex h-full w-[48px] items-center bg-gradient-to-r from-white via-white to-transparent pl-[4px] pointer-events-none"
+    >
+      <Button
+        variant="icon"
+        circle
+        class="pointer-events-auto size-[24px]"
+        @click="slideScroll(-1)"
+      >
+        <Icon name="lucide:chevron-left" :size="16" />
+      </Button>
+    </div>
+
+    <div
+      v-if="isSlide && canScrollRight"
+      class="absolute top-0 right-0 flex h-full w-[48px] items-center justify-end bg-gradient-to-l from-white via-white to-transparent pr-[4px] pointer-events-none"
+    >
+      <Button
+        variant="icon"
+        circle
+        class="pointer-events-auto size-[24px]"
+        @click="slideScroll(1)"
+      >
+        <Icon name="lucide:chevron-right" :size="16" />
+      </Button>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/loading.vue

@@ -1,12 +1,12 @@
 <template>
-  <Transition name="loading-fade">
-    <div
-      v-if="loading"
-      class="absolute inset-0 bg-white/50 flex items-center justify-center z-50"
-    >
-      <div class="loading-spinner"></div>
-    </div>
-  </Transition>
+  <Transition name="loading-fade">
+    <div
+      v-if="loading"
+      class="absolute inset-0 bg-white/50 flex items-center justify-center z-50"
+    >
+      <div class="loading-spinner"></div>
+    </div>
+  </Transition>
 </template>
 
 <script setup>

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

@@ -1,52 +1,52 @@
 <template>
-  <Modal class="w-[512px]" title="คำแนะนำการตั้งค่า" :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 text-black">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 text-black">
-          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 text-black">
-          3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
-        </div>
-        <div>
-          หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
-          แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
-          ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <Button color="primary" class="w-full" :disabled="isDisabled" @click="onComplete">
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal class="w-[512px]" title="คำแนะนำการตั้งค่า" :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 text-black">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 text-black">
+          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 text-black">
+          3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
+        </div>
+        <div>
+          หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
+          แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
+          ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <Button color="primary" class="w-full" :disabled="isDisabled" @click="onComplete">
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,32 +1,32 @@
 <template>
-  <Modal
-    title="การยืนยันตัวตนแบบสองชั้น"
-    :loading="isLoading"
-    @submit="onVerify2FA"
-    v-model="isOpen"
-    description="ป้อนรหัสยืนยัน 6 หลักจากแอปยืนยันตัวตน"
-  >
-    <div class="space-y-[24px]">
-      <div class="flex justify-center items-center">
-        <InputOTP
-          ref="twoFaRef"
-          name="otp"
-          v-model="valueOTP"
-          :rules="() => true"
-        />
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <Button
-        class="w-full"
-        type="submit"
-        color="primary"
-        :disabled="!meta.valid"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="การยืนยันตัวตนแบบสองชั้น"
+    :loading="isLoading"
+    @submit="onVerify2FA"
+    v-model="isOpen"
+    description="ป้อนรหัสยืนยัน 6 หลักจากแอปยืนยันตัวตน"
+  >
+    <div class="space-y-[24px]">
+      <div class="flex justify-center items-center">
+        <InputOTP
+          ref="twoFaRef"
+          name="otp"
+          v-model="valueOTP"
+          :rules="() => true"
+        />
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <Button
+        class="w-full"
+        type="submit"
+        color="primary"
+        :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] w-full">
-        <Button class="w-full" variant="outline" color="black" @click="onClose">
-          ยกเลิก
-        </Button>
-        <Button class="w-full" 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] w-full">
+        <Button class="w-full" variant="outline" color="black" @click="onClose">
+          ยกเลิก
+        </Button>
+        <Button class="w-full" color="primary" @click="onNext">
+          {{ props.confirmedText }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>