@bexis2/bexis2-core-ui 0.4.85 → 0.4.87

package/README.md

@@ -1,4 +1,15 @@
 # bexis-core-ui
+## 0.4.87
+- Input
+  - add show description to all form components
+
+## 0.4.86
+- Menu
+  - set size to local storage
+- Input
+  - expose show description
+
+
 ## 0.4.85
 - Menu
   - add increase / decrease font size

package/dist/components/form/Dropdown.svelte

@@ -10,7 +10,8 @@
 	export let feedback = [''];
 	export let required = false;
 	export let help = false;
-	export	let description = '';
+	export let description = '';
+	export let showDescription = false;
 
 	$: selected = null;
 
@@ -28,7 +29,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/Dropdown.svelte.d.ts

@@ -12,6 +12,7 @@ export default class Dropdown extends SvelteComponent<{
     required?: boolean | undefined;
     help?: boolean | undefined;
     valid?: boolean | undefined;
+    showDescription?: boolean | undefined;
 }, {
     change: Event;
     select: Event;
@@ -35,6 +36,7 @@ declare const __propDef: {
         required?: boolean | undefined;
         help?: boolean | undefined;
         valid?: boolean | undefined;
+        showDescription?: boolean | undefined;
     };
     events: {
         change: Event;

package/dist/components/form/DropdownKvP.svelte

@@ -12,6 +12,7 @@
 	export let complexTarget = false;
 	export let help = false;
 	export	let description = '';
+	export let showDescription = false;
 
 	$: selected = null;
 
@@ -37,7 +38,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/DropdownKvP.svelte.d.ts

@@ -13,6 +13,7 @@ export default class DropdownKvP extends SvelteComponent<{
     help?: boolean | undefined;
     valid?: boolean | undefined;
     complexTarget?: boolean | undefined;
+    showDescription?: boolean | undefined;
 }, {
     change: Event;
     select: Event;
@@ -37,6 +38,7 @@ declare const __propDef: {
         help?: boolean | undefined;
         valid?: boolean | undefined;
         complexTarget?: boolean | undefined;
+        showDescription?: boolean | undefined;
     };
     events: {
         change: Event;

package/dist/components/form/InputContainer.svelte

@@ -7,7 +7,7 @@ export let required;
 export let feedback;
 export let help = false;
 export let description = "";
-let showDescription = false;
+export let showDescription = false;
 function onMouseOver() {
   if (help) {
     helpStore.show(id);

package/dist/components/form/InputContainer.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         feedback: string[];
         help?: boolean;
         description?: string;
+        showDescription?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/MultiSelect.svelte

@@ -25,6 +25,7 @@
 	export let disabled = false;
 	export let searchable = true;
 	export let description = '';
+	export let showDescription = false;
 
 	let isLoaded = false;
 
@@ -308,7 +309,7 @@
 	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
 	<Select
 		{id}
 		items={source}

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -12,6 +12,7 @@ export default class MultiSelect extends SvelteComponent<{
     required?: boolean | undefined;
     help?: boolean | undefined;
     complexTarget?: boolean | undefined;
+    showDescription?: boolean | undefined;
     itemId?: string | undefined;
     itemLabel?: string | undefined;
     itemGroup?: string | undefined;
@@ -52,6 +53,7 @@ declare const __propDef: {
         required?: boolean | undefined;
         help?: boolean | undefined;
         complexTarget?: boolean | undefined;
+        showDescription?: boolean | undefined;
         itemId?: string | undefined;
         itemLabel?: string | undefined;
         itemGroup?: string | undefined;

package/dist/components/form/NumberInput.svelte

@@ -12,6 +12,7 @@ export let placeholder = "";
 export let help = false;
 export let disabled = false;
 export let description = "";
+export let showDescription = false;
 export let min = void 0;
 export let max = void 0;
 $: if (max != void 0 && parseInt(value) > max) {
@@ -22,7 +23,7 @@ $: if (min != void 0 && parseInt(value) < min) {
 }
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
@@ -36,6 +37,5 @@ $: if (min != void 0 && parseInt(value) < min) {
 		on:change
 		{placeholder}
 		{disabled}
-		
 	/>
 </InputContainer>

package/dist/components/form/NumberInput.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         help?: boolean;
         disabled?: boolean;
         description?: string;
+        showDescription?: boolean;
         min?: number | undefined;
         max?: number | undefined;
     };

package/dist/components/form/TextArea.svelte

@@ -10,9 +10,10 @@ export let placeholder = "";
 export let help = false;
 export let disabled = false;
 export let description = "";
+export let showDescription = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
 	<textarea
 		{id}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/TextArea.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         help?: boolean;
         disabled?: boolean;
         description?: string;
+        showDescription?: boolean;
     };
     events: {
         input: Event;

package/dist/components/form/TextInput.svelte

@@ -10,9 +10,10 @@ export let placeholder = "";
 export let help = false;
 export let disabled = false;
 export let description = "";
+export let showDescription = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/TextInput.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         help?: boolean;
         disabled?: boolean;
         description?: string;
+        showDescription?: boolean;
     };
     events: {
         input: Event;

package/dist/components/page/menu/Menu.svelte

@@ -12,16 +12,22 @@ onMount(async () => {
   let m = await getMenuItems();
   menuStore.set(m);
   console.log("\u{1F680} ~ onMount ~ menuStore:", $menuStore);
+  const storedFontSize = localStorage.getItem("fontSize");
+  if (storedFontSize) {
+    document.documentElement.style.fontSize = storedFontSize;
+  }
 });
 let hamburger = true;
 const theme = writable("light");
 function increaseFontSize() {
   const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   document.documentElement.style.fontSize = currentFontSize + 1 + "px";
+  localStorage.setItem("fontSize", document.documentElement.style.fontSize);
 }
 function decreaseFontSize() {
   const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   document.documentElement.style.fontSize = currentFontSize - 1 + "px";
+  localStorage.setItem("fontSize", document.documentElement.style.fontSize);
 }
 function toggleDarkMode() {
   if ($theme === "dark") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.85",
+  "version": "0.4.87",
   "private": false,
   "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
   "keywords": [

package/src/lib/components/form/Dropdown.svelte

@@ -10,7 +10,8 @@
 	export let feedback = [''];
 	export let required = false;
 	export let help = false;
-	export	let description = '';
+	export let description = '';
+	export let showDescription = false;
 
 	$: selected = null;
 
@@ -28,7 +29,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/DropdownKvP.svelte

@@ -12,6 +12,7 @@
 	export let complexTarget = false;
 	export let help = false;
 	export	let description = '';
+	export let showDescription = false;
 
 	$: selected = null;
 
@@ -37,7 +38,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/InputContainer.svelte

@@ -9,8 +9,7 @@
 	export let feedback: string[];
 	export let help: boolean = false;
 	export let description : string = '';
-
-let showDescription: boolean = false;
+	export let showDescription: boolean = false;
 
 	function onMouseOver() {
 		if (help) {

package/src/lib/components/form/MultiSelect.svelte

@@ -25,6 +25,7 @@
 	export let disabled = false;
 	export let searchable = true;
 	export let description = '';
+	export let showDescription = false;
 
 	let isLoaded = false;
 
@@ -308,7 +309,7 @@
 	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
 	<Select
 		{id}
 		items={source}

package/src/lib/components/form/NumberInput.svelte

@@ -15,8 +15,9 @@
 	export let help: boolean = false;
 	export let disabled: boolean = false;
 	export let description	: string = '';
+	export let showDescription: boolean = false;
 	export let min	: number | undefined = undefined;
-	export	let max	: number | undefined = undefined;
+	export let max	: number | undefined = undefined;
 
 	// Diese Zeile wird jedes Mal ausgeführt, wenn sich "menge" ändert
   $: if (max!=undefined && (parseInt(value) > max)) {
@@ -30,7 +31,7 @@
 
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
@@ -44,6 +45,5 @@
 		on:change
 		{placeholder}
 		{disabled}
-		
 	/>
 </InputContainer>

package/src/lib/components/form/TextArea.svelte

@@ -13,9 +13,10 @@
 	export let help: boolean = false;
 	export let disabled: boolean = false;
 	export let description	: string = '';
+	export let showDescription: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
 	<textarea
 		{id}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/TextInput.svelte

@@ -12,9 +12,10 @@
 	export let help: boolean = false;
 	export let disabled: boolean = false;
 	export let description	: string = '';
+	export let showDescription: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/page/menu/Menu.svelte

@@ -16,20 +16,27 @@
 		menuStore.set(m);
 
 		console.log('🚀 ~ onMount ~ menuStore:', $menuStore);
+		// set the font size to the value stored in local storage
+		const storedFontSize = localStorage.getItem('fontSize');
+		if (storedFontSize) {
+			document.documentElement.style.fontSize = storedFontSize;
+		}
 	});
 
 	let hamburger = true;
 	const theme = writable('light');
 
-	// function to increase the current font size by 1 step
+	// function to increase the current font size by 1 step; set in local storage so it is remembered on page reload
 	function increaseFontSize() {
 		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
 		document.documentElement.style.fontSize = currentFontSize + 1 + 'px';
+		localStorage.setItem('fontSize', document.documentElement.style.fontSize);
 	}
 	// function to decrease the current font size by 1 step
 	function decreaseFontSize() {
 		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
 		document.documentElement.style.fontSize = currentFontSize - 1 + 'px';
+		localStorage.setItem('fontSize', document.documentElement.style.fontSize);
 	}
 
 	// function to toggle dark mode