@bexis2/bexis2-core-ui 0.0.23 → 0.0.25

package/package.json

@@ -1,88 +1,103 @@
 {
-  "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.23",
-  "private": false,
-  "scripts": {
-    "dev": "vite dev",
-    "package": "svelte-package",
-    "build": "vite build",
-    "build package": "svelte-kit sync && svelte-package --watch",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "init": "npm init --scope bexis2",
-    "link": "npm link",
-    "publish": "npm publish --access public"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.28.1",
-    "@skeletonlabs/skeleton": "^1.2.5",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.5.0",
-    "@sveltejs/package": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
-    "svelte-fa": "^3.0.3",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.25.3"
-  },
-  "type": "module",
-  "module": "./src/lib/index.ts",
-  "types": "./src/lib/index.d.ts",
-  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
-  "main": "./src/lib/index.d.ts",
-  "directories": {
-    "test": "tests"
-  },
-  "files": [
-    "dist",
-    "src/lib"
-  ],
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.2.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "axios": "^1.2.1",
-    "svelte": "^3.54.0",
-    "svelte-file-dropzone": "^2.0.1",
-    "svelte-select": "^5.6.0"
-  },
-  "author": "David Schöne",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
-  },
-  "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
-  "keywords": [
-    "bexis2",
-    "libary"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  }
+	"name": "@bexis2/bexis2-core-ui",
+	"version": "0.0.25",
+	"private": false,
+	"scripts": {
+		"dev": "vite dev --host",
+		"package": "svelte-package --watch",
+		"build": "vite build",
+		"build package": "svelte-kit sync && svelte-package --watch",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"init": "npm init --scope bexis2",
+		"link": "npm link",
+		"publish": "npm publish --access public",
+		"install bexis2-core-ui localy": "npm install ../bexis2-core-ui"
+	},
+	"devDependencies": {
+		"@bexis2/bexis2-core-ui": "file:../bexis2-core-ui/dist",
+		"@playwright/test": "^1.28.1",
+		"@skeletonlabs/skeleton": "^1.2.5",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.2",
+		"@sveltejs/kit": "^1.5.0",
+		"@sveltejs/package": "^2.0.2",
+		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/line-clamp": "^0.4.2",
+		"@tailwindcss/typography": "^0.5.9",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"autoprefixer": "^10.4.14",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.23",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"raw-loader": "^4.0.2",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"svelte-fa": "^3.0.3",
+		"svelte-headless-table": "^0.17.3",
+		"tailwindcss": "^3.3.2",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.3.0",
+		"vitest": "^0.25.3"
+	},
+	"type": "module",
+	"module": "./src/lib/index.ts",
+	"types": "./src/lib/index.d.ts",
+	"description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
+	"main": "./src/lib/index.d.ts",
+	"directories": {
+		"test": "tests"
+	},
+	"files": [
+		"dist",
+		"src/lib"
+	],
+	"dependencies": {
+		"@floating-ui/dom": "^1.2.7",
+		"@fortawesome/fontawesome-free": "^6.2.1",
+		"@fortawesome/fontawesome-svg-core": "^6.2.1",
+		"@fortawesome/free-regular-svg-icons": "^6.2.1",
+		"@fortawesome/free-solid-svg-icons": "^6.2.1",
+		"axios": "^1.2.1",
+		"highlight.js": "^11.8.0",
+		"highlightjs-svelte": "^1.0.6",
+		"svelte": "^3.54.0",
+		"svelte-file-dropzone": "^2.0.1",
+		"svelte-select": "^5.6.0",
+		"vest": "^4.6.11"
+	},
+	"author": "David Schöne",
+	"license": "ISC",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
+	},
+	"homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
+	"keywords": [
+		"bexis2",
+		"libary"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./dist/index.css": {
+			"import": "./dist/index.css",
+			"require": "./dist/index.css"
+		}
+	}
 }

package/src/lib/TableView.svelte

@@ -1 +1 @@
-<h1>table</h1>
+<h1>table</h1>

package/src/lib/components/ListView.svelte

