nuance-ui 0.2.8 → 0.2.9

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

@@ -58,17 +58,17 @@ useProvideTabsContext({
 </script>
 
 <template>
-	<Box
-		:is
-		:style
+	<Box
+		:is
+		:style
 		:mod='[mod, {
   orientation,
   inverted: orientation === "horizontal" && inverted,
   placement: orientation === "vertical" && placement,
   variant
-}]'
-		:class='css.root'
-	>
-		<slot />
-	</Box>
+}]'
+		:class='css.root'
+	>
+		<slot />
+	</Box>
 </template>

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

@@ -13,32 +13,32 @@ const active = computed(() => value === ctx?.active.value);
 </script>
 
 <template>
-	<UnstyledButton
-		:id='ctx?.getTabId(value)'
+	<UnstyledButton
+		:id='ctx?.getTabId(value)'
 		:mod='[mod, {
   variant: ctx?.variant,
   active,
   orientation: ctx?.orientation,
   inverted: ctx?.inverted,
   placement: ctx?.orientation === "vertical" && ctx.placement
-}]'
-		:class='css.tab'
-		role='tab'
-		:aria-selected='active'
-		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
-		:aria-controls='ctx?.getPanelId(value)'
-		@click='ctx?.onUpdate(value)'
-	>
-		<span v-if='$slots.leftSection || icon' :class='css.tabSection' data-position='left'>
-			<slot name='leftSection'>
-				<Icon v-if='icon' :name='icon' />
-			</slot>
-		</span>
-		<span v-if='$slots.default' :class='css.tabLabel'>
-			<slot />
-		</span>
-		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
-			<slot name='rightSection' />
-		</span>
-	</UnstyledButton>
+}]'
+		:class='css.tab'
+		role='tab'
+		:aria-selected='active'
+		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
+		:aria-controls='ctx?.getPanelId(value)'
+		@click='ctx?.onUpdate(value)'
+	>
+		<span v-if='$slots.leftSection || icon' :class='css.tabSection' data-position='left'>
+			<slot name='leftSection'>
+				<Icon v-if='icon' :name='icon' />
+			</slot>
+		</span>
+		<span v-if='$slots.default' :class='css.tabLabel'>
+			<slot />
+		</span>
+		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</UnstyledButton>
 </template>

package/dist/runtime/components/text.vue

