pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,107 +1,107 @@
 <template>
-  <ShadPopover v-model:open="open" :modal="false">
-    <ShadPopoverAnchor as-child>
-      <InputTextField
-        ref="fieldRef"
-        v-model="searchText"
-        :label="props.label"
-        :name="props.name"
-        :rules="props.rules"
-        :required="props.required"
-        :description="props.description"
-        :placeholder="props.placeholder"
-        :disabled-border="props.disabledBorder"
-        :disabled-error-message="props.disabledErrorMessage"
-        autocomplete="off"
-        @focus="open = true"
-        @click="open = true"
-        @blur="handleBlur"
-        :show-counter="props.showCounter"
-        :limit="props.limit"
-      >
-        <template
-          v-if="$slots.prepend || props.iconPosition === 'left' && !props.disabledIcon"
-          #prepend
-        >
-          <slot name="prepend">
-            <Icon
-              :name="props.icon"
-              size="16"
-              class="cursor-pointer text-black"
-              @mousedown.stop.prevent="open = true"
-            />
-          </slot>
-        </template>
-        <template
-          v-if="$slots.append || modelValue || props.iconPosition === 'right' && !props.disabledIcon"
-          #append
-        >
-          <slot name="append">
-            <Icon
-              v-if="modelValue || props.iconPosition === 'right' && !props.disabledIcon"
-              @mousedown.stop.prevent="handleIconMouseDown"
-              :name="modelValue ? 'lucide:x' : props.icon"
-              size="16"
-              class="cursor-pointer text-black"
-            />
-          </slot>
-        </template>
-      </InputTextField>
-    </ShadPopoverAnchor>
-    <ShadPopoverContent
-      @openAutoFocus.prevent
-      @closeAutoFocus.prevent
-      @scroll="handleListScroll"
-      align="start"
-      class="max-h-[312px] overflow-auto"
-      ref="popoverContentRef"
-    >
-      <div
+  <ShadPopover v-model:open="open" :modal="false">
+    <ShadPopoverAnchor as-child>
+      <InputTextField
+        ref="fieldRef"
+        v-model="searchText"
+        :label="props.label"
+        :name="props.name"
+        :rules="props.rules"
+        :required="props.required"
+        :description="props.description"
+        :placeholder="props.placeholder"
+        :disabled-border="props.disabledBorder"
+        :disabled-error-message="props.disabledErrorMessage"
+        autocomplete="off"
+        @focus="open = true"
+        @click="open = true"
+        @blur="handleBlur"
+        :show-counter="props.showCounter"
+        :limit="props.limit"
+      >
+        <template
+          v-if="$slots.prepend || props.iconPosition === 'left' && !props.disabledIcon"
+          #prepend
+        >
+          <slot name="prepend">
+            <Icon
+              :name="props.icon"
+              size="16"
+              class="cursor-pointer text-black"
+              @mousedown.stop.prevent="open = true"
+            />
+          </slot>
+        </template>
+        <template
+          v-if="$slots.append || modelValue || props.iconPosition === 'right' && !props.disabledIcon"
+          #append
+        >
+          <slot name="append">
+            <Icon
+              v-if="modelValue || props.iconPosition === 'right' && !props.disabledIcon"
+              @mousedown.stop.prevent="handleIconMouseDown"
+              :name="modelValue ? 'lucide:x' : props.icon"
+              size="16"
+              class="cursor-pointer text-black"
+            />
+          </slot>
+        </template>
+      </InputTextField>
+    </ShadPopoverAnchor>
+    <ShadPopoverContent
+      @openAutoFocus.prevent
+      @closeAutoFocus.prevent
+      @scroll="handleListScroll"
+      align="start"
+      class="max-h-[312px] overflow-auto"
+      ref="popoverContentRef"
+    >
+      <div
         v-if="
   filteredOptions.length === 0 && !(props.fetchFn && paginationState.loading)
