@bexis2/bexis2-core-ui 0.2.12 → 0.2.14

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;
@@ -21,13 +22,27 @@ export interface fileInfoType {
     description: string;
     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[];

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.14",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/Table/TableFilter.svelte

@@ -1,222 +1,222 @@
-<script lang="ts">
-	import Fa from 'svelte-fa/src/fa.svelte';
-	import { faFilter } from '@fortawesome/free-solid-svg-icons';
-	import { popup } from '@skeletonlabs/skeleton';
-	import type { PopupSettings } from '@skeletonlabs/skeleton';
-
-	export let filterValue;
-	export let values;
-	export let id;
-	export let tableId;
-	export let toFilterableValueFn: undefined | ((value: any) => any) = undefined;
-
-	let firstOption;
-	let firstValue;
-	let secondOption;
-	let secondValue;
-	let active = false;
-
-	const options = {
-		number: [
-			{
-				value: 'isequal',
-				label: 'Is equal to'
-			},
-			{
-				value: 'isgreaterorequal',
-				label: 'Is greater than or equal to'
-			},
-			{
-				value: 'isgreater',
-				label: 'Is greater than'
-			},
-			{
-				value: 'islessorequal',
-				label: 'Is less than or equal to'
-			},
-			{
-				value: 'isless',
-				label: 'Is less than'
-			},
-			{
-				value: 'isnotequal',
-				label: 'Is not equal to'
-			}
-		],
-		string: [
-			{
-				value: 'isequal',
-				label: 'Is equal to'
-			},
-			{
-				value: 'isnotequal',
-				label: 'Is not equal to'
-			},
-			{
-				value: 'starts',
-				label: 'Starts with'
-			},
-			{
-				value: 'contains',
-				label: 'Contains'
-			},
-			{
-				value: 'notcontains',
-				label: 'Does not contain'
-			},
-			{
-				value: 'ends',
-				label: 'Ends with'
-			}
-		],
-		date: [
-			{
-				value: 'ison',
-				label: 'Is on'
-			},
-			{
-				value: 'isstartingfrom',
-				label: 'Is starting from'
-			},
-			{
-				value: 'isafter',
-				label: 'Is after'
-			},
-			{
-				value: 'isuntil',
-				label: 'Is until'
-			},
-			{
-				value: 'isbefore',
-				label: 'Is before'
-			},
-			{
-				value: 'isnoton',
-				label: 'Is not on'
-			}
-		]
-	};
-
-	const popupId = `${tableId}-${id}`;
-
-	const popupFeatured: PopupSettings = {
-		event: 'click',
-		target: popupId,
-		placement: 'bottom-start'
-	};
-
-	let type: string = typeof (toFilterableValueFn ? toFilterableValueFn($values[0]) : $values[0]);
-	if (type === 'object') {
-		if ($values[0] instanceof Date) {
-			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 lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faFilter } from '@fortawesome/free-solid-svg-icons';
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	export let filterValue;
+	export let values;
+	export let id;
+	export let tableId;
+	export let toFilterableValueFn: undefined | ((value: any) => any) = undefined;
+
+	let firstOption;
+	let firstValue;
+	let secondOption;
+	let secondValue;
+	let active = false;
+
+	const options = {
+		number: [
+			{
+				value: 'isequal',
+				label: 'Is equal to'
+			},
+			{
+				value: 'isgreaterorequal',
+				label: 'Is greater than or equal to'
+			},
+			{
+				value: 'isgreater',
+				label: 'Is greater than'
+			},
+			{
+				value: 'islessorequal',
+				label: 'Is less than or equal to'
+			},
+			{
+				value: 'isless',
+				label: 'Is less than'
+			},
+			{
+				value: 'isnotequal',
+				label: 'Is not equal to'
+			}
+		],
+		string: [
+			{
+				value: 'contains',
+				label: 'Contains'
+			},
+			{
+				value: 'notcontains',
+				label: 'Does not contain'
+			},
+			{
+				value: 'isequal',
+				label: 'Is equal to'
+			},
+			{
+				value: 'isnotequal',
+				label: 'Is not equal to'
+			},
+			{
+				value: 'starts',
+				label: 'Starts with'
+			},
+			{
+				value: 'ends',
+				label: 'Ends with'
+			}
+		],
+		date: [
+			{
+				value: 'ison',
+				label: 'Is on'
+			},
+			{
+				value: 'isstartingfrom',
+				label: 'Is starting from'
+			},
+			{
+				value: 'isafter',
+				label: 'Is after'
+			},
+			{
+				value: 'isuntil',
+				label: 'Is until'
+			},
+			{
+				value: 'isbefore',
+				label: 'Is before'
+			},
+			{
+				value: 'isnoton',
+				label: 'Is not on'
+			}
+		]
+	};
+
+	const popupId = `${tableId}-${id}`;
+
+	const popupFeatured: PopupSettings = {
+		event: 'click',
+		target: popupId,
+		placement: 'bottom-start'
+	};
+
+	let type: string = typeof (toFilterableValueFn ? toFilterableValueFn($values[0]) : $values[0]);
+	if (type === 'object') {
+		if ($values[0] instanceof Date) {
+			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>

package/src/lib/components/file/FileUploader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { fileUploaderModel, fileInfoType, filesType } from '../../models/Models.js';
+	import type { fileUploaderModel, fileInfoType, filesType, fileUploaderType } from '../../models/Models.js';
 
 	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
 	import Fa from 'svelte-fa/src/fa.svelte';
@@ -27,7 +27,7 @@
 
 	export let context = '';
 
-	export let data: fileUploaderModel | undefined;
+	export let data: fileUploaderType | undefined;
 
 	$: model = data;
 	$: submitBt = 'submit';

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

@@ -1,40 +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);
-	});
-</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 { 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="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,20 +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 { 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}
+<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>
+
+{#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}