pukaad-ui-lib 1.38.0 → 1.40.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.38.0",
+  "version": "1.40.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/css/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./fonts/Anuphan.css";@import "./fonts/Sarabun.css";@import "./scroll-bar.css";@import "quill/dist/quill.snow.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-dropdown:11;--z-index-overlay:12;--z-index-loading:13;--z-index-drawer:14;--z-index-modal:15;--z-index-toast:99998;--z-index-loading-page:99999}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--gray);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}
+@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./fonts/Anuphan.css";@import "./fonts/Sarabun.css";@import "./scroll-bar.css";@import "quill/dist/quill.snow.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-dropdown:11;--z-index-overlay:12;--z-index-loading:13;--z-index-drawer:14;--z-index-modal:15;--z-index-toast:99998;--z-index-loading-page:99999}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}

package/dist/runtime/components/drawer/drawer.d.vue.ts

@@ -2,7 +2,7 @@ import type { SheetContentProps } from "@/runtime/components/ui/sheet/SheetConte
 export interface DrawerProps extends SheetContentProps {
     title?: string;
     description?: string;
-    isLoading?: boolean;
+    loading?: boolean;
     loadingText?: string;
 }
 type __VLS_Props = DrawerProps;

package/dist/runtime/components/drawer/drawer.vue

@@ -1,7 +1,7 @@
 <template>
   <ShadSheet v-model:open="isOpen">
     <ShadSheetContent v-bind="props" v-slot="{ meta }" @submit="onSubmit">
-      <Loading :is-loading="props.isLoading" :text="props.loadingText" />
+      <Loading :loading="props.loading" :text="props.loadingText" />
       <ShadSheetHeader class="flex-shrink-0">
         <slot name="header">
           <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
@@ -24,7 +24,7 @@
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
-  isLoading: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
   loadingText: { type: String, required: false },
   class: { type: null, required: false },
   side: { type: String, required: false },

package/dist/runtime/components/drawer/drawer.vue.d.ts

@@ -2,7 +2,7 @@ import type { SheetContentProps } from "@/runtime/components/ui/sheet/SheetConte
 export interface DrawerProps extends SheetContentProps {
     title?: string;
     description?: string;
-    isLoading?: boolean;
+    loading?: boolean;
     loadingText?: string;
 }
 type __VLS_Props = DrawerProps;

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

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     center: boolean;
     src: string;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     center: boolean;
     src: string;
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -1,27 +1,54 @@
 <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">
+      <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" />
+          <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 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]">
+    <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"
+        <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)">
+          @mousedown.prevent="selectOption(option)"
+        >
           <div class="flex flex-col gap-[4px] w-full">
             <div class="font-body-medium">
               {{ option.label }}
@@ -30,7 +57,11 @@
               {{ option.description }}
             </div>
           </div>
-          <Icon v-if="modelValue === option.value" name="lucide:check" size="16" />
+          <Icon
+            v-if="modelValue === option.value"
+            name="lucide:check"
+            size="16"
+          />
         </div>
       </div>
     </ShadPopoverContent>

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

