nuance-ui 0.2.2 → 0.2.5

package/dist/runtime/components/box.vue

@@ -16,7 +16,7 @@ const _mod = computed(() => {
 </script>
 
 <template>
-	<component :is v-bind='_mod'>
-		<slot />
-	</component>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
 </template>

package/dist/runtime/components/breadcrumbs.vue

@@ -33,85 +33,85 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
-	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
-		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
-			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
-				<slot
-					:name='item.slot ?? "item"'
-					:item='item'
-					:ix='ix'
-					:active='item.active ?? ix === breadcrumbs.length - 1'
-				>
-					<Button
-						:size
-						:variant
-						:class='$style.item'
-						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
-						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
-						@click.stop.prevent='$emit("click", item)'
-					>
-						<template v-if='item?.icon' #leftSection>
-							<Icon :name='item.icon' :class='$style.icon' />
-						</template>
-						{{ item.label }}
-					</Button>
-				</slot>
-			</li>
-			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
-				<slot name='separator'>
-					<Icon :name='separator' />
-				</slot>
-			</li>
-		</template>
-	</Box>
+	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
+		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
+			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
+				<slot
+					:name='item.slot ?? "item"'
+					:item='item'
+					:ix='ix'
+					:active='item.active ?? ix === breadcrumbs.length - 1'
+				>
+					<Button
+						:size
+						:variant
+						:class='$style.item'
+						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
+						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
+						@click.stop.prevent='$emit("click", item)'
+					>
+						<template v-if='item?.icon' #leftSection>
+							<Icon :name='item.icon' :class='$style.icon' />
+						</template>
+						{{ item.label }}
+					</Button>
+				</slot>
+			</li>
+			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
+				<slot name='separator'>
+					<Icon :name='separator' />
+				</slot>
+			</li>
+		</template>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--bc-spacing: var(--spacing-xs);
-
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--bc-spacing);
-	align-items: center;
-}
-
-.breadcrumb {
-	line-height: 1;
-
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-
-}
-
-.item {
-	display: flex;
-	gap: .25rem;
-	align-items: center;
-	text-transform: capitalize;
-
-	font-weight: 600;
-}
-
-.icon {
-	width: 1.2em;
-	height: 1.2em;
-}
-
-.separator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	line-height: 1;
-
-	@mixin where-light {
-		color: var(--color-gray-7);
-	}
-
-	@mixin where-dark {
-		color: var(--color-dark-2);
-	}
-}
+.root {
+	--bc-spacing: var(--spacing-xs);
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--bc-spacing);
+	align-items: center;
+}
+
+.breadcrumb {
+	line-height: 1;
+
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+
+}
+
+.item {
+	display: flex;
+	gap: .25rem;
+	align-items: center;
+	text-transform: capitalize;
+
+	font-weight: 600;
+}
+
+.icon {
+	width: 1.2em;
+	height: 1.2em;
+}
+
+.separator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	line-height: 1;
+
+	@mixin where-light {
+		color: var(--color-gray-7);
+	}
+
+	@mixin where-dark {
+		color: var(--color-dark-2);
+	}
+}
 </style>

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

@@ -9,7 +9,7 @@ const { is, mod, orientation = "horizontal" } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
-		<slot />
-	</Box>
+	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
+		<slot />
+	</Box>
 </template>

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

@@ -67,47 +67,47 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:is
+	<Box
+		:is
 		:mod='[
   {
     "with-left-section": !!$slots?.leftSection,
     "with-right-section": !!$slots?.rightSection
   },
   mod
-]'
-		:style='style.root'
-		:class='[css.root, classes?.root]'
-		:disabled='loading'
-	>
-		<Transition name='fade-down'>
-			<Loader v-show='loading' :class='css.loader' :color :size />
-		</Transition>
-
-		<span :class='[css.inner, classes?.inner]'>
-			<span
-				v-if='$slots.leftSection'
-				:class='[css.section, classes?.section]'
-				data-position='left'
-				v-bind='leftSectionProps'
-				:style='style.leftSection'
-			>
-				<slot name='leftSection' />
-			</span>
-
-			<span :class='[css.label, classes?.label]'>
-				<slot />
-			</span>
-
-			<span
-				v-if='$slots.rightSection'
-				data-position='right'
-				:class='[css.section, classes?.section]'
-				v-bind='rightSectionProps'
-				:style='style.rightSection'
-			>
-				<slot name='rightSection' />
-			</span>
-		</span>
-	</Box>
+]'
+		:style='style.root'
+		:class='[css.root, classes?.root]'
+		:disabled='loading'
+	>
+		<Transition name='fade-down'>
+			<Loader v-show='loading' :class='css.loader' :color :size />
+		</Transition>
+
+		<span :class='[css.inner, classes?.inner]'>
+			<span
+				v-if='$slots.leftSection'
+				:class='[css.section, classes?.section]'
+				data-position='left'
+				v-bind='leftSectionProps'
+				:style='style.leftSection'
+			>
+				<slot name='leftSection' />
+			</span>
+
+			<span :class='[css.label, classes?.label]'>
+				<slot />
+			</span>
+
+			<span
+				v-if='$slots.rightSection'
+				data-position='right'
+				:class='[css.section, classes?.section]'
+				v-bind='rightSectionProps'
+				:style='style.rightSection'
+			>
+				<slot name='rightSection' />
+			</span>
+		</span>
+	</Box>
 </template>

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

