@bexis2/bexis2-core-ui 0.2.11 → 0.2.13

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,65 @@
 <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);
-})
-
-
-
-
+	import { onMount } from 'svelte';
+	import { getMenuItems } from './MenuDataCaller';
+	import { menuStore } from '$store/pageStores';
+
+	import MenuBar from './MenuBar.svelte';
+	import SettingsBar from './SettingsBar.svelte';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faBars } from '@fortawesome/free-solid-svg-icons';
+	import { Accordion } from '@skeletonlabs/skeleton';
+
+	onMount(async () => {
+		let m = await getMenuItems();
+		menuStore.set(m);
+	});
+
+	let hamburger = true;
 </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}
+{#if $menuStore !== undefined}
+	<div
+		class="sm:flex h-min flex-row w-full justify-between items-center md:flex px-3 py-2 bg-tertiary-50 text-surface-800 z-50 shadow-md"
+	>
+		<div class="flex justify-between gap-5">
+			<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>
+			<button
+				class="w-min h-min variant-ghost-surface aspect-square p-3 rounded-lg sm:hidden justify-end btn"
+				on:click|preventDefault={() => (hamburger = !hamburger)}
+			>
+				<Fa icon={faBars} />
+			</button>
+		</div>
+
+		<div class="sm:flex w-full h-full sm:h-10" class:hidden={hamburger}>
+			<div class="sm:flex justify-between w-full">
+				<Accordion>
+					<div class="sm:flex w-full justify-between">
+						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-start gap-2 py-0"> -->
+						<MenuBar menuBar={$menuStore.MenuBar} />
+						<MenuBar menuBar={$menuStore.Extended} />
+						<!-- </div> -->
+						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
+						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
+							<MenuBar menuBar={$menuStore.AccountBar} />
+							<MenuBar menuBar={$menuStore.LaunchBar} />
+							<SettingsBar menuBar={$menuStore.Settings} />
+							<!-- </div> -->
+						</div>
+					</div>
+				</Accordion>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="placeholder h-14 bg-tertiary-50 shadow-md" />
+{/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;
+</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 });
- 
- 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}
- 
- 
- 
+{#if menuBar}
+	<div class="h-full place-self-center sm:flex gap-2 w-full sm:w-auto">
+		{#each menuBar as menubarItem}
+			<Item {menubarItem} {comboboxValue} />
+		{/each}
+	</div>
+{/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,55 @@
 <script lang="ts">
- import { popup } from '@skeletonlabs/skeleton';
+	import { Accordion, AccordionItem, 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-start',
+		// Close the popup when the item is clicked
+		closeQuery: '.listbox-item'
+	};
+</script>
 
+{#if menubarItem.Items.length < 1}
+	<div class="p-2">
+		<button class="grid" use:popup={popupCombobox} on:click={() => goTo(menubarItem.Url)}>
+			<span class="capitalize">{comboboxValue ?? menubarItem.Title}</span>
+		</button>
+	</div>
 {:else}
-
-
-<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} />
-
+	<div class="sm:hidden block">
+		<AccordionItem padding="p-2">
+			<svelte:fragment slot="summary"
+				><button class="flex items-center gap-x-1">
+					<span class="capitalize">{menubarItem.Title}</span>
+				</button></svelte:fragment
+			>
+			<svelte:fragment slot="content"
+				><MenuSublist {id} items={menubarItem.Items} /></svelte:fragment
+			></AccordionItem
+		>
+	</div>
+	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
+		<button class="flex items-center gap-x-1 px-2">
+			<span class="capitalize">{menubarItem.Title}▾</span>
+		</button>
+
+		<div class="z-50 w-max" data-popup={id}>
+			<MenuSublist {id} items={menubarItem.Items} />
+		</div>
+	</div>
 {/if}

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

@@ -1,48 +1,40 @@
 <script lang="ts">
-import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
-import type { MenuItem } from "./menu";
-import { goTo } from '$services/BaseCaller';
+	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+	import type { menuItemType } from '$models/Page';
+	import { goTo } from '$services/BaseCaller';
 
-export let id;
-export let items:MenuItem[];
+	export let items: menuItemType[];
 
+	let lastModule = '';
+	let first = true;
 
-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;
-  }
- }
+	// 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> 
+<ListBox class="sm:bg-white sm:border">
+	{#each items as item}
+		{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
+		<ListBoxItem
+			class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
+			bind:group={item.Title}
+			name="medium"
+			value={item.Title}
+			on:click={() => goTo(item.Url)}
+		>
+			{item.Title}
+		</ListBoxItem>
+	{/each}
+</ListBox>

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

@@ -1,40 +1,42 @@
 <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>
+	import { popup } from '@skeletonlabs/skeleton';
 
- <MenuSublist id="settings" items={menuBar} />
- 
+	import { AccordionItem, 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';
 
- {/if}
- 
- 
+	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}
+	<div class="sm:hidden">
+		<AccordionItem padding="p-2">
+			<svelte:fragment slot="summary"
+				><button class="flex items-center gap-x-1 text-sm text-surface-800 w-5 h-full">
+					<span class="capitalize"><Fa icon={faCog} /></span>
+				</button></svelte:fragment
+			>
+			<svelte:fragment slot="content"><MenuSublist items={menuBar} /></svelte:fragment>
+		</AccordionItem>
+	</div>
+	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
+		<button class="flex items-center gap-x-1">
+			<div class="hidden sm:block" />
+			<span class="capitalize"><Fa icon={faCog} /></span>
+		</button>
+		<div class="z-50 w-max" data-popup="settings">
+			<MenuSublist items={menuBar} />
+		</div>
+	</div>
+{/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 | #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 */
-
-}
+	/* 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 */
+}