nuance-ui 0.2.6 → 0.2.8

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

@@ -1,8 +1,11 @@
 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 {
+    /** Option data */
     data: ComboboxItem<Value, Ext>;
+    /** Whether this option is the active (highlighted) option */
     checked: boolean;
+    /** Whether this option is selected in the current value */
     selected?: boolean;
 }
 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<{

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

@@ -37,26 +37,26 @@ const mod = computed(() => [
 </script>
 
 <template>
-	<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>
+	<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,8 +1,11 @@
 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 {
+    /** Option data */
     data: ComboboxItem<Value, Ext>;
+    /** Whether this option is the active (highlighted) option */
     checked: boolean;
+    /** Whether this option is selected in the current value */
     selected?: boolean;
 }
 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<{

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

@@ -1,15 +1,25 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItemExt, ComboboxOption } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    /** List of options to render */
     data: ComboboxOption<Value, Ext>[];
+    /** Custom filter function applied to the options list */
     filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];
+    /** Maximum number of options to display */
     limit?: number;
+    /** Maximum height of the dropdown */
     maxDropdownHeight?: number | string;
+    /** Filters options by the current search value */
     filterOptions?: boolean;
+    /** Text shown when no options match the search */
     nothingFoundMessage?: string;
+    /** Id of the element that labels the options list */
     labelId: string | undefined;
+    /** Shows a check icon next to the selected option */
     withCheckIcon?: boolean;
+    /** Position of the check icon relative to the label */
     iconPosition?: 'left' | 'right';
+    /** Icon name for the check mark */
     checkIcon?: string;
 }
 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<{

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

@@ -39,33 +39,33 @@ const filteredData = computed(() => typeof search.value === "string" ? (filter |
 </script>
 
 <template>
-	<ComboboxDropdown>
-		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
-			<template
-				v-for='item in filteredData'
-				:key='isOptionsGroup(item) ? item.group : item?.value'
-			>
-				<ComboboxGroup
-					v-if='isOptionsGroup(item)'
-					v-model:value='value'
-					:label='item.group'
-					:data='item'
-					:with-check-icon
-					:icon-position
-					:check-icon
-				/>
-				<ComboboxOptions
-					v-else
-					:data='item'
-					:with-check-icon
-					:icon-position
-					:check-icon
-					:checked='isValueChecked(value, item.value)'
-				/>
-			</template>
-			<ComboboxEmpty v-if='isEmpty'>
-				{{ nothingFoundMessage }}
-			</ComboboxEmpty>
-		</ComboboxOptionList>
-	</ComboboxDropdown>
+	<ComboboxDropdown>
+		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
+			<template
+				v-for='item in filteredData'
+				:key='isOptionsGroup(item) ? item.group : item?.value'
+			>
+				<ComboboxGroup
+					v-if='isOptionsGroup(item)'
+					v-model:value='value'
+					:label='item.group'
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+				/>
+				<ComboboxOptions
+					v-else
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+					:checked='isValueChecked(value, item.value)'
+				/>
+			</template>
+			<ComboboxEmpty v-if='isEmpty'>
+				{{ nothingFoundMessage }}
+			</ComboboxEmpty>
+		</ComboboxOptionList>
+	</ComboboxDropdown>
 </template>

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

@@ -1,15 +1,25 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItemExt, ComboboxOption } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    /** List of options to render */
     data: ComboboxOption<Value, Ext>[];
+    /** Custom filter function applied to the options list */
     filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];
+    /** Maximum number of options to display */
     limit?: number;
+    /** Maximum height of the dropdown */
     maxDropdownHeight?: number | string;
+    /** Filters options by the current search value */
     filterOptions?: boolean;
+    /** Text shown when no options match the search */
     nothingFoundMessage?: string;
+    /** Id of the element that labels the options list */
     labelId: string | undefined;
+    /** Shows a check icon next to the selected option */
     withCheckIcon?: boolean;
+    /** Position of the check icon relative to the label */
     iconPosition?: 'left' | 'right';
+    /** Icon name for the check mark */
     checkIcon?: string;
 }
 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<{

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

@@ -3,14 +3,18 @@ import type { CSSProperties } from 'vue';
 import type { PopoverProps } from '../popover/index.js';
 import type { ComboboxStore } from './lib/use-combobox/index.js';
 export interface ComboboxProps extends PopoverProps {
+    /** External combobox store; creates an internal one if omitted */
     store?: ComboboxStore;
-    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    /** Loops arrow-key navigation from last item to first and back */
     loop?: boolean;
-    /** Controls items `font-size` and `padding` @default `'sm'` */
+    /**
+     * Component size
+     * @default `'sm'`
+     */
     size?: NuanceSize;
-    /** Controls `padding` of the dropdown @default `4` */
+    /** Padding token for the dropdown */
     dropdownPadding?: NuanceSize | CSSProperties['padding'];
-    /** Determines whether the `Combobox` value can be changed */
+    /** Prevents value changes */
     readOnly?: boolean;
 }
 type __VLS_Props = ComboboxProps;
@@ -25,16 +29,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.d.ts

@@ -3,14 +3,18 @@ import type { CSSProperties } from 'vue';
 import type { PopoverProps } from '../popover/index.js';
 import type { ComboboxStore } from './lib/use-combobox/index.js';
 export interface ComboboxProps extends PopoverProps {
+    /** External combobox store; creates an internal one if omitted */
     store?: ComboboxStore;
-    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    /** Loops arrow-key navigation from last item to first and back */
     loop?: boolean;
-    /** Controls items `font-size` and `padding` @default `'sm'` */
+    /**
+     * Component size
+     * @default `'sm'`
+     */
     size?: NuanceSize;
-    /** Controls `padding` of the dropdown @default `4` */
+    /** Padding token for the dropdown */
     dropdownPadding?: NuanceSize | CSSProperties['padding'];
-    /** Determines whether the `Combobox` value can be changed */
+    /** Prevents value changes */
     readOnly?: boolean;
 }
 type __VLS_Props = ComboboxProps;
@@ -25,16 +29,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/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;

package/dist/runtime/components/combobox/lib/use-combobox/index.js

@@ -1 +1,104 @@
-export { useCombobox } from "./use-combobox.js";
+import { unrefElement } from "@vueuse/core";
+import { nextTick, shallowRef, useId } from "vue";
+import { COMBOBOX_ATTRS } from "../const.js";
+import {
+  clearSelected,
+  selectActiveOption,
+  selectFirstOption,
+  selectNextOption,
+  selectOption,
+  selectPrevOption,
+  updateSelectedOptionIx
+} from "./handlers.js";
+export function useCombobox({
+  onSelect,
+  onClear,
+  onCloseDropdown,
+  onOpenDropdown,
+  opened,
+  ..._options
+}) {
+  const listId = useId();
+  const targetRef = shallowRef(null);
+  const searchRef = shallowRef(null);
+  const openDropdown = (eventSource = "unknown") => {
+    if (!opened.value) {
+      opened.value = true;
+      onOpenDropdown?.(eventSource);
+    }
+  };
+  const closeDropdown = (eventSource = "unknown") => {
+    if (opened.value) {
+      opened.value = false;
+      onCloseDropdown?.(eventSource);
+    }
+  };
+  const toggleDropdown = (eventSource = "unknown") => {
+    if (opened.value)
+      closeDropdown(eventSource);
+    else
+      openDropdown(eventSource);
+  };
+  const options = {
+    attrs: _options?.attrs ?? COMBOBOX_ATTRS,
+    scrollBehavior: _options?.scrollBehavior ?? "instant",
+    loop: _options?.loop ?? true,
+    listId,
+    selectFn: (ix) => ix ? `${ix}` : null
+  };
+  let selectedOptionIx = -1;
+  const getSelectedIx = () => selectedOptionIx;
+  const clear = () => {
+    clearSelected(options);
+    onClear?.();
+  };
+  const select = (ix) => {
+    const res = selectOption(ix, { ...options, clearFn: clear });
+    if (res) {
+      selectedOptionIx = res.ix;
+      onSelect?.(res.ix);
+      return res.value;
+    }
+    return null;
+  };
+  options.selectFn = select;
+  const selectActive = () => selectActiveOption(options);
+  const selectNext = () => selectNextOption(getSelectedIx(), options);
+  const selectPrev = () => selectPrevOption(getSelectedIx(), options);
+  const selectFirst = () => selectFirstOption(options);
+  const updateSelectedIx = (target) => updateSelectedOptionIx(target, options);
+  const resetSelectedOption = () => {
+    selectedOptionIx = -1;
+    clear();
+  };
+  const clickSelectedOption = () => {
+    const items = document.querySelectorAll(`#${options.listId} [${options.attrs.option}]`);
+    const item = items?.[selectedOptionIx];
+    item?.click();
+  };
+  const focusSearch = () => {
+    nextTick(() => unrefElement(searchRef)?.focus());
+  };
+  const focusTarget = () => {
+    nextTick(() => unrefElement(targetRef)?.focus());
+  };
+  return {
+    listId,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    selectOption: select,
+    selectActiveOption: selectActive,
+    selectNextOption: selectNext,
+    selectPrevOption: selectPrev,
+    selectFirstOption: selectFirst,
+    resetSelectedOption,
+    clickSelectedOption,
+    getSelectedOptionIx: getSelectedIx,
+    targetRef,
+    focusTarget,
+    searchRef,
+    focusSearch,
+    updateSelectedOptionIx: updateSelectedIx
+  };
+}

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxData, ComboboxItemExt, ComboboxOption } from '../../types/index.js';
+import type { ComboboxData, ComboboxItemExt, ComboboxOption } from '../../types.js';
 export declare function getParsedComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext> | undefined): ComboboxOption<Value, Ext>[];

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

