pukaad-ui-lib 1.21.1 → 1.22.2

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

@@ -1,92 +1,92 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField, errorMessage }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel class="w-full">
-        <slot name="label">
-          <div
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField, errorMessage }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel class="w-full">
+        <slot name="label">
+          <div
             :class="[
   'flex-1',
   props.disabledBorder && 'font-body-small-prominent'
-]"
-          >
-            {{ props.label }}
-            <span v-if="props.required" class="text-destructive">*</span>
-          </div>
-        </slot>
-        <div
-          v-if="props.showCounter"
-          :class="[props.disabledBorder && 'font-body-small']"
-        >
-          <div
-            v-if="props.limit > 0"
-            :class="[modelValue.length > props.limit && 'text-destructive']"
-          >
-            {{ modelValue.length }}/{{ props.limit }}
-          </div>
-        </div>
-      </ShadFormLabel>
-
-      <ShadInputGroup
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
+            :class="[modelValue.length > props.limit && 'text-destructive']"
+          >
+            {{ modelValue.length }}/{{ props.limit }}
+          </div>
+        </div>
+      </ShadFormLabel>
+
+      <ShadInputGroup
         :class="[
   props.disabledBorder && 'border-0 ring-0 focus-within:border-0 focus-within:ring-0'
-]"
-      >
-        <ShadFormControl>
-          <ShadInputGroupInput
-            v-bind="componentField"
-            :id="props.id || props.name"
-            :class="props.class"
-            :readonly="props.readonly"
-            :disabled="props.disabled"
-            :placeholder="props.placeholder"
-            :type="props.type"
-            @click="emits('click', $event)"
-          >
-          </ShadInputGroupInput>
-        </ShadFormControl>
-        <ShadInputGroupAddon
-          v-if="$slots.prepend || props.iconPrepend"
-          align="inline-start"
-          @click="emits('clickPrepend', $event)"
-        >
-          <ShadInputGroupButton
-            class="rounded-full"
-            size="icon-xs"
-            @click="emits('clickIconPrepend', $event)"
-          >
-            <slot name="prepend">
-              <Icon :name="props.iconPrepend" size="16" />
-            </slot>
-          </ShadInputGroupButton>
-        </ShadInputGroupAddon>
-        <ShadInputGroupAddon
-          v-if="$slots.append || props.iconAppend"
-          align="inline-end"
-          @click="emits('clickAppend', $event)"
-        >
-          <slot name="append">
-            <ShadInputGroupButton
-              class="rounded-full"
-              @click="emits('clickIconAppend', $event)"
-            >
-              <Icon :name="props.iconAppend" size="16" />
-            </ShadInputGroupButton>
-          </slot>
-        </ShadInputGroupAddon>
-      </ShadInputGroup>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+]"
+      >
+        <ShadFormControl>
+          <ShadInputGroupInput
+            v-bind="componentField"
+            :id="props.id || props.name"
+            :class="props.class"
+            :readonly="props.readonly"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
+            :type="props.type"
+            @click="emits('click', $event)"
+          >
+          </ShadInputGroupInput>
+        </ShadFormControl>
+        <ShadInputGroupAddon
+          v-if="$slots.prepend || props.iconPrepend"
+          align="inline-start"
+          @click="emits('clickPrepend', $event)"
+        >
+          <ShadInputGroupButton
+            class="rounded-full"
+            size="icon-xs"
+            @click="emits('clickIconPrepend', $event)"
+          >
+            <slot name="prepend">
+              <Icon :name="props.iconPrepend" size="16" />
+            </slot>
+          </ShadInputGroupButton>
+        </ShadInputGroupAddon>
+        <ShadInputGroupAddon
+          v-if="$slots.append || props.iconAppend"
+          align="inline-end"
+          @click="emits('clickAppend', $event)"
+        >
+          <slot name="append">
+            <ShadInputGroupButton
+              class="rounded-full"
+              @click="emits('clickIconAppend', $event)"
+            >
+              <Icon :name="props.iconAppend" size="16" />
+            </ShadInputGroupButton>
+          </slot>
+        </ShadInputGroupAddon>
+      </ShadInputGroup>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -23,13 +23,13 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_58: {}, __VLS_73: {};
+declare var __VLS_18: {}, __VLS_54: {}, __VLS_69: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_21) => any;
+    label?: (props: typeof __VLS_18) => any;
 } & {
-    prepend?: (props: typeof __VLS_58) => any;
+    prepend?: (props: typeof __VLS_54) => any;
 } & {
-    append?: (props: typeof __VLS_73) => any;
+    append?: (props: typeof __VLS_69) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
@@ -53,8 +53,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    limit: number;
     disabled: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -26,9 +26,9 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_21) => any;
+    label?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => void;
@@ -43,14 +43,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    limit: number;
     disabled: boolean;
+    rows: number;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
-    rows: number;
     heightScroll: 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.vue

@@ -1,70 +1,70 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel class="w-full">
-        <slot name="label">
-          <div
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel class="w-full">
+        <slot name="label">
+          <div
             :class="[
   'flex-1',
   props.disabledBorder && 'font-body-small-prominent'
-]"
-          >
-            {{ props.label }}
-            <span v-if="props.required" class="text-destructive">*</span>
-          </div>
-        </slot>
-        <div
-          v-if="props.showCounter"
-          :class="[props.disabledBorder && 'font-body-small']"
-        >
-          <div
-            v-if="props.limit > 0"
-            :class="[modelValue.length > props.limit && 'text-destructive']"
-          >
-            {{ modelValue.length }}/{{ props.limit }}
-          </div>
-          <div v-else>{{ modelValue.length }} ตัวอักษร</div>
-        </div>
-      </ShadFormLabel>
-
-      <ShadInputGroup
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
+            :class="[modelValue.length > props.limit && 'text-destructive']"
+          >
+            {{ modelValue.length }}/{{ props.limit }}
+          </div>
+          <div v-else>{{ modelValue.length }} ตัวอักษร</div>
+        </div>
+      </ShadFormLabel>
+
+      <ShadInputGroup
         :class="[
   props.disabledBorder && 'border-0 ring-0 focus-within:border-0 focus-within:ring-0'
-]"
-      >
-        <ShadFormControl>
-          <ShadInputGroupTextarea
-            v-bind="componentField"
-            ref="textareaRef"
-            :id="props.id || props.name"
-            :class="props.class"
-            :readonly="props.readonly"
-            :disabled="props.disabled"
-            :placeholder="props.placeholder"
-            :rows="props.rows"
+]"
+      >
+        <ShadFormControl>
+          <ShadInputGroupTextarea
+            v-bind="componentField"
+            ref="textareaRef"
+            :id="props.id || props.name"
+            :class="props.class"
+            :readonly="props.readonly"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
+            :rows="props.rows"
             :style="{
   resize: props.resize,
   height: props.fullHeight ? '100%' : props.height ? `${props.height}px` : void 0,
   width: props.fullWidth ? '100%' : props.width ? `${props.width}px` : void 0
-}"
-            @input="autoHeight()"
-          >
-          </ShadInputGroupTextarea>
-        </ShadFormControl>
-      </ShadInputGroup>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+}"
+            @input="autoHeight()"
+          >
+          </ShadInputGroupTextarea>
+        </ShadFormControl>
+      </ShadInputGroup>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -26,9 +26,9 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_21) => any;
+    label?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => void;
@@ -43,14 +43,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    limit: number;
     disabled: boolean;
+    rows: number;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
-    rows: number;
     heightScroll: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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>