pukaad-ui-lib 1.2.0 → 1.3.2

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,9 +35,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
+    placeholder: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,89 +1,89 @@
 <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>
-
-      <ShadPopover v-model:open="open" :modal="false">
-        <ShadPopoverAnchor as-child>
-          <div ref="containerRef">
-            <InputTextField
-              v-model="searchText"
-              :placeholder="props.placeholder"
-              @focus="onFocus"
-              @click="onFocus"
-            >
-              <template #append>
-                <Icon
-                  :name="open ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-                  size="16"
-                  class="opacity-50 cursor-pointer"
-                  @mousedown.prevent="toggleDropdown"
-                />
-              </template>
-            </InputTextField>
-          </div>
-        </ShadPopoverAnchor>
-
-        <ShadPopoverContent
-          class="p-0 max-h-60 overflow-auto"
-          :style="{ width: containerRef?.offsetWidth + 'px' }"
-          @openAutoFocus.prevent
-          @closeAutoFocus.prevent
-        >
-          <!-- Empty State -->
-          <div
-            v-if="filteredOptions.length === 0"
-            class="flex flex-col items-center justify-center py-6"
-          >
-            <Icon name="pukaad:page-not-found" size="50" />
-            <div class="font-body-large text-center mt-2">ไม่พบข้อมูล</div>
-          </div>
-
-          <!-- Options List -->
-          <div v-else class="py-1">
-            <div
-              v-for="option in filteredOptions"
-              :key="option.value"
-              class="px-3 py-2 cursor-pointer hover:bg-accent flex items-center gap-2"
-              @click="selectOption(option)"
-            >
-              <Icon
-                name="lucide:check"
-                size="16"
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+      </ShadFormLabel>
+
+      <ShadPopover v-model:open="open" :modal="false">
+        <ShadPopoverAnchor as-child>
+          <div ref="containerRef">
+            <InputTextField
+              v-model="searchText"
+              :placeholder="props.placeholder"
+              @focus="onFocus"
+              @click="onFocus"
+            >
+              <template #append>
+                <Icon
+                  :name="open ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+                  size="16"
+                  class="opacity-50 cursor-pointer"
+                  @mousedown.prevent="toggleDropdown"
+                />
+              </template>
+            </InputTextField>
+          </div>
+        </ShadPopoverAnchor>
+
+        <ShadPopoverContent
+          class="p-0 max-h-60 overflow-auto"
+          :style="{ width: containerRef?.offsetWidth + 'px' }"
+          @openAutoFocus.prevent
+          @closeAutoFocus.prevent
+        >
+          <!-- Empty State -->
+          <div
+            v-if="filteredOptions.length === 0"
+            class="flex flex-col items-center justify-center py-6"
+          >
+            <Icon name="pukaad:page-not-found" size="50" />
+            <div class="font-body-large text-center mt-2">ไม่พบข้อมูล</div>
+          </div>
+
+          <!-- Options List -->
+          <div v-else class="py-1">
+            <div
+              v-for="option in filteredOptions"
+              :key="option.value"
+              class="px-3 py-2 cursor-pointer hover:bg-accent flex items-center gap-2"
+              @click="selectOption(option)"
+            >
+              <Icon
+                name="lucide:check"
+                size="16"
                 :class="[
   modelValue === option.value ? 'opacity-100' : 'opacity-0'
-]"
-              />
-              <span>{{ option.label }}</span>
-            </div>
-          </div>
-        </ShadPopoverContent>
-      </ShadPopover>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+]"
+              />
+              <span>{{ option.label }}</span>
+            </div>
+          </div>
+        </ShadPopoverContent>
+      </ShadPopover>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -35,9 +35,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
+    placeholder: string;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
-    placeholder: string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,107 +1,107 @@
 <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" />
-          <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" />
+          <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

@@ -25,7 +25,11 @@ type __VLS_Slots = {} & {
 } & {
     options?: (props: typeof __VLS_70) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: () => Promise<any>;
+    setErrors: (errMsg: string[]) => void;
+    fieldRef: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;