@bexis2/bexis2-core-ui 0.3.3 → 0.3.5

package/README.md

@@ -1,5 +1,16 @@
 # bexis-core-ui
 
+## 0.3.5
+
+- listeItemType
+  - add description
+
+
+## 0.3.4
+
+- Page
+  - add automatic scroll to top button next to help
+
 ## 0.3.3
 
 - Table

package/dist/components/form/InputContainer.svelte

@@ -13,7 +13,7 @@ function onMouseOut() {
 }
 </script>
 
-<div id="{id}-container" on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
+<div id="{id}-container" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
 	<label class="label">
 		<span
 			>{label}

package/dist/components/page/Docs.svelte

@@ -29,7 +29,7 @@ const noteSettings = {
 	{/if}
 
 	{#each links as link}
-		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
+		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
 			<span>{link.label}</span>
 		</span>
 	{/each}

package/dist/components/page/Footer.svelte

@@ -4,9 +4,7 @@ let content = "";
 $:
   content;
 onMount(async () => {
-  console.log("footer");
   content = await getFooter();
-  console.log(content);
 });
 </script>
 

package/dist/components/page/GoToTop.svelte

@@ -0,0 +1,25 @@
+<script>
+
+ import Fa from 'svelte-fa/src/fa.svelte';
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
+
+ export let showAtPixel = 1000;
+
+ let scrollHeight = 0;
+
+ const gotoTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+ };
+
+ $: showGotoTop = scrollHeight > showAtPixel;
+</script>
+
+{#if showGotoTop}
+ <button
+ id="gotToTop"
+ class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
+ on:click={gotoTop}
+ ><Fa icon={faAngleUp}/></button >
+{/if}
+
+<svelte:window bind:scrollY={scrollHeight} />

package/dist/components/page/GoToTop.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  GoToTopProps */
+/** @typedef {typeof __propDef.events}  GoToTopEvents */
+/** @typedef {typeof __propDef.slots}  GoToTopSlots */
+export default class GoToTop extends SvelteComponentTyped<{
+    showAtPixel?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GoToTopProps = typeof __propDef.props;
+export type GoToTopEvents = typeof __propDef.events;
+export type GoToTopSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        showAtPixel?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/page/Page.svelte

@@ -12,6 +12,7 @@ import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore } from "../../stores/pageStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import Docs from "./Docs.svelte";
+import GoToTop from "./GoToTop.svelte";
 export let title = "";
 export let note = "";
 export let links = [];
@@ -25,8 +26,13 @@ onMount(async () => {
   breadcrumbStore.clean();
   breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 });
+let app;
+function scrollToTop() {
+  app.scrollIntoView();
+}
 </script>
 
+<div class="app" bind:this={app}>
 <AppShell>
 	<!--header-->
 	<svelte:fragment slot="header">
@@ -79,6 +85,11 @@ onMount(async () => {
 		{/if}
 	</div>
 
+
+
+	<GoToTop/>
 	<HelpPopUp active={help} />
 	<Notification />
 </AppShell>
+</div>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "private": false,
   "scripts": {
     "dev": "vite dev",

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

@@ -16,7 +16,7 @@
 	function onMouseOut() {}
 </script>
 
-<div id="{id}-container" on:mouseover={onMouseOver} on:mouseout={onMouseOut}>
+<div id="{id}-container" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
 	<label class="label">
 		<span
 			>{label}

package/src/lib/components/page/Docs.svelte

@@ -39,7 +39,7 @@
 	{/if}
 
 	{#each links as link}
-		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
+		<span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)} on:keypress={() => goTo(link.url, false)}>
 			<span>{link.label}</span>
 		</span>
 	{/each}

package/src/lib/components/page/Footer.svelte

@@ -6,10 +6,7 @@
 	$: content;
 
 	onMount(async () => {
-		console.log('footer');
-
 		content = await getFooter();
-		console.log(content);
 	});
 </script>
 

package/src/lib/components/page/GoToTop.svelte

@@ -0,0 +1,25 @@
+<script>
+
+ import Fa from 'svelte-fa/src/fa.svelte';
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
+
+ export let showAtPixel = 1000;
+
+ let scrollHeight = 0;
+
+ const gotoTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+ };
+
+ $: showGotoTop = scrollHeight > showAtPixel;
+</script>
+
+{#if showGotoTop}
+ <button
+ id="gotToTop"
+ class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
+ on:click={gotoTop}
+ ><Fa icon={faAngleUp}/></button >
+{/if}
+
+<svelte:window bind:scrollY={scrollHeight} />

package/src/lib/components/page/Page.svelte

@@ -20,7 +20,12 @@
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
+// icons
+import type { helpItemType, helpStoreType } from '$models/Models';
+
+
 	import Docs from './Docs.svelte';
+	import GoToTop from './GoToTop.svelte';
 
 	export let title = '';
 	export let note = '';
@@ -38,8 +43,15 @@
 		breadcrumbStore.clean();
 		breadcrumbStore.addItem({ label: title, link: window.location.pathname });
 	});
+
+ let app;
+	function scrollToTop() {
+		app.scrollIntoView();
+	}
+
 </script>
 
+<div class="app" bind:this={app}>
 <AppShell>
 	<!--header-->
 	<svelte:fragment slot="header">
@@ -92,6 +104,11 @@
 		{/if}
 	</div>
 
+
+
+	<GoToTop/>
 	<HelpPopUp active={help} />
 	<Notification />
 </AppShell>
+</div>
+