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

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

@@ -1,66 +1,66 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { nanoid } from 'nanoid';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
-	import type { CollapsibleRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		class: klass = '',
-		value = nanoid(),
-		data = undefined,
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleRootProps<E, B> = $props();
-
-	const bondProps = defineState<CollapsibleStateProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => (open = v)
-		),
-		defineProperty('data', () => data),
-		defineProperty('disabled', () => disabled),
-		defineProperty('value', () => value)
-	]);
-
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new CollapsibleState(() => props);
-		return new CollapsibleBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="collapsible"
-	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...rootProps}
->
-	{@render children?.({ collapsible: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte';
+	import type { CollapsibleRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		class: klass = '',
+		value = nanoid(),
+		data = undefined,
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CollapsibleRootProps<E, B> = $props();
+
+	const bondProps = defineState<CollapsibleStateProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => (open = v)
+		),
+		defineProperty('data', () => data),
+		defineProperty('disabled', () => disabled),
+		defineProperty('value', () => value)
+	]);
+
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new CollapsibleState(() => props);
+		return new CollapsibleBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="collapsible"
+	class={['border-border flex w-full flex-col overflow-hidden', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...rootProps}
+>
+	{@render children?.({ collapsible: bond })}
+</HtmlAtom>

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

@@ -1,65 +1,65 @@
-<script lang="ts" generics="D">
-	import type { ComboboxRootProps } from './types';
-	import { defineProperty, defineState } from '../../utils';
-	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(),
-		values = $bindable(),
-		query = $bindable(),
-		text = $bindable(),
-		multiple = false,
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 4,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: ComboboxRootProps = $props();
-
-	const bondProps = defineState<ComboboxBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'values',
-				() => (multiple ? values : [value]),
-				(v) => {
-					values = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'query',
-				() => query,
-				(v) => (query = v)
-			),
-			defineProperty(
-				'text',
-				() => text,
-				(v) => (text = v)
-			)
-		],
-		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new ComboboxBondState<D>(() => props);
-
-		return new ComboboxBond(bondState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ combobox: bond })}
+<script lang="ts" generics="D">
+	import type { ComboboxRootProps } from './types';
+	import { defineProperty, defineState } from '../../utils';
+	import { ComboboxBond, ComboboxBondState, type ComboboxBondProps } from './bond.svelte';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		values = $bindable(),
+		query = $bindable(),
+		text = $bindable(),
+		multiple = false,
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 4,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: ComboboxRootProps = $props();
+
+	const bondProps = defineState<ComboboxBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'values',
+				() => (multiple ? values : [value]),
+				(v) => {
+					values = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'query',
+				() => query,
+				(v) => (query = v)
+			),
+			defineProperty(
+				'text',
+				() => text,
+				(v) => (text = v)
+			)
+		],
+		() => ({ disabled, multiple, placements, offset, placement: 'bottom-start', ...restProps })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new ComboboxBondState<D>(() => props);
+
+		return new ComboboxBond(bondState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ combobox: bond })}

package/dist/components/container/container.stories.svelte.d.ts

@@ -4,7 +4,7 @@ type Container = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: string;
 };
 declare const Container: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

package/dist/components/contextmenu/contextmenu-trigger.svelte.d.ts

@@ -4,7 +4,7 @@ type ContextmenuTrigger = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: string;
 };
 declare const ContextmenuTrigger: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

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

@@ -28,8 +28,8 @@ export declare class DataGridBondState<T> extends BondState<DataGridStateProps<T
     get rows(): Map<string, DataGridTrBond<T, import("./tr").DataGridTrBondProps<T>, import("./tr").DataGridTrBondState<T, import("./tr").DataGridTrBondProps<T>>, import("./tr").DataGridTrBondElements>>;
     get columns(): Map<string, DataGridThBond<T>>;
     get selectedRows(): DataGridTrBond<T, import("./tr").DataGridTrBondProps<T>, import("./tr").DataGridTrBondState<T, import("./tr").DataGridTrBondProps<T>>, import("./tr").DataGridTrBondElements>[];
