pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/input/input-select-province.vue

@@ -1,100 +1,100 @@
 <template>
-  <ShadPopover v-model:open="open">
-    <ShadPopoverTrigger as-child>
-      <div class="flex items-center gap-[8px] cursor-pointer w-fit">
-        <div class="font-body-small text-gray">
-          {{ selectedLabel || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14" }}
-        </div>
-        <Icon name="lucide:chevron-down" size="16" class="text-gray" />
-      </div>
-    </ShadPopoverTrigger>
-    <ShadPopoverContent class="flex p-[24px] w-[425px] h-full">
-      <ShadCommand>
-        <div class="space-y-[22px]">
-          <div class="font-title-medium-prominent">เลือกจังหวัด</div>
-          <div class="flex flex-col gap-[16px]">
-            <InputTextField placeholder="ค้นหาจังหวัด..." v-model="search">
-              <template #append>
-                <Icon name="lucide:search" />
-              </template>
-            </InputTextField>
-            <ShadCommandList class="h-[550px]">
-              <div class="flex flex-col gap-[16px]">
-                <div class="flex flex-col gap-[8px]">
-                  <div>ปลายทางยอดนิยม</div>
-                  <div class="relative">
-                    <ShadCarousel>
-                      <ShadCarouselContent>
-                        <ShadCarouselItem
-                          v-for="province in itemsPopular"
-                          :key="province.id"
-                          class="flex cursor-pointer basis-1/3.5"
-                          @click="selectProvince(province)"
-                        >
-                          <Card
-                            class="relative overflow-hidden bg-mercury w-[140px] h-[180px]"
-                          >
-                            <!-- No image state -->
-                            <template v-if="province.image_cover_url === null">
-                              <div class="font-medium">
-                                {{ province.name_th }}
-                              </div>
-                              <div
-                                class="flex flex-col items-center justify-center gap-[4px] h-full mt-2"
-                              >
-                                <Icon name="lucide:image" size="28" />
-                                <div class="text-gray">ไม่มีรูป</div>
-                              </div>
-                            </template>
-
-                            <!-- Has image state -->
-                            <template v-else>
-                              <img
+  <ShadPopover v-model:open="open">
+    <ShadPopoverTrigger as-child>
+      <div class="flex items-center gap-[8px] cursor-pointer w-fit">
+        <div class="font-body-small text-gray">
+          {{ selectedLabel || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14" }}
+        </div>
+        <Icon name="lucide:chevron-down" size="16" class="text-gray" />
+      </div>
+    </ShadPopoverTrigger>
+    <ShadPopoverContent class="flex p-[24px] w-[425px] h-full">
+      <ShadCommand>
+        <div class="space-y-[22px]">
+          <div class="font-title-medium-prominent">เลือกจังหวัด</div>
+          <div class="flex flex-col gap-[16px]">
+            <InputTextField placeholder="ค้นหาจังหวัด..." v-model="search">
+              <template #append>
+                <Icon name="lucide:search" />
+              </template>
+            </InputTextField>
+            <ShadCommandList class="h-[550px]">
+              <div class="flex flex-col gap-[16px]">
+                <div class="flex flex-col gap-[8px]">
+                  <div>ปลายทางยอดนิยม</div>
+                  <div class="relative">
+                    <ShadCarousel>
+                      <ShadCarouselContent>
+                        <ShadCarouselItem
+                          v-for="province in itemsPopular"
+                          :key="province.id"
+                          class="flex cursor-pointer basis-1/3.5"
+                          @click="selectProvince(province)"
+                        >
+                          <Card
+                            class="relative overflow-hidden bg-mercury w-[140px] h-[180px]"
+                          >
+                            <!-- No image state -->
+                            <template v-if="province.image_cover_url === null">
+                              <div class="font-medium">
+                                {{ province.name_th }}
+                              </div>
+                              <div
+                                class="flex flex-col items-center justify-center gap-[4px] h-full mt-2"
+                              >
+                                <Icon name="lucide:image" size="28" />
+                                <div class="text-gray">ไม่มีรูป</div>
+                              </div>
+                            </template>
+
+                            <!-- Has image state -->
+                            <template v-else>
+                              <img
                                 :src="
   province.image_cover_url || 'https://placehold.co/140x180?text=Place+Photo'
-"
-                                class="w-[140px] h-[180px] object-cover"
-                              />
-                              <div
-                                class="absolute top-0 left-0 right-0 p-2 font-medium text-white bg-gradient-to-b from-black/70 to-transparent"
-                              >
-                                {{ province.name_th }}
-                              </div>
-                            </template>
-                          </Card>
-                        </ShadCarouselItem>
-                      </ShadCarouselContent>
-                      <ShadCarouselPrevious class="left-0" />
-                      <ShadCarouselNext class="right-0" />
-                    </ShadCarousel>
-                  </div>
-                </div>
-                <ShadCommandGroup>
-                  <ShadCommandItem
-                    v-for="province in filteredProvinces"
-                    :key="province.id"
-                    :value="province.name_th"
-                    @select="selectProvince(province)"
-                    class="flex items-center justify-between"
-                  >
-                    <span>
-                      {{ province.name_th }}
-                    </span>
-                    <Icon
-                      v-if="modelValue?.id === province.id"
-                      name="lucide:check"
-                      class="h-4 w-4"
-                    />
-                  </ShadCommandItem>
-                </ShadCommandGroup>
-              </div>
-              <ShadCommandEmpty />
-            </ShadCommandList>
-          </div>
-        </div>
-      </ShadCommand>
-    </ShadPopoverContent>
-  </ShadPopover>
+"
+                                class="w-[140px] h-[180px] object-cover"
+                              />
+                              <div
+                                class="absolute top-0 left-0 right-0 p-2 font-medium text-white bg-gradient-to-b from-black/70 to-transparent"
+                              >
+                                {{ province.name_th }}
+                              </div>
+                            </template>
+                          </Card>
+                        </ShadCarouselItem>
+                      </ShadCarouselContent>
+                      <ShadCarouselPrevious class="left-0" />
+                      <ShadCarouselNext class="right-0" />
+                    </ShadCarousel>
+                  </div>
+                </div>
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="province in filteredProvinces"
+                    :key="province.id"
+                    :value="province.name_th"
+                    @select="selectProvince(province)"
+                    class="flex items-center justify-between"
+                  >
+                    <span>
+                      {{ province.name_th }}
+                    </span>
+                    <Icon
+                      v-if="modelValue?.id === province.id"
+                      name="lucide:check"
+                      class="h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+              </div>
+              <ShadCommandEmpty />
+            </ShadCommandList>
+          </div>
+        </div>
+      </ShadCommand>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>

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

@@ -1,64 +1,64 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel v-if="$slots.label || props.label" 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 v-if="$slots.label || props.label" 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>
-      </ShadFormLabel>
-
-      <ShadSelect v-bind="componentField">
-        <ShadFormControl>
-          <ShadSelectTrigger :class="props.class">
-            <div class="flex items-center gap-2 min-w-0">
-              <Icon
-                v-if="selectedOption?.icon"
-                :name="selectedOption.icon"
-                class="size-4 shrink-0"
-              />
-              <span v-if="selectedOption">{{ selectedOption.label }}</span>
-              <span v-else class="text-muted-foreground">{{ props.placeholder }}</span>
-            </div>
-          </ShadSelectTrigger>
-        </ShadFormControl>
-        <ShadSelectContent>
-          <ShadSelectItem
-            v-for="option in props.options"
-            :key="option.value"
-            :value="option.value"
-          >
-            <div class="flex items-center gap-2">
-              <Icon v-if="option.icon" :name="option.icon" class="size-4" />
-              <div v-if="option.description" class="flex flex-col gap-[2px]">
-                <span class="font-body-medium">{{ option.label }}</span>
-                <span class="font-body-small text-gray">{{ option.description }}</span>
-              </div>
-              <span v-else>{{ option.label }}</span>
-            </div>
-          </ShadSelectItem>
-        </ShadSelectContent>
-      </ShadSelect>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+      </ShadFormLabel>
+
+      <ShadSelect v-bind="componentField">
+        <ShadFormControl>
+          <ShadSelectTrigger :class="props.class">
+            <div class="flex items-center gap-2 min-w-0">
+              <Icon
+                v-if="selectedOption?.icon"
+                :name="selectedOption.icon"
+                class="size-4 shrink-0"
+              />
+              <span v-if="selectedOption">{{ selectedOption.label }}</span>
+              <span v-else class="text-muted-foreground">{{ props.placeholder }}</span>
+            </div>
+          </ShadSelectTrigger>
+        </ShadFormControl>
+        <ShadSelectContent>
+          <ShadSelectItem
+            v-for="option in props.options"
+            :key="option.value"
+            :value="option.value"
+          >
+            <div class="flex items-center gap-2">
+              <Icon v-if="option.icon" :name="option.icon" class="size-4" />
+              <div v-if="option.description" class="flex flex-col gap-[2px]">
+                <span class="font-body-medium">{{ option.label }}</span>
+                <span class="font-body-small text-gray">{{ option.description }}</span>
+              </div>
+              <span v-else>{{ option.label }}</span>
+            </div>
+          </ShadSelectItem>
+        </ShadSelectContent>
+      </ShadSelect>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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>