@bexis2/bexis2-core-ui 0.2.21 → 0.2.23

package/README.md

@@ -1,18 +1,29 @@
 # bexis-core-ui
+
+## 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
@@ -22,7 +33,7 @@
 ## v0.2.15
 
 - Page - centered -> min width defined
-- MultiSelect -> add clearable 
+- MultiSelect -> add clearable
 
 ## v0.2.14
 
@@ -63,13 +74,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
@@ -216,7 +227,7 @@
   - Disabling of filters
   - Disabling of sorting
 
-### fixes:
+### fixes
 
 #### table
 

package/dist/TableView.svelte

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

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -0,0 +1,87 @@
+<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 title = "";
+export let initialValue = "";
+export let value = initialValue;
+export let language = "html";
+export let dark = true;
+export let toggle = 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">{title}</h1>
+	<slot />
+	<div class="grid gap-1 w-full h-full mt-5">
+		<div class="rounded-lg shadow-lg w-full">
+			<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">
+		<div class="flex gap-2">
+			<button
+				class="btn variant-filled-warning"
+				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}
+					on:click|preventDefault={() => (dark = !dark)}
+				>
+					{#if dark}
+						<Fa icon={faMoon} color="white" />
+					{:else}
+						<Fa icon={faSun} color="black" />
+					{/if}
+				</button>
+			{/if}
+		</div>
+
+		<div class="flex gap-2">
+			<button class="btn variant-filled-warning" on:click={() => dispatch('cancel')}
+				><Fa icon={faXmark} /></button
+			>
+			<button class="btn variant-filled-primary" on:click={() => dispatch('save')}
+				><Fa icon={faSave} /></button
+			>
+		</div>
+	</div>
+</div>
+
+<Modal />

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ThemeSpec } from 'svelte-codemirror-editor';
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        initialValue?: string | undefined;
+        value?: string | undefined;
+        language?: string | undefined;
+        dark?: boolean | undefined;
+        toggle?: boolean | undefined;
+        styles?: ThemeSpec | undefined;
+    };
+    events: {
+        cancel: CustomEvent<any>;
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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/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

@@ -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, {
@@ -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
@@ -142,13 +143,16 @@ const { filterValue } = pluginStates.tableFilter;
 				placeholder="Search rows..."
 			/>
 		{/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}
+				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">

package/dist/components/Table/TablePagination.svelte

@@ -20,41 +20,41 @@ $:
   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}
+	>
+		<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>

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/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/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

@@ -7,16 +7,16 @@ export let invalid = false;
 export let required = false;
 export let feedback = [""];
 export let help = 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
-	/>
-</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
+	/>
+</InputContainer>