nuance-ui 0.2.8 → 0.2.9

package/dist/runtime/components/input/ui/input-wrapper.vue

@@ -52,61 +52,61 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<div :style :class='$style.wrapper'>
-		<InputLabel
-			:data-v-hidden='!label && !$slots.label || null'
-			:for='uid'
-			:class='$style.label'
-			:size
-			:required
-		>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</InputLabel>
-
-		<slot />
-
-		<p v-if='error' :class='$style.error'>
-			<slot name='error'>
-				{{ error }}
-			</slot>
-		</p>
-
-		<p v-else-if='description || $slots.description' :class='$style.description'>
-			<slot name='description'>
-				{{ description }}
-			</slot>
-		</p>
-	</div>
+	<div :style :class='$style.wrapper'>
+		<InputLabel
+			:data-v-hidden='!label && !$slots.label || null'
+			:for='uid'
+			:class='$style.label'
+			:size
+			:required
+		>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</InputLabel>
+
+		<slot />
+
+		<p v-if='error' :class='$style.error'>
+			<slot name='error'>
+				{{ error }}
+			</slot>
+		</p>
+
+		<p v-else-if='description || $slots.description' :class='$style.description'>
+			<slot name='description'>
+				{{ description }}
+			</slot>
+		</p>
+	</div>
 </template>
 
 <style lang="postcss" module>
