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

package/dist/components/calendar/bond.svelte.js

@@ -0,0 +1,132 @@
+import { Bond, BondState } from '../../shared/bond.svelte';
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+export class CalendarBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/calendar';
+    constructor(s) {
+        super(s);
+    }
+    share() {
+        return CalendarBond.set(this);
+    }
+    root() {
+        return {
+            id: `calendar-root-${this.id}`,
+            'aria-label': 'Calendar',
+            'aria-disabled': this.state.props.disabled ?? false,
+            role: 'application',
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    body() {
+        return {
+            id: `calendar-month-${this.id}`,
+            role: 'grid',
+            'aria-labelledby': `calendar-month-label-${this.id}`,
+            [createAttachmentKey()]: (node) => {
+                this.elements.body = node;
+            }
+        };
+    }
+    day(day) {
+        return {
+            id: `calendar-day-${this.id}-${day.id}`,
+            role: 'gridcell',
+            'aria-selected': this.state.isDaySelected(day),
+            'aria-disabled': day.disabled,
+            tabindex: day.disabled ? -1 : 0
+        };
+    }
+    weekDay() {
+        return {
+            id: `calendar-weekday-${this.id}`,
+            role: 'columnheader'
+        };
+    }
+    header() {
+        return {
+            id: `calendar-weekdays-${this.id}`,
+            role: 'row',
+            [createAttachmentKey()]: (node) => {
+                this.elements.header = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(this.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(this.CONTEXT_KEY, bond);
+    }
+}
+export class CalendarBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+    selectDate(date) {
+        // if (this.props.range) {
+        // } else {
+        // 	this.props.value = date;
+        // }
+        if (!this.props.start) {
+            this.props.range[0] = date;
+        }
+        else if (!this.props.end) {
+            this.props.range[1] = date;
+        }
+        else {
+            this.props.range[0] = date;
+            this.props.range[1] = undefined;
+        }
+        this.props.range = [...this.props.range];
+    }
+    selectStart(date) {
+        this.props.range[0] = date;
+        this.props.range = [...this.props.range];
+    }
+    selectEnd(date) {
+        this.props.range[1] = date;
+        this.props.range = [...this.props.range];
+    }
+    unselect() {
+        this.props.range = [undefined, undefined];
+        this.props.range = [...this.props.range];
+    }
+    unselectStart() {
+        this.props.range[0] = undefined;
+        this.props.range = [...this.props.range];
+    }
+    unselectEnd() {
+        this.props.range[1] = undefined;
+        this.props.range = [...this.props.range];
+    }
+    nextMonth() {
+        if (this.props.pivote) {
+            const current = this.props.pivote;
+            this.props.pivote = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+        }
+    }
+    previousMonth() {
+        if (this.props.pivote) {
+            const current = this.props.pivote;
+            this.props.pivote = new Date(current.getFullYear(), current.getMonth() - 1, 1);
+        }
+    }
+    isDaySelected(day) {
+        if (this.props.range) {
+            const start = this.props.range[0];
+            const end = this.props.range[1];
+            if (!start)
+                return false;
+            const dayTime = day.date.getTime();
+            const startTime = start.getTime();
+            if (!end)
+                return dayTime === startTime;
+            const endTime = end.getTime();
+            return dayTime >= startTime && dayTime <= endTime;
+        }
+        return this.props.value?.getTime() === day.date.getTime();
+    }
+}

package/dist/components/calendar/calendar-body.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { backInOut } from 'svelte/easing';
+	import CalendarDay from './calendar-day.svelte';
+	import { CalendarBond } from './bond.svelte';
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let {
+		class: klass = '',
+		weekday,
+		preset = 'calendar.body',
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const bodyProps = $derived({
+		...calendarBond?.body(),
+		...restProps
+	});
+
+	// const generator = function (pivot: Date, start: Date, end?: Date) {
+	// 	const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+	// 	const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+	// 	const sample = new Date(
+	// 		pivot.getFullYear(),
+	// 		pivot.getMonth() - 1,
+	// 		lastMonthDaysCount - firstDay
+	// 	);
+
+	// 	const array = [];
+	// 	let next = false,
+	// 		prec = false;
+
+	// 	for (let index = 0; index < 42; index++) {
+	// 		sample.setDate(sample.getDate() + 1);
+
+	// 		prec = pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+	// 		next =
+	// 			(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+	// 			(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+	// 		array.push({
+	// 			id: sample.getTime(),
+	// 			date: sample.getDate(),
+	// 			offmonth: next || prec,
+	// 			next,
+	// 			prec,
+	// 			today: isToday(sample),
+	// 			week: Math.floor(index / 7),
+	// 			month: sample.getMonth(),
+	// 			disabled: false,
+	// 			weekend: sample.getDay() == 0,
+	// 			name: format(sample, 'iiiii'),
+	// 			selected: start?.getTime() === sample.getTime()
+	// 		});
+	// 	}
+
+	// 	return array;
+	// };
+
+	// const days = $derived(
+	// 	generator(
+	// 		context_calendar.derived.data.pivote,
+	// 		context_calendar.derived.data.start ?? new Date(),
+	// 		context_calendar.derived.data.end
+	// 	)
+	// );
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	function scle(node: HTMLElement, { delay = 0, duration = 400, easing = backInOut }) {
+		return {
+			delay,
+			duration,
+			easing,
+			css: (_, u) => {
+				return `transform: scale(${u})`;
+			}
+		};
+	}
+</script>
+
+<HtmlAtom
+	class={cn('col-span-full grid h-full w-full grid-cols-subgrid', klass)}
+	{preset}
+	{...bodyProps}
+>
+	{#each currentMonth?.days ?? [] as day (day.id)}
+		{#if children}
+			{@render children?.({ day })}
+		{:else}
+			<CalendarDay
+				{day}
+				onclick={() => {
+					console.log('day clicked', day.date);
+					calendarBond?.state.selectStart(new Date(day.date));
+				}}
+			/>
+		{/if}
+	{/each}
+</HtmlAtom>

package/dist/components/calendar/calendar-body.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const CalendarBody: import("svelte").Component<{
+    class?: string;
+    weekday: any;
+    preset?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type CalendarBody = ReturnType<typeof CalendarBody>;
+export default CalendarBody;

package/dist/components/calendar/calendar-day.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { cn } from '../../utils';
+	import { CalendarBond } from './bond.svelte';
+	import type { CalendarDayProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const selectedDateStart = $derived(calendarBond?.state.props.start);
+	const selectedDateEnd = $derived(calendarBond?.state.props.end);
+	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
+
+	let {
+		class: klass = '',
+		preset = 'calendar.day',
+		day,
+		as = 'button',
+		children = undefined,
+		onclick = handleClick,
+		...restProps
+	}: CalendarDayProps = $props();
+
+	const dayProps = $derived({
+		...calendarBond?.day(day),
+		...restProps
+	});
+
+	const isSelected = $derived.by(() => {
+		if (selectedDateEnd && selectedDateStart) {
+			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
+		}
+
+		return selectedDateStart && isSameDay(day.date, selectedDateStart);
+	});
+
+	function handleClick() {
+		if (isRange) {
+			const start = calendarBond?.state.props.start;
+			if (!start) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			if (isBefore(new Date(day.date), new Date(start))) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			calendarBond?.state.selectEnd(new Date(day.date));
+		} else {
+			calendarBond?.state.selectStart(new Date(day.date));
+		}
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={[
+		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
+		day.offmonth && 'text-muted-foreground bg-muted/30',
+		day.weekend && 'bg-muted/50',
+		isSelected &&
+			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+		isSelected && day.offmonth && 'bg-primary/70',
+		day.today && !isSelected && 'border-primary border-2 font-semibold',
+		day.disabled && 'pointer-events-none opacity-50',
+		klass
+	]}
+	data-disabled={day.disabled}
+	data-prec={day.fromPreviousMonth}
+	data-next={day.fromNextMonth}
+	data-offmonth={day.offmonth}
+	data-weekend={day.weekend}
+	data-today={day.today}
+	data-selected={isSelected}
+	{onclick}
+	{...dayProps}
+>
+	{#if children}
+		{@render children({
+			calendar: calendarBond!
+		})}
+	{:else}
+		<span class="value">{day.dayOfMonth}</span>
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.calendar-day):nth-child(7n + 1) {
+		border-left: none;
+	}
+	:global(.calendar-day):nth-last-child(-n + 7) {
+		border-bottom: none;
+	}
+</style>

package/dist/components/calendar/calendar-day.svelte.d.ts

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

package/dist/components/calendar/calendar-header.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+	import CalendarWeekDay from './calendar-week-day.svelte';
+
+	const calendarBond = CalendarBond.get();
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let { class: klass = '', preset = 'calendar.header', children, ...restProps } = $props();
+
+	const headerProps = $derived({
+		...calendarBond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-header border-border col-span-full grid h-fit grid-cols-subgrid border-b',
+		klass
+	)}
+	{...headerProps}
+>
+	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
+		{#if children}
+			{@render children?.(day)}
+		{:else}
+			<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
+		{/if}
+	{/each}
+</HtmlAtom>

package/dist/components/calendar/calendar-header.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const CalendarHeader: import("svelte").Component<{
+    class?: string;
+    preset?: string;
+    children: any;
+} & Record<string, any>, {}, "">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;

package/dist/components/calendar/calendar-root.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { cn, defineProperty, defineState } from '../../utils';
+	import { addMonths, format, isToday, startOfDay, subMonths } from 'date-fns';
+	import type { CalendarRange, CalendarRootProps, Day, Month } from './types';
+	import { CalendarBond, CalendarBondState, type CalendarBondProps } from './bond.svelte';
+	import { HtmlAtom } from '../atom';
+
+	import './calendar.css';
+
+	let {
+		class: klass = '',
+		preset = 'calendar',
+		value = $bindable(),
+		range = $bindable([undefined, undefined]),
+		pivote = $bindable(new Date()),
+		start = $bindable(startOfDay(new Date())),
+		end = $bindable(),
+		min = undefined,
+		max = undefined,
+		type = 'single',
+		extend = {},
+		onchange = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: CalendarRootProps = $props();
+
+	const monthCurrentDays = $derived(generator(pivote));
+
+	$inspect(min, max, monthCurrentDays);
+
+	const monthCurrent: Month = $derived.by(() => {
+		const start = monthCurrentDays.at(0) as Day;
+		const end = monthCurrentDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthCurrentDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	const monthPreviousDays = $derived(generator(subMonths(pivote, 1)));
+	const monthPrevious: Month = $derived.by(() => {
+		const start = monthPreviousDays.at(0) as Day;
+		const end = monthPreviousDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthPreviousDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	const monthNextDays = $derived(generator(addMonths(pivote, 1)));
+
+	const monthNext: Month = $derived.by(() => {
+		const start = monthNextDays.at(0) as Day;
+		const end = monthNextDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthNextDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	function generator(pivot: Date): Day[] {
+		const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+		const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+		const sample = startOfDay(
+			new Date(pivot.getFullYear(), pivot.getMonth() - 1, lastMonthDaysCount - firstDay)
+		);
+
+		const array: Day[] = [];
+
+		for (let index = 0; index < 42; index++) {
+			sample.setDate(sample.getDate() + 1);
+
+			const prec =
+				pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+			const next =
+				(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+				(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+			const disabled =
+				(min ? sample < startOfDay(min) : false) || (max ? sample > startOfDay(max) : false);
+
+			array.push({
+				id: sample.getTime(),
+				date: new Date(sample),
+				get offmonth() {
+					return next || prec;
+				},
+				dayOfMonth: sample.getDate(),
+				today: isToday(sample),
+				week: Math.floor(index / 7),
+				month: sample.getMonth(),
+				disabled: disabled,
+				weekend: sample.getDay() == 0,
+				name: format(sample, 'iii'),
+				fullname: format(sample, 'iiiii'),
+				get fromNextMonth() {
+					return next;
+				},
+				get fromPreviousMonth() {
+					return prec;
+				}
+			});
+		}
+
+		return array;
+	}
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	const bondProps = defineState<CalendarBondProps>(
+		[
+			defineProperty(
+				'range',
+				() => range,
+				(v: CalendarRange) => {
+					range = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'value',
+				() => range?.[0],
+				(v) => {
+					if (range?.[0]) {
+						range[0] = v;
+					}
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'pivote',
+				() => pivote,
+				(v: Date) => {
+					pivote = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'start',
+				() => range?.[0],
+				(v: Date) => {
+					range[0] = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'end',
+				() => range?.[1],
+				(v: Date | undefined) => {
+					range[1] = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'min',
+				() => min,
+				(v: Date | undefined) => (min = v)
+			),
+			defineProperty(
+				'max',
+				() => max,
+				(v: Date | undefined) => (max = v)
+			),
+			defineProperty('type', () => type ?? 'single'),
+			defineProperty('nextMonth', () => monthNext),
+			defineProperty('currentMonth', () => monthCurrent),
+			defineProperty('previousMonth', () => monthPrevious)
+		],
+		() => ({ extend })
+	);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const popoverState = new CalendarBondState(() => props);
+		const popoverBond = new CalendarBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom {preset} class={cn('h-full w-full', klass)} data-atom="calendar-root" {...rootProps}>
+	{@render children?.({ calendar: bond })}
+</HtmlAtom>

package/dist/components/calendar/calendar-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarRootProps } from './types';
+import { CalendarBond, CalendarBondState, type CalendarBondProps } from './bond.svelte';
+import './calendar.css';
+declare const CalendarRoot: import("svelte").Component<CalendarRootProps, {
+    getBond: () => CalendarBond<CalendarBondProps, CalendarBondState<CalendarBondProps>>;
+}, "value" | "end" | "range" | "start" | "pivote">;
+type CalendarRoot = ReturnType<typeof CalendarRoot>;
+export default CalendarRoot;

package/dist/components/calendar/calendar-week-day.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+
+	const calendarBond = CalendarBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'calendar.weekday',
+		isWeekend,
+		element = $bindable(undefined),
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const weekDayProps = $derived({
+		...calendarBond?.weekDay(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-week-day h-fit px-2 py-2 text-center text-sm font-medium',
+		isWeekend ? 'text-primary' : '',
+		klass
+	)}
+	data-weekend={isWeekend}
+	{...weekDayProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/calendar/calendar-week-day.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const CalendarWeekDay: import("svelte").Component<{
+    class?: string;
+    preset?: string;
+    isWeekend: any;
+    element?: any;
+    children?: any;
+} & Record<string, any>, {}, "element">;
+type CalendarWeekDay = ReturnType<typeof CalendarWeekDay>;
+export default CalendarWeekDay;

package/dist/components/calendar/calendar.css

@@ -0,0 +1,26 @@
+[data-atom='calendar-root'] {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	grid-template-rows: auto 1fr;
+	/* 
+		--icare-root-background-color: color-mix(in srgb, black 5%, white 100%);
+		--icare-root-background-color-hover: color-mix(in srgb, black 5%, white 100%);
+		--icare-root-background-color-active: color-mix(in srgb, black 5%, white 100%);
+
+		--icare-root-text-color: black;
+
+		--icare-disabled-background-color: black;
+		--icare-disabled-text-color: black;
+
+		--icare-selected-background-color: black;
+		--icare-selected-text-color: white;
+
+		--icare-today-background-color: black;
+		--icare-today-text-color: black;
+
+		--icare-weekend-background-color: black;
+		--icare-weekend-text-color: black;
+
+		--icare-offmonth-background-color: black;
+		--icare-offmonth-text-color: black; */
+}