@bexis2/bexis2-core-ui 0.2.11 → 0.2.12

package/dist/components/page/HelpPopUp.svelte

@@ -1,4 +1,4 @@
-<script lang=ts>import { helpStore } from "../../stores/pageStores";
+<script>import { helpStore } from "../../stores/pageStores";
 import Fa from "svelte-fa/src/fa.svelte";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { popup } from "@skeletonlabs/skeleton";
@@ -26,27 +26,33 @@ async function resetItemId() {
   await delay(100);
   helpStore.resetItemId();
 }
-</script>
-
-{#if active}
-    <button id="helpButton"class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md" use:popup={helpClick}><Fa icon={faQuestion}/></button>
-
-    <div class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md" data-popup="helpTarget">
-        {#if helpItem && helpItem.id}
-            <div class="p-5 w-96 space-y-4" id={"helpPopup." + helpItem.id}>
-                <h3 class="h3">{ helpItem.name }</h3> 
-                <p>{@html helpItem.description }</p>
-                {#if helpItem.link}  
-                <p><a class="anchor" href="{helpItem.link}">... read more</a></p>
-                {/if}
-            </div>
-        {:else}
-        <div class="p-5 w-96 space-y-4" id="helpPopup">
-            <h3 class="h3">Help</h3> 
-            <p>Hover over the Element, you like to know more about.</p>
-        </div>
-        {/if}
-        <div class="arrow variant-filled-primary" />
-      </div>
-{/if}
-
+</script>
+
+{#if active}
+	<button
+		id="helpButton"
+		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
+		use:popup={helpClick}><Fa icon={faQuestion} /></button
+	>
+
+	<div
+		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
+		data-popup="helpTarget"
+	>
+		{#if helpItem && helpItem.id}
+			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
+				<h3 class="h3">{helpItem.name}</h3>
+				<p>{@html helpItem.description}</p>
+				{#if helpItem.link}
+					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
+				{/if}
+			</div>
+		{:else}
+			<div class="p-5 w-96 space-y-4" id="helpPopup">
+				<h3 class="h3">Help</h3>
+				<p>Hover over the Element, you like to know more about.</p>
+			</div>
+		{/if}
+		<div class="arrow variant-filled-primary" />
+	</div>
+{/if}

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

@@ -1,15 +1,3 @@
-/** @typedef {typeof __propDef.props}  HelpPopUpProps */
-/** @typedef {typeof __propDef.events}  HelpPopUpEvents */
-/** @typedef {typeof __propDef.slots}  HelpPopUpSlots */
-export default class HelpPopUp extends SvelteComponentTyped<{
-    active?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HelpPopUpProps = typeof __propDef.props;
-export type HelpPopUpEvents = typeof __propDef.events;
-export type HelpPopUpSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -20,4 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export type HelpPopUpProps = typeof __propDef.props;
+export type HelpPopUpEvents = typeof __propDef.events;
+export type HelpPopUpSlots = typeof __propDef.slots;
+export default class HelpPopUp extends SvelteComponentTyped<HelpPopUpProps, HelpPopUpEvents, HelpPopUpSlots> {
+}
 export {};

package/dist/components/page/Page.svelte

@@ -1,6 +1,6 @@
 <script>import { onMount } from "svelte";
 import { pageContentLayoutType } from "../../models/Enums";
-import { AppShell, AppBar, Modal } from "@skeletonlabs/skeleton";
+import { AppShell, AppBar } from "@skeletonlabs/skeleton";
 import Menu from "./menu/Menu.svelte";
 import Footer from "./Footer.svelte";
 import Header from "./Header.svelte";
@@ -24,69 +24,59 @@ onMount(async () => {
   breadcrumbStore.clean();
   breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 });
-</script>
-
-<AppShell>
-
-  <!--header-->
-  <svelte:fragment slot="header">
-
-    <AppBar padding="0" spacing="space-y-0" background="white">
-      <svelte:fragment slot="headline">
-        <Header/>
-        {#if true}
-        <Menu/>
-        {/if}
-
-        <div class="grid grid-cols-2">
-          <Breadcrumb {title}/>
-          <Docs {links} {note}/>
-        </div>
-      </svelte:fragment>
-    </AppBar>
- 
-  </svelte:fragment>
-
-
-  <svelte:fragment slot="footer">
-   <Footer/>
-  </svelte:fragment>
-
-  <slot name="description" />
-
- <div class="flex flex-initial space-x-5">
-  
-  {#if $$slots.left}
-  <div class="p-5 flex-shrink-0 w-96 w-min-96  border-y border-solid border-surface-500">
-    <slot name="left" />
-  </div>
-  {/if}
-
-  {#if contentLayoutType === pageContentLayoutType.center}
-
-  <div class="flex justify-center w-screen ">
-    <div class="max-w-7xl  p-5 space-y-5 border-y border-solid border-surface-500">
-      <slot/>
-    </div>
-  </div>
-  {/if}
-
-  {#if contentLayoutType === pageContentLayoutType.full}
-  <div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
-     <slot/>
-  </div>
-  
-  {/if}
-
-
-  {#if $$slots.right}
-  <div class=" p-5 flex-shrink-0 w-96  border-y border-solid border-surface-500">
-    <slot name="right"/> 
-  </div> 
-  {/if}
-    						
-  </div>
-
-  <HelpPopUp active={help}/>
-
-</AppShell>
+</script>
+
+<AppShell>
+	<!--header-->
+	<svelte:fragment slot="header">
+		<AppBar padding="0" spacing="space-y-0" background="white">
+			<svelte:fragment slot="headline">
+				<Header />
+				{#if true}
+					<Menu />
+				{/if}
+
+				<div class="grid grid-cols-2">
+					<Breadcrumb {title} />
+					<Docs {links} {note} />
+				</div>
+			</svelte:fragment>
+		</AppBar>
+	</svelte:fragment>
+
+	<svelte:fragment slot="footer">
+		<Footer />
+	</svelte:fragment>
+
+	<slot name="description" />
+
+	<div class="flex flex-initial space-x-5">
+		{#if $$slots.left}
+			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
+				<slot name="left" />
+			</div>
+		{/if}
+
+		{#if contentLayoutType === pageContentLayoutType.center}
+			<div class="flex justify-center w-screen">
+				<div class="max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
+					<slot />
+				</div>
+			</div>
+		{/if}
+
+		{#if contentLayoutType === pageContentLayoutType.full}
+			<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
+				<slot />
+			</div>
+		{/if}
+
+		{#if $$slots.right}
+			<div class=" p-5 flex-shrink-0 w-96 border-y border-solid border-surface-500">
+				<slot name="right" />
+			</div>
+		{/if}
+	</div>
+
+	<HelpPopUp active={help} />
+</AppShell>

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { linkType } from "../../models/Models";
-import { pageContentLayoutType } from "../../models/Enums";
+import type { linkType } from '../../models/Models';
+import { pageContentLayoutType } from '../../models/Enums';
 declare const __propDef: {
     props: {
         title?: string | undefined;

package/dist/components/page/PageCaller.js

@@ -1,21 +1,19 @@
-import {Api} from "../../services/Api";
-
-
-export const getFooter = async () => {
-    try {
-      const response = await Api.get('/footer');
-      return response.data;
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  
-export const getHeader = async () => {
- try {
-   const response = await Api.get('/header');
-   return response.data;
- } catch (error) {
-   console.error(error);
- }
-};
+import { Api } from '../../services/Api';
+
+export const getFooter = async () => {
+	try {
+		const response = await Api.get('/footer');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+export const getHeader = async () => {
+	try {
+		const response = await Api.get('/header');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/dist/components/page/Spinner.svelte

@@ -5,15 +5,14 @@ export let position = positionType.center;
 </script>
 
 <div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
-<div
-	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] "
-	role="status"
->
-	<span
-		class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-		>Loading...</span
+	<div
+		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+		role="status"
 	>
+		<span
+			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+			>Loading...</span
+		>
+	</div>
+	<span>{label}</span>
 </div>
-<span>{label}</span>
-</div>
-

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { positionType } from "../../models/Enums";
+import { positionType } from '../../models/Enums';
 declare const __propDef: {
     props: {
         textCss?: string | undefined;

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

@@ -7,26 +7,22 @@ $:
   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>
-
-
+</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/menu/Menu.svelte

@@ -8,28 +8,28 @@ onMount(async () => {
   let m = await getMenuItems();
   menuStore.set(m);
 });
-</script>
-{#if $menuStore!== undefined}
-
-<div class="flex flex-row md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md">
-
- <div class="basis-8">
- {#if $menuStore.Logo}
-   <img src='data:{$menuStore.Logo.Mime};charset=utf-8;base64, {$menuStore.Logo.Data}' alt='{$menuStore.Logo.Name}' style='height:40px;' />
- {/if}
- </div>
-
-
-  <div class="flex items-center md:space-x-5 px-3 text-lg justify-start">
-    <MenuBar menuBar={$menuStore.MenuBar} />
-    <MenuBar menuBar={$menuStore.Extended} />
-  </div>
-  <div class="flex-auto w-64 flex items-left md:space-x-3 justify-end">
-    <MenuBar menuBar={$menuStore.AccountBar} />
-    <MenuBar menuBar={$menuStore.LaunchBar} />
-    <SettingsBar menuBar={$menuStore.Settings} />
-  </div>
-
-</div>
-
-{/if}
+</script>
+
+{#if $menuStore !== undefined}
+	<div class="flex flex-row md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md">
+		<div class="basis-8">
+			{#if $menuStore.Logo}
+				<img
+					src="data:{$menuStore.Logo.Mime};charset=utf-8;base64, {$menuStore.Logo.Data}"
+					alt={$menuStore.Logo.Name}
+					style="height:40px;"
+				/>
+			{/if}
+		</div>
+
+		<div class="flex items-center md:space-x-5 px-3 text-lg justify-start">
+			<MenuBar menuBar={$menuStore.MenuBar} />
+			<MenuBar menuBar={$menuStore.Extended} />
+		</div>
+		<div class="flex-auto w-64 flex items-left md:space-x-3 justify-end">
+			<MenuBar menuBar={$menuStore.AccountBar} />
+			<MenuBar menuBar={$menuStore.LaunchBar} />
+			<SettingsBar menuBar={$menuStore.Settings} />
+		</div>
+	</div>
+{/if}

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

@@ -1,4 +1,3 @@
-
 <script>import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
@@ -6,16 +5,10 @@ import Item from "./MenuItem.svelte";
 export let menuBar;
 let comboboxValue;
 let radomNumber = Math.floor(Math.random() * 100);
-</script>
- 
- 
- {#if menuBar}
- {#each menuBar as menubarItem}
- 
- <Item {menubarItem}{comboboxValue}/>
- 
- {/each}
- {/if}
- 
- 
- 
+</script>
+
+{#if menuBar}
+	{#each menuBar as menubarItem}
+		<Item {menubarItem} {comboboxValue} />
+	{/each}
+{/if}

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        menuBar: MenuItem[];
+        menuBar: menuItemType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/menu/MenuDataCaller.js

@@ -1,11 +1,10 @@
-import {Api} from "../../../services/Api";
-
-
-export const getMenuItems = async () => {
-    try {
-      const response = await Api.get('/menu');
-      return response.data;
-    } catch (error) {
-      console.error(error);
-    }
-  };
+import { Api } from '../../../services/Api';
+
+export const getMenuItems = async () => {
+	try {
+		const response = await Api.get('/menu');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

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

@@ -12,20 +12,16 @@ let popupCombobox = {
   closeQuery: ".listbox-item"
 };
 </script>
-{#if menubarItem.Items.length<1} 
-
-<button use:popup={popupCombobox} on:click={()=> goTo(menubarItem.Url)}>
-<span class="capitalize">{comboboxValue ?? menubarItem.Title}</span>
-</button>
 
+{#if menubarItem.Items.length < 1}
+	<button use:popup={popupCombobox} on:click={() => goTo(menubarItem.Url)}>
+		<span class="capitalize">{comboboxValue ?? menubarItem.Title}</span>
+	</button>
 {:else}
+	<button class="flex items-center gap-x-1" use:popup={popupCombobox}>
+		<span class="capitalize">{menubarItem.Title}</span>
+		<div class="before:content-['▾']" />
+	</button>
 
-
-<button class="flex items-center gap-x-1 " use:popup={popupCombobox}>
-<span class="capitalize">{menubarItem.Title}</span>
-<div class="before:content-['▾']"></div>
-</button>
-
-<MenuSublist {id} items={menubarItem.Items} />
-
+	<MenuSublist {id} items={menubarItem.Items} />
 {/if}

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

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

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

@@ -16,20 +16,21 @@ function isNewModule(module) {
     return true;
   }
 }
-</script>
-
-<div class="z-50 w-max" data-popup={id}>
- <ListBox class="bg-white border-solid border border-surface-500">
-  {#each items as item}
-   {#if isNewModule(item.Module) }<hr class="text-surface-800">{/if}
-   <ListBoxItem class="bg-white text-sm text-surface-800 py-1 hover:bg-surface-100 hover:text-secondary-500" 
-      bind:group={item.Title} 
-      name="medium" 
-      value={item.Title}
-      on:click={()=> goTo(item.Url)}
-      >
-    {item.Title}
-   </ListBoxItem>
-   {/each}
- </ListBox>
-</div> 
+</script>
+
+<div class="z-50 w-max" data-popup={id}>
+	<ListBox class="bg-white border-solid border border-surface-500">
+		{#each items as item}
+			{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
+			<ListBoxItem
+				class="bg-white text-sm text-surface-800 py-1 hover:bg-surface-100 hover:text-secondary-500"
+				bind:group={item.Title}
+				name="medium"
+				value={item.Title}
+				on:click={() => goTo(item.Url)}
+			>
+				{item.Title}
+			</ListBoxItem>
+		{/each}
+	</ListBox>
+</div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
         id: any;
-        items: MenuItem[];
+        items: menuItemType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -12,17 +12,12 @@ let popupCombobox = {
   // Close the popup when the item is clicked
   closeQuery: ".listbox-item"
 };
-</script>
- 
- {#if menuBar}
- <button class="flex items-center gap-x-1 text-sm text-surface-800" use:popup={popupCombobox}>
- <span class="capitalize"><Fa icon={faCog} /></span>
- 
- </button>
-
- <MenuSublist id="settings" items={menuBar} />
- 
-
- {/if}
- 
- 
+</script>
+
+{#if menuBar}
+	<button class="flex items-center gap-x-1 text-sm text-surface-800" use:popup={popupCombobox}>
+		<span class="capitalize"><Fa icon={faCog} /></span>
+	</button>
+
+	<MenuSublist id="settings" items={menuBar} />
+{/if}

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MenuItem } from "./menu";
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        menuBar: MenuItem[];
+        menuBar: menuItemType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/css/core.ui.postcss

@@ -1,14 +1,17 @@
 /*place global styles here */
-html, body { @apply h-full}
+html,
+body {
+	@apply h-full;
+}
 
-h1{
- @apply text-primary-500;
+h1 {
+	@apply text-primary-500;
 }
 
 :root {
-	--background:rgb(var(--color-surface-200))
- }
+	--background: rgb(var(--color-surface-200));
+}
 
-	[type='text']:focus{
-	--tw-ring-color:#00000;
+[type='text']:focus {
+	--tw-ring-color: #00000;
 }