pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,120 +1,120 @@
 <template>
-  <div class="flex flex-col gap-[4px] w-full">
-    <div class="font-body-large-prominent text-gray">{{ props.label }}</div>
-    <div class="relative w-full min-w-0">
-      <div
+  <div class="flex flex-col gap-[4px] w-full">
+    <div class="font-body-large-prominent text-gray">{{ props.label }}</div>
+    <div class="relative w-full min-w-0">
+      <div
         :class="
   selected ? 'absolute inset-x-0 bottom-0 opacity-0 pointer-events-none' : ''
-"
-        :inert="!!selected"
-      >
-        <InputCombobox
-          ref="comboboxRef"
-          name="input_mention"
-          v-model="comboValue"
-          multiple
-          :placeholder="props.placeholder"
-          placeholder-search="ค้นหาการเอ่ยถึงที่มีอยู่"
-          command-list-class="max-h-none"
-        >
-          <template #options="{ search }">
-            <ShadTabs
-              v-model="currentTab"
-              class="w-full gap-[8px]"
-              :data-search="syncSearch(search)"
-            >
-              <ShadTabsList class="grid grid-cols-3 mx-[8px] mt-[4px] w-auto">
-                <ShadTabsTrigger value="post"> โพสต์ </ShadTabsTrigger>
-                <ShadTabsTrigger value="blog"> บล็อก </ShadTabsTrigger>
-                <ShadTabsTrigger value="link"> ลิงก์ </ShadTabsTrigger>
-              </ShadTabsList>
-              <ShadTabsContent
-                v-for="tab in listTabs"
-                :key="tab"
-                :ref="(el) => setPanel(tab, el)"
-                :value="tab"
-                class="flex-none h-[320px] overflow-y-auto"
-              >
-                <div
+"
+        :inert="!!selected"
+      >
+        <InputCombobox
+          ref="comboboxRef"
+          name="input_mention"
+          v-model="comboValue"
+          multiple
+          :placeholder="props.placeholder"
+          placeholder-search="ค้นหาการเอ่ยถึงที่มีอยู่"
+          command-list-class="max-h-none"
+        >
+          <template #options="{ search }">
+            <ShadTabs
+              v-model="currentTab"
+              class="w-full gap-[8px]"
+              :data-search="syncSearch(search)"
+            >
+              <ShadTabsList class="grid grid-cols-3 mx-[8px] mt-[4px] w-auto">
+                <ShadTabsTrigger value="post"> โพสต์ </ShadTabsTrigger>
+                <ShadTabsTrigger value="blog"> บล็อก </ShadTabsTrigger>
+                <ShadTabsTrigger value="link"> ลิงก์ </ShadTabsTrigger>
+              </ShadTabsList>
+              <ShadTabsContent
+                v-for="tab in listTabs"
+                :key="tab"
+                :ref="(el) => setPanel(tab, el)"
+                :value="tab"
+                class="flex-none h-[320px] overflow-y-auto"
+              >
+                <div
                   :class="[
   'flex flex-col min-h-full',
   tab === 'link' && 'gap-[16px] px-[8px] pt-[4px]'
-]"
-                >
-                  <ShadForm
-                    v-if="tab === 'link'"
-                    class="flex flex-col gap-[16px] shrink-0"
-                    @submit="addLink"
-                  >
-                    <InputTextField
-                      name="mention_new_link_url"
-                      v-model="newLinkUrl"
-                      :rules="validateLinkUrl"
-                      placeholder="URL (ระบุลิงก์ที่เชื่อมโยงถึง http://www.example.com)"
-                    />
-                    <InputTextField
-                      name="mention_new_link_title"
-                      v-model="newLinkTitle"
-                      :rules="validateLinkTitle"
-                      placeholder="ชื่อลิงก์"
-                    />
-                    <Button
-                      type="submit"
-                      color="primary"
-                      class="ml-auto w-fit"
-                      :disabled="!canSubmitLink"
-                    >
-                      ยืนยัน
-                    </Button>
-                  </ShadForm>
-                  <div class="flex flex-col flex-1">
-                    <div
-                      v-for="card in states[tab].items"
-                      :key="card.id"
+]"
+                >
+                  <ShadForm
+                    v-if="tab === 'link'"
+                    class="flex flex-col gap-[16px] shrink-0"
+                    @submit="addLink"
+                  >
+                    <InputTextField
+                      name="mention_new_link_url"
+                      v-model="newLinkUrl"
+                      :rules="validateLinkUrl"
+                      placeholder="URL (ระบุลิงก์ที่เชื่อมโยงถึง http://www.example.com)"
+                    />
+                    <InputTextField
+                      name="mention_new_link_title"
+                      v-model="newLinkTitle"
+                      :rules="validateLinkTitle"
+                      placeholder="ชื่อลิงก์"
+                    />
+                    <Button
+                      type="submit"
+                      color="primary"
+                      class="ml-auto w-fit"
+                      :disabled="!canSubmitLink"
+                    >
+                      ยืนยัน
+                    </Button>
+                  </ShadForm>
+                  <div class="flex flex-col flex-1">
+                    <div
+                      v-for="card in states[tab].items"
+                      :key="card.id"
                       :class="[
   'py-[6px] hover:bg-mercury hover:cursor-pointer',
   tab !== 'link' && 'px-[8px]'
