@functionalcms/svelte-components 2.13.3 → 2.13.5
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.
- package/dist/components/layouts/DefaultLayout.svelte +2 -1
- package/dist/components/layouts/DefaultLayout.svelte.d.ts +1 -0
- package/dist/components/menu/{SideMenu.svelte → ColumnMenu.svelte} +21 -37
- package/dist/components/menu/{SideMenu.svelte.d.ts → ColumnMenu.svelte.d.ts} +4 -6
- package/dist/components/menu/DynamicMenu.svelte +41 -0
- package/dist/components/menu/DynamicMenu.svelte.d.ts +27 -0
- package/dist/components/menu/FlatMenu.svelte +23 -37
- package/dist/components/menu/FlatMenu.svelte.d.ts +0 -2
- package/dist/components/menu/HamburgerMenu.svelte +76 -76
- package/dist/components/menu/HamburgerMenu.svelte.d.ts +0 -1
- package/dist/components/presentation/Gallery.svelte +2 -2
- package/dist/components/presentation/Gallery.svelte.d.ts +5 -3
- package/dist/index.d.ts +4 -4
- package/dist/index.js +4 -5
- package/package.json +1 -3
|
@@ -13,6 +13,7 @@ import { metaDescription, metaKeywords } from "../../stores/meta";
|
|
|
13
13
|
export let robots = "index, follow";
|
|
14
14
|
export let headerIsSticky = false;
|
|
15
15
|
export let tracker = "";
|
|
16
|
+
export let canonicalUrl = "";
|
|
16
17
|
$:
|
|
17
18
|
headerCss = headerIsSticky ? "sticky" : "";
|
|
18
19
|
</script>
|
|
@@ -20,7 +21,7 @@ $:
|
|
|
20
21
|
<svelte:head>
|
|
21
22
|
<script data-goatcounter="https://{tracker}.goatcounter.com/count"
|
|
22
23
|
async src="//gc.zgo.at/count.js"></script>
|
|
23
|
-
<link rel="canonical" href="{$page.url.pathname}">
|
|
24
|
+
<link rel="canonical" href="{canonicalUrl}{$page.url.pathname}">
|
|
24
25
|
|
|
25
26
|
<title>{$title}{$suffix}</title>
|
|
26
27
|
<meta name="og:title" property="og:title" content="{$title}{$suffix}" />
|
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
<script>import { HeaderNavigationItem } from "./Menu.js";
|
|
2
|
+
import { page } from "$app/stores";
|
|
3
|
+
import { isSelected } from "./MenuFunctions.js";
|
|
4
|
+
export let css = "";
|
|
5
|
+
export let localPages = [];
|
|
6
|
+
export let includeSubpagesForSelect = false;
|
|
7
|
+
const klasses = ["flex", "flex-column", css ? css : ""].filter((c) => c).join(" ");
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<ul class={klasses}>
|
|
11
|
+
{#each localPages as pageItem}
|
|
12
|
+
<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
|
|
13
|
+
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
14
|
+
<a on:click={pageItem.action} href={pageItem.path}>
|
|
15
|
+
{pageItem.name}
|
|
16
|
+
</a>
|
|
17
|
+
</li>
|
|
18
|
+
{/each}
|
|
19
|
+
</ul>
|
|
20
|
+
|
|
1
21
|
<style>
|
|
2
22
|
ul {
|
|
3
23
|
background: var(--functional-menu-background);
|
|
@@ -5,10 +25,9 @@
|
|
|
5
25
|
padding: var(--functional-menu-padding);
|
|
6
26
|
}
|
|
7
27
|
li {
|
|
8
|
-
|
|
9
28
|
}
|
|
10
29
|
a {
|
|
11
|
-
color: var(--functional-menu-item-color
|
|
30
|
+
color: var(--functional-menu-item-color);
|
|
12
31
|
margin: var(--functional-menu-item-margin);
|
|
13
32
|
padding: var(--functional-menu-item-padding);
|
|
14
33
|
background: var(--functional-menu-item-background);
|
|
@@ -43,38 +62,3 @@
|
|
|
43
62
|
border-radius: var(--functional-menu-item-selected-radius, var(--agnostic-radius));
|
|
44
63
|
}
|
|
45
64
|
</style>
|
|
46
|
-
|
|
47
|
-
<script>import { Visiblity, HeaderNavigationItem } from "./Menu.js";
|
|
48
|
-
import { page } from "$app/stores";
|
|
49
|
-
import { pages as pagesStore } from "../../stores/pages.js";
|
|
50
|
-
import { isSelected, selectVisible } from "./MenuFunctions.js";
|
|
51
|
-
export let authentication = false;
|
|
52
|
-
export let css = "";
|
|
53
|
-
export let navCss = "";
|
|
54
|
-
export let localPages = [];
|
|
55
|
-
export let includeSubpagesForSelect = false;
|
|
56
|
-
$:
|
|
57
|
-
visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
|
|
58
|
-
$:
|
|
59
|
-
activePages = !localPages || localPages.length == 0 ? $pagesStore : localPages;
|
|
60
|
-
$:
|
|
61
|
-
visibleNavItems = selectVisible(activePages, visibility);
|
|
62
|
-
const klasses = [
|
|
63
|
-
"flex",
|
|
64
|
-
"flex-column",
|
|
65
|
-
css ? css : ""
|
|
66
|
-
].filter((c) => c).join(" ");
|
|
67
|
-
</script>
|
|
68
|
-
|
|
69
|
-
<nav class={navCss}>
|
|
70
|
-
<ul class={klasses}>
|
|
71
|
-
{#each visibleNavItems as pageItem}
|
|
72
|
-
<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
|
|
73
|
-
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
74
|
-
<a on:click={pageItem.action} href={pageItem.path}>
|
|
75
|
-
{pageItem.name}
|
|
76
|
-
</a>
|
|
77
|
-
</li>
|
|
78
|
-
{/each}
|
|
79
|
-
</ul>
|
|
80
|
-
</nav>
|
|
@@ -2,9 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import { HeaderNavigationItem } from './Menu.js';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
authentication?: boolean | undefined;
|
|
6
5
|
css?: string | undefined;
|
|
7
|
-
navCss?: string | undefined;
|
|
8
6
|
localPages?: HeaderNavigationItem[] | undefined;
|
|
9
7
|
includeSubpagesForSelect?: boolean | undefined;
|
|
10
8
|
};
|
|
@@ -13,9 +11,9 @@ declare const __propDef: {
|
|
|
13
11
|
};
|
|
14
12
|
slots: {};
|
|
15
13
|
};
|
|
16
|
-
export type
|
|
17
|
-
export type
|
|
18
|
-
export type
|
|
19
|
-
export default class
|
|
14
|
+
export type ColumnMenuProps = typeof __propDef.props;
|
|
15
|
+
export type ColumnMenuEvents = typeof __propDef.events;
|
|
16
|
+
export type ColumnMenuSlots = typeof __propDef.slots;
|
|
17
|
+
export default class ColumnMenu extends SvelteComponent<ColumnMenuProps, ColumnMenuEvents, ColumnMenuSlots> {
|
|
20
18
|
}
|
|
21
19
|
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script>import { Visiblity, HeaderNavigationItem } from "./Menu.js";
|
|
2
|
+
import { pages as pagesStore } from "../../stores/pages.js";
|
|
3
|
+
import { selectVisible } from "./MenuFunctions.js";
|
|
4
|
+
export let authentication = false;
|
|
5
|
+
export let css = "";
|
|
6
|
+
export let navCss = "";
|
|
7
|
+
export let localPages = [];
|
|
8
|
+
$:
|
|
9
|
+
activePages = !localPages || localPages.length == 0 ? $pagesStore : localPages;
|
|
10
|
+
$:
|
|
11
|
+
visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
|
|
12
|
+
$:
|
|
13
|
+
visibleNavItems = selectVisible(activePages, visibility);
|
|
14
|
+
const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).join(" ");
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<nav class={navCss}>
|
|
18
|
+
<div class="mobile">
|
|
19
|
+
<slot name="mobile" pages={visibleNavItems} />
|
|
20
|
+
</div>
|
|
21
|
+
<div class="desktop">
|
|
22
|
+
<slot name="desktop" pages={visibleNavItems}/>
|
|
23
|
+
</div>
|
|
24
|
+
</nav>
|
|
25
|
+
|
|
26
|
+
<style>
|
|
27
|
+
.desktop {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
.mobile {
|
|
31
|
+
display: block;
|
|
32
|
+
}
|
|
33
|
+
@media (min-width: 960px) {
|
|
34
|
+
.desktop {
|
|
35
|
+
display: block;
|
|
36
|
+
}
|
|
37
|
+
.mobile {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { HeaderNavigationItem } from './Menu.js';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
authentication?: boolean | undefined;
|
|
6
|
+
css?: string | undefined;
|
|
7
|
+
navCss?: string | undefined;
|
|
8
|
+
localPages?: HeaderNavigationItem[] | undefined;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {
|
|
14
|
+
mobile: {
|
|
15
|
+
pages: any[];
|
|
16
|
+
};
|
|
17
|
+
desktop: {
|
|
18
|
+
pages: any[];
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export type DynamicMenuProps = typeof __propDef.props;
|
|
23
|
+
export type DynamicMenuEvents = typeof __propDef.events;
|
|
24
|
+
export type DynamicMenuSlots = typeof __propDef.slots;
|
|
25
|
+
export default class DynamicMenu extends SvelteComponent<DynamicMenuProps, DynamicMenuEvents, DynamicMenuSlots> {
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
<script>import { HeaderNavigationItem } from "./Menu.js";
|
|
2
|
+
import { page } from "$app/stores";
|
|
3
|
+
import { isSelected } from "./MenuFunctions.js";
|
|
4
|
+
export let css = "";
|
|
5
|
+
export let localPages = [];
|
|
6
|
+
export let includeSubpagesForSelect = false;
|
|
7
|
+
const klasses = ["flex", "flex-dynamic-row", css ? css : ""].filter((c) => c).join(" ");
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<ul class={klasses}>
|
|
11
|
+
{#each localPages as pageItem}
|
|
12
|
+
<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
|
|
13
|
+
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
14
|
+
<a on:click={pageItem.action} href={pageItem.path}>
|
|
15
|
+
{pageItem.name}
|
|
16
|
+
</a>
|
|
17
|
+
</li>
|
|
18
|
+
{/each}
|
|
19
|
+
</ul>
|
|
20
|
+
|
|
1
21
|
<style>
|
|
2
22
|
ul {
|
|
3
23
|
background: var(--functional-menu-background);
|
|
@@ -5,10 +25,9 @@
|
|
|
5
25
|
padding: var(--functional-menu-padding);
|
|
6
26
|
}
|
|
7
27
|
li {
|
|
8
|
-
|
|
9
28
|
}
|
|
10
29
|
a {
|
|
11
|
-
color: var(--functional-menu-item-color
|
|
30
|
+
color: var(--functional-menu-item-color);
|
|
12
31
|
margin: var(--functional-menu-item-margin);
|
|
13
32
|
padding: var(--functional-menu-item-padding);
|
|
14
33
|
background: var(--functional-menu-item-background);
|
|
@@ -42,39 +61,6 @@
|
|
|
42
61
|
border-left: var(--functional-menu-item-selected-border-left);
|
|
43
62
|
border-radius: var(--functional-menu-item-selected-radius, var(--agnostic-radius));
|
|
44
63
|
}
|
|
64
|
+
@media (min-width: 960px) {
|
|
65
|
+
}
|
|
45
66
|
</style>
|
|
46
|
-
|
|
47
|
-
<script>import { Visiblity, HeaderNavigationItem } from "./Menu.js";
|
|
48
|
-
import { page } from "$app/stores";
|
|
49
|
-
import { pages as pagesStore } from "../../stores/pages.js";
|
|
50
|
-
import { isSelected, selectVisible } from "./MenuFunctions.js";
|
|
51
|
-
export let authentication = false;
|
|
52
|
-
export let css = "";
|
|
53
|
-
export let navCss = "";
|
|
54
|
-
export let localPages = [];
|
|
55
|
-
export let includeSubpagesForSelect = false;
|
|
56
|
-
$:
|
|
57
|
-
activePages = !localPages || localPages.length == 0 ? $pagesStore : localPages;
|
|
58
|
-
$:
|
|
59
|
-
visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
|
|
60
|
-
$:
|
|
61
|
-
visibleNavItems = selectVisible(activePages, visibility);
|
|
62
|
-
const klasses = [
|
|
63
|
-
"flex",
|
|
64
|
-
"flex-dynamic-row",
|
|
65
|
-
css ? css : ""
|
|
66
|
-
].filter((c) => c).join(" ");
|
|
67
|
-
</script>
|
|
68
|
-
|
|
69
|
-
<nav class={navCss}>
|
|
70
|
-
<ul class={klasses}>
|
|
71
|
-
{#each visibleNavItems as pageItem}
|
|
72
|
-
<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
|
|
73
|
-
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
74
|
-
<a on:click={pageItem.action} href={pageItem.path}>
|
|
75
|
-
{pageItem.name}
|
|
76
|
-
</a>
|
|
77
|
-
</li>
|
|
78
|
-
{/each}
|
|
79
|
-
</ul>
|
|
80
|
-
</nav>
|
|
@@ -2,9 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import { HeaderNavigationItem } from './Menu.js';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
authentication?: boolean | undefined;
|
|
6
5
|
css?: string | undefined;
|
|
7
|
-
navCss?: string | undefined;
|
|
8
6
|
localPages?: HeaderNavigationItem[] | undefined;
|
|
9
7
|
includeSubpagesForSelect?: boolean | undefined;
|
|
10
8
|
};
|
|
@@ -1,12 +1,70 @@
|
|
|
1
|
+
<script>import { HeaderNavigationItem } from "./Menu.js";
|
|
2
|
+
import { afterNavigate } from "$app/navigation";
|
|
3
|
+
import { Drawer, Button } from "agnostic-svelte";
|
|
4
|
+
import { page } from "$app/stores";
|
|
5
|
+
import { Placement } from "../Styling.js";
|
|
6
|
+
import { isSelected } from "./MenuFunctions.js";
|
|
7
|
+
export let css = "";
|
|
8
|
+
export let noBorder = false;
|
|
9
|
+
export let placement = Placement.Start;
|
|
10
|
+
export let localPages = [];
|
|
11
|
+
export let includeSubpagesForSelect = false;
|
|
12
|
+
let drawer = null;
|
|
13
|
+
const assignDrawerRef = (ev) => {
|
|
14
|
+
drawer = ev.detail.instance;
|
|
15
|
+
};
|
|
16
|
+
afterNavigate((navigation) => drawer?.hide());
|
|
17
|
+
const klasses = [
|
|
18
|
+
"hamburger-handle",
|
|
19
|
+
css ? css : "",
|
|
20
|
+
noBorder ? "no-border" : ""
|
|
21
|
+
].filter((c) => c).join(" ");
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<Button
|
|
25
|
+
type="button"
|
|
26
|
+
data-a11y-dialog-show="hamburger-menu"
|
|
27
|
+
mode="primary"
|
|
28
|
+
noBorder
|
|
29
|
+
css={klasses}
|
|
30
|
+
>
|
|
31
|
+
☰
|
|
32
|
+
</Button>
|
|
33
|
+
<Drawer
|
|
34
|
+
id="hamburger-menu"
|
|
35
|
+
drawerRoot="#drawer-root"
|
|
36
|
+
{placement}
|
|
37
|
+
on:instance={assignDrawerRef}
|
|
38
|
+
title="Menu"
|
|
39
|
+
>
|
|
40
|
+
<ul>
|
|
41
|
+
{#each localPages as pageItem}
|
|
42
|
+
<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
|
|
43
|
+
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
44
|
+
<a on:click={pageItem.action} href={pageItem.path}>
|
|
45
|
+
{pageItem.name}
|
|
46
|
+
</a>
|
|
47
|
+
</li>
|
|
48
|
+
{/each}
|
|
49
|
+
</ul>
|
|
50
|
+
</Drawer>
|
|
51
|
+
|
|
1
52
|
<style>
|
|
2
|
-
|
|
3
|
-
|
|
53
|
+
:global(.hamburger-handle) {
|
|
54
|
+
background: var(--functional-menu-background) !important;
|
|
55
|
+
}
|
|
56
|
+
:global(#hamburger-menu) {
|
|
57
|
+
z-index: 10001;
|
|
4
58
|
}
|
|
5
|
-
|
|
6
|
-
background: var(--functional-menu-background)!important;
|
|
59
|
+
:global(#hamburger-menu>.dialog-content) {
|
|
60
|
+
background: var(--functional-menu-background) !important;
|
|
61
|
+
}
|
|
62
|
+
:global(.no-border) {
|
|
63
|
+
border: none !important;
|
|
7
64
|
}
|
|
8
65
|
ul {
|
|
9
66
|
list-style: none;
|
|
67
|
+
background-color: white;
|
|
10
68
|
}
|
|
11
69
|
:global(#menu-id) {
|
|
12
70
|
color: var(--functional-menu-item-color);
|
|
@@ -15,28 +73,28 @@
|
|
|
15
73
|
display: block;
|
|
16
74
|
font-weight: bold;
|
|
17
75
|
color: var(--functional-menu-item-color);
|
|
18
|
-
margin: var(--functional-menu-item-
|
|
19
|
-
padding: var(--functional-menu-item-
|
|
20
|
-
background: var(--functional-menu-item-
|
|
21
|
-
border-top: var(--functional-menu-item-
|
|
22
|
-
border-right: var(--functional-menu-item-
|
|
23
|
-
border-bottom: var(--functional-menu-item-
|
|
24
|
-
border-left: var(--functional-menu-item-
|
|
76
|
+
margin: var(--functional-menu-item-margin);
|
|
77
|
+
padding: var(--functional-menu-item-padding);
|
|
78
|
+
background: var(--functional-menu-item-background);
|
|
79
|
+
border-top: var(--functional-menu-item-border-top);
|
|
80
|
+
border-right: var(--functional-menu-item-border-right);
|
|
81
|
+
border-bottom: var(--functional-menu-item-border-bottom);
|
|
82
|
+
border-left: var(--functional-menu-item-border-left);
|
|
25
83
|
}
|
|
26
84
|
a:hover {
|
|
27
85
|
color: var(--functional-menu-item-hover-color);
|
|
28
86
|
margin: var(--functional-menu-item-hover-margin);
|
|
29
87
|
padding: var(--functional-menu-item-hover-padding);
|
|
30
|
-
background: var(--functional-menu-item-
|
|
31
|
-
border-top: var(--functional-menu-item-
|
|
32
|
-
border-right: var(--functional-menu-item-
|
|
33
|
-
border-bottom: var(--functional-menu-item-
|
|
34
|
-
border-left: var(--functional-menu-item-
|
|
88
|
+
background: var(--functional-menu-item-hover-background);
|
|
89
|
+
border-top: var(--functional-menu-item-hover-border-top);
|
|
90
|
+
border-right: var(--functional-menu-item-hover-border-right);
|
|
91
|
+
border-bottom: var(--functional-menu-item-hover-border-bottom);
|
|
92
|
+
border-left: var(--functional-menu-item-hover-border-left);
|
|
35
93
|
}
|
|
36
94
|
li[aria-current='true'] a {
|
|
37
95
|
color: var(--functional-menu-item-selected-color);
|
|
38
|
-
margin: var(--functional-menu-item-
|
|
39
|
-
padding: var(--functional-menu-item-
|
|
96
|
+
margin: var(--functional-menu-item-selected-margin);
|
|
97
|
+
padding: var(--functional-menu-item-selected-padding);
|
|
40
98
|
background: var(--functional-menu-item-selected-background);
|
|
41
99
|
border-top: var(--functional-menu-item-selected-border-top);
|
|
42
100
|
border-right: var(--functional-menu-item-selected-border-right);
|
|
@@ -44,61 +102,3 @@
|
|
|
44
102
|
border-left: var(--functional-menu-item-selected-border-left);
|
|
45
103
|
}
|
|
46
104
|
</style>
|
|
47
|
-
|
|
48
|
-
<script>import { Visiblity, HeaderNavigationItem } from "./Menu.js";
|
|
49
|
-
import { afterNavigate } from "$app/navigation";
|
|
50
|
-
import { Drawer, Button } from "agnostic-svelte";
|
|
51
|
-
import { page } from "$app/stores";
|
|
52
|
-
import { Placement, Sizes } from "../Styling.js";
|
|
53
|
-
import { pages as pagesStore } from "../../stores/pages.js";
|
|
54
|
-
import { isSelected, selectVisible } from "./MenuFunctions.js";
|
|
55
|
-
import Spacer from "../Spacer.svelte";
|
|
56
|
-
export let authentication = false;
|
|
57
|
-
export let css = "";
|
|
58
|
-
export let noBorder = false;
|
|
59
|
-
export let placement = Placement.Start;
|
|
60
|
-
export let localPages = [];
|
|
61
|
-
export let includeSubpagesForSelect = false;
|
|
62
|
-
$:
|
|
63
|
-
activePages = !localPages || localPages.length == 0 ? $pagesStore : localPages;
|
|
64
|
-
$:
|
|
65
|
-
visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
|
|
66
|
-
$:
|
|
67
|
-
visibleNavItems = selectVisible(activePages, visibility);
|
|
68
|
-
let drawer = null;
|
|
69
|
-
const assignDrawerRef = (ev) => {
|
|
70
|
-
drawer = ev.detail.instance;
|
|
71
|
-
};
|
|
72
|
-
afterNavigate((navigation) => drawer?.hide());
|
|
73
|
-
const klasses = [
|
|
74
|
-
css ? css : "",
|
|
75
|
-
noBorder ? "no-border" : ""
|
|
76
|
-
].filter((c) => c).join(" ");
|
|
77
|
-
</script>
|
|
78
|
-
|
|
79
|
-
<Button
|
|
80
|
-
type="button"
|
|
81
|
-
data-a11y-dialog-show="drawer-start-test"
|
|
82
|
-
mode="primary"
|
|
83
|
-
noBorder
|
|
84
|
-
css={klasses}>
|
|
85
|
-
☰
|
|
86
|
-
</Button>
|
|
87
|
-
<Drawer
|
|
88
|
-
id="drawer-start-test"
|
|
89
|
-
drawerRoot="#drawer-root"
|
|
90
|
-
placement={placement}
|
|
91
|
-
on:instance={assignDrawerRef}
|
|
92
|
-
title="Menu">
|
|
93
|
-
<Spacer height={Sizes.V18} />
|
|
94
|
-
<ul>
|
|
95
|
-
{#each visibleNavItems as pageItem}
|
|
96
|
-
<li aria-current={isSelected(includeSubpagesForSelect, $page, pageItem)}>
|
|
97
|
-
<span class="screenreader-only">Navigate to {pageItem.name}</span>
|
|
98
|
-
<a on:click={pageItem.action} href={pageItem.path}>
|
|
99
|
-
{pageItem.name}
|
|
100
|
-
</a>
|
|
101
|
-
</li>
|
|
102
|
-
{/each}
|
|
103
|
-
</ul>
|
|
104
|
-
</Drawer>
|
|
@@ -3,7 +3,6 @@ import { HeaderNavigationItem } from './Menu.js';
|
|
|
3
3
|
import { Placement } from '../Styling.js';
|
|
4
4
|
declare const __propDef: {
|
|
5
5
|
props: {
|
|
6
|
-
authentication?: boolean | undefined;
|
|
7
6
|
css?: string | undefined;
|
|
8
7
|
noBorder?: boolean | undefined;
|
|
9
8
|
placement?: Placement | undefined;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<style>
|
|
2
2
|
</style>
|
|
3
3
|
|
|
4
|
-
<script>import {
|
|
5
|
-
import {
|
|
4
|
+
<script>import { Card } from "agnostic-svelte";
|
|
5
|
+
import { AlignItmes, Justify, Orientation } from "../Styling.js";
|
|
6
6
|
export let items = [];
|
|
7
7
|
export let css = "";
|
|
8
8
|
export let justify = Justify.Between;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { ShowItem } from './ShowItem.js';
|
|
3
|
+
import { AlignItmes, Justify, Orientation } from '../Styling.js';
|
|
2
4
|
declare const __propDef: {
|
|
3
5
|
props: {
|
|
4
6
|
items?: ShowItem[] | undefined;
|
|
5
7
|
css?: string | undefined;
|
|
6
|
-
justify?:
|
|
7
|
-
alignItems?:
|
|
8
|
-
orientation?:
|
|
8
|
+
justify?: Justify | undefined;
|
|
9
|
+
alignItems?: AlignItmes | undefined;
|
|
10
|
+
orientation?: Orientation | undefined;
|
|
9
11
|
};
|
|
10
12
|
events: {
|
|
11
13
|
[evt: string]: CustomEvent<any>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import FlatMenu from './components/menu/FlatMenu.svelte';
|
|
2
2
|
import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
|
|
3
|
-
import
|
|
3
|
+
import ColumnMenu from './components/menu/ColumnMenu.svelte';
|
|
4
|
+
import DynamicMenu from './components/menu/DynamicMenu.svelte';
|
|
4
5
|
import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
|
|
5
6
|
import Banner from './components/Banner.svelte';
|
|
6
7
|
import DefaultLayout from './components/layouts/DefaultLayout.svelte';
|
|
@@ -17,6 +18,5 @@ import { title, suffix } from './stores/title.js';
|
|
|
17
18
|
import { pages } from './stores/pages.js';
|
|
18
19
|
import { metaDescription, metaKeywords } from './stores/meta.js';
|
|
19
20
|
import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
|
|
20
|
-
import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader,
|
|
21
|
-
|
|
22
|
-
export { FlatMenu, HamburgerMenu, SideMenu, Visiblity, HeaderNavigationItem, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Djot, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
|
|
21
|
+
import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
|
|
22
|
+
export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
// Reexport your entry components here
|
|
2
1
|
import FlatMenu from './components/menu/FlatMenu.svelte';
|
|
3
2
|
import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
|
|
4
|
-
import
|
|
3
|
+
import ColumnMenu from './components/menu/ColumnMenu.svelte';
|
|
4
|
+
import DynamicMenu from './components/menu/DynamicMenu.svelte';
|
|
5
5
|
import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
|
|
6
6
|
import Banner from './components/Banner.svelte';
|
|
7
7
|
import DefaultLayout from './components/layouts/DefaultLayout.svelte';
|
|
@@ -18,6 +18,5 @@ import { title, suffix } from './stores/title.js';
|
|
|
18
18
|
import { pages } from './stores/pages.js';
|
|
19
19
|
import { metaDescription, metaKeywords } from './stores/meta.js';
|
|
20
20
|
import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } from './components/Styling.js';
|
|
21
|
-
import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader,
|
|
22
|
-
|
|
23
|
-
export { FlatMenu, HamburgerMenu, SideMenu, Visiblity, HeaderNavigationItem, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Djot, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
|
|
21
|
+
import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
|
|
22
|
+
export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@functionalcms/svelte-components",
|
|
3
|
-
"version": "2.13.
|
|
3
|
+
"version": "2.13.5",
|
|
4
4
|
"watch": {
|
|
5
5
|
"build": {
|
|
6
6
|
"patterns": [
|
|
@@ -57,8 +57,6 @@
|
|
|
57
57
|
"vite": "^5.0.10"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@djot/djot": "^0.2.5",
|
|
61
|
-
"svelte-djot": "^0.1.1"
|
|
62
60
|
},
|
|
63
61
|
"svelte": "./dist/index.js",
|
|
64
62
|
"types": "./dist/index.d.ts",
|