mertani-web-toolkit 0.1.55 → 0.1.57

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/Dropdown/Dropdown.css

@@ -0,0 +1,199 @@
+.dropdown-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.dropdown-container.dropdown-side {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.dropdown-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.dropdown-container.dropdown-side .dropdown-label {
+  margin-bottom: 0;
+  min-width: 120px;
+}
+
+.dropdown-label.label-left {
+  text-align: left;
+}
+
+.dropdown-label.label-right {
+  text-align: right;
+}
+
+.label-required {
+  color: var(--color-text-error-ti);
+  margin-left: 4px;
+}
+
+.label-subLabel {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  margin-left: 4px;
+}
+
+.dropdown-trigger {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-form);
+  padding: 0.625rem 1rem;
+  text-align: left;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.dropdown-trigger:not(:disabled) {
+  background: var(--color-bg-surface);
+  cursor: pointer;
+}
+
+.dropdown-trigger:not(:disabled):hover {
+  border-color: var(--color-border-form);
+}
+
+.dropdown-trigger:not(:disabled):focus,
+.dropdown-trigger:not(:disabled).open {
+  outline: none;
+  border-color: var(--color-bg-act-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-act-primary) 25%, transparent);
+}
+
+.dropdown-trigger:disabled {
+  cursor: not-allowed;
+  background: var(--color-bg-disabled);
+}
+
+.dropdown-trigger.error:not(:disabled) {
+  border-color: var(--color-text-error-ti);
+}
+
+.dropdown-trigger.error:not(:disabled):focus {
+  border-color: var(--color-text-error-ti);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-text-error-ti) 25%, transparent);
+}
+
+.dropdown-value {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.dropdown-chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  opacity: 0.7;
+  transition: transform 0.2s;
+}
+
+.dropdown-trigger.open .dropdown-chevron {
+  transform: rotate(180deg);
+}
+
+.dropdown-chevron :global(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  min-width: 100%;
+  z-index: 50;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-form);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.dropdown-options {
+  max-height: 14rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.dropdown-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 14px;
+  transition: background-color 0.15s;
+  color: var(--color-text-primary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.dropdown-option:hover:not(.selected) {
+  background: var(--color-bg-disabled);
+}
+
+.dropdown-option.selected {
+  color: var(--color-bg-act-primary);
+  font-weight: 500;
+}
+
+.dropdown-option-leading {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdown-empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.error-message {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-error-ti);
+}
+
+.relative {
+  position: relative;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/inputs/Dropdown/Dropdown.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+	import Icon from '../../Icon/Icon.svelte';
+	import type { Snippet } from 'svelte';
+	import './Dropdown.css';
+
+	export type DropdownOption = { value: string; label: string };
+
+	interface Props {
+		// ===Styles===
+		// Label
+		labelColor?: string;
+		aligment?: 'side' | 'top';
+		position?: 'left' | 'right';
+
+		// Field
+		size?: 48 | 40 | 32;
+		backgroundColor?: string;
+		borderColor?: string;
+		accentColor?: string;
+		textColor?: string;
+		errorColor?: string;
+		borderRadius?: number;
+		boxShadow?: string;
+		minWidth?: string;
+
+		// ===Properties===
+		// Data
+		id?: string;
+		label?: string;
+		subLabel?: string;
+		options?: DropdownOption[];
+		value?: string;
+		placeholder?: string;
+		emptyMessage?: string;
+		ariaLabel?: string;
+
+		// Events
+		onSelect?: (value: string) => void;
+
+		// Validation
+		isMandatory?: boolean;
+		customValidation?: (value: string) => string | null;
+
+		// Additional Actions
+		isLoading?: boolean;
+		isShow?: boolean;
+		disabled?: boolean;
+		tooltip?: string;
+
+		// Slots
+		optionLeading?: Snippet<[DropdownOption]>;
+
+		// Any
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		// ===Styles===
+		labelColor = 'var(--color-text-primary)',
+		aligment = 'top',
+		position = 'left',
+
+		size = 40,
+		backgroundColor = 'var(--color-bg-surface)',
+		borderColor = 'var(--color-border-form)',
+		accentColor = 'var(--color-bg-act-primary)',
+		textColor = 'var(--color-text-primary)',
+		errorColor = 'var(--color-text-error-ti)',
+		borderRadius,
+		boxShadow = '',
+		minWidth = '160px',
+
+		// ===Properties===
+		id = '',
+		label = '',
+		subLabel = '',
+		options = [],
+		value = $bindable<string>(''),
+		placeholder = 'Pilih...',
+		emptyMessage = 'Tidak ada hasil',
+		ariaLabel = 'Pilih opsi',
+
+		// Events
+		onSelect,
+
+		// Validation
+		isMandatory = false,
+		customValidation,
+
+		// Additional Actions
+		isLoading = false,
+		isShow = true,
+		disabled = false,
+		tooltip = '',
+
+		// Slots
+		optionLeading,
+
+		// Any
+		class: className = '',
+		style: customStyle = ''
+	}: Props = $props();
+
+	let open = $state(false);
+	let triggerEl: HTMLButtonElement | null = $state(null);
+	let menuEl: HTMLDivElement | null = $state(null);
+	let isFocused = $state(false);
+
+	const error = $derived(validateInput(value));
+
+	const sizeConfig = $derived.by(() => {
+		switch (size) {
+			case 48:
+				return {
+					height: '48px',
+					labelFontSize: '16px',
+					fontSize: '16px',
+					borderRadius: 8,
+					padding: '8px 12px'
+				};
+			case 40:
+				return {
+					height: '40px',
+					labelFontSize: '14px',
+					fontSize: '14px',
+					borderRadius: 8,
+					padding: '6px 12px'
+				};
+			case 32:
+				return {
+					height: '32px',
+					labelFontSize: '14px',
+					fontSize: '14px',
+					borderRadius: 6,
+					padding: '6px 12px'
+				};
+			default:
+				return {
+					height: '40px',
+					labelFontSize: '14px',
+					fontSize: '14px',
+					borderRadius: 8,
+					padding: '6px 12px'
+				};
+		}
+	});
+
+	const labelStyles = $derived.by(() => {
+		const s: string[] = [`font-size: ${sizeConfig.labelFontSize};`];
+		if (labelColor) s.push(`color: ${labelColor};`);
+		return s.join(' ');
+	});
+
+	const triggerStyles = $derived.by(() => {
+		const s: string[] = [];
+		s.push(`height: ${sizeConfig.height};`);
+		s.push(`padding: ${sizeConfig.padding};`);
+		s.push(`font-size: ${sizeConfig.fontSize};`);
+		s.push(`color: ${textColor};`);
+		const radius = borderRadius ?? sizeConfig.borderRadius;
+		s.push(`border-radius: ${radius}px;`);
+		if (minWidth) s.push(`min-width: ${minWidth};`);
+		if (boxShadow) s.push(`box-shadow: ${boxShadow};`);
+		if (disabled || isLoading) {
+			s.push('background: var(--color-bg-disabled);');
+		} else if (backgroundColor) {
+			s.push(`background: ${backgroundColor};`);
+		}
+		if (error) {
+			s.push(`border-color: ${errorColor};`);
+			s.push(`box-shadow: 0 0 0 2px color-mix(in srgb, ${errorColor} 25%, transparent);`);
+		} else if (isFocused || open) {
+			s.push(`border-color: ${accentColor};`);
+			s.push(`box-shadow: 0 0 0 2px color-mix(in srgb, ${accentColor} 25%, transparent);`);
+		} else if (borderColor) {
+			s.push(`border-color: ${borderColor};`);
+		}
+		if (customStyle) s.push(customStyle);
+		return s.join(' ');
+	});
+
+	const currentLabel = $derived(options.find((o) => o.value === value)?.label ?? placeholder);
+
+	function validateInput(val: string): string {
+		if (customValidation) {
+			const err = customValidation(val);
+			if (err) return err;
+		}
+		if (isMandatory && !val) return 'Field ini wajib diisi';
+		return '';
+	}
+
+	function toggle() {
+		if (disabled || isLoading) return;
+		open = !open;
+	}
+
+	function select(option: DropdownOption) {
+		value = option.value;
+		open = false;
+		onSelect?.(option.value);
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as Node;
+		if (triggerEl && menuEl && !triggerEl.contains(target) && !menuEl.contains(target)) {
+			open = false;
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			open = false;
+		}
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			toggle();
+		}
+	}
+
+	function handleFocus() {
+		isFocused = true;
+	}
+
+	function handleBlur() {
+		isFocused = false;
+	}
+
+	$effect(() => {
+		if (open) {
+			document.addEventListener('click', handleClickOutside);
+		} else {
+			document.removeEventListener('click', handleClickOutside);
+		}
+		return () => document.removeEventListener('click', handleClickOutside);
+	});
+</script>
+
+{#if isShow}
+	<div class="dropdown-container" class:dropdown-side={aligment === 'side'}>
+		{#if label}
+			<label
+				for={id}
+				class="dropdown-label"
+				class:label-left={position === 'left'}
+				class:label-right={position === 'right'}
+				style={labelStyles}
+			>
+				{label}
+				{#if subLabel}
+					<span class="label-subLabel">{subLabel}</span>
+				{/if}
+				{#if isMandatory}
+					<span class="label-required">*</span>
+				{/if}
+			</label>
+		{/if}
+		<div class="relative flex-1" style="--dropdown-min-width: {minWidth}">
+			<button
+				bind:this={triggerEl}
+				type="button"
+				class="dropdown-trigger {className} {error ? 'error' : ''}"
+				class:open
+				style={triggerStyles}
+				aria-haspopup="listbox"
+				aria-expanded={open}
+				aria-label={ariaLabel}
+				onclick={toggle}
+				onkeydown={handleKeydown}
+				onfocus={handleFocus}
+				onblur={handleBlur}
+				disabled={disabled || isLoading}
+				title={tooltip || undefined}
+			>
+				<span class="dropdown-value">{currentLabel}</span>
+				<span class="dropdown-chevron">
+					<Icon name="bs-chevron-down" />
+				</span>
+			</button>
+
+			{#if open}
+				<div bind:this={menuEl} class="dropdown-menu" role="listbox">
+					<div class="dropdown-options">
+						{#if options.length}
+							{#each options as option (option.value)}
+								{@const selected = value === option.value}
+								<button
+									type="button"
+									class="dropdown-option"
+									class:selected
+									role="option"
+									aria-selected={selected}
+									onclick={() => select(option)}
+									title={option.label}
+								>
+									{#if optionLeading}
+										<span class="dropdown-option-leading">
+											{@render optionLeading(option)}
+										</span>
+									{/if}
+									<span class="truncate">{option.label}</span>
+								</button>
+							{/each}
+						{:else}
+							<div class="dropdown-empty">{emptyMessage}</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+		{#if error}
+			<p class="error-message" style={errorColor ? `color: ${errorColor};` : ''}>{error}</p>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import './Dropdown.css';
+export type DropdownOption = {
+    value: string;
+    label: string;
+};
+interface Props {
+    labelColor?: string;
+    aligment?: 'side' | 'top';
+    position?: 'left' | 'right';
+    size?: 48 | 40 | 32;
+    backgroundColor?: string;
+    borderColor?: string;
+    accentColor?: string;
+    textColor?: string;
+    errorColor?: string;
+    borderRadius?: number;
+    boxShadow?: string;
+    minWidth?: string;
+    id?: string;
+    label?: string;
+    subLabel?: string;
+    options?: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    emptyMessage?: string;
+    ariaLabel?: string;
+    onSelect?: (value: string) => void;
+    isMandatory?: boolean;
+    customValidation?: (value: string) => string | null;
+    isLoading?: boolean;
+    isShow?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+    optionLeading?: Snippet<[DropdownOption]>;
+    class?: string;
+    style?: string;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "value">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/inputs/TextInput/TextInput.css

@@ -131,6 +131,10 @@
   padding-right: 2.5rem;
 }
 
+.input-wrapper:has(.input-clear):not(:has(.suffix-wrapper)) .input-field {
+  padding-right: 2.5rem;
+}
+
 .input-wrapper:has(.input-icon-left):not(:has(.prefix-wrapper)) .input-field {
   padding-left: 2.5rem;
 }
@@ -165,6 +169,35 @@
   right: 12px;
 }
 
+.input-clear {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-text-tertiary);
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.input-clear:hover {
+  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-border-form) 50%, transparent);
+}
+
+.input-clear:focus-visible {
+  outline: none;
+  color: var(--color-bg-act-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-act-primary) 30%, transparent);
+}
+
 .input-loader {
   position: absolute;
   top: 50%;

package/dist/components/inputs/TextInput/TextInput.svelte

@@ -41,6 +41,7 @@
 		onfocus?: (event: FocusEvent) => void;
 		onblur?: (event: FocusEvent) => void;
 		onkeydown?: (event: KeyboardEvent) => void;
+		onClear?: () => void;
 
 		// Validation
 		isMandatory?: boolean;
@@ -54,6 +55,7 @@
 		isShow?: boolean;
 		disabled?: boolean;
 		readOnly?: boolean;
+		clearable?: boolean;
 		tooltip?: string;
 
 		// Any
@@ -98,6 +100,7 @@
 		onfocus,
 		onblur,
 		onkeydown,
+		onClear,
 
 		// Validation
 		isMandatory = false,
@@ -111,6 +114,7 @@
 		isShow = true,
 		disabled = false,
 		readOnly = false,
+		clearable = true,
 		tooltip = '',
 
 		class: className = '',
@@ -118,7 +122,7 @@
 		...props
 	}: Props = $props();
 
-	let inputValue = $state(value);
+	let inputValue = $derived(value);
 	let errorMessage = $state('');
 	let isFocused = $state(false);
 
@@ -335,6 +339,19 @@
 			onclick(e);
 		}
 	}
+
+	function handleClear(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (disabled || readOnly || isLoading) return;
+		inputValue = '';
+		errorMessage = validateInput('');
+		onClear?.();
+	}
+
+	const showClear = $derived(
+		clearable && inputValue !== '' && !disabled && !readOnly && !isLoading && !suffix
+	);
 </script>
 
 {#if isShow}
@@ -388,7 +405,17 @@
 				title={tooltip || ''}
 				{...props}
 			/>
-			{#if isLoading && iconPosition === 'right'}
+			{#if showClear}
+				<button
+					type="button"
+					class="input-clear input-icon-right"
+					onclick={handleClear}
+					aria-label="Hapus isian"
+					tabindex="-1"
+				>
+					<Icon name="bs-x-lg" color="currentColor" width={16} height={16} />
+				</button>
+			{:else if isLoading && iconPosition === 'right'}
 				<div class="input-loader input-icon-right">
 					<span class="loader-spinner"></span>
 				</div>

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

@@ -29,6 +29,7 @@ interface Props extends HTMLInputAttributes {
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
+    onClear?: () => void;
     isMandatory?: boolean;
     regex?: RegExp;
     minLength?: number;
@@ -38,6 +39,7 @@ interface Props extends HTMLInputAttributes {
     isShow?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    clearable?: boolean;
     tooltip?: string;
     class?: string;
     style?: string;

package/package.json

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