nuance-ui 0.2.8 → 0.2.10

package/dist/runtime/components/paper.vue

@@ -16,40 +16,40 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :is :style :class='$style.root' :mod='[mod, { "with-border": withBorder }]'>
-		<slot />
-	</Box>
+	<Box :is :style :class='$style.root' :mod='[mod, { "with-border": withBorder }]'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--paper-radius: var(--radius-default);
-	--paper-shadow: none;
-
-	touch-action: manipulation;
-
-	display: block;
-
-	border-radius: var(--paper-radius);
-
-	text-decoration: none;
-
-	background-color: var(--color-body);
-
-	outline: 0;
-	box-shadow: var(--paper-shadow);
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-border]) {
-		border: rem(1px) solid var(--paper-border-color);
-	}
-
-	@mixin light {
-		--paper-border-color: var(--color-gray-3);
-	}
-
-	@mixin dark {
-		--paper-border-color: var(--color-slate-7);
-	}
-}
+.root {
+	--paper-radius: var(--radius-default);
+	--paper-shadow: none;
+
+	touch-action: manipulation;
+
+	display: block;
+
+	border-radius: var(--paper-radius);
+
+	text-decoration: none;
+
+	background-color: var(--color-body);
+
+	outline: 0;
+	box-shadow: var(--paper-shadow);
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-with-border]) {
+		border: rem(1px) solid var(--paper-border-color);
+	}
+
+	@mixin light {
+		--paper-border-color: var(--color-gray-3);
+	}
+
+	@mixin dark {
+		--paper-border-color: var(--color-slate-7);
+	}
+}
 </style>

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

@@ -103,73 +103,73 @@ function onSubmit(val) {
 </script>
 
 <template>
-	<ComboboxRoot
-		v-model:open='opened'
-		width='target'
-		:store
+	<ComboboxRoot
+		v-model:open='opened'
+		width='target'
+		:store
 		@submit='(val, option) => {
   $emit("submit", val, option);
   onSubmit(val);
-}'
-	>
-		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
-			<component
-				:is='searchable ? TextInput : ButtonInput'
-				:id='store.listId'
-				v-bind='{ ...rest, ...$attrs }'
-				v-model='inputValue'
-				:disabled
-				:right-section-p-e
-				:readonly='readonly || !searchable'
-				:class='$style.input'
-				@focus='focused = true'
-				@blur='focused = false'
-				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
-			>
-				<slot v-if='display' name='selection' :value='value' :display='display'>
-					{{ display }}
-				</slot>
-
-				<template v-if='$slots?.label' #label>
-					<slot name='label' />
-				</template>
-				<template v-if='$slots?.description' #description>
-					<slot name='description' />
-				</template>
-				<template v-if='$slots?.error' #error>
-					<slot name='error' />
-				</template>
-
-				<template v-if='$slots.leftSection || icon' #leftSection>
-					<slot name='leftSection'>
-						<Icon v-if='icon' :name='icon' />
-					</slot>
-				</template>
-				<template #rightSection>
-					<slot name='rightSection'>
-						<Icon name='gravity-ui:chevrons-expand-vertical' />
-					</slot>
-				</template>
-			</component>
-		</ComboboxTarget>
-		<ComboboxOptionsDropdown
-			v-model='value'
-			v-model:search='search'
-			:data='parsed'
-			:limit
-			:with-check-icon
-			:icon-position
-			:nothing-found-message
-			:aria-label='store.listId'
-			:label-id='store.listId'
-		/>
-	</ComboboxRoot>
+}'
+	>
+		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
+			<component
+				:is='searchable ? TextInput : ButtonInput'
+				:id='store.listId'
+				v-bind='{ ...rest, ...$attrs }'
+				v-model='inputValue'
+				:disabled
+				:right-section-p-e
+				:readonly='readonly || !searchable'
+				:class='$style.input'
+				@focus='focused = true'
+				@blur='focused = false'
+				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
+			>
+				<slot v-if='display' name='selection' :value='value' :display='display'>
+					{{ display }}
+				</slot>
+
+				<template v-if='$slots?.label' #label>
+					<slot name='label' />
+				</template>
+				<template v-if='$slots?.description' #description>
+					<slot name='description' />
+				</template>
+				<template v-if='$slots?.error' #error>
+					<slot name='error' />
+				</template>
+
+				<template v-if='$slots.leftSection || icon' #leftSection>
+					<slot name='leftSection'>
+						<Icon v-if='icon' :name='icon' />
+					</slot>
+				</template>
+				<template #rightSection>
+					<slot name='rightSection'>
+						<Icon name='gravity-ui:chevrons-expand-vertical' />
+					</slot>
+				</template>
+			</component>
+		</ComboboxTarget>
+		<ComboboxOptionsDropdown
+			v-model='value'
+			v-model:search='search'
+			:data='parsed'
+			:limit
+			:with-check-icon
+			:icon-position
+			:nothing-found-message
+			:aria-label='store.listId'
+			:label-id='store.listId'
+		/>
+	</ComboboxRoot>
 </template>
 
 <style module lang="postcss">
-.input {
-	:where([readonly]) {
-		cursor: pointer;
-	}
-}
+.input {
+	:where([readonly]) {
+		cursor: pointer;
+	}
+}
 </style>

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/ui/table-sortable-header.vue

@@ -23,6 +23,7 @@ const {
   icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
+  justify: { type: null, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
   column: { type: Object, required: true },
@@ -31,15 +32,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.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>