pukaad-ui-lib 1.0.1 → 1.1.0

package/dist/module.json

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

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

@@ -1,29 +1,51 @@
-interface TypeItem {
-    label: string | number;
+import type { HTMLAttributes } from "vue";
+interface AutocompleteOption {
+    label: string;
     value: string | number;
 }
-type __VLS_Props = {
-    label?: string;
-    items?: TypeItem[] | string[] | number[];
+interface InputAutocompleteProps {
+    id?: string;
+    name?: string;
+    class?: HTMLAttributes["class"];
     placeholder?: string;
-    fullWidth?: boolean;
+    rules?: object | string | Function;
+    label?: string;
+    description?: string;
+    disabledErrorMessage?: boolean;
     required?: boolean;
-    fullWidthContent?: boolean;
-    multiple?: boolean;
-};
+    disabledBorder?: boolean;
+    options?: AutocompleteOption[] | string[] | number[];
+}
+type __VLS_Props = InputAutocompleteProps;
 type __VLS_ModelProps = {
-    modelValue?: string | number | TypeItem[] | undefined;
+    modelValue?: string | number;
 };
 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 | number | TypeItem[] | undefined) => any;
+declare var __VLS_18: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    setErrors: (errMsg: string[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | TypeItem[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    items: TypeItem[] | string[] | number[];
-    fullWidth: boolean;
-    fullWidthContent: boolean;
-    multiple: boolean;
+    required: boolean;
+    id: string;
+    name: string;
+    placeholder: string;
+    description: string;
+    options: AutocompleteOption[] | string[] | number[];
+    disabledErrorMessage: boolean;
+    disabledBorder: 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-autocomplete.vue

@@ -1,335 +1,170 @@
 <template>
-  <Dropdown
-    :full-width="props.fullWidthContent"
-    disabledToggle
-    v-model="isOpenDropdown"
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField }"
+    v-model="modelValue"
   >
-   
-    <InputTextField
-      v-if="props.multiple"
-      ref="hiddenInputRef"
-      :full-width="props.fullWidth"
-      v-model="searchQuery"
-      :placeholder="selectedItems.length === 0 ? getPlaceholder : ''"
-      :label="props.label"
-      :required="props.required"
-      @focus="onFocusInput"
-      @blur="onBlurInput"
-      @backspace="onBackspace"
-      :reset="false"
-    >
-      <template #inside>
-        <div
-          v-if="selectedItems.length > 0"
-          class="flex flex-wrap items-center gap-2"
-        >
-          <span
-            v-for="(item, index) in selectedItems"
-            :key="item.value"
+    <ShadFormItem>
+      <ShadFormLabel v-if="$slots.label || props.label" class="w-full">
+        <slot name="label">
+          <div
             :class="[
-  'inline-flex font-body-large',
-  chipToDelete && index === selectedItems.length - 1 ? 'text-primary' : ''
+  'flex-1',
+  props.disabledBorder && 'font-body-small-prominent'
 ]"
           >
-            {{ item.label }}{{ index !== selectedItems.length - 1 ? "," : "" }}
-          </span>
-        </div>
-      </template>
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+      </ShadFormLabel>
 
-      <template #append>
-        <template v-if="selectedItems.length > 0">
-          <Icon
-            name="fa6-solid:xmark"
-            class="cursor-pointer"
-            @click="clearAllSelections"
-          />
-        </template>
-        <template v-else>
-          <Icon
-            :name="isOpenDropdown ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-          />
-        </template>
-      </template>
-    </InputTextField>
+      <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>
 
-    <InputTextField
-      v-else
-      ref="inputFieldRef"
-      :full-width="props.fullWidth"
-      :placeholder="getPlaceholder"
-      :label="props.label"
-      :required="props.required"
-      @focus="onFocusInput"
-      @blur="onBlurInput"
-      @backspace="onBackspace"
-      :append-icon="
-  isOpenDropdown ? 'lucide:chevron-up' : 'lucide:chevron-down'
-"
-      :reset="true"
-      v-model="displayValue"
-    />
+        <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>
 
-    <template #content>
-      <ul v-if="items.length > 0" class="max-h-96 overflow-y-auto">
-        <li
-          v-for="(item, index) in items"
-          :key="index"
-          :class="[
-  'hover:bg-smoke font-body-large',
-  index === 0 && 'rounded-t-[8px]',
-  index === items.length - 1 && 'rounded-b-[8px]',
-  index !== items.length - 1 && 'border-b-[1px] border-cloud',
-  props.multiple ? 'p-2' : 'p-[8px] cursor-pointer'
+          <!-- 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'
 ]"
