nuance-ui 0.2.5 → 0.2.7

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
@@ -7,9 +7,9 @@ export interface ComboboxGroupProps<Value extends string = string, Ext extends C
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxGroupProps<Value, Ext> & {
-        value?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        value?: string | string[] | null;
     }) & {
-        "onUpdate:value"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:value"?: ((value: string | string[] | null | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -19,13 +19,13 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: ComboboxItem<Value, Ext>;
+            data: import("./types.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";
         }) => any;
     };
-    emit: (event: "update:value", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void;
+    emit: (event: "update:value", value: string | string[] | null | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -21,29 +21,29 @@ const {
   iconPosition: { type: String, required: false }
 });
 const uid = useId();
-const value = defineModel("value", { type: [Object, Array, null] });
+const value = defineModel("value", { type: [String, Array, null] });
 </script>
 
 <template>
-	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
-		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</div>
-
-		<ComboboxOption
-			v-for='item in data.items'
-			:key='item.value'
-			:data='item'
-			:icon-position
-			:with-check-icon
-			:check-icon
-			:checked='isValueChecked(value, item)'
-		>
-			<template v-if='$slots.option' #default='props'>
-				<slot name='option' v-bind='props' />
-			</template>
-		</ComboboxOption>
-	</Box>
+	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
+		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</div>
+
+		<ComboboxOption
+			v-for='item in data.items'
+			:key='item.value'
+			:data='item'
+			:icon-position
+			:with-check-icon
+			:check-icon
+			:checked='isValueChecked(value, item.value)'
+		>
+			<template v-if='$slots.option' #default='props'>
+				<slot name='option' v-bind='props' />
+			</template>
+		</ComboboxOption>
+	</Box>
 </template>

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
@@ -7,9 +7,9 @@ export interface ComboboxGroupProps<Value extends string = string, Ext extends C
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxGroupProps<Value, Ext> & {
-        value?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        value?: string | string[] | null;
     }) & {
-        "onUpdate:value"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:value"?: ((value: string | string[] | null | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -19,13 +19,13 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: ComboboxItem<Value, Ext>;
+            data: import("./types.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";
         }) => any;
     };
