@likable-hair/svelte 0.0.17 → 0.0.18
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/buttons/Button.svelte +30 -34
- package/buttons/Button.svelte.d.ts +15 -0
- package/media/ImageGrid.svelte +1 -1
- package/navigation/HeaderMenu.svelte +12 -7
- package/navigation/HeaderMenu.svelte.d.ts +8 -0
- package/navigation/Navigator.svelte +9 -3
- package/navigation/Navigator.svelte.d.ts +5 -0
- package/package.json +1 -1
package/buttons/Button.svelte
CHANGED
|
@@ -1,27 +1,34 @@
|
|
|
1
|
-
<script >export let type = 'default';
|
|
2
|
-
export let icon = undefined;
|
|
3
|
-
export let iconSize = 15;
|
|
4
|
-
let clazz = '';
|
|
1
|
+
<script >export let type = 'default', icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, backgroundColor = undefined, hoverBackgroundColor = '#008f8f', borderRadius = undefined, boxShadow = undefined;
|
|
5
2
|
export { clazz as class };
|
|
3
|
+
$: defaultBorderRadius = type == 'icon' ? '50%' : '5px';
|
|
6
4
|
$: position = !!$$slots.append ? 'relative' : undefined;
|
|
7
|
-
$: cssVariables = Object.entries({
|
|
8
|
-
'--icon-button-height': (iconSize + 15) + 'pt',
|
|
9
|
-
'--icon-button-width': (iconSize + 15) + 'pt',
|
|
10
|
-
'--button-position': position
|
|
11
|
-
}).filter(([key]) => key.startsWith('--'))
|
|
12
|
-
.reduce((css, [key, value]) => {
|
|
13
|
-
return `${css}${key}: ${value};`;
|
|
14
|
-
}, '');
|
|
15
5
|
import Icon from '../media/Icon.svelte';
|
|
16
6
|
</script>
|
|
17
7
|
|
|
18
8
|
<div
|
|
9
|
+
style:width={width}
|
|
10
|
+
style:max-width={maxWidth}
|
|
11
|
+
style:min-width={minWidth}
|
|
12
|
+
style:height={height}
|
|
13
|
+
style:max-height={maxHeight}
|
|
14
|
+
style:min-height={minHeight}
|
|
15
|
+
style:text-align={textAlign}
|
|
16
|
+
style:position={position}
|
|
17
|
+
style:cursor={cursor}
|
|
18
|
+
style:padding={padding}
|
|
19
|
+
style:font-size={fontSize}
|
|
20
|
+
style:color={color}
|
|
21
|
+
style:button-border-radius={!!borderRadius ? borderRadius : defaultBorderRadius}
|
|
22
|
+
style:--button-background-color={backgroundColor}
|
|
23
|
+
style:--button-hover-background-color={hoverBackgroundColor}
|
|
24
|
+
style:--button-box-shadow={boxShadow}
|
|
25
|
+
style:--button-icon-height={(iconSize + 5) + 'pt'}
|
|
26
|
+
style:--button-icon-width={(iconSize + 5) + 'pt'}
|
|
19
27
|
class="button {clazz}"
|
|
20
28
|
class:button-default={type === 'default'}
|
|
21
29
|
class:button-text={type === 'text'}
|
|
22
30
|
class:button-icon={type === 'icon'}
|
|
23
31
|
on:click
|
|
24
|
-
style={cssVariables}
|
|
25
32
|
>
|
|
26
33
|
{#if !!icon}
|
|
27
34
|
<Icon name={icon} size={iconSize}></Icon>
|
|
@@ -31,7 +38,6 @@ import Icon from '../media/Icon.svelte';
|
|
|
31
38
|
{#if $$slots.append}
|
|
32
39
|
<span class="append-item">
|
|
33
40
|
<slot name="append">
|
|
34
|
-
|
|
35
41
|
</slot>
|
|
36
42
|
</span>
|
|
37
43
|
{/if}
|
|
@@ -45,57 +51,47 @@ import Icon from '../media/Icon.svelte';
|
|
|
45
51
|
|
|
46
52
|
.button {
|
|
47
53
|
overflow: hidden;
|
|
48
|
-
position: var(--button-position);
|
|
49
|
-
width: var(--width, fit-content);
|
|
50
|
-
height: var(--height, fit-content);
|
|
51
|
-
text-align: var(--text-align, center);
|
|
52
|
-
cursor: var(--cursor, pointer);
|
|
53
|
-
padding: var(--padding, 5px);
|
|
54
|
-
font-size: var(--font-size);
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
.button-default {
|
|
58
57
|
transition: background-color 200ms;
|
|
59
|
-
color: var(--color);
|
|
60
|
-
background-color: var(--background-color);
|
|
58
|
+
background-color: var(--button-background-color);
|
|
61
59
|
outline: 0;
|
|
62
60
|
border: 0;
|
|
63
|
-
border-radius: var(--border-radius, 0.25rem);
|
|
64
|
-
box-shadow: var(--box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
|
|
61
|
+
border-radius: var(--button-border-radius, 0.25rem);
|
|
62
|
+
box-shadow: var(--button-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
.button-default:hover {
|
|
68
|
-
background-color: var(--hover-background-color, var(--background-color));
|
|
66
|
+
background-color: var(--button-hover-background-color, var(--button-background-color));
|
|
69
67
|
}
|
|
70
68
|
|
|
71
69
|
.button-text {
|
|
72
|
-
color: var(--color);
|
|
73
70
|
transition: background-color 200ms;
|
|
74
71
|
text-transform: uppercase;
|
|
75
72
|
font-weight: 600;
|
|
76
73
|
outline: 0;
|
|
77
74
|
border: 0;
|
|
78
|
-
border-radius: var(--border-radius, 0.25rem);
|
|
75
|
+
border-radius: var(--button-border-radius, 0.25rem);
|
|
79
76
|
}
|
|
80
77
|
|
|
81
78
|
.button-text:hover {
|
|
82
|
-
background-color: var(--hover-background-color, transparent);
|
|
79
|
+
background-color: var(--button-hover-background-color, transparent);
|
|
83
80
|
}
|
|
84
81
|
|
|
85
82
|
.button-icon {
|
|
86
|
-
color: var(--color);
|
|
87
83
|
transition: background-color 200ms;
|
|
88
84
|
outline: 0;
|
|
89
85
|
border: 0;
|
|
90
|
-
border-radius: var(--border-radius, 50%);
|
|
91
|
-
height: var(--icon-
|
|
92
|
-
width: var(--icon-
|
|
86
|
+
border-radius: var(--button-border-radius, 50%);
|
|
87
|
+
height: var(--button-icon-height) !important;
|
|
88
|
+
width: var(--button-icon-width) !important;
|
|
93
89
|
display: flex;
|
|
94
90
|
align-items: center;
|
|
95
91
|
justify-content: center;
|
|
96
92
|
}
|
|
97
93
|
|
|
98
94
|
.button-icon:hover {
|
|
99
|
-
background-color: var(--hover-background-color, transparent);
|
|
95
|
+
background-color: var(--button-hover-background-color, transparent);
|
|
100
96
|
}
|
|
101
97
|
</style>
|
|
@@ -5,6 +5,21 @@ declare const __propDef: {
|
|
|
5
5
|
icon?: string;
|
|
6
6
|
iconSize?: number;
|
|
7
7
|
class?: string;
|
|
8
|
+
maxWidth?: string;
|
|
9
|
+
maxHeight?: string;
|
|
10
|
+
minWidth?: string;
|
|
11
|
+
minHeight?: string;
|
|
12
|
+
width?: string;
|
|
13
|
+
height?: string;
|
|
14
|
+
textAlign?: string;
|
|
15
|
+
cursor?: string;
|
|
16
|
+
padding?: string;
|
|
17
|
+
fontSize?: string;
|
|
18
|
+
color?: string;
|
|
19
|
+
backgroundColor?: string;
|
|
20
|
+
hoverBackgroundColor?: string;
|
|
21
|
+
borderRadius?: string;
|
|
22
|
+
boxShadow?: string;
|
|
8
23
|
};
|
|
9
24
|
events: {
|
|
10
25
|
click: MouseEvent;
|
package/media/ImageGrid.svelte
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
<script >export let title = "";
|
|
2
|
-
export let items = [];
|
|
3
|
-
export let hideOnScroll = true;
|
|
1
|
+
<script >export let title = "", items = [], hideOnScroll = true, initialRemoveShadow = false, initialBackgroundColor = undefined, backgroundColor = 'white', color = undefined;
|
|
4
2
|
let scrollY, lastScrollY, visible = true;
|
|
5
3
|
function handleScroll() {
|
|
6
4
|
if (hideOnScroll) {
|
|
@@ -10,9 +8,14 @@ function handleScroll() {
|
|
|
10
8
|
else {
|
|
11
9
|
visible = true;
|
|
12
10
|
}
|
|
13
|
-
lastScrollY = scrollY;
|
|
14
11
|
}
|
|
12
|
+
lastScrollY = scrollY;
|
|
15
13
|
}
|
|
14
|
+
let localBackgroundColor = undefined;
|
|
15
|
+
$: if (scrollY == 0 && !!initialBackgroundColor)
|
|
16
|
+
localBackgroundColor = initialBackgroundColor;
|
|
17
|
+
else
|
|
18
|
+
localBackgroundColor = backgroundColor;
|
|
16
19
|
import Navigator from './Navigator.svelte';
|
|
17
20
|
</script>
|
|
18
21
|
|
|
@@ -22,14 +25,17 @@ import Navigator from './Navigator.svelte';
|
|
|
22
25
|
></svelte:window>
|
|
23
26
|
|
|
24
27
|
<nav
|
|
28
|
+
style:color={color}
|
|
29
|
+
style:background-color={localBackgroundColor}
|
|
25
30
|
style:position="sticky"
|
|
26
31
|
style:display="flex"
|
|
27
32
|
style:flex-wrap="wrap"
|
|
28
33
|
style:align-items="center"
|
|
29
34
|
style:height="56px"
|
|
30
|
-
class="
|
|
35
|
+
class="transition-all header-menu-container"
|
|
31
36
|
class:-top-14={!visible}
|
|
32
37
|
class:top-0={visible}
|
|
38
|
+
class:shadow-md={!initialRemoveShadow || scrollY != 0}
|
|
33
39
|
>
|
|
34
40
|
{#if $$slots.prepend}
|
|
35
41
|
<div
|
|
@@ -53,6 +59,7 @@ import Navigator from './Navigator.svelte';
|
|
|
53
59
|
<div>
|
|
54
60
|
<Navigator
|
|
55
61
|
items={items}
|
|
62
|
+
on:item-click
|
|
56
63
|
></Navigator>
|
|
57
64
|
</div>
|
|
58
65
|
<slot name="append"></slot>
|
|
@@ -60,8 +67,6 @@ import Navigator from './Navigator.svelte';
|
|
|
60
67
|
|
|
61
68
|
<style>
|
|
62
69
|
.header-menu-container {
|
|
63
|
-
background-color: var(--background-color, white);
|
|
64
|
-
color: var(--color);
|
|
65
70
|
width: var(--width, 100vw)
|
|
66
71
|
}
|
|
67
72
|
|
|
@@ -5,8 +5,16 @@ declare const __propDef: {
|
|
|
5
5
|
title?: string;
|
|
6
6
|
items?: Item[];
|
|
7
7
|
hideOnScroll?: boolean;
|
|
8
|
+
initialRemoveShadow?: boolean;
|
|
9
|
+
initialBackgroundColor?: string;
|
|
10
|
+
backgroundColor?: string;
|
|
11
|
+
color?: string;
|
|
8
12
|
};
|
|
9
13
|
events: {
|
|
14
|
+
'item-click': CustomEvent<{
|
|
15
|
+
item: Item;
|
|
16
|
+
}>;
|
|
17
|
+
} & {
|
|
10
18
|
[evt: string]: CustomEvent<any>;
|
|
11
19
|
};
|
|
12
20
|
slots: {
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
<script context="module" >export {};
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
|
-
<script >export let items = [];
|
|
4
|
+
<script >export let items = [], color = undefined;
|
|
5
|
+
import { createEventDispatcher } from 'svelte';
|
|
6
|
+
const dispatch = createEventDispatcher();
|
|
7
|
+
function handleItemClick(item) {
|
|
8
|
+
dispatch('item-click', { item });
|
|
9
|
+
}
|
|
5
10
|
</script>
|
|
6
11
|
|
|
7
12
|
<div
|
|
@@ -10,7 +15,9 @@
|
|
|
10
15
|
{#each items as item}
|
|
11
16
|
<div
|
|
12
17
|
style:margin-right="20px"
|
|
18
|
+
style:color={color}
|
|
13
19
|
class="link bar-link"
|
|
20
|
+
on:click={() => handleItemClick(item)}
|
|
14
21
|
>
|
|
15
22
|
{item.title}
|
|
16
23
|
</div>
|
|
@@ -23,14 +30,13 @@
|
|
|
23
30
|
font-size: 18px;
|
|
24
31
|
position: relative;
|
|
25
32
|
white-space: nowrap;
|
|
26
|
-
color: var(--color-text);
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
.link::before,
|
|
30
36
|
.link::after {
|
|
31
37
|
position: absolute;
|
|
32
38
|
width: 100%;
|
|
33
|
-
height:
|
|
39
|
+
height: 1.5px;
|
|
34
40
|
background: currentColor;
|
|
35
41
|
top: 100%;
|
|
36
42
|
left: 0;
|