@bexis2/bexis2-core-ui 0.4.87 → 0.4.89

package/README.md

@@ -1,4 +1,6 @@
 # bexis-core-ui
+
+
 ## 0.4.87
 - Input
   - add show description to all form components
@@ -22,7 +24,6 @@
 - MultiSelect
   - fix itemGroup was not working
 
-
 ## 0.4.83
 - InputContainer
   - error message position and basic styling of input fields

package/dist/components/form/DatePickerInput.svelte

@@ -0,0 +1,48 @@
+<script>import InputContainer from "./InputContainer.svelte";
+import SveltyPicker from "svelty-picker";
+export let id = "";
+export let label = "";
+export let value = "";
+export let valid = false;
+export let invalid = false;
+export let required = false;
+export let feedback = [""];
+export let placeholder = "";
+export let help = false;
+export let disabled = false;
+export let description = "";
+export let showDescription = false;
+export let mode = "date";
+export let initialDate = "";
+export let format = "yyyy-mm-dd";
+export let displayFormat = "yyyy-mm-dd";
+export let onChangeHandler = () => {
+};
+let width = "w-32";
+if (mode !== "date" && mode !== "time" && mode !== "datetime") {
+  throw new Error(`Invalid mode: ${mode}. Valid modes are 'date', 'time', and 'datetime'.`);
+}
+if (mode === "datetime" && (format === "yyyy-mm-dd" || displayFormat === "yyyy-mm-dd")) {
+  throw new Error(
+    `Invalid format for datetime mode. Please use a format that includes both date and time.`
+  );
+}
+if (mode === "datetime") {
+  width = "w-64";
+}
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+	<SveltyPicker
+		{mode}
+		name={label}
+		{format}
+		{displayFormat}
+		{initialDate}
+		bind:value
+		inputClasses="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400 {width}"
+		on:change={onChangeHandler}
+		{disabled}
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        label?: string;
+        value?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        required?: boolean;
+        feedback?: string[];
+        placeholder?: string;
+        help?: boolean;
+        disabled?: boolean;
+        description?: string;
+        showDescription?: boolean;
+        mode?: "date" | "time" | "datetime";
+        initialDate?: string;
+        format?: string;
+        displayFormat?: string;
+        onChangeHandler?: (event: CustomEvent) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DatePickerInputProps = typeof __propDef.props;
+export type DatePickerInputEvents = typeof __propDef.events;
+export type DatePickerInputSlots = typeof __propDef.slots;
+export default class DatePickerInput extends SvelteComponent<DatePickerInputProps, DatePickerInputEvents, DatePickerInputSlots> {
+}
+export {};

package/dist/components/form/MultiSelect.svelte

@@ -34,7 +34,7 @@
 	$: target, setValue(target);
 
 	let groupBy;
-	$: groupBy;
+	$: groupBy = itemGroup ? (item) => item[itemGroup] : undefined; 
 
 	const dispatch = createEventDispatcher();
 
@@ -121,17 +121,17 @@
 				value = items;
 			}
 			//console.log(value);
-			if (itemGroup) {
-				groupBy = (item) => item[itemGroup];
-			}
+			// if (itemGroup) {
+			// 	groupBy = (item) => item[itemGroup];
+			// }
 		}
 
 		if (complexSource && complexTarget && isMulti) {
 			value = t;
 			isLoaded = true;
-			if (itemGroup) {
-				groupBy = (item) => item[itemGroup];
-			}
+			// if (itemGroup) {
+			// 	groupBy = (item) => item[itemGroup];
+			// }
 		}
 
 		//b) simple liust and simple model

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

@@ -15,6 +15,7 @@ onMount(async () => {
   const storedFontSize = localStorage.getItem("fontSize");
   if (storedFontSize) {
     document.documentElement.style.fontSize = storedFontSize;
+    document.documentElement.style.setProperty("--font-size", storedFontSize);
   }
 });
 let hamburger = true;
