@svelte-atoms/core 1.0.0-alpha.27 → 1.0.0-alpha.29

package/dist/components/datagrid/tr/datagrid-tr.svelte

@@ -1,88 +1,88 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import { untrack } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
-	import type { DatagridTrProps } from '../types';
-	import { getDatagridHeaderContext, type DatagridContext } from '../context';
-
-	import './datagrid-tr.css';
-
-	const context_header = getDatagridHeaderContext();
-
-	let {
-		class: klass = '',
-		value = nanoid(),
-		rows = 'auto',
-		data = undefined,
-		header = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DatagridTrProps<T, E, B> = $props();
-
-	const bondProps = defineState<DataGridTrBondProps>([
-		defineProperty('data', () => data),
-		defineProperty('value', () => value),
-		defineProperty('header', () => header)
-	]);
-	const bond = factory(bondProps).share();
-
-	const isHeader = $derived(context_header?.derived?.data?.header ?? false);
-	const isSelected = $derived(bond.state.isSelected);
-
-	const unmount = untrack(() => {
-		if (!isHeader) {
-			return bond.mount();
-		}
-	});
-
-	$effect(() => unmount);
-
-	function _factory(props: typeof bondProps) {
-		const datagridTrState = new DataGridTrBondState(() => props);
-		return new DataGridTrBond(datagridTrState);
-	}
-
-	function onclick_(ev: Event) {
-		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
-
-		if (!ev.defaultPrevented) {
-			//
-		}
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.tr"
-	class={[
-		'datagrid-tr border-border items-center border-b bg-transparent',
-		!isHeader &&
-			'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100 last:border-b-0',
-		isHeader && 'header-tr',
-		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
-		'$preset',
-		klass
-	]}
-	style="--rows:{rows}"
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={onclick_}
-	{...bond.root(restProps)}
->
-	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
-</HtmlAtom>
+<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
+	import { untrack } from 'svelte';
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { HtmlElementTagName } from '../../element';
+	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
+	import type { DatagridTrProps } from '../types';
+	import { getDatagridHeaderContext, type DatagridContext } from '../context';
+
+	import './datagrid-tr.css';
+
+	const context_header = getDatagridHeaderContext();
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		rows = 'auto',
+		data = undefined,
+		header = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridTrProps<T, E, B> = $props();
+
+	const bondProps = defineState<DataGridTrBondProps>([
+		defineProperty('data', () => data),
+		defineProperty('value', () => value),
+		defineProperty('header', () => header)
+	]);
+	const bond = factory(bondProps).share();
+
+	const isHeader = $derived(context_header?.derived?.data?.header ?? false);
+	const isSelected = $derived(bond.state.isSelected);
+
+	const unmount = untrack(() => {
+		if (!isHeader) {
+			return bond.mount();
+		}
+	});
+
+	$effect(() => unmount);
+
+	function _factory(props: typeof bondProps) {
+		const datagridTrState = new DataGridTrBondState(() => props);
+		return new DataGridTrBond(datagridTrState);
+	}
+
+	function onclick_(ev: Event) {
+		onclick?.(ev, { tr: bond as unknown as DatagridContext<T> });
+
+		if (!ev.defaultPrevented) {
+			//
+		}
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.tr"
+	class={[
+		'datagrid-tr border-border items-center border-b bg-transparent',
+		!isHeader &&
+			'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100 last:border-b-0',
+		isHeader && 'header-tr',
+		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
+		'$preset',
+		klass
+	]}
+	style="--rows:{rows}"
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	onclick={onclick_}
+	{...bond.root(restProps)}
+>
+	{@render children?.({ tr: bond as unknown as DatagridContext<T> })}
+</HtmlAtom>

package/dist/components/datagrid/types.d.ts

@@ -77,8 +77,8 @@ export interface Column {
 export interface DatagridRootProps<T> extends DatagridRootExtendProps {
     class?: string;
     template?: string;
+    fallbackTemplate?: string;
     values?: string[];
-    data?: T[];
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext<T>;

package/dist/components/date-picker/atoms.d.ts

@@ -0,0 +1,3 @@
+export { Arrow, Indicator, Trigger } from '../popover/atoms';
+export { default as Root } from './date-picker-root.svelte';
+export { default as Calendar } from './date-picker-calendar.svelte';

package/dist/components/date-picker/atoms.js

@@ -0,0 +1,3 @@
+export { Arrow, Indicator, Trigger } from '../popover/atoms';
+export { default as Root } from './date-picker-root.svelte';
+export { default as Calendar } from './date-picker-calendar.svelte';

package/dist/components/date-picker/bond.svelte.d.ts

@@ -0,0 +1,67 @@
+import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
+import type { CalendarBond, CalendarBondProps } from '../calendar/bond.svelte';
+export type DatePickerBondProps = PopoverStateProps & CalendarBondProps & {
+    format?: string;
+    placeholder?: string;
+};
+export type DatePickerBondElements = PopoverDomElements & {
+    trigger: HTMLInputElement;
+    root: HTMLElement;
+    content: HTMLElement;
+    clearButton: HTMLElement;
+};
+export declare class DatePickerBond<Props extends DatePickerBondProps = DatePickerBondProps, State extends DatePickerBondState<Props> = DatePickerBondState<Props>> extends PopoverBond<Props, State, DatePickerBondElements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(state: State);
+    get calendar(): CalendarBond<CalendarBondProps, import("..").CalendarBondState<CalendarBondProps>> | undefined;
+    setCalendar(calendar: CalendarBond): void;
+    share(): this;
+    trigger(): {
+        [x: symbol]: (node: HTMLInputElement) => void;
+        id: string;
+        role: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-label': string;
+        'aria-disabled': boolean;
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        tabindex: number;
+    };
+    content(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        id: string;
+        role: string;
+        'aria-label': string;
+    };
+    clearButton(props?: Record<string, unknown>): {
+        onclick: (ev: Event) => void;
+        id: string;
+        type: string;
+        'aria-label': string;
+        tabindex: number;
+    };
+    static get(): DatePickerBond;
+    static set(bond: DatePickerBond): DatePickerBond;
+}
+export declare class DatePickerBondState<Props extends DatePickerBondProps> extends PopoverState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get formattedValue(): string;
+    get hasValue(): boolean;
+    get isYearsPickerOpen(): boolean;
+    get isMonthsPickerOpen(): boolean;
+    selectDate(date: Date): void;
+    selectStart(date: Date): void;
+    selectEnd(date: Date): void;
+    clear(): void;
+    private formatDate;
+    openYearsPicker(): void;
+    closeYearsPicker(): void;
+    toggleYearsPicker(): void;
+    openMonthsPicker(): void;
+    closeMonthsPicker(): void;
+    toggleMonthsPicker(): void;
+}

package/dist/components/date-picker/bond.svelte.js

@@ -0,0 +1,174 @@
+import { PopoverBond, PopoverState } from '../popover/bond.svelte';
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+export class DatePickerBond extends PopoverBond {
+    static CONTEXT_KEY = '@atoms/context/date-picker';
+    #calendarBond;
+    constructor(state) {
+        super(state);
+    }
+    get calendar() {
+        return this.#calendarBond;
+    }
+    setCalendar(calendar) {
+        this.#calendarBond = calendar;
+    }
+    share() {
+        return DatePickerBond.set(this);
+    }
+    trigger() {
+        const isDisabled = this.state.props.disabled ?? false;
+        const placeholder = this.state.props.placeholder ?? 'Select a date';
+        return {
+            id: `date-picker-input-${this.id}`,
+            role: 'combobox',
+            'aria-expanded': this.state.props.open ?? false,
+            'aria-controls': `date-picker-calendar-${this.id}`,
+            'aria-label': 'Date picker',
+            'aria-disabled': isDisabled,
+            placeholder,
+            disabled: isDisabled,
+            readonly: true,
+            tabindex: isDisabled ? -1 : 0,
+            [createAttachmentKey()]: (node) => {
+                this.elements.trigger = node;
+            }
+        };
+    }
+    content() {
+        return {
+            id: `date-picker-calendar-${this.id}`,
+            role: 'dialog',
+            'aria-label': 'Choose date',
+            [createAttachmentKey()]: (node) => {
+                this.elements.content = node;
+            }
+        };
+    }
+    clearButton(props = {}) {
+        const hasValue = this.state.hasValue;
+        return {
+            id: `date-picker-clear-${this.id}`,
+            type: 'button',
+            'aria-label': 'Clear date',
+            tabindex: hasValue ? 0 : -1,
+            ...props,
+            onclick: (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.state.clear();
+            },
+            [createAttachmentKey()]: (node) => {
+                this.elements.clearButton = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(this.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(this.CONTEXT_KEY, bond);
+    }
+}
+export class DatePickerBondState extends PopoverState {
+    #isYearsPickerOpen = $state(false);
+    #isMonthsPickerOpen = $state(false);
+    constructor(props) {
+        super(props);
+    }
+    get formattedValue() {
+        if (this.props.range) {
+            if (!this.props.start)
+                return '';
+            if (!this.props.end)
+                return this.formatDate(this.props.start);
+            return `${this.formatDate(this.props.start)} - ${this.formatDate(this.props.end)}`;
+        }
+        return this.props.value ? this.formatDate(this.props.value) : '';
+    }
+    get hasValue() {
+        if (this.props.range) {
+            return !!(this.props.start || this.props.end);
+        }
+        return !!this.props.value;
+    }
+    get isYearsPickerOpen() {
+        return this.#isYearsPickerOpen;
+    }
+    get isMonthsPickerOpen() {
+        return this.#isMonthsPickerOpen;
+    }
+    selectDate(date) {
+        if (this.props.range) {
+            if (!this.props.start) {
+                this.props.start = date;
+            }
+            else if (!this.props.end) {
+                this.props.end = date;
+                this.close(); // Close after selecting range
+            }
+            else {
+                this.props.start = date;
+                this.props.end = undefined;
+            }
+        }
+        else {
+            this.props.value = date;
+            this.close(); // Close after selecting single date
+        }
+    }
+    selectStart(date) {
+        this.props.start = date;
+    }
+    selectEnd(date) {
+        this.props.end = date;
+        this.close();
+    }
+    clear() {
+        this.props.value = undefined;
+        this.props.start = undefined;
+        this.props.end = undefined;
+    }
+    formatDate(date) {
+        const format = this.props.format ?? 'MM/dd/yyyy';
+        // Basic formatting - can be enhanced with date-fns format later
+        if (format === 'MM/dd/yyyy') {
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${month}/${day}/${year}`;
+        }
+        if (format === 'dd/MM/yyyy') {
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${day}/${month}/${year}`;
+        }
+        if (format === 'yyyy-MM-dd') {
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${year}-${month}-${day}`;
+        }
+        // Default fallback
+        return date.toLocaleDateString();
+    }
+    openYearsPicker() {
+        this.#isYearsPickerOpen = true;
+    }
+    closeYearsPicker() {
+        this.#isYearsPickerOpen = false;
+    }
+    toggleYearsPicker() {
+        this.#isYearsPickerOpen = !this.#isYearsPickerOpen;
+    }
+    openMonthsPicker() {
+        this.#isMonthsPickerOpen = true;
+    }
+    closeMonthsPicker() {
+        this.#isMonthsPickerOpen = false;
+    }
+    toggleMonthsPicker() {
+        this.#isMonthsPickerOpen = !this.#isMonthsPickerOpen;
+    }
+}

package/dist/components/date-picker/date-picker-calendar.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Content } from '../popover/atoms';
+	import {
+		Root,
+		Header as CalendarHeader,
+		Body as CalendarBody,
+		Day as CalendarDay
+	} from '../calendar/atoms';
+	import { DatePickerBond } from './bond.svelte';
+	import DatePickerHeader from './date-picker-header.svelte';
+	import DatePickerMonths from './date-picker-months.svelte';
+	import DatePickerYears from './date-picker-years.svelte';
+	import { HtmlAtom } from '../atom';
+	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
+	import type { DatePickerCalendarProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+	const datePickerBondProps = $derived(datePickerBond?.state.props);
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.calendar',
+		children: childrenProp,
+		Header = DatePickerHeader,
+		Weekdays = CalendarHeader,
+		Body = CalendarBody,
+		Day = CalendarDay,
+		Months = DatePickerMonths,
+		Years = DatePickerYears,
+		...restProps
+	}: DatePickerCalendarProps = $props();
+
+	const calendarProps = $derived({
+		...datePickerBond?.content(),
+		...datePickerBondProps,
+		...restProps
+	});
+
+	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
+		if (!datePickerBond) return;
+
+		datePickerBond.state.props.range = range;
+		datePickerBond.state.props.pivote = pivote;
+	}
+</script>
+
+<Content
+	class={['relative overflow-hidden p-0', klass]}
+	base={Root}
+	onchange={handleChange}
+	{preset}
+	{...calendarProps}
+>
+	<HtmlAtom base={Header} class="col-span-full" />
+	<HtmlAtom base={Weekdays} />
+
+	<HtmlAtom base={Body}>
+		{#snippet children({ day }: { day: CalendarDayType })}
+			<HtmlAtom base={Day} {day} class="flex items-center justify-center">
+				<span class="value">{day.dayOfMonth}</span>
+			</HtmlAtom>
+		{/snippet}
+	</HtmlAtom>
+
+	<HtmlAtom base={Months} />
+	<HtmlAtom base={Years} />
+</Content>

package/dist/components/date-picker/date-picker-calendar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerCalendarProps } from './types';
+declare const DatePickerCalendar: import("svelte").Component<DatePickerCalendarProps, {}, "">;
+type DatePickerCalendar = ReturnType<typeof DatePickerCalendar>;
+export default DatePickerCalendar;

package/dist/components/date-picker/date-picker-header.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { DatePickerBond } from './bond.svelte';
+	import { CalendarBond } from '../calendar/bond.svelte';
+	import { Icon } from '../icon';
+	import type { DatePickerHeaderProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+	const calendarBond = CalendarBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.header',
+		children,
+		...restProps
+	}: DatePickerHeaderProps = $props();
+
+	const calendarBondProps = $derived(datePickerBond?.state?.props);
+
+	const pivote = $derived(calendarBondProps?.pivote ?? new Date());
+
+	// Format month and year
+	const monthName = $derived(pivote.toLocaleDateString('en-US', { month: 'long' }));
+	const year = $derived(pivote.getFullYear());
+
+	function handlePreviousMonth() {
+		calendarBond?.state?.previousMonth();
+	}
+
+	function handleNextMonth() {
+		calendarBond?.state?.nextMonth();
+	}
+
+	function handleMonthPicker() {
+		if (!datePickerBond) return;
+		datePickerBond.state.openMonthsPicker();
+	}
+</script>
+
+<HtmlAtom
+	as="nav"
+	class={['border-border flex items-center justify-between gap-2 border-b p-2', '$preset', klass]}
+	{preset}
+	{...restProps}
+>
+	<!-- Previous Month Button -->
+	<button
+		type="button"
+		class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+		onclick={handlePreviousMonth}
+		aria-label="Previous month"
+	>
+		<Icon class="size-5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-full"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M15 18l-6-6 6-6" />
+			</svg>
+		</Icon>
+	</button>
+
+	<!-- Month and Year Display -->
+	<button
+		class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
+		onclick={handleMonthPicker}
+	>
+		{monthName}
+		{year}
+	</button>
+
+	<!-- Next Month Button -->
+	<button
+		type="button"
+		class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+		onclick={handleNextMonth}
+		aria-label="Next month"
+	>
+		<Icon class="size-5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-full"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M9 18l6-6-6-6" />
+			</svg>
+		</Icon>
+	</button>
+</HtmlAtom>

package/dist/components/date-picker/date-picker-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DatePickerHeaderProps } from './types';
+declare const DatePickerHeader: import("svelte").Component<DatePickerHeaderProps, {}, "">;
+type DatePickerHeader = ReturnType<typeof DatePickerHeader>;
+export default DatePickerHeader;