@bexis2/bexis2-core-ui 0.1.11 → 0.1.13

package/README.md

@@ -1,4 +1,15 @@
 # bexis-core-ui
+## v0.1.13
+### update
+- MultiSelect
+  - loading flag
+  - isValid
+
+## v0.1.12
+### update
+- MultiSelect
+  - pass all events from svelte select
+
 ## v0.1.11
 ### update
 - MultiSelect

package/dist/components/form/MultiSelect.svelte

@@ -15,8 +15,10 @@
 	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
 
 	let isLoaded = false;
 
@@ -79,7 +81,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 +121,7 @@
 
 		if(!isMulti)
 		{
-			console.log("onmount",complexSource,complexTarget,value,target)
+			//console.log("onmount",complexSource,complexTarget,value,target)
 			if(!complexSource && !complexTarget) 
 			{
 					value = {
@@ -157,6 +159,17 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
+		hasError={invalid}
+		{loading}
+		on:change
+		on:input
+		on:focus
+		on:blur
+		on:clear
+		on:loaded
+		on:error
+		on:filter
+		on:hoverItem
 	/>
 
 </InputContainer>

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

@@ -7,7 +7,8 @@ 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;
     itemId?: string | undefined;
     itemLabel?: string | undefined;
@@ -15,7 +16,18 @@ export default class MultiSelect extends SvelteComponentTyped<{
     isMulti?: boolean | undefined;
     complexSource?: boolean | undefined;
     placeholder?: string | undefined;
+    loading?: boolean | undefined;
 }, {
+    change: CustomEvent<any>;
+    input: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    clear: CustomEvent<any>;
+    loaded: CustomEvent<any>;
+    error: CustomEvent<any>;
+    filter: CustomEvent<any>;
+    hoverItem: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -30,7 +42,8 @@ declare const __propDef: {
         source: any;
         title: any;
         required?: boolean | undefined;
-        feedback?: any[] | undefined;
+        invalid?: boolean | undefined;
+        feedback?: string[] | undefined;
         complexTarget?: boolean | undefined;
         itemId?: string | undefined;
         itemLabel?: string | undefined;
@@ -38,8 +51,19 @@ declare const __propDef: {
         isMulti?: boolean | undefined;
         complexSource?: boolean | undefined;
         placeholder?: string | undefined;
+        loading?: boolean | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+        input: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        clear: CustomEvent<any>;
+        loaded: CustomEvent<any>;
+        error: CustomEvent<any>;
+        filter: CustomEvent<any>;
+        hoverItem: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/page/Page.svelte

@@ -11,22 +11,44 @@ export let footer = true;
  {/if}
 
  <div class="px-5 grid gap-5 content-center" >
-  <h1 class="h1">{title}</h1>
+
+  <h3 class="h3">{title}</h3>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
   {/if}
 
   <slot name="description" />
- 
-  {#if links.length>0}
-  <div class="py-5">
-    {#each	links as link}
-     <a class="chip variant-ringed" href={link.url}>{link.label}</a>
-    {/each}
+
+
+ <div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
+  {#if $$slots.left}
+  <div class="w-fixed w-full max-w-min flex-shrink flex-grow-1 px-4">
+    <slot name="left" />
   </div>
   {/if}
-  <slot/>
- </div>
+    
+    <div class="w-full flex-initial items-center justify-center pt-1 px-3">
+      <slot name="middle" />
+      {#if links.length>0}
+      <div class="py-5">
+        {#each	links as link}
+         <a class="chip variant-ringed" href={link.url}>{link.label}</a>
+        {/each}
+      </div>
+      {/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" />
+    </div>
+    {/if}
+    
+  </div>
+  </div>
+ 
+
+
 
  {#if menu}
    <!-- footer -->

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

@@ -13,7 +13,10 @@ declare const __propDef: {
     };
     slots: {
         description: {};
+        left: {};
+        middle: {};
         default: {};
+        right: {};
     };
 };
 export type PageProps = typeof __propDef.props;

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

@@ -7,28 +7,32 @@ import SettingsBar from "./SettingsBar.svelte";
 let menu;
 onMount(async () => {
   menu = await getMenuItems();
+  console.log(menu);
 });
 </script>
 
 {#if menu}
 
 <div class="flex flex-row md:flex px-3 py-2">
- <div class="basis-2/3">
+ <div class="basis-8">
  {#if menu.Logo}
    <img src='data:{menu.Logo.Mime};charset=utf-8;base64, {menu.Logo.Data}' alt='{menu.Logo.Name}' style='height:40px;' />
  {/if}
  </div>
 
- <div class="flex-auto w-64 flex items-center md:space-x-3 justify-end">
 
+  <div class="flex items-center md:space-x-5 px-3 text-lg justify-start">
+ 
+    <MenuBar menuBar={menu.MenuBar} />
+    <MenuBar menuBar={menu.Extended} />
+  </div>
+  <div class="flex-auto w-64 flex items-left md:space-x-3 justify-end">
  <MenuBar menuBar={menu.AccountBar} />
  <MenuBar menuBar={menu.LaunchBar} />
  <SettingsBar menuBar={menu.Settings} />
+
  </div>
 
 </div>
-<div class="flex items-center md:space-x-5 px-3 text-lg">
- <MenuBar menuBar={menu.MenuBar} />
- <MenuBar menuBar={menu.Extended} />
-</div>
+
 {/if}

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

@@ -6,6 +6,7 @@ import Item from "./MenuItem.svelte";
 export let menuBar;
 let comboboxValue;
 let radomNumber = Math.floor(Math.random() * 100);
+console.log(menuBar);
 </script>
  
  

package/dist/components/page/menu/MenuBar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "../../models/menu";
+import type { MenuItem } from "./menu";
 declare const __propDef: {
     props: {
         menuBar: MenuItem[];

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

@@ -28,7 +28,7 @@ let popupCombobox = {
 <ListBox rounded="rounded-none">
 {#each menubarItem.Items as item}
 
-<ListBoxItem class="bg-white text-gray-900 py-1 text-sm" bind:group={menubarItem.Title} name="medium" value={item.Title}>{item.Title}</ListBoxItem>
+<ListBoxItem class="bg-white text-gray-900 py-1 text-sm"  bind:group={item.Title} name="medium" value={item.Title}><a class="bg-white text-gray-900 py-1 text-sm"  href={item.Url}>{item.Title}</a></ListBoxItem>
 {/each}
 </ListBox>
 </div>

package/dist/components/page/menu/MenuItem.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import type { MenuItem } from "./menu";
 declare const __propDef: {
     props: {
-        menubarItem: any;
+        menubarItem: MenuItem;
         comboboxValue: any;
     };
     events: {

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

@@ -35,7 +35,7 @@ let popupCombobox = {
 <ListBox rounded="rounded-none bg-white">
 {#each menuBar as menubarItem}
 {#if isNewModule(menubarItem.Module) }<hr class="bg-gray-900">{/if}
-<ListBoxItem class="bg-white text-gray-900 py-1" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}>{menubarItem.Title}</ListBoxItem>
+<ListBoxItem class="bg-white text-gray-900 py-1" href="{menubarItem.Url}" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}><a href={menubarItem.Url}>{menubarItem.Title}</a></ListBoxItem>
 
 
 

package/dist/components/page/menu/SettingsBar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "../../models/menu";
+import type { MenuItem } from "./menu";
 declare const __propDef: {
     props: {
         menuBar: MenuItem[];

package/package.json

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

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

@@ -15,8 +15,10 @@
 	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
 
 	let isLoaded = false;
 
@@ -79,7 +81,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 +121,7 @@
 
 		if(!isMulti)
 		{
-			console.log("onmount",complexSource,complexTarget,value,target)
+			//console.log("onmount",complexSource,complexTarget,value,target)
 			if(!complexSource && !complexTarget) 
 			{
 					value = {
@@ -157,6 +159,17 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
+		hasError={invalid}
+		{loading}
+		on:change
+		on:input
+		on:focus
+		on:blur
+		on:clear
+		on:loaded
+		on:error
+		on:filter
+		on:hoverItem
 	/>
 
 </InputContainer>

package/src/lib/components/page/Page.svelte

@@ -19,22 +19,44 @@
  {/if}
 
  <div class="px-5 grid gap-5 content-center" >
-  <h1 class="h1">{title}</h1>
+
+  <h3 class="h3">{title}</h3>
   {#if note}
     <blockquote class="blockquote">{note}</blockquote>
   {/if}
 
   <slot name="description" />
- 
-  {#if links.length>0}
-  <div class="py-5">
-    {#each	links as link}
-     <a class="chip variant-ringed" href={link.url}>{link.label}</a>
-    {/each}
+
+
+ <div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
+  {#if $$slots.left}
+  <div class="w-fixed w-full max-w-min flex-shrink flex-grow-1 px-4">
+    <slot name="left" />
   </div>
   {/if}
-  <slot/>
- </div>
+    
+    <div class="w-full flex-initial items-center justify-center pt-1 px-3">
+      <slot name="middle" />
+      {#if links.length>0}
+      <div class="py-5">
+        {#each	links as link}
+         <a class="chip variant-ringed" href={link.url}>{link.label}</a>
+        {/each}
+      </div>
+      {/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" />
+    </div>
+    {/if}
+    
+  </div>
+  </div>
+ 
+
+
 
  {#if menu}
    <!-- footer -->

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

@@ -17,6 +17,7 @@
  onMount(async () => {
   
   menu = await getMenuItems();
+  console.log(menu);
 
 })
 
@@ -28,22 +29,25 @@
 {#if menu}
 
 <div class="flex flex-row md:flex px-3 py-2">
- <div class="basis-2/3">
+ <div class="basis-8">
  {#if menu.Logo}
    <img src='data:{menu.Logo.Mime};charset=utf-8;base64, {menu.Logo.Data}' alt='{menu.Logo.Name}' style='height:40px;' />
  {/if}
  </div>
 
- <div class="flex-auto w-64 flex items-center md:space-x-3 justify-end">
 
+  <div class="flex items-center md:space-x-5 px-3 text-lg justify-start">
+ 
+    <MenuBar menuBar={menu.MenuBar} />
+    <MenuBar menuBar={menu.Extended} />
+  </div>
+  <div class="flex-auto w-64 flex items-left md:space-x-3 justify-end">
  <MenuBar menuBar={menu.AccountBar} />
  <MenuBar menuBar={menu.LaunchBar} />
  <SettingsBar menuBar={menu.Settings} />
+
  </div>
 
 </div>
-<div class="flex items-center md:space-x-5 px-3 text-lg">
- <MenuBar menuBar={menu.MenuBar} />
- <MenuBar menuBar={menu.Extended} />
-</div>
+
 {/if}

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

@@ -5,7 +5,7 @@
  import { storePopup } from '@skeletonlabs/skeleton';
  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
  
- import type { MenuItem } from "../../models/menu";
+ import type { MenuItem } from "./menu";
  import Item from "./MenuItem.svelte";
  
  export let menuBar:MenuItem [];
@@ -15,6 +15,7 @@
  let radomNumber = Math.floor(Math.random() * 100);
  
  
+ console.log(menuBar);
  </script>
  
  

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

@@ -3,8 +3,9 @@
  import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
 
  import type { PopupSettings } from '@skeletonlabs/skeleton';
+ import type { MenuItem } from "./menu";
 
- export let menubarItem;
+ export let menubarItem:MenuItem;
  export let comboboxValue;
 
  let radomNumber = Math.floor(Math.random() * 100).toString();
@@ -35,7 +36,7 @@ closeQuery: '.listbox-item'
 <ListBox rounded="rounded-none">
 {#each menubarItem.Items as item}
 
-<ListBoxItem class="bg-white text-gray-900 py-1 text-sm" bind:group={menubarItem.Title} name="medium" value={item.Title}>{item.Title}</ListBoxItem>
+<ListBoxItem class="bg-white text-gray-900 py-1 text-sm"  bind:group={item.Title} name="medium" value={item.Title}><a class="bg-white text-gray-900 py-1 text-sm"  href={item.Url}>{item.Title}</a></ListBoxItem>
 {/each}
 </ListBox>
 </div>

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

@@ -3,7 +3,7 @@
  import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
 
  import type { PopupSettings } from '@skeletonlabs/skeleton';
- import type { MenuItem } from "../../models/menu";
+ import type { MenuItem } from "./menu";
  import Fa from 'svelte-fa/src/fa.svelte'
  import { faCog } from '@fortawesome/free-solid-svg-icons'
 
@@ -50,7 +50,7 @@ closeQuery: '.listbox-item'
 <ListBox rounded="rounded-none bg-white">
 {#each menuBar as menubarItem}
 {#if isNewModule(menubarItem.Module) }<hr class="bg-gray-900">{/if}
-<ListBoxItem class="bg-white text-gray-900 py-1" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}>{menubarItem.Title}</ListBoxItem>
+<ListBoxItem class="bg-white text-gray-900 py-1" href="{menubarItem.Url}" bind:group={menubarItem.Title} name="medium" value={menubarItem.Title}><a href={menubarItem.Url}>{menubarItem.Title}</a></ListBoxItem>