@@ -51,74 +51,74 @@ const style = computed(() => useStyleResolver((theme) => ({
 </script>
 
 <template>
-	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
-		<slot />
-	</Box>
+	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--text-fz: var(--font-size-sm);
-	--text-lh: var(--line-height-sm);
-	--text-color: inherit;
-	--text-fw: normal;
-	--text-gradient: none;
-	--text-line-clamp: none;
-
-	margin: 0;
-	padding: 0;
-
-	font-size: var(--text-fz);
-	font-weight: var(--text-fw);
-	line-height: var(--text-lh);
-	color: var(--text-color);
-	text-decoration: none;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-truncate]) {
-		overflow: hidden;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&:where([data-truncate='start']) {
-		direction: rtl;
-
-		text-align: right;
-
-		@mixin where-rtl {
-			direction: ltr;
-
-			text-align: left;
-		}
-	}
-
-	&:where([data-variant='gradient']) {
-		background-image: var(--text-gradient);
-		-webkit-background-clip: text;
-		background-clip: text;
-		-webkit-text-fill-color: transparent;
-	}
-
-	&:where([data-line-clamp]) {
-		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: var(--text-line-clamp);
-
-		text-overflow: ellipsis;
-	}
-
-	&:where([data-inherit]) {
-		font-size: inherit;
-		font-weight: inherit;
-		line-height: inherit;
-		color: inherit;
-	}
-
-	&:where([data-inline]) {
-		line-height: 1;
-	}
-}
+.root {
+	--text-fz: var(--font-size-sm);
+	--text-lh: var(--line-height-sm);
+	--text-color: inherit;
+	--text-fw: normal;
+	--text-gradient: none;
+	--text-line-clamp: none;
+
+	margin: 0;
+	padding: 0;
+
+	font-size: var(--text-fz);
+	font-weight: var(--text-fw);
+	line-height: var(--text-lh);
+	color: var(--text-color);
+	text-decoration: none;
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-truncate]) {
+		overflow: hidden;
+
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:where([data-truncate='start']) {
+		direction: rtl;
+
+		text-align: right;
+
+		@mixin where-rtl {
+			direction: ltr;
+
+			text-align: left;
+		}
+	}
+
+	&:where([data-variant='gradient']) {
+		background-image: var(--text-gradient);
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
+
+	&:where([data-line-clamp]) {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: var(--text-line-clamp);
+
+		text-overflow: ellipsis;
+	}
+
+	&:where([data-inherit]) {
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+	}
+
+	&:where([data-inline]) {
+		line-height: 1;
+	}
+}
 </style>

package/dist/runtime/components/textarea.vue

@@ -33,42 +33,42 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
-		<InputBase>
-			<template v-if='!!$slots.leftSection || icon' #leftSection>
-				<slot name='leftSection'>
-					<Icon v-if='icon' :name='icon' />
-				</slot>
-			</template>
-
-			<template #default='{ id, css }'>
-				<textarea
-					v-bind='{ ...$attrs, class: void 0 }'
-					:id
-					ref='input'
-					v-model='model'
-					:class='[css, $style.textarea]'
-					:required='props.required'
-					:disabled='props.required'
-					:readonly='props.readonly'
-				/>
-			</template>
-
-			<template v-if='!!$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</InputBase>
-
-		<template v-if='!!$slots.label' #label>
-			<slot name='label' />
-		</template>
-		<template v-if='!!$slots.error' #error>
-			<slot name='error' />
-		</template>
-		<template v-if='!!$slots.description' #description>
-			<slot name='description' />
-		</template>
-	</InputWrapper>
+	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
+		<InputBase>
+			<template v-if='!!$slots.leftSection || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</template>
+
+			<template #default='{ id, css }'>
+				<textarea
+					v-bind='{ ...$attrs, class: void 0 }'
+					:id
+					ref='input'
+					v-model='model'
+					:class='[css, $style.textarea]'
+					:required='props.required'
+					:disabled='props.required'
+					:readonly='props.readonly'
+				/>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</InputBase>
+
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</InputWrapper>
 </template>
 
 <style module>

package/dist/runtime/components/title.vue

@@ -26,21 +26,21 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
 </script>
 
 <template>
-	<Text
-		:is='`h${order}`'
-		v-bind='rest'
-		:size='size || `h${order}`'
-		:class='$style.root'
-		:style
-	>
-		<slot />
-	</Text>
+	<Text
+		:is='`h${order}`'
+		v-bind='rest'
+		:size='size || `h${order}`'
+		:class='$style.root'
+		:style
+	>
+		<slot />
+	</Text>
 </template>
 
 <style module lang="postcss">
-.root {
-	--title-text-wrap: pretty;
-
-	text-wrap: var(--title-text-wrap);
-}
+.root {
+	--title-text-wrap: pretty;
+
+	text-wrap: var(--title-text-wrap);
+}
 </style>

package/dist/runtime/components/transition.vue

@@ -17,9 +17,9 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
-		<slot />
-	</Transition>
+	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
+		<slot />
+	</Transition>
 </template>
 
 <style module>

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -51,136 +51,135 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 </script>
 
 <template>
-	<li :class='$style.item' role='presentation'>
-		<RovingFocusItem>
-			<Button
-				:size='ctx.size'
-				:color='ctx.color'
-				:variant='ctx.variant'
-				:disabled
-				role='treeitem'
-				:classes='$style'
-				:aria-level='level'
-				:aria-selected='selected'
-				:mod='{ active, selected, "tree-item": path }'
-				right-section-p-e='all'
-				@click.prevent='handleClick'
-				@keydown.prevent='handleKeyDown'
-			>
-				<template #leftSection>
-					<template v-if='pending'>
-						<Loader :class='$style.icon' />
-					</template>
-
-					<template v-else-if='isFolder'>
-						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
-						<Icon v-else :class='$style.icon' :name='icon' />
-					</template>
-
-					<template v-else>
-						<Icon
-							:class='$style.icon'
-							:name='fileIcon'
-							:style='{ color: color && getThemeColor(color, theme) }'
-						/>
-					</template>
-				</template>
-
-				{{ name ?? path }}
-
-				<template v-if='isFolder' #rightSection>
-					<ActionIcon
-						icon='gravity-ui:chevron-down'
-						size='sm'
-						:color='ctx.color'
-						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
-						:mod='{ expanded }'
-						variant='subtle'
-						@click.stop='ctx.toggle("expand", path)'
-					/>
-				</template>
-			</Button>
-		</RovingFocusItem>
-
-		<UTransition name='scale-y'>
-			<ul
-				v-if='expanded && data && data.length > 0'
-				:class='$style.list'
-				role='group'
-			>
-				<TreeItem
-					v-for='child in data'
-					:key='child.path'
-					v-bind='child'
-					:path='child.path'
-					:level='level + 1'
-				/>
-			</ul>
-		</UTransition>
-	</li>
+	<li :class='$style.item' role='presentation'>
+		<RovingFocusItem>
+			<Button
+				:size='ctx.size'
+				:color='ctx.color'
+				:variant='ctx.variant'
+				:disabled
+				role='treeitem'
+				:classes='$style'
+				:aria-level='level'
+				:aria-selected='selected'
+				:mod='{ active, selected, "tree-item": path }'
+				right-section-p-e='all'
+				@click.prevent='handleClick'
+				@keydown.prevent='handleKeyDown'
+			>
+				<template #leftSection>
+					<template v-if='pending'>
+						<Loader :class='$style.icon' />
+					</template>
+
+					<template v-else-if='isFolder'>
+						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
+						<Icon v-else :class='$style.icon' :name='icon' />
+					</template>
+
+					<template v-else>
+						<Icon
+							:class='$style.icon'
+							:name='fileIcon'
+							:style='{ color: color && getThemeColor(color, theme) }'
+						/>
+					</template>
+				</template>
+
+				{{ name ?? path }}
+
+				<template v-if='isFolder' #rightSection>
+					<ActionIcon
+						icon='gravity-ui:chevron-down'
+						size='sm'
+						:color='ctx.color'
+						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
+						:mod='{ expanded }'
+						variant='subtle'
+						@click.stop='ctx.toggle("expand", path)'
+					/>
+				</template>
+			</Button>
+		</RovingFocusItem>
+
+		<UTransition name='scale-y'>
+			<ul
+				v-if='expanded && data && data.length > 0'
+				:class='$style.list'
+				role='group'
+			>
+				<TreeItem
+					v-for='child in data'
+					:key='child.path'
+					v-bind='child'
+					:path='child.path'
+					:level='level + 1'
+				/>
+			</ul>
+		</UTransition>
+	</li>
 </template>
 
 <style module lang="postcss">
-.item {
-	display: grid;
-	gap: .25rem;
-}
-
-.icon {
-	--loader-size: var(--tree-icon-size);
-
-	width: var(--tree-icon-size);
-	height: var(--tree-icon-size);
-}
-
-.chevron {
-	color: var(--color-dimmed);
-
-	transition: transform .3s ease-in-out;
-
-	&:hover {
-		color: var(--color-dimmed);
-
-		background-color: transparent;
-	}
-
-	&[data-expanded] .chevron-icon {
-		transform: rotate(-180deg);
-	}
-}
-
-
-.list {
-	display: grid;
-	gap: .25rem;
-
-	margin-inline-start: 1rem;
-
-	padding-inline-start: .75rem;
-	border-left: 1px solid var(--color-gray-4);
-}
-
-.root {
-	.inner {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-
-		color: var(--color-text);
-
-		.label {
-			font-weight: 500;
-		}
-	}
-
-	&[data-active],
-	&[data-selected] {
-		.inner {
-			color: var(--button-color);
-		}
-	}
-
-	&[data-selected] {
-		background: alpha(var(--button-color), .1);
-	}
-}
+.item {
+	display: grid;
+	gap: .25rem;
+}
+
+.icon {
+	--loader-size: var(--tree-icon-size);
+
+	width: var(--tree-icon-size);
+	height: var(--tree-icon-size);
+}
+
+.chevron {
+	color: var(--color-dimmed);
+
+	transition: transform .3s ease-in-out;
+
+	&:hover {
+		color: var(--color-dimmed);
+
+		background-color: transparent;
+	}
+
+	&[data-expanded] .chevron-icon {
+		transform: rotate(-180deg);
+	}
+}
+
+.list {
+	display: grid;
+	gap: .25rem;
+
+	margin-inline-start: 1rem;
+
+	padding-inline-start: .75rem;
+	border-left: 1px solid var(--color-gray-4);
+}
+
+.root {
+	.inner {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+
+		color: var(--color-text);
+
+		.label {
+			font-weight: 500;
+		}
+	}
+
+	&[data-active],
+	&[data-selected] {
+		.inner {
+			color: var(--button-color);
+		}
+	}
+
+	&[data-selected] {
+		background: alpha(var(--button-color), .1);
+	}
+}
 </style>