-    emit: (event: "update:value", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void;
+    emit: (event: "update:value", value: string | string[] | null | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/combobox/combobox-option-list.vue

@@ -9,7 +9,7 @@ const { labelledBy, mod } = defineProps({
 </script>
 
 <template>
-	<Box :class='css.options' role='listbox' :aria-labelledby='labelledBy' :mod>
-		<slot />
-	</Box>
+	<Box :class='css.options' role='listbox' :aria-labelledby='labelledBy' :mod>
+		<slot />
+	</Box>
 </template>

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types.js';
 export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     data: ComboboxItem<Value, Ext>;
     checked: boolean;

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

@@ -8,7 +8,7 @@ const {
   data,
   iconPosition = "left",
   checkIcon = "gravity-ui:check",
-  withCheckIcon,
+  withCheckIcon = true,
   mod: _mod,
   checked,
   selected
@@ -26,7 +26,6 @@ defineSlots();
 const { onOptionSubmit } = useComboboxState();
 const mod = computed(() => [
   {
-    [COMBOBOX_ATTRS.option]: true,
     [COMBOBOX_ATTRS.active]: checked,
     [COMBOBOX_ATTRS.selected]: selected,
     [COMBOBOX_ATTRS.disabled]: data?.disabled,
@@ -38,30 +37,26 @@ const mod = computed(() => [
 </script>
 
 <template>
-	<Box
-		:class='css.option'
-		:mod
-		role='option'
-		:aria-selected='checked'
-		@click='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
-	>
-		<slot
-			:with-check-icon
-			:icon-position
-			:data
-			:checked
-		>
-			<Icon
-				v-if='withCheckIcon && iconPosition === "left"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-			<span>{{ data.label }}</span>
-			<Icon
-				v-if='withCheckIcon && iconPosition === "right"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-		</slot>
-	</Box>
+	<Box
+		:class='css.option'
+		data-combobox-option
+		:mod
+		role='option'
+		:aria-selected='checked'
+		@mousedown='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
+	>
+		<slot :with-check-icon :icon-position :data :checked>
+			<Icon
+				v-if='checked && withCheckIcon && iconPosition === "left"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+			<span>{{ data.label }}</span>
+			<Icon
+				v-if='checked && withCheckIcon && iconPosition === "right"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+		</slot>
+	</Box>
 </template>

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types.js';
 export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     data: ComboboxItem<Value, Ext>;
     checked: boolean;

package/dist/runtime/components/combobox/combobox-options-dropdown.d.vue.ts

@@ -1,12 +1,10 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    data: ComboboxParsedItem<Value, Ext>[];
-    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxParsedItem<Value, Ext>[];
+    data: ComboboxOption<Value, Ext>[];
+    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];
     limit?: number;
-    withScrollArea?: boolean;
     maxDropdownHeight?: number | string;
-    hiddenWhenEmpty?: boolean;
     filterOptions?: boolean;
     nothingFoundMessage?: string;
     labelId: string | undefined;
@@ -17,9 +15,9 @@ export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxOptionsDropdownProps<Value, Ext> & {
         search?: string | undefined;
-        modelValue?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        modelValue?: string | string[] | null;
     }) & {
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null | undefined) => any) | undefined;
         "onUpdate:search"?: ((value: string | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -27,7 +25,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((event: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
+    emit: ((event: "update:modelValue", value: string | string[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/combobox/combobox-options-dropdown.vue

@@ -4,7 +4,7 @@ import ComboboxDropdown from "./combobox-dropdown.vue";
 import ComboboxEmpty from "./combobox-empty.vue";
 import ComboboxGroup from "./combobox-group.vue";
 import ComboboxOptionList from "./combobox-option-list.vue";
-import ComboboxOption from "./combobox-option.vue";
+import ComboboxOptions from "./combobox-option.vue";
 import { defaultOptionsFilter, isEmptyComboboxData, isOptionsGroup, isValueChecked } from "./lib/utils";
 const {
   data,
@@ -20,9 +20,7 @@ const {
   data: { type: Array, required: true },
   filter: { type: Function, required: false },
   limit: { type: Number, required: false },
-  withScrollArea: { type: Boolean, required: false },
   maxDropdownHeight: { type: [Number, String], required: false },
-  hiddenWhenEmpty: { type: Boolean, required: false },
   filterOptions: { type: Boolean, required: false },
   nothingFoundMessage: { type: String, required: false },
   labelId: { type: null, required: true },
@@ -31,7 +29,7 @@ const {
   checkIcon: { type: String, required: false }
 });
 const search = defineModel("search", { type: null });
-const value = defineModel({ type: [Object, Array, null] });
+const value = defineModel({ type: [String, Array, null] });
 const isEmpty = computed(() => isEmptyComboboxData(data));
 const filteredData = computed(() => typeof search.value === "string" ? (filter || defaultOptionsFilter)({
   options: data,
@@ -41,7 +39,7 @@ const filteredData = computed(() => typeof search.value === "string" ? (filter |
 </script>
 
 <template>
-	<ComboboxDropdown data-composed>
+	<ComboboxDropdown>
 		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
 			<template
 				v-for='item in filteredData'
@@ -50,18 +48,19 @@ const filteredData = computed(() => typeof search.value === "string" ? (filter |
 				<ComboboxGroup
 					v-if='isOptionsGroup(item)'
 					v-model:value='value'
+					:label='item.group'
 					:data='item'
 					:with-check-icon
 					:icon-position
 					:check-icon
 				/>
-				<ComboboxOption
+				<ComboboxOptions
 					v-else
 					:data='item'
 					:with-check-icon
 					:icon-position
 					:check-icon
-					:checked='isValueChecked(value, item)'
+					:checked='isValueChecked(value, item.value)'
 				/>
 			</template>
 			<ComboboxEmpty v-if='isEmpty'>

package/dist/runtime/components/combobox/combobox-options-dropdown.vue.d.ts

@@ -1,12 +1,10 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    data: ComboboxParsedItem<Value, Ext>[];
-    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxParsedItem<Value, Ext>[];
+    data: ComboboxOption<Value, Ext>[];
+    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];
     limit?: number;
-    withScrollArea?: boolean;
     maxDropdownHeight?: number | string;
-    hiddenWhenEmpty?: boolean;
     filterOptions?: boolean;
     nothingFoundMessage?: string;
     labelId: string | undefined;
@@ -17,9 +15,9 @@ export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxOptionsDropdownProps<Value, Ext> & {
         search?: string | undefined;
-        modelValue?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        modelValue?: string | string[] | null;
     }) & {
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null | undefined) => any) | undefined;
         "onUpdate:search"?: ((value: string | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -27,7 +25,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((event: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
+    emit: ((event: "update:modelValue", value: string | string[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -6,8 +6,6 @@ export interface ComboboxProps extends PopoverProps {
     store?: ComboboxStore;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
-    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
-    scrollBehavior?: ScrollBehavior;
     /** Controls items `font-size` and `padding` @default `'sm'` */
     size?: NuanceSize;
     /** Controls `padding` of the dropdown @default `4` */
@@ -27,16 +25,16 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: number) => any;
     clear: () => any;
-    close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
-    submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
-    open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    close: (args_0: import("./types.js").ComboboxDropdownEventSource) => any;
+    submit: (args_0: string, args_1: import("./types.js").ComboboxItem<string, object>) => any;
+    open: (args_0: import("./types.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((args_0: number) => any) | undefined;
     onClear?: (() => any) | undefined;
-    onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
-    onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
-    onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    onClose?: ((args_0: import("./types.js").ComboboxDropdownEventSource) => any) | undefined;
+    onSubmit?: ((args_0: string, args_1: import("./types.js").ComboboxItem<string, object>) => any) | undefined;
+    onOpen?: ((args_0: import("./types.js").ComboboxDropdownEventSource) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -3,7 +3,6 @@ import Popover from "../popover/popover.vue";
 import { useProvideComboboxState } from "./lib/context";
 import { useCombobox } from "./lib/use-combobox";
 const {
-  scrollBehavior = "instant",
   loop = true,
   readOnly = false,
   size = "sm",
@@ -13,7 +12,6 @@ const {
 } = defineProps({
   store: { type: Object, required: false },
   loop: { type: Boolean, required: false },
-  scrollBehavior: { type: null, required: false },
   size: { type: String, required: false },
   dropdownPadding: { type: String, required: false },
   readOnly: { type: Boolean, required: false },
@@ -35,7 +33,7 @@ const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 const store = _store ?? useCombobox({
   loop,
-  scrollBehavior,
+  scrollBehavior: "instant",
   onSelect: (ix) => emit("select", ix),
   onClear: () => emit("clear"),
   onOpenDropdown: (source) => emit("open", source),
@@ -53,7 +51,7 @@ useProvideComboboxState({
 </script>
 
 <template>
-	<Popover v-bind='rest' v-model:open='opened'>
-		<slot />
-	</Popover>
+	<Popover v-bind='rest' v-model:open='opened'>
+		<slot />
+	</Popover>
 </template>

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

@@ -6,8 +6,6 @@ export interface ComboboxProps extends PopoverProps {
     store?: ComboboxStore;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
-    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
-    scrollBehavior?: ScrollBehavior;
     /** Controls items `font-size` and `padding` @default `'sm'` */
     size?: NuanceSize;
     /** Controls `padding` of the dropdown @default `4` */
@@ -27,16 +25,16 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: number) => any;
     clear: () => any;
-    close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
-    submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
-    open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    close: (args_0: import("./types.js").ComboboxDropdownEventSource) => any;
+    submit: (args_0: string, args_1: import("./types.js").ComboboxItem<string, object>) => any;
+    open: (args_0: import("./types.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((args_0: number) => any) | undefined;
     onClear?: (() => any) | undefined;
-    onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
-    onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
-    onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    onClose?: ((args_0: import("./types.js").ComboboxDropdownEventSource) => any) | undefined;
+    onSubmit?: ((args_0: string, args_1: import("./types.js").ComboboxItem<string, object>) => any) | undefined;
+    onOpen?: ((args_0: import("./types.js").ComboboxDropdownEventSource) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -26,7 +26,7 @@ const { store: { targetRef } } = useComboboxState();
 </script>
 
 <template>
-	<PopoverTarget ref='targetRef' v-bind='aria' disabled>
-		<slot />
-	</PopoverTarget>
+	<PopoverTarget ref='targetRef' v-bind='aria' disable>
+		<slot />
+	</PopoverTarget>
 </template>

package/dist/runtime/components/combobox/combobox.module.css

@@ -1 +1 @@
-.dropdown{--combobox-padding:.25rem;padding:var(--combobox-padding)}.dropdown:has([data-scrollbar]) .search{max-width:calc(100% + var(--combobox-padding))}.dropdown[data-composed]{padding-inline-end:0}.dropdown[data-hidden]{display:none}.dropdown,.options{--combobox-option-padding-xs:rem(4px) rem(8px);--combobox-option-padding-sm:rem(6px) rem(10px);--combobox-option-padding-md:rem(8px) rem(12px);--combobox-option-padding-lg:rem(10px) rem(16px);--combobox-option-padding-xl:rem(14px) rem(20px);--combobox-option-padding:var(--combobox-option-padding-sm)}.option{align-items:center;background-color:transparent;border-radius:var(--radius-default);color:inherit;cursor:pointer;display:flex;font-size:var(--combobox-option-fz,var(--font-size-sm));gap:8px;overflow-wrap:break-word;padding:var(--combobox-option-padding)}.option:where([data-combobox-selected]){background-color:var(--color-primary-filled);color:var(--color-white)}.option:where([data-combobox-disabled]){cursor:not-allowed;opacity:.35}.option:where([data-reverse]){justify-content:space-between}.option{@mixin hover{&:where(:not([data-combobox-selected],[data-combobox-disabled])){@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-7)}}}}.optionCheck{height:.8em;min-width:.8em;opacity:.4;width:.8em}:where([data-combobox-selected]) .optionCheck{opacity:1}.search{border-end-end-radius:0;border-end-start-radius:0;border-inline-width:0;border-top-width:0;margin-inline:calc(var(--combobox-padding)*-1);margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1);position:relative;width:calc(100% + var(--combobox-padding)*2)}.search,.search:focus{@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.search{@mixin where-light{background-color:var(--color-white)}}.search{@mixin where-dark{background-color:var(--color-dark-7)}}.empty{color:var(--color-dimmed);font-size:var(--combobox-option-fz,var(--font-size-sm));padding:var(--combobox-option-padding);text-align:center}.footer,.header{border:0 solid transparent;font-size:var(--combobox-option-fz,var(--font-size-sm));margin-inline:calc(var(--combobox-padding)*-1);padding:var(--combobox-option-padding);@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.footer{border-top-width:1px;margin-bottom:calc(var(--combobox-padding)*-1);margin-top:var(--combobox-padding)}.header{border-bottom-width:1px;margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1)}.group:has(.groupLabel:only-child){display:none}.groupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--font-size-sm))*.85);font-weight:500;padding:var(--combobox-option-padding);position:relative}.groupLabel:after{content:"";flex:1;height:1px;inset-inline:0;margin-inline-start:var(--spacing-xs);@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.groupLabel:only-child{display:none}.chevron{--combobox-chevron-size-xs:rem(14px);--combobox-chevron-size-sm:rem(18px);--combobox-chevron-size-md:rem(20px);--combobox-chevron-size-lg:rem(24px);--combobox-chevron-size-xl:rem(28px);--combobox-chevron-size:var(--combobox-chevron-size-sm);@mixin where-light{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-gray-6))}@mixin where-dark{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-dark-3))}color:var(--_combobox-chevron-color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}.chevron:where([data-error]){color:var(--combobox-chevron-color,var(--color-error))}
+.dropdown{--combobox-padding:.25rem;padding:var(--combobox-padding)}.dropdown:has([data-scrollbar]) .search{max-width:calc(100% + var(--combobox-padding))}.dropdown[data-hidden]{display:none}.dropdown,.options{--combobox-option-padding-xs:rem(4px) rem(8px);--combobox-option-padding-sm:rem(6px) rem(10px);--combobox-option-padding-md:rem(8px) rem(12px);--combobox-option-padding-lg:rem(10px) rem(16px);--combobox-option-padding-xl:rem(14px) rem(20px);--combobox-option-padding:var(--combobox-option-padding-sm)}.option{align-items:center;background-color:transparent;border-radius:var(--radius-default);color:inherit;cursor:pointer;display:flex;font-size:var(--combobox-option-fz,var(--font-size-sm));gap:8px;overflow-wrap:break-word;padding:var(--combobox-option-padding)}.option:where([data-combobox-selected]){background-color:var(--color-primary-filled);color:var(--color-white)}.option:where([data-combobox-disabled]){cursor:not-allowed;opacity:.35}.option:where([data-reverse]){justify-content:space-between}.option{@mixin hover{&:where(:not([data-combobox-selected],[data-combobox-disabled])){@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-7)}}}}.optionCheck{height:.8em;min-width:.8em;opacity:.4;width:.8em}:where([data-combobox-selected]) .optionCheck{opacity:1}.search{border-end-end-radius:0;border-end-start-radius:0;border-inline-width:0;border-top-width:0;margin-inline:calc(var(--combobox-padding)*-1);margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1);position:relative;width:calc(100% + var(--combobox-padding)*2)}.search,.search:focus{@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.search{@mixin where-light{background-color:var(--color-white)}}.search{@mixin where-dark{background-color:var(--color-dark-7)}}.empty{color:var(--color-dimmed);font-size:var(--combobox-option-fz,var(--font-size-sm));padding:var(--combobox-option-padding);text-align:center}.footer,.header{border:0 solid transparent;font-size:var(--combobox-option-fz,var(--font-size-sm));margin-inline:calc(var(--combobox-padding)*-1);padding:var(--combobox-option-padding);@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.footer{border-top-width:1px;margin-bottom:calc(var(--combobox-padding)*-1);margin-top:var(--combobox-padding)}.header{border-bottom-width:1px;margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1)}.group:has(.groupLabel:only-child){display:none}.groupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--font-size-sm))*.85);font-weight:500;padding:var(--combobox-option-padding);position:relative}.groupLabel:after{content:"";flex:1;height:1px;inset-inline:0;margin-inline-start:var(--spacing-xs);@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.groupLabel:only-child{display:none}.chevron{--combobox-chevron-size-xs:rem(14px);--combobox-chevron-size-sm:rem(18px);--combobox-chevron-size-md:rem(20px);--combobox-chevron-size-lg:rem(24px);--combobox-chevron-size-xl:rem(28px);--combobox-chevron-size:var(--combobox-chevron-size-sm);@mixin where-light{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-gray-6))}@mixin where-dark{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-dark-3))}color:var(--_combobox-chevron-color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}.chevron:where([data-error]){color:var(--combobox-chevron-color,var(--color-error))}

package/dist/runtime/components/combobox/lib/context.d.ts

@@ -1,7 +1,7 @@
 import type { NuanceSize } from '@nui/types';
 import type { CSSProperties, ModelRef } from 'vue';
-import type { ComboboxItem } from '../types/index.js';
-import type { ComboboxStore } from './use-combobox/use-combobox.js';
+import type { ComboboxItem } from '../types.js';
+import type { ComboboxStore } from './use-combobox/index.js';
 interface ComboboxState {
     opened: ModelRef<boolean>;
     onOptionSubmit?: (value: string, option: ComboboxItem) => void;

package/dist/runtime/components/combobox/lib/context.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 const injectionKey = Symbol("combobox-store");
 export const [useProvide, useState] = createStrictInjection((state) => state, {
   injectionKey,

package/dist/runtime/components/combobox/lib/use-combobox/index.d.ts

@@ -1 +1,70 @@
-export { type ComboboxStore, useCombobox } from './use-combobox.js';
+import type { ModelRef, ShallowRef } from 'vue';
+import type { ComboboxDropdownEventSource } from '../../types.js';
+import type { ComboboxAttrs } from '../const.js';
+export interface ComboboxStore {
+    /** Id passed to dropdown */
+    listId: string;
+    /** Opens dropdown */
+    openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
+    /** Closes dropdown */
+    closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
+    /** Toggles dropdown opened state */
+    toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
+    /** Returns currently selected option index or `-1` if none of the options is selected */
+    getSelectedOptionIx: () => number;
+    /** Selects `Combobox.Option` by index */
+    selectOption: (index: number) => void;
+    /**
+     * Selects first `Combobox.Option` with `active` prop.
+     *  If there are no such options, the function does nothing.
+     */
+    selectActiveOption: () => string | null;
+    /**
+     * Selects first `Combobox.Option` that is not disabled.
+     *  If there are no such options, the function does nothing.
+     */
+    selectFirstOption: () => string | null;
+    /**
+     * Selects next `Combobox.Option` that is not disabled.
+     *  If the current option is the last one, the function selects first option, if `loop` is true.
+     */
+    selectNextOption: () => string | null;
+    /**
+     * Selects previous `Combobox.Option` that is not disabled.
+     *  If the current option is the first one, the function selects last option, if `loop` is true.
+     */
+    selectPrevOption: () => string | null;
+    /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */
+    resetSelectedOption: () => void;
+    /**
+     * Triggers `onClick` event of selected option.
+     *  If there is no selected option, the function does nothing.
+     */
+    clickSelectedOption: () => void;
+    /**
+     * Updates selected option index to currently selected or active option.
+     *  The function is required to be used with searchable components to update selected option index
+     *  when options list changes based on search query.
+     */
+    updateSelectedOptionIx: (target?: 'active' | 'selected', options?: {
+        scrollIntoView?: boolean;
+    }) => void;
+    /** Ref of `Combobox.Search` input */
+    searchRef: ShallowRef<HTMLInputElement | null>;
+    /** Moves focus to `Combobox.Search` input */
+    focusSearch: () => void;
+    /** Ref of the target element */
+    targetRef: ShallowRef<HTMLElement | null>;
+    /** Moves focus to the target element */
+    focusTarget: () => void;
+}
+export declare function useCombobox({ onSelect, onClear, onCloseDropdown, onOpenDropdown, opened, ..._options }: {
+    attrs?: ComboboxAttrs;
+    scrollBehavior?: ScrollBehavior;
+    loop?: boolean;
+    onSelect?: (ix: number) => void;
+    onClear?: () => void;
+    onOpenDropdown?: (eventSource: ComboboxDropdownEventSource) => void;
+    onCloseDropdown?: (eventSource: ComboboxDropdownEventSource) => void;
+    opened: ModelRef<boolean>;
+}): ComboboxStore;