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

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

@@ -1,103 +1,88 @@
-<script module lang="ts">
-	export type DatagridTrProps<
-		D,
-		E extends HtmlElementTagName,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		class?: string;
-		value?: string;
-		rows?: string;
-		data?: D;
-		factory?: Factory<DataGridTrBond<D>>;
-		children?: Snippet<[{ tr: DatagridContext<D> }]>;
-		onclick?: (ev: Event, options: { tr?: DatagridContext<D> }) => void;
-	};
-</script>
-
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import { untrack, type Snippet } from 'svelte';
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../../utils';
-	import { DataGridTrBond, DataGridTrBondState, type DataGridTrBondProps } from './bond.svelte';
-	import { getDatagridHeaderContext, type DatagridContext } from '../context';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-	import type { HtmlElementTagName } from '../../element';
-	import type { Factory } from '../../../types';
-	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/5 active:bg-foreground/10 transition-colors duration-100 last:border-b-0',
-		isHeader && 'header-tr',
-		isSelected && 'bg-foreground/3',
-		'$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/tr/datagrid-tr.svelte.d.ts

@@ -1,22 +1,6 @@
-export type DatagridTrProps<D, E extends HtmlElementTagName, B extends Base = Base> = HtmlAtomProps<E, B> & {
-    class?: string;
-    value?: string;
-    rows?: string;
-    data?: D;
-    factory?: Factory<DataGridTrBond<D>>;
-    children?: Snippet<[{
-        tr: DatagridContext<D>;
-    }]>;
-    onclick?: (ev: Event, options: {
-        tr?: DatagridContext<D>;
-    }) => void;
-};
-import { type Snippet } from 'svelte';
-import { DataGridTrBond } from './bond.svelte';
-import { type DatagridContext } from '../context';
-import { type HtmlAtomProps, type Base } from '../../atom';
+import { type Base } from '../../atom';
 import type { HtmlElementTagName } from '../../element';
-import type { Factory } from '../../../types';
+import type { DatagridTrProps } from '../types';
 import './datagrid-tr.css';
 declare function $$render<T, E extends HtmlElementTagName, B extends Base = Base>(): {
     props: DatagridTrProps<T, E, B>;

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

@@ -1,24 +1,70 @@
 import type { Snippet } from 'svelte';
 import type { DataGridBond } from './bond.svelte';
 import type { CheckboxProps } from '../checkbox/types';
-export type DatagridContext<T = unknown> = DataGridBond<T> | {
+import type { Factory } from '../../types';
+import type { DataGridTrBond } from './tr/bond.svelte';
+import type { DataGridThBond } from './th/bond.svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlElementTagName } from '../element';
+import type { Override } from '../../types';
+/**
+ * Extend this interface to add custom datagrid root properties in your application.
+ */
+export interface DatagridRootExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid header properties in your application.
+ */
+export interface DatagridHeaderExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid body properties in your application.
+ */
+export interface DatagridBodyExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid footer properties in your application.
+ */
+export interface DatagridFooterExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid th properties in your application.
+ */
+export interface DatagridThExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid td properties in your application.
+ */
+export interface DatagridTdExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid checkbox properties in your application.
+ */
+export interface DatagridCheckboxExtendProps {
+}
+/**
+ * Extend this interface to add custom datagrid tr properties in your application.
+ */
+export interface DatagridTrExtendProps {
+}
+export interface DatagridContext<T = unknown> extends DataGridBond<T> {
     [key: string]: unknown;
-};
+}
 export type Direction = 'asc' | 'desc';
-export type Row<T = unknown> = {
+export interface Row<T = unknown> {
     value: string;
     data: T;
-};
-export type SelectedRows<T = unknown> = {
+}
+export interface SelectedRows<T = unknown> {
     [id: string]: T;
-};
+}
 export type SortableType = string | (<T>(d: T) => string | number | boolean | Date);
-export type SortBy = {
+export interface SortBy {
     id: string;
     direction: Direction;
     by?: SortableType;
-};
-export type Column = {
+}
+export interface Column {
     id: string;
     name: () => string;
     index: () => number;
@@ -27,8 +73,8 @@ export type Column = {
     screen?: string;
     width?: string;
     hidden: () => boolean;
-};
-export type DatagridRootProps<T> = {
+}
+export interface DatagridRootProps<T> extends DatagridRootExtendProps {
     class?: string;
     template?: string;
     values?: string[];
@@ -37,42 +83,43 @@ export type DatagridRootProps<T> = {
     children?: Snippet<[{
         context: DatagridContext<T>;
     }]>;
-};
-export type DatagridHeaderProps<T> = {
+}
+export interface DatagridHeaderProps<T> extends DatagridHeaderExtendProps {
     class?: string;
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext<T>;
     }]>;
-};
-export type DatagridBodyProps<T> = {
+}
+export interface DatagridBodyProps<T, E extends HtmlElementTagName = 'div', B extends Base = Base> extends DatagridBodyExtendProps {
     class?: string;
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext<T>;
     }]>;
-};
-export type DatagridFooterProps<T> = {
+}
+export interface DatagridFooterProps<T> extends DatagridFooterExtendProps {
     class?: string;
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext<T>;
     }]>;
