@bexis2/bexis2-core-ui 0.3.1 → 0.3.3

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>

package/dist/components/form/NumberInput.svelte

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

package/dist/components/form/TextArea.svelte

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

package/dist/components/form/TextInput.svelte

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

package/dist/components/page/Alert.svelte

@@ -7,31 +7,31 @@ export let cssClass = "";
 export let deleteBtn = true;
 $:
   show = true;
-</script>
-
-{#if show}
-	<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
-		<!-- Icon -->
-		<!-- <div>(icon)</div> -->
-		<!-- Message -->
-		<div class="alert-message">
-			{#if title}
-				<h3 class="h3">{title}</h3>
-			{/if}
-			<p>
-				{message}
-				<slot />
-			</p>
-		</div>
-		<!-- Actions -->
-		<div class="alert-actions">
-			<slot name="actions" />
-
-			{#if deleteBtn}
-				<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
-					<Fa icon={faXmark} />
-				</button>
-			{/if}
-		</div>
-	</aside>
-{/if}
+</script>
+
+{#if show}
+	<aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
+		<!-- Icon -->
+		<!-- <div>(icon)</div> -->
+		<!-- Message -->
+		<div class="alert-message">
+			{#if title}
+				<h3 class="h3">{title}</h3>
+			{/if}
+			<p>
+				{message}
+				<slot />
+			</p>
+		</div>
+		<!-- Actions -->
+		<div class="alert-actions">
+			<slot name="actions" />
+
+			{#if deleteBtn}
+				<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
+					<Fa icon={faXmark} />
+				</button>
+			{/if}
+		</div>
+	</aside>
+{/if}

package/dist/components/page/BackToTop.svelte

@@ -1,30 +1,30 @@
-<script>
-	export let showOnPx = 150;
-	let hidden = true;
-
-	function goTop() {
-		document.body.scrollIntoView();
-	}
-
-	function scrollContainer() {
-		return document.documentElement || document.body;
-	}
-
-	function handleOnScroll() {
-		if (!scrollContainer()) {
-			return;
-		}
-
-		if (scrollContainer().scrollTop > showOnPx) {
-			hidden = false;
-		} else {
-			hidden = true;
-		}
-	}
-</script>
-
-<svelte:window on:scroll={handleOnScroll} />
-
-<div class="w-full items-center">
-	<button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
-</div>
+<script>
+	export let showOnPx = 150;
+	let hidden = true;
+
+	function goTop() {
+		document.body.scrollIntoView();
+	}
+
+	function scrollContainer() {
+		return document.documentElement || document.body;
+	}
+
+	function handleOnScroll() {
+		if (!scrollContainer()) {
+			return;
+		}
+
+		if (scrollContainer().scrollTop > showOnPx) {
+			hidden = false;
+		} else {
+			hidden = true;
+		}
+	}
+</script>
+
+<svelte:window on:scroll={handleOnScroll} />
+
+<div class="w-full items-center">
+	<button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
+</div>

package/dist/components/page/Docs.svelte

@@ -12,25 +12,25 @@ const noteSettings = {
   target: "noteTarget",
   placement: "bottom"
 };
-</script>
-
-<div class="text-right p-2">
-	{#if note}
-		<span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
-			<span><Fa icon={faQuestion} /></span>
-		</span>
-
-		<div
-			class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
-			data-popup="noteTarget"
-		>
-			{note}
-		</div>
-	{/if}
-
-	{#each links as link}
-		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
-			<span>{link.label}</span>
-		</span>
-	{/each}
-</div>
+</script>
+
+<div class="text-right p-2">
+	{#if note}
+		<span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
+			<span><Fa icon={faQuestion} /></span>
+		</span>
+
+		<div
+			class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
+			data-popup="noteTarget"
+		>
+			{note}
+		</div>
+	{/if}
+
+	{#each links as link}
+		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
+			<span>{link.label}</span>
+		</span>
+	{/each}
+</div>

package/dist/components/page/ErrorMessage.svelte

@@ -1,9 +1,9 @@
 <script>export let error;
-</script>
-
-<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
-	<div class="p-5 space-y-4">
-		<h3 class="h3">{error.name}</h3>
-		<p>{error.message}</p>
-	</div>
-</div>
+</script>
+
+<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
+	<div class="p-5 space-y-4">
+		<h3 class="h3">{error.name}</h3>
+		<p>{error.message}</p>
+	</div>
+</div>

package/dist/components/page/Footer.svelte

@@ -8,8 +8,8 @@ onMount(async () => {
   content = await getFooter();
   console.log(content);
 });
-</script>
-
-{#if content != undefined}
-	{@html content}
-{/if}
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

package/dist/components/page/Header.svelte

@@ -8,8 +8,8 @@ onMount(async () => {
   content = await getHeader();
   console.log(content);
 });
-</script>
-
-{#if content != undefined}
-	{@html content}
-{/if}
+</script>
+
+{#if content != undefined}
+	{@html content}
+{/if}

package/dist/components/page/HelpPopUp.svelte

@@ -26,33 +26,33 @@ async function resetItemId() {
   await delay(100);
   helpStore.resetItemId();
 }
-</script>
-
-{#if active}
-	<button
-		id="helpButton"
-		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
-		use:popup={helpClick}><Fa icon={faQuestion} /></button
-	>
-
-	<div
-		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
-		data-popup="helpTarget"
-	>
-		{#if helpItem && helpItem.id}
-			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
-				<h3 class="h3">{helpItem.name}</h3>
-				<p>{@html helpItem.description}</p>
-				{#if helpItem.link}
-					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
-				{/if}
-			</div>
-		{:else}
-			<div class="p-5 w-96 space-y-4" id="helpPopup">
-				<h3 class="h3">Help</h3>
-				<p>Hover over the Element, you like to know more about.</p>
-			</div>
-		{/if}
-		<div class="arrow variant-filled-primary" />
-	</div>
-{/if}
+</script>
+
+{#if active}
+	<button
+		id="helpButton"
+		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
+		use:popup={helpClick}><Fa icon={faQuestion} /></button
+	>
+
+	<div
+		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
+		data-popup="helpTarget"
+	>
+		{#if helpItem && helpItem.id}
+			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
+				<h3 class="h3">{helpItem.name}</h3>
+				<p>{@html helpItem.description}</p>
+				{#if helpItem.link}
+					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
+				{/if}
+			</div>
+		{:else}
+			<div class="p-5 w-96 space-y-4" id="helpPopup">
+				<h3 class="h3">Help</h3>
+				<p>Hover over the Element, you like to know more about.</p>
+			</div>
+		{/if}
+		<div class="arrow variant-filled-primary" />
+	</div>
+{/if}

package/dist/components/page/PageCaller.js

@@ -1,19 +1,19 @@
-import { Api } from '../../services/Api';
-
-export const getFooter = async () => {
-	try {
-		const response = await Api.get('/footer');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
-
-export const getHeader = async () => {
-	try {
-		const response = await Api.get('/header');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
+import { Api } from '../../services/Api';
+
+export const getFooter = async () => {
+	try {
+		const response = await Api.get('/footer');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+export const getHeader = async () => {
+	try {
+		const response = await Api.get('/header');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/dist/components/page/Spinner.svelte

@@ -2,17 +2,17 @@
 export let textCss = "text-surface-600";
 export let label = "";
 export let position = positionType.center;
-</script>
-
-<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
-	<div
-		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
-		role="status"
-	>
-		<span
-			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-			>Loading...</span
-		>
-	</div>
-	<span>{label}</span>
-</div>
+</script>
+
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
+	<div
+		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+		role="status"
+	>
+		<span
+			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+			>Loading...</span
+		>
+	</div>
+	<span>{label}</span>
+</div>

package/dist/components/page/menu/MenuDataCaller.js

@@ -1,10 +1,10 @@
-import { Api } from '../../../services/Api';
-
-export const getMenuItems = async () => {
-	try {
-		const response = await Api.get('/menu');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
+import { Api } from '../../../services/Api';
+
+export const getMenuItems = async () => {
+	try {
+		const response = await Api.get('/menu');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/dist/css/core.ui.postcss

@@ -1,17 +1,17 @@
-/*place global styles here */
-html,
-body {
-	@apply h-full;
-}
-
-h1 {
-	@apply text-primary-500;
-}
-
-:root {
-	--background: rgb(var(--color-surface-200));
-}
-
-[type='text']:focus {
-	--tw-ring-color: #00000;
-}
+/*place global styles here */
+html,
+body {
+	@apply h-full;
+}
+
+h1 {
+	@apply text-primary-500;
+}
+
+:root {
+	--background: rgb(var(--color-surface-200));
+}
+
+[type='text']:focus {
+	--tw-ring-color: #00000;
+}