nuance-ui 0.2.7 → 0.2.8

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

@@ -56,8 +56,8 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='[$style.root, $attrs?.style]'>
-		<input
+	<Box :style :class='[$style.root, $attrs?.style]'>
+		<input
 			v-bind='{
   ...$attrs,
   class: $style.input,
@@ -66,205 +66,205 @@ const style = computed(() => useStyleResolver((theme) => {
   type,
   disabled,
   id
-}'
-			@click='onUpdate()'
-		>
-		<Box is='label' :for='id' :class='$style.label' :mod='{ variant }'>
-			<span v-if='hideIcon && checked' :class='$style.iconWrapper'>
-				<Icon :name='icon' :class='$style.icon' />
-			</span>
-
-			<span><slot /></span>
-		</Box>
-	</Box>
+}'
+			@click='onUpdate()'
+		>
+		<Box is='label' :for='id' :class='$style.label' :mod='{ variant }'>
+			<span v-if='hideIcon && checked' :class='$style.iconWrapper'>
+				<Icon :name='icon' :class='$style.icon' />
+			</span>
+
+			<span><slot /></span>
+		</Box>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--chip-size-xs: rem(23px);
-	--chip-size-sm: rem(28px);
-	--chip-size-md: rem(32px);
-	--chip-size-lg: rem(36px);
-	--chip-size-xl: rem(40px);
-
-	--chip-icon-size-xs: rem(12px);
-	--chip-icon-size-sm: rem(14px);
-	--chip-icon-size-md: rem(16px);
-	--chip-icon-size-lg: rem(18px);
-	--chip-icon-size-xl: rem(20px);
-
-	--chip-padding-xs: rem(16px);
-	--chip-padding-sm: rem(20px);
-	--chip-padding-md: rem(24px);
-	--chip-padding-lg: rem(28px);
-	--chip-padding-xl: rem(32px);
-
-	--chip-checked-padding-xs: rem(7.5px);
-	--chip-checked-padding-sm: rem(10px);
-	--chip-checked-padding-md: rem(11.7px);
-	--chip-checked-padding-lg: rem(13.5px);
-	--chip-checked-padding-xl: rem(15.7px);
-
-	--chip-spacing-xs: rem(10px);
-	--chip-spacing-sm: rem(12px);
-	--chip-spacing-md: rem(16px);
-	--chip-spacing-lg: rem(20px);
-	--chip-spacing-xl: rem(22px);
-
-	--chip-size: var(--chip-size-sm);
-	--chip-icon-size: var(--chip-icon-size-sm);
-	--chip-padding: var(--chip-padding-sm);
-	--chip-spacing: var(--chip-spacing-sm);
-	--chip-checked-padding: var(--chip-checked-padding-sm);
-	--chip-bg: var(--color-primary-filled);
-	--chip-hover: var(--color-primary-filled-hover);
-	--chip-color: var(--color-white);
-	--chip-bd: 1px solid transparent;
-
-	--chip-fz: var(--font-size-sm);
-	--chip-radius: var(--radius-xl);
-}
-
-.label {
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-
-	height: var(--chip-size);
-	padding-inline: var(--chip-padding);
-
-	border: 1px solid transparent;
-	border-radius: var(--chip-radius);
-
-	font-size: var(--chip-fz);
-	line-height: calc(var(--chip-size) - rem(2px));
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-}
-
-.iconWrapper {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-
-	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	height: var(--chip-icon-size);
-}
-
-.icon {
-	display: block;
-
-	width: var(--chip-icon-size);
-	height: var(--chip-icon-size);
-
-	color: var(--chip-icon-color, inherit);
-}
-
-.input {
-	width: 0;
-	height: 0;
-	margin: 0;
-	padding: 0;
-
-	opacity: 0;
-
-	&:focus-visible+.label {
-		outline: 2px solid var(--color-primary-filled);
-		outline-offset: 2px;
-	}
-}
-
-.input:disabled {
-	&+.label {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		background-color: var(--color-disabled);
-	}
-}
-
-.input:not(:disabled) {
-	&+.label[data-variant='outline'] {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-3);
-
-			background-color: var(--color-white);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-
-			background-color: var(--color-dark-6);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&+.label[data-variant='filled'],
-	&+.label[data-variant='light'] {
-		border: 1px solid transparent;
-
-		color: var(--color-text);
-
-		@mixin where-light {
-			background-color: var(--color-gray-1);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-5);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-2);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-4);
-			}
-		}
-	}
-}
-
-.input:not(:disabled):checked {
-	&+.label {
-		padding: var(--chip-checked-padding);
-	}
-
-	&+.label[data-variant='outline'] {
-		--chip-icon-color: var(--chip-color);
-
-		border: var(--chip-bd);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-
-	&+.label[data-variant='filled'],
-	&+.label[data-variant='light'] {
-		--chip-icon-color: var(--chip-color);
-
-		color: var(--chip-color);
-
-		background-color: var(--chip-bg);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-}
+.root {
+	--chip-size-xs: rem(23px);
+	--chip-size-sm: rem(28px);
+	--chip-size-md: rem(32px);
+	--chip-size-lg: rem(36px);
+	--chip-size-xl: rem(40px);
+
+	--chip-icon-size-xs: rem(12px);
+	--chip-icon-size-sm: rem(14px);
+	--chip-icon-size-md: rem(16px);
+	--chip-icon-size-lg: rem(18px);
+	--chip-icon-size-xl: rem(20px);
+
+	--chip-padding-xs: rem(16px);
+	--chip-padding-sm: rem(20px);
+	--chip-padding-md: rem(24px);
+	--chip-padding-lg: rem(28px);
+	--chip-padding-xl: rem(32px);
+
+	--chip-checked-padding-xs: rem(7.5px);
+	--chip-checked-padding-sm: rem(10px);
+	--chip-checked-padding-md: rem(11.7px);
+	--chip-checked-padding-lg: rem(13.5px);
+	--chip-checked-padding-xl: rem(15.7px);
+
+	--chip-spacing-xs: rem(10px);
+	--chip-spacing-sm: rem(12px);
+	--chip-spacing-md: rem(16px);
+	--chip-spacing-lg: rem(20px);
+	--chip-spacing-xl: rem(22px);
+
+	--chip-size: var(--chip-size-sm);
+	--chip-icon-size: var(--chip-icon-size-sm);
+	--chip-padding: var(--chip-padding-sm);
+	--chip-spacing: var(--chip-spacing-sm);
+	--chip-checked-padding: var(--chip-checked-padding-sm);
+	--chip-bg: var(--color-primary-filled);
+	--chip-hover: var(--color-primary-filled-hover);
+	--chip-color: var(--color-white);
+	--chip-bd: 1px solid transparent;
+
+	--chip-fz: var(--font-size-sm);
+	--chip-radius: var(--radius-xl);
+}
+
+.label {
+	cursor: pointer;
+	user-select: none;
+
+	display: inline-flex;
+	align-items: center;
+
+	height: var(--chip-size);
+	padding-inline: var(--chip-padding);
+
+	border: 1px solid transparent;
+	border-radius: var(--chip-radius);
+
+	font-size: var(--chip-fz);
+	line-height: calc(var(--chip-size) - rem(2px));
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.iconWrapper {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+
+	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+	height: var(--chip-icon-size);
+}
+
+.icon {
+	display: block;
+
+	width: var(--chip-icon-size);
+	height: var(--chip-icon-size);
+
+	color: var(--chip-icon-color, inherit);
+}
+
+.input {
+	width: 0;
+	height: 0;
+	margin: 0;
+	padding: 0;
+
+	opacity: 0;
+
+	&:focus-visible+.label {
+		outline: 2px solid var(--color-primary-filled);
+		outline-offset: 2px;
+	}
+}
+
+.input:disabled {
+	&+.label {
+		cursor: not-allowed;
+
+		color: var(--color-disabled-text);
+
+		background-color: var(--color-disabled);
+	}
+}
+
+.input:not(:disabled) {
+	&+.label[data-variant='outline'] {
+		@mixin where-light {
+			border: 1px solid var(--color-gray-3);
+
+			background-color: var(--color-white);
+		}
+
+		@mixin where-dark {
+			border: 1px solid var(--color-dark-4);
+
+			background-color: var(--color-dark-6);
+		}
+
+		@mixin hover {
+			@mixin where-light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin where-dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
+		border: 1px solid transparent;
+
+		color: var(--color-text);
+
+		@mixin where-light {
+			background-color: var(--color-gray-1);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-5);
+		}
+
+		@mixin hover {
+			@mixin where-light {
+				background-color: var(--color-gray-2);
+			}
+
+			@mixin where-dark {
+				background-color: var(--color-dark-4);
+			}
+		}
+	}
+}
+
+.input:not(:disabled):checked {
+	&+.label {
+		padding: var(--chip-checked-padding);
+	}
+
+	&+.label[data-variant='outline'] {
+		--chip-icon-color: var(--chip-color);
+
+		border: var(--chip-bd);
+
+		@mixin hover {
+			background-color: var(--chip-hover);
+		}
+	}
+
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
+		--chip-icon-color: var(--chip-color);
+
+		color: var(--chip-color);
+
+		background-color: var(--chip-bg);
+
+		@mixin hover {
+			background-color: var(--chip-hover);
+		}
+	}
+}
 </style>

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-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.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.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.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

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