pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/filter/filter-list-chip.vue

@@ -1,14 +1,14 @@
 <template>
-  <div v-if="hasSelectedChips" class="flex gap-[8px] flex-wrap">
-    <Chip v-for="(chip, index) in selectedChips" :key="index" color="outline"
-      class="border-primary bg-info text-primary">
-      {{ chip.label }}
-    </Chip>
-
-    <Button variant="text" @click="clearAll">
-      <div class="px-[12px] py-[8px]"> ล้างตัวกรอง</div>
-    </Button>
-  </div>
+  <div v-if="hasSelectedChips" class="flex gap-[8px] flex-wrap">
+    <Chip v-for="(chip, index) in selectedChips" :key="index" color="outline"
+      class="border-primary bg-info text-primary">
+      {{ chip.label }}
+    </Chip>
+
+    <Button variant="text" @click="clearAll">
+      <div class="px-[12px] py-[8px]"> ล้างตัวกรอง</div>
+    </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/filter/filter-list.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col gap-[8px]">
-    <div class="text-gray font-body-large-prominent">
-      {{ props.label }}
-    </div>
-
-    <InputCheckbox
-      v-for="(item, index) in modelValue"
-      :key="index"
-      :label="item.label"
-      label-position="left"
-      :disabled="item.disabled"
-      labelGap="auto"
-      v-model="item.checked"
-    />
-
-    <Button type="text" variant="primary"> แสดงเพิ่มเติม </Button>
-  </div>
+  <div class="flex flex-col gap-[8px]">
+    <div class="text-gray font-body-large-prominent">
+      {{ props.label }}
+    </div>
+
+    <InputCheckbox
+      v-for="(item, index) in modelValue"
+      :key="index"
+      :label="item.label"
+      label-position="left"
+      :disabled="item.disabled"
+      labelGap="auto"
+      v-model="item.checked"
+    />
+
+    <Button type="text" variant="primary"> แสดงเพิ่มเติม </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/google-translate.client.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="google_translate_element" class="hidden" />
+  <div id="google_translate_element" class="hidden" />
 </template>
 
 <script setup>

package/dist/runtime/components/icons.vue

@@ -1,5 +1,5 @@
 <template>
-  <Icon :name="props.name" :size="props.size" :color="props.color" />
+  <Icon :name="props.name" :size="props.size" :color="props.color" />
 </template>
 
 <script setup>

package/dist/runtime/components/image/image-cropper.vue

@@ -1,13 +1,13 @@
 <template>
-  <div :style="containerStyle">
-    <img
-      ref="imgRef"
-      :src="src"
-      :alt="alt || 'image'"
-      :style="[{ 'max-width': '100%' }, imgStyle]"
-      :crossorigin="crossorigin"
-    />
-  </div>
+  <div :style="containerStyle">
+    <img
+      ref="imgRef"
+      :src="src"
+      :alt="alt || 'image'"
+      :style="[{ 'max-width': '100%' }, imgStyle]"
+      :crossorigin="crossorigin"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/image/image.vue

@@ -1,51 +1,51 @@
 <template>
-  <NuxtImg
-    :class="props.class"
-    :src="props.src"
-    :alt="props.alt"
-    :custom="true"
+  <NuxtImg
+    :class="props.class"
+    :src="props.src"
+    :alt="props.alt"
+    :custom="true"
     :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`,
   minWidth: props.width != 'auto' ? `${props.width}px` : void 0,
   minHeight: props.height != 'auto' ? `${props.height}px` : void 0,
   objectFit: props.fit
-}"
-    loading="lazy"
-    v-slot="{ src, isLoaded, imgAttrs }"
-  >
-    <div
-      v-if="isLoaded || src"
+}"
+    loading="lazy"
+    v-slot="{ src, isLoaded, imgAttrs }"
+  >
+    <div
+      v-if="isLoaded || src"
       :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`,
   minWidth: props.width != 'auto' ? `${props.width}px` : void 0,
   minHeight: props.height != 'auto' ? `${props.height}px` : void 0
-}"
-    >
-      <img
-        v-bind="imgAttrs"
-        :src="src"
-        :alt="props.alt"
+}"
+    >
+      <img
+        v-bind="imgAttrs"
+        :src="src"
+        :alt="props.alt"
         :style="{
   width: '100%',
   height: '100%',
   objectFit: props.fit
