mertani-web-toolkit 0.1.55 → 0.1.56

package/dist/components/inputs/DatePicker/DatePicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Icon from '../../Icon/Icon.svelte';
+	import { SvelteDate } from 'svelte/reactivity';
 	import './DatePicker.css';
 
 	interface Props {
@@ -32,8 +33,8 @@
 		placement?: 'top' | 'bottom' | 'auto';
 
 		// Events
-		onSelect?: (value: Date) => void;
-		onChange?: (value: Date) => void;
+		onSelect?: (value: Date | null) => void;
+		onChange?: (value: Date | null) => void;
 
 		// Validation
 		isMandatory?: boolean;
@@ -243,7 +244,7 @@
 
 	const dates = $derived(() => {
 		const cells: DateCell[] = [];
-		const cur = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), 1);
+		const cur = new SvelteDate(calendarDate.getFullYear(), calendarDate.getMonth(), 1);
 		if (cur.getDay() > 0) cur.setDate(cur.getDate() - cur.getDay());
 
 		for (let i = 0; i < 42; i++) {
@@ -287,6 +288,15 @@
 		error = validateInput(newDate);
 	}
 
+	function clearDate() {
+		selectedDate = null;
+		value = null;
+		show = false;
+		error = validateInput(null);
+		onSelect?.(null);
+		onChange?.(null);
+	}
+
 	function goToToday() {
 		calendarDate = new Date(globalNow.getFullYear(), globalNow.getMonth(), 1);
 		selectDate({
@@ -374,7 +384,34 @@
 				<span class:placeholder={!displayValue}>
 					{displayValue ?? placeholder}
 				</span>
-				<Icon name="bs-calendar2-date" />
+				<span class="date-picker-actions">
+					{#if displayValue && !disabled && !isLoading}
+						<span
+							class="date-picker-clear"
+							role="button"
+							tabindex="0"
+							aria-label="Clear date"
+							onmousedown={(e: MouseEvent) => {
+								e.preventDefault();
+								e.stopPropagation();
+							}}
+							onclick={(e: MouseEvent) => {
+								e.stopPropagation();
+								clearDate();
+							}}
+							onkeydown={(e: KeyboardEvent) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									e.stopPropagation();
+									clearDate();
+								}
+							}}
+						>
+							<Icon name="bs-x-lg" />
+						</span>
+					{/if}
+					<Icon name="bs-calendar2-date" />
+				</span>
 			</button>
 
 			{#if show}
@@ -391,7 +428,7 @@
 
 					<div class="calendar-body">
 						<div class="date-grid">
-							{#each DAY_LABELS[locale] as day}
+							{#each DAY_LABELS[locale] as day, i (i)}
 								<p class="day-label">{day}</p>
 							{/each}
 							{#each dates() as cell (cell.year + '-' + cell.month + '-' + cell.date)}
@@ -470,4 +507,33 @@
 			background: #f6f8fa;
 		}
 	}
+
+	.date-picker-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+	}
+
+	.date-picker-actions {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		flex: 0 0 auto;
+	}
+
+	.date-picker-clear {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border-radius: 6px;
+		opacity: 0.8;
+	}
+
+	.date-picker-clear:hover {
+		background: rgba(0, 0, 0, 0.06);
+		opacity: 1;
+	}
 </style>

package/dist/components/inputs/DatePicker/DatePicker.svelte.d.ts

@@ -20,8 +20,8 @@ interface Props {
     minDate?: Date | string | null;
     maxDate?: Date | string | null;
     placement?: 'top' | 'bottom' | 'auto';
-    onSelect?: (value: Date) => void;
-    onChange?: (value: Date) => void;
+    onSelect?: (value: Date | null) => void;
+    onChange?: (value: Date | null) => void;
     isMandatory?: boolean;
     customValidation?: (value: Date | null) => string | null;
     isLoading?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.55",
+	"version": "0.1.56",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",