@una-ui/nuxt 1.0.0-alpha.11 → 1.0.0-alpha.13

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "1.0.0-alpha.11";
+const version = "1.0.0-alpha.13";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/combobox/Combobox.vue

@@ -19,9 +19,10 @@ import ComboboxTrigger from "./ComboboxTrigger.vue";
 import ComboboxViewport from "./ComboboxViewport.vue";
 const props = defineProps({
   modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   items: { type: Array, required: false },
-  labelKey: { type: null, required: false },
-  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  valueKey: { type: null, required: false, default: "value" },
   groupSeparator: { type: Boolean, required: false },
   textEmpty: { type: String, required: false, default: "No items found." },
   label: { type: String, required: false },
@@ -49,7 +50,6 @@ const props = defineProps({
   openOnClick: { type: Boolean, required: false },
   ignoreFilter: { type: Boolean, required: false },
   resetModelValueOnClear: { type: Boolean, required: false },
-  defaultValue: { type: null, required: false },
   dir: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   highlightOnHover: { type: Boolean, required: false },
@@ -87,8 +87,6 @@ const rootProps = reactiveOmit(props, [
   "_comboboxCheckbox"
 ]);
 const forwarded = useForwardPropsEmits(rootProps, emits);
-const labelKey = computed(() => props.labelKey?.toString() ?? "label");
-const valueKey = computed(() => props.valueKey?.toString() ?? "value");
 const hasGroups = computed(() => {
   return Array.isArray(props.items) && props.items.length > 0 && typeof props.items[0] === "object" && "items" in props.items[0];
 });
@@ -97,46 +95,44 @@ function getItemProperty(item, key) {
     return "";
   return typeof item !== "object" ? item : item[key];
 }
-function findItemByValue(value) {
-  if (!props.items)
-    return void 0;
-  if (hasGroups.value) {
-    for (const group of props.items) {
-      const found = group.items?.find((item) => getItemProperty(item, valueKey.value) === value);
-      if (found)
-        return found;
-    }
-    return void 0;
-  } else {
-    return props.items.find((item) => getItemProperty(item, valueKey.value) === value);
-  }
-}
 function getDisplayValue(val) {
-  if (!val || Array.isArray(val) && val.length === 0)
+  if (val == null || Array.isArray(val) && val.length === 0)
     return "";
-  if (props.multiple && Array.isArray(val)) {
+  if (Array.isArray(val)) {
     return val.map((v) => {
       if (typeof v !== "object" || v === null) {
-        const item = findItemByValue(v);
-        return item ? getItemProperty(item, labelKey.value) : v;
+        return String(v);
       }
-      return getItemProperty(v, labelKey.value) || getItemProperty(v, valueKey.value) || "";
-    }).filter(Boolean).join(", ");
+      return getItemProperty(v, props.labelKey) || getItemProperty(v, props.valueKey) || "";
+    }).filter((v) => v !== null && v !== void 0).join(", ");
   }
   if (typeof val !== "object" || val === null) {
-    const item = findItemByValue(val);
-    return item ? getItemProperty(item, labelKey.value) : String(val || "");
+    return String(val);
   }
-  return getItemProperty(val, labelKey.value) || getItemProperty(val, valueKey.value) || "";
+  return getItemProperty(val, props.labelKey) || getItemProperty(val, props.valueKey) || "";
 }
 function isItemSelected(item) {
-  if (item == null)
+  if (item == null || !props.modelValue)
     return false;
-  const itemValue = getItemProperty(item, valueKey.value);
-  if (props.multiple && Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(itemValue);
+  if (typeof item !== "object") {
+    if (Array.isArray(props.modelValue)) {
+      return props.modelValue.includes(item);
+    }
+    return props.modelValue === item;
+  }
+  const itemValue = getItemProperty(item, props.valueKey);
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.some((v) => {
+      if (typeof v !== "object" || v === null) {
+        return v === itemValue;
+      }
+      return getItemProperty(v, props.valueKey) === itemValue;
+    });
+  }
+  if (typeof props.modelValue !== "object" || props.modelValue === null) {
+    return props.modelValue === itemValue;
   }
-  return typeof props.modelValue === "object" && props.modelValue !== null ? getItemProperty(props.modelValue, valueKey.value) === itemValue : props.modelValue === itemValue;
+  return getItemProperty(props.modelValue, props.valueKey) === itemValue;
 }
 </script>
 
@@ -254,8 +250,8 @@ function isItemSelected(item) {
                   <slot name="group">
                     <ComboboxItem
                       v-for="item in items"
-                      :key="getItemProperty(item, valueKey)"
-                      :value="props.multiple ? getItemProperty(item, valueKey) : item"
+                      :key="getItemProperty(item, props.valueKey)"
+                      :value="item"
                       :size
                       v-bind="props._comboboxItem"
                       :class="cn(
@@ -265,7 +261,7 @@ function isItemSelected(item) {
                     >
                       <slot name="item" :item="item" :selected="isItemSelected(item)">
                         <slot name="label" :item="item">
-                          {{ getItemProperty(item, labelKey) }}
+                          {{ getItemProperty(item, props.labelKey) }}
                         </slot>
 
                         <ComboboxItemIndicator
@@ -300,8 +296,8 @@ function isItemSelected(item) {
                   <slot name="group" :group="group">
                     <ComboboxItem
                       v-for="item in group.items"
-                      :key="getItemProperty(item, valueKey)"
-                      :value="props.multiple ? getItemProperty(item, valueKey) : item"
+                      :key="getItemProperty(item, props.valueKey)"
+                      :value="item"
                       :size
                       v-bind="{ ...props._comboboxItem, ...group._comboboxItem }"
                       :class="cn(
@@ -311,7 +307,7 @@ function isItemSelected(item) {
                     >
                       <slot name="item" :item="item" :group="group" :selected="isItemSelected(item)">
                         <slot name="label" :item="item">
-                          {{ getItemProperty(item, labelKey) }}
+                          {{ getItemProperty(item, props.labelKey) }}
                         </slot>
 
                         <ComboboxItemIndicator

package/dist/runtime/components/combobox/ComboboxInput.vue

@@ -7,7 +7,7 @@ defineOptions({
   inheritAttrs: false
 });
 const props = defineProps({
-  displayValue: { type: Function, required: false },
+  displayValue: { type: Function, required: false, default: () => "" },
   modelValue: { type: String, required: false },
   autoFocus: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/components/combobox/ComboboxInput.vue.d.ts

@@ -1,16 +1,38 @@
+import type { NComboboxInputProps } from '../../types/index.js';
 declare var __VLS_12: any, __VLS_13: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<NComboboxInputProps>, {
+    displayValue: () => "";
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (args_0: string) => any;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<NComboboxInputProps>, {
+    displayValue: () => "";
+}>>> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/forms/Checkbox.vue

@@ -52,7 +52,7 @@ const id = computed(() => props.id ?? randomId("checkbox"));
     <CheckboxRoot
       v-bind="{ ...forwarded, ...$attrs }"
       :id="id"
-      v-slot="{ ...slotProps }"
+      v-slot="slotProps"
       :class="
   cn(
     'peer checkbox',
@@ -68,9 +68,11 @@ const id = computed(() => props.id ?? randomId("checkbox"));
         :class="cn('checkbox-indicator', una?.checkboxIndicator)"
         v-bind="props._checkboxIndicator"
       >
-        <slot name="icon">
+        <slot
+          name="icon" v-bind="slotProps"
+        >
           <Icon
-            :name="slotProps.modelValue === 'indeterminate' ? props.una?.checkboxIndeterminateIcon ?? 'checkbox-indeterminate-icon' : slotProps.modelValue ? props.una?.checkboxCheckedIcon ?? 'checkbox-checked-icon' : props.una?.checkboxUncheckedIcon ?? 'checkbox-unchecked-icon'"
+            :name="slotProps.state === 'indeterminate' ? props.una?.checkboxIndeterminateIcon ?? 'checkbox-indeterminate-icon' : slotProps.state ? props.una?.checkboxCheckedIcon ?? 'checkbox-checked-icon' : props.una?.checkboxUncheckedIcon ?? 'checkbox-unchecked-icon'"
             :class="cn('checkbox-icon-base', una?.checkboxIconBase)"
           />
         </slot>

package/dist/runtime/components/forms/Checkbox.vue.d.ts

@@ -1,5 +1,5 @@
 import type { NCheckboxProps } from '../../types/index.js';
-declare var __VLS_9: {}, __VLS_17: {};
+declare var __VLS_9: any, __VLS_17: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_9) => any;
 } & {

package/dist/runtime/components/forms/select/Select.vue

@@ -14,8 +14,8 @@ import SelectTrigger from "./SelectTrigger.vue";
 import SelectValue from "./SelectValue.vue";
 const props = defineProps({
   items: { type: null, required: false },
-  itemKey: { type: null, required: false },
-  valueKey: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
+  valueKey: { type: null, required: false, default: "value" },
   label: { type: String, required: false },
   groupSeparator: { type: Boolean, required: false },
   defaultValue: { type: null, required: false },
@@ -56,16 +56,25 @@ const forwarded = useForwardPropsEmits(props, emits);
 function formatSelectedValue(value) {
   if (!value || Array.isArray(value) && value.length === 0)
     return null;
-  if (props.multiple && Array.isArray(value)) {
+  const findItemByValue = (val) => {
+    const allItems = hasGroups.value ? props.items.flatMap((group) => group.items) : props.items;
+    return allItems?.find((item2) => {
+      const itemValue = props.valueKey && typeof item2 === "object" ? item2[props.valueKey] : item2;
+      return itemValue === val;
+    });
+  };
+  if (Array.isArray(value)) {
     return value.map((val) => {
-      if (props.valueKey && typeof val === "object") {
-        return val[props.valueKey];
+      const item2 = findItemByValue(val);
+      if (item2 && props.labelKey && typeof item2 === "object") {
+        return item2[props.labelKey];
       }
       return val;
     }).join(", ");
   }
-  if (props.valueKey && typeof value === "object") {
-    return value[props.valueKey];
+  const item = findItemByValue(value);
+  if (item && props.labelKey && typeof item === "object") {
+    return item[props.labelKey];
   }
   return value;
 }
@@ -73,6 +82,7 @@ function formatSelectedValue(value) {
 
 <template>
   <SelectRoot
+    v-slot="{ modelValue, open }"
     :class="cn(
   props.una?.select,
   props.class
@@ -131,14 +141,14 @@ function formatSelectedValue(value) {
               :key="item"
             >
               <SelectItem
-                :value="item"
+                :value="props.valueKey && typeof item === 'object' ? item[props.valueKey] : item"
                 :size
                 :select-item
                 v-bind="props._selectItem"
                 :una
               >
                 <slot name="item" :item="item">
-                  {{ props.itemKey && item ? item[props.itemKey] : item }}
+                  {{ props.labelKey && typeof item === "object" ? item[props.labelKey] : item }}
                 </slot>
                 <template #indicator>
                   <slot name="indicator" :item="item" />
@@ -177,14 +187,14 @@ function formatSelectedValue(value) {
                   :key="item"
                 >
                   <SelectItem
-                    :value="item"
+                    :value="props.valueKey && typeof item === 'object' ? item[props.valueKey] : item"
                     :size
                     :select-item
                     v-bind="{ ..._selectItem, ...group._selectItem }"
                     :una
                   >
                     <slot name="item" :item="item">
-                      {{ props.itemKey ? item[props.itemKey] : item }}
+                      {{ props.labelKey && typeof item === "object" ? item[props.labelKey] : item }}
                     </slot>
                     <template #indicator>
                       <slot name="indicator" :item="item" />

package/dist/runtime/types/combobox.d.ts

@@ -10,12 +10,17 @@ interface BaseExtensions {
 export type ExtractItemType<T> = T extends {
     items: infer I extends AcceptableValue[];
 } ? I[number] : T;
-export interface NComboboxProps<T extends AcceptableValue, M extends boolean> extends Omit<ComboboxRootProps<ExtractItemType<T>>, 'modelValue'>, Pick<NComboboxInputProps, 'status' | 'id'>, BaseExtensions {
+export interface NComboboxProps<T extends AcceptableValue, M extends boolean> extends Omit<ComboboxRootProps<ExtractItemType<T>>, 'modelValue' | 'defaultValue'>, Pick<NComboboxInputProps, 'status' | 'id'>, BaseExtensions {
     /**
      * The model value for the combobox.
-     * When using grouped items, this will be the item type from within the groups.
+     * Stores the full item object(s), not extracted values.
      */
-    modelValue?: (M extends true ? ExtractItemType<T>[] : ExtractItemType<T>) | null;
+    modelValue?: M extends true ? ExtractItemType<T>[] | null : ExtractItemType<T> | null;
+    /**
+     * The default value for the combobox.
+     * Should be the full item object(s), not extracted values.
+     */
+    defaultValue?: M extends true ? ExtractItemType<T>[] | null : ExtractItemType<T> | null;
     /**
      * The items to display in the combobox.
      *
@@ -23,17 +28,17 @@ export interface NComboboxProps<T extends AcceptableValue, M extends boolean> ex
      */
     items?: T[] | NComboboxGroupProps<ExtractItemType<T>>[];
     /**
-     * The key name to use to display in the select items.
+     * The key name to use to display in the combobox items.
      *
      * @default 'label'
      */
-    labelKey?: keyof ExtractItemType<T>;
+    labelKey?: keyof ExtractItemType<T> | string;
     /**
-     * The key name to use to display in the selected value.
+     * The key name to use for comparing items (used for selection matching).
      *
      * @default 'value'
      */
-    valueKey?: keyof ExtractItemType<T>;
+    valueKey?: keyof ExtractItemType<T> | string;
     /**
      * Whether to show a separator between groups.
      *

package/dist/runtime/types/select.d.ts

@@ -22,7 +22,7 @@ export interface SelectGroup<T extends AcceptableValue> {
     _selectLabel?: Partial<NSelectLabelProps>;
     _selectItem?: Partial<NSelectItemProps>;
 }
-export interface NSelectProps<T extends AcceptableValue, Items extends Array<T | SelectGroup<T>>, M extends boolean = false> extends SelectExtensions<T> {
+export interface NSelectProps<T extends AcceptableValue, Items extends Array<T | SelectGroup<T>>, M extends boolean = false> extends Omit<SelectExtensions<T>, 'modelValue' | 'defaultValue'> {
     /**
      * The items to display in the select.
      */
@@ -30,11 +30,11 @@ export interface NSelectProps<T extends AcceptableValue, Items extends Array<T |
     /**
      * The key name to use to display in the select items.
      */
-    itemKey?: keyof T;
+    labelKey?: keyof T | string;
     /**
      * The key name to use to display in the selected value.
      */
-    valueKey?: keyof T;
+    valueKey?: keyof T | string;
     /**
      * The label to display above the select items.
      */
@@ -45,8 +45,8 @@ export interface NSelectProps<T extends AcceptableValue, Items extends Array<T |
      * @default false
      */
     groupSeparator?: boolean;
-    defaultValue?: M extends true ? T[] : T;
-    modelValue?: M extends true ? T[] : T;
+    defaultValue?: M extends true ? any[] : any;
+    modelValue?: M extends true ? any[] : any;
     multiple?: M;
     /**
      * Sub-component configurations

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -40,11 +40,11 @@
     "@nuxt/kit": "^3.19.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@tanstack/vue-table": "^8.21.3",
-    "@unocss/core": "^66.5.4",
-    "@unocss/nuxt": "^66.5.4",
-    "@unocss/preset-attributify": "^66.5.4",
-    "@unocss/preset-icons": "^66.5.4",
-    "@unocss/reset": "^66.5.4",
+    "@unocss/core": "^66.5.10",
+    "@unocss/nuxt": "^66.5.10",
+    "@unocss/preset-attributify": "^66.5.10",
+    "@unocss/preset-icons": "^66.5.10",
+    "@unocss/reset": "^66.5.10",
     "@vee-validate/nuxt": "^4.15.1",
     "@vee-validate/zod": "^4.15.1",
     "@vueuse/core": "^12.8.2",
@@ -55,16 +55,16 @@
     "ohash": "^1.1.6",
     "reka-ui": "^2.6.0",
     "tailwind-merge": "^3.4.0",
-    "unocss": "^66.5.4",
+    "unocss": "^66.5.10",
     "unocss-preset-animations": "^1.3.0",
     "vaul-vue": "^0.4.1",
-    "@una-ui/extractor-vue-script": "^1.0.0-alpha.11",
-    "@una-ui/preset": "^1.0.0-alpha.11"
+    "@una-ui/extractor-vue-script": "^1.0.0-alpha.13",
+    "@una-ui/preset": "^1.0.0-alpha.13"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.73",
-    "@iconify-json/radix-icons": "^1.2.5",
-    "@iconify-json/tabler": "^1.2.23",
+    "@iconify-json/lucide": "^1.2.86",
+    "@iconify-json/radix-icons": "^1.2.6",
+    "@iconify-json/tabler": "^1.2.26",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^3.19.2",
     "nuxt": "^3.19.2",