nuance-ui 0.2.8 → 0.2.10

package/dist/runtime/components/calendar/ui/core/calendar-header.vue

@@ -26,102 +26,102 @@ defineEmits(["prev", "level", "next"]);
 </script>
 
 <template>
-	<Box :is v-bind='props' :class='$style.header'>
-		<UnstyledButton
-			v-if='withPrev'
-			aria-label='Previous page'
-			:disabled='prevDisabled?.()'
-			:class='$style.control'
-			@click='$emit("prev")'
-		>
-			<Icon :name='prevIcon' :class='$style.icon' />
-		</UnstyledButton>
-
-		<UnstyledButton
-			:disabled
-			:class='$style.level'
-			@click='$emit("level")'
-		>
-			<slot />
-		</UnstyledButton>
-
-		<UnstyledButton
-			v-if='withNext'
-			aria-label='Next page'
-			:disabled='nextDisabled?.()'
-			:class='$style.control'
-			@click='$emit("next")'
-		>
-			<Icon :name='nextIcon' :class='$style.icon' />
-		</UnstyledButton>
-	</Box>
+	<Box :is v-bind='props' :class='$style.header'>
+		<UnstyledButton
+			v-if='withPrev'
+			aria-label='Previous page'
+			:disabled='prevDisabled?.()'
+			:class='$style.control'
+			@click='$emit("prev")'
+		>
+			<Icon :name='prevIcon' :class='$style.icon' />
+		</UnstyledButton>
+
+		<UnstyledButton
+			:disabled
+			:class='$style.level'
+			@click='$emit("level")'
+		>
+			<slot />
+		</UnstyledButton>
+
+		<UnstyledButton
+			v-if='withNext'
+			aria-label='Next page'
+			:disabled='nextDisabled?.()'
+			:class='$style.control'
+			@click='$emit("next")'
+		>
+			<Icon :name='nextIcon' :class='$style.icon' />
+		</UnstyledButton>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.header {
-	--dch-control-size-xs: rem(30px);
-	--dch-control-size-sm: rem(36px);
-	--dch-control-size-md: rem(42px);
-	--dch-control-size-lg: rem(48px);
-	--dch-control-size-xl: rem(54px);
-	--dch-control-size: var(--dch-control-size-sm);
-
-	--dch-control-radius: var(--radius-default);
-
-	display: flex;
-}
-
-.level,
-.control {
-	cursor: pointer;
-	user-select: none;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	height: var(--dch-control-size);
-	border-radius: var(--dch-control-radius);
-
-	opacity: 1;
-
-	&:where([data-static]) {
-		cursor: default;
-	}
-
-	&:hover {
-		&:where(:not([data-static], :disabled)) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		opacity: 0.2;
-	}
-}
-
-.level {
-	flex: 1;
-
-	font-size: var(--dch-fz, var(--font-size-sm));
-	font-weight: 500;
-	text-transform: capitalize;
-}
-
-.control {
-	width: var(--dch-control-size);
-}
-
-.icon {
-	width: 60%;
-	height: 60%;
-}
+.header {
+	--dch-control-size-xs: rem(30px);
+	--dch-control-size-sm: rem(36px);
+	--dch-control-size-md: rem(42px);
+	--dch-control-size-lg: rem(48px);
+	--dch-control-size-xl: rem(54px);
+	--dch-control-size: var(--dch-control-size-sm);
+
+	--dch-control-radius: var(--radius-default);
+
+	display: flex;
+}
+
+.level,
+.control {
+	cursor: pointer;
+	user-select: none;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: var(--dch-control-size);
+	border-radius: var(--dch-control-radius);
+
+	opacity: 1;
+
+	&:where([data-static]) {
+		cursor: default;
+	}
+
+	&:hover {
+		&:where(:not([data-static], :disabled)) {
+			@mixin light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+
+		opacity: 0.2;
+	}
+}
+
+.level {
+	flex: 1;
+
+	font-size: var(--dch-fz, var(--font-size-sm));
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.control {
+	width: var(--dch-control-size);
+}
+
+.icon {
+	width: 60%;
+	height: 60%;
+}
 </style>

package/dist/runtime/components/calendar/ui/core/calendar-root.vue

@@ -73,7 +73,7 @@ useCalendarSelection({
 </script>
 
 <template>
-	<Box>
-		<slot :config />
-	</Box>
+	<Box>
+		<slot :config />
+	</Box>
 </template>

package/dist/runtime/components/calendar/ui/levels/calendar-decade.vue

@@ -53,53 +53,53 @@ function handleSelect(year) {
 </script>
 
 <template>
-	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
-		<tbody>
-			<tr v-for='(years, yearsIx) in yearList' :key='`decade-${yearsIx}`'>
-				<td v-for='year in years' :key='year'>
-					<CalendarCell
-						:class='$style.year'
+	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
+		<tbody>
+			<tr v-for='(years, yearsIx) in yearList' :key='`decade-${yearsIx}`'>
+				<td v-for='year in years' :key='year'>
+					<CalendarCell
+						:class='$style.year'
 						:mod='{
   "today": isToday(year),
   "selected": isSelected(year),
   "in-range": isInRange(year),
   "first-in-range": isFirstInRange(year),
   "last-in-range": isLastInRange(year)
-}'
-						:disabled='isDisabled(year)'
-						:size
-						@click='handleSelect(year)'
-					>
-						{{ year }}
-					</CalendarCell>
-				</td>
-			</tr>
-		</tbody>
-	</Box>
+}'
+						:disabled='isDisabled(year)'
+						:size
+						@click='handleSelect(year)'
+					>
+						{{ year }}
+					</CalendarCell>
+				</td>
+			</tr>
+		</tbody>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+}
+
+.year {
+	--day-size-xs: 1.875rem;
+	--day-size-sm: 2.25rem;
+	--day-size-md: 2.625rem;
+	--day-size-lg: 3rem;
+	--day-size-xl: 3.375rem;
+
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: calc((var(--day-size) * 7) / 3 + .09375rem);
+
+	height: var(--day-size);
+
+	text-transform: capitalize;
+}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-month.vue

@@ -46,41 +46,41 @@ function handleSelect(event) {
 </script>
 
 <template>
-	<table :class='$style.table' role='grid' tabindex='-1'>
-		<thead>
-			<tr>
-				<th v-if='withWeekNumbers' :class='$style.weekday'>
-					#
-				</th>
-				<th v-for='day in ctx.weekdays.value' :key='day' :class='$style.weekday'>
-					<slot name='weekday' :day='day'>
-						{{ day }}
-					</slot>
-				</th>
-			</tr>
-		</thead>
-
-		<tbody @click='handleSelect'>
-			<Box
-				is='tr'
-				v-for='(week, weekIx) in weeks'
-				:key='`week-${weekIx}`'
-				:class='$style.row'
-				:mod='{ selectable: selection.mode === "week" }'
-			>
-				<td v-if='withWeekNumbers' :class='$style.weeknumber'>
-					{{ getWeekNumber(week[0], 1) }}
-				</td>
-				<Box
-					is='td'
-					v-for='(day, dayIx) in week'
-					:key='`day-${dayIx}`'
-					:class='$style.cell'
-					role='gridcell'
-					:mod='{ "with-spacing": withCellSpacing }'
-				>
-					<CalendarCell
-						:size
+	<table :class='$style.table' role='grid' tabindex='-1'>
+		<thead>
+			<tr>
+				<th v-if='withWeekNumbers' :class='$style.weekday'>
+					#
+				</th>
+				<th v-for='day in ctx.weekdays.value' :key='day' :class='$style.weekday'>
+					<slot name='weekday' :day='day'>
+						{{ day }}
+					</slot>
+				</th>
+			</tr>
+		</thead>
+
+		<tbody @click='handleSelect'>
+			<Box
+				is='tr'
+				v-for='(week, weekIx) in weeks'
+				:key='`week-${weekIx}`'
+				:class='$style.row'
+				:mod='{ selectable: selection.mode === "week" }'
+			>
+				<td v-if='withWeekNumbers' :class='$style.weeknumber'>
+					{{ getWeekNumber(week[0], 1) }}
+				</td>
+				<Box
+					is='td'
+					v-for='(day, dayIx) in week'
+					:key='`day-${dayIx}`'
+					:class='$style.cell'
+					role='gridcell'
+					:mod='{ "with-spacing": withCellSpacing }'
+				>
+					<CalendarCell
+						:size
 						:mod='{
   "value": day,
   "today": isToday(day),
@@ -91,49 +91,49 @@ function handleSelect(event) {
   "in-range": selection.isInRange(day),
   "first-in-range": selection.isFirstInRange(day),
   "last-in-range": selection.isLastInRange(day)
-}'
-						:disabled='isDisabled(day)'
-					>
-						<slot>
-							{{ new Date(day).getDate() }}
-						</slot>
-					</CalendarCell>
-				</Box>
-			</Box>
-		</tbody>
-	</table>
+}'
+						:disabled='isDisabled(day)'
+					>
+						<slot>
+							{{ new Date(day).getDate() }}
+						</slot>
+					</CalendarCell>
+				</Box>
+			</Box>
+		</tbody>
+	</table>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-	border-collapse: collapse;
-}
-
-.row:where([data-selectable]):hover {
-	@mixin light {
-		background-color: var(--color-gray-0);
-	}
-
-	@mixin dark {
-		background-color: var(--color-dark-5);
-	}
-}
-
-.cell {
-	padding: 0;
-
-	&:where(&[data-with-spacing]) {
-		padding: var(--calendar-cell-spacing);
-	}
-}
-
-.weekday {
-	padding-bottom: calc(var(--wr-spacing, var(--spacing-sm)) / 2);
-
-	font-size: var(--wr-fz, var(--font-size-sm));
-	font-weight: normal;
-	color: var(--color-dimmed);
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+	border-collapse: collapse;
+}
+
+.row:where([data-selectable]):hover {
+	@mixin light {
+		background-color: var(--color-gray-0);
+	}
+
+	@mixin dark {
+		background-color: var(--color-dark-5);
+	}
+}
+
+.cell {
+	padding: 0;
+
+	&:where(&[data-with-spacing]) {
+		padding: var(--calendar-cell-spacing);
+	}
+}
+
+.weekday {
+	padding-bottom: calc(var(--wr-spacing, var(--spacing-sm)) / 2);
+
+	font-size: var(--wr-fz, var(--font-size-sm));
+	font-weight: normal;
+	color: var(--color-dimmed);
+	text-transform: capitalize;
+}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-year.vue

@@ -48,53 +48,53 @@ function handleSelect(month) {
 </script>
 
 <template>
-	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
-		<tbody>
-			<tr v-for='(months, seasonIx) in monthList' :key='`${year}-${seasonIx}`'>
-				<td v-for='month in months' :key='`${year}-${month.ix}`'>
-					<CalendarCell
-						:class='$style.year'
+	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
+		<tbody>
+			<tr v-for='(months, seasonIx) in monthList' :key='`${year}-${seasonIx}`'>
+				<td v-for='month in months' :key='`${year}-${month.ix}`'>
+					<CalendarCell
+						:class='$style.year'
 						:mod='{
   "today": isToday(month.ix),
   "selected": isSelected(month.ix),
   "in-range": isInRange(month.ix),
   "first-in-range": isFirstInRange(month.ix),
   "last-in-range": isLastInRange(month.ix)
-}'
-						:disabled='isDisabled(month.ix)'
-						:size
-						@click='handleSelect(month.ix)'
-					>
-						{{ month.label }}
-					</CalendarCell>
-				</td>
-			</tr>
-		</tbody>
-	</Box>
+}'
+						:disabled='isDisabled(month.ix)'
+						:size
+						@click='handleSelect(month.ix)'
+					>
+						{{ month.label }}
+					</CalendarCell>
+				</td>
+			</tr>
+		</tbody>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+}
+
+.year {
+	--day-size-xs: 1.875rem;
+	--day-size-sm: 2.25rem;
+	--day-size-md: 2.625rem;
+	--day-size-lg: 3rem;
+	--day-size-xl: 3.375rem;
+
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: calc((var(--day-size) * 7) / 3 + .09375rem);
+
+	height: var(--day-size);
+
+	text-transform: capitalize;
+}
 </style>

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

