@bexis2/bexis2-core-ui 0.2.14 → 0.2.16

package/README.md

@@ -1,4 +1,15 @@
 # bexis-core-ui
+## v0.2.16
+- Table
+  - width - fit to screen
+  - Cell - drag to change the height
+  - define a height to scroll the content
+  - header allways on top whie scrolling
+
+## v0.2.15
+- Page - centered -> min width defined
+- MultiSelect -> add clearable 
+
 ## v0.2.14
 - change fileUploaderModel to  FileUploaderType
 - remove AllFilesReadable, AsciiFileReaderInfo & LastModification from fileuploaderType

package/dist/components/Table/Table.svelte

@@ -8,7 +8,7 @@ import {
   addTableFilter
 } from "svelte-headless-table/plugins";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
-import { storePopup } from "@skeletonlabs/skeleton";
+import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import TableFilter from "./TableFilter.svelte";
 import TablePagination from "./TablePagination.svelte";
@@ -18,10 +18,12 @@ let {
   id: tableId,
   data,
   columns,
+  height = null,
   optionsComponent,
   defaultPageSize = 10,
   pageSizes = [5, 10, 15, 20]
 } = config;
+let fitToScreen = true;
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
 const table = createTable(data, {
@@ -128,88 +130,101 @@ if (optionsComponent !== void 0) {
 const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
-</script>
-
-<div class="grid gap-2">
-	<div class="table-container">
-		{#if $data.length > 0}
-			<input
-				class="input p-2 mb-2 border border-primary-500"
-				type="text"
-				bind:value={$filterValue}
-				placeholder="Search rows..."
-			/>
-		{/if}
-		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
-			<thead>
-				{#each $headerRows as headerRow (headerRow.id)}
-					<Subscribe
-						rowAttrs={headerRow.attrs()}
-						let:rowAttrs
-						rowProps={headerRow.props()}
-						let:rowProps
-					>
-						<tr {...rowAttrs} class="bg-primary-300">
-							{#each headerRow.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-									<th scope="col" class="!p-2 w-min" {...attrs}>
-										<div class="flex w-full justify-between items-center">
-											<div class="flex gap-1">
-												<span
-													class:underline={props.sort.order}
-													class:normal-case={cell.id !== cell.label}
-													class:cursor-pointer={!props.sort.disabled}
-													on:click={props.sort.toggle}
-													on:keydown={props.sort.toggle}
-												>
-													{cell.render()}
-												</span>
-												<div class="w-2">
-													{#if props.sort.order === 'asc'}
-														▾
-													{:else if props.sort.order === 'desc'}
-														▴
-													{/if}
-												</div>
-											</div>
-											{#if cell.isData()}
-												{#if props.colFilter?.render}
-													<div>
-														<Render of={props.colFilter.render} />
-													</div>
-												{/if}
-											{/if}
-										</div>
-									</th>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{:else}
-					<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-				{/each}
-			</thead>
-
-			<tbody class="" {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<tr {...rowAttrs}>
-							{#each row.cells as cell (cell?.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2 w-min">
-										<div class="flex items-center w-full h-full table-cell-fit">
-											<Render of={cell.render()} />
-										</div>
-									</td>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-	{#if $data.length > 0}
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
-	{/if}
-</div>
+</script>
+
+<div class="grid gap-2 overflow-auto" class:w-max={!fitToScreen} class:w-full={fitToScreen}>
+	<div class="table-container">
+		{#if $data.length > 0}
+			<input
+				class="input p-2 mb-2 border border-primary-500"
+				type="text"
+				bind:value={$filterValue}
+				placeholder="Search rows..."
+			/>
+		{/if}
+		<SlideToggle
+			name="slider-label"
+			active="bg-primary-500"
+			size="sm"
+			checked={fitToScreen}
+			on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+		>
+
+		<div class="overflow-auto" style="height: {height}px">
+			<table {...$tableAttrs} class="table table-compact bg-tertiary-200 overflow-clip">
+				<thead class={height != null ? `sticky top-0` : ''}>
+					{#each $headerRows as headerRow (headerRow.id)}
+						<Subscribe
+							rowAttrs={headerRow.attrs()}
+							let:rowAttrs
+							rowProps={headerRow.props()}
+							let:rowProps
+						>
+							<tr {...rowAttrs} class="bg-primary-300">
+								{#each headerRow.cells as cell (cell.id)}
+									<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
+										<th scope="col" class="!p-2 w-min" {...attrs}>
+											<div class="flex w-full justify-between items-center">
+												<div class="flex gap-1 whitespace-pre-wrap">
+													<span
+														class:underline={props.sort.order}
+														class:normal-case={cell.id !== cell.label}
+														class:cursor-pointer={!props.sort.disabled}
+														on:click={props.sort.toggle}
+														on:keydown={props.sort.toggle}
+													>
+														{cell.render()}
+													</span>
+													<div class="w-2">
+														{#if props.sort.order === 'asc'}
+															▾
+														{:else if props.sort.order === 'desc'}
+															▴
+														{/if}
+													</div>
+												</div>
+												{#if cell.isData()}
+													{#if props.colFilter?.render}
+														<div class="">
+															<Render of={props.colFilter.render} />
+														</div>
+													{/if}
+												{/if}
+											</div>
+										</th>
+									</Subscribe>
+								{/each}
+							</tr>
+						</Subscribe>
+					{:else}
+						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
+					{/each}
+				</thead>
+
+				<tbody class="overflow-auto" {...$tableBodyAttrs}>
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<tr {...rowAttrs}>
+								{#each row.cells as cell (cell?.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<td {...attrs} class="!p-2 w-max focus:resize">
+											<div
+												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
+												class:max-w-md={!fitToScreen}
+											>
+												<Render of={cell.render()} />
+											</div>
+										</td>
+									</Subscribe>
+								{/each}
+							</tr>
+						</Subscribe>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+	{#if $data.length > 0}
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{/if}
+</div>

package/dist/components/Table/TableFilter.svelte

@@ -115,8 +115,8 @@ if (type === "object") {
 		<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">
+	<div data-popup={`${popupId}`} class="z-50">
+		<div class="card p-3 grid gap-2 shadow-lg w-min bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"

package/dist/components/form/MultiSelect.svelte

@@ -20,6 +20,7 @@
 	export let invalid = false;
 	export let loading = false;
 	export let help = false;
+	export let clearable = true;
 
 	let isLoaded = false;
 
@@ -150,6 +151,7 @@
 		{placeholder}
 		hasError={invalid}
 		{loading}
+		{clearable}
 		on:change
 		on:input
 		on:focus

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -18,6 +18,7 @@ export default class MultiSelect extends SvelteComponentTyped<{
     complexSource?: boolean | undefined;
     placeholder?: string | undefined;
     loading?: boolean | undefined;
+    clearable?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
     input: CustomEvent<any>;
@@ -54,6 +55,7 @@ declare const __propDef: {
         complexSource?: boolean | undefined;
         placeholder?: string | undefined;
         loading?: boolean | undefined;
+        clearable?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/components/page/Page.svelte

@@ -24,59 +24,59 @@ onMount(async () => {
   breadcrumbStore.clean();
   breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 });
-</script>
-
-<AppShell>
-	<!--header-->
-	<svelte:fragment slot="header">
-		<AppBar padding="0" spacing="space-y-0" background="white">
-			<svelte:fragment slot="headline">
-				<Header />
-				{#if true}
-					<Menu />
-				{/if}
-
-				<div class="grid grid-cols-2">
-					<Breadcrumb {title} />
-					<Docs {links} {note} />
-				</div>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
-
-	<svelte:fragment slot="footer">
-		<Footer />
-	</svelte:fragment>
-
-	<slot name="description" />
-
-	<div class="flex flex-initial space-x-5">
-		{#if $$slots.left}
-			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
-				<slot name="left" />
-			</div>
-		{/if}
-
-		{#if contentLayoutType === pageContentLayoutType.center}
-			<div class="flex justify-center w-screen">
-				<div class="max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
-					<slot />
-				</div>
-			</div>
-		{/if}
-
-		{#if contentLayoutType === pageContentLayoutType.full}
-			<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
-				<slot />
-			</div>
-		{/if}
-
-		{#if $$slots.right}
-			<div class=" p-5 flex-shrink-0 w-96 border-y border-solid border-surface-500">
-				<slot name="right" />
-			</div>
-		{/if}
-	</div>
-
-	<HelpPopUp active={help} />
-</AppShell>
+</script>
+
+<AppShell>
+	<!--header-->
+	<svelte:fragment slot="header">
+		<AppBar padding="0" spacing="space-y-0" background="white">
+			<svelte:fragment slot="headline">
+				<Header />
+				{#if true}
+					<Menu />
+				{/if}
+
+				<div class="grid grid-cols-2">
+					<Breadcrumb {title} />
+					<Docs {links} {note} />
+				</div>
+			</svelte:fragment>
+		</AppBar>
+	</svelte:fragment>
+
+	<svelte:fragment slot="footer">
+		<Footer />
+	</svelte:fragment>
+
+	<slot name="description" />
+
+	<div class="flex flex-initial space-x-5">
+		{#if $$slots.left}
+			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
+				<slot name="left" />
+			</div>
+		{/if}
+
+		{#if contentLayoutType === pageContentLayoutType.center}
+			<div class="flex justify-center w-screen">
+				<div class="w-full max-w-7xl p-5 space-y-5 border-y border-solid border-surface-500">
+					<slot />
+				</div>
+			</div>
+		{/if}
+
+		{#if contentLayoutType === pageContentLayoutType.full}
+			<div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
+				<slot />
+			</div>
+		{/if}
+
+		{#if $$slots.right}
+			<div class=" p-5 flex-shrink-0 w-96 border-y border-solid border-surface-500">
+				<slot name="right" />
+			</div>
+		{/if}
+	</div>
+
+	<HelpPopUp active={help} />
+</AppShell>

package/dist/models/Models.d.ts

@@ -81,6 +81,7 @@ export interface Columns {
 export interface TableConfig<T> {
     id: string;
     data: Writable<T[]>;
+    height?: null | number;
     columns?: Columns;
     pageSizes?: number[];
     defaultPageSize?: number;

package/package.json

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