@@ -1 +1,7 @@
-export { useComboboxData } from './use-combobox-data.js';
+import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxOption } from '../../types.js';
+export declare function getOptionsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxOption<Value, Ext>[]): Record<string, ComboboxItem<Value, Ext>>;
+export declare function getLabelsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxOption<Value, Ext>[]): Record<string, ComboboxOption<Value, Ext>>;
+export declare function useComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext>): {
+    parsed: import("vue").ComputedRef<ComboboxOption<Value, Ext>[]>;
+    options: import("vue").ComputedRef<Record<string, ComboboxItem<Value, Ext>>>;
+};

package/dist/runtime/components/combobox/lib/use-combobox-data/index.js

@@ -1 +1,24 @@
-export { useComboboxData } from "./use-combobox-data.js";
+import { computed } from "vue";
+import { isOptionsGroup } from "../utils/index.js";
+import { getParsedComboboxData } from "./get-parsed-combobox-data.js";
+export function getOptionsLockup(options) {
+  return options.reduce((acc, item) => {
+    if (isOptionsGroup(item))
+      return { ...acc, ...getOptionsLockup(item.items) };
+    acc[item.value] = item;
+    return acc;
+  }, {});
+}
+export function getLabelsLockup(options) {
+  return options.reduce((acc, item) => {
+    if (isOptionsGroup(item))
+      return { ...acc, ...getLabelsLockup(item.items) };
+    acc[item.label] = item;
+    return acc;
+  }, {});
+}
+export function useComboboxData(data) {
+  const parsed = computed(() => getParsedComboboxData(data));
+  const options = computed(() => getOptionsLockup(parsed.value));
+  return { parsed, options };
+}

