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

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

@@ -1,49 +1,49 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { setDatagridHeaderContext } from './context';
-	import { DataGridBond } from './bond.svelte';
-	import type { DatagridHeaderProps } from './types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridHeaderProps<T> = $props();
-
-	const header = $state(true);
-
-	const derived_header = $derived({
-		data: {
-			header
-		}
-	});
-
-	setDatagridHeaderContext({
-		get derived() {
-			return derived_header;
-		}
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.header"
-	class={['border-border col-span-full grid grid-cols-subgrid', '$preset', klass]}
-	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)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { setDatagridHeaderContext } from './context';
+	import { DataGridBond } from './bond.svelte';
+	import type { DatagridHeaderProps } from './types';
+
+	const bond = DataGridBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridHeaderProps<T> = $props();
+
+	const header = $state(true);
+
+	const derived_header = $derived({
+		data: {
+			header
+		}
+	});
+
+	setDatagridHeaderContext({
+		get derived() {
+			return derived_header;
+		}
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.header"
+	class={['border-border col-span-full grid grid-cols-subgrid', '$preset', klass]}
+	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)}
+	{...restProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

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

@@ -10,7 +10,7 @@
 		class: klass = '',
 		values = $bindable([]),
 		template = undefined,
-		data = [],
+		fallbackTemplate = 'auto',
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -46,7 +46,7 @@
 	{bond}
 	preset="datagrid"
 	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
-	style="--template-columns:{bond.state.template}"
+	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/datagrid/datagrid.css

@@ -1,47 +1,5 @@
-.datagrid-root {
-	display: grid;
-	grid-auto-flow: row;
-	grid-template-columns: var(--template-columns, auto);
-}
-
-.cas-[data-screen='sm'] {
-	@media (max-width: var(--screens-sm)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='md'] {
-	@media (max-width: var(--screens-md)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='sd'] {
-	@media (max-width: var(--screens-sd)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='lg'] {
-	@media (max-width: var(--screens-lg)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='xl'] {
-	@media (max-width: var(--screens-xl)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='2xl'] {
-	@media (max-width: var(--screens-2xl)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='3xl'] {
-	@media (max-width: var(--screens-3xl)) {
-		display: none;
-	}
-}
+.datagrid-root {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: var(--template-columns, auto);
+}

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

@@ -1,66 +1,66 @@
-<script lang="ts" generics="D,E extends HtmlElementTagName, B extends Base = Base">
-	import { DataGridBond } from '../bond.svelte';
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import type { DataGridTdBond } from './bond.svelte';
-	export type { DatagridTdProps } from '../types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DatagridTdProps<D, E, B> = $props();
-
-	let element = $state<HTMLElement>();
-
-	const elementIndex = $derived.by(() => {
-		if (element) {
-			const children = [...(element?.parentElement?.children ?? [])];
-			return children.indexOf(element);
-		}
-
-		return -1;
-	});
-
-	const column = $derived(bond.state.columns.values().find((col) => col.index === elementIndex));
-
-	const isHidden = $derived(column?.state.props.hidden ?? false);
-
-	function onclick_(ev: Event) {
-		onclick?.(ev, { td: bond as unknown as DataGridTdBond<D> });
-
-		if (!ev.defaultPrevented) {
-			//
-		}
-	}
-</script>
-
-{#if !isHidden}
-	<HtmlAtom
-		{@attach (node) => {
-			element = node;
-		}}
-		{bond}
-		preset="datagrid.td"
-		class={['border-border flex h-full items-center py-2 text-left', '$preset', klass]}
-		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_}
-		{...restProps}
-	>
-		{@render children?.({ td: bond as unknown as DataGridTdBond<D> })}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="D,E extends HtmlElementTagName, B extends Base = Base">
+	import { DataGridBond } from '../bond.svelte';
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { HtmlElementTagName } from '../../element';
+	import type { DataGridTdBond } from './bond.svelte';
+	export type { DatagridTdProps } from '../types';
+
+	const bond = DataGridBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridTdProps<D, E, B> = $props();
+
+	let element = $state<HTMLElement>();
+
+	const elementIndex = $derived.by(() => {
+		if (element) {
+			const children = [...(element?.parentElement?.children ?? [])];
+			return children.indexOf(element);
+		}
+
+		return -1;
+	});
+
+	const column = $derived(bond.state.columns.values().find((col) => col.index === elementIndex));
+
+	const isHidden = $derived(column?.state.props.hidden ?? false);
+
+	function onclick_(ev: Event) {
+		onclick?.(ev, { td: bond as unknown as DataGridTdBond<D> });
+
+		if (!ev.defaultPrevented) {
+			//
+		}
+	}
+</script>
+
+{#if !isHidden}
+	<HtmlAtom
+		{@attach (node) => {
+			element = node;
+		}}
+		{bond}
+		preset="datagrid.td"
+		class={['border-border flex h-full items-center py-2 text-left', '$preset', klass]}
+		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_}
+		{...restProps}
+	>
+		{@render children?.({ td: bond as unknown as DataGridTdBond<D> })}
+	</HtmlAtom>
+{/if}

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

@@ -1,106 +1,106 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base } from '../../atom';
-	import { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
-	import type { DatagridContext } from '../context';
-	import type { DatagridThProps } from '../types';
-
-	let {
-		class: klass = '',
-		id = nanoid(),
-		width = '1fr',
-		direction = 'asc',
-		screen = undefined,
-		hidden = false,
-		sortable = undefined,
-		factory = _factory,
-		children = undefined,
-		onclick = undefined,
-		onsort = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridThProps = $props();
-
-	const bond = factory().share();
-
-	const isSortable = $derived(bond.state.isSortable);
-	// const directionAsNumber = $derived(+(direction === 'asc'));
-
-	const unmount = bond.mount();
-
-	$effect(() => unmount);
-
-	function _factory() {
-		const bondProps = defineState<DataGridThBondProps>([
-			defineProperty('id', () => id),
-			defineProperty('width', () => width),
-			defineProperty('sortable', () => sortable),
-			defineProperty('hidden', () => hidden),
-			defineProperty('direction', () => direction)
-		]);
-
-		const bondState = new DataGridThBondState(() => bondProps);
-		return new DataGridThBond(bondState);
-	}
-
-	function onclick_(ev: Event) {
-		onclick?.(ev as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
-
-		if (!ev.defaultPrevented) {
-			if (!isSortable) {
-				return;
-			}
-
-			if (isSortable) {
-				if (direction === 'asc') {
-					direction = 'desc';
-				} else {
-					direction = 'asc';
-				}
-			} else {
-				if (!(typeof sortable === 'boolean')) {
-					// sortby_columns[value] = column;
-				}
-			}
-
-			onsort?.(new CustomEvent('sort'), {
-				field: typeof sortable === 'boolean' ? undefined : sortable,
-				direction
-			});
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-{#if !hidden}
-	<HtmlAtom
-		{@attach (node) => {
-			bond.elements.root = node;
-		}}
-		{bond}
-		preset="datagrid.th"
-		class={[
-			'border-border flex cursor-pointer py-1 font-medium select-none',
-			!!sortable && 'sortable',
-			'$preset',
-			klass
-		]}
-		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.props()}
-		{...restProps}
-	>
-		{@render children?.({ th: bond as unknown as DatagridContext })}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
+	import type { DatagridContext } from '../context';
+	import type { DatagridThProps } from '../types';
+
+	let {
+		class: klass = '',
+		id = nanoid(),
+		width = '1fr',
+		direction = 'asc',
+		screen = undefined,
+		hidden = false,
+		sortable = undefined,
+		factory = _factory,
+		children = undefined,
+		onclick = undefined,
+		onsort = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridThProps = $props();
+
+	const bond = factory().share();
+
+	const isSortable = $derived(bond.state.isSortable);
+	// const directionAsNumber = $derived(+(direction === 'asc'));
+
+	const unmount = bond.mount();
+
+	$effect(() => unmount);
+
+	function _factory() {
+		const bondProps = defineState<DataGridThBondProps>([
+			defineProperty('id', () => id),
+			defineProperty('width', () => width),
+			defineProperty('sortable', () => sortable),
+			defineProperty('hidden', () => hidden),
+			defineProperty('direction', () => direction)
+		]);
+
+		const bondState = new DataGridThBondState(() => bondProps);
+		return new DataGridThBond(bondState);
+	}
+
+	function onclick_(ev: Event) {
+		onclick?.(ev as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
+
+		if (!ev.defaultPrevented) {
+			if (!isSortable) {
+				return;
+			}
+
+			if (isSortable) {
+				if (direction === 'asc') {
+					direction = 'desc';
+				} else {
+					direction = 'asc';
+				}
+			} else {
+				if (!(typeof sortable === 'boolean')) {
+					// sortby_columns[value] = column;
+				}
+			}
+
+			onsort?.(new CustomEvent('sort'), {
+				field: typeof sortable === 'boolean' ? undefined : sortable,
+				direction
+			});
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if !hidden}
+	<HtmlAtom
+		{@attach (node) => {
+			bond.elements.root = node;
+		}}
+		{bond}
+		preset="datagrid.th"
+		class={[
+			'border-border flex cursor-pointer py-1 font-medium select-none',
+			!!sortable && 'sortable',
+			'$preset',
+			klass
+		]}
+		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.props()}
+		{...restProps}
+	>
+		{@render children?.({ th: bond as unknown as DatagridContext })}
+	</HtmlAtom>
+{/if}