@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/form/DatePicker.svelte

@@ -1,21 +1,39 @@
-<script lang="ts">
-	import Textbox from "./Textbox.svelte";
-	import { fade } from "svelte/transition";
-	import dayjs from "dayjs";
-	import { clickOutside } from "../actions/ClickOutside.js";
-	import ActionIcon from "../ui/ActionIcon.svelte";
-	import { iconChevronLeft, iconChevronRight, iconX } from "../icon/index.js";
-
-	interface Props {
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface DatePickerProps {
+		/** Label text displayed above the input */
 		label?: string;
+		/** Disable the date picker */
 		disabled?: boolean;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Selected date value in ISO format (bindable) */
 		value?: string | undefined;
+		/** Minimum selectable date in ISO format */
 		minDate?: string | undefined;
+		/** Maximum selectable date in ISO format */
 		maxDate?: string | undefined;
+		/** Position of the tooltip */
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Rich tooltip content using a Svelte snippet */
+		tooltipContent?: Snippet;
+		/** Simple tooltip text */
+		tooltipText?: string;
+		/** Callback when selected date changes */
 		onchange?: (date: string | undefined) => void;
 	}
+</script>
+
+<script lang="ts">
+	import Textbox from './Textbox.svelte';
+	import { fade } from 'svelte/transition';
+	import dayjs from '../util/dayjs.js';
+	import { clickOutside } from '../util/ClickOutside.js';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import { iconChevronLeft, iconChevronRight, iconX } from '../icon/index.js';
 
 	let {
 		label,
@@ -25,20 +43,19 @@
 		value = $bindable(undefined),
 		minDate,
 		maxDate,
-		onchange,
-	}: Props = $props();
+		tooltipLocation = 'top',
+		tooltipContent,
+		tooltipText,
+		onchange
+	}: DatePickerProps = $props();
 
-	const days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+	const days = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 
 	// Parse min and max dates
-	const minDateParsed = $derived(
-		minDate ? dayjs(minDate).startOf("date") : undefined,
-	);
-	const maxDateParsed = $derived(
-		maxDate ? dayjs(maxDate).startOf("date") : undefined,
-	);
-
-	type DisplayedDateColor = "normal" | "red" | "grey" | "disabled";
+	const minDateParsed = $derived(minDate ? dayjs(minDate).startOf('date') : undefined);
+	const maxDateParsed = $derived(maxDate ? dayjs(maxDate).startOf('date') : undefined);
+
+	type DisplayedDateColor = 'normal' | 'red' | 'grey' | 'disabled';
 	type DisplayedDate = {
 		date: dayjs.Dayjs;
 		text: string;
@@ -47,20 +64,20 @@
 		isDisabled: boolean;
 	};
 
-	const todayDate = dayjs().startOf("date");
+	const todayDate = dayjs().startOf('date');
 
 	let selectedDate: dayjs.Dayjs | undefined = $state(undefined);
 
 	$effect(() => {
 		setDate(value ? dayjs(value) : undefined, false, true);
 		if (selectedDate) {
-			focusedMonth = selectedDate.startOf("month");
+			focusedMonth = selectedDate.startOf('month');
 		}
 	});
 
 	let showRequiredRing = $state(false);
 	// svelte-ignore state_referenced_locally
-	let focusedMonth = $state((selectedDate ?? todayDate).startOf("month"));
+	let focusedMonth = $state((selectedDate ?? todayDate).startOf('month'));
 
 	function startOfWeek(date: dayjs.Dayjs) {
 		// We celebrate Monday as the one true start of the week in this household. NO exceptions
@@ -74,7 +91,7 @@
 	function getFullWeekCount(month: dayjs.Dayjs) {
 		const start = startOfWeek(month.date(1));
 		const end = endOfWeek(month.date(month.daysInMonth()));
-		const diff = end.diff(start, "day", true);
+		const diff = end.diff(start, 'day', true);
 
 		return Math.ceil(diff / 7) * 7;
 	}
@@ -85,10 +102,7 @@
 		return true;
 	}
 
