@iroco/ui 0.11.0 → 0.13.0
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/lib/check.scss +0 -2
- package/lib/containers.scss +2 -2
- package/lib/index.js +2386 -2370
- package/lib/index.min.js +222 -222
- package/lib/index.mjs +2384 -2369
- package/lib/loader.scss +1 -0
- package/package.json +1 -1
- package/src/Button.svelte +1 -1
- package/src/IconMastodon.svelte +13 -0
- package/src/NavBar.svelte +132 -0
- package/src/Navigation.svelte +17 -13
- package/src/index.ts +2 -1
- package/src/SideBar.svelte +0 -103
package/lib/loader.scss
CHANGED
package/package.json
CHANGED
package/src/Button.svelte
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let width = '5em'
|
|
3
|
+
export let height = '5em'
|
|
4
|
+
export let fill = 'currentColor'
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<svg {width} {height} role="img" viewBox="0 0 24 24" class="icon-mastodon" xmlns="http://www.w3.org/2000/svg">
|
|
8
|
+
<title>Mastodon</title>
|
|
9
|
+
<path
|
|
10
|
+
d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"
|
|
11
|
+
{ fill }
|
|
12
|
+
/>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IconClose from './IconClose.svelte';
|
|
3
|
+
import type { NavigationItem } from 'definition';
|
|
4
|
+
import { createEventDispatcher } from 'svelte';
|
|
5
|
+
|
|
6
|
+
export let navigationItems: Array<NavigationItem>;
|
|
7
|
+
export let type: 'sidebar' | 'topbar';
|
|
8
|
+
|
|
9
|
+
let active: string;
|
|
10
|
+
const dispatch = createEventDispatcher();
|
|
11
|
+
|
|
12
|
+
const handleClickLink = (menuItem: NavigationItem) => {
|
|
13
|
+
active = menuItem.name;
|
|
14
|
+
if (typeof menuItem.hrefOrCallback === "function") {
|
|
15
|
+
menuItem.hrefOrCallback()
|
|
16
|
+
return false // to avoid calling href
|
|
17
|
+
}
|
|
18
|
+
dispatch('click_link');
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<nav data-testid={type} class='nav__{type}'>
|
|
23
|
+
<button on:click class="nav__{type}__close">
|
|
24
|
+
<IconClose width="3em" height="3em" />
|
|
25
|
+
</button>
|
|
26
|
+
|
|
27
|
+
<ul class="nav__{type}__item-container">
|
|
28
|
+
{#each navigationItems as item}
|
|
29
|
+
<li class="nav__{type}__item" class:active={active === item.name}>
|
|
30
|
+
<a on:click={() => handleClickLink(item)} href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback: '#'}> {item.name}</a>
|
|
31
|
+
</li>
|
|
32
|
+
{/each}
|
|
33
|
+
</ul>
|
|
34
|
+
</nav>
|
|
35
|
+
|
|
36
|
+
<style lang="scss">
|
|
37
|
+
@use '../scss/colors';
|
|
38
|
+
@import '../scss/containers';
|
|
39
|
+
|
|
40
|
+
.nav {
|
|
41
|
+
&__sidebar, &__topbar {
|
|
42
|
+
&__item {
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
font-size: 0.75em;
|
|
45
|
+
display: block;
|
|
46
|
+
}
|
|
47
|
+
&__item a {
|
|
48
|
+
color: colors.$beige;
|
|
49
|
+
font-size: 2em;
|
|
50
|
+
}
|
|
51
|
+
&__close {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&__sidebar {
|
|
57
|
+
height: 100%;
|
|
58
|
+
width: 300px;
|
|
59
|
+
position: absolute;
|
|
60
|
+
overflow-x: hidden;
|
|
61
|
+
border-right: 1px solid colors.$mediumGrey;
|
|
62
|
+
&__item_container {
|
|
63
|
+
margin: 0;
|
|
64
|
+
padding: 0;
|
|
65
|
+
width: 100%;
|
|
66
|
+
height: 100%;
|
|
67
|
+
}
|
|
68
|
+
&__item {
|
|
69
|
+
padding: 2em;
|
|
70
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
71
|
+
}
|
|
72
|
+
.active {
|
|
73
|
+
border-top: 1px solid colors.$green;
|
|
74
|
+
border-bottom: 1px solid colors.$green;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&__topbar {
|
|
79
|
+
flex-grow: 1;
|
|
80
|
+
display: flex;
|
|
81
|
+
justify-content: flex-end;
|
|
82
|
+
ul, li {
|
|
83
|
+
display: inline;
|
|
84
|
+
}
|
|
85
|
+
ul {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-grow: 1;
|
|
88
|
+
justify-content: space-around;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@include screen-tablet {
|
|
94
|
+
.nav {
|
|
95
|
+
&__sidebar, &__topbar {
|
|
96
|
+
position: fixed;
|
|
97
|
+
background-color: colors.$darkBlue;
|
|
98
|
+
top: 0;
|
|
99
|
+
right: 0;
|
|
100
|
+
width: 100%;
|
|
101
|
+
padding: 0;
|
|
102
|
+
padding-top: 2em;
|
|
103
|
+
margin: 0;
|
|
104
|
+
border-right: none;
|
|
105
|
+
&__item-container {
|
|
106
|
+
padding: 0em;
|
|
107
|
+
margin-top: 2rem;
|
|
108
|
+
}
|
|
109
|
+
ul, li {
|
|
110
|
+
display: block;
|
|
111
|
+
}
|
|
112
|
+
&__close {
|
|
113
|
+
display: block;
|
|
114
|
+
position: absolute;
|
|
115
|
+
right: 0;
|
|
116
|
+
top: 0;
|
|
117
|
+
background-color: transparent;
|
|
118
|
+
border: none;
|
|
119
|
+
color: colors.$darkBeige;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&__topbar {
|
|
124
|
+
height: 100%;
|
|
125
|
+
&__item {
|
|
126
|
+
padding: 2em;
|
|
127
|
+
border-top: 1px solid colors.$mediumGrey;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</style>
|
package/src/Navigation.svelte
CHANGED
|
@@ -2,46 +2,51 @@
|
|
|
2
2
|
import type { NavigationItem } from './definition';
|
|
3
3
|
import IconBurger from './IconBurger.svelte';
|
|
4
4
|
import IconIrocoLogo from './IconIrocoLogo.svelte';
|
|
5
|
-
import
|
|
5
|
+
import NavBar from './NavBar.svelte';
|
|
6
6
|
|
|
7
7
|
export let navigationItems: Array<NavigationItem>;
|
|
8
|
+
export let type: 'sidebar' | 'topbar' = "topbar";
|
|
8
9
|
export let title: string;
|
|
9
10
|
|
|
10
11
|
let showMenu = false;
|
|
11
12
|
</script>
|
|
12
13
|
|
|
13
|
-
<div class="
|
|
14
|
-
<div class="
|
|
14
|
+
<div class="navigation--mobile">
|
|
15
|
+
<div class="navigation--mobile__title-container">
|
|
15
16
|
<IconIrocoLogo width="3em" height="3em" />
|
|
16
17
|
<h1>{title}</h1>
|
|
17
18
|
</div>
|
|
18
19
|
|
|
19
|
-
<button on:click={() => (showMenu = true)} class="
|
|
20
|
+
<button on:click={() => (showMenu = true)} class="navigation--mobile__button">
|
|
20
21
|
<IconBurger width="3em" height="3em" />
|
|
21
22
|
</button>
|
|
22
23
|
|
|
23
24
|
{#if showMenu}
|
|
24
|
-
<
|
|
25
|
+
<NavBar
|
|
25
26
|
on:click_link={() => (showMenu = false)}
|
|
26
27
|
on:click={() => (showMenu = false)}
|
|
27
|
-
{
|
|
28
|
+
{ type }
|
|
29
|
+
{ navigationItems }
|
|
28
30
|
/>
|
|
29
31
|
{/if}
|
|
30
32
|
</div>
|
|
31
33
|
|
|
32
|
-
<div class="
|
|
33
|
-
<div class="
|
|
34
|
+
<div class="navigation">
|
|
35
|
+
<div class="navigation__title-container">
|
|
34
36
|
<IconIrocoLogo width="3em" height="3em" />
|
|
35
37
|
<h1>{title}</h1>
|
|
36
38
|
</div>
|
|
37
|
-
<
|
|
39
|
+
<NavBar {navigationItems} { type } />
|
|
38
40
|
</div>
|
|
39
41
|
|
|
40
42
|
<style lang="scss">
|
|
41
43
|
@use '../scss/colors';
|
|
42
44
|
@import '../scss/containers';
|
|
43
|
-
.
|
|
44
|
-
display:
|
|
45
|
+
.navigation {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: center;
|
|
45
50
|
width: 100%;
|
|
46
51
|
border-bottom: 1px solid colors.$mediumGrey;
|
|
47
52
|
&--mobile {
|
|
@@ -59,7 +64,7 @@
|
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
@include screen-tablet {
|
|
62
|
-
.
|
|
67
|
+
.navigation {
|
|
63
68
|
display: none;
|
|
64
69
|
color: colors.$beige;
|
|
65
70
|
&--mobile {
|
|
@@ -73,7 +78,6 @@
|
|
|
73
78
|
border-bottom: 1px solid colors.$mediumGrey;
|
|
74
79
|
|
|
75
80
|
h1 {
|
|
76
|
-
font: bold;
|
|
77
81
|
font-size: 2em;
|
|
78
82
|
}
|
|
79
83
|
&__button {
|
package/src/index.ts
CHANGED
|
@@ -6,7 +6,8 @@ export { default as NumberInput } from './NumberInput.svelte'
|
|
|
6
6
|
export { default as Icon } from './Icon.svelte'
|
|
7
7
|
export { default as Loader } from './Loader.svelte'
|
|
8
8
|
export { default as IconInfo } from './IconInfo.svelte'
|
|
9
|
-
export { default as
|
|
9
|
+
export { default as IconMastodon } from './IconMastodon.svelte'
|
|
10
|
+
export { default as NavBar } from './NavBar.svelte'
|
|
10
11
|
export { default as Navigation } from './Navigation.svelte'
|
|
11
12
|
export { default as DataTable } from './DataTable.svelte'
|
|
12
13
|
export { default as IconMore } from './IconMoreSign.svelte'
|
package/src/SideBar.svelte
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import IconClose from './IconClose.svelte';
|
|
3
|
-
import type { NavigationItem } from 'definition';
|
|
4
|
-
import { createEventDispatcher } from 'svelte';
|
|
5
|
-
|
|
6
|
-
export let navigationItems: Array<NavigationItem>;
|
|
7
|
-
|
|
8
|
-
let active: string;
|
|
9
|
-
const dispatch = createEventDispatcher();
|
|
10
|
-
|
|
11
|
-
const handleClickLink = (menuItem: NavigationItem) => {
|
|
12
|
-
active = menuItem.name;
|
|
13
|
-
if (typeof menuItem.hrefOrCallback === "function") {
|
|
14
|
-
menuItem.hrefOrCallback()
|
|
15
|
-
return false // to avoid calling href
|
|
16
|
-
}
|
|
17
|
-
dispatch('click_link');
|
|
18
|
-
};
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<nav data-testid="sidebar" class="account__sidebar">
|
|
22
|
-
<button on:click class="account__sidebar__close">
|
|
23
|
-
<IconClose width="3em" height="3em" />
|
|
24
|
-
</button>
|
|
25
|
-
|
|
26
|
-
<ul class="account__sidebar__item_container">
|
|
27
|
-
{#each navigationItems as item}
|
|
28
|
-
<li class="account__sidebar__item" class:active={active === item.name}>
|
|
29
|
-
<a on:click={() => handleClickLink(item)} href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback: '#'}> {item.name}</a>
|
|
30
|
-
</li>
|
|
31
|
-
{/each}
|
|
32
|
-
</ul>
|
|
33
|
-
</nav>
|
|
34
|
-
|
|
35
|
-
<style lang="scss">
|
|
36
|
-
@use '../scss/colors';
|
|
37
|
-
@import '../scss/containers';
|
|
38
|
-
|
|
39
|
-
.account__sidebar {
|
|
40
|
-
height: 100%;
|
|
41
|
-
width: 300px;
|
|
42
|
-
position: absolute;
|
|
43
|
-
overflow-x: hidden;
|
|
44
|
-
border-right: 1px solid colors.$mediumGrey;
|
|
45
|
-
&__item_container {
|
|
46
|
-
margin: 0;
|
|
47
|
-
padding: 0;
|
|
48
|
-
width: 100%;
|
|
49
|
-
height: 100%;
|
|
50
|
-
}
|
|
51
|
-
&__item {
|
|
52
|
-
padding: 2em 2em;
|
|
53
|
-
text-decoration: none;
|
|
54
|
-
font-size: 0.75em;
|
|
55
|
-
display: block;
|
|
56
|
-
border-top: 1px solid colors.$mediumGrey;
|
|
57
|
-
border-bottom: 1px solid colors.$mediumGrey a {
|
|
58
|
-
padding-left: 1em;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&__item a {
|
|
63
|
-
color: colors.$beige;
|
|
64
|
-
font-size: 2em;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&__close {
|
|
68
|
-
display: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.active {
|
|
72
|
-
border-top: 1px solid colors.$green;
|
|
73
|
-
border-bottom: 1px solid colors.$green;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@include screen-tablet {
|
|
78
|
-
.account__sidebar {
|
|
79
|
-
position: fixed;
|
|
80
|
-
background-color: colors.$darkBlue;
|
|
81
|
-
top: 0;
|
|
82
|
-
right: 0;
|
|
83
|
-
width: 100%;
|
|
84
|
-
padding: 0;
|
|
85
|
-
padding-top: 2em;
|
|
86
|
-
margin: 0;
|
|
87
|
-
border-right: none;
|
|
88
|
-
&__item_container {
|
|
89
|
-
padding: 0em;
|
|
90
|
-
margin-top: 2rem;
|
|
91
|
-
}
|
|
92
|
-
&__close {
|
|
93
|
-
display: block;
|
|
94
|
-
position: absolute;
|
|
95
|
-
right: 0;
|
|
96
|
-
top: 0;
|
|
97
|
-
background-color: transparent;
|
|
98
|
-
border: none;
|
|
99
|
-
color: colors.$darkBeige;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
</style>
|