-.wrapper {
-	--input-error-size: calc(var(--font-size-sm) - rem(2px));
-	--input-description-size: calc(var(--font-size-sm) - rem(2px));
-
-	line-height: var(--line-height);
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
+.wrapper {
+	--input-error-size: calc(var(--font-size-sm) - rem(2px));
+	--input-description-size: calc(var(--font-size-sm) - rem(2px));
+
+	line-height: var(--line-height);
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
 </style>

package/dist/runtime/components/link/link-button.vue

@@ -37,26 +37,26 @@ const { link, rest } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Button
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Button
 			v-bind='{
   ...rest,
   is: rest?.is || "a",
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<template v-if='$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<slot />
-
-			<template v-if='$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</Button>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<template v-if='$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<slot />
+
+			<template v-if='$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</Button>
+	</NuxtLink>
 </template>

package/dist/runtime/components/link/link.vue

@@ -37,22 +37,22 @@ const { link, rest: { underline, ...rest } } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Text
-			is='a'
-			:class='[$style.root, { [$style.underline]: underline }]'
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Text
+			is='a'
+			:class='[$style.root, { [$style.underline]: underline }]'
 			v-bind='{
   ...rest,
   ...$attrs,
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<slot />
-		</Text>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<slot />
+		</Text>
+	</NuxtLink>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/bars-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/dots-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/oval-loader.vue

@@ -1,5 +1,5 @@
 <template>
-	<span :class='$style.root' />
+	<span :class='$style.root' />
 </template>
 
 <style module>

package/dist/runtime/components/modal/modal-close-button.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogCloseButton v-bind='props'>
-		<slot />
-	</DialogCloseButton>
+	<DialogCloseButton v-bind='props'>
+		<slot />
+	</DialogCloseButton>
 </template>

package/dist/runtime/components/modal/modal-header.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogHeader v-bind='props'>
-		<slot />
-	</DialogHeader>
+	<DialogHeader v-bind='props'>
+		<slot />
+	</DialogHeader>
 </template>

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

@@ -31,17 +31,17 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 </script>
 
 <template>
-	<DialogRoot
-		v-model:open='opened'
-		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
-		:within-portal
-		:close-on-click-outside
-		:without-overlay
-		v-bind='rest'
-		@open='$emit("open")'
-		@close='$emit("close")'
-	>
-		<slot />
-	</DialogRoot>
+	<DialogRoot
+		v-model:open='opened'
+		:mod='[{ centered, "full-screen": fullScreen }, mod]'
+		:root-class='css.root'
+		:within-portal
+		:close-on-click-outside
+		:without-overlay
+		v-bind='rest'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<slot />
+	</DialogRoot>
 </template>

package/dist/runtime/components/modal/modal-title.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogTitle v-bind='props'>
-		<slot />
-	</DialogTitle>
+	<DialogTitle v-bind='props'>
+		<slot />
+	</DialogTitle>
 </template>

package/dist/runtime/components/nav-link/nav-icon-link.vue

@@ -40,19 +40,19 @@ const { link, rest } = pickLinkProps(etc);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<ActionIcon
-			is='a'
-			v-bind='{ ...rest, ...$attrs }'
-			:href
-			:variant='isActive ? active : notActive'
-			:mod='[{ active: isActive }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			:target='"target" in linkProps ? linkProps?.target : void 0'
-			@click='navigate'
-		>
-			<slot />
-		</ActionIcon>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<ActionIcon
+			is='a'
+			v-bind='{ ...rest, ...$attrs }'
+			:href
+			:variant='isActive ? active : notActive'
+			:mod='[{ active: isActive }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
+		>
+			<slot />
+		</ActionIcon>
+	</NuxtLink>
 </template>

package/dist/runtime/components/nav-link/nav-link.vue

@@ -57,139 +57,139 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<UnstyledButton
-			is='a'
-			:href
-			:style
-			:class='$style.root'
-			:mod='[{ active: isActive, disabled }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			:target='"target" in linkProps ? linkProps?.target : void 0'
-			@click='navigate'
-		>
-			<span v-if='$slots.leftSection || icon' :class='$style.section' data-position='left'>
-				<slot name='leftSection'>
-					<Icon v-if='icon' :name='icon' />
-				</slot>
-			</span>
-
-			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>
-				<span :class='$style.label'>
-					<slot />
-				</span>
-				<Box :class='$style.description' :mod='{ active }'>
-					<slot name='description'>
-						{{ description }}
-					</slot>
-				</Box>
-			</Box>
-
-			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
-				<slot name='rightSection' />
-			</span>
-		</UnstyledButton>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<UnstyledButton
+			is='a'
+			:href
+			:style
+			:class='$style.root'
+			:mod='[{ active: isActive, disabled }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
+		>
+			<span v-if='$slots.leftSection || icon' :class='$style.section' data-position='left'>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</span>
+
+			<Box :class='$style.body' :mod='{ "no-wrap": noWrap }'>
+				<span :class='$style.label'>
+					<slot />
+				</span>
+				<Box :class='$style.description' :mod='{ active }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</Box>
+
+			<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+				<slot name='rightSection' />
+			</span>
+		</UnstyledButton>
+	</NuxtLink>
 </template>
 
 <style module lang="postcss">
-.root {
-	--nl-spacing-xs: .25rem;
-	--nl-spacing-sm: .5rem;
-	--nl-spacing-md: .75rem;
-	--nl-spacing-lg: 1rem;
-	--nl-spacing-xl: 1.25rem;
-
-	--nl-bg: var(--color-primary-light);
-	--nl-hover: var(--color-primary-light-hover);
-	--nl-color: var(--color-primary-light-color);
-	--nl-spacing: var(--nl-spacing-xs);
-
-	user-select: none;
-
-	display: flex;
-	gap: var(--nl-spacing);
-	align-items: center;
-
-	width: 100%;
-	padding: .25rem var(--spacing-sm);
-	border-radius: var(--radius-default);
-
-	&:where([data-disabled]) {
-		pointer-events: none;
-
-		opacity: 0.4;
-	}
-
-	&:hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-6);
-		}
-	}
-
-	&:where([data-active]) {
-		color: var(--nl-color);
-
-		background-color: var(--nl-bg);
-
-		.description {
-			--description-opacity: 0.9;
-			--description-color: var(--nl-color);
-		}
-
-		&:hover {
-			background-color: var(--nl-hover);
-		}
-	}
-}
-
-.section {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	transition: transform 150ms ease;
-
-	&>svg {
-		display: block;
-	}
-
-	&:where([data-rotate]) {
-		transform: rotate(90deg);
-	}
-}
-
-.label {
-	font-size: var(--font-size-sm);
-}
-
-.body {
-	overflow: hidden;
-	flex: 1;
-
-	text-overflow: ellipsis;
-
-	&:where([data-no-wrap]) {
-		white-space: nowrap;
-	}
-}
-
-.description {
-	overflow: hidden;
-
-	font-size: var(--font-size-xs);
-	color: var(--description-color, var(--color-dimmed));
-	text-overflow: ellipsis;
-
-	opacity: var(--description-opacity, 1);
-
-	:where([data-no-wrap]) & {
-		white-space: nowrap;
-	}
-}
+.root {
+	--nl-spacing-xs: .25rem;
+	--nl-spacing-sm: .5rem;
+	--nl-spacing-md: .75rem;
+	--nl-spacing-lg: 1rem;
+	--nl-spacing-xl: 1.25rem;
+
+	--nl-bg: var(--color-primary-light);
+	--nl-hover: var(--color-primary-light-hover);
+	--nl-color: var(--color-primary-light-color);
+	--nl-spacing: var(--nl-spacing-xs);
+
+	user-select: none;
+
+	display: flex;
+	gap: var(--nl-spacing);
+	align-items: center;
+
+	width: 100%;
+	padding: .25rem var(--spacing-sm);
+	border-radius: var(--radius-default);
+
+	&:where([data-disabled]) {
+		pointer-events: none;
+
+		opacity: 0.4;
+	}
+
+	&:hover {
+		@mixin where-light {
+			background-color: var(--color-gray-0);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-6);
+		}
+	}
+
+	&:where([data-active]) {
+		color: var(--nl-color);
+
+		background-color: var(--nl-bg);
+
+		.description {
+			--description-opacity: 0.9;
+			--description-color: var(--nl-color);
+		}
+
+		&:hover {
+			background-color: var(--nl-hover);
+		}
+	}
+}
+
+.section {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	transition: transform 150ms ease;
+
+	&>svg {
+		display: block;
+	}
+
+	&:where([data-rotate]) {
+		transform: rotate(90deg);
+	}
+}
+
+.label {
+	font-size: var(--font-size-sm);
+}
+
+.body {
+	overflow: hidden;
+	flex: 1;
+
+	text-overflow: ellipsis;
+
+	&:where([data-no-wrap]) {
+		white-space: nowrap;
+	}
+}
+
+.description {
+	overflow: hidden;
+
+	font-size: var(--font-size-xs);
+	color: var(--description-color, var(--color-dimmed));
+	text-overflow: ellipsis;
+
+	opacity: var(--description-opacity, 1);
+
+	:where([data-no-wrap]) & {
+		white-space: nowrap;
+	}
+}
 </style>