@bexis2/bexis2-core-ui 0.1.12 → 0.2.0

package/README.md

@@ -1,4 +1,21 @@
 # bexis-core-ui
+## v0.2.0
+> refactoring based on naming conventions (https://bexis2.github.io/bexis2-core-ui/code/naming/)
+
+- add Help, helpStore
+- update Page
+   
+## v0.1.13
+### update
+- MultiSelect
+  - loading flag
+  - isValid
+
+## v0.1.12
+### update
+- MultiSelect
+  - pass all events from svelte select
+
 ## v0.1.11
 ### update
 - MultiSelect
@@ -72,7 +89,7 @@
 - KvP
 
 #### enum
-- Position
+- position
 
 ### update
 #### components
@@ -111,7 +128,7 @@
 
 ### add
 #### types
-- Link
+- linkType
 
 ## v0.0.28
 
@@ -134,7 +151,7 @@
 - TableConfig
 - Columns 
 - Column
-- Input
+- inputType
 
 <hr/>
 
@@ -153,11 +170,11 @@
 #### components
 - Spinner
 - FileUploader 
-- FileInfo 
+- fileInfoType 
 - FileIcon 
 - 
 #### types
-- FileUploaderModel
+- fileUploaderModel
  
 <hr/>
 

package/dist/components/file/FileUploader.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FileUploaderModel } from '../../models/Models.js';
+import type { fileUploaderModel } from '../../models/Models.js';
 declare const __propDef: {
     props: {
         id?: number | undefined;
@@ -7,7 +7,7 @@ declare const __propDef: {
         start?: string | undefined;
         submit?: string | undefined;
         context?: string | undefined;
-        data: FileUploaderModel | undefined;
+        data: fileUploaderModel | undefined;
     };
     events: {
         error: CustomEvent<any>;

package/dist/components/form/CheckboxKvPList.svelte

@@ -1,14 +1,16 @@
 <script>import InputContainer from "./InputContainer.svelte";
+export let id;
 export let source;
 export let target;
 export let title;
 export let description = "";
 export let key;
+export let help = false;
 let required = false;
 let feedback;
 </script>
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={key}>
 			<input

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

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id: any;
         source: any;
         target: any;
         title: any;
         description?: string | undefined;
         key: any;
+        help?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/DateInput.svelte

@@ -6,9 +6,10 @@ export let valid = false;
 export let invalid = false;
 export let required = false;
 export let feedback = [""];
+export let help = false;
 </script>
 
-<InputContainer {label} {feedback} {required}>
+<InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
 		class="input variant-form-material"

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         invalid?: boolean | undefined;
         required?: boolean | undefined;
         feedback?: string[] | undefined;
+        help?: boolean | undefined;
     };
     events: {
         input: Event;

package/dist/components/form/DropdownKvP.svelte

@@ -10,6 +10,7 @@
 	export let feedback = [''];
 	export let required = false;
 	export let complexTarget = false;
+	export let help = false;
 
 	$: selected = null;
 
@@ -41,7 +42,7 @@
 	}
 </script>
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	<select
 		{id}
 		class="select variant-form-material"

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

@@ -11,6 +11,7 @@ export default class DropdownKvP extends SvelteComponentTyped<{
     valid?: boolean | undefined;
     feedback?: string[] | undefined;
     complexTarget?: boolean | undefined;
+    help?: boolean | undefined;
 }, {
     change: Event;
     select: Event;
@@ -33,6 +34,7 @@ declare const __propDef: {
         valid?: boolean | undefined;
         feedback?: string[] | undefined;
         complexTarget?: boolean | undefined;
+        help?: boolean | undefined;
     };
     events: {
         change: Event;

package/dist/components/form/InputContainer.svelte

@@ -1,8 +1,21 @@
-<script>export let label = "";
+<script>import { helpStore } from "../../stores/pageStores";
+export let id = "";
+export let label = "";
 export let required;
 export let feedback;
+export let help = false;
+function onMouseOver() {
+  if (help) {
+    helpStore.show(id);
+  }
+}
+function onMouseOut() {
+  if (help) {
+    helpStore.hide();
+  }
+}
 </script>
-
+<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
 <label class="label">
 	<span
 		>{label}
@@ -19,3 +32,4 @@ export let feedback;
 		</span>
 	{/if}
 </label>
+</div>

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

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string | undefined;
         label?: string | undefined;
         required: boolean;
         feedback: string[];
+        help?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/MultiSelect.svelte

@@ -15,8 +15,12 @@
 	export let complexSource = false;
 	export let complexTarget = false;
 	export let required = false;
-	export let feedback = [];
+	export let feedback = [''];
 	export let placeholder = "-- Please select --"
+	export let invalid = false;
+	export let loading = false;
+	export let help = false;
+
 
 	let isLoaded = false;
 
@@ -79,7 +83,7 @@
 	}
 
 	onMount(async () => {
-		////console.log("on mount multiselect");
+		console.log("on mount multiselect");
 		////console.log(source);
 
 		//a) source is complex model is simple
@@ -119,7 +123,7 @@
 
 		if(!isMulti)
 		{
-			console.log("onmount",complexSource,complexTarget,value,target)
+			//console.log("onmount",complexSource,complexTarget,value,target)
 			if(!complexSource && !complexTarget) 
 			{
 					value = {
@@ -147,7 +151,7 @@
 </script>
 
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer {id} label={title} {feedback} {required} {help}>
 	<Select
 	 {id}
 		items={source}
@@ -157,6 +161,8 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
+		hasError={invalid}
+		{loading}
 		on:change
 		on:input
 		on:focus

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

@@ -7,14 +7,17 @@ export default class MultiSelect extends SvelteComponentTyped<{
     source: any;
     title: any;
     required?: boolean | undefined;
-    feedback?: any[] | undefined;
+    invalid?: boolean | undefined;
+    feedback?: string[] | undefined;
     complexTarget?: boolean | undefined;
+    help?: boolean | undefined;
     itemId?: string | undefined;
     itemLabel?: string | undefined;
     itemGroup?: string | undefined;
     isMulti?: boolean | undefined;
     complexSource?: boolean | undefined;
     placeholder?: string | undefined;
+    loading?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
     input: CustomEvent<any>;
@@ -40,14 +43,17 @@ declare const __propDef: {
         source: any;
         title: any;
         required?: boolean | undefined;
-        feedback?: any[] | undefined;
+        invalid?: boolean | undefined;
+        feedback?: string[] | undefined;
         complexTarget?: boolean | undefined;
+        help?: boolean | undefined;
         itemId?: string | undefined;
         itemLabel?: string | undefined;
         itemGroup?: string | undefined;
         isMulti?: boolean | undefined;
         complexSource?: boolean | undefined;
         placeholder?: string | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/components/form/NumberInput.svelte

@@ -1,4 +1,5 @@
 <script>import InputContainer from "./InputContainer.svelte";
+import { helpStore } from "../../stores/pageStores";
 export let id = "";
 export let label = "";
 export let value = "";
@@ -7,9 +8,10 @@ export let invalid = false;
 export let required = false;
 export let feedback = [""];
 export let placeholder = "";
+export let help = false;
 </script>
 
-<InputContainer {label} {feedback} {required}>
+<InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
 		class="input variant-form-material"

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         required?: boolean | undefined;
         feedback?: string[] | undefined;
         placeholder?: string | undefined;
+        help?: boolean | undefined;
     };
     events: {
         input: Event;

package/dist/components/form/TextArea.svelte

@@ -7,16 +7,17 @@ export let invalid = false;
 export let required = false;
 export let feedback = [""];
 export let placeholder = "";
-</script>
-
-<InputContainer {label} {feedback} {required}>
-	<textarea
-		{id}
-		class="textarea variant-form-material"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value
-		on:input
-		{placeholder}
-	/>
-</InputContainer>
+export let help = false;
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help}>
+	<textarea
+		{id}
+		class="textarea variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         required?: boolean | undefined;
         feedback?: string[] | undefined;
         placeholder?: string | undefined;
+        help?: boolean | undefined;
     };
     events: {
         input: Event;

package/dist/components/form/TextInput.svelte

@@ -7,9 +7,12 @@ export let invalid = false;
 export let required = false;
 export let feedback = [""];
 export let placeholder = "";
+export let help = false;
 </script>
 
-<InputContainer {label} {feedback} {required}>
+
+
+<InputContainer {id} {label} {feedback} {required} {help}>
 	<input
 		{id}
 		class="input variant-form-material"

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         required?: boolean | undefined;
         feedback?: string[] | undefined;
         placeholder?: string | undefined;
+        help?: boolean | undefined;
     };
     events: {
         input: Event;

package/dist/components/page/Help.svelte

@@ -0,0 +1,38 @@
+<script lang=ts>import { helpStore } from "../../stores/pageStores";
+let Value;
+$:
+  helpStore.subscribe((value) => {
+    Value = value;
+  });
+let helpItem;
+$:
+  helpItem = getHelpItem(Value);
+function getHelpItem(value) {
+  if (value != void 0 && value.helpItems != void 0 && value.itemId != void 0) {
+    return value.itemId == "" ? { id: void 0, name: "", description: "" } : value.helpItems.find((h) => h.id === value.itemId);
+  }
+  return { id: void 0, name: "", description: "" };
+}
+window.origin;
+</script>
+{#if helpItem && helpItem.id}
+<div class="p-5 w-96 space-y-4" id={helpItem.id}>
+    <h3 class="h3">{ helpItem.name }</h3> 
+    <p>{@html helpItem.description }</p>
+     {#if helpItem.link}  
+     <p><a href="{helpItem.link}">... read more</a></p>
+     {/if}
+</div>
+{:else}
+<div class="p-5 w-96 space-y-4">
+    <h3 class="h3">Help</h3>
+    <div class="space-y-4">
+    <div class="grid grid-cols-3 gap-8">
+        <div class="placeholder animate-pulse" />
+        <div class="placeholder animate-pulse" />
+        <div class="placeholder animate-pulse" />
+    </div>
+    <div class="placeholder w-28 animate-pulse" />
+    </div>
+</div>
+{/if}

package/dist/components/page/Help.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HelpProps */
+/** @typedef {typeof __propDef.events}  HelpEvents */
+/** @typedef {typeof __propDef.slots}  HelpSlots */
+export default class Help extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HelpProps = typeof __propDef.props;
+export type HelpEvents = typeof __propDef.events;
+export type HelpSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/page/Page.svelte

@@ -1,21 +1,43 @@
-<script>import Menu from "./menu/Menu.svelte";
+<script>import { onMount } from "svelte";
+import Menu from "./menu/Menu.svelte";
+import Help from "./Help.svelte";
+import Breadcrumb from "./breadcrumb/Breadcrumb.svelte";
+import { popup } from "@skeletonlabs/skeleton";
+import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+import { storePopup } from "@skeletonlabs/skeleton";
+import { breadcrumbStore } from "../../stores/pageStores";
+storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+import { AppShell } from "@skeletonlabs/skeleton";
+import { helpStore } from "../../stores/pageStores";
 export let title = "";
 export let note = "";
 export let links = [];
 export let menu = true;
 export let footer = true;
+export let help = false;
+onMount(async () => {
+  console.log("on mount page ");
+  breadcrumbStore.clean();
+  breadcrumbStore.addItem({ label: title, link: window.location.pathname });
+});
+const popupClick = {
+  event: "click",
+  target: "popupClick",
+  placement: "top"
+};
 </script>
- 
- {#if menu}
+
+ {#if true}
   <Menu/>
  {/if}
+ <Breadcrumb {title}/>
 
  <div class="px-5 grid gap-5 content-center" >
 
-  <h3 class="h3">{title}</h3>
+  <!-- <h3 class="h3">{title}</h3>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
-  {/if}
+  {/if} -->
 
   <slot name="description" />
 
@@ -38,16 +60,28 @@ export let footer = true;
       {/if}
       <slot/>
     </div>
-    {#if $$slots.right}
-    <div class="w-fixed w-full max-w-min flex-shrink flex-grow-0 px-2">
-      <slot name="right" />
+    {#if $$slots.right || help}
+    <div class="w-fixed w-full max-w-min flex-shrink flex-grow-0 px-2" class:w-96:={help}>
+      <!--if help is active show Help-->
+      <!--if help is active and slot is set -->
+      <!-- help is deactiveated -->
+      <slot name="right"/>
+      
     </div>
     {/if}
     
+					
   </div>
   </div>
  
-
+  {#if help}
+  <button class="btn btn-sm variant-filled-warning fixed bottom-5 right-10" use:popup={popupClick}>?</button>
+    
+  <div class="card p-4 variant-filled-primary" data-popup="popupClick">
+    <Help />
+    <div class="arrow variant-filled-primary" />
+  </div>
+  {/if}
 
 
  {#if menu}

package/dist/components/page/Page.svelte.d.ts

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Link } from "../../models/Models";
+import type { linkType } from "../../models/Models";
 declare const __propDef: {
     props: {
         title?: string | undefined;
         note?: string | undefined;
-        links?: Link[] | undefined;
+        links?: linkType[] | undefined;
         menu?: boolean | undefined;
         footer?: boolean | undefined;
+        help?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Spinner.svelte

@@ -1,7 +1,7 @@
-<script>import { Position } from "../../models/Enums";
+<script>import { positionType } from "../../models/Enums";
 export let textCss = "text-secundary-500";
 export let label = "";
-export let position = Position.start;
+export let position = positionType.start;
 </script>
 
 <div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">

package/dist/components/page/Spinner.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { Position } from "../../models/Enums";
+import { positionType } from "../../models/Enums";
 declare const __propDef: {
     props: {
         textCss?: string | undefined;
         label?: string | undefined;
-        position?: Position | undefined;
+        position?: positionType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,32 @@
+<script>import { breadcrumbStore } from "../../../stores/pageStores";
+export let title;
+let list = [];
+$:
+  list;
+$:
+  breadcrumbStore.subscribe((value) => {
+    list = value?.items;
+  });
+</script>
+
+
+<div class="px-5 py-2">
+	<ol class="breadcrumb -p50">
+
+	<!--default home-->
+	<li class="crumb"><a class="anchor" href={"/"}>Home</a></li>
+	<li class="crumb-separator" aria-hidden>&rsaquo;</li>
+
+	{#each list as crumb, i}
+		<!-- If crumb index is less than the breadcrumb length minus 1 -->
+		{#if i < list.length - 1}
+			<li class="crumb"><a class="anchor" href={crumb.link}>{crumb.label}</a></li>
+			<li class="crumb-separator" aria-hidden>&rsaquo;</li>
+		{:else}
+			<li class="crumb">{crumb.label}</li>
+		{/if}
+	{/each}
+</ol>
+</div>
+
+

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};