-    get sortableColumns(): IteratorObject<DataGridThBond<T>, undefined, unknown>;
-    get template(): string;
+    get sortableColumns(): any;
+    get template(): any;
     mountColumn(id: string, item: DataGridThBond<T>): () => void;
     unmountColumn(id: string): void;
     mountRow(id: string, item: DataGridTrBond<T>): () => void;

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

@@ -1,37 +1,37 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import type { DatagridBodyProps } from './types';
-	import { DataGridBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName } from '../element';
-	export type { HtmlElementTagName } from '../element';
-	export type { DatagridBodyProps } from './types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridBodyProps<T, E, B> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.body"
-	class={['border-border', '$preset', klass, 'contents']}
-	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, E extends HtmlElementTagName, B extends Base = Base">
+	import type { DatagridBodyProps } from './types';
+	import { DataGridBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName } from '../element';
+	export type { HtmlElementTagName } from '../element';
+	export type { DatagridBodyProps } from './types';
+
+	const bond = DataGridBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridBodyProps<T, E, B> = $props();
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.body"
+	class={['border-border', '$preset', klass, 'contents']}
+	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-checkbox.svelte

@@ -1,101 +1,101 @@
-<script lang="ts">
-	import { Checkbox } from '../checkbox';
-	import type { DatagridCheckboxProps } from './types';
-	import { DataGridBond } from './bond.svelte';
-	import { DataGridTrBond } from './tr/bond.svelte';
-	export type { DatagridCheckboxProps } from './types';
-
-	const datagridBond = DataGridBond.get();
-	const datagridTrBond = DataGridTrBond.get();
-
-	let {
-		class: klass = '',
-		value = undefined,
-		checked = $bindable(false),
-		onclick = undefined,
-		onchange = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridCheckboxProps = $props();
-
-	const id = $derived(datagridTrBond.state.id);
-
-	const isAllRowsSelected = $derived(
-		datagridBond.state.selectedRows.length > 0 &&
-			datagridBond.state.rows.size === datagridBond.state.selectedRows.length
-	);
-
-	const isHeaderRow = $derived(datagridTrBond?.state.isHeader);
-
-	const classNames = $derived(['datagrid-td-checkbox', '$preset', klass]);
-
-	function handleInputTd(ev: Event, { checked = false }) {
-		onchange?.(ev, { checked });
-
-		if (!ev.defaultPrevented) {
-			//
-			if (checked) {
-				datagridBond.state.select([id]);
-			} else {
-				datagridBond.state.unselect([id]);
-			}
-		}
-	}
-
-	function handleInputTh(ev: Event, { checked = false }) {
-		onchange?.(ev, { checked });
-
-		if (!ev.defaultPrevented) {
-			const allRows = datagridBond.state.rows.keys().toArray();
-
-			if (checked) {
-				datagridBond.state.select(allRows);
-			} else {
-				datagridBond.state.unselect(allRows);
-			}
-		}
-	}
-</script>
-
-{#if isHeaderRow}
-	<!-- content here -->
-	<Checkbox
-		{value}
-		{onclick}
-		bond={datagridTrBond}
-		preset="datagrid.checkbox"
-		class={classNames}
-		checked={isAllRowsSelected}
-		enter={enter?.bind(datagridTrBond)}
-		exit={exit?.bind(datagridTrBond)}
-		initial={initial?.bind(datagridTrBond)}
-		animate={animate?.bind(datagridTrBond)}
-		onmount={onmount?.bind(datagridTrBond)}
-		ondestroy={ondestroy?.bind(datagridTrBond)}
-		oninput={handleInputTh}
-		{...restProps}
-	/>
-{:else}
-	<!-- else content here -->
-	<Checkbox
-		{value}
-		{onclick}
-		bond={datagridTrBond}
-		preset="datagrid.checkbox"
-		class={classNames}
-		checked={datagridTrBond.state.isSelected}
-		enter={enter?.bind(datagridTrBond)}
-		exit={exit?.bind(datagridTrBond)}
-		initial={initial?.bind(datagridTrBond)}
-		animate={animate?.bind(datagridTrBond)}
-		onmount={onmount?.bind(datagridTrBond)}
-		ondestroy={ondestroy?.bind(datagridTrBond)}
-		oninput={handleInputTd}
-		{...restProps}
-	/>
-{/if}
+<script lang="ts">
+	import { Checkbox } from '../checkbox';
+	import type { DatagridCheckboxProps } from './types';
+	import { DataGridBond } from './bond.svelte';
+	import { DataGridTrBond } from './tr/bond.svelte';
+	export type { DatagridCheckboxProps } from './types';
+
+	const datagridBond = DataGridBond.get();
+	const datagridTrBond = DataGridTrBond.get();
+
+	let {
+		class: klass = '',
+		value = undefined,
+		checked = $bindable(false),
+		onclick = undefined,
+		onchange = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridCheckboxProps = $props();
+
+	const id = $derived(datagridTrBond.state.id);
+
+	const isAllRowsSelected = $derived(
+		datagridBond.state.selectedRows.length > 0 &&
+			datagridBond.state.rows.size === datagridBond.state.selectedRows.length
+	);
+
+	const isHeaderRow = $derived(datagridTrBond?.state.isHeader);
+
+	const classNames = $derived(['datagrid-td-checkbox', '$preset', klass]);
+
+	function handleInputTd(ev: Event, { checked = false }) {
+		onchange?.(ev, { checked });
+
+		if (!ev.defaultPrevented) {
+			//
+			if (checked) {
+				datagridBond.state.select([id]);
+			} else {
+				datagridBond.state.unselect([id]);
+			}
+		}
+	}
+
+	function handleInputTh(ev: Event, { checked = false }) {
+		onchange?.(ev, { checked });
+
+		if (!ev.defaultPrevented) {
+			const allRows = datagridBond.state.rows.keys().toArray();
+
+			if (checked) {
+				datagridBond.state.select(allRows);
+			} else {
+				datagridBond.state.unselect(allRows);
+			}
+		}
+	}
+</script>
+
+{#if isHeaderRow}
+	<!-- content here -->
+	<Checkbox
+		{value}
+		{onclick}
+		bond={datagridTrBond}
+		preset="datagrid.checkbox"
+		class={classNames}
+		checked={isAllRowsSelected}
+		enter={enter?.bind(datagridTrBond)}
+		exit={exit?.bind(datagridTrBond)}
+		initial={initial?.bind(datagridTrBond)}
+		animate={animate?.bind(datagridTrBond)}
+		onmount={onmount?.bind(datagridTrBond)}
+		ondestroy={ondestroy?.bind(datagridTrBond)}
+		oninput={handleInputTh}
+		{...restProps}
+	/>
+{:else}
+	<!-- else content here -->
+	<Checkbox
+		{value}
+		{onclick}
+		bond={datagridTrBond}
+		preset="datagrid.checkbox"
+		class={classNames}
+		checked={datagridTrBond.state.isSelected}
+		enter={enter?.bind(datagridTrBond)}
+		exit={exit?.bind(datagridTrBond)}
+		initial={initial?.bind(datagridTrBond)}
+		animate={animate?.bind(datagridTrBond)}
+		onmount={onmount?.bind(datagridTrBond)}
+		ondestroy={ondestroy?.bind(datagridTrBond)}
+		oninput={handleInputTd}
+		{...restProps}
+	/>
+{/if}

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

@@ -1,34 +1,34 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond } from './bond.svelte';
-	import type { DatagridFooterProps } from './types';
-
-	const bond = DataGridBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridFooterProps<T> = $props();
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid.footer"
-	class={['border-border', '$preset', klass, 'contents']}
-	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 { DataGridBond } from './bond.svelte';
+	import type { DatagridFooterProps } from './types';
+
+	const bond = DataGridBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridFooterProps<T> = $props();
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.footer"
+	class={['border-border', '$preset', klass, 'contents']}
+	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>