-          @click="!props.multiple && onSelectItem(item)"
-          @mousedown="props.multiple && $event.preventDefault()"
-        >
-          <div v-if="props.multiple" class="flex items-center">
-            <InputCheckbox
-              :model-value="isItemSelected(item)"
-              @change="() => toggleItemSelection(item)"
-              :label="String(item.label)"
-              label-position="right"
-              :label-gap="8"
-              :key="`checkbox-${item.value}-${isItemSelected(item)}`"
-            />
+              />
+              <span>{{ option.label }}</span>
+            </div>
           </div>
-          <template v-else>
-            {{ item.label }}
-          </template>
-        </li>
-      </ul>
+        </ShadPopoverContent>
+      </ShadPopover>
 
-     
-      <div v-else class="h-[165px] flex justify-center items-center">
-        <div class="flex flex-col justify-center">
-          <Icon name="pukaad:page-not-found" size="70" />
-          <div class="font-body-large text-center">ไม่พบข้อมูล</div>
-        </div>
-      </div>
-    </template>
-  </Dropdown>
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>
-import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { ref, computed, watch } from "vue";
 const props = defineProps({
+  id: { type: String, required: false, default: "input-autocomplete" },
+  name: { type: String, required: false, default: "input-autocomplete" },
+  class: { type: null, required: false },
+  placeholder: { type: String, required: false, default: "\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32..." },
+  rules: { type: [Object, String, Function], required: false },
   label: { type: String, required: false },
-  items: { type: Array, required: false, default: () => [] },
-  placeholder: { type: String, required: false },
-  fullWidth: { type: Boolean, required: false, default: false },
-  required: { type: Boolean, required: false },
-  fullWidthContent: { type: Boolean, required: false, default: true },
-  multiple: { type: Boolean, required: false, default: false }
+  description: { type: String, required: false, default: "" },
+  disabledErrorMessage: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  disabledBorder: { type: Boolean, required: false, default: false },
+  options: { type: Array, required: false, default: () => [] }
 });
