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

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

@@ -1,66 +1,54 @@
-<script module lang="ts">
-	export type TreeHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		class?: string;
-		open?: boolean;
-		disabled?: boolean;
-		children?: Snippet<[{ tree: TreeBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import { TreeBond } from './bond.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = TreeBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onpointerdown = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TreeHeaderProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-
-	function handlePointerDown(ev: PointerEvent) {
-		onpointerdown?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.toggle();
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tree.header"
-	class={['cursor-pointer', '$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)}
-	onpointerdown={handlePointerDown}
-	{...headerProps}
->
-	{@render children?.({ tree: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import { TreeBond } from './bond.svelte';
+	import type { TreeHeaderProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = TreeBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onpointerdown = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TreeHeaderProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+
+	function handlePointerDown(ev: PointerEvent) {
+		onpointerdown?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.toggle();
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tree.header"
+	class={['border-border cursor-pointer', '$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)}
+	onpointerdown={handlePointerDown}
+	{...headerProps}
+>
+	{@render children?.({ tree: bond })}
+</HtmlAtom>

package/dist/components/tree/tree-header.svelte.d.ts

@@ -1,38 +1,12 @@
-export type TreeHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    class?: string;
-    open?: boolean;
-    disabled?: boolean;
-    children?: Snippet<[{
-        tree: TreeBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 import { TreeBond } from './bond.svelte';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
+    props: import("../atom").HtmlAtomProps<E, B> & import("./types").TreeHeaderExtendProps & {
         class?: string;
         open?: boolean;
         disabled?: boolean;
-        children?: Snippet<[{
+        children?: import("svelte").Snippet<[{
             tree: TreeBond;
         }]>;
     } & HTMLAttributes<HTMLElementTagNameMap[E]>;

package/dist/components/tree/tree-indicator.svelte

@@ -1,50 +1,40 @@
-<script lang="ts" module>
-	export type CollapsibleHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> &
-		TreeBondProps & {
-			children?: Snippet<[{ tree?: TreeBond }]>;
-		};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { TreeBond, type TreeBondProps } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = TreeBond.get();
-
-	let {
-		open = $bindable(false),
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleHeaderProps<E, B> = $props();
-
-	const indicatorProps = $derived({
-		...bond?.indicator(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tree.indicator"
-	class={['aspect-square h-fit', '$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)}
-	{...indicatorProps}
->
-	{@render children?.({ tree: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { TreeBond } from './bond.svelte';
+	import type { TreeIndicatorProps } from './types';
+
+	const bond = TreeBond.get();
+
+	let {
+		open = $bindable(false),
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TreeIndicatorProps<E, B> = $props();
+
+	const indicatorProps = $derived({
+		...bond?.indicator(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tree.indicator"
+	class={['border-border aspect-square h-fit', '$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)}
+	{...indicatorProps}
+>
+	{@render children?.({ tree: bond })}
+</HtmlAtom>

package/dist/components/tree/tree-indicator.svelte.d.ts

@@ -1,13 +1,7 @@
-export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBondProps & {
-    children?: Snippet<[{
-        tree?: TreeBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { TreeBond, type TreeBondProps } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { TreeIndicatorProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: CollapsibleHeaderProps<E, B>;
+    props: TreeIndicatorProps<E, B>;
     exports: {};
     bindings: "open";
     slots: {};

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

@@ -1,80 +1,65 @@
-<script module lang="ts">
-	import type { Factory } from '../../types';
-
-	export type TreeRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		class?: string;
-		open?: boolean;
-		disabled?: boolean;
-		factory?: Factory<TreeBond>;
-		children?: Snippet<[{ tree: TreeBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		class: klass = '',
-		children = undefined,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TreeRootProps<E, B> = $props();
-
-	const bondProps = defineState<TreeBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			)
-		],
-		() => ({ disabled })
-	);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new TreeBondState(() => props);
-		return new TreeBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tree"
-	class={['flex flex-col', '$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?.({ tree: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
+	import type { TreeRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		class: klass = '',
+		children = undefined,
+		factory = _factory,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TreeRootProps<E, B> = $props();
+
+	const bondProps = defineState<TreeBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			)
+		],
+		() => ({ disabled })
+	);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new TreeBondState(() => props);
+		return new TreeBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tree"
+	class={['border-border flex flex-col', '$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?.({ tree: bond })}
+</HtmlAtom>

package/dist/components/tree/tree-root.svelte.d.ts

@@ -1,16 +1,6 @@
-import type { Factory } from '../../types';
-export type TreeRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    class?: string;
-    open?: boolean;
-    disabled?: boolean;
-    factory?: Factory<TreeBond>;
-    children?: Snippet<[{
-        tree: TreeBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
+import { type Base } from '../atom';
 import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
+import type { TreeRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: TreeRootProps<E, B>;
     exports: {

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

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { TreeBond, TreeBondProps } from './bond.svelte';
+/**
+ * tree root properties
+ */
+export interface TreeRootExtendProps {
+}
+export type TreeRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeRootExtendProps & {
+    class?: string;
+    open?: boolean;
+    value?: string;
+    data?: any;
+    disabled?: boolean;
+    factory?: Factory<TreeBond>;
+    children?: Snippet<[{
+        tree: TreeBond;
+    }]>;
+};
+/**
+ * tree header properties
+ */
+export interface TreeHeaderExtendProps {
+}
+export type TreeHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeHeaderExtendProps & {
+    class?: string;
+    open?: boolean;
+    disabled?: boolean;
+    children?: Snippet<[{
+        tree: TreeBond;
+    }]>;
+};
+/**
+ * tree body properties
+ */
+export interface TreeBodyExtendProps {
+}
+export type TreeBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBodyExtendProps & {
+    open?: boolean;
+    disabled?: boolean;
+    children?: Snippet<[{
+        tree?: TreeBond;
+    }]>;
+};
+/**
+ * tree indicator properties
+ */
+export interface TreeIndicatorExtendProps {
+}
+export type TreeIndicatorProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TreeBondProps & TreeIndicatorExtendProps & {
+    children?: Snippet<[{
+        tree?: TreeBond;
+    }]>;
+};
+/**
+ * @deprecated Use TreeRootExtendProps instead
+ */
+export type TreeExtendProps = TreeRootExtendProps;

package/dist/components/tree/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+/**
+ * Extend this interface to add custom virtual list properties in your application.
+ */
+export interface VirtualListViewportExtendProps {
+}
+export interface VirtualListViewportProps<T> extends VirtualListViewportExtendProps {
+    class?: string;
+    data: T[];
+    itemHeight?: number;
+    overscan?: number;
+    onScroll?: (scrollTop: number) => void;
+    scrollToIndex?: number;
+    header?: Snippet;
+    children: Snippet<[
+        {
+            items: {
+                index: number;
+                data: T;
+            }[];
+        }
+    ]>;
+}

package/dist/components/virtual/types.js

@@ -0,0 +1 @@
+export {};