docs: added todos for components needed docs

fix(Layout): forward all events including child components
N00nDay · Oct 14, 2022 · 8009171 · 8009171
1 parent 9c7c1a6
commit 8009171
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 9 deletions.
diff --git a/src/lib/components/grid/Col.svelte b/src/lib/components/grid/Col.svelte
@@ -29,3 +29,4 @@
 >
 	<slot />
 </div>
+<!-- TODO: add documentation -->
diff --git a/src/lib/components/grid/Row.svelte b/src/lib/components/grid/Row.svelte
@@ -63,3 +63,4 @@
 >
 	<slot />
 </div>
+<!-- TODO: add documentation -->
diff --git a/src/lib/components/icon/Icon.svelte b/src/lib/components/icon/Icon.svelte
@@ -19,3 +19,4 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}>{icon}</span
 >
+<!-- TODO: add documentation -->
diff --git a/src/lib/components/layout/Body.svelte b/src/lib/components/layout/Body.svelte
@@ -5,6 +5,11 @@
 	import { getContext } from 'svelte/internal';
 	import type { Writable } from 'svelte/store';
 	import { LAYOUT_CONTENT_CONTEXT_ID } from './Content.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -31,6 +36,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/layout/BottomNavigation.svelte b/src/lib/components/layout/BottomNavigation.svelte
@@ -7,6 +7,11 @@
 	import { useContext } from '../../utils/useContext';
 	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -22,6 +27,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/layout/BottomNavigationCreateItem.svelte b/src/lib/components/layout/BottomNavigationCreateItem.svelte
@@ -2,6 +2,11 @@
 	import { useContext } from '../../utils/useContext';
 	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { BOTTOM_NAVIGATION_CONTEXT_ID } from './BottomNavigation.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -21,7 +26,12 @@
 	export let open = false;
 </script>
 
-<div class="relative h-full w-full">
+<div
+	class="relative h-full w-full"
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class', 'style'])}
+>
 	<Button
 		on:click
 		shape="circle"

diff --git a/src/lib/components/layout/BottomNavigationItem.svelte b/src/lib/components/layout/BottomNavigationItem.svelte
@@ -11,6 +11,11 @@
 	import { useContext } from '../../utils/useContext';
 	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { BOTTOM_NAVIGATION_CONTEXT_ID } from './BottomNavigation.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -34,7 +39,12 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div on:click on:keypress class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	{#if icon}
 		<span class="relative z-10 material-icons">{icon}</span>
 	{/if}

diff --git a/src/lib/components/layout/Content.svelte b/src/lib/components/layout/Content.svelte
@@ -8,6 +8,11 @@
 	import { setContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import { writable } from 'svelte/store';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let collapsed = false;
 	export let collapsedWidth = '4.5rem';
@@ -38,6 +43,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
@@ -7,6 +7,11 @@
 	import { useContext } from '../../utils/useContext';
 	import { LAYOUT_CONTEXT_ID } from './Layout.svelte';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -22,7 +27,12 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<header class={finalClass} style={$$props.style}>
+<header
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 	<slot name="extra" />
 </header>
diff --git a/src/lib/components/layout/HeaderExtra.svelte b/src/lib/components/layout/HeaderExtra.svelte
@@ -3,6 +3,11 @@
 	import { LAYOUT_HEADER_CONTEXT_ID } from './Header.svelte';
 	import { useContext } from '../../utils/useContext';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -19,6 +24,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte
@@ -6,6 +6,11 @@
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	let sideBarWidth = writable('212');
 
@@ -27,6 +32,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
@@ -5,6 +5,11 @@
 	import { LAYOUT_CONTENT_CONTEXT_ID } from './Content.svelte';
 	import type { Writable } from 'svelte/store';
 	import { getContext } from 'svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	useContext({
 		context_id: LAYOUT_CONTEXT_ID,
@@ -32,7 +37,12 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<div
 		class="h-full flex flex-col transition-size duration-300"
 		style="width: {$collapsed ? $collapsedWidth : $expandedWidth}"
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,3 +29,4 @@ @@
     >
     	<slot />
     </div>
+    <!-- TODO: add documentation -->