-"
-        class="flex flex-col gap-[8px] items-center justify-center h-[192px]"
-      >
-        <Icon name="pukaad:page-not-found" class="w-[77px] h-[64px]" />
-        <div class="font-body-medium text-center text-gray">ไม่พบข้อมูล</div>
-      </div>
-      <div v-else>
-        <div
-          v-for="option in filteredOptions"
-          :key="option.value"
-          class="cursor-pointer hover:bg-smoke flex items-center gap-[8px] px-[8px] py-[6px]"
-          @mousedown.prevent="selectOption(option)"
-        >
-          <slot name="option" :option="option">
-            <div class="flex flex-col gap-[4px] w-full">
-              <div class="font-body-medium">
-                {{ option.label }}
-              </div>
-              <div v-if="option.description" class="font-body-small text-gray">
-                {{ option.description }}
-              </div>
-            </div>
-            <Icon
-              v-if="modelValue === option.value"
-              name="lucide:check"
-              size="16"
-            />
-          </slot>
-        </div>
-
-        <!-- Loading Indicator -->
-        <div
-          v-if="props.fetchFn && paginationState.loading"
-          class="flex justify-center p-2"
-        >
-          <Icon
-            name="lucide:loader-2"
-            class="animate-spin h-5 w-5 text-primary"
-          />
-        </div>
-      </div>
-    </ShadPopoverContent>
-  </ShadPopover>
+"
+        class="flex flex-col gap-[8px] items-center justify-center h-[192px]"
+      >
+        <Icon name="pukaad:page-not-found" class="w-[77px] h-[64px]" />
+        <div class="font-body-medium text-center text-gray">ไม่พบข้อมูล</div>
+      </div>
+      <div v-else>
+        <div
+          v-for="option in filteredOptions"
+          :key="option.value"
+          class="cursor-pointer hover:bg-smoke flex items-center gap-[8px] px-[8px] py-[6px]"
+          @mousedown.prevent="selectOption(option)"
+        >
+          <slot name="option" :option="option">
+            <div class="flex flex-col gap-[4px] w-full">
+              <div class="font-body-medium">
+                {{ option.label }}
+              </div>
+              <div v-if="option.description" class="font-body-small text-gray">
+                {{ option.description }}
+              </div>
+            </div>
+            <Icon
+              v-if="modelValue === option.value"
+              name="lucide:check"
+              size="16"
+            />
+          </slot>
+        </div>
+
+        <!-- Loading Indicator -->
+        <div
+          v-if="props.fetchFn && paginationState.loading"
+          class="flex justify-center p-2"
+        >
+          <Icon
+            name="lucide:loader-2"
+            class="animate-spin h-5 w-5 text-primary"
+          />
+        </div>
+      </div>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-birth-date.vue

@@ -1,24 +1,24 @@
 <template>
-  <InputDatePicker
-    v-model="modelValue"
-    :id="props.id"
-    :name="props.name"
-    :label="props.label"
-    :placeholder="props.placeholder"
-    :disabled="props.disabled"
-    :required="props.required"
-    :description="props.description"
-    :disabled-error-message="props.disabledErrorMessage"
-    :date-format="props.dateFormat"
-    :locale="props.locale"
-    :layout="props.layout"
-    :max-value="today"
-    :min-value="minDate"
-    :rules="birthDateRules"
-    :default-placeholder="defaultPlaceholder"
-    :reverse-years="true"
-    :class="props.class"
-  />
+  <InputDatePicker
+    v-model="modelValue"
+    :id="props.id"
+    :name="props.name"
+    :label="props.label"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :required="props.required"
+    :description="props.description"
+    :disabled-error-message="props.disabledErrorMessage"
+    :date-format="props.dateFormat"
+    :locale="props.locale"
+    :layout="props.layout"
+    :max-value="today"
+    :min-value="minDate"
+    :rules="birthDateRules"
+    :default-placeholder="defaultPlaceholder"
+    :reverse-years="true"
+    :class="props.class"
+  />
 </template>
 
 <script setup>

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

@@ -1,99 +1,99 @@
 <template>
