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

package/dist/components/dialog/dialog.stories.svelte

@@ -1,67 +1,64 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Dialog as ADialog } from '.';
-	import { Dropdown } from '../dropdown';
-	import Root from '../root/root.svelte';
-	import { dialog } from './attachements.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Dialog',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let isDialogOpen = $state(false);
-	let isDropdownOpen = $state(false);
-</script>
-
-<Story name="Dialog" args={{}}>
-	<Root class="p-4">
-		<div class="size-10 bg-red-500"></div>
-		<button onclick={() => (isDialogOpen = !isDialogOpen)}>Open Dialog</button>
-
-		<ADialog.Root class="bg-neutral-900/20" bind:open={isDialogOpen}>
-			<ADialog.Content>
-				<ADialog.Header>
-					<div>Open Popover</div>
-					<ADialog.CloseButton class="ml-auto"></ADialog.CloseButton>
-				</ADialog.Header>
-
-				<ADialog.Body>
-					<p
-						{@attach dialog((node, atom) => {
-							console.log(atom);
-						})}
-					>
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</p>
-
-					<Dropdown.Root open={isDialogOpen && isDropdownOpen} class="w-full">
-						<Dropdown.Trigger>Hello World</Dropdown.Trigger>
-						<Dropdown.List>
-							<Dropdown.Item id="ar">Arabic</Dropdown.Item>
-							<Dropdown.Item id="en">English</Dropdown.Item>
-							<Dropdown.Item id="sp">Spanish</Dropdown.Item>
-							<Dropdown.Item id="it">Italian</Dropdown.Item>
-						</Dropdown.List>
-					</Dropdown.Root>
-				</ADialog.Body>
-
-				<ADialog.Footer class="gap-4">
-					<button onclick={() => (isDialogOpen = false)}>Cancel</button>
-					<button>Save</button>
-				</ADialog.Footer>
-			</ADialog.Content>
-		</ADialog.Root>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Dialog as ADialog } from '.';
+	import { Dropdown } from '../dropdown';
+	import { dialog } from './attachements.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Dialog',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let isDialogOpen = $state(false);
+	let isDropdownOpen = $state(false);
+</script>
+
+<Story name="Dialog" args={{}}>
+	<div class="size-10 bg-red-500"></div>
+	<button onclick={() => (isDialogOpen = !isDialogOpen)}>Open Dialog</button>
+
+	<ADialog.Root class="bg-neutral-900/20" bind:open={isDialogOpen}>
+		<ADialog.Content>
+			<ADialog.Header>
+				<div>Open Popover</div>
+				<ADialog.CloseButton class="ml-auto"></ADialog.CloseButton>
+			</ADialog.Header>
+
+			<ADialog.Body>
+				<p
+					{@attach dialog((node, atom) => {
+						console.log(atom);
+					})}
+				>
+					Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+					tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+					dolor diam nascetur.
+				</p>
+
+				<Dropdown.Root open={isDialogOpen && isDropdownOpen} class="w-full">
+					<Dropdown.Trigger>Hello World</Dropdown.Trigger>
+					<Dropdown.List>
+						<Dropdown.Item id="ar">Arabic</Dropdown.Item>
+						<Dropdown.Item id="en">English</Dropdown.Item>
+						<Dropdown.Item id="sp">Spanish</Dropdown.Item>
+						<Dropdown.Item id="it">Italian</Dropdown.Item>
+					</Dropdown.List>
+				</Dropdown.Root>
+			</ADialog.Body>
+
+			<ADialog.Footer class="gap-4">
+				<button onclick={() => (isDialogOpen = false)}>Cancel</button>
+				<button>Save</button>
+			</ADialog.Footer>
+		</ADialog.Content>
+	</ADialog.Root>
+</Story>

package/dist/components/drawer/attachments.svelte.js

@@ -65,18 +65,17 @@ export function clickoutDrawer(onclickout) {
             return;
         }
         const target = ev.target;
-        if (!bond.elements.root.contains(target)) {
-            return;
-        }
         if (bond.elements.content?.contains(target)) {
             return;
         }
+        console.log('clickoutDrawer invoked', bond.state.props.open);
         onclickout?.(ev);
-        return on('click', (ev, bond) => {
-            if (bond?.elements?.content?.contains(ev.target)) {
-                return;
-            }
-            bond?.state?.close?.();
-        }, DrawerBond.get);
+        if (ev.defaultPrevented) {
+            return;
+        }
+        bond.state.close();
+    }, {
+        capture: true,
+        passive: true
     });
 }

package/dist/components/drawer/drawer-content.svelte

@@ -1,42 +1,57 @@
-<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 type { SlideoverContentProps } from './types';
-	import { DrawerBond } from './bond.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = DrawerBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	preset="drawer.content"
-	class={['bg-card text-foreground border-border absolute', '$preset', klass]}
-	{bond}
-	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)}
-	{...contentProps}
->
-	{@render children?.({ drawer: 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 type { SlideoverContentProps } from './types';
+	import { DrawerBond } from './bond.svelte';
+	import { animate as motion } from 'motion';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const isOpen = $derived(bond?.state.props.open);
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = _initial,
+		...restProps
+	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+
+	function _initial(node: HTMLElement) {
+		motion(node, { x: isOpen ? 0 : -100 + '%', left: 0 }, { duration: 0.3, ease: 'anticipate' });
+	}
+
+	function _animate(node: HTMLElement) {
+		motion(node, { x: isOpen ? 0 : -100 + '%', left: 0 }, { duration: 0.3, ease: 'anticipate' });
+	}
+</script>
+
+<HtmlAtom
+	preset="drawer.content"
+	class={[
+		'bg-card text-foreground border-border pointer-events-none absolute',
+		isOpen && 'pointer-events-auto',
+		'$preset',
+		klass
+	]}
+	{bond}
+	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)}
+	{...contentProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>