mertani-web-toolkit 0.1.54 → 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/dist/components/inputs/TextInputSuggestion/TextInputSuggestion.svelte

@@ -57,6 +57,8 @@
 		emptyMessage?: string;
 		closeOnSelect?: boolean;
 		loadingSuggestions?: boolean;
+		/** Jika false, suggestions tidak difilter di client (untuk data dari API yang sudah difilter) */
+		filterSuggestionsClientSide?: boolean;
 
 		// Events
 		onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
@@ -126,6 +128,7 @@
 		emptyMessage = 'Tidak ada hasil',
 		closeOnSelect = true,
 		loadingSuggestions = false,
+		filterSuggestionsClientSide = true,
 
 		// Events
 		onSelectSuggestion,
@@ -155,15 +158,15 @@
 		...props
 	}: Props = $props();
 
-	let inputValue = $state(value);
-	let errorMessage = $state('');
-	let isFocused = $state(false);
-	let showList = $state(false);
-	let activeIndex = $state(-1);
-	let wrapperEl: HTMLDivElement | null = $state(null);
-	let inputEl: HTMLInputElement | null = $state(null);
-	let searchByValue = $state(searchBy);
-	let searchByOpen = $state(false);
+	let inputValue = $derived(value);
+	let errorMessage = $derived('');
+	let isFocused = $derived(false);
+	let showList = $derived(false);
+	let activeIndex = $derived(-1);
+	let wrapperEl: HTMLDivElement | null = $derived(null);
+	let inputEl: HTMLInputElement | null = $derived(null);
+	let searchByValue = $derived(searchBy);
+	let searchByOpen = $derived(false);
 
 	$effect(() => {
 		inputValue = value;
@@ -180,6 +183,11 @@
 		}
 	});
 
+	$effect(() => {
+		suggestions = suggestions;
+		activeIndex = -1;
+	});
+
 	const sizeConfig = $derived(() => {
 		switch (size) {
 			case 48:
@@ -309,12 +317,17 @@
 		return classes.join(' ');
 	});
 
-	function normalizeSuggestion(option: SuggestionOption) {
+	function normalizeSuggestion(option: SuggestionOption): {
+		label: string;
+		value: string;
+		raw: SuggestionOption;
+	} {
 		if (typeof option === 'string') {
 			return { label: option, value: option, raw: option };
 		}
-		const val = option.value ?? option.label;
-		return { label: option.label, value: val, raw: option };
+		const val = String(option.value ?? option.id ?? option.label ?? '');
+		const lbl = String(option.label ?? option.value ?? option.id ?? '');
+		return { label: lbl, value: val, raw: option };
 	}
 
 	const filteredSuggestions = $derived(() => {
@@ -325,9 +338,10 @@
 			return [];
 		}
 
-		const result = query
-			? normalized.filter((item) => item.label.toLowerCase().includes(query))
-			: normalized;
+		const result =
+			filterSuggestionsClientSide && query
+				? normalized.filter((item) => item.label.toLowerCase().includes(query))
+				: normalized;
 		return result.slice(0, maxSuggestions);
 	});
 
@@ -388,12 +402,6 @@
 		oninput?.(e);
 	}
 
-	function handleSearchByChange(e: Event) {
-		const target = e.target as HTMLSelectElement;
-		searchByValue = target.value;
-		searchBy = target.value;
-	}
-
 	function selectSearchBy(option: SearchByOption) {
 		searchByValue = option.value;
 		searchBy = option.value;
@@ -469,12 +477,15 @@
 	}
 
 	$effect(() => {
-		if (showList) {
-			setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
-		} else {
+		if (!showList) {
 			document.removeEventListener('click', handleClickOutside);
+			return;
 		}
-		return () => document.removeEventListener('click', handleClickOutside);
+		const tid = setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
+		return () => {
+			clearTimeout(tid);
+			document.removeEventListener('click', handleClickOutside);
+		};
 	});
 </script>
 

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

@@ -42,6 +42,8 @@ interface Props extends HTMLInputAttributes {
     emptyMessage?: string;
     closeOnSelect?: boolean;
     loadingSuggestions?: boolean;
+    /** Jika false, suggestions tidak difilter di client (untuk data dari API yang sudah difilter) */
+    filterSuggestionsClientSide?: boolean;
     onSelectSuggestion?: (value: string, option: SuggestionOption) => void;
     onclick?: (event: MouseEvent) => void;
     oninput?: (event: Event) => void;

package/package.json

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