make the option selection component exchangeable

ssciwr · Aug 21, 2024 · db258d9 · db258d9
1 parent a157ebb
commit db258d9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/src/lib/components/AbstractDropdown.svelte → ...onents/DataInput/AbstractDataInput.svelte b/src/lib/components/AbstractDropdown.svelte → ...onents/DataInput/AbstractDataInput.svelte
@@ -1,17 +1,17 @@
 <script>
-	import AbstractItem from './AbstractDropdownItem.svelte';
 	// @ts-nocheck
 	/**
 	 * @type {any[]}
 	 */
 	// @ts-ignore
 	export let data = [];
 	export let heading = 'dummy dropdown data';
+	export let itemComponent; // = AbstractDropdownItem;
 </script>
 
 <div class="items-center space-x-4 rtl:space-x-reverse">
 	<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
 	{#each data as data_element}
-		<AbstractItem data={data_element} />
+		<svelte:component this={itemComponent} data={data_element} />
 	{/each}
 </div>
diff --git a/...ib/components/AbstractDropdownItem.svelte → ...nts/DataInput/AbstractDropdownItem.svelte b/...ib/components/AbstractDropdownItem.svelte → ...nts/DataInput/AbstractDropdownItem.svelte
diff --git a/src/routes/firstdropdown/+page.svelte b/src/routes/firstdropdown/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
-	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
 
 	const letteroptions = ['a', 'b', 'c', 'd'];
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
@@ -31,5 +32,5 @@
 </script>
 
 <AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/nextdropdown" infoPage="/info">
-	<AbstractDropdown data={data_to_display} {heading} />
+	<AbstractDataInput data={data_to_display} {heading} itemComponent={AbstractDropdownItem} />
 </AbstractContent>
diff --git a/src/routes/nextdropdown/+page.svelte b/src/routes/nextdropdown/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import AbstractContent from '$lib/components/AbstractContent.svelte';
-	import AbstractDropdown from '$lib/components/AbstractDropdown.svelte';
+	import AbstractDropdownItem from '$lib/components/AbstractDropdownItem.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
 
 	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
 
@@ -33,9 +34,9 @@
 		}
 	];
 
-	const heading = 'the second dummy dropdown page';
+	const heading = 'the second data selection page';
 </script>
 
 <AbstractContent showBottomNavbar={true} lastPage="/firstdropdown" nextPage="/" infoPage="/info">
-	<AbstractDropdown data={dropdownData} {heading} />
+	<AbstractDataInput data={dropdownData} {heading} itemComponent={AbstractDropdownItem} />
 </AbstractContent>