@bexis2/bexis2-core-ui 0.2.10 → 0.2.12

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

@@ -1,22 +1,20 @@
 <script lang="ts">
- import { positionType } from "$lib/models/Enums";
-
-	export let textCss = "text-secundary-500"
-	export let label = "";
-	export let position:positionType = positionType.start;
+	import { positionType } from '$lib/models/Enums';
 
+	export let textCss = 'text-surface-600';
+	export let label = '';
+	export let position: positionType = positionType.center;
 </script>
 
-<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">
-<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] {textCss}"
-	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="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>
+	<span>{label}</span>
 </div>
-<span>{label}</span>
-</div>
-

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

@@ -1,43 +1,31 @@
-<script lang="ts">
-
- import { breadcrumbStore } from '$store/pageStores';
- import type{ breadcrumbItemType } from '$models/Page';
-
-
- export let title;
-
-
- let list:breadcrumbItemType[] = [];
- $: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>
-
-
+<script lang="ts">
+	import { breadcrumbStore } from '$store/pageStores';
+	import type { breadcrumbItemType } from '$models/Page';
+
+	export let title;
+
+	let list: breadcrumbItemType[] = [];
+	$: 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/src/lib/components/page/menu/Menu.svelte

@@ -1,47 +1,40 @@
-<script lang="ts">
-
- import { onMount } from 'svelte';
- import { get } from 'svelte/store';
- import { getMenuItems}  from './MenuDataCaller';
- import { menuStore } from '$store/pageStores';
-
- import type { MenuModel } from "$models/Page";
-
- import MenuBar from './MenuBar.svelte';
- import SettingsBar from './SettingsBar.svelte';
-
-
-
- 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 lang="ts">
+	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+	import { getMenuItems } from './MenuDataCaller';
+	import { menuStore } from '$store/pageStores';
+
+	import type { MenuModel } from '$models/Page';
+
+	import MenuBar from './MenuBar.svelte';
+	import SettingsBar from './SettingsBar.svelte';
+
+	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}

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

@@ -1,31 +1,20 @@
-
-<script lang="ts">
-
- import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
- import { storePopup } from '@skeletonlabs/skeleton';
- storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
- 
- import type { MenuItem } from "./menu";
- import Item from "./MenuItem.svelte";
- 
- export let menuBar:MenuItem [];
- 
- let comboboxValue: string;
- 
- let radomNumber = Math.floor(Math.random() * 100);
- 
- 
- 
- </script>
- 
- 
- {#if menuBar}
- {#each menuBar as menubarItem}
- 
- <Item {menubarItem}{comboboxValue}/>
- 
- {/each}
- {/if}
- 
- 
- 
+<script lang="ts">
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	import type { menuItemType } from '$models/Page';
+	import Item from './MenuItem.svelte';
+
+	export let menuBar: menuItemType[];
+
+	let comboboxValue: string;
+
+	let radomNumber = Math.floor(Math.random() * 100);
+</script>
+
+{#if menuBar}
+	{#each menuBar as menubarItem}
+		<Item {menubarItem} {comboboxValue} />
+	{/each}
+{/if}

package/src/lib/components/page/menu/MenuDataCaller.js

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

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

@@ -1,44 +1,38 @@
 <script lang="ts">
- import { popup } from '@skeletonlabs/skeleton';
+	import { popup } from '@skeletonlabs/skeleton';
 
-//uicomponents
-import MenuSublist from './MenuSublist.svelte';
+	//uicomponents
+	import MenuSublist from './MenuSublist.svelte';
 
- //types
- import type { PopupSettings } from '@skeletonlabs/skeleton';
- import type { MenuItem } from "$models/Page";
+	//types
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	import type { menuItemType } from '$models/Page';
 
- import { goTo } from '$services/BaseCaller';
+	import { goTo } from '$services/BaseCaller';
 
+	export let menubarItem: menuItemType;
+	export let comboboxValue;
 
- export let menubarItem:MenuItem;
- export let comboboxValue;
+	let id = Math.floor(Math.random() * 100).toString();
 
- let id = Math.floor(Math.random() * 100).toString();
-
- let popupCombobox: PopupSettings = {
-event: 'click',
-target: id,
-placement: 'bottom',
-// Close the popup when the item is clicked
-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>
+	let popupCombobox: PopupSettings = {
+		event: 'click',
+		target: id,
+		placement: 'bottom',
+		// Close the popup when the item is clicked
+		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>
 {: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/src/lib/components/page/menu/MenuSublist.svelte

@@ -1,48 +1,43 @@
-<script lang="ts">
-import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
-import type { MenuItem } from "./menu";
-import { goTo } from '$services/BaseCaller';
-
-export let id;
-export let items:MenuItem[];
-
-
-let lastModule = "";
-  let first = true;
- 
-  // store last module
- function isNewModule(module)
- {
-  if(module === lastModule ){
-    return false;
-  }
-  else
-  {
-    lastModule = module;
-    if(first)
-    {
-      first = false;
-      return false;
-    }
-    
-    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 lang="ts">
+	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+	import type { menuItemType } from '$models/Page';
+	import { goTo } from '$services/BaseCaller';
+
+	export let id;
+	export let items: menuItemType[];
+
+	let lastModule = '';
+	let first = true;
+
+	// store last module
+	function isNewModule(module) {
+		if (module === lastModule) {
+			return false;
+		} else {
+			lastModule = module;
+			if (first) {
+				first = false;
+				return false;
+			}
+
+			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>

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

@@ -1,40 +1,31 @@
-<script lang="ts">
-  import { popup } from '@skeletonlabs/skeleton';
-  import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
- 
-  import type { PopupSettings } from '@skeletonlabs/skeleton';
-  import type { MenuItem } from "./menu";
-  import Fa from 'svelte-fa/src/fa.svelte'
-  import { faCog } from '@fortawesome/free-solid-svg-icons'
- 
-  import { goTo } from '$services/BaseCaller';
- 
-  export let menuBar:MenuItem [];
-  //uicomponents
-  import MenuSublist from './MenuSublist.svelte';
- 
- 
- 
- 
-  let popupCombobox: PopupSettings = {
-    event: 'click',
-    target: 'settings',
-    placement: 'bottom',
-    // 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 lang="ts">
+	import { popup } from '@skeletonlabs/skeleton';
+	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	import type { menuItemType } from '$models/Page';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faCog } from '@fortawesome/free-solid-svg-icons';
+
+	import { goTo } from '$services/BaseCaller';
+
+	export let menuBar: menuItemType[];
+	//uicomponents
+	import MenuSublist from './MenuSublist.svelte';
+
+	let popupCombobox: PopupSettings = {
+		event: 'click',
+		target: 'settings',
+		placement: 'bottom',
+		// 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}

package/src/lib/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;
 }

package/src/lib/css/themes/theme-bexis2.css

@@ -82,16 +82,15 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-/* surface | #dddddd */
---color-surface-50: 250 250 250; /* ⬅ #fafafa */
---color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
---color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
---color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
---color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
---color-surface-500: 221 221 221; /* ⬅ #dddddd */
---color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
---color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
---color-surface-800: 133 133 133; /* ⬅ #858585 */
---color-surface-900: 80 80 80; /* ⬅ #6c6c6c */
-
-}
+	/* surface | #c7c7c7 */
+	--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
+	--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
+	--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
+	--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
+	--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
+	--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
+	--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
+	--color-surface-700: 149 149 149; /* ⬅ #959595 */
+	--color-surface-800: 119 119 119; /* ⬅ #777777 */
+	--color-surface-900: 98 98 98; /* ⬅ #626262 */
+}