-]"
-                      @click="selectCard(card)"
-                    >
-                      <CardMention
-                        :item="card"
-                        :selected="selected?.id === card.id"
-                      />
-                    </div>
-                    <ShadCommandEmpty
+]"
+                      @click="selectCard(card)"
+                    >
+                      <CardMention
+                        :item="card"
+                        :selected="selected?.id === card.id"
+                      />
+                    </div>
+                    <ShadCommandEmpty
                       v-if="
   !states[tab].items.length && !states[tab].loading && !states[tab].hasMore
-"
-                      force-show
-                      class="h-auto flex-1 min-h-[160px]"
-                    />
-                    <template v-if="states[tab].loading">
-                      <div
-                        v-for="n in states[tab].items.length ? 2 : 5"
-                        :key="`skeleton-${n}`"
-                        :class="['py-[6px]', tab !== 'link' && 'px-[8px]']"
-                      >
-                        <CardMentionSkeleton :mention-type="tab" />
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </ShadTabsContent>
-            </ShadTabs>
-          </template>
-        </InputCombobox>
-      </div>
-
-      <div
-        v-if="selected"
-        class="border border-mercury rounded-[8px] bg-white p-[8px] w-full min-w-0 cursor-pointer"
-        @click="comboboxRef?.openPopover()"
-      >
-        <CardMention :item="selected" removable @remove="clearSelection" />
-      </div>
-    </div>
-  </div>
+"
+                      force-show
+                      class="h-auto flex-1 min-h-[160px]"
+                    />
+                    <template v-if="states[tab].loading">
+                      <div
+                        v-for="n in states[tab].items.length ? 2 : 5"
+                        :key="`skeleton-${n}`"
+                        :class="['py-[6px]', tab !== 'link' && 'px-[8px]']"
+                      >
+                        <CardMentionSkeleton :mention-type="tab" />
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </ShadTabsContent>
+            </ShadTabs>
+          </template>
+        </InputCombobox>
+      </div>
+
+      <div
+        v-if="selected"
+        class="border border-mercury rounded-[8px] bg-white p-[8px] w-full min-w-0 cursor-pointer"
+        @click="comboboxRef?.openPopover()"
+      >
+        <CardMention :item="selected" removable @remove="clearSelection" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,48 +1,48 @@
 <template>
-  <div class="space-y-[4px]">
-    <div
-      class="relative w-full h-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
-      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
-      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
-      @click="isOpenModal = true"
-    >
-      <div
-        v-if="!previewUrl"
-        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
-      >
-        <Icon name="lucide:upload" :size="24" />
-        <div class="font-body-small">คลิกเพื่ออัปโหลด</div>
-      </div>
-
-      <template v-else>
-        <div
-          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
-        >
-          <Icon name="lucide:upload" :size="20" />
-          <div class="font-body-medium">อัปโหลดรูปภาพหนังสือเดินทาง</div>
-        </div>
-        <div
-          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
-          @click.stop="onRemove"
-        >
-          <Icon name="lucide:x" :size="16" />
-        </div>
-      </template>
-    </div>
-
-    <div
-      v-if="!props.disabledErrorMessage && errorMessage"
-      class="font-body-small text-destructive"
-    > 
-      {{ errorMessage }}
-    </div>
-
-    <ModalPassport
-      v-model="isOpenModal"
-      :item="previewUrl"
-      @complete="onComplete"
-    />
-  </div>
+  <div class="space-y-[4px]">
+    <div
+      class="relative w-full h-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
+      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
+      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
+      @click="isOpenModal = true"
+    >
+      <div
+        v-if="!previewUrl"
+        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
+      >
+        <Icon name="lucide:upload" :size="24" />
+        <div class="font-body-small">คลิกเพื่ออัปโหลด</div>
+      </div>
+
+      <template v-else>
+        <div
+          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
+        >
+          <Icon name="lucide:upload" :size="20" />
+          <div class="font-body-medium">อัปโหลดรูปภาพหนังสือเดินทาง</div>
+        </div>
+        <div
+          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
+          @click.stop="onRemove"
+        >
+          <Icon name="lucide:x" :size="16" />
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="!props.disabledErrorMessage && errorMessage"
+      class="font-body-small text-destructive"
+    > 
+      {{ errorMessage }}
+    </div>
+
+    <ModalPassport
+      v-model="isOpenModal"
+      :item="previewUrl"
+      @complete="onComplete"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,49 +1,49 @@
 <template>
