pukaad-ui-lib 1.271.2 → 1.272.0

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

@@ -1,151 +1,151 @@
 <template>
-  <div :class="['flex flex-col', props.gap]">
-    <!-- Address Selector (Province, District, Sub-district, Zip code) -->
-    <InputCombobox
-      ref="comboboxRef"
-      :name="props.name"
-      :label="props.label"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      :rules="props.rules || defaultRules"
-      v-model="internalValue"
-      @clear="handleClear"
-    >
-      <template #popover-content="{ close }">
-        <ShadCommand class="p-2">
-          <ShadTabs v-model="currentTab" class="w-full">
-            <ShadTabsList class="w-full grid grid-cols-4">
-              <ShadTabsTrigger value="province"> จังหวัด </ShadTabsTrigger>
-              <ShadTabsTrigger value="district" :disabled="!selectedProvince">
-                อำเภอ/เขต
-              </ShadTabsTrigger>
-              <ShadTabsTrigger
-                value="subDistrict"
-                :disabled="!selectedDistrict"
-              >
-                ตำบล/แขวง
-              </ShadTabsTrigger>
-              <ShadTabsTrigger value="zipCode" :disabled="!selectedSubDistrict">
-                รหัสไปรษณีย์
-              </ShadTabsTrigger>
-            </ShadTabsList>
-            <InputTextField v-model="searchQuery" placeholder="ค้นหาที่อยู่">
-              <template #prepend>
-                <Icon name="lucide:search" class="h-4 w-4" />
-              </template>
-            </InputTextField>
-
-            <!-- Province Tab -->
-            <ShadTabsContent value="province" class="m-0">
-              <ShadCommandList class="max-h-64">
-                <ShadCommandGroup>
-                  <ShadCommandItem
-                    v-for="province in provinces"
-                    :key="province.id"
-                    :value="province.name_th"
-                    @select="onSelectProvince(province)"
-                  >
-                    {{ province.name_th }}
-                    <Icon
-                      v-if="selectedProvince?.id === province.id"
-                      name="lucide:check"
-                      class="ml-auto h-4 w-4"
-                    />
-                  </ShadCommandItem>
-                </ShadCommandGroup>
-                <ShadCommandEmpty :force-show="isLoadingProvinces || provinces.length === 0">
-                  {{ isLoadingProvinces ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14" }}
-                </ShadCommandEmpty>
-              </ShadCommandList>
-            </ShadTabsContent>
-
-            <!-- District Tab -->
-            <ShadTabsContent value="district" class="m-0">
-              <ShadCommandList class="max-h-64">
-                <ShadCommandGroup>
-                  <ShadCommandItem
-                    v-for="district in amphurs"
-                    :key="district.id"
-                    :value="district.name_th"
-                    @select="onSelectDistrict(district)"
-                  >
-                    {{ district.name_th }}
-                    <Icon
-                      v-if="selectedDistrict?.id === district.id"
-                      name="lucide:check"
-                      class="ml-auto h-4 w-4"
-                    />
-                  </ShadCommandItem>
-                </ShadCommandGroup>
-                <ShadCommandEmpty :force-show="isLoadingAmphurs || amphurs.length === 0">
-                  {{ isLoadingAmphurs ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E2D\u0E33\u0E40\u0E20\u0E2D/\u0E40\u0E02\u0E15..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2D\u0E33\u0E40\u0E20\u0E2D/\u0E40\u0E02\u0E15" }}
-                </ShadCommandEmpty>
-              </ShadCommandList>
-            </ShadTabsContent>
-
-            <!-- Sub-district Tab -->
-            <ShadTabsContent value="subDistrict" class="m-0">
-              <ShadCommandList class="max-h-64">
-                <ShadCommandGroup>
-                  <ShadCommandItem
-                    v-for="subDistrict in tambons"
-                    :key="subDistrict.id"
-                    :value="subDistrict.name_th"
-                    @select="onSelectSubDistrict(subDistrict)"
-                  >
-                    {{ subDistrict.name_th }}
-                    <Icon
-                      v-if="selectedSubDistrict?.id === subDistrict.id"
-                      name="lucide:check"
-                      class="ml-auto h-4 w-4"
-                    />
-                  </ShadCommandItem>
-                </ShadCommandGroup>
-                <ShadCommandEmpty :force-show="isLoadingTambons || tambons.length === 0">
-                  {{ isLoadingTambons ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E15\u0E33\u0E1A\u0E25/\u0E41\u0E02\u0E27\u0E07..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E15\u0E33\u0E1A\u0E25/\u0E41\u0E02\u0E27\u0E07" }}
-                </ShadCommandEmpty>
-              </ShadCommandList>
-            </ShadTabsContent>
-
-            <!-- Zip Code Tab -->
-            <ShadTabsContent value="zipCode" class="m-0">
-              <ShadCommandList class="max-h-64">
-                <ShadCommandGroup>
-                  <ShadCommandItem
-                    v-for="zipcode in zipcodes"
-                    :key="zipcode"
-                    :value="zipcode"
-                    @select="() => onSelectZipCode(zipcode, close)"
-                  >
-                    {{ zipcode }}
-                    <Icon
-                      v-if="selectedZipcode === zipcode"
-                      name="lucide:check"
-                      class="ml-auto h-4 w-4"
-                    />
-                  </ShadCommandItem>
-                </ShadCommandGroup>
-                <ShadCommandEmpty :force-show="isLoadingZipcodes || zipcodes.length === 0">
-                  {{ isLoadingZipcodes ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E23\u0E2B\u0E31\u0E2A\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E2B\u0E31\u0E2A\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C" }}
-                </ShadCommandEmpty>
-              </ShadCommandList>
-            </ShadTabsContent>
-          </ShadTabs>
-        </ShadCommand>
-      </template>
-    </InputCombobox>
-
-    <!-- Address Detail (House number, Soi, Moo, Road) -->
-    <InputTextField
-      ref="detailFieldRef"
-      :name="`${props.name}-detail`"
-      :label="props.labelDetail"
-      :placeholder="props.placeholderDetail"
-      :disabled="!addressValue"
-      :required="props.requiredDetail"
-      v-model="addressDetailValue"
-    />
-  </div>
+  <div :class="['flex flex-col', props.gap]">
+    <!-- Address Selector (Province, District, Sub-district, Zip code) -->
+    <InputCombobox
+      ref="comboboxRef"
+      :name="props.name"
+      :label="props.label"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :rules="props.rules || defaultRules"
+      v-model="internalValue"
+      @clear="handleClear"
+    >
+      <template #popover-content="{ close }">
+        <ShadCommand class="p-2">
+          <ShadTabs v-model="currentTab" class="w-full">
+            <ShadTabsList class="w-full grid grid-cols-4">
+              <ShadTabsTrigger value="province"> จังหวัด </ShadTabsTrigger>
+              <ShadTabsTrigger value="district" :disabled="!selectedProvince">
+                อำเภอ/เขต
+              </ShadTabsTrigger>
+              <ShadTabsTrigger
+                value="subDistrict"
+                :disabled="!selectedDistrict"
+              >
+                ตำบล/แขวง
+              </ShadTabsTrigger>
+              <ShadTabsTrigger value="zipCode" :disabled="!selectedSubDistrict">
+                รหัสไปรษณีย์
+              </ShadTabsTrigger>
+            </ShadTabsList>
+            <InputTextField v-model="searchQuery" placeholder="ค้นหาที่อยู่">
+              <template #prepend>
+                <Icon name="lucide:search" class="h-4 w-4" />
+              </template>
+            </InputTextField>
+
+            <!-- Province Tab -->
+            <ShadTabsContent value="province" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="province in provinces"
+                    :key="province.id"
+                    :value="province.name_th"
+                    @select="onSelectProvince(province)"
+                  >
+                    {{ province.name_th }}
+                    <Icon
+                      v-if="selectedProvince?.id === province.id"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="isLoadingProvinces || provinces.length === 0">
+                  {{ isLoadingProvinces ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E08\u0E31\u0E07\u0E2B\u0E27\u0E31\u0E14" }}
+                </ShadCommandEmpty>
+              </ShadCommandList>
+            </ShadTabsContent>
+
+            <!-- District Tab -->
+            <ShadTabsContent value="district" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="district in amphurs"
+                    :key="district.id"
+                    :value="district.name_th"
+                    @select="onSelectDistrict(district)"
+                  >
+                    {{ district.name_th }}
+                    <Icon
+                      v-if="selectedDistrict?.id === district.id"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="isLoadingAmphurs || amphurs.length === 0">
+                  {{ isLoadingAmphurs ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E2D\u0E33\u0E40\u0E20\u0E2D/\u0E40\u0E02\u0E15..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2D\u0E33\u0E40\u0E20\u0E2D/\u0E40\u0E02\u0E15" }}
+                </ShadCommandEmpty>
+              </ShadCommandList>
+            </ShadTabsContent>
+
+            <!-- Sub-district Tab -->
+            <ShadTabsContent value="subDistrict" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="subDistrict in tambons"
+                    :key="subDistrict.id"
+                    :value="subDistrict.name_th"
+                    @select="onSelectSubDistrict(subDistrict)"
+                  >
+                    {{ subDistrict.name_th }}
+                    <Icon
+                      v-if="selectedSubDistrict?.id === subDistrict.id"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="isLoadingTambons || tambons.length === 0">
+                  {{ isLoadingTambons ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E15\u0E33\u0E1A\u0E25/\u0E41\u0E02\u0E27\u0E07..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E15\u0E33\u0E1A\u0E25/\u0E41\u0E02\u0E27\u0E07" }}
+                </ShadCommandEmpty>
+              </ShadCommandList>
+            </ShadTabsContent>
+
+            <!-- Zip Code Tab -->
+            <ShadTabsContent value="zipCode" class="m-0">
+              <ShadCommandList class="max-h-64">
+                <ShadCommandGroup>
+                  <ShadCommandItem
+                    v-for="zipcode in zipcodes"
+                    :key="zipcode"
+                    :value="zipcode"
+                    @select="() => onSelectZipCode(zipcode, close)"
+                  >
+                    {{ zipcode }}
+                    <Icon
+                      v-if="selectedZipcode === zipcode"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </ShadCommandGroup>
+                <ShadCommandEmpty :force-show="isLoadingZipcodes || zipcodes.length === 0">
+                  {{ isLoadingZipcodes ? "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E23\u0E2B\u0E31\u0E2A\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C..." : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E2B\u0E31\u0E2A\u0E44\u0E1B\u0E23\u0E29\u0E13\u0E35\u0E22\u0E4C" }}
+                </ShadCommandEmpty>
+              </ShadCommandList>
+            </ShadTabsContent>
+          </ShadTabs>
+        </ShadCommand>
+      </template>
+    </InputCombobox>
+
+    <!-- Address Detail (House number, Soi, Moo, Road) -->
+    <InputTextField
+      ref="detailFieldRef"
+      :name="`${props.name}-detail`"
+      :label="props.labelDetail"
+      :placeholder="props.placeholderDetail"
+      :disabled="!addressValue"
+      :required="props.requiredDetail"
+      v-model="addressDetailValue"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,86 +1,86 @@
 <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 #append>
-          <Icon
-            @mousedown.stop.prevent="handleIconMouseDown"
-            :name="modelValue ? 'lucide:x' : 'lucide:search'"
-            size="16"
-            class="cursor-pointer text-black"
-          />
-        </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 #append>
+          <Icon
+            @mousedown.stop.prevent="handleIconMouseDown"
+            :name="modelValue ? 'lucide:x' : 'lucide:search'"
+            size="16"
+            class="cursor-pointer text-black"
+          />
+        </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)"
-        >
-          <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"
-          />
-        </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)"
+        >
+          <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"
+          />
+        </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-checkbox.vue

@@ -1,25 +1,25 @@
 <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
+]"
+        >
+          <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>
+]">
+            {{ props.label }}
+          </span>
+        </ShadFormLabel>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>