@@ -9,30 +9,30 @@ const { is = "button", ...props } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.unstyled' v-bind='props' type='button'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-:where(.unstyled) {
-	touch-action: manipulation;
-	cursor: pointer;
-
-	padding: 0;
-	border: 0;
-
-	font-size: var(--font-size-md);
-	color: inherit;
-	text-align: left;
-	text-decoration: none;
-
-	appearance: none;
-	background-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	@mixin where-rtl {
-		text-align: right;
-	}
-}
+:where(.unstyled) {
+	touch-action: manipulation;
+	cursor: pointer;
+
+	padding: 0;
+	border: 0;
+
+	font-size: var(--font-size-md);
+	color: inherit;
+	text-align: left;
+	text-decoration: none;
+
+	appearance: none;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+
+	@mixin where-rtl {
+		text-align: right;
+	}
+}
 </style>

package/dist/runtime/components/calendar/calendar.vue

@@ -42,86 +42,86 @@ const [calendars, nav] = useCalendarNavigation({
 </script>
 
 <template>
-	<CalendarRoot
-		v-slot='{ config }'
-		v-model:date='date'
-		v-model:select='select'
-		v-bind='props'
-		:class='$style.content'
-		@select='(select) => $emit("select", select)'
-	>
-		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
-			<CalendarHeader
-				:with-prev='ix === 0'
-				:with-next='ix === calendars.length - 1'
-				:prev-disabled='nav.isPrevDisabled'
-				:next-disabled='nav.isNextDisabled'
+	<CalendarRoot
+		v-slot='{ config }'
+		v-model:date='date'
+		v-model:select='select'
+		v-bind='props'
+		:class='$style.content'
+		@select='(select) => $emit("select", select)'
+	>
+		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
+			<CalendarHeader
+				:with-prev='ix === 0'
+				:with-next='ix === calendars.length - 1'
+				:prev-disabled='nav.isPrevDisabled'
+				:next-disabled='nav.isNextDisabled'
 				@prev='() => {
   nav.move(-1);
   $emit("prev");
-}'
+}'
 				@next='() => {
   nav.move(1);
   $emit("next");
-}'
+}'
 				@level='() => {
   level = nav.nextLevel();
   $emit("level");
-}'
-			>
-				<slot name='level' :config>
-					{{ nav.getLevelLabel(calendar, config) }}
-				</slot>
-			</CalendarHeader>
-
-			<CalendarMonth
-				v-if='level === "month"'
-				:month='calendar'
-				:with-week-numbers='props.withWeekNumbers'
-				:with-cell-spacing='props.withCellSpacing'
-				:size
-			>
-				<template v-if='!!$slots.weekday' #weekday>
-					<slot name='weekday' />
-				</template>
-
-				<slot name='day' />
-			</CalendarMonth>
-			<CalendarYear
-				v-if='level === "year"'
-				:year='calendar'
-				:size
-				:selectable='props.minLevel === "year"'
+}'
+			>
+				<slot name='level' :config>
+					{{ nav.getLevelLabel(calendar, config) }}
+				</slot>
+			</CalendarHeader>
+
+			<CalendarMonth
+				v-if='level === "month"'
+				:month='calendar'
+				:with-week-numbers='props.withWeekNumbers'
+				:with-cell-spacing='props.withCellSpacing'
+				:size
+			>
+				<template v-if='!!$slots.weekday' #weekday>
+					<slot name='weekday' />
+				</template>
+
+				<slot name='day' />
+			</CalendarMonth>
+			<CalendarYear
+				v-if='level === "year"'
+				:year='calendar'
+				:size
+				:selectable='props.minLevel === "year"'
 				@select='(month) => {
   if (props.minLevel !== "year") {
     level = nav.prevLevel();
     date = month;
   }
-}'
-			/>
-			<CalendarDecade
-				v-if='level === "decade"'
-				:date='calendar'
-				:size
-				:selectable='props.minLevel === "decade"'
+}'
+			/>
+			<CalendarDecade
+				v-if='level === "decade"'
+				:date='calendar'
+				:size
+				:selectable='props.minLevel === "decade"'
 				@select='(year) => {
   if (props.minLevel !== "decade") {
     level = nav.prevLevel();
     date = year;
   }
-}'
-			/>
-		</section>
-	</CalendarRoot>
+}'
+			/>
+		</section>
+	</CalendarRoot>
 </template>
 
 <style lang="postcss" module>
-.content {
-	--calendar-cell-spacing: rem(1px);
-
-	display: flex;
-	gap: var(--spacing-sm);
-
-	width: fit-content;
-}
+.content {
+	--calendar-cell-spacing: rem(1px);
+
+	display: flex;
+	gap: var(--spacing-sm);
+
+	width: fit-content;
+}
 </style>