pukaad-ui-lib 1.459.0 → 1.461.0

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

@@ -1,34 +1,34 @@
 <template>
-  <div
-    class="inline-flex flex-col gap-[4px]"
+  <div
+    class="inline-flex flex-col gap-[4px]"
     :style="{
   width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-  >
-    <label v-if="props.label" class="font-body-large-prominent text-gray">
-      {{ props.label }}
-    </label>
-
-    <input
-      ref="inputRef"
+}"
+  >
+    <label v-if="props.label" class="font-body-large-prominent text-gray">
+      {{ props.label }}
+    </label>
+
+    <input
+      ref="inputRef"
       :class="[
   'slider w-full bg-mercury rounded-[8px]',
   !props.appearance ? 'appearance-none' : '',
   color
-]"
-      type="range"
-      :min="props.min"
-      :max="props.max"
-      :step="props.step"
+]"
+      type="range"
+      :min="props.min"
+      :max="props.max"
+      :step="props.step"
       :style="{
   height: `${props.lineHeight}px`,
   '--thumb-size': `${props.thumbSize}px`,
   '--color-color': color,
   '--thumb-border': `${props.thumbBorder}px`
-}"
-      v-model="modelValue"
-    />
-  </div>
+}"
+      v-model="modelValue"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,51 +1,51 @@
 <template>
-  <ShadPopover :open="isOpen" :modal="false" @update:open="onOpenChange">
-    <ShadPopoverAnchor as-child>
-      <InputTextField
-        ref="fieldRef"
-        v-model="modelValue"
-        :id="props.id"
-        :name="props.name"
-        :class="props.class"
-        :label="props.label"
-        :rules="props.rules"
-        :required="props.required"
-        :description="props.description"
-        :placeholder="props.placeholder"
-        :disabled-border="props.disabledBorder"
-        :disabled-error-message="props.disabledErrorMessage"
-        :show-counter="props.showCounter"
-        :limit="props.limit"
-        autocomplete="off"
-        @click="onActivate"
-        @keydown="onKeydown"
-      />
-    </ShadPopoverAnchor>
-
-    <ShadPopoverContent
-      ref="popoverContentRef"
-      align="start"
-      class="max-h-[312px] overflow-auto"
-      @openAutoFocus.prevent
-      @closeAutoFocus.prevent
-      @scroll="handleListScroll"
-    >
-      <div
-        v-for="(item, index) in suggestions"
-        :key="index"
-        class="flex cursor-pointer flex-col gap-[4px] px-[8px] py-[6px] hover:bg-smoke"
-        @mousedown.prevent="selectItem(item)"
-      >
-        <div class="font-body-medium">{{ item[props.labelKey] }}</div>
-        <div
-          v-if="props.descriptionKey && item[props.descriptionKey]"
-          class="font-body-small text-gray"
-        >
-          {{ item[props.descriptionKey] }}
-        </div>
-      </div>
-    </ShadPopoverContent>
-  </ShadPopover>
+  <ShadPopover :open="isOpen" :modal="false" @update:open="onOpenChange">
+    <ShadPopoverAnchor as-child>
+      <InputTextField
+        ref="fieldRef"
+        v-model="modelValue"
+        :id="props.id"
+        :name="props.name"
+        :class="props.class"
+        :label="props.label"
+        :rules="props.rules"
+        :required="props.required"
+        :description="props.description"
+        :placeholder="props.placeholder"
+        :disabled-border="props.disabledBorder"
+        :disabled-error-message="props.disabledErrorMessage"
+        :show-counter="props.showCounter"
+        :limit="props.limit"
+        autocomplete="off"
+        @click="onActivate"
+        @keydown="onKeydown"
+      />
+    </ShadPopoverAnchor>
+
+    <ShadPopoverContent
+      ref="popoverContentRef"
+      align="start"
+      class="max-h-[312px] overflow-auto"
+      @openAutoFocus.prevent
+      @closeAutoFocus.prevent
+      @scroll="handleListScroll"
+    >
+      <div
+        v-for="(item, index) in suggestions"
+        :key="index"
+        class="flex cursor-pointer flex-col gap-[4px] px-[8px] py-[6px] hover:bg-smoke"
+        @mousedown.prevent="selectItem(item)"
+      >
+        <div class="font-body-medium">{{ item[props.labelKey] }}</div>
+        <div
+          v-if="props.descriptionKey && item[props.descriptionKey]"
+          class="font-body-small text-gray"
+        >
+          {{ item[props.descriptionKey] }}
+        </div>
+      </div>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>

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

@@ -1,29 +1,29 @@
 <template>
-  <div class="inline-flex items-center">
-    <label class="flex gap-[8px] items-center font-body-large">
-      <div
-        class="relative inline-block w-[43px] h-[24px] cursor-pointer"
-        @click="onClick"
-      >
-        <input
-          type="checkbox"
-          class="sr-only peer"
-          disabled
-          v-model="modelValue"
-        />
-        <div
-          :class="['absolute inset-0 bg-cloud rounded-full transition', color]"
-        ></div>
-        <div
-          class="absolute left-[3px] top-[3px] w-[18px] h-[18px] bg-white rounded-full transition peer-checked:translate-x-[19px]"
-        ></div>
-      </div>
-
-      <div v-if="props.labelPosition == 'right'">
-        {{ props.label }}
-      </div>
-    </label>
-  </div>
+  <div class="inline-flex items-center">
+    <label class="flex gap-[8px] items-center font-body-large">
+      <div
+        class="relative inline-block w-[43px] h-[24px] cursor-pointer"
+        @click="onClick"
+      >
+        <input
+          type="checkbox"
+          class="sr-only peer"
+          disabled
+          v-model="modelValue"
+        />
+        <div
+          :class="['absolute inset-0 bg-cloud rounded-full transition', color]"
+        ></div>
+        <div
+          class="absolute left-[3px] top-[3px] w-[18px] h-[18px] bg-white rounded-full transition peer-checked:translate-x-[19px]"
+        ></div>
+      </div>
+
+      <div v-if="props.labelPosition == 'right'">
+        {{ props.label }}
+      </div>
+    </label>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-tag-modal.vue

