@likable-hair/svelte 2.0.8 → 2.0.9
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script>export let
|
|
1
|
+
<script>export let buttonType = "default", type = "button", active = false, loading = false, icon = void 0, iconSize = 15, disabled = false;
|
|
2
|
+
export let _maxWidth = void 0, _maxHeight = void 0, _minWidth = void 0, _minHeight = void 0, _width = void 0, _height = void 0, _textAlign = "center", _cursor = "pointer", _padding = "8px", _fontSize = void 0, _color = void 0, _display = void 0, _justifyContent = void 0, _alignItems = void 0, _backgroundColor = void 0, _hoverBackgroundColor = "#88888847", _activeBackgroundColor = _hoverBackgroundColor, _borderRadius = void 0, _border = void 0, _boxShadow = void 0, _loaderHeight = "15px", _loaderWidth = void 0;
|
|
2
3
|
import { createEventDispatcher } from "svelte";
|
|
3
4
|
const dispatch = createEventDispatcher();
|
|
4
5
|
function handleClick(event) {
|
|
@@ -16,54 +17,58 @@ function handleKeyPress(event) {
|
|
|
16
17
|
});
|
|
17
18
|
}
|
|
18
19
|
$:
|
|
19
|
-
defaultBorderRadius =
|
|
20
|
+
defaultBorderRadius = buttonType == "icon" ? "50%" : "5px";
|
|
20
21
|
$:
|
|
21
22
|
position = $$slots.append ? "relative" : void 0;
|
|
22
23
|
import Icon from "../media/Icon.svelte";
|
|
23
24
|
import CircularLoader from "../loaders/CircularLoader.svelte";
|
|
24
25
|
</script>
|
|
25
26
|
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
style:
|
|
29
|
-
style:
|
|
30
|
-
style:
|
|
31
|
-
style:max-
|
|
32
|
-
style:min-
|
|
33
|
-
style:
|
|
27
|
+
<button
|
|
28
|
+
type={type}
|
|
29
|
+
style:box-sizing="content-box"
|
|
30
|
+
style:font-family="inherit"
|
|
31
|
+
style:width={_width}
|
|
32
|
+
style:max-width={_maxWidth}
|
|
33
|
+
style:min-width={_minWidth}
|
|
34
|
+
style:height={_height}
|
|
35
|
+
style:max-height={_maxHeight}
|
|
36
|
+
style:min-height={_minHeight}
|
|
37
|
+
style:text-align={_textAlign}
|
|
34
38
|
style:position
|
|
35
|
-
style:cursor
|
|
36
|
-
style:padding
|
|
37
|
-
style:font-size={
|
|
38
|
-
style:color
|
|
39
|
-
style:display
|
|
40
|
-
style:justify-content={
|
|
41
|
-
style:align-items={
|
|
42
|
-
style:--button-border={
|
|
43
|
-
style:--button-border-radius={
|
|
44
|
-
?
|
|
39
|
+
style:cursor={_cursor}
|
|
40
|
+
style:padding={_padding}
|
|
41
|
+
style:font-size={_fontSize}
|
|
42
|
+
style:color={_color}
|
|
43
|
+
style:display={_display}
|
|
44
|
+
style:justify-content={_justifyContent}
|
|
45
|
+
style:align-items={_alignItems}
|
|
46
|
+
style:--button-border={_border}
|
|
47
|
+
style:--button-border-radius={_borderRadius
|
|
48
|
+
? _borderRadius
|
|
45
49
|
: defaultBorderRadius}
|
|
46
50
|
style:--button-background-color={active
|
|
47
|
-
?
|
|
48
|
-
:
|
|
49
|
-
style:--button-hover-background-color={
|
|
50
|
-
style:--button-box-shadow={
|
|
51
|
+
? _activeBackgroundColor
|
|
52
|
+
: _backgroundColor}
|
|
53
|
+
style:--button-hover-background-color={_hoverBackgroundColor}
|
|
54
|
+
style:--button-box-shadow={_boxShadow}
|
|
51
55
|
style:--button-icon-height={iconSize + 5 + "pt"}
|
|
52
56
|
style:--button-icon-width={iconSize + 5 + "pt"}
|
|
53
57
|
class="button no-select"
|
|
54
|
-
class:button-default={
|
|
55
|
-
class:button-text={
|
|
56
|
-
class:button-icon={
|
|
58
|
+
class:button-default={buttonType === "default"}
|
|
59
|
+
class:button-text={buttonType === "text"}
|
|
60
|
+
class:button-icon={buttonType === "icon"}
|
|
57
61
|
on:click={handleClick}
|
|
58
62
|
on:keypress={handleKeyPress}
|
|
59
63
|
>
|
|
60
64
|
{#if loading}
|
|
61
65
|
<div
|
|
62
|
-
style:height={'calc(' +
|
|
66
|
+
style:height={'calc(' + _loaderHeight + ' + .6rem)'}
|
|
63
67
|
style:display="flex"
|
|
68
|
+
style:justify-content="center"
|
|
64
69
|
style:align-items="center"
|
|
65
70
|
>
|
|
66
|
-
<CircularLoader {
|
|
71
|
+
<CircularLoader color={_color} height={_loaderHeight} width={_loaderWidth} />
|
|
67
72
|
</div>
|
|
68
73
|
{:else}
|
|
69
74
|
{#if !!icon}
|
|
@@ -77,7 +82,7 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
|
|
|
77
82
|
</span>
|
|
78
83
|
{/if}
|
|
79
84
|
{/if}
|
|
80
|
-
</
|
|
85
|
+
</button>
|
|
81
86
|
|
|
82
87
|
<style>
|
|
83
88
|
.append-item {
|
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
|
-
|
|
4
|
+
buttonType?: "default" | "text" | "icon" | undefined;
|
|
5
|
+
type?: "submit" | "button" | undefined;
|
|
5
6
|
active?: boolean | undefined;
|
|
6
7
|
loading?: boolean | undefined;
|
|
7
8
|
icon?: string | undefined;
|
|
8
9
|
iconSize?: number | undefined;
|
|
9
|
-
maxWidth?: string | undefined;
|
|
10
|
-
maxHeight?: string | undefined;
|
|
11
|
-
minWidth?: string | undefined;
|
|
12
|
-
minHeight?: string | undefined;
|
|
13
|
-
width?: string | undefined;
|
|
14
|
-
height?: string | undefined;
|
|
15
|
-
textAlign?: string | undefined;
|
|
16
|
-
cursor?: string | undefined;
|
|
17
|
-
padding?: string | undefined;
|
|
18
|
-
fontSize?: string | undefined;
|
|
19
|
-
color?: string | null | undefined;
|
|
20
|
-
display?: string | undefined;
|
|
21
|
-
justifyContent?: string | undefined;
|
|
22
|
-
alignItems?: string | undefined;
|
|
23
|
-
backgroundColor?: string | undefined;
|
|
24
|
-
hoverBackgroundColor?: string | undefined;
|
|
25
|
-
activeBackgroundColor?: string | undefined;
|
|
26
|
-
borderRadius?: string | undefined;
|
|
27
|
-
border?: string | undefined;
|
|
28
|
-
boxShadow?: string | undefined;
|
|
29
|
-
loaderHeight?: string | undefined;
|
|
30
|
-
loaderWidth?: string | undefined;
|
|
31
10
|
disabled?: boolean | undefined;
|
|
11
|
+
_maxWidth?: string | undefined;
|
|
12
|
+
_maxHeight?: string | undefined;
|
|
13
|
+
_minWidth?: string | undefined;
|
|
14
|
+
_minHeight?: string | undefined;
|
|
15
|
+
_width?: string | undefined;
|
|
16
|
+
_height?: string | undefined;
|
|
17
|
+
_textAlign?: string | undefined;
|
|
18
|
+
_cursor?: string | undefined;
|
|
19
|
+
_padding?: string | undefined;
|
|
20
|
+
_fontSize?: string | undefined;
|
|
21
|
+
_color?: string | null | undefined;
|
|
22
|
+
_display?: string | undefined;
|
|
23
|
+
_justifyContent?: string | undefined;
|
|
24
|
+
_alignItems?: string | undefined;
|
|
25
|
+
_backgroundColor?: string | undefined;
|
|
26
|
+
_hoverBackgroundColor?: string | undefined;
|
|
27
|
+
_activeBackgroundColor?: string | undefined;
|
|
28
|
+
_borderRadius?: string | undefined;
|
|
29
|
+
_border?: string | undefined;
|
|
30
|
+
_boxShadow?: string | undefined;
|
|
31
|
+
_loaderHeight?: string | undefined;
|
|
32
|
+
_loaderWidth?: string | undefined;
|
|
32
33
|
};
|
|
33
34
|
events: {
|
|
34
35
|
click: CustomEvent<{
|