pukaad-ui-lib 1.21.1 → 1.23.0

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

@@ -1,85 +1,85 @@
 <template>
-  <!-- <div class="space-y-[16px]">
-    <Dropdown full-width v-model="isOpen">
-      <InputTextField
-        name="address"
-        label="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
-        placeholder="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
-        input-class="cursor-pointer"
-        readonly
-        :full-width="props.fullWidth"
-        append-icon="solar:alt-arrow-down-line-duotone"
-        v-model="addressValue"
-      />
-      <template #content>
-        <Tab
-          :items="typeAddress"
-          type="text"
-          tab-content-gab="0"
-          v-model="tabValue"
-        >
-          <template #tab-content-provinces>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                v-for="(pro, i_pro) in getProvince()"
-                :key="i_pro"
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectProvince(pro)"
-              >
-                {{ pro.name_th }}
-              </li>
-            </ul>
-          </template>
-
-          <template #tab-content-districts>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                v-for="(dist, i_dist) in getDistrict({ pro_code: provineCode })"
-                :key="i_dist"
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectDistrict(dist)"
-              >
-                {{ dist.name_th }}
-              </li>
-            </ul>
-          </template>
-
-          <template #tab-content-sub-districts>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                v-for="(sub, i_sub) in getSubDistrict({
-                  dist_code: districtCode,
-                })"
-                :key="i_sub"
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectSubDistrict(sub)"
-              >
-                {{ sub.name_th }}
-              </li>
-            </ul>
-          </template>
-
-          <template #tab-content-zip-code>
-            <ul class="h-96 overflow-y-auto">
-              <li
-                class="p-2 border-b-[1px] border-mercury cursor-pointer"
-                @click="onSelectZipCode"
-              >
-                {{ zipCode }}
-              </li>
-            </ul>
-          </template>
-        </Tab>
-      </template>
-    </Dropdown>
-    <InputTextField
-      label="บ้านเลขที่, ซอย, หมู่, ถนน"
-      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
-      :full-width="props.fullWidth"
-      :disabled="isDisabledAddressDetail"
-      v-model="addressDetailValue"
-    />
-  </div> -->
+  <!-- <div class="space-y-[16px]">
+    <Dropdown full-width v-model="isOpen">
+      <InputTextField
+        name="address"
+        label="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
+        placeholder="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
+        input-class="cursor-pointer"
+        readonly
+        :full-width="props.fullWidth"
+        append-icon="solar:alt-arrow-down-line-duotone"
+        v-model="addressValue"
+      />
+      <template #content>
+        <Tab
+          :items="typeAddress"
+          type="text"
+          tab-content-gab="0"
+          v-model="tabValue"
+        >
+          <template #tab-content-provinces>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                v-for="(pro, i_pro) in getProvince()"
+                :key="i_pro"
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectProvince(pro)"
+              >
+                {{ pro.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <template #tab-content-districts>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                v-for="(dist, i_dist) in getDistrict({ pro_code: provineCode })"
+                :key="i_dist"
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectDistrict(dist)"
+              >
+                {{ dist.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <template #tab-content-sub-districts>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                v-for="(sub, i_sub) in getSubDistrict({
+                  dist_code: districtCode,
+                })"
+                :key="i_sub"
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectSubDistrict(sub)"
+              >
+                {{ sub.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <template #tab-content-zip-code>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectZipCode"
+              >
+                {{ zipCode }}
+              </li>
+            </ul>
+          </template>
+        </Tab>
+      </template>
+    </Dropdown>
+    <InputTextField
+      label="บ้านเลขที่, ซอย, หมู่, ถนน"
+      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
+      :full-width="props.fullWidth"
+      :disabled="isDisabledAddressDetail"
+      v-model="addressDetailValue"
+    />
+  </div> -->
 </template>
 
 <script setup>

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

@@ -35,10 +35,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
+    placeholder: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -1,40 +1,40 @@
 <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" />
-        </template>
-      </InputTextField>
-    </ShadPopoverAnchor>
-    <ShadPopoverContent @openAutoFocus.prevent @closeAutoFocus.prevent align="start"
-      class="max-h-[312px] overflow-auto">
-      <div v-if="filteredOptions.length === 0" 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>
-      </div>
-    </ShadPopoverContent>
-  </ShadPopover>
+  <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" />
+        </template>
+      </InputTextField>
+    </ShadPopoverAnchor>
+    <ShadPopoverContent @openAutoFocus.prevent @closeAutoFocus.prevent align="start"
+      class="max-h-[312px] overflow-auto">
+      <div v-if="filteredOptions.length === 0" 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>
+      </div>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>

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

@@ -35,10 +35,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
+    placeholder: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -1,111 +1,111 @@
 <template>
-  <ShadFormField
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-  >
-    <ShadFormItem>
-      <ShadFormControl>
-        <div class="flex gap-2 items-center">
-          <ShadCheckbox
-            v-bind="componentField"
-            v-model="modelValue"
-            :indeterminate="props.indeterminate"
-          />
-          <ShadFormLabel
-            class="font-body-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-          >
-            {{ props.label }}
-          </ShadFormLabel>
-        </div>
-      </ShadFormControl>
-    </ShadFormItem>
-  </ShadFormField>
-
-  <!-- <ShadFormField
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField, errorMeczssage }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel 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>
-        <div
-          v-if="props.showCounter"
-          :class="[props.disabledBorder && 'font-body-small']"
-        >
-          <div
-            v-if="props.limit > 0"
-            :class="[modelValue.length > props.limit && 'text-destructive']"
-          >
-            {{ modelValue.length }}/{{ props.limit }}
-          </div>
-        </div>
-      </ShadFormLabel>
-
-      <ShadInputGroup
-        :class="[
-          props.disabledBorder &&
-            'border-0 ring-0 focus-within:border-0 focus-within:ring-0',
-        ]"
-      >
-        <ShadFormControl>
-          <ShadInputGroupInput
-            v-bind="componentField"
-            :id="props.id || props.name"
-            :class="props.class"
-            :readonly="props.readonly"
-            :disabled="props.disabled"
-            :placeholder="props.placeholder"
-            :type="props.type"
-          >
-          </ShadInputGroupInput>
-        </ShadFormControl>
-        <ShadInputGroupAddon
-          v-if="props.iconPrepend"
-          align="inline-start"
-          @click="emits('clickPrepend', $event)"
-        >
-          <slot name="prepend">
-            <Icon
-              :name="props.iconPrepend"
-              size="16"
-              @click="emits('clickIconPrepend', $event)"
-            />
-          </slot>
-        </ShadInputGroupAddon>
-        <ShadInputGroupAddon
-          v-if="props.iconAppend"
-          align="inline-end"
-          @click="emits('clickAppend', $event)"
-        >
-          <slot name="append">
-            <Icon
-              :name="props.iconAppend"
-              size="16"
-              @click="emits('clickIconAppend', $event)"
-            />
-          </slot>
-        </ShadInputGroupAddon>
-      </ShadInputGroup>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>  -->
+  <ShadFormField
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField }"
+  >
+    <ShadFormItem>
+      <ShadFormControl>
+        <div class="flex gap-2 items-center">
+          <ShadCheckbox
+            v-bind="componentField"
+            v-model="modelValue"
+            :indeterminate="props.indeterminate"
+          />
+          <ShadFormLabel
+            class="font-body-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {{ props.label }}
+          </ShadFormLabel>
+        </div>
+      </ShadFormControl>
+    </ShadFormItem>
+  </ShadFormField>
+
+  <!-- <ShadFormField
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField, errorMeczssage }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel 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>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
+            :class="[modelValue.length > props.limit && 'text-destructive']"
+          >
+            {{ modelValue.length }}/{{ props.limit }}
+          </div>
+        </div>
+      </ShadFormLabel>
+
+      <ShadInputGroup
+        :class="[
+          props.disabledBorder &&
+            'border-0 ring-0 focus-within:border-0 focus-within:ring-0',
+        ]"
+      >
+        <ShadFormControl>
+          <ShadInputGroupInput
+            v-bind="componentField"
+            :id="props.id || props.name"
+            :class="props.class"
+            :readonly="props.readonly"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
+            :type="props.type"
+          >
+          </ShadInputGroupInput>
+        </ShadFormControl>
+        <ShadInputGroupAddon
+          v-if="props.iconPrepend"
+          align="inline-start"
+          @click="emits('clickPrepend', $event)"
+        >
+          <slot name="prepend">
+            <Icon
+              :name="props.iconPrepend"
+              size="16"
+              @click="emits('clickIconPrepend', $event)"
+            />
+          </slot>
+        </ShadInputGroupAddon>
+        <ShadInputGroupAddon
+          v-if="props.iconAppend"
+          align="inline-end"
+          @click="emits('clickAppend', $event)"
+        >
+          <slot name="append">
+            <Icon
+              :name="props.iconAppend"
+              size="16"
+              @click="emits('clickIconAppend', $event)"
+            />
+          </slot>
+        </ShadInputGroupAddon>
+      </ShadInputGroup>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>  -->
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-combobox.d.vue.ts

@@ -19,11 +19,11 @@ type __VLS_ModelProps = {
     modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_81: {};
+declare var __VLS_18: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_21) => any;
+    label?: (props: typeof __VLS_18) => any;
 } & {
-    options?: (props: typeof __VLS_81) => any;
+    options?: (props: typeof __VLS_70) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     validate: () => Promise<any>;