@bexis2/bexis2-core-ui 0.2.12 → 0.2.13

package/README.md

@@ -1,4 +1,14 @@
 # bexis-core-ui
+## v0.2.13
+- add file reader types
+  - fileReaderInfoType,
+	- asciiFileReaderInfoType
+- add file reader enums
+  - decimalCharacterType,orientationType,textMarkerType,textSeperatorType
+- Table Change order of text filter options
+- fix menu
+- update navbar
+
 ## v0.2.12
 - update libs
 

package/dist/components/Table/TableFilter.svelte

@@ -39,6 +39,14 @@ const options = {
     }
   ],
   string: [
+    {
+      value: "contains",
+      label: "Contains"
+    },
+    {
+      value: "notcontains",
+      label: "Does not contain"
+    },
     {
       value: "isequal",
       label: "Is equal to"
@@ -51,14 +59,6 @@ const options = {
       value: "starts",
       label: "Starts with"
     },
-    {
-      value: "contains",
-      label: "Contains"
-    },
-    {
-      value: "notcontains",
-      label: "Does not contain"
-    },
     {
       value: "ends",
       label: "Ends with"
@@ -103,112 +103,112 @@ if (type === "object") {
     type = "date";
   }
 }
-</script>
-
-<form class="">
-	<button
-		class:variant-filled-primary={active}
-		class="btn w-max p-2"
-		type="button"
-		use:popup={popupFeatured}
-	>
-		<Fa icon={faFilter} size="12" />
-	</button>
-
-	<div data-popup={`${popupId}`}>
-		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
-			<button
-				class="btn variant-filled-primary btn-sm"
-				type="button"
-				on:click|preventDefault={() => {
-					firstOption = 'isequal';
-					firstValue = undefined;
-					secondOption = 'isequal';
-					secondValue = undefined;
-
-					$filterValue = [firstOption, firstValue, secondOption, secondValue];
-					active = false;
-				}}>Clear Filter</button
-			>
-
-			<label for="" class="label normal-case text-sm">Show rows with value that</label>
-			<div class="grid gap-2 w-full">
-				<select
-					class="select border border-primary-500 text-sm p-1"
-					aria-label="Show rows with value that"
-					bind:value={firstOption}
-					on:click|stopPropagation
-				>
-					{#each options[type] as option (option)}
-						<option value={option.value}>{option.label}</option>
-					{/each}
-				</select>
-				{#if type === 'number'}
-					<input
-						type="number"
-						class="input p-1 border border-primary-500"
-						bind:value={firstValue}
-						on:click|stopPropagation
-					/>
-				{:else if type === 'string'}
-					<input
-						type="text"
-						class="input p-1 border border-primary-500"
-						bind:value={firstValue}
-						on:click|stopPropagation
-					/>
-				{:else}
-					<input
-						type="date"
-						class="input p-1 border border-primary-500"
-						bind:value={firstValue}
-						on:click|stopPropagation
-					/>
-				{/if}
-			</div>
-			<label for="" class="label normal-case">And</label>
-			<div class="grid gap-2 w-max">
-				<select
-					class="select border border-primary-500 text-sm p-1"
-					aria-label="Show rows with value that"
-					bind:value={secondOption}
-					on:click|stopPropagation
-				>
-					{#each options[type] as option (option)}
-						<option value={option.value}>{option.label}</option>
-					{/each}
-				</select>
-				{#if type === 'number'}
-					<input
-						type="number"
-						class="input p-1 border border-primary-500"
-						bind:value={secondValue}
-						on:click|stopPropagation
-					/>
-				{:else if type === 'string'}
-					<input
-						type="text"
-						class="input p-1 border border-primary-500"
-						bind:value={secondValue}
-						on:click|stopPropagation
-					/>
-				{:else}
-					<input
-						type="date"
-						class="input p-1 border border-primary-500"
-						bind:value={secondValue}
-						on:click|stopPropagation
-					/>
-				{/if}
-			</div>
-			<button
-				class="btn variant-filled-primary btn-sm"
-				type="button"
-				on:click|preventDefault={() => {
-					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
-					$filterValue = [firstOption, firstValue, secondOption, secondValue];
-				}}>Apply</button
-			>
-		</div>
-	</div>
-</form>
+</script>
+
+<form class="">
+	<button
+		class:variant-filled-primary={active}
+		class="btn w-max p-2"
+		type="button"
+		use:popup={popupFeatured}
+	>
+		<Fa icon={faFilter} size="12" />
+	</button>
+
+	<div data-popup={`${popupId}`}>
+		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
+			<button
+				class="btn variant-filled-primary btn-sm"
+				type="button"
+				on:click|preventDefault={() => {
+					firstOption = 'isequal';
+					firstValue = undefined;
+					secondOption = 'isequal';
+					secondValue = undefined;
+
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+					active = false;
+				}}>Clear Filter</button
+			>
+
+			<label for="" class="label normal-case text-sm">Show rows with value that</label>
+			<div class="grid gap-2 w-full">
+				<select
+					class="select border border-primary-500 text-sm p-1"
+					aria-label="Show rows with value that"
+					bind:value={firstOption}
+					on:click|stopPropagation
+				>
+					{#each options[type] as option (option)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				{#if type === 'number'}
+					<input
+						type="number"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{:else if type === 'string'}
+					<input
+						type="text"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{:else}
+					<input
+						type="date"
+						class="input p-1 border border-primary-500"
+						bind:value={firstValue}
+						on:click|stopPropagation
+					/>
+				{/if}
+			</div>
+			<label for="" class="label normal-case">And</label>
+			<div class="grid gap-2 w-max">
+				<select
+					class="select border border-primary-500 text-sm p-1"
+					aria-label="Show rows with value that"
+					bind:value={secondOption}
+					on:click|stopPropagation
+				>
+					{#each options[type] as option (option)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				{#if type === 'number'}
+					<input
+						type="number"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
+				{:else if type === 'string'}
+					<input
+						type="text"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
+				{:else}
+					<input
+						type="date"
+						class="input p-1 border border-primary-500"
+						bind:value={secondValue}
+						on:click|stopPropagation
+					/>
+				{/if}
+			</div>
+			<button
+				class="btn variant-filled-primary btn-sm"
+				type="button"
+				on:click|preventDefault={() => {
+					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+				}}>Apply</button
+			>
+		</div>
+	</div>
+</form>

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

@@ -1,35 +1,61 @@
 <script>import { onMount } from "svelte";
-import { get } from "svelte/store";
 import { getMenuItems } from "./MenuDataCaller";
 import { menuStore } from "../../../stores/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);
 });
-</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}
+let hamburger = true;
+</script>
+
+
+{#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/dist/components/page/menu/MenuBar.svelte

@@ -4,11 +4,12 @@ storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 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}
+	<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/dist/components/page/menu/MenuBar.svelte.d.ts

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

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

@@ -1,4 +1,4 @@
-<script>import { popup } from "@skeletonlabs/skeleton";
+<script>import { Accordion, AccordionItem, popup } from "@skeletonlabs/skeleton";
 import MenuSublist from "./MenuSublist.svelte";
 import { goTo } from "../../../services/BaseCaller";
 export let menubarItem;
@@ -7,21 +7,38 @@ let id = Math.floor(Math.random() * 100).toString();
 let popupCombobox = {
   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>
+	<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>
 
-	<MenuSublist {id} items={menubarItem.Items} />
+		<div class="z-50 w-max" data-popup={id}>
+			<MenuSublist {id} items={menubarItem.Items} />
+		</div>
+	</div>
 {/if}

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

@@ -1,6 +1,5 @@
 <script>import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
 import { goTo } from "../../../services/BaseCaller";
-export let id;
 export let items;
 let lastModule = "";
 let first = true;
@@ -16,21 +15,19 @@ 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>
+
+<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/dist/components/page/menu/MenuSublist.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        id: any;
         items: menuItemType[];
     };
     events: {

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

@@ -1,8 +1,7 @@
 <script>import { popup } from "@skeletonlabs/skeleton";
-import { ListBox, ListBoxItem } from "@skeletonlabs/skeleton";
+import { AccordionItem } from "@skeletonlabs/skeleton";
 import Fa from "svelte-fa/src/fa.svelte";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
-import { goTo } from "../../../services/BaseCaller";
 export let menuBar;
 import MenuSublist from "./MenuSublist.svelte";
 let popupCombobox = {
@@ -12,12 +11,26 @@ 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}
+	<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/dist/index.d.ts

@@ -24,9 +24,9 @@ export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
-export type { userType, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType } from './models/Models.js';
+export type { userType, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType, fileInfoType, fileReaderInfoType, asciiFileReaderInfoType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
-export { positionType, pageContentLayoutType } from './models/Enums';
+export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -36,6 +36,6 @@ export { host, username, password, setApiConfig } from './stores/apiStores.js';
 //help
 export { helpStore } from './stores/pageStores';
 //enum
-export { positionType, pageContentLayoutType } from './models/Enums';
+export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/dist/models/Enums.d.ts

@@ -7,3 +7,21 @@ export declare enum pageContentLayoutType {
     full = "full",
     center = "center"
 }
+export declare enum decimalCharacterType {
+    point = 0,
+    comma = 1
+}
+export declare enum orientationType {
+    columnwise = 0,
+    rowwise = 1
+}
+export declare enum textSeperatorType {
+    tab = 9,
+    comma = 44,
+    semicolon = 59,
+    space = 32
+}
+export declare enum textMarkerType {
+    quotes = 0,
+    doubleQuotes = 1
+}

package/dist/models/Enums.js

@@ -9,3 +9,25 @@ export var pageContentLayoutType;
     pageContentLayoutType["full"] = "full";
     pageContentLayoutType["center"] = "center";
 })(pageContentLayoutType || (pageContentLayoutType = {}));
+export var decimalCharacterType;
+(function (decimalCharacterType) {
+    decimalCharacterType[decimalCharacterType["point"] = 0] = "point";
+    decimalCharacterType[decimalCharacterType["comma"] = 1] = "comma";
+})(decimalCharacterType || (decimalCharacterType = {}));
+export var orientationType;
+(function (orientationType) {
+    orientationType[orientationType["columnwise"] = 0] = "columnwise";
+    orientationType[orientationType["rowwise"] = 1] = "rowwise";
+})(orientationType || (orientationType = {}));
+export var textSeperatorType;
+(function (textSeperatorType) {
+    textSeperatorType[textSeperatorType["tab"] = 9] = "tab";
+    textSeperatorType[textSeperatorType["comma"] = 44] = "comma";
+    textSeperatorType[textSeperatorType["semicolon"] = 59] = "semicolon";
+    textSeperatorType[textSeperatorType["space"] = 32] = "space";
+})(textSeperatorType || (textSeperatorType = {}));
+export var textMarkerType;
+(function (textMarkerType) {
+    textMarkerType[textMarkerType["quotes"] = 0] = "quotes";
+    textMarkerType[textMarkerType["doubleQuotes"] = 1] = "doubleQuotes";
+})(textMarkerType || (textMarkerType = {}));

package/dist/models/Models.d.ts

@@ -1,6 +1,7 @@
 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';
 export interface linkType {
     label: string;
     url: string;
@@ -28,6 +29,23 @@ export interface fileUploaderModel {
     multiple: boolean;
     maxSize: number;
     lastModification: Date;
+    allFilesReadable: boolean;
+    asciiFileReaderInfo: asciiFileReaderInfoType;
+}
+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[];

package/dist/models/Models.js

@@ -1 +1 @@
-export {};
+import { decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './Enums';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "private": false,
   "scripts": {
     "dev": "vite dev",