-};
-export type DatagridThProps<T> = {
+}
+export interface DatagridThProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        th: DatagridContext<T>;
+    }]>;
+}>, DatagridThExtendProps {
+    id?: string;
     class?: string;
     width?: string;
     direction?: Direction;
     screen?: string;
     sortable?: boolean | SortableType;
-    readonly element?: HTMLElement;
-    children?: Snippet<[
-        {
-            context: DatagridContext<T>;
-        }
-    ]>;
-};
-export type DatagridTdProps<T> = {
+    hidden?: boolean;
+    factory?: () => DataGridThBond<T>;
+}
+export interface DatagridTdProps<T> extends DatagridTdExtendProps {
     class?: string;
     readonly element?: HTMLElement;
     children?: Snippet<[{
@@ -81,23 +128,24 @@ export type DatagridTdProps<T> = {
     onclick?: (ev: Event, options: {
         context?: DatagridContext<T>;
     }) => void;
-};
-export type DatagridCheckboxProps = CheckboxProps & {
+}
+export interface DatagridCheckboxProps extends Omit<CheckboxProps, 'children'>, DatagridCheckboxExtendProps {
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext;
     }]>;
-};
-export type DatagridTrProps<T> = {
+}
+export interface DatagridTrProps<T, E extends HtmlElementTagName = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        tr: DatagridContext<T>;
+    }]>;
+}>, DatagridTrExtendProps {
     class?: string;
     value?: string;
     rows?: string;
     data?: T;
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext<T>;
-    }]>;
+    factory?: Factory<DataGridTrBond<T>>;
     onclick?: (ev: Event, options: {
-        context?: DatagridContext<T>;
+        tr?: DatagridContext<T>;
     }) => void;
-};
+}

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

@@ -1,45 +1,39 @@
-<script module lang="ts">
-	export type DialogBodyProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	let {
-		class: klass,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogBodyProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const bodyProps = $derived({
-		...bond?.body({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="dialog.body"
-	class={['px-4 py-2', '$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)}
-	{...bodyProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { DialogBodyProps } from './types';
+	import { DialogBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+
+	let {
+		class: klass,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogBodyProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const bodyProps = $derived({
+		...bond?.body({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="dialog.body"
+	class={['border-border px-4 py-2', '$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)}
+	{...bodyProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

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

@@ -1,5 +1,5 @@
-export type DialogBodyProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import type { DialogBodyProps } from './types';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogBodyProps<E, B>;
     exports: {};

package/dist/components/dialog/dialog-close-button.svelte

@@ -1,61 +1,58 @@
-<script module lang="ts">
-	export type DialogCloseButtonProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
-	import { Icon } from '../icon';
-	import Close from '../../icons/icon-close.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = DialogBond.get();
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		onclick = undefined,
-		...restProps
-	}: DialogCloseButtonProps<E, B> = $props();
-
-	function onclick_(ev: MouseEvent) {
-		onclick?.(ev);
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.close();
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dialog.close-button"
-	class={['cursor-pointer', '$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}
->
-	{#if children}
-		{@render children?.()}
-	{:else}
-		<Icon>
-			<Close />
-		</Icon>
-	{/if}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import { Icon } from '../icon';
+	import Close from '../../icons/icon-close.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogCloseButtonProps } from './types';
+
+	const bond = DialogBond.get();
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		onclick = undefined,
+		...restProps
+	}: DialogCloseButtonProps<E, B> = $props();
+
+	function onclick_(ev: MouseEvent) {
+		onclick?.(ev);
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.close();
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="dialog.close-button"
+	class={['border-border cursor-pointer', '$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}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<Icon>
+			<Close />
+		</Icon>
+	{/if}
+</HtmlAtom>

package/dist/components/dialog/dialog-close-button.svelte.d.ts

@@ -1,13 +1,13 @@
-export type DialogCloseButtonProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
-declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+import { type Base } from '../atom';
+import type { DialogCloseButtonProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(): {
     props: DialogCloseButtonProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> {
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+    new <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<E, B>['exports']>;
-    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const DialogCloseButton: $$IsomorphicComponent;
-type DialogCloseButton<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DialogCloseButton<E, B>>;
+type DialogCloseButton<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> = InstanceType<typeof DialogCloseButton<E, B>>;
 export default DialogCloseButton;