sveltacular 0.0.13 → 0.0.14
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/generic/link/link.svelte +1 -8
- package/dist/images/image.svelte +2 -1
- package/dist/navigation/app-bar/app-branding.svelte +20 -0
- package/dist/navigation/app-bar/app-branding.svelte.d.ts +16 -0
- package/dist/navigation/app-bar/app-logo.svelte +12 -1
- package/dist/navigation/app-bar/app-nav-item.svelte +4 -2
- package/dist/navigation/breadcrumbs/breadcrumbs.svelte +17 -8
- package/package.json +1 -1
|
@@ -17,7 +17,6 @@ export let display = "inline";
|
|
|
17
17
|
|
|
18
18
|
<style>.link {
|
|
19
19
|
text-decoration: underline;
|
|
20
|
-
color: inherit;
|
|
21
20
|
cursor: pointer;
|
|
22
21
|
}
|
|
23
22
|
.link.underline-none, .link.underline-hover {
|
|
@@ -30,12 +29,6 @@ export let display = "inline";
|
|
|
30
29
|
.link.inline-block {
|
|
31
30
|
display: inline-block;
|
|
32
31
|
}
|
|
33
|
-
|
|
34
|
-
a.link.underline-hover:hover {
|
|
32
|
+
.link[href].underline-hover:hover {
|
|
35
33
|
text-decoration: underline;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
span.link {
|
|
39
|
-
cursor: default;
|
|
40
|
-
color: rgba(255, 255, 255, 0.5);
|
|
41
34
|
}</style>
|
package/dist/images/image.svelte
CHANGED
|
@@ -8,7 +8,7 @@ $:
|
|
|
8
8
|
finalSource = sources[sources.length - 1];
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
<div class={align}>
|
|
11
|
+
<div class="image {align}">
|
|
12
12
|
{#if href}
|
|
13
13
|
<a {href}>
|
|
14
14
|
<picture>
|
|
@@ -37,6 +37,7 @@ $:
|
|
|
37
37
|
position: relative;
|
|
38
38
|
width: 100%;
|
|
39
39
|
height: 100%;
|
|
40
|
+
flex-grow: 1;
|
|
40
41
|
}
|
|
41
42
|
div .caption {
|
|
42
43
|
position: absolute;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script>import { setContext } from "svelte";
|
|
2
|
+
setContext("app-branding", true);
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="branding">
|
|
6
|
+
<slot />
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
div {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
padding-left: 0.5rem;
|
|
18
|
+
padding-right: 0.5rem;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {
|
|
8
|
+
default: {};
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export type AppBrandingProps = typeof __propDef.props;
|
|
12
|
+
export type AppBrandingEvents = typeof __propDef.events;
|
|
13
|
+
export type AppBrandingSlots = typeof __propDef.slots;
|
|
14
|
+
export default class AppBranding extends SvelteComponent<AppBrandingProps, AppBrandingEvents, AppBrandingSlots> {
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -4,4 +4,15 @@ export let alt;
|
|
|
4
4
|
export let href;
|
|
5
5
|
</script>
|
|
6
6
|
|
|
7
|
-
<
|
|
7
|
+
<div class="logo">
|
|
8
|
+
<Image {src} {alt} {href} align="left" />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
div {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
@@ -28,7 +28,7 @@ const click = () => {
|
|
|
28
28
|
gap: 0.2rem;
|
|
29
29
|
align-items: center;
|
|
30
30
|
height: 100%;
|
|
31
|
-
color: var(--nav-link-
|
|
31
|
+
color: var(--nav-link-fg, black);
|
|
32
32
|
text-decoration: none;
|
|
33
33
|
appearance: none;
|
|
34
34
|
border: none;
|
|
@@ -36,12 +36,14 @@ const click = () => {
|
|
|
36
36
|
cursor: pointer;
|
|
37
37
|
}
|
|
38
38
|
button:hover {
|
|
39
|
-
color: var(--nav-link-hover-
|
|
39
|
+
color: var(--nav-link-hover-fg, black);
|
|
40
40
|
text-decoration: underline;
|
|
41
41
|
}
|
|
42
42
|
button .icon {
|
|
43
43
|
width: 100%;
|
|
44
44
|
height: 1.5rem;
|
|
45
|
+
fill: var(--nav-link-fg, black);
|
|
46
|
+
stroke: var(--nav-link-fg, black);
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
@media (max-width: 640px) {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import AngleRightIcon from "../../icons/angle-right-icon.svelte";
|
|
1
|
+
<script>import AngleRightIcon from "../../icons/angle-right-icon.svelte";
|
|
3
2
|
import HomeIcon from "../../icons/home-icon.svelte";
|
|
4
3
|
export let homeUrl = null;
|
|
5
4
|
export let crumbs = [];
|
|
@@ -14,9 +13,7 @@ const getCrumLabel = (crumb) => {
|
|
|
14
13
|
<nav class={size}>
|
|
15
14
|
{#if homeUrl}
|
|
16
15
|
<li class="icon">
|
|
17
|
-
<
|
|
18
|
-
<HomeIcon />
|
|
19
|
-
</Link>
|
|
16
|
+
<a href={homeUrl} class="home"><HomeIcon /></a>
|
|
20
17
|
</li>
|
|
21
18
|
{/if}
|
|
22
19
|
{#each crumbs as crumb, i}
|
|
@@ -24,9 +21,9 @@ const getCrumLabel = (crumb) => {
|
|
|
24
21
|
<li>{getCrumLabel(crumb)}</li>
|
|
25
22
|
{:else}
|
|
26
23
|
<li>
|
|
27
|
-
<
|
|
24
|
+
<a href={crumb.href}>
|
|
28
25
|
{crumb.label}
|
|
29
|
-
</
|
|
26
|
+
</a>
|
|
30
27
|
</li>
|
|
31
28
|
{/if}
|
|
32
29
|
{#if i < crumbs.length - 1}
|
|
@@ -44,13 +41,25 @@ const getCrumLabel = (crumb) => {
|
|
|
44
41
|
padding: 0;
|
|
45
42
|
margin: 0;
|
|
46
43
|
line-height: 1.5rem;
|
|
44
|
+
font-family: sans-serif;
|
|
47
45
|
}
|
|
48
46
|
nav li {
|
|
49
47
|
display: flex;
|
|
50
48
|
align-items: center;
|
|
51
49
|
vertical-align: middle;
|
|
52
50
|
margin-left: 0.5rem;
|
|
53
|
-
color:
|
|
51
|
+
color: var(--breadcrumbs-fg, #333);
|
|
52
|
+
}
|
|
53
|
+
nav li a {
|
|
54
|
+
color: var(--breadcrumbs-link-fg, #333);
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
}
|
|
57
|
+
nav li a:hover {
|
|
58
|
+
color: var(--breadcrumbs-link-hover-fg, black);
|
|
59
|
+
text-decoration: underline;
|
|
60
|
+
}
|
|
61
|
+
nav li a.home {
|
|
62
|
+
width: 100%;
|
|
54
63
|
}
|
|
55
64
|
nav li:first-child {
|
|
56
65
|
margin-left: 0;
|