package/dist/runtime/components/combobox/lib/utils/default-option-filter.d.ts

@@ -1,4 +1,4 @@
-import type { ComboboxItemExt, ComboboxOption } from '../../types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from '../../types.js';
 export interface FilterOptionsInput<Value extends string = string, Ext extends ComboboxItemExt = object> {
     options: ComboboxOption<Value, Ext>[];
     search: string;

package/dist/runtime/components/combobox/lib/utils/is-empty-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxOption } from '../../types/index.js';
+import type { ComboboxOption } from '../../types.js';
 export declare function isEmptyComboboxData(data: ComboboxOption[]): boolean;

package/dist/runtime/components/combobox/lib/utils/is-guards.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxItemExt, ComboboxItemGroup, ComboboxOption } from '../../types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxOption } from '../../types.js';
 export declare function isOptionsGroup<Value extends string = string, Ext extends ComboboxItemExt = object>(item: ComboboxOption<Value, Ext>): item is ComboboxItemGroup<Value, Ext>;

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

@@ -0,0 +1,45 @@
+interface BaseComboboxFields {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+/** Extra fields allowed on a combobox item beyond the base fields */
+export type ComboboxItemExt = Omit<object, keyof BaseComboboxFields>;
+/** Single selectable option */
+export type ComboboxItem<Value extends string = string, Ext extends ComboboxItemExt = object> = BaseComboboxFields & {
+    value: Value;
+} & Ext;
+/** Grouped set of combobox items */
+export interface ComboboxItemGroup<_Value extends string = string, Ext extends ComboboxItemExt = object> {
+    /** Group label */
+    group: string;
+    /** Group icon */
+    icon?: string;
+    items: ComboboxItem<any, Ext>[];
+}
+/** A flat item or a group of items */
+export type ComboboxOption<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxItem<Value, Ext> | ComboboxItemGroup<Value, Ext>;
+/** Full list of combobox options */
+export type ComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxOption<Value, Ext>[];
+/** Source that triggered a dropdown open/close event */
+export type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';
+export interface ComboboxRootEmits {
+    clear: [];
+    select: [number];
+    /** Called when dropdown opens with event source: keyboard, mouse or unknown */
+    open: [ComboboxDropdownEventSource];
+    /** Called when dropdown closes with event source: keyboard, mouse or unknown */
+    close: [ComboboxDropdownEventSource];
+    /** Called when item is selected with the `Enter` key or by clicking it */
+    submit: [string, ComboboxItem];
+}
+export interface ComboboxItemProps {
+    /** Shows a check icon next to the selected option */
+    withCheckIcon?: boolean;
+    /** Icon name for the check mark */
+    checkIcon?: string;
+    /** Position of the check icon relative to the label */
+    iconPosition?: 'left' | 'right';
+}
+export {};

package/dist/runtime/components/container.d.vue.ts

@@ -1,7 +1,9 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface ContainerProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string | number;
+    /** Removes max-width constraint */
     fluid?: boolean;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/container.vue.d.ts

@@ -1,7 +1,9 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface ContainerProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | string | number;
+    /** Removes max-width constraint */
     fluid?: boolean;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/date-time-picker.d.vue.ts

@@ -10,8 +10,11 @@ import type { TimePickerProps } from './time-picker/time-picker.vue.js';
 export interface DatePickerProps extends ButtonInputProps, Pick<TimePickerProps, 'withSeconds'> {
     /** Tempo format for date value @default `DD.MM.YYYY HH:mm` */
     format?: Format;
+    /** Props forwarded to the inner `Calendar` */
     calendarProps?: Partial<Omit<CalendarProps, 'numberOfMonths' | 'mode'>>;
+    /** Props forwarded to the inner `TimePicker` */
     timePickerProps?: Omit<Partial<TimePickerProps>, 'withSeconds' | 'name'>;
+    /** Shows a button to clear the value @default `false` */
     clearable?: boolean;
 }
 type __VLS_Props = DatePickerProps;

package/dist/runtime/components/date-time-picker.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { format } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composals";
+import { useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Calendar from "./calendar/calendar.vue";