@bexis2/bexis2-core-ui 0.2.12 → 0.2.14

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { popup } from '@skeletonlabs/skeleton';
+	import { Accordion, AccordionItem, popup } from '@skeletonlabs/skeleton';
 
 	//uicomponents
 	import MenuSublist from './MenuSublist.svelte';
@@ -18,21 +18,38 @@
 	let popupCombobox: PopupSettings = {
 		event: 'click',
 		target: id,
-		placement: 'bottom',
+		placement: 'bottom-start',
 		// 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>
+	<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-['▾']" />
-	</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,43 +1,40 @@
-<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>
+<script lang="ts">
+	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+	import type { menuItemType } from '$models/Page';
+	import { goTo } from '$services/BaseCaller';
+
+	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>
+
+<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,31 +1,42 @@
-<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}
+<script lang="ts">
+	import { popup } from '@skeletonlabs/skeleton';
+
+	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';
+
+	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/index.ts

@@ -57,10 +57,13 @@ export { host, username, password, setApiConfig } from './stores/apiStores.js';
 export type {
 	userType,
 	inputType,
-	fileUploaderModel,
+	fileUploaderType,
 	linkType,
 	listItemType,
-	keyValuePairType
+	keyValuePairType,
+	fileInfoType,
+	fileReaderInfoType,
+	asciiFileReaderInfoType
 } from './models/Models.js';
 
 //help
@@ -68,7 +71,7 @@ export { helpStore } from '$store/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
 
 //enum
-export { positionType, pageContentLayoutType } from './models/Enums';
+export { positionType, pageContentLayoutType,decimalCharacterType,orientationType,textMarkerType,textSeperatorType } from './models/Enums';
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/src/lib/models/Enums.ts

@@ -8,3 +8,25 @@ export enum pageContentLayoutType {
 	full = 'full',
 	center = 'center'
 }
+
+export enum decimalCharacterType {
+	point,
+	comma
+}
+
+export enum orientationType {
+	columnwise,
+	rowwise
+}
+
+export enum textSeperatorType {
+	tab = 9,
+	comma = 44,
+	semicolon = 59,
+	space = 32
+}
+
+export enum textMarkerType {
+	quotes,
+	doubleQuotes
+}

package/src/lib/models/Models.ts

@@ -2,6 +2,8 @@ import type { SvelteComponent } from 'svelte';
 import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
 import type { Writable } from 'svelte/store';
 
+import {decimalCharacterType, orientationType,textMarkerType,textSeperatorType} from './Enums'
+
 // page
 export interface linkType {
 	label: string;
@@ -27,15 +29,33 @@ export interface fileInfoType {
 	validationHash: string;
 }
 
-export interface fileUploaderModel {
+export interface fileUploaderType {
 	accept: string[];
 	existingFiles: fileInfoType[];
 	descriptionType: number;
 	multiple: boolean;
 	maxSize: number;
-	lastModification: Date;
 }
 
+export interface asciiFileReaderInfoType extends fileReaderInfoType {
+	cells: boolean[];
+	seperator: textSeperatorType;
+	textMarker: textMarkerType;
+}
+
+
+export interface fileReaderInfoType {
+	decimal: decimalCharacterType;
+	orientation: orientationType;
+	offset: number;
+	variables: number;
+	data: number;
+	unit: number;
+	description: number;
+	dateformat: string;
+}
+
+
 export interface filesType {
 	accepted: Blob[];
 	rejected: Blob[];