@@ -22,11 +23,13 @@ const theme = writable("light");
 function increaseFontSize() {
   const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   document.documentElement.style.fontSize = currentFontSize + 1 + "px";
+  document.documentElement.style.setProperty("--font-size", document.documentElement.style.fontSize);
   localStorage.setItem("fontSize", document.documentElement.style.fontSize);
 }
 function decreaseFontSize() {
   const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   document.documentElement.style.fontSize = currentFontSize - 1 + "px";
+  document.documentElement.style.setProperty("--font-size", document.documentElement.style.fontSize);
   localStorage.setItem("fontSize", document.documentElement.style.fontSize);
 }
 function toggleDarkMode() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.87",
+  "version": "0.4.89",
   "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": [
@@ -81,6 +81,7 @@
     "svelte-fa": "^4.0.2",
     "svelte-file-dropzone": "^2.0.7",
     "svelte-headless-table": "^0.18.2",
+    "svelty-picker": "^5.2.12",
     "svelte-select": "5.8.3",
     "vest": "^5.4.0"
   },

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+	import SveltyPicker from 'svelty-picker';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+	export let placeholder: string = '';
+	export let help: boolean = false;
+	export let disabled: boolean = false;
+	export let description: string = '';
+	export let showDescription: boolean = false;
+	export let mode: 'date' | 'time' | 'datetime' = 'date';
+	export let initialDate: string = '';
+	export let format: string = 'yyyy-mm-dd';
+	export let displayFormat: string = 'yyyy-mm-dd';
+	export let onChangeHandler: (event: CustomEvent) => void = () => {};
+
+	let width = 'w-32';
+
+	if (mode !== 'date' && mode !== 'time' && mode !== 'datetime') {
+		throw new Error(`Invalid mode: ${mode}. Valid modes are 'date', 'time', and 'datetime'.`);
+	}
+
+	if (mode === 'datetime' && (format === 'yyyy-mm-dd' || displayFormat === 'yyyy-mm-dd')) {
+		throw new Error(
+			`Invalid format for datetime mode. Please use a format that includes both date and time.`
+		);
+	}
+
+	if (mode === 'datetime') {
+		width = 'w-64';
+	}
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+	<SveltyPicker
+		{mode}
+		name={label}
+		{format}
+		{displayFormat}
+		{initialDate}
+		bind:value
+		inputClasses="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400 {width}"
+		on:change={onChangeHandler}
+		{disabled}
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -34,7 +34,7 @@
 	$: target, setValue(target);
 
 	let groupBy;
-	$: groupBy;
+	$: groupBy = itemGroup ? (item) => item[itemGroup] : undefined; 
 
 	const dispatch = createEventDispatcher();
 
@@ -121,17 +121,17 @@
 				value = items;
 			}
 			//console.log(value);
-			if (itemGroup) {
-				groupBy = (item) => item[itemGroup];
-			}
+			// if (itemGroup) {
+			// 	groupBy = (item) => item[itemGroup];
+			// }
 		}
 
 		if (complexSource && complexTarget && isMulti) {
 			value = t;
 			isLoaded = true;
-			if (itemGroup) {
-				groupBy = (item) => item[itemGroup];
-			}
+			// if (itemGroup) {
+			// 	groupBy = (item) => item[itemGroup];
+			// }
 		}
 
 		//b) simple liust and simple model

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

@@ -20,6 +20,8 @@
 		const storedFontSize = localStorage.getItem('fontSize');
 		if (storedFontSize) {
 			document.documentElement.style.fontSize = storedFontSize;
+			// set CSS variable --font-size to the new font size
+			document.documentElement.style.setProperty('--font-size', storedFontSize);
 		}
 	});
 
@@ -30,12 +32,16 @@
 	function increaseFontSize() {
 		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
 		document.documentElement.style.fontSize = currentFontSize + 1 + 'px';
+		// set CSS variable --font-size to the new font size
+		document.documentElement.style.setProperty('--font-size', document.documentElement.style.fontSize);
 		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';
+		// set CSS variable --font-size to the new font size
+		document.documentElement.style.setProperty('--font-size', document.documentElement.style.fontSize);
 		localStorage.setItem('fontSize', document.documentElement.style.fontSize);
 	}