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

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,75 +1,75 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	<Root>
-		{#snippet children({ args })}
-			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-				<DataGridCmp.Header>
-					<DataGridCmp.Tr header>
-						<DataGridCmp.Th width="auto">
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Th>
-						<DataGridCmp.Th
-							class="resize-x overflow-x-auto"
-							width="auto"
-							hidden={datagridContainer.current?.width
-								? datagridContainer.current.width < 1024
-								: false}>ID</DataGridCmp.Th
-						>
-						<DataGridCmp.Th>Name</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-					</DataGridCmp.Tr>
-				</DataGridCmp.Header>
-
-				<DataGridCmp.Body>
-					{#each { length: 10 } as _, i (i)}
-						<DataGridCmp.Tr>
-							<DataGridCmp.Td>
-								<DataGridCmp.Checkbox />
-							</DataGridCmp.Td>
-
-							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-									<Icon src={MoreVerticalIcon} />
-								</Dropdown.Trigger>
-								<Dropdown.List>
-									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-									<Dropdown.Item value="en">English</Dropdown.Item>
-									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-								</Dropdown.List>
-							</DataGridCmp.Td>
-						</DataGridCmp.Tr>
-					{/each}
-				</DataGridCmp.Body>
-
-				<DataGridCmp.Footer></DataGridCmp.Footer>
-			</DataGridCmp.Root>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import { DataGrid as DataGridCmp } from '.';
+	import { Dropdown } from '../dropdown';
+	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
+	import { Icon } from '../icon';
+	import { container } from '../../runes/container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/DataGrid'
+	});
+</script>
+
+<script>
+	let values = $state([]);
+
+	const datagridContainer = container();
+</script>
+
+<Story name="DataGrid">
+	<Root>
+		{#snippet children({ args })}
+			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
+				<DataGridCmp.Header>
+					<DataGridCmp.Tr header>
+						<DataGridCmp.Th width="auto">
+							<DataGridCmp.Checkbox />
+						</DataGridCmp.Th>
+						<DataGridCmp.Th
+							class="resize-x overflow-x-auto"
+							width="auto"
+							hidden={datagridContainer.current?.width
+								? datagridContainer.current.width < 1024
+								: false}>ID</DataGridCmp.Th
+						>
+						<DataGridCmp.Th>Name</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
+					</DataGridCmp.Tr>
+				</DataGridCmp.Header>
+
+				<DataGridCmp.Body>
+					{#each { length: 10 } as _, i (i)}
+						<DataGridCmp.Tr>
+							<DataGridCmp.Td>
+								<DataGridCmp.Checkbox />
+							</DataGridCmp.Td>
+
+							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
+							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
+							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
+							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
+
+							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
+								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
+									<Icon src={MoreVerticalIcon} />
+								</Dropdown.Trigger>
+								<Dropdown.List>
+									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
+									<Dropdown.Item value="en">English</Dropdown.Item>
+									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
+									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
+								</Dropdown.List>
+							</DataGridCmp.Td>
+						</DataGridCmp.Tr>
+					{/each}
+				</DataGridCmp.Body>
+
+				<DataGridCmp.Footer></DataGridCmp.Footer>
+			</DataGridCmp.Root>
+		{/snippet}
+	</Root>
+</Story>

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

@@ -1,80 +1,66 @@
-<script module lang="ts">
-	export type DatagridTdProps<
-		D,
-		E extends HtmlElementTagName,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		value?: string;
-		rows?: string;
-		data?: D;
-		children?: Snippet<[{ td?: DataGridTdBond<D> }]>;
-		onclick?: (ev: Event, options: { td?: DataGridTdBond<D> }) => void;
-	};
-</script>
-
-<script lang="ts" generics="D,E extends HtmlElementTagName, B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import type { DataGridTdBond } from './bond.svelte';
-	import { DataGridBond } from '../bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-
-	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={['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/td/datagrid-td.svelte.d.ts

@@ -1,21 +1,10 @@
-export type DatagridTdProps<D, E extends HtmlElementTagName, B extends Base = Base> = HtmlAtomProps<E, B> & {
-    value?: string;
-    rows?: string;
-    data?: D;
-    children?: Snippet<[{
-        td?: DataGridTdBond<D>;
-    }]>;
-    onclick?: (ev: Event, options: {
-        td?: DataGridTdBond<D>;
-    }) => void;
-};
-import type { Snippet } from 'svelte';
-import type { DataGridTdBond } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
 import type { HtmlElementTagName } from '../../element';
 declare function $$render<D, E extends HtmlElementTagName, B extends Base = Base>(): {
     props: DatagridTdProps<D, E, B>;
-    exports: {};
+    exports: {
+        DatagridTdProps: typeof DatagridTdProps;
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -25,7 +14,9 @@ declare class __sveltets_Render<D, E extends HtmlElementTagName, B extends Base
     events(): ReturnType<typeof $$render<D, E, B>>['events'];
     slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        DatagridTdProps: typeof DatagridTdProps;
+    };
 }
 interface $$IsomorphicComponent {
     new <D, E extends HtmlElementTagName, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<D, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<D, E, B>['props']>, ReturnType<__sveltets_Render<D, E, B>['events']>, ReturnType<__sveltets_Render<D, E, B>['slots']>> & {

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

@@ -34,7 +34,7 @@
 	<HtmlAtom
 		{bond}
 		preset="datagrid.sort-icon"
-		class={['$preset', klass]}
+		class={['border-border', '$preset', klass]}
 		enter={enter?.bind(bond.state)}
 		exit={exit?.bind(bond.state)}
 		initial={initial?.bind(bond.state)}

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

@@ -1,127 +1,106 @@
-<script module lang="ts">
-	export type DatagridThProps = HtmlAtomProps<'div'> & {
-		id?: string;
-		class?: string;
-		width?: string;
-		direction?: Direction;
-		screen?: string;
-		sortable?: boolean | SortableType;
-		hidden?: boolean;
-		factory?: () => DataGridThBond<unknown>;
-		children?: Snippet<
-			[
-				{
-					th: DatagridContext;
-				}
-			]
-		>;
-	};
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
-	import type { Direction, SortableType } from '../../../types';
-	import type { DatagridContext } from '../context';
-	import { defineProperty, defineState } from '../../../utils';
-	import { HtmlAtom, type Base, type HtmlAtomProps } from '../../atom';
-
-	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={[
-			'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}

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

@@ -1,23 +1,5 @@
-export type DatagridThProps = HtmlAtomProps<'div'> & {
-    id?: string;
-    class?: string;
-    width?: string;
-    direction?: Direction;
-    screen?: string;
-    sortable?: boolean | SortableType;
-    hidden?: boolean;
-    factory?: () => DataGridThBond<unknown>;
-    children?: Snippet<[
-        {
-            th: DatagridContext;
-        }
-    ]>;
-};
-import type { Snippet } from 'svelte';
-import { DataGridThBond } from './bond.svelte';
-import type { Direction, SortableType } from '../../../types';
-import type { DatagridContext } from '../context';
-import { type Base, type HtmlAtomProps } from '../../atom';
+import { type Base } from '../../atom';
+import type { DatagridThProps } from '../types';
 declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
     props: DatagridThProps;
     exports: {};

package/dist/components/datagrid/tr/bond.svelte.d.ts

@@ -1,5 +1,5 @@
-import { DataGridBond } from '../bond.svelte';
 import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
 export type DataGridTrBondProps<T = unknown> = BondStateProps & {
     value?: string;
     header?: boolean;
@@ -17,6 +17,8 @@ export declare class DataGridTrBond<T, Props extends DataGridTrBondProps<T> = Da
     unmount(): void;
     root(props?: Record<string, unknown>): {
         'data-kind': string;
+        'data-header': string | undefined;
+        'data-selected': string | undefined;
     };
     static get(): DataGridTrBond | undefined;
     static set(bond: DataGridTrBond): DataGridTrBond;

package/dist/components/datagrid/tr/bond.svelte.js

@@ -1,7 +1,7 @@
-import { createAttachmentKey } from 'svelte/attachments';
 import { getContext, setContext } from 'svelte';
-import { DataGridBond } from '../bond.svelte';
+import { createAttachmentKey } from 'svelte/attachments';
 import { Bond, BondState } from '../../../shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
 const DATAGRID_TR_ELEMENTS_KIND = {
     root: 'datagrid-tr'
 };
@@ -29,6 +29,8 @@ export class DataGridTrBond extends Bond {
     root(props = {}) {
         return {
             'data-kind': DATAGRID_TR_ELEMENTS_KIND.root,
+            'data-header': this.state.isHeader ? 'true' : undefined,
+            'data-selected': this.state.isSelected ? 'true' : undefined,
             ...props,
             [createAttachmentKey()]: (node) => {
                 this.elements.root = node;