nuance-ui 0.2.7 → 0.2.9

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

@@ -3,13 +3,23 @@ import type { InlineInputProps } from '../input/index.js';
 export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
-    /** Visual variant @default 'filled' */
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
-    /** Component size @default 'sm' */
+    /**
+     * Component size
+     * @default `'sm'`
+     */
     size?: NuanceSize;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxProps;

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

@@ -1,7 +1,10 @@
 import type { ChipGroupValue } from './lib.js';
 export interface ChipGroupProps<T extends boolean = false> {
+    /** Form input name */
     name: string;
+    /** Allows selecting multiple chips at once */
     multiple?: T;
+    /** Disables all chips in the group */
     disabled?: boolean;
 }
 declare const __VLS_export: <T extends boolean = false>(__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/chip/chip-group.vue

@@ -15,6 +15,6 @@ useProvideChipGroupState({ multiple, value, disabled });
 </script>
 
 <template>
-	<slot />
-	<VisuallyHiddenInput v-model='value' :name />
+	<slot />
+	<VisuallyHiddenInput v-model='value' :name />
 </template>

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

@@ -1,7 +1,10 @@
 import type { ChipGroupValue } from './lib.js';
 export interface ChipGroupProps<T extends boolean = false> {
+    /** Form input name */
     name: string;
+    /** Allows selecting multiple chips at once */
     multiple?: T;
+    /** Disables all chips in the group */
     disabled?: boolean;
 }
 declare const __VLS_export: <T extends boolean = false>(__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/chip/chip.d.vue.ts

@@ -1,15 +1,24 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 export interface ChipProps {
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Component size */
     size?: NuanceSize;
+    /** Input type used when rendered without a group */
     type?: 'radio' | 'checkbox';
+    /** Color from theme */
     color?: NuanceColor;
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
+    /** Visual variant */
     variant?: 'filled' | 'outline' | 'light';
+    /** Value used in chip group context */
     value?: string;
+    /** Check icon name */
     icon?: string;
+    /** Shows the check icon when the chip is checked */
     hideIcon?: boolean;
+    /** Disables the component */
     disabled?: boolean;
 }
 type __VLS_Props = ChipProps;

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

@@ -1,15 +1,24 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 export interface ChipProps {
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Component size */
     size?: NuanceSize;
+    /** Input type used when rendered without a group */
     type?: 'radio' | 'checkbox';
+    /** Color from theme */
     color?: NuanceColor;
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
+    /** Visual variant */
     variant?: 'filled' | 'outline' | 'light';
+    /** Value used in chip group context */
     value?: string;
+    /** Check icon name */
     icon?: string;
+    /** Shows the check icon when the chip is checked */
     hideIcon?: boolean;
+    /** Disables the component */
     disabled?: boolean;
 }
 type __VLS_Props = ChipProps;

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

@@ -13,21 +13,21 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<PopoverDropdown :class='$style.dropdown'>
-		<Box
-			:id='store.listId'
-			role='presentation'
-			:class='css.dropdown'
-			:style
-			v-bind='$attrs'
-		>
-			<slot />
-		</Box>
-	</PopoverDropdown>
+	<PopoverDropdown :class='$style.dropdown'>
+		<Box
+			:id='store.listId'
+			role='presentation'
+			:class='css.dropdown'
+			:style
+			v-bind='$attrs'
+		>
+			<slot />
+		</Box>
+	</PopoverDropdown>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	padding: 0;
-}
+.dropdown {
+	padding: 0;
+}
 </style>

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

@@ -8,7 +8,7 @@ const { is, mod } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod :class='css.empty'>
-		<slot />
-	</Box>
+	<Box :is :mod :class='css.empty'>
+		<slot />
+	</Box>
 </template>

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

@@ -3,6 +3,7 @@ import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './ty
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
+    /** Group data including items */
     data: ComboboxItemGroup<Value, 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<{

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

@@ -25,25 +25,25 @@ 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.value)'
-		>
-			<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

@@ -3,6 +3,7 @@ import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './ty
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
+    /** Group data including items */
     data: ComboboxItemGroup<Value, 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<{

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,8 +1,11 @@
 import type { BoxProps } from '../box.vue.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.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.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.d.ts

@@ -1,15 +1,25 @@
 import type { FilterOptionsInput } from './lib/utils/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;

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

@@ -51,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

@@ -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;

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

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

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

@@ -4,17 +4,25 @@ interface BaseComboboxFields {
     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: [];
@@ -27,8 +35,11 @@ export interface ComboboxRootEmits {
     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

@@ -20,14 +20,14 @@ const _mod = computed(() => [{ fluid }, mod]);
 </script>
 
 <template>
-	<Box
-		:is
-		:style
-		:mod='_mod'
-		:class='$style.root'
-	>
-		<slot />
-	</Box>
+	<Box
+		:is
+		:style
+		:mod='_mod'
+		:class='$style.root'
+	>
+		<slot />
+	</Box>
 </template>
 
 <style module>

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

@@ -20,7 +20,7 @@ export interface DatePickerProps extends ButtonInputProps, Pick<TimePickerProps,
 type __VLS_Props = DatePickerProps;
 type __VLS_ModelProps = {
     /** ISO string */
-    modelValue?: string | Date;
+    modelValue?: string | Date | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_24: {}, __VLS_32: {}, __VLS_43: {}, __VLS_46: {}, __VLS_49: {};
@@ -39,7 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     select: (date: import("./calendar/index.js").Selection) => any;
     close: () => any;
     next: () => any;
-    "update:modelValue": (value: string | Date | undefined) => any;
+    "update:modelValue": (value: string | Date | null | undefined) => any;
     prev: () => any;
     level: () => any;
     open: () => any;
@@ -47,7 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
     onClose?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | Date | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | Date | null | undefined) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onLevel?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;