@@ -10,7 +10,7 @@ const { is = "section", mod, inheritPadding, withBorder } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='css.section' :mod='[mod, { "with-border": withBorder, "inherit-padding": inheritPadding }]'>
-		<slot />
-	</Box>
+	<Box :is :class='css.section' :mod='[mod, { "with-border": withBorder, "inherit-padding": inheritPadding }]'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/card/card.vue

@@ -17,7 +17,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Paper :is :style :class='css.root' v-bind='rest'>
-		<slot />
-	</Paper>
+	<Paper :is :style :class='css.root' v-bind='rest'>
+		<slot />
+	</Paper>
 </template>

package/dist/runtime/components/checkbox/checkbox-card.vue

@@ -48,44 +48,44 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<UnstyledButton
-		:mod='[{ checked, "with-border": withBorder }, mod]'
-		:value='checked'
-		:class='$style.root'
-		:style
-		:disabled
-		@click='checked = !checked'
-	>
-		<slot />
-	</UnstyledButton>
+	<UnstyledButton
+		:mod='[{ checked, "with-border": withBorder }, mod]'
+		:value='checked'
+		:class='$style.root'
+		:style
+		:disabled
+		@click='checked = !checked'
+	>
+		<slot />
+	</UnstyledButton>
 </template>
 
 <style module lang="postcss">
-.root {
-	--card-radius: var(--radius-default);
-
-	cursor: pointer;
-
-	display: block;
-
-	width: 100%;
-
-	border-radius: var(--card-radius);
-
-	& :where(*) {
-		cursor: inherit;
-	}
-
-	&:where([data-with-border]) {
-		border: 1px solid transparent;
-
-		@mixin where-light {
-			border-color: var(--color-gray-3);
-		}
-
-		@mixin where-dark {
-			border-color: var(--color-dark-4);
-		}
-	}
-}
+.root {
+	--card-radius: var(--radius-default);
+
+	cursor: pointer;
+
+	display: block;
+
+	width: 100%;
+
+	border-radius: var(--card-radius);
+
+	& :where(*) {
+		cursor: inherit;
+	}
+
+	&:where([data-with-border]) {
+		border: 1px solid transparent;
+
+		@mixin where-light {
+			border-color: var(--color-gray-3);
+		}
+
+		@mixin where-dark {
+			border-color: var(--color-dark-4);
+		}
+	}
+}
 </style>