-  <InputTextField
-    ref="inputTextFieldRef"
-    v-bind="props"
-    :type="isShowPassword ? 'text' : 'password'"
-    :icon-append="isShowPassword ? 'lucide:eye' : 'lucide:eye-off'"
-    :disabled-error-message="props.new"
-    :rules="props.rules || defaultRules"
-    @click-icon-append="switchEye"
-    v-model="modelValue"
-  >
-    <template #label>
-      <ShadFormLabel class="w-full flex justify-between">
-        <div>
-          {{ props.label }}
-          <span v-if="props.required" class="text-destructive">*</span>
-        </div>
-        <Button
-          v-if="!props.disabledForgotPassword"
-          variant="text"
-          color="primary"
-          class="font-body-medium"
-          @click="handleForgotPassword"
-        >
-          ลืมรหัสผ่าน
-        </Button>
-      </ShadFormLabel>
-    </template>
-  </InputTextField>
-  <div v-if="props.new" class="space-y-[4px]">
-    <div
-      v-for="(item, i) in listValid"
-      :key="i"
-      class="font-body-large text-gray flex gap-[8px] items-center"
-    >
-      <Icon
+  <InputTextField
+    ref="inputTextFieldRef"
+    v-bind="props"
+    :type="isShowPassword ? 'text' : 'password'"
+    :icon-append="isShowPassword ? 'lucide:eye' : 'lucide:eye-off'"
+    :disabled-error-message="props.new"
+    :rules="props.rules || defaultRules"
+    @click-icon-append="switchEye"
+    v-model="modelValue"
+  >
+    <template #label>
+      <ShadFormLabel class="w-full flex justify-between">
+        <div>
+          {{ props.label }}
+          <span v-if="props.required" class="text-destructive">*</span>
+        </div>
+        <Button
+          v-if="!props.disabledForgotPassword"
+          variant="text"
+          color="primary"
+          class="font-body-medium"
+          @click="handleForgotPassword"
+        >
+          ลืมรหัสผ่าน
+        </Button>
+      </ShadFormLabel>
+    </template>
+  </InputTextField>
+  <div v-if="props.new" class="space-y-[4px]">
+    <div
+      v-for="(item, i) in listValid"
+      :key="i"
+      class="font-body-large text-gray flex gap-[8px] items-center"
+    >
+      <Icon
         :name="
   item.valid ? 'fa6-solid:circle-check' : 'fa6-solid:circle-exclamation'
