#26 add case return target as simple id

Author: DavidBlaa

src/lib/components/form/DropdownKvP.svelte

@@ -9,6 +9,7 @@
 	export let invalid = false;
 	export let feedback = [''];
 	export let required = false;
+	export let targetIsComplex = false;
 
 	$: selected = null;
 
@@ -17,12 +18,26 @@
 
 	function updatedSelectedValue(selection) {
 		if (selection != null) {
-			selected = selection.id;
+			if(targetIsComplex)
+			{
+				selected = selection.id;
+			}
+			else
+			{
+				selected = selection
+			}
 		}
 	}
 
 	function updatedTarget(id) {
-		target = source.find((opt) => opt.id === id);
+		if(targetIsComplex)
+		{
+			target = source.find((opt) => opt.id === id);
+		}
+		else
+		{
+			target = id;
+		}
 	}
 </script>
 

src/lib/index.ts

@@ -55,8 +55,13 @@ export type {
 	user, 
 	Input,
 	FileUploaderModel,
-	Link
-	 } from './models/Models.js';
+	Link,
+	ListItem,
+	KvP
+	} from './models/Models.js';
+
+//enum
+export { Position	} from './models/Enums';
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

src/routes/components/form/+page.svelte

@@ -21,7 +21,7 @@
 	import InputValidationJsRaw from './examples/inputvalidation?raw';
 
 	// example 4 - validation
-	import { Metadatastructures } from './examples/exampleData';
+	import { Metadatastructures, Decimals } from './examples/exampleData';
 	import DropdownKvpExample from './examples/DropdownKVPExample.svelte';
 	import DropdownKVPExampleRaw from './examples/DropdownKVPExample.svelte?raw';
 	

src/routes/components/form/examples/DropdownKVPExample.svelte

@@ -4,6 +4,7 @@
 	import { CodeBlock } from '@skeletonlabs/skeleton';
 
 	$: target = { id: 2, text: 'gbif' };
+	$: simpleTarget = 2;
 
 	import { Metadatastructures } from './exampleData';
 
@@ -12,7 +13,23 @@
 	}
 </script>
 
+
+
 <div class="grid gap-10">
+
+	<h4 class="h4">Target is simple</h4>
+	<DropdownKvP
+		id="metadataStructure"
+		title="Metadata Structure"
+		bind:target={simpleTarget}
+		source={Metadatastructures}
+		on:change={onChangeHandler}
+		targetIsComplex = {false}
+	/>
+
+	<CodeBlock language="ts" code={JSON.stringify(simpleTarget, undefined, 2)} />
+
+	<h4 class="h4">Target is complex</h4>
 	<DropdownKvP
 		id="metadataStructure"
 		title="Structure"
@@ -22,4 +39,5 @@
 	/>
 
 	<CodeBlock language="ts" code={JSON.stringify(target, undefined, 2)} />
+
 </div>

src/routes/components/form/examples/exampleData.js

@@ -28,6 +28,18 @@ export const Datastructures = [
 	}
 ];
 
+export const Decimals = [
+	{
+		id: 44,
+		text: 'comma'
+	},
+	{
+		id: 46,
+		text: 'point'
+	}
+];
+
+
 export const CountrieNames = [
 	'United States',
 	'Canada',
@@ -515,3 +527,5 @@ export const Countries = [
 	{ name: 'Zambia', code: 'ZM' },
 	{ name: 'Zimbabwe', code: 'ZW' }
 ];
+
+