-	function calculateDays(
-		selectedDate: dayjs.Dayjs | undefined,
-		focusedMonth: dayjs.Dayjs,
-	) {
+	function calculateDays(selectedDate: dayjs.Dayjs | undefined, focusedMonth: dayjs.Dayjs) {
 		// Fill out the entire 7 day grid
 		const length = getFullWeekCount(focusedMonth);
 
@@ -97,31 +111,29 @@
 		const startDate = startOfWeek(focusedMonth);
 
 		for (let i = 0; i < length; i++) {
-			const date = startDate.add(i, "day");
+			const date = startDate.add(i, 'day');
 
 			let color: DisplayedDateColor;
 			let isDisabled = false;
 
 			// Check if date is outside of min/max range
 			if (!isDateInRange(date)) {
-				color = "disabled";
+				color = 'disabled';
 				isDisabled = true;
-			} else if (!date.isSame(focusedMonth, "month")) {
-				color = "grey";
+			} else if (!date.isSame(focusedMonth, 'month')) {
+				color = 'grey';
 			} else if (date.day() == 0 || date.day() == 6) {
-				color = "red";
+				color = 'red';
 			} else {
-				color = "normal";
+				color = 'normal';
 			}
 
 			displayedDates.push({
 				date,
 				text: date.date().toString(),
 				color,
-				isSelected:
-					selectedDate !== undefined &&
-					selectedDate.isSame(date, "date"),
-				isDisabled,
+				isSelected: selectedDate !== undefined && selectedDate.isSame(date, 'date'),
+				isDisabled
 			});
 		}
 
@@ -132,29 +144,25 @@
 		let classes = [];
 
 		if (date.isDisabled) {
-			classes.push("disabled");
-		} else if (date.color === "red") {
-			classes.push("text-red");
-		} else if (date.color === "grey") {
-			classes.push("text-grey");
+			classes.push('disabled');
+		} else if (date.color === 'red') {
+			classes.push('text-red');
+		} else if (date.color === 'grey') {
+			classes.push('text-grey');
 		}
 
 		if (date.isSelected && !date.isDisabled) {
-			classes.push("selected");
+			classes.push('selected');
 		} else {
-			if (date.date.isSame(todayDate, "date") && !date.isDisabled) {
-				classes.push("today");
+			if (date.date.isSame(todayDate, 'date') && !date.isDisabled) {
+				classes.push('today');
 			}
 		}
 
-		return classes.join(" ");
+		return classes.join(' ');
 	}
 
-	function setDate(
-		newDate: dayjs.Dayjs | undefined,
-		fromTextbox: boolean,
-		fromValue: boolean,
-	) {
+	function setDate(newDate: dayjs.Dayjs | undefined, fromTextbox: boolean, fromValue: boolean) {
 		if (newDate === undefined && selectedDate === undefined) return;
 
 		// Check if the new date is within the allowed range
@@ -164,18 +172,12 @@
 		}
 
 		const isSameDate =
-			newDate !== undefined &&
-			selectedDate !== undefined &&
-			newDate.isSame(selectedDate, "date");
-
-		if (
-			newDate === undefined ||
-			!newDate.isValid() ||
-			(isSameDate && !fromTextbox && !fromValue)
-		) {
+			newDate !== undefined && selectedDate !== undefined && newDate.isSame(selectedDate, 'date');
+
+		if (newDate === undefined || !newDate.isValid() || (isSameDate && !fromTextbox && !fromValue)) {
 			value = undefined;
 			selectedDate = undefined;
-			readableDate = "";
+			readableDate = '';
 
 			return;
 		} else if (isSameDate) {
@@ -183,32 +185,30 @@
 		}
 
 		selectedDate = newDate;
-		focusedMonth = newDate.startOf("month");
+		focusedMonth = newDate.startOf('month');
 
-		value = newDate.format("YYYY-MM-DD");
+		value = newDate.format('YYYY-MM-DD');
 		onchange?.(value);
 
-		if (!fromTextbox) readableDate = newDate.format("D MMMM YYYY");
+		if (!fromTextbox) readableDate = newDate.format('D MMMM YYYY');
 	}
 
 	function incrementFocusedMonth(value: number) {
-		focusedMonth = focusedMonth.add(value, "month");
+		focusedMonth = focusedMonth.add(value, 'month');
 	}
 
 	// -----------------------------
 	// Control code
 
 	let textboxElement: HTMLElement | undefined = $state(undefined);
-	let readableDate: string = $state("");
+	let readableDate: string = $state('');
 	let showCalendar = $state(false);
 	let showYearPicker = $state(false);
-	let dropdownPosition: "above" | "below" = $state("below");
+	let dropdownPosition: 'above' | 'below' = $state('below');
 
 	// Year picker: show a range of years centered around the focused year
 	const yearRangeSize = 12;
-	let yearRangeStart = $state(
-		Math.floor(dayjs().year() / yearRangeSize) * yearRangeSize,
-	);
+	let yearRangeStart = $state(Math.floor(dayjs().year() / yearRangeSize) * yearRangeSize);
 
 	function getYearRange() {
 		const years: number[] = [];
@@ -236,25 +236,24 @@
 	function toggleYearPicker() {
 		if (!showYearPicker) {
 			// Center the range around the focused year
-			yearRangeStart =
-				Math.floor(focusedMonth.year() / yearRangeSize) * yearRangeSize;
+			yearRangeStart = Math.floor(focusedMonth.year() / yearRangeSize) * yearRangeSize;
 		}
 		showYearPicker = !showYearPicker;
 	}
 
 	function checkDropdownPosition() {
 		if (!textboxElement) return;
-
+		
 		const rect = textboxElement.getBoundingClientRect();
 		const dropdownHeight = 300; // Approximate height of the calendar dropdown
 		const spaceBelow = window.innerHeight - rect.bottom;
 		const spaceAbove = rect.top;
-
+		
 		// If not enough space below and more space above, position above
 		if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-			dropdownPosition = "above";
+			dropdownPosition = 'above';
 		} else {
-			dropdownPosition = "below";
+			dropdownPosition = 'below';
 		}
 	}
 
@@ -271,24 +270,26 @@
 	function onDateTextChange(event: Event) {
 		const textbox = event.target as HTMLInputElement;
 
-		const date = dayjs(textbox.value, ["D MMMM YYYY", "DD/MM/YYYY"]);
+		const date = dayjs(textbox.value, ['D MMMM YYYY', 'DD/MM/YYYY']);
 		if (date.isValid()) {
 			setDate(date, true, false);
 		}
 	}
 
+	function onDateTextBlur() {
+		if (selectedDate) {
+			readableDate = selectedDate.format('D MMMM YYYY');
+		}
+	}
+
 	function clearDate() {
 		value = undefined;
 		selectedDate = undefined;
-		readableDate = "";
+		readableDate = '';
 		onchange?.(undefined);
 	}
 
-	function handleDateChangeClick(
-		event: MouseEvent,
-		date: dayjs.Dayjs,
-		isDisabled: boolean,
-	) {
+	function handleDateChangeClick(event: MouseEvent, date: dayjs.Dayjs, isDisabled: boolean) {
 		if (isDisabled) {
 			event.stopPropagation();
 			return;
@@ -307,7 +308,10 @@
 		placeholder="Enter date"
 		{disabled}
 		{required}
-		noAutocomplete
+		autocomplete="off"
+		{tooltipLocation}
+		{tooltipContent}
+		{tooltipText}
 		bind:textboxElement
 		value={readableDate}
 		onfocus={() => {
@@ -315,7 +319,8 @@
 			showCalendar = true;
 		}}
 		onkeyup={onDateTextChange}
-		class={showRequiredRing ? "!border-required" : ""}
+		onblur={onDateTextBlur}
+		class={showRequiredRing ? '!border-required' : ''}
 	>
 		{#snippet right()}
 			{#if readableDate && !disabled}
@@ -334,11 +339,7 @@
 		{/snippet}
 		<div class="date-picker">
 			{#if showCalendar}
-				<div
-					class="calendar {dropdownPosition}"
-					transition:fade={{ duration: 200 }}
-					use:clickOutside={onClickOutside}
-				>
+				<div class="calendar {dropdownPosition}" transition:fade={{ duration: 200 }} use:clickOutside={onClickOutside}>
 					<div class="month-buttons">
 						{#if showYearPicker}
 							<ActionIcon
@@ -346,13 +347,8 @@
 								size="1.5rem"
 								onclick={() => incrementYearRange(-1)}
 							/>
-							<button
-								class="month-label clickable"
-								onclick={toggleYearPicker}
-							>
-								{yearRangeStart} - {yearRangeStart +
-									yearRangeSize -
-									1}
+							<button class="month-label clickable" onclick={toggleYearPicker}>
+								{yearRangeStart} - {yearRangeStart + yearRangeSize - 1}
 							</button>
 							<ActionIcon
 								svg={iconChevronRight}
@@ -365,11 +361,8 @@
 								size="1.5rem"
 								onclick={() => incrementFocusedMonth(-1)}
 							/>
-							<button
-								class="month-label clickable"
-								onclick={toggleYearPicker}
-							>
-								{focusedMonth.format("MMMM YYYY")}
+							<button class="month-label clickable" onclick={toggleYearPicker}>
+								{focusedMonth.format('MMMM YYYY')}
 							</button>
 							<ActionIcon
 								svg={iconChevronRight}
@@ -384,10 +377,8 @@
 							{#each getYearRange() as year}
 								<button
 									class="year-button"
-									class:selected={focusedMonth.year() ===
-										year}
-									class:current-year={todayDate.year() ===
-										year}
+									class:selected={focusedMonth.year() === year}
+									class:current-year={todayDate.year() === year}
 									class:disabled={!isYearInRange(year)}
 									disabled={!isYearInRange(year)}
 									onclick={() => selectYear(year)}
@@ -409,12 +400,7 @@
 								<button
 									class="day-button {buildDayClasses(day)}"
 									disabled={day.isDisabled}
-									onclick={(e) =>
-										handleDateChangeClick(
-											e,
-											day.date,
-											day.isDisabled,
-										)}
+									onclick={(e) => handleDateChangeClick(e, day.date, day.isDisabled)}
 								>
 									{day.text}
 								</button>
@@ -434,7 +420,7 @@
 
 	.clear-button {
 		position: absolute;
-		right: var(--pui-spacing-2);
+		right: 0.5rem;
 		top: 50%;
 		transform: translateY(-50%);
 		line-height: 0;
@@ -444,17 +430,17 @@
 		width: 18rem;
 		text-align: center;
 		position: absolute;
-		z-index: var(--pui-z-dropdown);
+		z-index: 10;
 		user-select: none;
-		background-color: var(--pui-bg-surface-raised);
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-md);
-		box-shadow: var(--pui-shadow-lg);
-		padding: var(--pui-spacing-2);
+		background-color: var(--paper-body-bg);
+		border: 1px solid var(--border-color);
+		border-radius: 0.375rem;
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+		padding: 0.5rem;
 	}
 
 	.calendar.below {
-		top: 0;
+		top: 0
 	}
 
 	.calendar.above {
@@ -465,13 +451,13 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: var(--pui-spacing-2);
+		padding: 0.5rem;
 	}
 
 	.month-label {
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-primary);
-		font-size: var(--pui-font-size-lg);
+		font-weight: 600;
+		color: var(--text-color);
+		font-size: 1.125rem;
 		background: none;
 		border: none;
 		cursor: default;
@@ -479,53 +465,53 @@
 
 	.month-label.clickable {
 		cursor: pointer;
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border-radius: var(--pui-radius-sm);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-in-out);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: background-color 0.15s ease;
 	}
 
 	.month-label.clickable:hover {
-		background-color: var(--pui-bg-hover);
+		background-color: rgba(var(--ui-primary-rgbc), 0.1);
 	}
 
 	.year-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
-		gap: var(--pui-spacing-2);
-		margin-top: var(--pui-spacing-2);
-		padding: var(--pui-spacing-2);
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+		padding: 0.5rem;
 	}
 
 	.year-button {
-		color: var(--pui-text-primary);
-		padding: var(--pui-spacing-3) var(--pui-spacing-2);
-		border-radius: var(--pui-radius-md);
+		color: var(--text-color);
+		padding: 0.75rem 0.5rem;
+		border-radius: 0.375rem;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		font-size: var(--pui-font-size-sm);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		font-size: 0.875rem;
+		transition: all 0.15s ease;
 	}
 
 	.year-button:hover:not(.disabled) {
-		background-color: var(--pui-bg-hover);
-		color: var(--pui-color-primary);
+		background-color: rgba(var(--ui-primary-rgbc), 0.1);
+		color: var(--ui-primary);
 	}
 
 	.year-button.current-year {
-		background-color: var(--pui-bg-active);
-		color: var(--pui-color-primary);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: rgba(var(--ui-primary-rgbc), 0.15);
+		color: var(--ui-primary);
+		font-weight: 600;
 	}
 
 	.year-button.selected {
-		background-color: var(--pui-color-primary);
-		color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: var(--ui-primary);
+		color: white;
+		font-weight: 600;
 	}
 
 	.year-button.disabled {
-		color: var(--pui-text-disabled) !important;
+		color: rgb(163 163 163) !important;
 		background-color: transparent !important;
 		cursor: not-allowed !important;
 		opacity: 0.5;
@@ -534,17 +520,17 @@
 	.days-header-bar {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
-		margin-top: var(--pui-spacing-2);
-		background-color: var(--pui-color-gray-100);
-		border-radius: var(--pui-radius-sm);
-		border: 1px solid var(--pui-border-default);
+		margin-top: 0.5rem;
+		background-color: #f8f9fa;
+		border-radius: 0.25rem;
+		border: 1px solid var(--border-color);
 	}
 
 	.day-label {
-		color: var(--pui-color-gray-500);
-		padding: var(--pui-spacing-2);
-		font-size: var(--pui-font-size-xs);
-		font-weight: var(--pui-font-weight-semibold);
+		color: #6b7280;
+		padding: 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
 		text-transform: uppercase;
 		text-align: center;
 	}
@@ -552,50 +538,50 @@
 	.days-grid {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
-		gap: 2px;
-		margin-top: var(--pui-spacing-2);
+		gap: 0.125rem;
+		margin-top: 0.5rem;
 	}
 
 	.day-button {
-		color: var(--pui-text-primary);
+		color: var(--text-color);
 		width: 2.25rem;
 		height: 2.25rem;
-		border-radius: var(--pui-radius-md);
+		border-radius: 0.375rem;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		font-size: var(--pui-font-size-sm);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		font-size: 0.875rem;
+		transition: all 0.15s ease;
 		justify-self: center;
 	}
 
 	.day-button:hover {
-		background-color: var(--pui-bg-hover);
-		color: var(--pui-color-primary);
+		background-color: rgba(var(--ui-primary-rgbc), 0.1);
+		color: var(--ui-primary);
 	}
 
 	.today {
-		background-color: var(--pui-bg-active);
-		color: var(--pui-color-primary);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: rgba(var(--ui-primary-rgbc), 0.15);
+		color: var(--ui-primary);
+		font-weight: 600;
 	}
 
 	.selected {
-		background-color: var(--pui-color-primary);
-		color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-semibold);
+		background-color: var(--ui-primary);
+		color: white;
+		font-weight: 600;
 	}
 
 	.text-red {
-		color: var(--pui-color-danger);
+		color: rgb(248 113 113);
 	}
 
 	.text-grey {
-		color: var(--pui-text-muted);
+		color: rgb(163 163 163);
 	}
 
 	.disabled {
-		color: var(--pui-text-disabled) !important;
+		color: rgb(163 163 163) !important;
 		background-color: transparent !important;
 		cursor: not-allowed !important;
 		opacity: 0.5;
@@ -603,39 +589,39 @@
 
 	.disabled:hover {
 		background-color: transparent !important;
-		color: var(--pui-text-disabled) !important;
+		color: rgb(163 163 163) !important;
 	}
 
 	:global(.dark) {
 		.days-header-bar {
-			background-color: var(--pui-color-dark-200);
+			background-color: #252529;
 		}
 
 		.day-label {
-			color: var(--pui-color-gray-300);
+			color: #d1d5db;
 		}
 
 		.day-button:hover {
-			background-color: var(--pui-bg-hover);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.1);
+			color: var(--ui-accent);
 		}
 
 		.today {
-			background-color: var(--pui-bg-active);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.15);
+			color: var(--ui-accent);
 		}
 
 		.selected {
-			background-color: var(--pui-color-secondary);
-			color: var(--pui-color-primary);
+			background-color: var(--ui-accent);
+			color: var(--ui-primary);
 		}
 
 		.text-grey {
-			color: var(--pui-color-gray-500);
+			color: #6b7280;
 		}
 
 		.disabled {
-			color: var(--pui-color-gray-500) !important;
+			color: #6b7280 !important;
 			background-color: transparent !important;
 			cursor: not-allowed !important;
 			opacity: 0.5;
@@ -643,30 +629,30 @@
 
 		.disabled:hover {
 			background-color: transparent !important;
-			color: var(--pui-color-gray-500) !important;
+			color: #6b7280 !important;
 		}
 
 		.month-label.clickable:hover {
-			background-color: var(--pui-bg-hover);
+			background-color: rgba(var(--ui-accent-rgbc), 0.1);
 		}
 
 		.year-button:hover:not(.disabled) {
-			background-color: var(--pui-bg-hover);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.1);
+			color: var(--ui-accent);
 		}
 
 		.year-button.current-year {
-			background-color: var(--pui-bg-active);
-			color: var(--pui-color-secondary);
+			background-color: rgba(var(--ui-accent-rgbc), 0.15);
+			color: var(--ui-accent);
 		}
 
 		.year-button.selected {
-			background-color: var(--pui-color-secondary);
-			color: var(--pui-color-primary);
+			background-color: var(--ui-accent);
+			color: var(--ui-primary);
 		}
 
 		.year-button.disabled {
-			color: var(--pui-color-gray-500) !important;
+			color: #6b7280 !important;
 		}
 	}
 </style>