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

package/dist/components/input/input-control.svelte

@@ -1,103 +1,103 @@
-<script lang="ts" generics="B extends Base = Base">
-	import { on } from '../../attachments/event.svelte';
-	import { getPreset } from '../../context';
-	import { cn, toClassValue } from '../../utils';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import type { Base } from '../atom';
-	import { InputBond } from './bond.svelte';
-	import type { InputControlProps } from './types';
-
-	const bond = InputBond.get();
-
-	let {
-		value = $bindable(),
-		files = $bindable(),
-		date = $bindable(),
-		number = $bindable(),
-		checked = $bindable(),
-		class: klass = '',
-		type = 'text',
-		preset: presetKey = 'input.control',
-		onchange = undefined,
-		oninput = undefined,
-		...restProps
-	}: InputControlProps<B> = $props();
-
-	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
-
-	const valueProps = $derived({
-		...(bond?.input?.() ?? {}),
-		...restProps
-	});
-
-	function handleChange(ev: CustomEvent) {
-		if (!onchange) return;
-
-		onchange?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function handleInput(ev: InputEvent) {
-		if (!oninput) return;
-
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-
-		if (type === 'number') {
-			number = currentTarget.valueAsNumber;
-		}
-
-		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
-			date = currentTarget.valueAsDate;
-		}
-
-		oninput?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function toFileList(files: File[]) {
-		const dataTransfer = new DataTransfer();
-		files.forEach((file) => dataTransfer.items.add(file));
-		return dataTransfer.files;
-	}
-</script>
-
-<input
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-			if (bond) {
-				bond.state.props.value = v;
-			}
-		}
-	}
-	class={cn(
-		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		preset?.class,
-		toClassValue(klass, bond)
-	)}
-	type={type ?? 'text'}
-	onchange={handleChange}
-	oninput={handleInput}
-	{...valueProps}
-	{@attach (node) => {
-		if (type === 'file') {
-			return on('input', () => {
-				files = Array.from(node.files || []);
-				bond!.state.props.files = files;
-			})(node);
-		}
-	}}
-/>
+<script lang="ts" generics="B extends Base = Base">
+	import { on } from '../../attachments/event.svelte';
+	import { getPreset } from '../../context';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import type { Base } from '../atom';
+	import { InputBond } from './bond.svelte';
+	import type { InputControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		value = $bindable(),
+		files = $bindable(),
+		date = $bindable(),
+		number = $bindable(),
+		checked = $bindable(),
+		class: klass = '',
+		type = 'text',
+		preset: presetKey = 'input.control',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputControlProps<B> = $props();
+
+	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
+
+	const valueProps = $derived({
+		...(bond?.input?.() ?? {}),
+		...restProps
+	});
+
+	function handleChange(ev: CustomEvent) {
+		if (!onchange) return;
+
+		onchange?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function handleInput(ev: InputEvent) {
+		if (!oninput) return;
+
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+
+		if (type === 'number') {
+			number = currentTarget.valueAsNumber;
+		}
+
+		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
+			date = currentTarget.valueAsDate;
+		}
+
+		oninput?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function toFileList(files: File[]) {
+		const dataTransfer = new DataTransfer();
+		files.forEach((file) => dataTransfer.items.add(file));
+		return dataTransfer.files;
+	}
+</script>
+
+<input
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) {
+				bond.state.props.value = v;
+			}
+		}
+	}
+	class={cn(
+		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	type={type ?? 'text'}
+	onchange={handleChange}
+	oninput={handleInput}
+	{...valueProps}
+	{@attach (node) => {
+		if (type === 'file') {
+			return on('input', () => {
+				files = Array.from(node.files || []);
+				bond!.state.props.files = files;
+			})(node);
+		}
+	}}
+/>

package/dist/components/label/label.svelte

@@ -1,25 +1,25 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type ElementType, type Base } from '../atom';
-	import type { LabelProps } from './types';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		as = 'label' as E,
-		for: labelfor = null,
-		children,
-		...restProps
-	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
-</script>
-
-<HtmlAtom
-	{as}
-	preset="label"
-	class={['font-medium', '$preset', klass]}
-	for={labelfor}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type ElementType, type Base } from '../atom';
+	import type { LabelProps } from './types';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		as = 'label' as E,
+		for: labelfor = null,
+		children,
+		...restProps
+	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	preset="label"
+	class={['font-medium', '$preset', klass]}
+	for={labelfor}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/lazy/index.d.ts