-}"
-      />
-    </div>
-    <div
-      v-else
-      ref="refLazy"
-      :class="['flex justify-center items-center bg-fade', props.class]"
+}"
+      />
+    </div>
+    <div
+      v-else
+      ref="refLazy"
+      :class="['flex justify-center items-center bg-fade', props.class]"
       :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`,
   minWidth: props.width != 'auto' ? `${props.width}px` : void 0,
   minHeight: props.height != 'auto' ? `${props.height}px` : void 0
-}"
-    ></div>
-  </NuxtImg>
+}"
+    ></div>
+  </NuxtImg>
 </template>
 
 <script setup>

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

@@ -1,31 +1,31 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :rules="props.rules || defaultRules"
-    :name="props.name"
-    v-model="modelValue"
-    v-slot="{ errorMessage: formError }"
-  >
-    <ShadFormItem>
-      <ShadPinInput
-        :id="props.id || props.name"
-        :disabled="props.disabled"
-        @complete="handleComplete"
-        v-model="pin"
-      >
-        <ShadPinInputGroup>
-          <ShadFormControl v-for="(n, i) in props.digit" :key="n" :index="i">
-            <ShadPinInputSlot
-              :class="{ 'border-destructive': formError || error }"
-            />
-          </ShadFormControl>
-        </ShadPinInputGroup>
-      </ShadPinInput>
-      <p v-if="formError || error" class="text-sm font-medium text-destructive">
-        {{ formError || error }}
-      </p>
-    </ShadFormItem>
-  </ShadFormField>
+  <ShadFormField
+    ref="fieldRef"
+    :rules="props.rules || defaultRules"
+    :name="props.name"
+    v-model="modelValue"
+    v-slot="{ errorMessage: formError }"
+  >
+    <ShadFormItem>
+      <ShadPinInput
+        :id="props.id || props.name"
+        :disabled="props.disabled"
+        @complete="handleComplete"
+        v-model="pin"
+      >
+        <ShadPinInputGroup>
+          <ShadFormControl v-for="(n, i) in props.digit" :key="n" :index="i">
+            <ShadPinInputSlot
+              :class="{ 'border-destructive': formError || error }"
+            />
+          </ShadFormControl>
+        </ShadPinInputGroup>
+      </ShadPinInput>
+      <p v-if="formError || error" class="text-sm font-medium text-destructive">
+        {{ formError || error }}
+      </p>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -1,162 +1,162 @@
 <template>
-  <div
+  <div
     :class="[
   'flex w-full',
   props.layout === 'horizontal' ? 'flex-row' : 'flex-col',
   gapClass
-]"
-    :style="{ gap: gapStyle }"
-  >
-    <!-- Address Selector (Province, District, Sub-district, Zip code) -->
-    <div class="min-w-0 flex-1">
-      <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" :disabled="!!props.fixedProvinceId"> จังหวัด </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>
-    </div>
-
-    <!-- Address Detail (House number, Soi, Moo, Road) -->
-    <div class="min-w-0 flex-1">
-      <InputTextField
-        ref="detailFieldRef"
-        :name="`${props.name}-detail`"
-        :label="props.labelDetail"
-        :placeholder="props.placeholderDetail"
-        :disabled="!addressValue"
-        :required="props.requiredDetail"
-        v-model="addressDetailValue"
-      />
-    </div>
-  </div>
+]"
+    :style="{ gap: gapStyle }"
+  >
+    <!-- Address Selector (Province, District, Sub-district, Zip code) -->
+    <div class="min-w-0 flex-1">
+      <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" :disabled="!!props.fixedProvinceId"> จังหวัด </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>
+    </div>
+
+    <!-- Address Detail (House number, Soi, Moo, Road) -->
+    <div class="min-w-0 flex-1">
+      <InputTextField
+        ref="detailFieldRef"
+        :name="`${props.name}-detail`"
+        :label="props.labelDetail"
+        :placeholder="props.placeholderDetail"
+        :disabled="!addressValue"
+        :required="props.requiredDetail"
+        v-model="addressDetailValue"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>