@hyvor/design 0.0.1 → 0.0.2
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/Callout/Callout.svelte +0 -3
- package/dist/components/Dark/DarkProvider.svelte +1 -1
- package/dist/components/Dropdown/Dropdown.svelte +14 -3
- package/dist/components/Dropdown/Dropdown.svelte.d.ts +1 -0
- package/dist/components/SplitControl/SplitControl.svelte +0 -4
- package/dist/components/Table/TableRow.svelte +1 -1
- package/dist/directives/clickOutside.d.ts +1 -1
- package/dist/directives/clickOutside.js +8 -7
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/marketing/Header/Header.svelte +138 -88
- package/dist/marketing/Header/Header.svelte.d.ts +2 -1
- package/dist/{variables.css → variables.scss} +7 -1
- package/package.json +1 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
<script>import clickOutside from "../../directives/clickOutside.js";
|
|
1
|
+
<script>import { clickOutside } from "../../directives/clickOutside.js";
|
|
2
2
|
import Box from "./../Box/Box.svelte";
|
|
3
3
|
export let show = false;
|
|
4
4
|
export let width = 225;
|
|
5
5
|
export let relative = false;
|
|
6
6
|
export let closeOnOutsideClick = true;
|
|
7
|
+
export let align = "start";
|
|
7
8
|
</script>
|
|
8
9
|
|
|
9
10
|
<span
|
|
@@ -13,7 +14,7 @@ export let closeOnOutsideClick = true;
|
|
|
13
14
|
|
|
14
15
|
<span
|
|
15
16
|
class="trigger"
|
|
16
|
-
on:click={() => show = !show}
|
|
17
|
+
on:click|stopPropagation={() => show = !show}
|
|
17
18
|
role="listbox"
|
|
18
19
|
tabindex="0"
|
|
19
20
|
on:keyup={e => {
|
|
@@ -27,7 +28,7 @@ export let closeOnOutsideClick = true;
|
|
|
27
28
|
|
|
28
29
|
{#if show}
|
|
29
30
|
<div
|
|
30
|
-
class="content-wrap"
|
|
31
|
+
class="content-wrap {align}"
|
|
31
32
|
use:clickOutside={{
|
|
32
33
|
enabled: closeOnOutsideClick,
|
|
33
34
|
callback: () => show = false
|
|
@@ -55,6 +56,16 @@ export let closeOnOutsideClick = true;
|
|
|
55
56
|
z-index: 1;
|
|
56
57
|
}
|
|
57
58
|
|
|
59
|
+
.content-wrap.end {
|
|
60
|
+
left: auto;
|
|
61
|
+
right: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.content-wrap.center {
|
|
65
|
+
left: 50%;
|
|
66
|
+
transform: translateX(-50%);
|
|
67
|
+
}
|
|
68
|
+
|
|
58
69
|
.content-wrap > :global(.content) {
|
|
59
70
|
padding: 10px;
|
|
60
71
|
}
|
|
@@ -4,7 +4,7 @@ interface Options {
|
|
|
4
4
|
stopPropagation?: boolean;
|
|
5
5
|
}
|
|
6
6
|
type Input = Options | Function;
|
|
7
|
-
export
|
|
7
|
+
export declare function clickOutside(node: HTMLElement, input: Input): {
|
|
8
8
|
destroy(): void;
|
|
9
9
|
} | undefined;
|
|
10
10
|
export {};
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.clickOutside = void 0;
|
|
3
4
|
function clickOutside(node, input) {
|
|
4
|
-
|
|
5
|
-
const enabled =
|
|
5
|
+
const options = (typeof input === "function" ? { callback: input } : input);
|
|
6
|
+
const enabled = options.enabled === undefined ? true : options.enabled;
|
|
6
7
|
if (!enabled)
|
|
7
8
|
return;
|
|
8
9
|
const handleClick = (event) => {
|
|
9
10
|
if (!node.contains(event.target)) {
|
|
10
|
-
if (
|
|
11
|
+
if (options.stopPropagation)
|
|
11
12
|
event.stopPropagation();
|
|
12
|
-
|
|
13
|
+
options.callback();
|
|
13
14
|
}
|
|
14
15
|
};
|
|
15
|
-
document.addEventListener("click", handleClick
|
|
16
|
+
document.addEventListener("click", handleClick);
|
|
16
17
|
return {
|
|
17
18
|
destroy() {
|
|
18
|
-
document.removeEventListener("click", handleClick
|
|
19
|
+
document.removeEventListener("click", handleClick);
|
|
19
20
|
},
|
|
20
21
|
};
|
|
21
22
|
}
|
|
22
|
-
exports.
|
|
23
|
+
exports.clickOutside = clickOutside;
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
<script>import Container from "./../Container/Container.svelte";
|
|
2
|
-
import Button from "../../components/Button/Button.svelte";
|
|
3
2
|
import DarkToggle from "../../components/Dark/DarkToggle.svelte";
|
|
3
|
+
import List from "../../icons/List.svelte";
|
|
4
|
+
import IconButton from "../../components/IconButton/IconButton.svelte";
|
|
5
|
+
import Dropdown from "../../components/Dropdown/Dropdown.svelte";
|
|
4
6
|
export let logo;
|
|
5
|
-
export let name;
|
|
7
|
+
export let name = "HYVOR";
|
|
8
|
+
export let subName = void 0;
|
|
6
9
|
export let darkToggle = true;
|
|
7
10
|
</script>
|
|
8
11
|
|
|
@@ -13,7 +16,12 @@ export let darkToggle = true;
|
|
|
13
16
|
<div class="nav-start">
|
|
14
17
|
<a class="nav-brand" href="/">
|
|
15
18
|
<img src={logo} alt="Hyvor Logo" width="30" height="30" />
|
|
16
|
-
|
|
19
|
+
<span class="brand-product">
|
|
20
|
+
<span class="brand">{name}</span>
|
|
21
|
+
{#if subName}
|
|
22
|
+
<span class="product">{subName}</span>
|
|
23
|
+
{/if}
|
|
24
|
+
</span>
|
|
17
25
|
</a>
|
|
18
26
|
</div>
|
|
19
27
|
|
|
@@ -22,35 +30,36 @@ export let darkToggle = true;
|
|
|
22
30
|
</div>
|
|
23
31
|
|
|
24
32
|
<div class="nav-end">
|
|
33
|
+
<slot name="end" />
|
|
34
|
+
</div>
|
|
25
35
|
|
|
26
|
-
|
|
36
|
+
<div class="dark-mobile">
|
|
27
37
|
|
|
28
38
|
{#if darkToggle}
|
|
29
|
-
<
|
|
39
|
+
<span class="dark-toggle-wrap">
|
|
40
|
+
<DarkToggle />
|
|
41
|
+
</span>
|
|
30
42
|
{/if}
|
|
31
43
|
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
Sign up for FREE
|
|
52
|
-
</Button>
|
|
53
|
-
</a> -->
|
|
44
|
+
<span class="mobile-nav-wrap">
|
|
45
|
+
<Dropdown align="end" width={300}>
|
|
46
|
+
<IconButton
|
|
47
|
+
color="invisible"
|
|
48
|
+
slot="trigger"
|
|
49
|
+
>
|
|
50
|
+
<List width={18} height={18} />
|
|
51
|
+
</IconButton>
|
|
52
|
+
<div slot="content" class="mobile-content">
|
|
53
|
+
<div class="mobile-inner center">
|
|
54
|
+
<slot name="center" />
|
|
55
|
+
</div>
|
|
56
|
+
<div class="mobile-inner end">
|
|
57
|
+
<slot name="end" />
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</Dropdown>
|
|
61
|
+
</span>
|
|
62
|
+
|
|
54
63
|
</div>
|
|
55
64
|
|
|
56
65
|
</Container>
|
|
@@ -59,64 +68,105 @@ export let darkToggle = true;
|
|
|
59
68
|
|
|
60
69
|
<div class="header-space" />
|
|
61
70
|
|
|
62
|
-
<style
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
71
|
+
<style>.header-space {
|
|
72
|
+
height: var(--header-height);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
header {
|
|
76
|
+
position: fixed;
|
|
77
|
+
top: 0;
|
|
78
|
+
left: 0;
|
|
79
|
+
width: 100%;
|
|
80
|
+
z-index: 100;
|
|
81
|
+
background-color: var(--background, var(--accent-lightest));
|
|
82
|
+
border-bottom: 1px solid var(--border);
|
|
83
|
+
height: var(--header-height);
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
header :global(nav) {
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nav-brand {
|
|
94
|
+
display: inline-block;
|
|
95
|
+
line-height: inherit;
|
|
96
|
+
white-space: nowrap;
|
|
97
|
+
color: inherit;
|
|
98
|
+
text-decoration: none;
|
|
99
|
+
font-weight: 600;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.nav-brand img {
|
|
103
|
+
vertical-align: middle;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.brand-product {
|
|
107
|
+
vertical-align: middle;
|
|
108
|
+
display: inline-flex;
|
|
109
|
+
flex-direction: column;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
line-height: 14px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.brand-product .brand {
|
|
115
|
+
font-size: 14px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.brand-product .product {
|
|
119
|
+
font-size: 12px;
|
|
120
|
+
font-weight: normal;
|
|
121
|
+
color: var(--text-light);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.nav-center {
|
|
125
|
+
flex: 1;
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
gap: 6px;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.nav-end {
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
gap: 6px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.dark-toggle-wrap {
|
|
139
|
+
margin-left: 8px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.mobile-nav-wrap {
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@media screen and (max-width: 992px) {
|
|
147
|
+
.nav-center {
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
150
|
+
.nav-end {
|
|
151
|
+
display: none;
|
|
152
|
+
}
|
|
153
|
+
.mobile-nav-wrap {
|
|
154
|
+
display: inline-block;
|
|
155
|
+
}
|
|
156
|
+
.dark-mobile {
|
|
157
|
+
flex: 1;
|
|
158
|
+
text-align: right;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
.mobile-content, .mobile-inner {
|
|
162
|
+
display: flex;
|
|
163
|
+
flex-direction: column;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.mobile-content {
|
|
167
|
+
gap: 10px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.mobile-content :global(.button) {
|
|
171
|
+
display: flex;
|
|
172
|
+
}</style>
|