nuance-ui 0.2.2 → 0.2.5

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

@@ -13,122 +13,122 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<UnstyledButton v-bind='props' :style :class='$style.cell'>
-		<slot	/>
-	</UnstyledButton>
+	<UnstyledButton v-bind='props' :style :class='$style.cell'>
+		<slot	/>
+	</UnstyledButton>
 </template>
 
 <style lang="postcss" module>
-.cell {
-	--day-size-xs: rem(30px);
-	--day-size-sm: rem(36px);
-	--day-size-md: rem(42px);
-	--day-size-lg: rem(48px);
-	--day-size-xl: rem(54px);
-	--day-size: var(--day-size-sm);
-
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--day-size, var(--day-size-sm));
-	height: var(--day-size, var(--day-size-sm));
-	border-radius: var(--radius-default);
-
-	font-size: calc(var(--day-size) / 2.8);
-	color: var(--color-text);
-
-	background-color: transparent;
-
-	&:hover {
-		&:where(:not([data-static], &:disabled, [data-selected], [data-in-range])) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where([data-static]) {
-		cursor: default;
-		user-select: auto;
-	}
-
-	&:where([data-weekend]) {
-		color: var(--color-red-6);
-	}
-
-	&:where([data-outside]) {
-		/* stylelint-disable-next-line function-no-unknown */
-		color: alpha(var(--color-dimmed), .5);
-	}
-
-	&:where([data-hidden]) {
-		display: none;
-	}
-
-	&:where([data-today]:not([data-selected], [data-in-range])) {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-4);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-		}
-	}
-
-	&:where([data-in-range]) {
-		border-radius: 0;
-
-		background-color: var(--color-primary-light-hover);
-
-		&:hover {
-			&:where(:not(:disabled, [data-static])) {
-				background-color: var(--color-primary-light);
-			}
-		}
-	}
-
-	&:where([data-first-in-range]) {
-		border-radius: 0;
-		border-start-start-radius: var(--radius-default);
-		border-end-start-radius: var(--radius-default);
-	}
-
-	&:where([data-last-in-range]) {
-		border-radius: 0;
-		border-start-end-radius: var(--radius-default);
-		border-end-end-radius: var(--radius-default);
-	}
-
-	&:where([data-last-in-range][data-first-in-range]) {
-		border-radius: var(--radius-default);
-	}
-
-	&:where([data-selected]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-
-		&:hover {
-			&:where(:not(:disabled, [data-static])) {
-				background-color: var(--color-primary-filled-hover);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		pointer-events: none;
-		cursor: not-allowed;
-
-		/* stylelint-disable-next-line function-no-unknown */
-		color: alpha(var(--color-disabled), .5);
-	}
-}
+.cell {
+	--day-size-xs: rem(30px);
+	--day-size-sm: rem(36px);
+	--day-size-md: rem(42px);
+	--day-size-lg: rem(48px);
+	--day-size-xl: rem(54px);
+	--day-size: var(--day-size-sm);
+
+	cursor: pointer;
+	user-select: none;
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	width: var(--day-size, var(--day-size-sm));
+	height: var(--day-size, var(--day-size-sm));
+	border-radius: var(--radius-default);
+
+	font-size: calc(var(--day-size) / 2.8);
+	color: var(--color-text);
+
+	background-color: transparent;
+
+	&:hover {
+		&:where(:not([data-static], &:disabled, [data-selected], [data-in-range])) {
+			@mixin light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&:where([data-static]) {
+		cursor: default;
+		user-select: auto;
+	}
+
+	&:where([data-weekend]) {
+		color: var(--color-red-6);
+	}
+
+	&:where([data-outside]) {
+		/* stylelint-disable-next-line function-no-unknown */
+		color: alpha(var(--color-dimmed), .5);
+	}
+
+	&:where([data-hidden]) {
+		display: none;
+	}
+
+	&:where([data-today]:not([data-selected], [data-in-range])) {
+		@mixin where-light {
+			border: 1px solid var(--color-gray-4);
+		}
+
+		@mixin where-dark {
+			border: 1px solid var(--color-dark-4);
+		}
+	}
+
+	&:where([data-in-range]) {
+		border-radius: 0;
+
+		background-color: var(--color-primary-light-hover);
+
+		&:hover {
+			&:where(:not(:disabled, [data-static])) {
+				background-color: var(--color-primary-light);
+			}
+		}
+	}
+
+	&:where([data-first-in-range]) {
+		border-radius: 0;
+		border-start-start-radius: var(--radius-default);
+		border-end-start-radius: var(--radius-default);
+	}
+
+	&:where([data-last-in-range]) {
+		border-radius: 0;
+		border-start-end-radius: var(--radius-default);
+		border-end-end-radius: var(--radius-default);
+	}
+
+	&:where([data-last-in-range][data-first-in-range]) {
+		border-radius: var(--radius-default);
+	}
+
+	&:where([data-selected]) {
+		color: var(--color-white);
+
+		background-color: var(--color-primary-filled);
+
+		&:hover {
+			&:where(:not(:disabled, [data-static])) {
+				background-color: var(--color-primary-filled-hover);
+			}
+		}
+	}
+
+	&:where(:disabled) {
+		pointer-events: none;
+		cursor: not-allowed;
+
+		/* stylelint-disable-next-line function-no-unknown */
+		color: alpha(var(--color-disabled), .5);
+	}
+}
 </style>

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>