pukaad-ui-lib 1.1.0 → 1.3.1

package/dist/module.json

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

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

@@ -1,18 +1,48 @@
 interface InputComboboxProps {
     name?: string;
     rules?: object | string | Function;
+    label?: string;
+    required?: boolean;
+    disabledBorder?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    placeholder?: string;
+    options?: InputComboboxOption[];
+    multiple?: boolean;
+}
+interface InputComboboxOption {
+    label: string;
+    value: string;
 }
 type __VLS_Props = InputComboboxProps;
 type __VLS_ModelProps = {
-    modelValue?: string;
+    modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+declare var __VLS_18: {}, __VLS_70: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    options?: (props: typeof __VLS_70) => any;
+};
+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) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
     name: string;
+    limit: number;
+    multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -6,20 +6,183 @@
     v-slot="{ componentField }"
     v-model="modelValue"
   >
-    <ShadFormItem> </ShadFormItem>
+    <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>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
+            :class="[
+  (props.multiple ? modelValue.length : modelValue.length) > props.limit && 'text-destructive'
+]"
+          >
+            {{
+              props.multiple ? modelValue.length : modelValue.length
+            }}/{{ props.limit }}
+          </div>
+        </div>
+      </ShadFormLabel>
+      <ShadPopover v-bind="componentField">
+        <ShadPopoverTrigger as-child>
+          <ShadFormControl>
+            <ShadButton
+              variant="outline"
+              role="combobox"
+              class="w-full justify-between text-start"
+            >
+              {{ displayValue }}
+              <Icon name="lucide:chevrons-up-down" class="h-4 w-4" />
+            </ShadButton>
+          </ShadFormControl>
+        </ShadPopoverTrigger>
+        <ShadPopoverContent>
+          <ShadCommand>
+            <ShadCommandInput />
+            <ShadCommandList>
+              <ShadCommandGroup>
+                <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"
+                    />
+
+                    {{ option.label }}
+                    <Icon
+                      v-if="!props.multiple && isSelected(option.value)"
+                      name="lucide:check"
+                      class="ml-auto h-4 w-4"
+                    />
+                  </ShadCommandItem>
+                </slot>
+              </ShadCommandGroup>
+              <ShadCommandEmpty />
+            </ShadCommandList>
+          </ShadCommand>
+        </ShadPopoverContent>
+      </ShadPopover>
+      <ShadFormMessage />
+    </ShadFormItem>
   </ShadFormField>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 const props = defineProps({
   name: { type: String, required: false, default: "input-combobox" },
-  rules: { type: [Object, String, Function], required: false }
+  rules: { type: [Object, String, Function], required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabledBorder: { type: Boolean, required: false },
+  showCounter: { type: Boolean, required: false },
+  limit: { type: Number, required: false, default: 0 },
+  placeholder: { type: String, required: false },
+  options: { type: Array, required: false },
+  multiple: { type: Boolean, required: false, default: false }
 });
-const modelValue = defineModel({ type: String, ...{
-  default: ""
+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(() => {
+  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";
+    }
+    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";
+  } 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";
+  }
+});
+const isLimitReached = computed(() => {
+  if (!props.multiple || props.limit <= 0) return false;
+  return modelValue.value.length >= props.limit;
+});
+const isSelected = (value) => {
+  if (props.multiple) {
+    const result = modelValue.value.includes(value);
+    return result;
+  } else {
+    return modelValue.value === value;
+  }
 };
+const isOptionDisabled = (value) => {
+  if (isLimitReached.value && !isSelected(value)) {
+    return true;
+  }
+  return false;
+};
+const handleSelect = (value) => {
+  if (props.multiple) {
+    const currentValues = modelValue.value || [];
+    if (currentValues.includes(value)) {
+      modelValue.value = currentValues.filter((v) => v !== value);
+    } else {
+      if (props.limit > 0 && currentValues.length >= props.limit) {
+        return;
+      }
+      modelValue.value = [...currentValues, value];
+    }
+  } else {
+    if (modelValue.value === value) {
+      modelValue.value = "";
+    } else {
+      modelValue.value = 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);
+};
+defineExpose({
+  validate,
+  setErrors,
+  fieldRef
+});
 </script>

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

@@ -1,18 +1,48 @@
 interface InputComboboxProps {
     name?: string;
     rules?: object | string | Function;
+    label?: string;
+    required?: boolean;
+    disabledBorder?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    placeholder?: string;
+    options?: InputComboboxOption[];
+    multiple?: boolean;
+}
+interface InputComboboxOption {
+    label: string;
+    value: string;
 }
 type __VLS_Props = InputComboboxProps;
 type __VLS_ModelProps = {
-    modelValue?: string;
+    modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+declare var __VLS_18: {}, __VLS_70: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    options?: (props: typeof __VLS_70) => any;
+};
+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) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
     name: string;
+    limit: number;
+    multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     color: InputSliderColor;
     fullWidth: boolean;
     label: string;
+    step: number;
     min: number;
     max: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

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

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     color: InputSliderColor;
     fullWidth: boolean;
     label: string;
+    step: number;
     min: number;
     max: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

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

@@ -57,8 +57,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
-    readonly: 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

@@ -57,8 +57,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
-    readonly: 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

@@ -29,9 +29,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     rows: number | string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
+    showCounter: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
-    showCounter: boolean;
     standalone: boolean;
     inputClass: string;
     disabledBorderFocus: boolean;

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

@@ -29,9 +29,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     rows: number | string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
+    showCounter: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
-    showCounter: boolean;
     standalone: boolean;
     inputClass: string;
     disabledBorderFocus: boolean;

package/dist/runtime/components/ui/command/CommandEmpty.vue

@@ -20,8 +20,16 @@ const isRender = computed(
   <Primitive
     v-if="isRender"
     data-slot="command-empty"
-    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+    v-bind="delegatedProps"
+    :class="
+  cn(
+    'flex flex-col h-[192px] items-center justify-center gap-[8px] ',
+    props.class
+  )
+"
   >
     <slot />
+    <Icon name="pukaad:page-not-found" class="h-[64px] w-[74px]" />
+    <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
   </Primitive>
 </template>

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -24,7 +24,7 @@ const { filterState } = useCommand();
     data-slot="command-input-wrapper"
     class="flex h-9 items-center gap-2 border-b px-3"
   >
-    <!-- <MagnifyingGlassIcon class="size-4 shrink-0 opacity-50" /> -->
+    <Icon name="lucide:search" class="h-4 w-4" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"

package/dist/runtime/components/ui/popover/PopoverContent.vue

@@ -40,16 +40,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <PopoverPortal>
-    <PopoverContent
-      data-slot="popover-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
+    <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="
   cn(
-    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden max-h-[312px] overflow-auto w-[var(--reka-popover-trigger-width)]',
     props.class
   )
-"
-    >
+">
       <slot />
     </PopoverContent>
   </PopoverPortal>

package/package.json

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