@@ -19,16 +19,15 @@ type __VLS_ModelProps = {
     modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_81: {};
+declare var __VLS_25: {}, __VLS_67: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_21) => any;
+    label?: (props: typeof __VLS_25) => any;
 } & {
-    options?: (props: typeof __VLS_81) => any;
+    options?: (props: typeof __VLS_67) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    validate: () => Promise<any>;
     setErrors: (errMsg: string[]) => void;
-    fieldRef: import("vue").Ref<any, any>;
+    inputTextFieldRef: 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<{

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

@@ -1,101 +1,87 @@
 <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
-            :class="[
+  <ShadPopover v-model:open="popoverOpen">
+    <ShadPopoverAnchor as-child>
+      <InputTextField
+        ref="inputTextFieldRef"
+        v-model="displayText"
+        :name="props.name"
+        :rules="computedRules"
+        :required="props.required"
+        :disabled-border="props.disabledBorder"
+        :placeholder="props.placeholder"
+        readonly
+        class="cursor-pointer"
+        @click="handleInputClick"
+      >
+        <template #label>
+          <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']"
-        >
+            >
+              {{ props.label }}
+              <span v-if="props.required" class="text-destructive">*</span>
+            </div>
+          </slot>
           <div
-            v-if="props.limit > 0"
-            :class="[
-  (props.multiple ? modelValue.length : modelValue.length) > props.limit && 'text-destructive'
-]"
+            v-if="props.showCounter && props.limit > 0"
+            :class="[props.disabledBorder && 'font-body-small']"
           >
-            {{
-              props.multiple ? modelValue.length : modelValue.length
-            }}/{{ props.limit }}
+            <div :class="[selectedCount > props.limit && 'text-destructive']">
+              {{ selectedCount }}/{{ props.limit }}
+            </div>
           </div>
-        </div>
-      </ShadFormLabel>
-      <ShadPopover v-bind="componentField">
-        <ShadPopoverTrigger as-child>
-          <ShadFormControl>
-            <ShadButton
-              variant="outline"
-              role="combobox"
-              class="w-full justify-between text-start"
-            >
-              <span
-                :class="{
-  'text-cloud': props.placeholder && isShowingPlaceholder
-}"
-              >
-                {{ displayValue }}
-              </span>
-              <Icon name="lucide:chevrons-up-down" class="h-4 w-4" />
-            </ShadButton>
-          </ShadFormControl>
-        </ShadPopoverTrigger>
-        <ShadPopoverContent>
-          <ShadCommand>
-            <ShadCommandInput />
-            <ShadCommandList>
-              <ShadCommandGroup v-if="options && options.length > 0">
-                <slot name="options">
-                  <ShadCommandItem
-                    v-for="option in options"
-                    :key="option.value"
-                    :value="option.value"
-                    :disabled="isOptionDisabled(option.value)"
-                    :class="[
+        </template>
+        <template #append>
+          <Icon
+            @mousedown.stop.prevent="handleIconClick"
+            @click.stop.prevent
+            :name="hasSelection ? 'lucide:x' : 'lucide:chevron-down'"
+            size="16"
+            class="cursor-pointer text-black"
+          />
+        </template>
+      </InputTextField>
+    </ShadPopoverAnchor>
+    <ShadPopoverContent @openAutoFocus.prevent>
+      <ShadCommand>
+        <ShadCommandInput />
+        <ShadCommandList>
+          <ShadCommandGroup v-if="options && options.length > 0">
+            <slot name="options">
+              <ShadCommandItem
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                :disabled="isOptionDisabled(option.value)"
+                :class="[
   isOptionDisabled(option.value) && 'cursor-not-allowed'
 ]"
-                    @click="() => handleSelect(option.value)"
-                  >
-                    <ShadCheckbox
-                      v-if="props.multiple"
-                      :model-value="isSelected(option.value)"
-                      :disabled="isOptionDisabled(option.value)"
-                      class="mr-2 pointer-events-none"
-                    />
+                @click="() => handleSelect(option.value)"
+              >
+                <ShadCheckbox
+                  v-if="props.multiple"
+                  :model-value="isSelected(option.value)"
+                  :disabled="isOptionDisabled(option.value)"
+                  class="mr-2 pointer-events-none"
+                />
 
