@bexis2/bexis2-core-ui 0.1.10 → 0.1.12

package/README.md

@@ -1,12 +1,22 @@
 # bexis-core-ui
+## v0.1.11
+### update
+- MultiSelect
+  - grouped source also works now in case of complex source & return single value
 
-## v0.1.9
+## v0.1.10
 ### update
 - MultiSelect
-  - pass events - placeholder
   - set isMulti to false to get also a single value
 
 
+## v0.1.9
+### update
+- MultiSelect
+  - pass events 
+  - placeholder
+
+
 ## v0.1.8
 ### update
 - MultiSelect

package/dist/components/form/MultiSelect.svelte

@@ -131,6 +131,7 @@
 			if(complexSource && complexTarget) 
 			{
 					value = target;
+					groupBy = (item) => item[itemGroup]
 			}
 
 			if(complexSource && !complexTarget) 
@@ -156,6 +157,15 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
+		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

@@ -16,6 +16,16 @@ export default class MultiSelect extends SvelteComponentTyped<{
     complexSource?: boolean | undefined;
     placeholder?: string | 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>;
 }, {}> {
 }
@@ -40,6 +50,16 @@ declare const __propDef: {
         placeholder?: string | 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.10",
+  "version": "0.1.12",
   "private": false,
   "scripts": {
     "dev": "vite dev",

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

@@ -131,6 +131,7 @@
 			if(complexSource && complexTarget) 
 			{
 					value = target;
+					groupBy = (item) => item[itemGroup]
 			}
 
 			if(complexSource && !complexTarget) 
@@ -156,6 +157,15 @@
 		multiple={isMulti}
 		bind:value
 		{placeholder}
+		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>