-  <div :class="['flex items-end gap-[16px] w-full', props.class]">
-    <div
-      v-if="!hasMedia"
-      :class="['flex items-center gap-[8px] h-[36px] shrink-0', props.disabled && 'opacity-50']"
-    >
-      <slot name="actions" :open-image-picker="openImagePicker" :open-video-picker="openVideoPicker">
-        <Button
-          variant="text"
-          class="w-[32px] h-[32px] disabled:opacity-100"
-          :disabled="props.disabled || props.disabledMedia"
-          @click="openImagePicker"
-        >
-          <Icon name="lucide:image" class="size-[20px] text-black" />
-        </Button>
-        <Button
-          variant="text"
-          class="w-[32px] h-[32px] disabled:opacity-100"
-          :disabled="props.disabled || props.disabledMedia"
-          @click="openVideoPicker"
-        >
-          <Icon name="lucide:video" class="size-[20px] text-black" />
-        </Button>
-        <Button variant="text" class="w-[32px] h-[32px] disabled:opacity-100" disabled>
-          <Icon name="lucide:megaphone" class="size-[20px] text-black" />
-        </Button>
-        <Button variant="text" class="w-[32px] h-[32px] disabled:opacity-100" disabled>
-          <Icon name="lucide:package" class="size-[20px] text-black" />
-        </Button>
-      </slot>
-    </div>
-
-    <div
-      ref="dropZoneRef"
+  <div :class="['flex items-end gap-[16px] w-full', props.class]">
+    <div
+      v-if="!hasMedia"
+      :class="['flex items-center gap-[8px] h-[36px] shrink-0', props.disabled && 'opacity-50']"
+    >
+      <slot name="actions" :open-image-picker="openImagePicker" :open-video-picker="openVideoPicker">
+        <Button
+          variant="text"
+          class="w-[32px] h-[32px] disabled:opacity-100"
+          :disabled="props.disabled || props.disabledMedia"
+          @click="openImagePicker"
+        >
+          <Icon name="lucide:image" class="size-[20px] text-black" />
+        </Button>
+        <Button
+          variant="text"
+          class="w-[32px] h-[32px] disabled:opacity-100"
+          :disabled="props.disabled || props.disabledMedia"
+          @click="openVideoPicker"
+        >
+          <Icon name="lucide:video" class="size-[20px] text-black" />
+        </Button>
+        <Button variant="text" class="w-[32px] h-[32px] disabled:opacity-100" disabled>
+          <Icon name="lucide:megaphone" class="size-[20px] text-black" />
+        </Button>
+        <Button variant="text" class="w-[32px] h-[32px] disabled:opacity-100" disabled>
+          <Icon name="lucide:package" class="size-[20px] text-black" />
+        </Button>
+      </slot>
+    </div>
+
+    <div
+      ref="dropZoneRef"
       :class="[
   'flex-1 min-w-0 flex flex-col rounded-[8px] border-[1px] bg-white transition-colors',
   isOverDropZone ? 'border-primary ring-1 ring-primary bg-info' : 'border-mercury focus-within:border-primary',
   props.disabled && 'opacity-50'