-"
-        :class="colorValidate(item.valid)"
-      />
-      <div>
-        {{ item.label }}
-      </div>
-    </div>
-  </div>
+"
+        :class="colorValidate(item.valid)"
+      />
+      <div>
+        {{ item.label }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-personal-card-id-selfie.vue

@@ -1,48 +1,48 @@
 <template>
-  <div class="space-y-[4px]">
-    <div
-      class="relative w-full h-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
-      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
-      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
-      @click="isOpenModal = true"
-    >
-      <div
-        v-if="!previewUrl"
-        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
-      >
-        <Icon name="lucide:upload" :size="24" />
-        <div class="font-body-small">คลิกเพื่ออัปโหลด</div>
-      </div>
-
-      <template v-else>
-        <div
-          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
-        >
-          <Icon name="lucide:upload" :size="20" />
-          <div class="font-body-medium">อัปโหลดรูปใบหน้าและบัตร</div>
-        </div>
-        <div
-          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
-          @click.stop="onRemove"
-        >
-          <Icon name="lucide:x" :size="16" /> 
-        </div>
-      </template>
-    </div>
-
-    <div
-      v-if="!props.disabledErrorMessage && errorMessage"
-      class="font-body-small text-destructive"
-    >
-      {{ errorMessage }}
-    </div>
-
-    <ModalPersonalCardIDSelfie
-      v-model="isOpenModal"
-      :item="previewUrl"
-      @complete="onComplete"
-    />
-  </div>
+  <div class="space-y-[4px]">
+    <div
+      class="relative w-full h-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
+      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
+      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
+      @click="isOpenModal = true"
+    >
+      <div
+        v-if="!previewUrl"
+        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
+      >
+        <Icon name="lucide:upload" :size="24" />
+        <div class="font-body-small">คลิกเพื่ออัปโหลด</div>
+      </div>
+
+      <template v-else>
+        <div
+          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
+        >
+          <Icon name="lucide:upload" :size="20" />
+          <div class="font-body-medium">อัปโหลดรูปใบหน้าและบัตร</div>
+        </div>
+        <div
+          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
+          @click.stop="onRemove"
+        >
+          <Icon name="lucide:x" :size="16" /> 
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="!props.disabledErrorMessage && errorMessage"
+      class="font-body-small text-destructive"
+    >
+      {{ errorMessage }}
+    </div>
+
+    <ModalPersonalCardIDSelfie
+      v-model="isOpenModal"
+      :item="previewUrl"
+      @complete="onComplete"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-personal-card-id.vue

@@ -1,48 +1,48 @@
 <template>
-  <div class="space-y-[4px]">
-    <div
-      class="relative w-full h-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
-      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
-      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
-      @click="isOpenModal = true"
-    >
-      <div
-        v-if="!previewUrl"
-        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
-      >
-        <Icon name="lucide:upload" :size="24" />
-        <div class="font-body-small">คลิกเพื่ออัปโหลด</div>
-      </div>
-
-      <template v-else>
-        <div
-          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
-        >
-          <Icon name="lucide:upload" :size="20" />
-          <div class="font-body-medium">อัปโหลดรูปภาพบัตรประชาชน</div>
-        </div>
-        <div
-          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
-          @click.stop="onRemove"
-        >
-          <Icon name="lucide:x" :size="16" />
-        </div>
-      </template>
-    </div>
-
-    <div
-      v-if="!props.disabledErrorMessage && errorMessage"
-      class="font-body-small text-destructive"
-    >
-      {{ errorMessage }}
-    </div>
-
-    <ModalPersonalCardID
-      v-model="isOpenModal"
-      :item="previewUrl"
-      @complete="onComplete"
-    />
-  </div>
+  <div class="space-y-[4px]">
+    <div
+      class="relative w-full h-full aspect-[224/126] rounded-[8px] overflow-hidden cursor-pointer group border-2 border-dashed"
+      :class="previewUrl ? 'border-transparent bg-cover bg-center' : 'border-mercury bg-white'"
+      :style="previewUrl ? { backgroundImage: `url(${previewUrl})` } : void 0"
+      @click="isOpenModal = true"
+    >
+      <div
+        v-if="!previewUrl"
+        class="absolute inset-0 flex flex-col justify-center items-center gap-[8px] text-primary"
+      >
+        <Icon name="lucide:upload" :size="24" />
+        <div class="font-body-small">คลิกเพื่ออัปโหลด</div>
+      </div>
+
+      <template v-else>
+        <div
+          class="absolute bottom-0 w-full text-white bg-black/50 flex gap-[8px] items-center justify-center py-[8px]"
+        >
+          <Icon name="lucide:upload" :size="20" />
+          <div class="font-body-medium">อัปโหลดรูปภาพบัตรประชาชน</div>
+        </div>
+        <div
+          class="absolute top-[8px] right-[8px] p-[4px] bg-white/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity"
+          @click.stop="onRemove"
+        >
+          <Icon name="lucide:x" :size="16" />
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="!props.disabledErrorMessage && errorMessage"
+      class="font-body-small text-destructive"
+    >
+      {{ errorMessage }}
+    </div>
+
+    <ModalPersonalCardID
+      v-model="isOpenModal"
+      :item="previewUrl"
+      @complete="onComplete"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,15 +1,15 @@
 <template>
-  <InputTextField
-    ref="phoneRef"
-    v-bind="$props"
-    :rules="defaultRules || props.rules"
-    :max-length="computedMaxLength"
-    v-model="phoneCode"
-  >
-    <template #append v-if="props.showIconStatus && validationState !== 'none'">
-      <Icon :name="validationIcon" size="20" :class="validationIconClass" />
-    </template>
-  </InputTextField>
+  <InputTextField
+    ref="phoneRef"
+    v-bind="$props"
+    :rules="defaultRules || props.rules"
+    :max-length="computedMaxLength"
+    v-model="phoneCode"
+  >
+    <template #append v-if="props.showIconStatus && validationState !== 'none'">
+      <Icon :name="validationIcon" size="20" :class="validationIconClass" />
+    </template>
+  </InputTextField>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-profile-name.vue

@@ -1,14 +1,14 @@
 <template>
-  <InputTextField
-    ref="inputTextFieldRef"
-    v-bind="props"
-    :rules="props.rules || defaultRules"
-    v-model="modelValue"
-  >
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData || {}" />
-    </template>
-  </InputTextField>
+  <InputTextField
+    ref="inputTextFieldRef"
+    v-bind="props"
+    :rules="props.rules || defaultRules"
+    v-model="modelValue"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData || {}" />
+    </template>
+  </InputTextField>
 </template>
 
 <script setup>