fix: add shouldEnlargeDay and enlargeDay (FKA showDay) to store; disable enlargeDay on InlineCalendar

Author: 6eDesign

Diff for: src/lib/components/Datepicker.svelte

@@ -15,7 +15,7 @@
 	export let end = calendarDefaults.end;
 	export let format = calendarDefaults.format;
 	export let formatted;
-	export let store = datepickerStore.get({ selected, start, end });
+	export let store = datepickerStore.get({ selected, start, end, shouldEnlargeDay: true });
 	export let theme = {};
 	export let defaultTheme = undefined;
 

Diff for: src/lib/components/calendar/DayPicker.svelte

@@ -9,8 +9,6 @@
 	import scrollable from '$lib/directives/scrollable';
 	import { scrollStep } from '$lib/config/scroll';
 
-	let showDay = false;
-
 	const duration = 450;
 
 	const legend = Array(7)
@@ -24,7 +22,8 @@
 	const select = (day) => () => {
 		if (!store.isSelectable(day)) return;
 		store.setDay(day || $store.selected);
-		showDay = true;
+		if (!$store.shouldEnlargeDay) return store.selectDay();
+		store.enlargeDay();
 		setTimeout(() => store.selectDay(), duration + 60);
 	};
 
@@ -79,7 +78,7 @@
 			>
 				<Grid template="repeat(6, 1fr) / repeat(7, 1fr)">
 					{#each days as day, i (day)}
-						{#if !showDay || !dayjs(day.date).isSame($store.selected, 'day')}
+						{#if !$store.enlargeDay || !dayjs(day.date).isSame($store.selected, 'day')}
 							<a
 								href="#pickday"
 								on:keydown|preventDefault
@@ -98,7 +97,7 @@
 				</Grid>
 			</InfiniteGrid>
 		</div>
-		{#if showDay}
+		{#if $store.enlargeDay}
 			<div class="stage selected-big" in:receive|local={{ key }} out:send|local={{ key }}>
 				{dayjs($store.selected).date()}
 			</div>

Diff for: src/lib/stores/datepicker.js

@@ -1,7 +1,6 @@
 import { writable, get as getFromStore } from 'svelte/store';
 import dayjs from 'dayjs';
 
-const ONE_DAY = 1000 * 60 * 60 * 24;
 const PICKER_TYPES = ['days', 'months', 'years'];
 
 const updateSelected = (value, property) => (state) => {
@@ -13,13 +12,15 @@ const pipe = (...fns) => (val) => fns.reduce((accum, fn) => fn(accum), val);
 
 const zeroDay = (date) => dayjs(date).startOf('day').toDate();
 
-const get = ({ selected, start, end }) => {
+const get = ({ selected, start, end, shouldEnlargeDay = false }) => {
 	const { subscribe, set, update } = writable({
 		open: false,
 		hasChosen: false,
-		selected: selected,
+		selected,
 		start: zeroDay(start),
 		end: zeroDay(end),
+		shouldEnlargeDay,
+		enlargeDay: false,
 		year: selected.getFullYear(),
 		month: selected.getMonth(),
 		day: selected.getDate(),
@@ -30,6 +31,9 @@ const get = ({ selected, start, end }) => {
 	return {
 		set,
 		subscribe,
+		enlargeDay(enlargeDay = true) {
+			update((state) => ({ ...state, enlargeDay }));
+		},
 		getSelectableVector(date) {
 			const { start, end } = getFromStore({ subscribe });
 			if (date < start) return -1;
@@ -65,7 +69,6 @@ const get = ({ selected, start, end }) => {
 		setActiveView(newActiveView) {
 			const newIndex = PICKER_TYPES.indexOf(newActiveView);
 			if (newIndex === -1) return;
-			const activeViewDirection = 1;
 			update(({ activeView, ...state }) => ({
 				...state,
 				activeViewDirection: PICKER_TYPES.indexOf(activeView) > newIndex ? -1 : 1,

Diff for: src/routes/docs/theme-editor/[slug].svelte

@@ -11,6 +11,8 @@
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { base } from '$app/paths';
+	import ToggleSwitch from '$lib/components/generic/ToggleSwitch.svelte';
+	import datepicker from '$lib/stores/datepicker';
 
 	const focused = writable(false);
 
@@ -20,6 +22,7 @@
 	let theme;
 	let jsonEditor;
 	let lastSlug;
+	let datepickerStore;
 
 	const deepCopy = (obj) =>
 		Object.entries(obj).reduce(
@@ -55,10 +58,18 @@
 				<NavBarItem href="{base}/docs/theme-editor/dark">Dark</NavBarItem>
 			</NavBar>
 		</div>
-		<div class="results-panel">
-			<div />
-			<InlineCalendar {theme} />
-			<div />
+		<div class="secondary-column">
+			<div class="settings-panel">
+				{#if $datepickerStore}
+					<ToggleSwitch bind:value={$datepickerStore.enlargeDay} />
+					Enlarge Day
+				{/if}
+			</div>
+			<div class="results-panel">
+				<div />
+				<InlineCalendar {theme} bind:store={datepickerStore} />
+				<div />
+			</div>
 		</div>
 	</CodeExample>
 </Theme>
@@ -69,10 +80,24 @@
 		transition: all 180ms linear;
 	}
 
+	.secondary-column {
+		display: grid;
+		grid-template-rows: auto 1fr;
+	}
+
+	.settings-panel {
+		display: grid;
+		align-items: center;
+		grid-template-columns: auto auto 1fr;
+		column-gap: 10px;
+		padding: 18px;
+		border-bottom: 1px solid var(--sc-theme-calendar-colors-border);
+	}
+
 	.results-panel {
 		display: grid;
 		height: 100%;
-		grid-template: auto / 1fr auto 1fr;
+		grid-template: 1fr / 1fr auto 1fr;
 		background: var(--sc-theme-calendar-colors-background-primary);
 		padding: 20px 0;
 		align-items: center;