@bexis2/bexis2-core-ui 0.2.22 → 0.2.24

package/README.md

@@ -1,21 +1,31 @@
 # bexis-core-ui
+## 0.2.24
+- add ids to table and code editor components 
+
+## 0.2.23
+
+- add CodeEditor component
+
 ## 0.2.22
+
 - Page title update on breadcrumb
 
 ## v0.2.19
+
 - fix multiselect bug from prev version
 
 ## v0.2.18
+
 - Multiselect
   - fix target bug with simple list and list of simple values
-  
-- CodeEditor component
 
 ## v0.2.17
+
 - Multiselect
   - fix target bind bug
 
 ## v0.2.16
+
 - Table
   - width - fit to screen
   - Cell - drag to change the height
@@ -25,7 +35,7 @@
 ## v0.2.15
 
 - Page - centered -> min width defined
-- MultiSelect -> add clearable 
+- MultiSelect -> add clearable
 
 ## v0.2.14
 
@@ -66,13 +76,13 @@
 
 ## v0.2.1
 
-> refactoring based on naming conventions (https://bexis2.github.io/bexis2-core-ui/code/naming/)
+> refactoring based on naming conventions (<https://bexis2.github.io/bexis2-core-ui/code/naming/>)
 
 - fix issue in index.ts file for export components
 
 ## v0.2.0
 
-> refactoring based on naming conventions (https://bexis2.github.io/bexis2-core-ui/code/naming/)
+> refactoring based on naming conventions (<https://bexis2.github.io/bexis2-core-ui/code/naming/>)
 
 - add Help, helpStore
 - update Page
@@ -219,7 +229,7 @@
   - Disabling of filters
   - Disabling of sorting
 
-### fixes:
+### fixes
 
 #### table
 

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -0,0 +1,99 @@
+<script>import { createEventDispatcher } from "svelte";
+import CodeMirror from "svelte-codemirror-editor";
+import Fa from "svelte-fa/src/fa.svelte";
+import { html } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { Modal, modalStore } from "@skeletonlabs/skeleton";
+import { faMoon, faSave, faSun } from "@fortawesome/free-regular-svg-icons";
+import { faArrowRotateLeft, faXmark } from "@fortawesome/free-solid-svg-icons";
+export let id;
+export let title = "";
+export let initialValue = "";
+export let value = initialValue;
+export let language = "html";
+export let dark = true;
+export let toggle = true;
+export let actions = true;
+export let styles = {
+  "&": {
+    borderRadius: "0.5rem",
+    width: "100%"
+  },
+  ".cm-scroller": {
+    borderRadius: "0.5rem"
+  }
+};
+const dispatch = createEventDispatcher();
+const modal = {
+  type: "confirm",
+  title: "Reset",
+  body: "Unsaved changes will be lost. Are you sure you want to continue?",
+  response: (r) => r ? value = initialValue : null
+};
+</script>
+
+<div class="items-center justify-center">
+
+	<h1 class="h1 font-semibold text-primary-500 mb-3" id="{id}-title">{title}</h1>
+	<slot id="{id}-description" />
+	<div class="grid gap-1 w-full h-full mt-5">
+		<div class="rounded-lg shadow-lg w-full" id="{id}-editor">
+			<CodeMirror
+				bind:value
+				lang={language === 'html'
+					? html({ selfClosingTags: true })
+					: language === 'js'
+					? javascript()
+					: json()}
+				theme={dark ? oneDark : null}
+				class="flex w-full"
+				{styles}
+			/>
+		</div>
+	</div>
+
+
+	<div class="flex justify-between gap-2 items-center mt-3" id="{id}-footer">
+		<div class="flex gap-2">
+			<button
+				class="btn variant-filled-warning"
+				id="{id}-reset"
+				on:click|preventDefault={() => modalStore.trigger(modal)}
+				><Fa icon={faArrowRotateLeft} /></button
+			>{#if toggle}
+				<button
+					class="btn border"
+					class:bg-slate-700={dark}
+					class:bg-white={!dark}
+					id="{id}-toggle"
+					on:click|preventDefault={() => (dark = !dark)}
+				>
+					{#if dark}
+						<Fa icon={faMoon} color="white" />
+					{:else}
+						<Fa icon={faSun} color="black" />
+					{/if}
+				</button>
+			{/if}
+		</div>
+
+		{#if actions}
+			<div class="flex gap-2">
+				<button
+					class="btn variant-filled-warning"
+					id="{id}-cancel"
+					on:click|preventDefault={() => dispatch('cancel')}><Fa icon={faXmark} /></button
+				>
+				<button
+					class="btn variant-filled-primary"
+					id="{id}-save"
+					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
+				>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<Modal />

package/dist/components/CodeEditor/CodeEditor.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        title?: string | undefined;
+        initialValue?: string | undefined;
+        value?: string | undefined;
+        language?: string | undefined;
+        dark?: boolean | undefined;
+        toggle?: boolean | undefined;
+        actions?: boolean | undefined;
+        styles?: any;
+    };
+    events: {
+        cancel: CustomEvent<any>;
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            id: string;
+        };
+    };
+};
+export type CodeEditorProps = typeof __propDef.props;
+export type CodeEditorEvents = typeof __propDef.events;
+export type CodeEditorSlots = typeof __propDef.slots;
+export default class CodeEditor extends SvelteComponentTyped<CodeEditorProps, CodeEditorEvents, CodeEditorSlots> {
+}
+export {};

package/dist/components/Table/Table.svelte

@@ -21,9 +21,10 @@ let {
   height = null,
   optionsComponent,
   defaultPageSize = 10,
-  pageSizes = [5, 10, 15, 20]
+  toggle = false,
+  pageSizes = [5, 10, 15, 20],
+  fitToScreen = true
 } = config;
-let fitToScreen = true;
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
 const table = createTable(data, {
@@ -116,7 +117,7 @@ const tableColumns = [
 if (optionsComponent !== void 0) {
   tableColumns.push(
     table.display({
-      id: "options",
+      id: "actionsColumn",
       header: "",
       cell: ({ row }, _) => {
         return createRender(optionsComponent, {
@@ -132,7 +133,7 @@ const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table
 const { filterValue } = pluginStates.tableFilter;
 </script>
 
-<div class="grid gap-2 overflow-auto" class:w-max={!fitToScreen} class:w-full={fitToScreen}>
+<div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
 		{#if $data.length > 0}
 			<input
@@ -140,18 +141,27 @@ const { filterValue } = pluginStates.tableFilter;
 				type="text"
 				bind:value={$filterValue}
 				placeholder="Search rows..."
+				id="{tableId}-search"
 			/>
 		{/if}
-		<SlideToggle
-			name="slider-label"
-			active="bg-primary-500"
-			size="sm"
-			checked={fitToScreen}
-			on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-		>
+
+		{#if toggle}
+			<SlideToggle
+				name="slider-label"
+				active="bg-primary-500"
+				size="sm"
+				checked={fitToScreen}
+				id="{tableId}-toggle"
+				on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+			>
+		{/if}
 
 		<div class="overflow-auto" style="height: {height}px">
-			<table {...$tableAttrs} class="table table-compact bg-tertiary-200 overflow-clip">
+			<table
+				{...$tableAttrs}
+				class="table table-compact bg-tertiary-200 overflow-clip"
+				id="{tableId}-table"
+			>
 				<thead class={height != null ? `sticky top-0` : ''}>
 					{#each $headerRows as headerRow (headerRow.id)}
 						<Subscribe
@@ -204,10 +214,10 @@ const { filterValue } = pluginStates.tableFilter;
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
 					{#each $pageRows as row (row.id)}
 						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<tr {...rowAttrs}>
+							<tr {...rowAttrs} id="{tableId}-row-{row.id}">
 								{#each row.cells as cell (cell?.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
-										<td {...attrs} class="!p-2 w-max focus:resize">
+										<td {...attrs} class="!p-2 w-max focus:resize" id="{tableId}-{cell.id}-{row.id}">
 											<div
 												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
 												class:max-w-md={!fitToScreen}
@@ -225,6 +235,6 @@ const { filterValue } = pluginStates.tableFilter;
 		</div>
 	</div>
 	{#if $data.length > 0}
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
 	{/if}
 </div>

package/dist/components/Table/TableFilter.svelte

@@ -111,11 +111,12 @@ if (type === "object") {
 		class="btn w-max p-2"
 		type="button"
 		use:popup={popupFeatured}
+		id="{popupId}-button"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`} class="z-50">
+	<div data-popup={`${popupId}`} id="{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"

package/dist/components/Table/TablePagination.svelte

@@ -7,6 +7,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 export let pageConfig;
 export let pageSizes;
+export let id;
 const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
 const goToFirstPage = () => $pageIndex = 0;
 const goToLastPage = () => $pageIndex = $pageCount - 1;
@@ -20,41 +21,45 @@ $:
   goToNextPageDisabled = !$hasNextPage;
 $:
   goToPreviousPageDisabled = !$hasPreviousPage;
-</script>
-
-<div class="flex justify-center gap-1">
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToFirstPage}
-		disabled={goToFirstPageDisabled}
-	>
-		<Fa icon={faAnglesLeft} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToPreviousPage}
-		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
-	>
-
-	<select
-		name="pageSize"
-		id="pageSize"
-		class="select 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|preventDefault={goToNextPage}
-		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToLastPage}
-		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
-	>
-</div>
+</script>
+
+<div class="flex justify-center gap-1">
+	<button
+		class="btn btn-sm variant-filled-primary"
+		on:click|preventDefault={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+		id="{id}-first"
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		id="{id}-previous"
+		on:click|preventDefault={goToPreviousPage}
+		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+	>
+
+	<select
+		name="pageSize"
+		id="{id}-pageSize"
+		class="select 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"
+		id="{id}-next"
+		on:click|preventDefault={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		id="{id}-last"
+		on:click|preventDefault={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>

package/dist/components/Table/TablePagination.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         pageConfig: any;
         pageSizes: any;
+        id: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/file/FileUploader.svelte

@@ -103,7 +103,7 @@ async function handleSubmit() {
 				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
 				<span
 					><b>Drag 'n' drop some files here, or click to select files</b>
-					<b>max file : {model.maxSize} mb</b></span
+					<b>(max file size: {model.maxSize} mb)</b></span
 				>
 				<p>
 					{#if model.accept}

package/dist/components/form/InputContainer.svelte

@@ -11,23 +11,23 @@ function onMouseOver() {
 }
 function onMouseOut() {
 }
-</script>
-
-<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
-	<label class="label">
-		<span
-			>{label}
-			{#if required} <span class="text-sm text-red-600">*</span> {/if}
-		</span>
-		<slot />
-		{#if feedback}
-			<span class="text-sm text-error-600">
-				<ul>
-					{#each feedback as message}
-						<li>{message}</li>
-					{/each}
-				</ul>
-			</span>
-		{/if}
-	</label>
-</div>
+</script>
+
+<div id="{id}-container" on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
+	<label class="label">
+		<span
+			>{label}
+			{#if required} <span class="text-sm text-red-600">*</span> {/if}
+		</span>
+		<slot />
+		{#if feedback}
+			<span class="text-sm text-error-600">
+				<ul>
+					{#each feedback as message}
+						<li>{message}</li>
+					{/each}
+				</ul>
+			</span>
+		{/if}
+	</label>
+</div>

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
+import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
@@ -36,4 +37,5 @@ export { Notification };
 export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
+export { CodeEditor };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -24,6 +24,8 @@ import TextArea from './components/form/TextArea.svelte';
 import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
+// CodeEditor
+import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 //notification
 import Notification from './components/page/Notification.svelte';
 //table placeholder
@@ -49,3 +51,5 @@ export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };
+// CodeEditor
+export { CodeEditor };

package/dist/models/Models.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -19,7 +19,7 @@
     "publish": "npm publish --access public"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.36.2",
     "@skeletonlabs/skeleton": "^1.9.0",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^2.0.2",
@@ -58,16 +58,23 @@
     "src/lib"
   ],
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.5",
+    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@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",
+    "codemirror": "^6.0.1",
     "delay": "^6.0.0",
+    "dotenv": "^16.3.1",
     "highlight.js": "^11.8.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",
+    "svelte-codemirror-editor": "^1.1.0",
     "svelte-fa": "^3.0.4",
     "svelte-file-dropzone": "^2.0.1",
     "svelte-headless-table": "^0.17.3",

package/src/lib/components/CodeEditor/CodeEditor.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	import CodeMirror from 'svelte-codemirror-editor';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { html } from '@codemirror/lang-html';
+	import { javascript } from '@codemirror/lang-javascript';
+	import { json } from '@codemirror/lang-json';
+	import { oneDark } from '@codemirror/theme-one-dark';
+	import { Modal, modalStore } from '@skeletonlabs/skeleton';
+	import { faMoon, faSave, faSun } from '@fortawesome/free-regular-svg-icons';
+	import { faArrowRotateLeft, faXmark } from '@fortawesome/free-solid-svg-icons';
+	import type { ThemeSpec } from 'svelte-codemirror-editor';
+	import type { ModalSettings } from '@skeletonlabs/skeleton';
+  
+	export let id: string;
+	export let title = '';
+	export let initialValue = '';
+	export let value = initialValue;
+	export let language = 'html';
+	export let dark = true;
+	export let toggle = true;
+	export let actions = true;
+	export let styles: ThemeSpec = {
+		'&': {
+			borderRadius: '0.5rem',
+			width: '100%'
+		},
+		'.cm-scroller': {
+			borderRadius: '0.5rem'
+		}
+	};
+
+	const dispatch = createEventDispatcher();
+
+	const modal: ModalSettings = {
+		type: 'confirm',
+		title: 'Reset',
+		body: 'Unsaved changes will be lost. Are you sure you want to continue?',
+		response: (r: boolean) => (r ? (value = initialValue) : null)
+	};
+</script>
+
+<div class="items-center justify-center">
+
+	<h1 class="h1 font-semibold text-primary-500 mb-3" id="{id}-title">{title}</h1>
+	<slot id="{id}-description" />
+	<div class="grid gap-1 w-full h-full mt-5">
+		<div class="rounded-lg shadow-lg w-full" id="{id}-editor">
+			<CodeMirror
+				bind:value
+				lang={language === 'html'
+					? html({ selfClosingTags: true })
+					: language === 'js'
+					? javascript()
+					: json()}
+				theme={dark ? oneDark : null}
+				class="flex w-full"
+				{styles}
+			/>
+		</div>
+	</div>
+
+
+	<div class="flex justify-between gap-2 items-center mt-3" id="{id}-footer">
+		<div class="flex gap-2">
+			<button
+				class="btn variant-filled-warning"
+				id="{id}-reset"
+				on:click|preventDefault={() => modalStore.trigger(modal)}
+				><Fa icon={faArrowRotateLeft} /></button
+			>{#if toggle}
+				<button
+					class="btn border"
+					class:bg-slate-700={dark}
+					class:bg-white={!dark}
+					id="{id}-toggle"
+					on:click|preventDefault={() => (dark = !dark)}
+				>
+					{#if dark}
+						<Fa icon={faMoon} color="white" />
+					{:else}
+						<Fa icon={faSun} color="black" />
+					{/if}
+				</button>
+			{/if}
+		</div>
+
+		{#if actions}
+			<div class="flex gap-2">
+				<button
+					class="btn variant-filled-warning"
+					id="{id}-cancel"
+					on:click|preventDefault={() => dispatch('cancel')}><Fa icon={faXmark} /></button
+				>
+				<button
+					class="btn variant-filled-primary"
+					id="{id}-save"
+					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
+				>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<Modal />

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

@@ -27,9 +27,10 @@
 		height = null,
 		optionsComponent,
 		defaultPageSize = 10,
-		pageSizes = [5, 10, 15, 20]
+		toggle = false,
+		pageSizes = [5, 10, 15, 20],
+		fitToScreen = true
 	} = config;
-	let fitToScreen = true;
 
 	type AccessorType = keyof (typeof $data)[number];
 
@@ -145,7 +146,7 @@
 	if (optionsComponent !== undefined) {
 		tableColumns.push(
 			table.display({
-				id: 'options',
+				id: 'actionsColumn',
 				header: '',
 				cell: ({ row }, _) => {
 					return createRender(optionsComponent!, {
@@ -164,7 +165,7 @@
 	const { filterValue } = pluginStates.tableFilter;
 </script>
 
-<div class="grid gap-2 overflow-auto" class:w-max={!fitToScreen} class:w-full={fitToScreen}>
+<div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
 		{#if $data.length > 0}
 			<input
@@ -172,18 +173,27 @@
 				type="text"
 				bind:value={$filterValue}
 				placeholder="Search rows..."
+				id="{tableId}-search"
 			/>
 		{/if}
-		<SlideToggle
-			name="slider-label"
-			active="bg-primary-500"
-			size="sm"
-			checked={fitToScreen}
-			on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-		>
+
+		{#if toggle}
+			<SlideToggle
+				name="slider-label"
+				active="bg-primary-500"
+				size="sm"
+				checked={fitToScreen}
+				id="{tableId}-toggle"
+				on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+			>
+		{/if}
 
 		<div class="overflow-auto" style="height: {height}px">
-			<table {...$tableAttrs} class="table table-compact bg-tertiary-200 overflow-clip">
+			<table
+				{...$tableAttrs}
+				class="table table-compact bg-tertiary-200 overflow-clip"
+				id="{tableId}-table"
+			>
 				<thead class={height != null ? `sticky top-0` : ''}>
 					{#each $headerRows as headerRow (headerRow.id)}
 						<Subscribe
@@ -236,10 +246,10 @@
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
 					{#each $pageRows as row (row.id)}
 						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<tr {...rowAttrs}>
+							<tr {...rowAttrs} id="{tableId}-row-{row.id}">
 								{#each row.cells as cell (cell?.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
-										<td {...attrs} class="!p-2 w-max focus:resize">
+										<td {...attrs} class="!p-2 w-max focus:resize" id="{tableId}-{cell.id}-{row.id}">
 											<div
 												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
 												class:max-w-md={!fitToScreen}
@@ -257,6 +267,6 @@
 		</div>
 	</div>
 	{#if $data.length > 0}
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
 	{/if}
 </div>

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

@@ -119,11 +119,12 @@
 		class="btn w-max p-2"
 		type="button"
 		use:popup={popupFeatured}
+		id="{popupId}-button"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`} class="z-50">
+	<div data-popup={`${popupId}`} id="{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"

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

@@ -1,61 +1,66 @@
-<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|preventDefault={goToFirstPage}
-		disabled={goToFirstPageDisabled}
-	>
-		<Fa icon={faAnglesLeft} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToPreviousPage}
-		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
-	>
-
-	<select
-		name="pageSize"
-		id="pageSize"
-		class="select 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|preventDefault={goToNextPage}
-		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
-	>
-	<button
-		class="btn btn-sm variant-filled-primary"
-		on:click|preventDefault={goToLastPage}
-		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
-	>
-</div>
+<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;
+	export let id;
+
+	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|preventDefault={goToFirstPage}
+		disabled={goToFirstPageDisabled}
+		id="{id}-first"
+	>
+		<Fa icon={faAnglesLeft} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		id="{id}-previous"
+		on:click|preventDefault={goToPreviousPage}
+		disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
+	>
+
+	<select
+		name="pageSize"
+		id="{id}-pageSize"
+		class="select 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"
+		id="{id}-next"
+		on:click|preventDefault={goToNextPage}
+		disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
+	>
+	<button
+		class="btn btn-sm variant-filled-primary"
+		id="{id}-last"
+		on:click|preventDefault={goToLastPage}
+		disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
+	>
+</div>

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

@@ -168,7 +168,7 @@
 				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
 				<span
 					><b>Drag 'n' drop some files here, or click to select files</b>
-					<b>max file : {model.maxSize} mb</b></span
+					<b>(max file size: {model.maxSize} mb)</b></span
 				>
 				<p>
 					{#if model.accept}

package/src/lib/components/form/InputContainer.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import { helpStore } from '$store/pageStores';
-
-	export let id: string = '';
-	export let label: string = '';
-	export let required: boolean;
-	export let feedback: string[];
-	export let help: boolean = false;
-
-	function onMouseOver() {
-		if (help) {
-			helpStore.show(id);
-		}
-	}
-
-	function onMouseOut() {}
-</script>
-
-<div {id} on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
-	<label class="label">
-		<span
-			>{label}
-			{#if required} <span class="text-sm text-red-600">*</span> {/if}
-		</span>
-		<slot />
-		{#if feedback}
-			<span class="text-sm text-error-600">
-				<ul>
-					{#each feedback as message}
-						<li>{message}</li>
-					{/each}
-				</ul>
-			</span>
-		{/if}
-	</label>
-</div>
+<script lang="ts">
+	import { helpStore } from '$store/pageStores';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let required: boolean;
+	export let feedback: string[];
+	export let help: boolean = false;
+
+	function onMouseOver() {
+		if (help) {
+			helpStore.show(id);
+		}
+	}
+
+	function onMouseOut() {}
+</script>
+
+<div id="{id}-container" on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
+	<label class="label">
+		<span
+			>{label}
+			{#if required} <span class="text-sm text-red-600">*</span> {/if}
+		</span>
+		<slot />
+		{#if feedback}
+			<span class="text-sm text-error-600">
+				<ul>
+					{#each feedback as message}
+						<li>{message}</li>
+					{/each}
+				</ul>
+			</span>
+		{/if}
+	</label>
+</div>

package/src/lib/index.ts

@@ -30,6 +30,9 @@ import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 
+// CodeEditor
+import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
+
 //notification
 import Notification from './components/page/Notification.svelte';
 
@@ -96,4 +99,8 @@ export {
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };
+
+// CodeEditor
+export { CodeEditor };
+
 export type { TableConfig, Columns, Column };

package/src/lib/models/Models.ts

@@ -105,6 +105,8 @@ export interface Columns {
 export interface TableConfig<T> {
 	id: string;
 	data: Writable<T[]>;
+	toggle?: boolean;
+	fitToScreen?: boolean;
 	height?: null | number;
 	columns?: Columns;
 	pageSizes?: number[];