pukaad-ui-lib 1.39.0 → 1.40.0

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:chevron-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/input/input-text-field.d.vue.ts

@@ -55,10 +55,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -55,10 +55,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    readonly: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     rows: number;
     heightScroll: boolean;

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

@@ -45,10 +45,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     disabled: boolean;
     limit: number;
-    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
+    readonly: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     rows: number;
     heightScroll: boolean;

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/dist/runtime/components/ui/input-group/InputGroupButton.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
     variant: "default" | "outline" | "ghost" | "link" | "text" | "icon" | null;
-    size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
+    size: "sm" | "icon-sm" | "icon-xs" | "xs" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/input-group/InputGroupButton.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<InputGroupButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupButtonProps> & Readonly<{}>, {
     variant: "default" | "outline" | "ghost" | "link" | "text" | "icon" | null;
-    size: "icon-xs" | "sm" | "icon-sm" | "xs" | null;
+    size: "sm" | "icon-sm" | "icon-xs" | "xs" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/input-group/index.d.ts

@@ -12,7 +12,7 @@ export declare const inputGroupAddonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
 export declare const inputGroupButtonVariants: (props?: ({
-    size?: "icon-xs" | "sm" | "icon-sm" | "xs" | null | undefined;
+    size?: "sm" | "icon-sm" | "icon-xs" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
 export interface InputGroupButtonProps {

package/package.json

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