nuance-ui 0.2.7 → 0.2.9

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

@@ -17,77 +17,76 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<div
-		:id='id'
-		ref='dropdownRef'
-		popover
-		:style='{ ...floatingStyles, ...style }'
-		:class='$style.dropdown'
-		@toggle='onToggle'
-	>
-		<slot />
-		<span
-			v-if='withArrow'
-			ref='arrowRef'
-			:class='$style.arrow'
-			:style='arrowStyles'
-		/>
-	</div>
+	<div
+		:id='id'
+		ref='dropdownRef'
+		popover
+		:style='{ ...floatingStyles, ...style }'
+		:class='$style.dropdown'
+		@toggle='onToggle'
+	>
+		<slot />
+		<span
+			v-if='withArrow'
+			ref='arrowRef'
+			:class='$style.arrow'
+			:style='arrowStyles'
+		/>
+	</div>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	--popover-radius: var(--radius-default);
-	--popover-shadow: none;
-
-	overflow: visible;
-
-	padding: var(--spacing-xs) var(--spacing-sm);
-	border: 1px solid var(--popover-border-color);
-	border-radius: var(--popover-radius);
-
-	color: var(--color-text);
-
-	opacity: 0;
-	box-shadow: var(--popover-shadow);
-
-	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
-
-
-	&:popover-open {
-		opacity: 1;
-
-		@starting-style {
-			opacity: 0;
-		}
-	}
-
-	@mixin where-light {
-		--popover-border-color: var(--color-gray-2);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		--popover-border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.arrow {
-	--arrow-size: 7px;
-	--arrow-radius: 0px;
-	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
-
-	position: absolute;
-	transform: rotate(45deg);
-
-	width: var(--arrow-size);
-	height: var(--arrow-size);
-
-	border: 1px solid var(--popover-border-color);
-
-	background-color: inherit;
-}
+.dropdown {
+	--popover-radius: var(--radius-default);
+	--popover-shadow: none;
+
+	overflow: visible;
+
+	padding: var(--spacing-xs) var(--spacing-sm);
+	border: 1px solid var(--popover-border-color);
+	border-radius: var(--popover-radius);
+
+	color: var(--color-text);
+
+	opacity: 0;
+	box-shadow: var(--popover-shadow);
+
+	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+
+	&:popover-open {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@mixin where-light {
+		--popover-border-color: var(--color-gray-2);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		--popover-border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.arrow {
+	--arrow-size: 7px;
+	--arrow-radius: 0px;
+	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
+
+	position: absolute;
+	transform: rotate(45deg);
+
+	width: var(--arrow-size);
+	height: var(--arrow-size);
+
+	border: 1px solid var(--popover-border-color);
+
+	background-color: inherit;
+}
 </style>

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

@@ -8,12 +8,12 @@ const { id, store: { targetRef, opened }, disabled } = usePopoverState();
 </script>
 
 <template>
-	<Renderless
-		ref='targetRef'
-		:disabled
-		:popovertarget='id'
-		@click.stop.prevent='!disable && !disabled && (opened = !opened)'
-	>
-		<slot />
-	</Renderless>
+	<Renderless
+		ref='targetRef'
+		:disabled
+		:popovertarget='id'
+		@click.stop.prevent='!disable && !disabled && (opened = !opened)'
+	>
+		<slot />
+	</Renderless>
 </template>

package/dist/runtime/components/popover/popover.vue

@@ -75,5 +75,5 @@ useProvidePopoverState({
 </script>
 
 <template>
-	<slot />
+	<slot />
 </template>

package/dist/runtime/components/progress/progress-label.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<Box v-bind='props' :class='css.label'>
-		<slot />
-	</Box>
+	<Box v-bind='props' :class='css.label'>
+		<slot />
+	</Box>
 </template>

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

@@ -25,7 +25,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
-		<slot />
-	</Box>
+	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/progress/progress-section.d.vue.ts

@@ -3,7 +3,7 @@ import type { NuanceColor } from '@nui/types';
 export interface ProgressSectionProps extends BoxProps {
     /** Determines whether `aria-*` props should be added to the root element @default `true` */
     withAria?: boolean;
-    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
     /** If set, the section has stripes @default `false` */
     striped?: boolean;

package/dist/runtime/components/progress/progress-section.vue

@@ -33,12 +33,12 @@ const style = computed(() => useStyleResolver((theme) => ({
 </script>
 
 <template>
-	<Box
-		:style
-		v-bind='ariaAttributes'
-		:class='css.section'
-		:mod='[{ striped: striped || animated, animated }, mod]'
-	>
-		<slot />
-	</Box>
+	<Box
+		:style
+		v-bind='ariaAttributes'
+		:class='css.section'
+		:mod='[{ striped: striped || animated, animated }, mod]'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/progress/progress-section.vue.d.ts

@@ -3,7 +3,7 @@ import type { NuanceColor } from '@nui/types';
 export interface ProgressSectionProps extends BoxProps {
     /** Determines whether `aria-*` props should be added to the root element @default `true` */
     withAria?: boolean;
-    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
     /** If set, the section has stripes @default `false` */
     striped?: boolean;

package/dist/runtime/components/progress/progress.vue

@@ -27,13 +27,13 @@ const value = defineModel({ type: Number, ...{ required: true } });
 </script>
 
 <template>
-	<ProgressRoot :size :radius :orientation :transition-duration :mod>
-		<ProgressSection
-			v-model='value'
-			:striped
-			:animated
-			:color
-			:with-aria
-		/>
-	</ProgressRoot>
+	<ProgressRoot :size :radius :orientation :transition-duration :mod>
+		<ProgressSection
+			v-model='value'
+			:striped
+			:animated
+			:color
+			:with-aria
+		/>
+	</ProgressRoot>
 </template>

package/dist/runtime/components/renderless/renderless.vue

@@ -6,7 +6,7 @@ defineOptions({
 </script>
 
 <template>
-	<Slot v-bind='$attrs'>
-		<slot />
-	</Slot>
+	<Slot v-bind='$attrs'>
+		<slot />
+	</Slot>
 </template>

package/dist/runtime/components/roving-focus/roving-focus-item.vue

@@ -15,18 +15,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<Renderless
-		v-bind='attrs'
-		ref='item'
-		:tabindex='-1'
-		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
-		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
-		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
-		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
-		@keydown.home.prevent='focus?.("first")'
-		@keydown.end.prevent='focus?.("last")'
-		@click.prevent='focusElement?.($event.currentTarget)'
-	>
-		<slot />
-	</Renderless>
+	<Renderless
+		v-bind='attrs'
+		ref='item'
+		:tabindex='-1'
+		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
+		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
+		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
+		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
+		@keydown.home.prevent='focus?.("first")'
+		@keydown.end.prevent='focus?.("last")'
+		@click.prevent='focusElement?.($event.currentTarget)'
+	>
+		<slot />
+	</Renderless>
 </template>

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

@@ -1,6 +1,7 @@
 import type { ComboboxData, ComboboxItemExt } from './combobox/index.js';
 import type { TextInputProps } from './input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
+    /** List of options */
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
@@ -19,6 +20,7 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
     /** Icon displayed in the left section by default */
     icon?: string;
+    /** Maximum number of options rendered at a time */
     limit?: number;
     /** Input autocomplete attribute */
     autoComplete?: string;

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

@@ -1,6 +1,7 @@
 import type { ComboboxData, ComboboxItemExt } from './combobox/index.js';
 import type { TextInputProps } from './input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
+    /** List of options */
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
@@ -19,6 +20,7 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
     /** Icon displayed in the left section by default */
     icon?: string;
+    /** Maximum number of options rendered at a time */
     limit?: number;
     /** Input autocomplete attribute */
     autoComplete?: string;

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

@@ -31,20 +31,20 @@ useProvideSwitchGroup({ value, size, disabled, readOnly, maxSelectedValues });
 </script>
 
 <template>
-	<InputWrapper :id v-bind='rest'>
-		<template v-if='!!$slots.label' #label>
-			<slot name='label' />
-		</template>
-
-		<slot />
-
-		<template v-if='!!$slots.description' #description>
-			<slot name='description' />
-		</template>
-		<template v-if='!!$slots.error' #error>
-			<slot name='error' />
-		</template>
-
-		<VisuallyHiddenInput :id v-model='value' :name />
-	</InputWrapper>
+	<InputWrapper :id v-bind='rest'>
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<slot />
+
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+
+		<VisuallyHiddenInput :id v-model='value' :name />
+	</InputWrapper>
 </template>

package/dist/runtime/components/table/table.d.ts

@@ -1,30 +1,30 @@
-import type { Cell, Header, RowData } from '@tanstack/vue-table'
-
-
-declare module '@tanstack/table-core' {
-	interface ColumnMeta<TData extends RowData, TValue> {
-		class?: {
-			th?: string | ((cell: Header<TData, TValue>) => string)
-			td?: string | ((cell: Cell<TData, TValue>) => string)
-		}
-		style?: {
-			th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
-			td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
-		}
-		colspan?: {
-			td?: string | ((cell: Cell<TData, TValue>) => string)
-		}
-		rowspan?: {
-			td?: string | ((cell: Cell<TData, TValue>) => string)
-		}
-	}
-
-	interface TableMeta<TData> {
-		class?: {
-			tr?: string | ((row: Row<TData>) => string)
-		}
-		style?: {
-			tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
-		}
-	}
-}
+import type { Cell, Header, RowData } from '@tanstack/vue-table'
+
+
+declare module '@tanstack/table-core' {
+	interface ColumnMeta<TData extends RowData, TValue> {
+		class?: {
+			th?: string | ((cell: Header<TData, TValue>) => string)
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+		style?: {
+			th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
+			td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
+		}
+		colspan?: {
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+		rowspan?: {
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+	}
+
+	interface TableMeta<TData> {
+		class?: {
+			tr?: string | ((row: Row<TData>) => string)
+		}
+		style?: {
+			tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
+		}
+	}
+}

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

@@ -25,9 +25,13 @@ export type TableSlots<T extends TableData = TableData> = {
     'body-bottom': (props?: object) => any;
 } & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
 export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ Omit<TableHTMLAttributes, 'columns' | 'onSelect' | 'onContextmenu'> {
+    /** Row data */
     data?: T[];
+    /** Column definitions */
     columns?: TableColumn<T>[];
+    /** Table caption text */
     caption?: string;
+    /** Table metadata passed to column defs and cell renderers */
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
@@ -57,15 +61,20 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';
-    /** Whether the table should be in loading state. */
+    /** Loading state */
     loading?: boolean;
     /**
+     * Color of the loading overlay
      * @defaultValue 'primary'
      */
     loadingColor?: NuanceColor | string;
+    /** Vertical alignment of cell content */
     verticalAlign?: CSSProperties['verticalAlign'];
+    /** Called when a row is clicked */
     onSelect?: (e: Event, row: TableRow<T>) => void;
+    /** Called when a row is hovered or hover ends */
     onHover?: (e: Event, row: TableRow<T> | null) => void;
+    /** Called on right-click on a row */
     onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
     /** Styles API */
     classes?: Classes<'root' | 'table' | 'thead' | 'th' | 'td' | 'tr' | 'tbody' | 'tfoot' | 'caption' | 'loading' | 'empty' | 'separator'>;

package/dist/runtime/components/table/ui/table-sortable-header.vue

@@ -20,6 +20,7 @@ const {
   classes: { type: Object, required: false },
   leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
+  icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
   is: { type: null, required: false },
@@ -30,15 +31,15 @@ const {
 </script>
 
 <template>
-	<Button :size :variant :color v-bind='rest'>
-		<template #leftSection>
-			<TableSortIcon :column :icons />
-		</template>
-		<slot>
-			<FlexRender :render='column.columnDef.header' />
-		</slot>
-		<template v-if='!!$slots.rightSection' #rightSection>
-			<slot name='rightSection' />
-		</template>
-	</Button>
+	<Button :size :variant :color v-bind='rest'>
+		<template #leftSection>
+			<TableSortIcon :column :icons />
+		</template>
+		<slot>
+			<FlexRender :render='column.columnDef.header' />
+		</slot>
+		<template v-if='!!$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+	</Button>
 </template>

package/dist/runtime/components/tabs/tabs-list.d.vue.ts

@@ -1,7 +1,9 @@
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface TabsListProps extends BoxProps {
+    /** If set, tabs take all available width */
     grow?: boolean;
+    /** CSS `justify-content` value for the tab list */
     justify?: CSSProperties['justify-content'];
 }
 declare var __VLS_8: {};

package/dist/runtime/components/tabs/tabs-list.vue

@@ -14,20 +14,20 @@ const style = computed(() => ({ "--tabs-justify": justify }));
 </script>
 
 <template>
-	<Box
-		:is
-		:style
-		:class='css.list'
-		role='tablist'
+	<Box
+		:is
+		:style
+		:class='css.list'
+		role='tablist'
 		:mod='[mod, {
   variant: ctx?.variant,
   grow,
   orientation: ctx?.orientation,
   placement: ctx?.orientation === "vertical" && ctx.placement,
   inverted: ctx?.inverted
-}]'
-		:aria-orientation='ctx?.orientation'
-	>
-		<slot />
-	</Box>
+}]'
+		:aria-orientation='ctx?.orientation'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/tabs/tabs-list.vue.d.ts

@@ -1,7 +1,9 @@
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface TabsListProps extends BoxProps {
+    /** If set, tabs take all available width */
     grow?: boolean;
+    /** CSS `justify-content` value for the tab list */
     justify?: CSSProperties['justify-content'];
 }
 declare var __VLS_8: {};

package/dist/runtime/components/tabs/tabs-panel.d.vue.ts

@@ -1,5 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 export interface TabsPanelProps extends BoxProps {
+    /** Panel value, must match the corresponding `TabsTab` value */
     value: string;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/tabs/tabs-panel.vue

@@ -11,15 +11,15 @@ const ctx = useTabsState();
 </script>
 
 <template>
-	<Box
-		:is
-		:id='ctx?.getPanelId(value)'
-		:mod='[mod, { orientation: ctx?.orientation }]'
-		:data-active='ctx?.active.value === value'
-		:class='css.panel'
-		role='tabpanel'
-		:aria-labelledby='ctx?.getTabId(value)'
-	>
-		<slot />
-	</Box>
+	<Box
+		:is
+		:id='ctx?.getPanelId(value)'
+		:mod='[mod, { orientation: ctx?.orientation }]'
+		:data-active='ctx?.active.value === value'
+		:class='css.panel'
+		role='tabpanel'
+		:aria-labelledby='ctx?.getTabId(value)'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/tabs/tabs-panel.vue.d.ts

@@ -1,5 +1,6 @@
 import type { BoxProps } from '../box.vue.js';
 export interface TabsPanelProps extends BoxProps {
+    /** Panel value, must match the corresponding `TabsTab` value */
     value: string;
 }
 declare var __VLS_8: {};