-                    {{ option.label }}
-                    <Icon
-                      v-if="!props.multiple && isSelected(option.value)"
-                      name="lucide:check"
-                      class="ml-auto h-4 w-4"
-                    />
-                  </ShadCommandItem>
-                </slot>
-              </ShadCommandGroup>
-              <ShadCommandEmpty
-                :force-show="!options || options.length === 0"
-              />
-            </ShadCommandList>
-          </ShadCommand>
-        </ShadPopoverContent>
-      </ShadPopover>
-      <ShadFormMessage />
-    </ShadFormItem>
-  </ShadFormField>
+                {{ option.label }}
+                <Icon
+                  v-if="!props.multiple && isSelected(option.value)"
+                  name="lucide:check"
+                  class="ml-auto h-4 w-4"
+                />
+              </ShadCommandItem>
+            </slot>
+          </ShadCommandGroup>
+          <ShadCommandEmpty :force-show="!options || options.length === 0" />
+        </ShadCommandList>
+      </ShadCommand>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>
@@ -116,49 +102,80 @@ const modelValue = defineModel({ type: [String, Array], ...{
   default: () => ""
 } });
 const popoverOpen = ref(false);
-const fieldRef = ref();
-const defaultRules = (v) => {
-  return true;
-};
-onMounted(() => {
-  if (props.multiple && modelValue.value === "") {
-    modelValue.value = [];
-  }
-});
-const displayValue = computed(() => {
+const inputTextFieldRef = ref();
+const displayText = ref("");
+const updateDisplayText = () => {
   if (props.multiple) {
     const selectedValues = modelValue.value;
     if (!selectedValues || selectedValues.length === 0) {
-      return props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+      displayText.value = "";
+      return;
     }
     const selectedLabels = selectedValues.map((val) => props.options?.find((opt) => opt.value === val)?.label).filter(Boolean);
-    return selectedLabels.length > 0 ? selectedLabels.join(", ") : props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    displayText.value = selectedLabels.length > 0 ? selectedLabels.join(", ") : "";
   } else {
     const selectedOption = props.options?.find(
       (opt) => opt.value === modelValue.value
     );
-    return selectedOption?.label || props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    displayText.value = selectedOption?.label || "";
   }
+};
+watch([modelValue, () => props.options], updateDisplayText, {
+  immediate: true,
+  deep: true
 });
-const isShowingPlaceholder = computed(() => {
-  if (props.multiple) {
-    const selectedValues = modelValue.value;
-    return !selectedValues || selectedValues.length === 0;
-  } else {
-    const selectedOption = props.options?.find(
-      (opt) => opt.value === modelValue.value
-    );
-    return !selectedOption;
+const computedRules = computed(() => {
+  if (props.rules) return props.rules;
+  return () => {
+    if (props.required) {
+      if (props.multiple) {
+        const values = modelValue.value;
+        return values && values.length > 0 || `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01 ${props.label || "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23"}`;
+      } else {
+        return !!modelValue.value || `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01 ${props.label || "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23"}`;
+      }
+    }
+    return true;
+  };
+});
+onMounted(() => {
+  if (props.multiple && modelValue.value === "") {
+    modelValue.value = [];
   }
 });
 const isLimitReached = computed(() => {
   if (!props.multiple || props.limit <= 0) return false;
   return modelValue.value.length >= props.limit;
 });
+const selectedCount = computed(() => {
+  if (props.multiple) {
+    return modelValue.value.length;
+  }
+  return modelValue.value ? 1 : 0;
+});
+const hasSelection = computed(() => {
+  if (props.multiple) {
+    return modelValue.value.length > 0;
+  }
+  return !!modelValue.value;
+});
+const handleInputClick = () => {
+  popoverOpen.value = true;
+};
+const handleIconClick = () => {
+  if (hasSelection.value) {
+    if (props.multiple) {
+      modelValue.value = [];
+    } else {
+      modelValue.value = "";
+    }
+    displayText.value = "";
+  }
+  popoverOpen.value = true;
+};
 const isSelected = (value) => {
   if (props.multiple) {
-    const result = modelValue.value.includes(value);
-    return result;
+    return modelValue.value.includes(value);
   } else {
     return modelValue.value === value;
   }
@@ -189,19 +206,11 @@ const handleSelect = (value) => {
     popoverOpen.value = false;
   }
 };
-const validate = async () => {
-  if (fieldRef.value) {
-    const result = await fieldRef.value.validate();
-    return result.valid;
-  }
-  return true;
-};
 const setErrors = (errMsg) => {
-  fieldRef.value?.setErrors(errMsg);
+  inputTextFieldRef.value?.setErrors(errMsg);
 };
 defineExpose({
-  validate,
   setErrors,
-  fieldRef
+  inputTextFieldRef
 });
 </script>

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

@@ -19,16 +19,15 @@ type __VLS_ModelProps = {
     modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_81: {};
+declare var __VLS_25: {}, __VLS_67: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_21) => any;
+    label?: (props: typeof __VLS_25) => any;
 } & {
-    options?: (props: typeof __VLS_81) => any;
+    options?: (props: typeof __VLS_67) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    validate: () => Promise<any>;
     setErrors: (errMsg: string[]) => void;
-    fieldRef: import("vue").Ref<any, any>;
+    inputTextFieldRef: 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<{

package/dist/runtime/components/loading.d.vue.ts

@@ -1,10 +1,8 @@
 export interface LoadingProps {
-    isLoading?: boolean;
-    text?: string;
+    loading?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
-    text: string;
-    isLoading: boolean;
+    loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/loading.vue

@@ -1,21 +1,17 @@
 <template>
   <Transition name="loading-fade">
     <div
-      v-if="isLoading"
-      class="absolute inset-0 opacity-50 z-50 flex items-center justify-center backdrop-blur-2xl"
+      v-if="loading"
+      class="absolute inset-0 bg-white/50 flex items-center justify-center z-50"
     >
-      <div class="flex flex-col items-center gap-3">
-        <div class="loading-spinner"></div>
-        <span v-if="text" class="text-sm text-cloud">{{ text }}</span>
-      </div>
+      <div class="loading-spinner"></div>
     </div>
   </Transition>
 </template>
 
 <script setup>
 defineProps({
-  isLoading: { type: Boolean, required: false, default: false },
-  text: { type: String, required: false, default: "" }
+  loading: { type: Boolean, required: false, default: false }
 });
 </script>
 

package/dist/runtime/components/loading.vue.d.ts

@@ -1,10 +1,8 @@
 export interface LoadingProps {
-    isLoading?: boolean;
-    text?: string;
+    loading?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingProps> & Readonly<{}>, {
-    text: string;
-    isLoading: boolean;
+    loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-share.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal title="แชร์" width="396" v-model="isOpen">
+  <Modal title="แชร์" width="396" v-model="isOpen" :loading="true">
     <div class="flex justify-between">
       <div
         v-for="(share, i) of listShares"

package/dist/runtime/components/modal/modal.d.vue.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     description?: string;
     footer?: string;
     disabledCloseBtn?: boolean;
-    isLoading?: boolean;
+    loading?: boolean;
     loadingText?: string;
 }
 type __VLS_Props = ModalProps;
@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    loading: boolean;
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/modal/modal.vue

@@ -7,7 +7,7 @@
       @submit="onSubmit"
       @close="onClose"
     >
-      <Loading :is-loading="props.isLoading" :text="props.loadingText" />
+      <Loading :loading="props.loading" :text="props.loadingText" />
       <ShadDialogHeader>
         <slot name="header">
           <ShadDialogTitle>
@@ -38,7 +38,7 @@ const props = defineProps({
   description: { type: String, required: false },
   footer: { type: String, required: false },
   disabledCloseBtn: { type: Boolean, required: false, default: false },
-  isLoading: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false, default: false },
   loadingText: { type: String, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{

package/dist/runtime/components/modal/modal.vue.d.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     description?: string;
     footer?: string;
     disabledCloseBtn?: boolean;
-    isLoading?: boolean;
+    loading?: boolean;
     loadingText?: string;
 }
 type __VLS_Props = ModalProps;
@@ -39,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    loading: boolean;
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.38.0",
+  "version": "1.40.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",