@bexis2/bexis2-core-ui 0.2.30 → 0.2.32

package/README.md

@@ -1,9 +1,18 @@
 # bexis-core-ui
 
+## 0.2.32
+
+- resizability for Table rows and columns
+- **fixedWidth** and **minWidth** options for columns
+
+## 0.2.31
+
+- validation and syntax check for code editor component
+
 ## 0.2.30
 
 - fix routes for 'file' components ('.../file/...' -> '.../File/...')
-- 'Table' components is able to display heterogeneous data, that means data items/rows might have a different number of properties/columns.
+- 'Table' component is able to display heterogeneous data, that means data items/rows might have a different number of properties/columns.
 
 ## 0.2.29
 

package/dist/TableView.svelte

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

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -1,9 +1,11 @@
 <script>import { createEventDispatcher } from "svelte";
 import CodeMirror from "svelte-codemirror-editor";
 import Fa from "svelte-fa/src/fa.svelte";
+import Linter from "eslint4b-prebuilt";
 import { html } from "@codemirror/lang-html";
-import { javascript } from "@codemirror/lang-javascript";
-import { json } from "@codemirror/lang-json";
+import { javascript, esLint } from "@codemirror/lang-javascript";
+import { lintGutter, linter } from "@codemirror/lint";
+import { json, jsonParseLinter } 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";
@@ -16,6 +18,7 @@ export let language = "html";
 export let dark = true;
 export let toggle = true;
 export let actions = true;
