@bexis2/bexis2-core-ui 0.3.9 → 0.3.11

package/README.md

@@ -1,4 +1,12 @@
 # bexis-core-ui
+## 0.3.11
+- add on:change passthrough to TextInput, TextArea, DateInput, NumberInput, CheckBox
+  
+## 0.3.10
+- multi select
+  - update svelte-select libary
+  - refactor filterFn (new order - > exact, start, includes)
+  - fix issues with clearable
 
 ## 0.3.9
 

package/dist/components/form/Checkbox.svelte

@@ -17,5 +17,6 @@ export let feedback;
 		class:input-error={invalid}
 		bind:checked
 		on:input
+		on:change
 	/>
 </InputContainer>

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

@@ -11,6 +11,7 @@ declare const __propDef: {
     };
     events: {
         input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/form/DateInput.svelte

@@ -19,6 +19,7 @@ export let disabled = false;
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{disabled}
 	/>
 </InputContainer>

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

@@ -13,6 +13,7 @@ declare const __propDef: {
     };
     events: {
         input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/form/MultiSelect.svelte

@@ -4,6 +4,8 @@
 	import Select from 'svelte-select';
 	import { onMount } from 'svelte';
 
+
+
 	export let source;
 	export let target;
 	export let id;
@@ -33,7 +35,16 @@
 	$: groupBy;
 
 	function updateTarget(selection) {
-		//console.log("UPDATE target",selection);
+
+		console.log("updateTarget", target, selection, isMulti);
+  if(selection == undefined)
+		{
+		  console.log("no update");
+
+				return;
+		}
+
+		console.log("update");
 		//different cases
 		//a) source is complex model is simple return array
 		if (complexSource && !complexTarget && isLoaded && isMulti) {
@@ -64,7 +75,10 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			target = selection.value;
+			console.log("🚀 ~ updateTarget ~ selection:", selection)
+			if(selection){
+				target = selection.value;
+			}
 		}
 
 		if (complexSource && !complexTarget && isLoaded && !isMulti) {
@@ -86,6 +100,7 @@
 
 	function setValue(t) {
 		//console.log("Set Value",t);
+
 		//a) source is complex model is simple
 		if (complexSource && !complexTarget && isMulti) {
 			let items = [];
@@ -151,6 +166,119 @@
 
 		//console.log(t,value)
 	}
+
+function filterItemStartFn(label, filterText, option) {
+	// console.log(label, filterText, option);
+	let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
+
+	return itemFilter;
+}
+
+function filterItemExactFn(label, filterText, option) {
+	// console.log(label, filterText, option);
+	let itemFilter = label.toLowerCase() == filterText.toLowerCase();
+
+	return itemFilter;
+}
+
+function filterItemIncludesFn(label, filterText, option) {
+	// console.log(label, filterText, option);
+	let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
+
+	return itemFilter;
+}
+
+function filterFn({
+    loadOptions,
+    filterText,
+    items,
+    multiple,
+    value,
+    itemId,
+    groupBy,
+    filterSelectedItems,
+    itemFilter,
+    convertStringItemsToObjects,
+    filterGroupedItems,
+    label,
+}) {
+    if (items && loadOptions) return items;
+    if (!items) return [];
+
+    if (items && items.length > 0 && typeof items[0] !== 'object') {
+        items = convertStringItemsToObjects(items);
+    }
+
+    let filterResults = filterListFn(items, label, filterText,multiple,value,filterSelectedItems, itemId)
+
+    if (groupBy) {
+        filterResults = filterGroupedItems(filterResults, label, filterText);
+    }
+
+    return filterResults;
+}
+
+// filter checks 3 types, exact, starts, includes
+function filterListFn(items ,label , filterText, multiple, value, filterSelectedItems, itemId)
+{
+
+	 if (!items) return [];
+
+		let exact = items.filter((item) => {
+						let matchesFilter = filterItemExactFn(item[label], filterText, item);
+						if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+							return matchesFilter;
+    });
+
+		let starts = items.filter((item) => {
+				let matchesFilter = filterItemStartFn(item[label], filterText, item);
+						if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+							return matchesFilter;
+
+    });
+
+			let includes = items.filter((item) => {
+				let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
+						if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+							return matchesFilter;
+    });
+
+	 
+				let result =  [...exact,...starts,...includes];
+				return [...new Set(result)];
+}
+
+function clearFn(e)
+{
+	 console.log("clear", target, e);
+		if(isMulti)
+		{
+				target = [];
+		}
+		else
+		{
+			target="";
+		}
+
+	 console.log("after clear", target);
+}
+
+
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>
@@ -167,14 +295,15 @@
 		{loading}
 		{clearable}
 		{disabled}
+  filter={filterFn}
 		on:change
 		on:input
 		on:focus
 		on:blur
-		on:clear
 		on:loaded
-		on:error
 		on:filter
+		on:error
 		on:hoverItem
+		on:clear={clearFn}
 	/>
 </InputContainer>

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

@@ -25,10 +25,9 @@ export default class MultiSelect extends SvelteComponentTyped<{
     input: CustomEvent<any>;
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
-    clear: CustomEvent<any>;
     loaded: CustomEvent<any>;
-    error: CustomEvent<any>;
     filter: CustomEvent<any>;
+    error: CustomEvent<any>;
     hoverItem: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -64,10 +63,9 @@ declare const __propDef: {
         input: CustomEvent<any>;
         focus: CustomEvent<any>;
         blur: CustomEvent<any>;
-        clear: CustomEvent<any>;
         loaded: CustomEvent<any>;
-        error: CustomEvent<any>;
         filter: CustomEvent<any>;
+        error: CustomEvent<any>;
         hoverItem: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/NumberInput.svelte

@@ -21,6 +21,7 @@ export let disabled = false;
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{placeholder}
 		{disabled}
 	/>

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

@@ -14,6 +14,7 @@ declare const __propDef: {
     };
     events: {
         input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/form/TextArea.svelte

@@ -19,6 +19,7 @@ export let disabled = false;
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{placeholder}
 		{disabled}
 	/>

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

@@ -14,6 +14,7 @@ declare const __propDef: {
     };
     events: {
         input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/form/TextInput.svelte

@@ -20,6 +20,7 @@ export let disabled = false;
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{placeholder}
 		{disabled}
 	/>

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

@@ -14,6 +14,7 @@ declare const __propDef: {
     };
     events: {
         input: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/page/breadcrumb/Breadcrumb.svelte

@@ -26,7 +26,7 @@ onMount(async () => {
 <div class="px-5 py-2">
 	<ol class="breadcrumb -p50">
 		<!--default home-->
-		<li class="crumb"><a class="anchor" href={'/'}>{applicationName} (Home)</a></li>
+		<li class="crumb"><a class="anchor" href={'/'}>{applicationName}</a></li>
 		<li class="crumb-separator" aria-hidden>&rsaquo;</li>
 
 		{#each list as crumb, i}

package/dist/components/toggle/Toggle.svelte

@@ -0,0 +1,57 @@
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import { faPen } from "@fortawesome/free-solid-svg-icons";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+export let title = "Toggle light or dark mode.";
+export let bgLight = "bg-surface-50";
+export let bgDark = "bg-surface-900";
+export let fillLight = "fill-surface-50";
+export let fillDark = "fill-surface-900";
+export let width = "w-12";
+export let height = "h-6";
+export let ring = "ring-[1px] ring-surface-500/30";
+export let rounded = "rounded-token";
+const cTransition = `transition-all duration-[200ms]`;
+const cTrack = "cursor-pointer";
+const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
+const cIcon = "w-[70%] aspect-square";
+$:
+  trackBg = mode === true ? bgLight : bgDark;
+$:
+  thumbBg = mode === true ? bgDark : bgLight;
+$:
+  thumbPosition = mode === true ? "translate-x-[100%]" : "";
+$:
+  iconFill = mode === true ? fillLight : fillDark;
+$:
+  classesTrack = `${cTrack} ${cTransition} ${width} ${height} ${ring} ${rounded} ${trackBg} ${$$props.class ?? ""}`;
+$:
+  classesThumb = `${cThumb} ${cTransition} ${height} ${rounded} ${thumbBg} ${thumbPosition}`;
+let mode = true;
+$:
+  mode;
+</script>
+
+<div
+	class="lightswitch-track {classesTrack}"
+	on:click={()=>mode=!mode}
+	on:click
+	on:keydown={()=>mode=!mode}
+	on:keydown
+	on:keyup
+	on:keypress
+	role="switch"
+	aria-label="Light Switch"
+ aria-checked={mode}
+	title="xyz"
+	tabindex="0"
+>
+	<!-- Thumb -->
+	<div class="lightswitch-thumb {classesThumb}">
+		<!-- SVG -->
+  {#if mode}
+  <Fa icon={faPen} color="white" />
+  {:else}
+  <Fa icon={faTrash} />
+  {/if}
+	</div>
+</div>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title?: string | undefined;
+        bgLight?: string | undefined;
+        bgDark?: string | undefined;
+        fillLight?: string | undefined;
+        fillDark?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        ring?: string | undefined;
+        rounded?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -81,7 +81,7 @@
     "svelte-fa": "^3.0.4",
     "svelte-file-dropzone": "^2.0.1",
     "svelte-headless-table": "^0.17.3",
-    "svelte-select": "^5.6.1",
+    "svelte-select": "5.8.3",
     "vest": "^4.6.11"
   },
   "author": "David Schöne",

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

@@ -20,5 +20,6 @@
 		class:input-error={invalid}
 		bind:checked
 		on:input
+		on:change
 	/>
 </InputContainer>

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

@@ -4,7 +4,6 @@
 	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;
@@ -22,6 +21,7 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{disabled}
 	/>
 </InputContainer>

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

@@ -4,6 +4,8 @@
 	import Select from 'svelte-select';
 	import { onMount } from 'svelte';
 
+
+
 	export let source;
 	export let target;
 	export let id;
@@ -33,7 +35,16 @@
 	$: groupBy;
 
 	function updateTarget(selection) {
-		//console.log("UPDATE target",selection);
+
+		console.log("updateTarget", target, selection, isMulti);
+  if(selection == undefined)
+		{
+		  console.log("no update");
+
+				return;
+		}
+
+		console.log("update");
 		//different cases
 		//a) source is complex model is simple return array
 		if (complexSource && !complexTarget && isLoaded && isMulti) {
@@ -64,7 +75,10 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			target = selection.value;
+			console.log("🚀 ~ updateTarget ~ selection:", selection)
+			if(selection){
+				target = selection.value;
+			}
 		}
 
 		if (complexSource && !complexTarget && isLoaded && !isMulti) {
@@ -86,6 +100,7 @@
 
 	function setValue(t) {
 		//console.log("Set Value",t);
+
 		//a) source is complex model is simple
 		if (complexSource && !complexTarget && isMulti) {
 			let items = [];
@@ -151,6 +166,119 @@
 
 		//console.log(t,value)
 	}
+
+function filterItemStartFn(label, filterText, option) {
+	// console.log(label, filterText, option);
+	let itemFilter = label.toLowerCase().startsWith(filterText.toLowerCase());
+
+	return itemFilter;
+}
+
+function filterItemExactFn(label, filterText, option) {
+	// console.log(label, filterText, option);
+	let itemFilter = label.toLowerCase() == filterText.toLowerCase();
+
+	return itemFilter;
+}
+
+function filterItemIncludesFn(label, filterText, option) {
+	// console.log(label, filterText, option);
+	let itemFilter = label.toLowerCase().includes(filterText.toLowerCase());
+
+	return itemFilter;
+}
+
+function filterFn({
+    loadOptions,
+    filterText,
+    items,
+    multiple,
+    value,
+    itemId,
+    groupBy,
+    filterSelectedItems,
+    itemFilter,
+    convertStringItemsToObjects,
+    filterGroupedItems,
+    label,
+}) {
+    if (items && loadOptions) return items;
+    if (!items) return [];
+
+    if (items && items.length > 0 && typeof items[0] !== 'object') {
+        items = convertStringItemsToObjects(items);
+    }
+
+    let filterResults = filterListFn(items, label, filterText,multiple,value,filterSelectedItems, itemId)
+
+    if (groupBy) {
+        filterResults = filterGroupedItems(filterResults, label, filterText);
+    }
+
+    return filterResults;
+}
+
+// filter checks 3 types, exact, starts, includes
+function filterListFn(items ,label , filterText, multiple, value, filterSelectedItems, itemId)
+{
+
+	 if (!items) return [];
+
+		let exact = items.filter((item) => {
+						let matchesFilter = filterItemExactFn(item[label], filterText, item);
+						if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+							return matchesFilter;
+    });
+
+		let starts = items.filter((item) => {
+				let matchesFilter = filterItemStartFn(item[label], filterText, item);
+						if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+							return matchesFilter;
+
+    });
+
+			let includes = items.filter((item) => {
+				let matchesFilter = filterItemIncludesFn(item[label], filterText, item);
+						if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+							return matchesFilter;
+    });
+
+	 
+				let result =  [...exact,...starts,...includes];
+				return [...new Set(result)];
+}
+
+function clearFn(e)
+{
+	 console.log("clear", target, e);
+		if(isMulti)
+		{
+				target = [];
+		}
+		else
+		{
+			target="";
+		}
+
+	 console.log("after clear", target);
+}
+
+
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>
@@ -167,14 +295,15 @@
 		{loading}
 		{clearable}
 		{disabled}
+  filter={filterFn}
 		on:change
 		on:input
 		on:focus
 		on:blur
-		on:clear
 		on:loaded
-		on:error
 		on:filter
+		on:error
 		on:hoverItem
+		on:clear={clearFn}
 	/>
 </InputContainer>

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

@@ -24,6 +24,7 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{placeholder}
 		{disabled}
 	/>

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

@@ -22,6 +22,7 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{placeholder}
 		{disabled}
 	/>

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

@@ -22,6 +22,7 @@
 		class:input-error={invalid}
 		bind:value
 		on:input
+		on:change
 		{placeholder}
 		{disabled}
 	/>

package/src/lib/components/page/breadcrumb/Breadcrumb.svelte

@@ -33,7 +33,7 @@
 <div class="px-5 py-2">
 	<ol class="breadcrumb -p50">
 		<!--default home-->
-		<li class="crumb"><a class="anchor" href={'/'}>{applicationName} (Home)</a></li>
+		<li class="crumb"><a class="anchor" href={'/'}>{applicationName}</a></li>
 		<li class="crumb-separator" aria-hidden>&rsaquo;</li>
 
 		{#each list as crumb, i}

package/src/lib/components/toggle/Toggle.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+ import Fa from 'svelte-fa/src/fa.svelte';
+
+import { faPen } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import type{ CssClasses } from '@skeletonlabs/skeleton';
+
+// Props
+	/** Customize the `title` attribute for the component.  */
+	export let title = 'Toggle light or dark mode.';
+	// Props (styles)
+	/** Provide classes to set the light background color. */
+	export let bgLight: CssClasses = 'bg-surface-50';
+	/** Provide classes to set the dark background color. */
+	export let bgDark: CssClasses = 'bg-surface-900';
+	/** Provide classes to set the light SVG fill color. */
+	export let fillLight: CssClasses = 'fill-surface-50';
+	/** Provide classes to set the dark SVG fill color. */
+	export let fillDark: CssClasses = 'fill-surface-900';
+	/** Provide classes to set width styles. */
+	export let width: CssClasses = 'w-12';
+	/** Provide classes to set height styles. Should be half of width. */
+	export let height: CssClasses = 'h-6';
+	/** Provide classes to set ring styles. */
+	export let ring: CssClasses = 'ring-[1px] ring-surface-500/30';
+	/** Provide classes to set border radius styles. */
+	export let rounded: CssClasses = 'rounded-token';
+
+// Classes
+const cTransition = `transition-all duration-[200ms]`;
+const cTrack = 'cursor-pointer';
+const cThumb = 'aspect-square scale-[0.8] flex justify-center items-center';
+const cIcon = 'w-[70%] aspect-square';
+
+// State
+$: trackBg = mode === true ? bgLight : bgDark;
+$: thumbBg = mode === true ? bgDark : bgLight;
+$: thumbPosition = mode === true ? 'translate-x-[100%]' : '';
+$: iconFill = mode === true ? fillLight : fillDark;
+
+$: classesTrack = `${cTrack} ${cTransition} ${width} ${height} ${ring} ${rounded} ${trackBg} ${$$props.class ?? ''}`;
+$: classesThumb = `${cThumb} ${cTransition} ${height} ${rounded} ${thumbBg} ${thumbPosition}`;
+
+
+let mode = true;
+$:mode;
+
+</script>
+
+<div
+	class="lightswitch-track {classesTrack}"
+	on:click={()=>mode=!mode}
+	on:click
+	on:keydown={()=>mode=!mode}
+	on:keydown
+	on:keyup
+	on:keypress
+	role="switch"
+	aria-label="Light Switch"
+ aria-checked={mode}
+	title="xyz"
+	tabindex="0"
+>
+	<!-- Thumb -->
+	<div class="lightswitch-thumb {classesThumb}">
+		<!-- SVG -->
+  {#if mode}
+  <Fa icon={faPen} color="white" />
+  {:else}
+  <Fa icon={faTrash} />
+  {/if}
+	</div>
+</div>