@@ -1,13 +1,11 @@
-<script lang="ts">
-
-type x={
- name:string
-}
-
-let result:x = {name:"david"}
-
-</script>
- 
-<h1>MyList</h1>
-{result.name}
-<b>from bexis-lib</b>
+<script lang="ts">
+	type x = {
+		name: string;
+	};
+
+	let result: x = { name: 'david' };
+</script>
+
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

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

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
+	import {
+		addSortBy,
+		addPagination,
+		addExpandedRows,
+		addColumnFilters,
+		addTableFilter
+	} from 'svelte-headless-table/plugins';
+
+	import TableFilter from './TableFilter.svelte';
+	import TablePagination from './TablePagination.svelte';
+	import { columnFilter, searchFilter } from './filter';
+	import type { TableConfig } from '$lib/models/Models';
+
+	export let config: TableConfig<any>;
+	let {
+		id: tableId,
+		data,
+		columns,
+		optionsComponent,
+		defaultPageSize = 10,
+		pageSizes = [5, 10, 15, 20]
+	} = config;
+
+	type AccessorType = keyof (typeof $data)[0];
+
+	const table = createTable(data, {
+		colFilter: addColumnFilters(),
+		tableFilter: addTableFilter({
+			fn: searchFilter
+		}),
+		sort: addSortBy({ disableMultiSort: true }),
+		page: addPagination({ initialPageSize: defaultPageSize }),
+		expand: addExpandedRows()
+	});
+
+	const accessors: AccessorType[] = Object.keys($data[0]) as AccessorType[];
+
+	const tableColumns = [
+		...accessors
+			.filter((accessor) => {
+				const key = accessor as string;
+				if (columns !== undefined && key in columns && columns[key].exclude === true) {
+					return false;
+				}
+				return true;
+			})
+			.map((accessor) => {
+				const key = accessor as string;
+				if (columns !== undefined && key in columns) {
+					const { header, colFilterFn, colFilterComponent } = columns[key];
+					return table.column({
+						header: header ?? key,
+						accessor: accessor,
+						plugins: {
+							sort: { invert: true },
+							colFilter: {
+								fn: colFilterFn ?? columnFilter,
+								render: ({ filterValue, values, id }) =>
+									createRender(colFilterComponent ?? TableFilter, {
+										filterValue,
+										values,
+										id,
+										tableId
+									})
+							}
+						}
+					});
+				} else {
+					return table.column({
+						header: key,
+						accessor: accessor,
+						plugins: {
+							sort: { invert: true },
+							colFilter: {
+								fn: columnFilter,
+								render: ({ filterValue, values, id }) =>
+									createRender(TableFilter, { filterValue, values, id, tableId })
+							}
+						}
+					});
+				}
+			})
+	];
+
+	if (optionsComponent !== undefined) {
+		tableColumns.push(
+			table.display({
+				id: 'options',
+				header: '',
+				cell: ({ row }, _) => {
+					return createRender(optionsComponent!, {
+						row: row.isData() ? row.original : null
+					});
+				}
+			}) as any
+		);
+	}
+
+	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">
+		<input
+			class="input p-2 mb-2 border border-primary-500"
+			type="text"
+			bind:value={$filterValue}
+			placeholder="Search rows..."
+		/>
+		<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" {...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}
+													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>
+				{/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">
+										<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>
+
+	<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+</div>

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

@@ -0,0 +1,176 @@
+<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;
+
+	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'
+			}
+		]
+	};
+
+	const popupId = `${tableId}-${id}`;
+
+	const popupFeatured: PopupSettings = {
+		event: 'click',
+		target: popupId,
+		placement: 'bottom-start'
+	};
+
+	const type = typeof $values[0];
+</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">
+			<button
+				class="btn variant-filled-primary btn-sm"
+				type="submit"
+				on:click={() => {
+					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}
+					<input
+						type="text"
+						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}
+					<input
+						type="text"
+						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="submit"
+				on:click={() => {
+					active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
+					$filterValue = [firstOption, firstValue, secondOption, secondValue];
+				}}>Submit</button
+			>
+		</div>
+	</div>
+</form>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import {
+		faAnglesRight,
+		faAngleRight,
+		faAnglesLeft,
+		faAngleLeft
+	} from '@fortawesome/free-solid-svg-icons';
+
+	export let pageConfig;
+	export let pageSizes;
+
+	const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
+
+	const goToFirstPage = () => ($pageIndex = 0);
+	const goToLastPage = () => ($pageIndex = $pageCount - 1);
+	const goToNextPage = () => ($pageIndex += 1);
+	const goToPreviousPage = () => ($pageIndex -= 1);
+
+	$: goToFirstPageDisabled = !$pageIndex;
+	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
+	$: goToNextPageDisabled = !$hasNextPage;
+	$: goToPreviousPageDisabled = !$hasPreviousPage;
+</script>
+
+<div class="flex justify-center gap-1">
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToPreviousPage}
+		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+	>
+
+	<select
+		name="pageSize"
+		id="pageSize"
+		class="select btn btn-sm variant-filled-primary w-min font-bold"
+		bind:value={$pageSize}
+	>
+		{#each pageSizes as size}
+			<option value={size}>{size}</option>
+		{/each}
+	</select>
+
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>