@@ -0,0 +1 @@
+export { default as Lazy } from './lazy.svelte';

package/dist/components/lazy/index.js

@@ -0,0 +1 @@
+export { default as Lazy } from './lazy.svelte';

package/dist/components/lazy/lazy.stories.svelte

@@ -0,0 +1,35 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Lazy'
+	});
+</script>
+
+<script lang="ts">
+	import Lazy from './lazy.svelte';
+	import { Root } from '../root';
+	import { delay } from 'es-toolkit';
+</script>
+
+<Story name="Lazy">
+	{#snippet children({ args })}
+		<Root>
+			{#snippet children({})}
+				<Lazy
+					promise={import('../button/button.svelte').then(async res=> {
+                    await delay(1000 * 5);
+
+                    return res.default;
+                })}
+				>
+					Hello World
+
+					{#snippet loading()}
+						<span>Loading...</span>
+					{/snippet}
+				</Lazy>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

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

@@ -0,0 +1,19 @@
+import Lazy from './lazy.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Lazy: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Lazy = InstanceType<typeof Lazy>;
+export default Lazy;

package/dist/components/lazy/lazy.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { LazyProps } from './types';
+
+	let { promise, children, loading, error, ...restProps }: LazyProps = $props();
+
+	let Lazy: Component | null = $state(null);
+
+	let err = $state();
+
+	promise
+		.then((c) => {
+			Lazy = c;
+		})
+		.catch((r) => {
+			err = r;
+		});
+</script>
+
+<Lazy {...restProps}>
+	{@render children?.()}
+</Lazy>
+
+{#if err && error}
+	{@render error?.()}
+{:else if !Lazy}
+	{@render loading?.()}
+{/if}

package/dist/components/lazy/lazy.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte';
+import type { LazyProps } from './types';
+declare const Lazy: Component<LazyProps, {}, "">;
+type Lazy = ReturnType<typeof Lazy>;
+export default Lazy;

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

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
+export interface LazyExtendProps {
+}
+export interface LazyProps extends HtmlAtomProps<'button'>, LazyExtendProps {
+    promise: Promise<Component>;
+    children?: Snippet;
+    error?: Snippet;
+    loading?: Snippet;
+}

package/dist/components/lazy/types.js

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

package/dist/components/menu/menu-list.svelte

@@ -1,39 +1,40 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { List } from '../list';
-	import { Content } from '../popover/atoms';
-	import type { Base } from '../atom';
-	import { PopoverBond } from '../popover';
-
-	const bond = PopoverBond.get();
-
-	let {
-		class: klass = '',
-		as = 'ul' as T,
-		base = List.Root as B,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-</script>
-
-<Content
-	{as}
-	{base}
-	{bond}
-	preset="menu.list"
-	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.()}
-</Content>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { List } from '../list';
+	import { Content } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { PopoverBond } from '../popover';
+
+	const bond = PopoverBond.get();
+
+	let {
+		class: klass = '',
+		as = 'ul' as T,
+		base = List.Root as B,
+		preset = 'menu.list',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Content
+	{as}
+	{base}
+	{bond}
+	{preset}
+	class={['bg-background border-border overflow-hidden p-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.()}
+</Content>

package/dist/components/menu/menu-list.svelte.d.ts

@@ -4,6 +4,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B exten
         class?: string;
         as?: T;
         base?: B;
+        preset?: string;
         children?: any;
         onmount?: any;
         ondestroy?: any;