@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

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

@@ -1,206 +1,206 @@
-<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));
-
-	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),
-			defineProperty('rest', () => restProps)
-		]
-	);
-
-	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>
+<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));
+
+	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),
+			defineProperty('rest', () => restProps)
+		]
+	);
+
+	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

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

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

@@ -1,33 +1,33 @@
-<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-1 py-2 text-center text-sm font-medium border-border border-b border-l first:border-l-0 data-[weekend=true]:text-primary',
-		klass
-	)}
-	data-weekend={isWeekend}
-	{...weekDayProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<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-1 py-2 text-center text-sm font-medium border-border border-b border-l first:border-l-0 data-[weekend=true]:text-primary',
+		klass
+	)}
+	data-weekend={isWeekend}
+	{...weekDayProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { SnippetProps } from '../atom';
 import type { Factory } from '../../types';
 import type { CalendarBond } from './bond.svelte';
 export type Day = {
@@ -24,6 +25,10 @@ export type Month = {
     days: Day[];
 };
 export type CalendarRange = [Date | undefined, Date | undefined];
+export interface CalendarSnippetProps extends SnippetProps {
+    calendar: CalendarBond;
+}
+export type CalendarChildren = Snippet<[CalendarSnippetProps]>;
 export interface CalendarRootProps {
     class?: string;
     preset?: string;
@@ -41,11 +46,7 @@ export interface CalendarRootProps {
         range: CalendarRange;
         pivote: Date;
     }) => void;
-    children?: Snippet<[
-        {
-            calendar: CalendarBond;
-        }
-    ]>;
+    children?: CalendarChildren;
 }
 export interface CalendarDayProps {
     class?: string;
@@ -54,9 +55,5 @@ export interface CalendarDayProps {
     as?: string;
     onclick?: () => void;
     readonly element?: HTMLElement;
-    children?: Snippet<[
-        {
-            calendar: CalendarBond;
-        }
-    ]>;
+    children?: CalendarChildren;
 }