+export let isValid = false;
 export let styles = {
   "&": {
     borderRadius: "0.5rem",
@@ -32,14 +35,34 @@ const modal = {
   body: "Unsaved changes will be lost. Are you sure you want to continue?",
   response: (r) => r ? value = initialValue : null
 };
+const extensions = language === "js" ? [linter(esLint(new Linter())), lintGutter()] : language === "json" ? [linter(jsonParseLinter()), lintGutter()] : [];
+const isValidJSON = (str) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+const isValidJS = (str) => {
+  try {
+    new Function(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+$:
+  isValid = language === "json" ? isValidJSON(value) : language === "js" ? isValidJS(value) : true;
 </script>
 
-<div class="items-center justify-center">
-
-	<h1 class="h1 font-semibold text-primary-500 mb-3" id="{id}-title">{title}</h1>
+<div class="grid items-stretch justify-stretch gap-1">
+	<label class="label" for="{id}-editor" id="{id}-title">
+		<span>{title}</span>
+	</label>
 	<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">
+	<div class="grid gap-1 w-full h-full">
+		<div class="rounded-lg shadow-lg w-full overflow-auto" id="{id}-editor">
 			<CodeMirror
 				bind:value
 				lang={language === 'html'
@@ -50,11 +73,11 @@ const modal = {
 				theme={dark ? oneDark : null}
 				class="flex w-full"
 				{styles}
+				{extensions}
 			/>
 		</div>
 	</div>
 
-
 	<div class="flex justify-between gap-2 items-center mt-3" id="{id}-footer">
 		<div class="flex gap-2">
 			<button
@@ -89,6 +112,7 @@ const modal = {
 				<button
 					class="btn variant-filled-primary"
 					id="{id}-save"
+					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
 				>
 			</div>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         dark?: boolean | undefined;
         toggle?: boolean | undefined;
         actions?: boolean | undefined;
+        isValid?: boolean | undefined;
         styles?: ThemeSpec | undefined;
     };
     events: {

package/dist/components/File/FileIcon.svelte

@@ -1,45 +1,45 @@
-<script>
-	import Fa from 'svelte-fa';
-	import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
-	import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
-	import { faFileWord } from '@fortawesome/free-regular-svg-icons';
-	import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
-	import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
-	import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
-	import { faFileImage } from '@fortawesome/free-regular-svg-icons';
-	import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
-
-	export let type = '';
-</script>
-
-{#if type.includes('excel') || type.includes('spreadsheetml')}
-	<Fa icon={faFileExcel} />
-{/if}
-
-{#if type.includes('text')}
-	<Fa icon={faFileAlt} />
-{/if}
-
-{#if type.includes('image')}
-	<Fa icon={faFileImage} />
-{/if}
-
-{#if type.includes('audio')}
-	<Fa icon={faFileAudio} />
-{/if}
-
-{#if type.includes('video')}
-	<Fa icon={faFileVideo} />
-{/if}
-
-{#if type.includes('word')}
-	<Fa icon={faFileWord} />
-{/if}
-
-{#if type.includes('pdf')}
-	<Fa icon={faFilePdf} />
-{/if}
-
-{#if type.includes('zip')}
-	<Fa icon={faFileArchive} />
-{/if}
+<script>
+	import Fa from 'svelte-fa';
+	import { faFileAudio } from '@fortawesome/free-regular-svg-icons';
+	import { faFileVideo } from '@fortawesome/free-regular-svg-icons';
+	import { faFileWord } from '@fortawesome/free-regular-svg-icons';
+	import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
+	import { faFileExcel } from '@fortawesome/free-regular-svg-icons';
+	import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
+	import { faFileImage } from '@fortawesome/free-regular-svg-icons';
+	import { faFileArchive } from '@fortawesome/free-regular-svg-icons';
+
+	export let type = '';
+</script>
+
+{#if type.includes('excel') || type.includes('spreadsheetml')}
+	<Fa icon={faFileExcel} />
+{/if}
+
+{#if type.includes('text')}
+	<Fa icon={faFileAlt} />
+{/if}
+
+{#if type.includes('image')}
+	<Fa icon={faFileImage} />
+{/if}
+
+{#if type.includes('audio')}
+	<Fa icon={faFileAudio} />
+{/if}
+
+{#if type.includes('video')}
+	<Fa icon={faFileVideo} />
+{/if}
+
+{#if type.includes('word')}
+	<Fa icon={faFileWord} />
+{/if}
+
+{#if type.includes('pdf')}
+	<Fa icon={faFilePdf} />
+{/if}
+
+{#if type.includes('zip')}
+	<Fa icon={faFileArchive} />
+{/if}

package/dist/components/File/FileInfo.svelte

@@ -1,13 +1,13 @@
-<script>
-	import FileIcon from './FileIcon.svelte';
-
-	export let name = '';
-	export let type = '';
-	// export let description;
-	export let size = '';
-</script>
-
-<div style="font-size:{size}">
-	<FileIcon {type} />
-	{name}
-</div>
+<script>
+	import FileIcon from './FileIcon.svelte';
+
+	export let name = '';
+	export let type = '';
+	// export let description;
+	export let size = '';
+</script>
+
+<div style="font-size:{size}">
+	<FileIcon {type} />
+	{name}
+</div>

package/dist/components/ListView.svelte

@@ -1,6 +1,6 @@
 <script>let result = { name: "david" };
-</script>
-
-<h1>MyList</h1>
-{result.name}
-<b>from bexis-lib</b>
+</script>
+
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/dist/components/Table/Table.svelte

@@ -18,6 +18,7 @@ let {
   id: tableId,
   data,
   columns,
+  resizable = "none",
   height = null,
   optionsComponent,
   defaultPageSize = 10,
@@ -105,7 +106,7 @@ const tableColumns = [
         header: key,
         accessor,
         cell: ({ value }) => {
-          return value === void 0 ? "" : value;
+          return value ? value : "";
         },
         plugins: {
           sort: {
@@ -128,7 +129,7 @@ const tableColumns = [
 if (optionsComponent !== void 0) {
   tableColumns.push(
     table.display({
-      id: "actionsColumn",
+      id: "optionsColumn",
       header: "",
       cell: ({ row }, _) => {
         return createRender(optionsComponent, {
@@ -142,13 +143,53 @@ if (optionsComponent !== void 0) {
 const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
+const minWidth = (id) => {
+  if (columns && id in columns) {
+    return columns[id].minWidth ?? 0;
+  }
+  return 0;
+};
+const fixedWidth = (id) => {
+  if (columns && id in columns) {
+    return columns[id].fixedWidth ?? 0;
+  }
+  return 0;
+};
+const cellStyle = (id) => {
+  const minW = minWidth(id);
+  const fixedW = fixedWidth(id);
+  const styles = [];
+  minW && styles.push(`min-width: ${minW}px`);
+  fixedW && styles.push(`width: ${fixedW}px`);
+  return styles.join(";");
+};
+const resetResize = () => {
+  if (resizable === "columns" || resizable === "both") {
+    $headerRows.forEach((row) => {
+      row.cells.forEach((cell) => {
+        const minW = minWidth(cell.id);
+        const fixedW = fixedWidth(cell.id);
+        fixedW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("width", `${fixedW}px`);
+        minW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("min-width", `${minW}px`);
+        !minW && !fixedW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("width", "auto");
+      });
+    });
+  }
+  if (resizable === "rows" || resizable === "both") {
+    $pageRows.forEach((row) => {
+      row.cells.forEach((cell) => {
+        document.getElementById(`${tableId}-${cell.id}-${row.id}`)?.style.setProperty("height", "auto");
+      });
+    });
+  }
+};
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
 		{#if $data.length > 0}
 			<input
-				class="input p-2 mb-2 border border-primary-500"
+				class="input p-2 border border-primary-500"
 				type="text"
 				bind:value={$filterValue}
 				placeholder="Search rows..."
@@ -156,24 +197,37 @@ const { filterValue } = pluginStates.tableFilter;
 			/>
 		{/if}
 
-		{#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="flex justify-between items-center py-2 w-full">
+			<div>
+				{#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>
+			<div>
+				{#if resizable !== 'none'}
+					<button
+						type="button"
+						class="btn btn-sm variant-filled-primary rounded-full order-last"
+						on:click|preventDefault={resetResize}>Reset sizing</button
+					>
+				{/if}
+			</div>
+		</div>
 
 		<div class="overflow-auto" style="height: {height}px">
 			<table
 				{...$tableAttrs}
-				class="table table-compact bg-tertiary-200 overflow-clip"
+				class="table table-auto table-compact bg-tertiary-500/30 overflow-clip"
 				id="{tableId}-table"
 			>
-				<thead class={height != null ? `sticky top-0` : ''}>
+				<thead class=" {height != null ? `sticky top-0` : ''}">
 					{#each $headerRows as headerRow (headerRow.id)}
 						<Subscribe
 							rowAttrs={headerRow.attrs()}
@@ -181,11 +235,19 @@ const { filterValue } = pluginStates.tableFilter;
 							rowProps={headerRow.props()}
 							let:rowProps
 						>
-							<tr {...rowAttrs} class="bg-primary-300">
+							<tr {...rowAttrs} class="bg-primary-300 items-stretch">
 								{#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">
+										<th
+											scope="col"
+											class="!p-2 overflow-auto"
+											class:resize-x={(resizable === 'columns' || resizable === 'both') &&
+												!fixedWidth(cell.id)}
+											{...attrs}
+											id="th-{tableId}-{cell.id}"
+											style={cellStyle(cell.id)}
+										>
+											<div class="flex justify-between items-center">
 												<div class="flex gap-1 whitespace-pre-wrap">
 													<span
 														class:underline={props.sort.order}
@@ -225,18 +287,18 @@ const { filterValue } = pluginStates.tableFilter;
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
 					{#each $pageRows as row (row.id)}
 						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<tr {...rowAttrs} id="{tableId}-row-{row.id}">
-								{#each row.cells as cell (cell?.id)}
+							<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
+								{#each row.cells as cell, index (cell?.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
 										<td
 											{...attrs}
-											class="!p-2 w-max focus:resize"
+											class="!p-2 overflow-auto {index === 0 &&
+											(resizable === 'rows' || resizable === 'both')
+												? 'resize-y'
+												: ''}"
 											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}
-											>
+											<div class="flex items-center h-max overflow-x-auto">
 												<Render of={cell.render()} />
 											</div>
 										</td>

package/dist/components/Table/TableFilter.svelte

@@ -97,7 +97,7 @@ const popupFeatured = {
   target: popupId,
   placement: "bottom-start"
 };
-let type = "";
+let type = "string";
 let isDate = false;
 $values.forEach((item) => {
   if (item) {

package/dist/components/form/Checkbox.svelte

@@ -6,16 +6,16 @@ export let valid;
 export let invalid;
 export let required;
 export let feedback;
-</script>
-
-<InputContainer {label} {feedback} {required}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="checkbox"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:checked
-		on:input
-	/>
-</InputContainer>
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="checkbox"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:checked
+		on:input
+	/>
+</InputContainer>

package/dist/components/form/CheckboxKvPList.svelte

@@ -8,19 +8,19 @@ export let key;
 export let help = false;
 let required = false;
 let feedback;
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input
-				class="checkbox"
-				type="checkbox"
-				bind:group={target}
-				checked={item.key}
-				value={item.key}
-			/>
-			<p>{item.value}</p>
-		</label>
-	{/each}
-</InputContainer>
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input
+				class="checkbox"
+				type="checkbox"
+				bind:group={target}
+				checked={item.key}
+				value={item.key}
+			/>
+			<p>{item.value}</p>
+		</label>
+	{/each}
+</InputContainer>

package/dist/components/form/CheckboxList.svelte

@@ -6,13 +6,13 @@ export let description = "";
 export let key;
 let required = false;
 let feedback;
-</script>
-
-<InputContainer label={title} {feedback} {required}>
-	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
-			<p>{item}</p>
-		</label>
-	{/each}
-</InputContainer>
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+			<p>{item}</p>
+		</label>
+	{/each}
+</InputContainer>

package/dist/components/form/DateInput.svelte

@@ -8,17 +8,17 @@ export let required = false;
 export let feedback = [""];
 export let help = false;
 export let disabled = false;
-</script>
-
-<InputContainer {id} {label} {feedback} {required} {help}>
-	<input
-		{id}
-		class="input variant-form-material"
-		type="date"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value
-		on:input
-		{disabled}
-	/>
-</InputContainer>
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="date"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+		{disabled}
+	/>
+</InputContainer>

package/dist/components/form/DropdownKvP.svelte

@@ -1,54 +1,54 @@
-<script>
-	import InputContainer from './InputContainer.svelte';
-
-	export let id;
-	export let source;
-	export let target;
-	export let title;
-	export let valid = false;
-	export let invalid = false;
-	export let feedback = [''];
-	export let required = false;
-	export let complexTarget = false;
-	export let help = false;
-
-	$: selected = null;
-
-	$: updatedSelectedValue(target);
-	$: updatedTarget(selected);
-
-	function updatedSelectedValue(selection) {
-		if (selection != null) {
-			if (complexTarget) {
-				selected = selection.id;
-			} else {
-				selected = selection;
-			}
-		}
-	}
-
-	function updatedTarget(id) {
-		if (complexTarget) {
-			target = source.find((opt) => opt.id === id);
-		} else {
-			target = id;
-		}
-	}
-</script>
-
-<InputContainer {id} label={title} {feedback} {required} {help}>
-	<select
-		{id}
-		class="select variant-form-material"
-		class:input-success={valid}
-		class:input-error={invalid}
-		bind:value={selected}
-		on:change
-		on:select
-	>
-		<option value={null}>-- Please select --</option>
-		{#each source as e}
-			<option value={e.id}>{e.text}</option>
-		{/each}
-	</select>
-</InputContainer>
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	export let id;
+	export let source;
+	export let target;
+	export let title;
+	export let valid = false;
+	export let invalid = false;
+	export let feedback = [''];
+	export let required = false;
+	export let complexTarget = false;
+	export let help = false;
+
+	$: selected = null;
+
+	$: updatedSelectedValue(target);
+	$: updatedTarget(selected);
+
+	function updatedSelectedValue(selection) {
+		if (selection != null) {
+			if (complexTarget) {
+				selected = selection.id;
+			} else {
+				selected = selection;
+			}
+		}
+	}
+
+	function updatedTarget(id) {
+		if (complexTarget) {
+			target = source.find((opt) => opt.id === id);
+		} else {
+			target = id;
+		}
+	}
+</script>
+
+<InputContainer {id} label={title} {feedback} {required} {help}>
+	<select
+		{id}
+		class="select variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value={selected}
+		on:change
+		on:select
+	>
+		<option value={null}>-- Please select --</option>
+		{#each source as e}
+			<option value={e.id}>{e.text}</option>
+		{/each}
+	</select>
+</InputContainer>