@bexis2/bexis2-core-ui 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +5 -0
  2. package/dist/components/page/Footer.svelte +0 -2
  3. package/dist/components/page/GoToTop.svelte +25 -0
  4. package/dist/components/page/GoToTop.svelte.d.ts +23 -0
  5. package/dist/components/page/Page.svelte +11 -0
  6. package/package.json +1 -1
  7. package/src/lib/components/page/Footer.svelte +0 -3
  8. package/src/lib/components/page/GoToTop.svelte +25 -0
  9. package/src/lib/components/page/Page.svelte +17 -0
package/README.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # bexis-core-ui
2
2
 
3
+ ## 0.3.4
4
+
5
+ - Page
6
+ - add automatic scroll to top button next to help
7
+
3
8
  ## 0.3.3
4
9
 
5
10
  - Table
package/dist/components/page/Footer.svelte CHANGED
@@ -4,9 +4,7 @@ let content = "";
4
4
  $:
5
5
  content;
6
6
  onMount(async () => {
7
- console.log("footer");
8
7
  content = await getFooter();
9
- console.log(content);
10
8
  });
11
9
  </script>
12
10
 
package/dist/components/page/GoToTop.svelte ADDED
@@ -0,0 +1,25 @@
1
+ <script>
2
+
3
+ import Fa from 'svelte-fa/src/fa.svelte';
4
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
5
+
6
+ export let showAtPixel = 1000;
7
+
8
+ let scrollHeight = 0;
9
+
10
+ const gotoTop = () => {
11
+ window.scrollTo({ top: 0, behavior: 'smooth' })
12
+ };
13
+
14
+ $: showGotoTop = scrollHeight > showAtPixel;
15
+ </script>
16
+
17
+ {#if showGotoTop}
18
+ <button
19
+ id="gotToTop"
20
+ class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
21
+ on:click={gotoTop}
22
+ ><Fa icon={faAngleUp}/></button >
23
+ {/if}
24
+
25
+ <svelte:window bind:scrollY={scrollHeight} />
package/dist/components/page/GoToTop.svelte.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ /** @typedef {typeof __propDef.props} GoToTopProps */
2
+ /** @typedef {typeof __propDef.events} GoToTopEvents */
3
+ /** @typedef {typeof __propDef.slots} GoToTopSlots */
4
+ export default class GoToTop extends SvelteComponentTyped<{
5
+ showAtPixel?: number | undefined;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {}> {
9
+ }
10
+ export type GoToTopProps = typeof __propDef.props;
11
+ export type GoToTopEvents = typeof __propDef.events;
12
+ export type GoToTopSlots = typeof __propDef.slots;
13
+ import { SvelteComponentTyped } from "svelte";
14
+ declare const __propDef: {
15
+ props: {
16
+ showAtPixel?: number | undefined;
17
+ };
18
+ events: {
19
+ [evt: string]: CustomEvent<any>;
20
+ };
21
+ slots: {};
22
+ };
23
+ export {};
package/dist/components/page/Page.svelte CHANGED
@@ -12,6 +12,7 @@ import { storePopup } from "@skeletonlabs/skeleton";
12
12
  import { breadcrumbStore } from "../../stores/pageStores";
13
13
  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
14
14
  import Docs from "./Docs.svelte";
15
+ import GoToTop from "./GoToTop.svelte";
15
16
  export let title = "";
16
17
  export let note = "";
17
18
  export let links = [];
@@ -25,8 +26,13 @@ onMount(async () => {
25
26
  breadcrumbStore.clean();
26
27
  breadcrumbStore.addItem({ label: title, link: window.location.pathname });
27
28
  });
29
+ let app;
30
+ function scrollToTop() {
31
+ app.scrollIntoView();
32
+ }
28
33
  </script>
29
34
 
35
+ <div class="app" bind:this={app}>
30
36
  <AppShell>
31
37
  <!--header-->
32
38
  <svelte:fragment slot="header">
@@ -79,6 +85,11 @@ onMount(async () => {
79
85
  {/if}
80
86
  </div>
81
87
 
88
+
89
+
90
+ <GoToTop/>
82
91
  <HelpPopUp active={help} />
83
92
  <Notification />
84
93
  </AppShell>
94
+ </div>
95
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bexis2/bexis2-core-ui",
3
- "version": "0.3.3",
3
+ "version": "0.3.4",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vite dev",
package/src/lib/components/page/Footer.svelte CHANGED
@@ -6,10 +6,7 @@
6
6
  $: content;
7
7
 
8
8
  onMount(async () => {
9
- console.log('footer');
10
-
11
9
  content = await getFooter();
12
- console.log(content);
13
10
  });
14
11
  </script>
15
12
 
package/src/lib/components/page/GoToTop.svelte ADDED
@@ -0,0 +1,25 @@
1
+ <script>
2
+
3
+ import Fa from 'svelte-fa/src/fa.svelte';
4
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons';
5
+
6
+ export let showAtPixel = 1000;
7
+
8
+ let scrollHeight = 0;
9
+
10
+ const gotoTop = () => {
11
+ window.scrollTo({ top: 0, behavior: 'smooth' })
12
+ };
13
+
14
+ $: showGotoTop = scrollHeight > showAtPixel;
15
+ </script>
16
+
17
+ {#if showGotoTop}
18
+ <button
19
+ id="gotToTop"
20
+ class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
21
+ on:click={gotoTop}
22
+ ><Fa icon={faAngleUp}/></button >
23
+ {/if}
24
+
25
+ <svelte:window bind:scrollY={scrollHeight} />
package/src/lib/components/page/Page.svelte CHANGED
@@ -20,7 +20,12 @@
20
20
 
21
21
  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
22
22
 
23
+ // icons
24
+ import type { helpItemType, helpStoreType } from '$models/Models';
25
+
26
+
23
27
  import Docs from './Docs.svelte';
28
+ import GoToTop from './GoToTop.svelte';
24
29
 
25
30
  export let title = '';
26
31
  export let note = '';
@@ -38,8 +43,15 @@
38
43
  breadcrumbStore.clean();
39
44
  breadcrumbStore.addItem({ label: title, link: window.location.pathname });
40
45
  });
46
+
47
+ let app;
48
+ function scrollToTop() {
49
+ app.scrollIntoView();
50
+ }
51
+
41
52
  </script>
42
53
 
54
+ <div class="app" bind:this={app}>
43
55
  <AppShell>
44
56
  <!--header-->
45
57
  <svelte:fragment slot="header">
@@ -92,6 +104,11 @@
92
104
  {/if}
93
105
  </div>
94
106
 
107
+
108
+
109
+ <GoToTop/>
95
110
  <HelpPopUp active={help} />
96
111
  <Notification />
97
112
  </AppShell>
113
+ </div>
114
+