@@ -1,89 +1,89 @@
 <template>
-  <div :class="cn('w-full', props.class)">
-    <InputTextField
-        ref="fieldRef"
-        v-model="displayValue"
-        :id="props.id"
-        :name="props.name"
-        :label="props.label"
-        :placeholder="props.placeholder"
-        :description="props.description"
-        :rules="props.rules"
-        :required="props.required"
-        :disabled="props.disabled"
-        :disabled-error-message="props.disabledErrorMessage"
-        :icon-append="appendIcon"
-        class="cursor-pointer"
-        readonly
-        @click="onOpenModal"
-        @click-icon-append="onAppendClick"
-      />
-
-    <Modal v-model="isOpenModal" :title="props.title">
-      <template #title>
-        <span class="font-title-medium-prominent text-black">
-          {{ props.title }}
-        </span>
-      </template>
-
-      <div class="flex w-full flex-col gap-[16px]">
-        <InputSearch
-          v-model="searchKeyword"
-          name="tag-modal-search"
-          :placeholder="props.searchPlaceholder"
-          icon="lucide:search"
-          icon-position="right"
-          disabled-error-message
-        />
-
-        <div
-          v-if="isInitialLoading"
-          class="flex h-[392px] items-center justify-center"
-        >
-          <Icon
-            name="lucide:loader-circle"
-            :size="24"
-            class="animate-spin text-primary"
-          />
-        </div>
-
-        <div
-          v-else-if="filteredOptions.length > 0"
-          class="flex max-h-[592px] flex-wrap content-start gap-[8px] overflow-y-auto pr-[4px]"
-          @scroll.passive="onListScroll"
-        >
-          <Chip
-            v-for="option in filteredOptions"
-            :key="optionKey(option)"
-            :color="isSelected(option) ? 'primary' : 'bright'"
-            class="cursor-pointer transition-colors"
-            @click="onSelectOption(option)"
-          >
-            {{ option.label }}
-          </Chip>
-
-          <div
-            v-if="isLoadingMore"
-            class="flex w-full items-center justify-center py-[8px]"
-          >
-            <Icon
-              name="lucide:loader-circle"
-              :size="20"
-              class="animate-spin text-primary"
-            />
-          </div>
-        </div>
-
-        <div
-          v-else
-          class="flex h-[392px] flex-col items-center justify-center gap-[8px]"
-        >
-          <Icon name="pukaad:page-not-found" class="h-[100px] w-[121px]" />
-          <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-        </div>
-      </div>
-    </Modal>
-  </div>
+  <div :class="cn('w-full', props.class)">
+    <InputTextField
+        ref="fieldRef"
+        v-model="displayValue"
+        :id="props.id"
+        :name="props.name"
+        :label="props.label"
+        :placeholder="props.placeholder"
+        :description="props.description"
+        :rules="props.rules"
+        :required="props.required"
+        :disabled="props.disabled"
+        :disabled-error-message="props.disabledErrorMessage"
+        :icon-append="appendIcon"
+        class="cursor-pointer"
+        readonly
+        @click="onOpenModal"
+        @click-icon-append="onAppendClick"
+      />
+
+    <Modal v-model="isOpenModal" :title="props.title">
+      <template #title>
+        <span class="font-title-medium-prominent text-black">
+          {{ props.title }}
+        </span>
+      </template>
+
+      <div class="flex w-full flex-col gap-[16px]">
+        <InputSearch
+          v-model="searchKeyword"
+          name="tag-modal-search"
+          :placeholder="props.searchPlaceholder"
+          icon="lucide:search"
+          icon-position="right"
+          disabled-error-message
+        />
+
+        <div
+          v-if="isInitialLoading"
+          class="flex h-[392px] items-center justify-center"
+        >
+          <Icon
+            name="lucide:loader-circle"
+            :size="24"
+            class="animate-spin text-primary"
+          />
+        </div>
+
+        <div
+          v-else-if="filteredOptions.length > 0"
+          class="flex max-h-[592px] flex-wrap content-start gap-[8px] overflow-y-auto pr-[4px]"
+          @scroll.passive="onListScroll"
+        >
+          <Chip
+            v-for="option in filteredOptions"
+            :key="optionKey(option)"
+            :color="isSelected(option) ? 'primary' : 'bright'"
+            class="cursor-pointer transition-colors"
+            @click="onSelectOption(option)"
+          >
+            {{ option.label }}
+          </Chip>
+
+          <div
+            v-if="isLoadingMore"
+            class="flex w-full items-center justify-center py-[8px]"
+          >
+            <Icon
+              name="lucide:loader-circle"
+              :size="20"
+              class="animate-spin text-primary"
+            />
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="flex h-[392px] flex-col items-center justify-center gap-[8px]"
+        >
+          <Icon name="pukaad:page-not-found" class="h-[100px] w-[121px]" />
+          <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+        </div>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script setup>