-const modelValue = defineModel({ type: null });
-const isOpenDropdown = ref(false);
-const isSearching = ref(false);
-const chipToDelete = ref(false);
-const textFieldValue = ref("");
-const searchQuery = ref("");
-const selectedItems = ref([]);
-const inputFieldRef = ref();
-const hiddenInputRef = ref();
-const normalizeItems = (items2) => {
-  if (isArrayOfObjects(items2)) {
-    return items2;
-  }
-  return items2.map((item) => ({
-    label: item,
-    value: item
-  }));
-};
-const isArrayOfObjects = (arr) => {
-  return Array.isArray(arr) && arr.every(
-    (item) => typeof item === "object" && item !== null && !Array.isArray(item)
-  );
-};
-const getCurrentSelectedLabel = () => {
-  if (!modelValue.value) return "";
-  const selectedItem = props.items.find((item) => {
-    if (typeof item === "object") {
-      return item.value === modelValue.value;
-    } else {
-      return item === modelValue.value;
+const modelValue = defineModel({ type: [String, Number], ...{
+  default: ""
+} });
+const open = ref(false);
+const searchText = ref("");
+const fieldRef = ref();
+const containerRef = ref();
+const normalizedOptions = computed(() => {
+  return props.options.map((option) => {
+    if (typeof option === "object" && option !== null) {
+      return option;
     }
+    return {
+      label: String(option),
+      value: option
+    };
   });
-  return selectedItem ? typeof selectedItem === "object" ? String(selectedItem.label) : String(selectedItem) : "";
-};
-const getPlaceholder = computed(() => {
-  return props.placeholder || "";
 });
-const displayValue = computed({
-  get() {
-    return textFieldValue.value;
-  },
-  set(value) {
-    onInputChange(value);
-  }
-});
-const items = computed(() => {
-  const normalizedItems = normalizeItems(props.items);
-  const filterText = props.multiple ? searchQuery.value : textFieldValue.value;
-  if (!props.multiple && modelValue.value && !isSearching.value) {
-    return normalizedItems;
+const filteredOptions = computed(() => {
+  if (!searchText.value) {
+    return normalizedOptions.value;
   }
-  return normalizedItems.filter((item) => {
-    return String(item.label).toLowerCase().includes(filterText.toLowerCase());
-  });
+  const query = searchText.value.toLowerCase();
+  return normalizedOptions.value.filter(
+    (option) => option.label.toLowerCase().includes(query)
+  );
 });
 watch(
-  () => modelValue.value,
+  modelValue,
   (newValue) => {
-    if (props.multiple) {
-      selectedItems.value = Array.isArray(newValue) ? newValue : [];
-    } else {
-      if (newValue !== void 0 && newValue !== null) {
-        const selectedItem = items.value.find(
-          (item) => item.value === newValue
-        );
-        textFieldValue.value = selectedItem ? String(selectedItem.label) : String(newValue);
-        isSearching.value = false;
-      } else {
-        textFieldValue.value = "";
-        isSearching.value = false;
+    if (newValue) {
+      const selected = normalizedOptions.value.find(
+        (option) => option.value === newValue
+      );
+      if (selected) {
+        searchText.value = selected.label;
       }
+    } else {
+      searchText.value = "";
     }
   },
   { immediate: true }
 );
-watch(
-  selectedItems,
-  (newItems) => {
-    if (props.multiple) {
-      modelValue.value = newItems;
-    }
-  },
-  { deep: true }
-);
-watch(searchQuery, (newValue) => {
-  if (newValue.trim()) {
-    chipToDelete.value = false;
-  }
-});
-watch(textFieldValue, (newValue) => {
-  if (!props.multiple && (!newValue || newValue.trim() === "")) {
-    if (modelValue.value !== void 0) {
-      modelValue.value = void 0;
-    }
-  }
-});
-const onSelectItem = (item) => {
-  if (!props.multiple) {
-    modelValue.value = item.value;
-    textFieldValue.value = String(item.label);
-    isSearching.value = false;
-    isOpenDropdown.value = false;
-  }
-};
-const isItemSelected = (item) => {
-  return selectedItems.value.some((selected) => selected.value === item.value);
-};
-const toggleItemSelection = async (item) => {
-  const isSelected = selectedItems.value.some(
-    (selected) => selected.value === item.value
-  );
-  if (isSelected) {
-    selectedItems.value = selectedItems.value.filter(
-      (selected) => selected.value !== item.value
-    );
-  } else {
-    selectedItems.value = [...selectedItems.value, item];
-  }
-  searchQuery.value = "";
-  chipToDelete.value = false;
-  await nextTick();
-  if (props.multiple && hiddenInputRef.value?.inputRef) {
-    hiddenInputRef.value.inputRef.focus();
-  }
-};
-const removeSelectedItem = async (item) => {
-  selectedItems.value = selectedItems.value.filter(
-    (selected) => selected.value !== item.value
-  );
-  chipToDelete.value = false;
-  await nextTick();
-};
-const clearAllSelections = () => {
-  selectedItems.value = [];
-  searchQuery.value = "";
-  chipToDelete.value = false;
-  modelValue.value = [];
-  textFieldValue.value = "";
-};
-const onFocusInput = () => {
-  isOpenDropdown.value = true;
-  chipToDelete.value = false;
-  if (!props.multiple && modelValue.value) {
-    isSearching.value = false;
-  }
+const onFocus = () => {
+  open.value = true;
 };
-const onBlurInput = () => {
-  if (props.multiple) {
-    return;
-  } else {
-    setTimeout(() => {
-      isOpenDropdown.value = false;
-      chipToDelete.value = false;
-    }, 200);
-  }
+const toggleDropdown = () => {
+  open.value = !open.value;
 };
-const onBackspace = (event) => {
-  if (props.multiple) {
-    const isSearchQueryEmpty = !searchQuery.value || searchQuery.value.trim() === "";
-    const hasSelectedItems = selectedItems.value.length > 0;
-    if (isSearchQueryEmpty && hasSelectedItems) {
-      event.preventDefault();
-      if (!chipToDelete.value) {
-        chipToDelete.value = true;
-      } else {
-        const lastItem = selectedItems.value[selectedItems.value.length - 1];
-        if (lastItem) {
-          removeSelectedItem(lastItem);
-        }
-      }
-    } else {
-      chipToDelete.value = false;
-    }
-  }
+const selectOption = (option) => {
+  modelValue.value = option.value;
+  searchText.value = option.label;
+  open.value = false;
 };
-const onInputChange = (value) => {
-  if (!props.multiple) {
-    textFieldValue.value = value;
-    if (!value || value.trim() === "") {
-      modelValue.value = void 0;
-      isSearching.value = false;
-      return;
-    }
-    if (value !== String(getCurrentSelectedLabel())) {
-      isSearching.value = true;
-    } else {
-      isSearching.value = false;
-    }
+const defaultRules = (v) => {
+  if (!v && props.required) {
+    return `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 ${props.label || "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25"}`;
   }
+  return true;
 };
-const handleClickOutside = (event) => {
-  if (!props.multiple || !isOpenDropdown.value) return;
-  const target = event.target;
-  const dropdownEl = document.querySelector("[data-dropdown-content]");
-  const inputEl = hiddenInputRef.value?.$el || hiddenInputRef.value?.inputRef;
-  if (dropdownEl && inputEl && !dropdownEl.contains(target) && !inputEl.contains(target)) {
-    isOpenDropdown.value = false;
-    chipToDelete.value = false;
-  }
+const setErrors = (errMsg) => {
+  fieldRef.value?.setErrors(errMsg);
 };
-onMounted(() => {
-  if (props.multiple) {
-    document.addEventListener("click", handleClickOutside);
-  }
-});
-onUnmounted(() => {
-  if (props.multiple) {
-    document.removeEventListener("click", handleClickOutside);
-  }
+defineExpose({
+  setErrors
 });
 </script>

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

@@ -1,29 +1,51 @@
-interface TypeItem {
-    label: string | number;
+import type { HTMLAttributes } from "vue";
+interface AutocompleteOption {
+    label: string;
     value: string | number;
 }
-type __VLS_Props = {
-    label?: string;
-    items?: TypeItem[] | string[] | number[];
+interface InputAutocompleteProps {
+    id?: string;
+    name?: string;
+    class?: HTMLAttributes["class"];
     placeholder?: string;
-    fullWidth?: boolean;
+    rules?: object | string | Function;
+    label?: string;
+    description?: string;
+    disabledErrorMessage?: boolean;
     required?: boolean;
-    fullWidthContent?: boolean;
-    multiple?: boolean;
-};
+    disabledBorder?: boolean;
+    options?: AutocompleteOption[] | string[] | number[];
+}
+type __VLS_Props = InputAutocompleteProps;
 type __VLS_ModelProps = {
-    modelValue?: string | number | TypeItem[] | undefined;
+    modelValue?: string | number;
 };
 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 | number | TypeItem[] | undefined) => any;
+declare var __VLS_18: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    setErrors: (errMsg: string[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | TypeItem[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    items: TypeItem[] | string[] | number[];
-    fullWidth: boolean;
-    fullWidthContent: boolean;
-    multiple: boolean;
+    required: boolean;
+    id: string;
+    name: string;
+    placeholder: string;
+    description: string;
+    options: AutocompleteOption[] | string[] | number[];
+    disabledErrorMessage: boolean;
+    disabledBorder: 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,10 +27,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;
-    disabledErrorMessage: 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-file.vue.d.ts

@@ -27,10 +27,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;
-    disabledErrorMessage: 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-password.d.vue.ts

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

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

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    disabledBorder: boolean;
     disabledErrorMessage: boolean;
+    disabledBorder: 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-select.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    disabledBorder: boolean;
     disabledErrorMessage: boolean;
+    disabledBorder: 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-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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
-import { MagnifyingGlassIcon } from "@radix-icons/vue";
 import { ListboxFilter, useForwardProps } from "reka-ui";
 import { cn } from "@/runtime/plugins/shadcn";
 import { useCommand } from ".";
@@ -25,13 +24,18 @@ 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" />
+    <!-- <MagnifyingGlassIcon class="size-4 shrink-0 opacity-50" /> -->
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
       data-slot="command-input"
       auto-focus
-      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="
+  cn(
+    'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+    props.class
+  )
+"
     />
   </div>
 </template>

package/package.json

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