#27 add placeholders

Author: DavidBlaa

README.md

@@ -1,4 +1,19 @@
 # bexis-core-ui
+## v.0.0.32
+### add
+#### types
+- ListItem
+- KvP
+
+#### enum
+- Position
+
+### update
+#### components
+- DropdownKVP
+  - return of the target to complex or id only 
+- TextInput, TextArea, Number
+  - add placeholder
 
 ## v0.0.31
 ### add

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.31",
+  "version": "0.1.0",
   "private": false,
   "scripts": {
     "dev": "vite dev",

src/lib/components/form/NumberInput.svelte

@@ -9,6 +9,7 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let placeholder: string = "";
 </script>
 
 <InputContainer {label} {feedback} {required}>
@@ -20,5 +21,6 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		{placeholder}
 	/>
 </InputContainer>

src/lib/components/form/TextArea.svelte

@@ -9,6 +9,7 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let placeholder: string = "";
 </script>
 
 <InputContainer {label} {feedback} {required}>
@@ -19,5 +20,6 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		{placeholder}
 	/>
 </InputContainer>

src/lib/components/form/TextInput.svelte

@@ -9,6 +9,8 @@
 	export let invalid: boolean = false;
 	export let required: boolean = false;
 	export let feedback: string[] = [''];
+	export let placeholder: string ="";
+
 </script>
 
 <InputContainer {label} {feedback} {required}>
@@ -20,5 +22,6 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		{placeholder}
 	/>
 </InputContainer>

src/lib/models/Models.ts

@@ -18,6 +18,7 @@ export interface Input {
 	invalid: boolean;
 	valid: boolean;
 	required: boolean;
+	placeholder:string;
 }
 
 export interface FileInfo {
@@ -86,3 +87,16 @@ export interface TableConfig<T> {
 	defaultPageSize?: number;
 	optionsComponent?: typeof SvelteComponent;
 }
+
+
+// lists
+export interface KvP {
+ id: number;
+ text: string;
+}
+
+export interface ListItem {
+ id: number;
+ text: string;
+ group: string;
+}

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

@@ -9,7 +9,8 @@
 		feedback: [''],
 		invalid: false,
 		valid: false,
-		required: false
+		required: false,
+		placeholder:"please enter a name of a very important people"
 	};
 </script>
 

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

@@ -6,15 +6,6 @@
 
 	import type { Input } from '$lib/models/Models';
 
-	let textInputData: Input = {
-		id: 'name',
-		label: 'Name',
-		feedback: [''],
-		invalid: false,
-		valid: false,
-		required: false
-	};
-
 	$: textInputValue = 'David';
 </script>
 
@@ -23,11 +14,11 @@
 	<div class="pt-3"><b>Value:</b> {textInputValue}</div>
 </div>
 <div class="pb-10">
-	<TextArea id="description" label="Description" required={true} />
+	<TextArea id="description" label="Description" required={true} placeholder="more details here, please" />
 </div>
 <div class="pb-10">
-	<NumberInput id="numberOf" label="NumberOf" required={true} />
+	<NumberInput id="numberOf" label="NumberOf" required={true} placeholder="add a random number here"/>
 </div>
 <div class="pb-10">
-	<DateInput id="date" label="Creation date" required={true} />
+	<DateInput id="date" label="Creation date" required={true}/>
 </div>