mertani-web-toolkit 0.1.47 → 0.1.48

package/dist/components/inputs/DatePicker/DatePicker.css

@@ -0,0 +1,205 @@
+.date-picker-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.date-picker-container.date-picker-side {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.date-picker-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.date-picker-container.date-picker-side .date-picker-label {
+  margin-bottom: 0;
+  min-width: 120px;
+}
+
+.date-picker-label.label-left {
+  text-align: left;
+}
+
+.date-picker-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;
+}
+
+.date-picker-wrapper {
+  position: relative;
+  flex: 1;
+}
+
+.date-picker-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  text-align: left;
+  background: var(--dp-bg);
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  color: var(--dp-text);
+  box-shadow: var(--dp-shadow);
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.date-picker-trigger:disabled {
+  cursor: not-allowed;
+  background: var(--color-bg-disabled);
+  opacity: 0.7;
+}
+
+.date-picker-trigger.is-focused:not(:disabled) {
+  border-color: var(--dp-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-accent) 40%, transparent);
+}
+
+.date-picker-trigger.is-error:not(:disabled) {
+  border-color: var(--dp-error);
+}
+
+.date-picker-trigger.is-error.is-focused:not(:disabled) {
+  border-color: var(--dp-error);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dp-error) 40%, transparent);
+}
+
+.date-picker-trigger .placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.date-picker-calendar {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  right: 0;
+  z-index: 20;
+  background: var(--color-bg-surface);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  width: 240px;
+  overflow: hidden;
+}
+
+.date-picker-calendar.placement-bottom {
+  bottom: auto;
+  top: calc(100% + 4px);
+}
+
+.calendar-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8px;
+  height: 40px;
+  border-bottom: 1px solid var(--color-border-form);
+}
+
+.calendar-head p {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+}
+
+.nav-btn:hover {
+  background: var(--color-bg-surface-hover, #f6f8fa);
+}
+
+.calendar-body {
+  padding: 8px 12px;
+}
+
+.date-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.day-label {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  text-align: center;
+  padding: 4px 0;
+}
+
+.date-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  color: var(--color-text-tertiary);
+  margin: auto;
+  cursor: pointer;
+  background: transparent;
+}
+
+.date-cell:hover:not(:disabled) {
+  background: var(--color-bg-surface-hover, #f6f8fa);
+}
+
+.date-cell.in-range {
+  color: var(--color-text-primary);
+}
+
+.date-cell.is-now {
+  border: 1px solid var(--dp-accent);
+}
+
+.date-cell.is-selected {
+  background: var(--dp-accent);
+  color: #fff;
+  font-weight: 500;
+}
+
+.date-cell.is-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.goto-today {
+  width: 100%;
+  text-align: center;
+  line-height: 40px;
+  border-top: 1px solid var(--color-border-form);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--dp-accent);
+}
+
+.goto-today:hover {
+  background: var(--color-bg-surface-hover, #f6f8fa);
+}

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

@@ -0,0 +1,473 @@
+<script lang="ts">
+	import Icon from '../../Icon/Icon.svelte';
+	import './DatePicker.css';
+
+	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;
+
+		// ===Properties===
+		// Data
+		id?: string;
+		label?: string;
+		subLabel?: string;
+		value?: Date | string | null;
+		placeholder?: string;
+		locale?: 'id' | 'en';
+		minDate?: Date | string | null;
+		maxDate?: Date | string | null;
+		placement?: 'top' | 'bottom' | 'auto';
+
+		// Events
+		onSelect?: (value: Date) => void;
+		onChange?: (value: Date) => void;
+
+		// Validation
+		isMandatory?: boolean;
+		customValidation?: (value: Date | null) => string | null;
+
+		// Additional Actions
+		isLoading?: boolean;
+		isShow?: boolean;
+		disabled?: boolean;
+		tooltip?: string;
+
+		// Any
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		// ===Styles===
+		// Label
+		labelColor = 'var(--color-text-primary)',
+		aligment = 'top',
+		position = 'left',
+
+		// Field
+		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 = '',
+
+		// ===Properties===
+		// Data
+		id = '',
+		label = '',
+		subLabel = '',
+		value = $bindable<Date | string | null>(null),
+		placeholder = 'Pilih Tanggal',
+		locale = 'id',
+		minDate,
+		maxDate,
+		placement = 'auto',
+
+		// Events
+		onSelect,
+		onChange,
+
+		// Validation
+		isMandatory = false,
+		customValidation,
+
+		// Additional Actions
+		isLoading = false,
+		isShow = true,
+		disabled = false,
+		tooltip = '',
+
+		class: className = '',
+		style: customStyle = ''
+	}: Props = $props();
+
+	// ===== Config =====
+	const MONTH_LABELS = {
+		id: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
+		en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+	};
+	const DAY_LABELS = {
+		id: ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
+		en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+	};
+	const TODAY_LABEL = { id: 'Hari ini', en: 'Today' };
+
+	// ===== Helpers =====
+	function parseValue(val: Date | string | null | undefined): Date | null {
+		if (!val) return null;
+		if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+		const parts = val.includes('-') ? val.split('-') : [];
+		if (parts.length !== 3) return null;
+		const isISO = parts[0].length === 4;
+		const [d, m, y] = isISO
+			? [parseInt(parts[2]), parseInt(parts[1]) - 1, parseInt(parts[0])]
+			: [parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2])];
+		const date = new Date(y, m, d);
+		return isNaN(date.getTime()) ? null : date;
+	}
+
+	function formatDisplay(date: Date): string {
+		const d = date.getDate().toString().padStart(2, '0');
+		const m = (date.getMonth() + 1).toString().padStart(2, '0');
+		return `${d}-${m}-${date.getFullYear()}`;
+	}
+
+	function parseLimit(val?: Date | string | null): Date | null {
+		return val ? parseValue(val) : null;
+	}
+
+	function isDateDisabled(date: Date): boolean {
+		const min = parseLimit(minDate);
+		const max = parseLimit(maxDate);
+		const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+		if (min && d < new Date(min.getFullYear(), min.getMonth(), min.getDate())) return true;
+		if (max && d > new Date(max.getFullYear(), max.getMonth(), max.getDate())) return true;
+		return false;
+	}
+
+	function validateInput(val: Date | string | null): string {
+		const parsed = parseValue(val);
+		if (customValidation) {
+			const customError = customValidation(parsed);
+			if (customError) return customError;
+		}
+		if (isMandatory && !parsed) return 'Field ini wajib diisi';
+		return '';
+	}
+
+	// ===== State =====
+	const globalNow = new Date();
+	let show = $state(false);
+	let calendarDate = $state(new Date());
+	let selectedDate = $state<Date | null>(parseValue(value));
+	let wrapperEl: HTMLDivElement | null = $state(null);
+	let isFocused = $state(false);
+	let error = $state('');
+
+	const month = $derived(calendarDate.getMonth());
+	const year = $derived(calendarDate.getFullYear());
+	const displayValue = $derived(selectedDate ? formatDisplay(selectedDate) : null);
+
+	const sizeConfig = $derived(
+		{
+			48: {
+				height: '48px',
+				labelFontSize: '16px',
+				fontSize: '16px',
+				borderRadius: 8,
+				padding: '8px 12px'
+			},
+			40: {
+				height: '40px',
+				labelFontSize: '14px',
+				fontSize: '14px',
+				borderRadius: 8,
+				padding: '6px 12px'
+			},
+			32: {
+				height: '32px',
+				labelFontSize: '14px',
+				fontSize: '14px',
+				borderRadius: 6,
+				padding: '6px 10px'
+			}
+		}[size] ?? {
+			height: '40px',
+			labelFontSize: '14px',
+			fontSize: '14px',
+			borderRadius: 8,
+			padding: '6px 12px'
+		}
+	);
+
+	const labelStyles = $derived(`font-size: ${sizeConfig.labelFontSize}; color: ${labelColor};`);
+
+	const containerStyles = $derived(
+		[
+			`--dp-accent: ${accentColor};`,
+			`--dp-error: ${errorColor};`,
+			`--dp-border: ${borderColor};`,
+			`--dp-text: ${textColor};`
+		].join(' ')
+	);
+
+	const triggerStyles = $derived(() => {
+		const radius = borderRadius ?? sizeConfig.borderRadius;
+		const bg = disabled || isLoading ? 'var(--color-bg-disabled)' : backgroundColor;
+		const shadow = boxShadow ? boxShadow : 'none';
+
+		return [
+			`min-height: ${sizeConfig.height};`,
+			`padding: ${sizeConfig.padding};`,
+			`font-size: ${sizeConfig.fontSize};`,
+			`--dp-bg: ${bg};`,
+			`--dp-radius: ${radius}px;`,
+			`--dp-shadow: ${shadow};`,
+			customStyle
+		]
+			.filter(Boolean)
+			.join(' ');
+	});
+
+	// Resolve placement
+	const resolvedPlacement = $derived(() => {
+		if (placement !== 'auto') return placement;
+		return 'top';
+	});
+
+	interface DateCell {
+		date: number;
+		month: number;
+		year: number;
+		isNow: boolean;
+		isSelected: boolean;
+		inRange: boolean;
+		isDisabled: boolean;
+	}
+
+	const dates = $derived(() => {
+		const cells: DateCell[] = [];
+		const cur = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), 1);
+		if (cur.getDay() > 0) cur.setDate(cur.getDate() - cur.getDay());
+
+		for (let i = 0; i < 42; i++) {
+			cells.push({
+				date: cur.getDate(),
+				month: cur.getMonth(),
+				year: cur.getFullYear(),
+				isNow: cur.toDateString() === globalNow.toDateString(),
+				isSelected: selectedDate ? cur.toDateString() === selectedDate.toDateString() : false,
+				inRange: cur.getMonth() === calendarDate.getMonth(),
+				isDisabled: isDateDisabled(cur)
+			});
+			cur.setDate(cur.getDate() + 1);
+		}
+		return cells;
+	});
+
+	// Sync external value changes
+	$effect(() => {
+		const parsed = parseValue(value);
+		if (parsed) {
+			selectedDate = parsed;
+			calendarDate = new Date(parsed.getFullYear(), parsed.getMonth(), 1);
+		}
+		error = validateInput(value);
+	});
+
+	// ===== Actions =====
+	function selectDate(cell: DateCell) {
+		if (cell.isDisabled) return;
+		const newDate = new Date(cell.year, cell.month, cell.date);
+		selectedDate = newDate;
+		value = newDate;
+		onSelect?.(newDate);
+		onChange?.(newDate);
+
+		if (!cell.inRange) {
+			calendarDate = new Date(cell.year, cell.month, 1);
+		}
+		show = false;
+		error = validateInput(newDate);
+	}
+
+	function goToToday() {
+		calendarDate = new Date(globalNow.getFullYear(), globalNow.getMonth(), 1);
+		selectDate({
+			date: globalNow.getDate(),
+			month: globalNow.getMonth(),
+			year: globalNow.getFullYear(),
+			isNow: true,
+			isSelected: false,
+			inRange: true,
+			isDisabled: isDateDisabled(globalNow)
+		});
+	}
+
+	function prevMonth() {
+		calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1);
+	}
+
+	function nextMonth() {
+		calendarDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (wrapperEl && !wrapperEl.contains(e.target as Node)) {
+			show = false;
+			isFocused = false;
+		}
+	}
+
+	function handleFocus() {
+		isFocused = true;
+	}
+
+	function handleBlur() {
+		isFocused = false;
+		error = validateInput(value);
+	}
+
+	$effect(() => {
+		if (show) {
+			setTimeout(() => document.addEventListener('click', handleClickOutside), 10);
+		} else {
+			document.removeEventListener('click', handleClickOutside);
+		}
+		return () => document.removeEventListener('click', handleClickOutside);
+	});
+</script>
+
+{#if isShow}
+	<div
+		class="date-picker-container {aligment === 'side' ? 'date-picker-side' : ''}"
+		bind:this={wrapperEl}
+		style={containerStyles}
+	>
+		{#if label}
+			<label
+				for={id}
+				class="date-picker-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="date-picker-wrapper">
+			<button
+				{id}
+				type="button"
+				class="date-picker-trigger {className} {error ? 'is-error' : ''} {isFocused
+					? 'is-focused'
+					: ''}"
+				style={triggerStyles()}
+				onclick={() => !disabled && !isLoading && (show = !show)}
+				onfocus={handleFocus}
+				onblur={handleBlur}
+				disabled={disabled || isLoading}
+				title={tooltip || ''}
+			>
+				<span class:placeholder={!displayValue}>
+					{displayValue ?? placeholder}
+				</span>
+				<Icon name="bs-calendar2-date" />
+			</button>
+
+			{#if show}
+				<div class="date-picker-calendar" class:placement-bottom={resolvedPlacement() === 'bottom'}>
+					<div class="calendar-head">
+						<button class="nav-btn" onclick={prevMonth}>
+							<Icon name="bs-chevron-left" />
+						</button>
+						<p>{MONTH_LABELS[locale][month]} {year}</p>
+						<button class="nav-btn" onclick={nextMonth}>
+							<Icon name="bs-chevron-right" />
+						</button>
+					</div>
+
+					<div class="calendar-body">
+						<div class="date-grid">
+							{#each DAY_LABELS[locale] as day}
+								<p class="day-label">{day}</p>
+							{/each}
+							{#each dates() as cell (cell.year + '-' + cell.month + '-' + cell.date)}
+								<button
+									class="date-cell"
+									class:is-now={cell.isNow}
+									class:is-selected={cell.isSelected}
+									class:in-range={cell.inRange}
+									class:is-disabled={cell.isDisabled}
+									onclick={() => selectDate(cell)}
+									disabled={cell.isDisabled}
+								>
+									{cell.date}
+								</button>
+							{/each}
+						</div>
+					</div>
+
+					<button class="goto-today" onclick={goToToday}>
+						{TODAY_LABEL[locale]}
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.date-picker-container {
+		&.date-picker-side {
+			flex-direction: row;
+			align-items: center;
+			gap: 12px;
+		}
+	}
+
+	.date-picker-calendar {
+		&.placement-bottom {
+			bottom: auto;
+			top: calc(100% + 4px);
+		}
+	}
+
+	.calendar-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 8px;
+		height: 40px;
+		border-bottom: 1px solid var(--color-border-form);
+	}
+
+	.calendar-head p {
+		&.is-selected {
+			background: var(--accent, #ffa000);
+			color: #fff;
+			font-weight: 500;
+		}
+
+		&.is-disabled {
+			opacity: 0.35;
+			cursor: not-allowed;
+		}
+	}
+
+	.goto-today {
+		width: 100%;
+		text-align: center;
+		line-height: 40px;
+		border-top: 1px solid #dee2e6;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+
+		&:hover {
+			background: #f6f8fa;
+		}
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import './DatePicker.css';
+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;
+    id?: string;
+    label?: string;
+    subLabel?: string;
+    value?: Date | string | null;
+    placeholder?: string;
+    locale?: 'id' | 'en';
+    minDate?: Date | string | null;
+    maxDate?: Date | string | null;
+    placement?: 'top' | 'bottom' | 'auto';
+    onSelect?: (value: Date) => void;
+    onChange?: (value: Date) => void;
+    isMandatory?: boolean;
+    customValidation?: (value: Date | null) => string | null;
+    isLoading?: boolean;
+    isShow?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+    class?: string;
+    style?: string;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export { default as TablePagination } from './components/Table/TablePagination.s
 export { default as Illustration } from './components/Illustration/Illustration.svelte';
 export { default as IllustrationLibrary } from './components/Illustration/IllustrationLibrary.svelte';
 export type { Column, DeviceStatus, TableAction } from './components/Table/types.js';
+export { default as DatePicker } from './components/inputs/DatePicker/DatePicker.svelte';

package/dist/index.js

@@ -18,3 +18,4 @@ export { default as Tabs } from './components/Tabs/Tabs.svelte';
 export { default as TablePagination } from './components/Table/TablePagination.svelte';
 export { default as Illustration } from './components/Illustration/Illustration.svelte';
 export { default as IllustrationLibrary } from './components/Illustration/IllustrationLibrary.svelte';
+export { default as DatePicker } from './components/inputs/DatePicker/DatePicker.svelte';

package/package.json

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