-]"
-    >
-      <div v-show="hasMedia" class="px-[8px] pt-[8px]">
-        <InputFile
-          ref="fileRef"
-          v-model="media"
-          :name="`${props.name}-media`"
-          :accept="mediaAccept"
-          :limit="mediaLimit"
-          :preview-size="66"
-          :min-video-seconds="1"
-          :max-video-seconds="0"
-          :width="66"
-          :height="66"
-          disabled-drop
-        >
-          <template #default="{ label }">
-            <div class="flex flex-col items-center justify-center gap-[4px] size-[66px] text-gray">
-              <Icon name="lucide:image-plus" class="size-[20px]" />
-              <span class="font-body-small text-black">{{ `\u0E40\u0E1E\u0E34\u0E48\u0E21${label}` }}</span>
-            </div>
-          </template>
-        </InputFile>
-      </div>
-
-      <textarea
-        ref="textareaRef"
-        v-model="text"
-        rows="1"
-        :name="props.name"
-        :maxlength="props.maxlength"
-        :placeholder="props.placeholder"
-        :disabled="props.disabled"
-        :style="{ maxHeight: `${props.maxHeight}px` }"
-        class="block w-full min-h-[34px] resize-none overflow-y-auto bg-transparent px-[12px] py-[4px] font-body-large text-black placeholder:text-muted-foreground outline-none"
-        @keydown.enter="onEnter"
-        @paste="onPaste"
-      />
-    </div>
-
-    <div class="flex items-center justify-center w-[32px] h-[36px] shrink-0">
-      <Button variant="text" :disabled="!canSend" @click="submit">
-        <Icon
-          name="fluent:send-24-filled"
-          :class="['size-[20px]', canSend ? 'text-primary' : 'text-cloud']"
-        />
-      </Button>
-    </div>
-
-    <input
-      ref="pickerRef"
-      type="file"
-      class="hidden"
-      multiple
-      :accept="pickerAccept"
-      @change="onPick"
-    />
-  </div>
+]"
+    >
+      <div v-show="hasMedia" class="px-[8px] pt-[8px]">
+        <InputFile
+          ref="fileRef"
+          v-model="media"
+          :name="`${props.name}-media`"
+          :accept="mediaAccept"
+          :limit="mediaLimit"
+          :preview-size="66"
+          :min-video-seconds="1"
+          :max-video-seconds="0"
+          :width="66"
+          :height="66"
+          disabled-drop
+        >
+          <template #default="{ label }">
+            <div class="flex flex-col items-center justify-center gap-[4px] size-[66px] text-gray">
+              <Icon name="lucide:image-plus" class="size-[20px]" />
+              <span class="font-body-small text-black">{{ `\u0E40\u0E1E\u0E34\u0E48\u0E21${label}` }}</span>
+            </div>
+          </template>
+        </InputFile>
+      </div>
+
+      <textarea
+        ref="textareaRef"
+        v-model="text"
+        rows="1"
+        :name="props.name"
+        :maxlength="props.maxlength"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+        :style="{ maxHeight: `${props.maxHeight}px` }"
+        class="block w-full min-h-[34px] resize-none overflow-y-auto bg-transparent px-[12px] py-[4px] font-body-large text-black placeholder:text-muted-foreground outline-none"
+        @keydown.enter="onEnter"
+        @paste="onPaste"
+      />
+    </div>
+
+    <div class="flex items-center justify-center w-[32px] h-[36px] shrink-0">
+      <Button variant="text" :disabled="!canSend" @click="submit">
+        <Icon
+          name="fluent:send-24-filled"
+          :class="['size-[20px]', canSend ? 'text-primary' : 'text-cloud']"
+        />
+      </Button>
+    </div>
+
+    <input
+      ref="pickerRef"
+      type="file"
+      class="hidden"
+      multiple
+      :accept="pickerAccept"
+      @change="onPick"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,30 +1,30 @@
 <template>
-  <ShadFormField
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-  >
-    <ShadFormItem>
-      <ShadFormLabel
-        class="flex gap-2 items-center font-body-medium text-black leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+  <ShadFormField
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField }"
+  >
+    <ShadFormItem>
+      <ShadFormLabel
+        class="flex gap-2 items-center font-body-medium text-black leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
         :class="[
   props.labelPosition === 'left' ? 'flex-row-reverse justify-between w-full' : ''
-]"
-      >
-        <ShadFormControl>
-          <ShadCheckbox
-            v-bind="componentField"
-            v-model="modelValue"
-            :indeterminate="props.indeterminate"
-            :style="{ width: `${props.size}px`, height: `${props.size}px` }"
-          />
-        </ShadFormControl>
-        <span :class="[props.labelPosition === 'left' ? 'flex-1' : '']">
-          {{ props.label }}
-        </span>
-      </ShadFormLabel>
-    </ShadFormItem>
-  </ShadFormField>
+]"
+      >
+        <ShadFormControl>
+          <ShadCheckbox
+            v-bind="componentField"
+            v-model="modelValue"
+            :indeterminate="props.indeterminate"
+            :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+          />
+        </ShadFormControl>
+        <span :class="[props.labelPosition === 'left' ? 'flex-1' : '']">
+          {{ props.label }}
+        </span>
+      </ShadFormLabel>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>