lapikit 0.1.8 → 0.1.10
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/assets/icons/arrow-down.svelte +2 -0
- package/dist/assets/icons/arrow-down.svelte.d.ts +6 -14
- package/dist/assets/icons/arrow-up.svelte +2 -0
- package/dist/assets/icons/arrow-up.svelte.d.ts +6 -14
- package/dist/assets/icons/close-fill.svelte +2 -0
- package/dist/assets/icons/close-fill.svelte.d.ts +6 -14
- package/dist/assets/icons/loading-fill.svelte +2 -0
- package/dist/assets/icons/loading-fill.svelte.d.ts +6 -14
- package/dist/components/app/app.svelte +22 -4
- package/dist/components/appbar/appbar.css +0 -1
- package/dist/components/button/button.css +165 -192
- package/dist/components/button/button.svelte +37 -30
- package/dist/components/button/button.svelte.d.ts +2 -2
- package/dist/components/button/types.d.ts +7 -5
- package/dist/components/icon/icon.css +13 -10
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/internal/ripple.d.ts +11 -0
- package/dist/internal/ripple.js +90 -0
- package/dist/preset.js +2 -2
- package/dist/stores/index.d.ts +4 -3
- package/dist/stores/index.js +3 -2
- package/dist/style/animation.css +40 -0
- package/dist/style/parser/device.js +2 -2
- package/package.json +1 -1
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
export default ArrowDown;
|
|
2
|
-
type ArrowDown = SvelteComponent<{
|
|
3
|
-
[x: string]: never;
|
|
4
|
-
}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> & {
|
|
7
|
-
$$bindings?: string | undefined;
|
|
8
|
-
};
|
|
9
|
-
declare const ArrowDown: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
-
[x: string]: never;
|
|
11
|
-
}, {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {}, {}, string>;
|
|
14
1
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
-
new (options: import(
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
16
3
|
$$bindings?: Bindings;
|
|
17
4
|
} & Exports;
|
|
18
5
|
(internal: unknown, props: {
|
|
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
24
11
|
};
|
|
25
12
|
z_$$bindings?: Bindings;
|
|
26
13
|
}
|
|
14
|
+
declare const ArrowDown: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type ArrowDown = InstanceType<typeof ArrowDown>;
|
|
18
|
+
export default ArrowDown;
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
export default ArrowUp;
|
|
2
|
-
type ArrowUp = SvelteComponent<{
|
|
3
|
-
[x: string]: never;
|
|
4
|
-
}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> & {
|
|
7
|
-
$$bindings?: string | undefined;
|
|
8
|
-
};
|
|
9
|
-
declare const ArrowUp: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
-
[x: string]: never;
|
|
11
|
-
}, {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {}, {}, string>;
|
|
14
1
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
-
new (options: import(
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
16
3
|
$$bindings?: Bindings;
|
|
17
4
|
} & Exports;
|
|
18
5
|
(internal: unknown, props: {
|
|
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
24
11
|
};
|
|
25
12
|
z_$$bindings?: Bindings;
|
|
26
13
|
}
|
|
14
|
+
declare const ArrowUp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type ArrowUp = InstanceType<typeof ArrowUp>;
|
|
18
|
+
export default ArrowUp;
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
export default CloseFill;
|
|
2
|
-
type CloseFill = SvelteComponent<{
|
|
3
|
-
[x: string]: never;
|
|
4
|
-
}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> & {
|
|
7
|
-
$$bindings?: string | undefined;
|
|
8
|
-
};
|
|
9
|
-
declare const CloseFill: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
-
[x: string]: never;
|
|
11
|
-
}, {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {}, {}, string>;
|
|
14
1
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
-
new (options: import(
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
16
3
|
$$bindings?: Bindings;
|
|
17
4
|
} & Exports;
|
|
18
5
|
(internal: unknown, props: {
|
|
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
24
11
|
};
|
|
25
12
|
z_$$bindings?: Bindings;
|
|
26
13
|
}
|
|
14
|
+
declare const CloseFill: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type CloseFill = InstanceType<typeof CloseFill>;
|
|
18
|
+
export default CloseFill;
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
export default LoadingFill;
|
|
2
|
-
type LoadingFill = SvelteComponent<{
|
|
3
|
-
[x: string]: never;
|
|
4
|
-
}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> & {
|
|
7
|
-
$$bindings?: string | undefined;
|
|
8
|
-
};
|
|
9
|
-
declare const LoadingFill: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
-
[x: string]: never;
|
|
11
|
-
}, {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {}, {}, string>;
|
|
14
1
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
|
-
new (options: import(
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
16
3
|
$$bindings?: Bindings;
|
|
17
4
|
} & Exports;
|
|
18
5
|
(internal: unknown, props: {
|
|
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
24
11
|
};
|
|
25
12
|
z_$$bindings?: Bindings;
|
|
26
13
|
}
|
|
14
|
+
declare const LoadingFill: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type LoadingFill = InstanceType<typeof LoadingFill>;
|
|
18
|
+
export default LoadingFill;
|
|
@@ -1,18 +1,36 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { BROWSER } from 'esm-env';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
colorSchemeSystem,
|
|
5
|
+
modalOpen,
|
|
6
|
+
setOpenModal,
|
|
7
|
+
updateThemeStore
|
|
8
|
+
} from '../../stores/index.js';
|
|
4
9
|
import type { Snippet } from 'svelte';
|
|
5
10
|
let { children }: { children: Snippet } = $props();
|
|
6
11
|
|
|
7
12
|
$effect.pre(() => {
|
|
8
13
|
if (!BROWSER) return;
|
|
14
|
+
// system
|
|
15
|
+
if (window.matchMedia) {
|
|
16
|
+
colorSchemeSystem.set(
|
|
17
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// listener
|
|
22
|
+
window
|
|
23
|
+
.matchMedia('(prefers-color-scheme: dark)')
|
|
24
|
+
.addEventListener('change', (event: MediaQueryListEvent) => {
|
|
25
|
+
colorSchemeSystem.set(event.matches ? 'dark' : 'light');
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// local
|
|
9
29
|
const local = localStorage.getItem('@lapikit/theme');
|
|
10
|
-
if (local !== null) updateThemeStore(local as 'dark' | 'light' | '
|
|
30
|
+
if (local !== null) updateThemeStore(local as 'dark' | 'light' | 'system');
|
|
11
31
|
});
|
|
12
32
|
</script>
|
|
13
33
|
|
|
14
|
-
{$modalOpen ? ($modalOpen === 'persistent' ? 'persistent' : 'true') : 'false'}
|
|
15
|
-
|
|
16
34
|
{@render children?.()}
|
|
17
35
|
|
|
18
36
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
@@ -1,276 +1,249 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--
|
|
4
|
-
--
|
|
5
|
-
|
|
6
|
-
display: inline-flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
white-space: nowrap;
|
|
10
|
-
padding-top: var(--btn-spacing-x);
|
|
11
|
-
padding-bottom: var(--btn-spacing-x);
|
|
12
|
-
padding-right: var(--btn-spacing-y);
|
|
13
|
-
padding-left: var(--btn-spacing-y);
|
|
14
|
-
cursor: pointer;
|
|
15
|
-
width: fit-content;
|
|
16
|
-
border-width: 1px;
|
|
17
|
-
border-style: solid;
|
|
18
|
-
border-radius: var(--btn-radius);
|
|
19
|
-
|
|
20
|
-
/* theme */
|
|
21
|
-
color: var(--btn-color);
|
|
22
|
-
background-color: var(--btn-background);
|
|
23
|
-
border-color: var(--btn-background);
|
|
1
|
+
/* root */
|
|
2
|
+
.kit-button {
|
|
3
|
+
--button-color: var(--on, var(--kit-on-container));
|
|
4
|
+
--button-background: var(--base, var(--kit-container));
|
|
5
|
+
--button-radius: var(--shape, var(--kit-radius-md));
|
|
24
6
|
}
|
|
25
7
|
|
|
26
|
-
.kit-
|
|
27
|
-
|
|
8
|
+
.kit-button {
|
|
9
|
+
position: relative;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
border: none;
|
|
12
|
+
outline: none;
|
|
13
|
+
padding-top: var(--button-spacing-x);
|
|
14
|
+
padding-bottom: var(--button-spacing-x);
|
|
15
|
+
padding-right: var(--button-spacing-y);
|
|
16
|
+
padding-left: var(--button-spacing-y);
|
|
17
|
+
border-radius: var(--button-radius);
|
|
18
|
+
color: var(--button-color);
|
|
19
|
+
font-weight: 500;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.kit-button,
|
|
23
|
+
.kit-button .kit-button-content,
|
|
24
|
+
.kit-button .kit-button-append,
|
|
25
|
+
.kit-button .kit-button-prepend,
|
|
26
|
+
.kit-button .kit-button-loading {
|
|
28
27
|
display: inline-flex;
|
|
29
28
|
align-items: center;
|
|
30
29
|
justify-content: center;
|
|
31
30
|
white-space: nowrap;
|
|
32
|
-
gap: var(--
|
|
31
|
+
gap: calc(var(--kit-spacing) * var(--button-multiplier-gap));
|
|
32
|
+
font-size: calc(var(--kit-spacing) * var(--button-multiplier-font-size));
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.kit-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
.kit-button::after {
|
|
36
|
+
content: '';
|
|
37
|
+
position: absolute;
|
|
38
|
+
inset: 0;
|
|
39
|
+
background-color: currentColor;
|
|
40
|
+
opacity: 0;
|
|
41
|
+
transition: opacity 150ms ease;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
border-radius: inherit;
|
|
44
|
+
}
|
|
45
|
+
.kit-button:hover::after {
|
|
46
|
+
opacity: 0.08;
|
|
47
|
+
}
|
|
48
|
+
.kit-button:active::after {
|
|
49
|
+
opacity: 0.12;
|
|
50
|
+
}
|
|
51
|
+
.kit-button:focus-visible::after {
|
|
52
|
+
opacity: 0.12;
|
|
39
53
|
}
|
|
40
54
|
|
|
41
55
|
/* size */
|
|
42
|
-
.kit-
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
font-size:
|
|
47
|
-
|
|
56
|
+
.kit-button[breakpoint]kit-button--size-xs {
|
|
57
|
+
--button-multiplier-x: 12;
|
|
58
|
+
--button-multiplier-y: 2;
|
|
59
|
+
--button-multiplier-gap: 2;
|
|
60
|
+
--button-multiplier-font-size: 6;
|
|
61
|
+
}
|
|
62
|
+
.kit-button[breakpoint]kit-button--size-xs .kit-icon[class*='kit-icon--size-md'] {
|
|
63
|
+
--icon-multiplier-parent-size: 7;
|
|
48
64
|
}
|
|
49
65
|
|
|
50
|
-
.kit-
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
font-size:
|
|
55
|
-
|
|
66
|
+
.kit-button[breakpoint]kit-button--size-sm {
|
|
67
|
+
--button-multiplier-x: 16;
|
|
68
|
+
--button-multiplier-y: 3;
|
|
69
|
+
--button-multiplier-gap: 4;
|
|
70
|
+
--button-multiplier-font-size: 7;
|
|
71
|
+
}
|
|
72
|
+
.kit-button[breakpoint]kit-button--size-sm .kit-icon[class*='kit-icon--size-md'] {
|
|
73
|
+
--icon-multiplier-parent-size: 8;
|
|
56
74
|
}
|
|
57
75
|
|
|
58
|
-
.kit-
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
font-size:
|
|
63
|
-
|
|
76
|
+
.kit-button[breakpoint]kit-button--size-md {
|
|
77
|
+
--button-multiplier-x: 20;
|
|
78
|
+
--button-multiplier-y: 4;
|
|
79
|
+
--button-multiplier-gap: 4;
|
|
80
|
+
--button-multiplier-font-size: 8;
|
|
81
|
+
}
|
|
82
|
+
.kit-button[breakpoint]kit-button--size-md .kit-icon[class*='kit-icon--size-md'] {
|
|
83
|
+
--icon-multiplier-parent-size: 9;
|
|
64
84
|
}
|
|
65
85
|
|
|
66
|
-
.kit-
|
|
67
|
-
--
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
font-size:
|
|
71
|
-
|
|
86
|
+
.kit-button[breakpoint]kit-button--size-lg {
|
|
87
|
+
--button-multiplier-x: 24;
|
|
88
|
+
--button-multiplier-y: 5;
|
|
89
|
+
--button-multiplier-gap: 4;
|
|
90
|
+
--button-multiplier-font-size: 9;
|
|
91
|
+
}
|
|
92
|
+
.kit-button[breakpoint]kit-button--size-lg .kit-icon[class*='kit-icon--size-md'] {
|
|
93
|
+
--icon-multiplier-parent-size: 10;
|
|
72
94
|
}
|
|
73
95
|
|
|
74
|
-
.kit-
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
font-size:
|
|
79
|
-
|
|
96
|
+
.kit-button[breakpoint]kit-button--size-xl {
|
|
97
|
+
--button-multiplier-x: 28;
|
|
98
|
+
--button-multiplier-y: 6;
|
|
99
|
+
--button-multiplier-gap: 5;
|
|
100
|
+
--button-multiplier-font-size: 10;
|
|
101
|
+
}
|
|
102
|
+
.kit-button[breakpoint]kit-button--size-xl .kit-icon[class*='kit-icon--size-md'] {
|
|
103
|
+
--icon-multiplier-parent-size: 11;
|
|
80
104
|
}
|
|
81
105
|
|
|
82
106
|
/* density */
|
|
83
|
-
.kit-
|
|
84
|
-
height: calc(var(--
|
|
85
|
-
|
|
86
|
-
--
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
--
|
|
93
|
-
--btn-spacing-y: 0;
|
|
107
|
+
.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-default {
|
|
108
|
+
height: calc(var(--kit-spacing) * var(--button-multiplier-x));
|
|
109
|
+
--button-spacing-x: 0;
|
|
110
|
+
--button-spacing-y: calc(var(--kit-spacing) * var(--button-multiplier-y));
|
|
111
|
+
}
|
|
112
|
+
.kit-button.kit-button--icon[breakpoint]kit-button--density-default {
|
|
113
|
+
height: calc(var(--kit-spacing) * var(--button-multiplier-x));
|
|
114
|
+
width: calc(var(--kit-spacing) * var(--button-multiplier-x));
|
|
115
|
+
--button-spacing-x: 0;
|
|
116
|
+
--button-spacing-y: 0;
|
|
94
117
|
}
|
|
95
118
|
|
|
96
|
-
.kit-
|
|
97
|
-
height: calc(var(--
|
|
98
|
-
|
|
99
|
-
--
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--
|
|
106
|
-
--btn-spacing-y: 0;
|
|
119
|
+
.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-compact {
|
|
120
|
+
height: calc(var(--kit-spacing) * var(--button-multiplier-x) - 0.25rem);
|
|
121
|
+
--button-spacing-x: 0;
|
|
122
|
+
--button-spacing-y: calc(var(--kit-spacing) * var(--button-multiplier-y) - 0.25rem);
|
|
123
|
+
}
|
|
124
|
+
.kit-button.kit-button--icon[breakpoint]kit-button--density-compact {
|
|
125
|
+
height: calc(var(--kit-spacing) * var(--button-multiplier-x) - 0.25rem);
|
|
126
|
+
width: calc(var(--kit-spacing) * var(--button-multiplier-x) - 0.25rem);
|
|
127
|
+
--button-spacing-x: 0;
|
|
128
|
+
--button-spacing-y: 0;
|
|
107
129
|
}
|
|
108
130
|
|
|
109
|
-
.kit-
|
|
110
|
-
height: calc(var(--
|
|
111
|
-
|
|
112
|
-
--
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
--
|
|
119
|
-
--btn-spacing-y: 0;
|
|
131
|
+
.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-comfortable {
|
|
132
|
+
height: calc(var(--kit-spacing) * var(--button-multiplier-x) + 0.25rem);
|
|
133
|
+
--button-spacing-x: 0;
|
|
134
|
+
--button-spacing-y: calc(var(--kit-spacing) * var(--button-multiplier-y) + 0.25rem);
|
|
135
|
+
}
|
|
136
|
+
.kit-button.kit-button--icon[breakpoint]kit-button--density-comfortable {
|
|
137
|
+
height: calc(var(--kit-spacing) * var(--button-multiplier-x) + 0.25rem);
|
|
138
|
+
width: calc(var(--kit-spacing) * var(--button-multiplier-x) + 0.25rem);
|
|
139
|
+
--button-spacing-x: 0;
|
|
140
|
+
--button-spacing-y: 0;
|
|
120
141
|
}
|
|
121
142
|
|
|
122
143
|
/* variant */
|
|
123
|
-
.kit-
|
|
124
|
-
|
|
125
|
-
background-color: transparent;
|
|
126
|
-
border: 1px solid currentColor;
|
|
144
|
+
.kit-button[breakpoint]kit-button--variant-filled {
|
|
145
|
+
background-color: var(--button-background);
|
|
127
146
|
}
|
|
128
147
|
|
|
129
|
-
.kit-
|
|
130
|
-
--
|
|
148
|
+
.kit-button[breakpoint]kit-button--variant-outline {
|
|
149
|
+
--button-color: var(--base, var(--kit-on-container));
|
|
131
150
|
background-color: transparent;
|
|
132
|
-
border-color: transparent;
|
|
133
151
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
border: 1px
|
|
152
|
+
.kit-button[breakpoint]kit-button--variant-outline::before {
|
|
153
|
+
content: '';
|
|
154
|
+
position: absolute;
|
|
155
|
+
inset: 0;
|
|
156
|
+
border: 1px solid currentColor;
|
|
157
|
+
pointer-events: none;
|
|
158
|
+
border-radius: inherit;
|
|
139
159
|
}
|
|
140
160
|
|
|
141
|
-
.kit-
|
|
142
|
-
--
|
|
161
|
+
.kit-button[breakpoint]kit-button--variant-text {
|
|
162
|
+
--button-color: var(--base, var(--kit-on-container));
|
|
143
163
|
background-color: transparent;
|
|
144
|
-
border
|
|
164
|
+
border: none;
|
|
145
165
|
}
|
|
146
166
|
|
|
147
167
|
/* state */
|
|
148
|
-
.kit-
|
|
168
|
+
.kit-button.kit-button--info:not([class*='button--variant-']) {
|
|
149
169
|
--on: var(--kit-on-info);
|
|
150
170
|
--base: var(--kit-info);
|
|
151
171
|
}
|
|
152
|
-
.kit-
|
|
172
|
+
.kit-button.kit-button--info[class*='button--variant-'] {
|
|
153
173
|
--base: var(--kit-info);
|
|
154
174
|
}
|
|
155
|
-
|
|
156
|
-
.kit-btn.kit-btn--success:not([class*='btn--variant-']) {
|
|
175
|
+
.kit-button.kit-button--success:not([class*='button--variant-']) {
|
|
157
176
|
--on: var(--kit-on-success);
|
|
158
177
|
--base: var(--kit-success);
|
|
159
178
|
}
|
|
160
|
-
.kit-
|
|
179
|
+
.kit-button.kit-button--success[class*='button--variant-'] {
|
|
161
180
|
--base: var(--kit-success);
|
|
162
181
|
}
|
|
163
|
-
|
|
164
|
-
.kit-btn.kit-btn--warning:not([class*='btn--variant-']) {
|
|
182
|
+
.kit-button.kit-button--warning:not([class*='button--variant-']) {
|
|
165
183
|
--on: var(--kit-on-warning);
|
|
166
184
|
--base: var(--kit-warning);
|
|
167
185
|
}
|
|
168
|
-
.kit-
|
|
186
|
+
.kit-button.kit-button--warning[class*='button--variant-'] {
|
|
169
187
|
--base: var(--kit-warning);
|
|
170
188
|
}
|
|
171
|
-
|
|
172
|
-
.kit-btn.kit-btn--error:not([class*='btn--variant-']) {
|
|
189
|
+
.kit-button.kit-button--error:not([class*='button--variant-']) {
|
|
173
190
|
--on: var(--kit-on-error);
|
|
174
191
|
--base: var(--kit-error);
|
|
175
192
|
}
|
|
176
|
-
.kit-
|
|
193
|
+
.kit-button.kit-button--error[class*='button--variant-'] {
|
|
177
194
|
--base: var(--kit-error);
|
|
178
195
|
}
|
|
179
196
|
|
|
180
|
-
/* types */
|
|
181
|
-
.kit-btn:where(.kit-btn:is(input[type='checkbox'])),
|
|
182
|
-
.kit-btn:where(.kit-btn:is(input[type='radio'])) {
|
|
183
|
-
width: auto;
|
|
184
|
-
-webkit-appearance: none;
|
|
185
|
-
-moz-appearance: none;
|
|
186
|
-
appearance: none;
|
|
187
|
-
vertical-align: inherit;
|
|
188
|
-
}
|
|
189
|
-
.kit-btn:is(input[type='checkbox']):after,
|
|
190
|
-
.kit-btn:is(input[type='radio']):after {
|
|
191
|
-
--btn-content: attr(aria-label);
|
|
192
|
-
content: var(--btn-content);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.kit-btn:is(input[type='checkbox']):focus,
|
|
196
|
-
.kit-btn:is(input[type='radio']):focus {
|
|
197
|
-
outline: none;
|
|
198
|
-
outline-offset: inherit;
|
|
199
|
-
box-shadow: none;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.kit-btn:is(input[type='checkbox']):checked,
|
|
203
|
-
.kit-btn:is(input[type='radio']):checked {
|
|
204
|
-
background-image: initial;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
197
|
/* events */
|
|
208
|
-
.kit-
|
|
209
|
-
.kit-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
.kit-
|
|
215
|
-
.kit-btn[class*='btn--variant-']:is(input[type='radio']):checked,
|
|
216
|
-
.kit-btn[class*='btn--variant-']:is(input[type='checkbox']):checked {
|
|
198
|
+
.kit-button[class*='button--variant-filled']:active,
|
|
199
|
+
.kit-button.kit-button--active[class*='button--variant-filled'] {
|
|
200
|
+
background-color: color-mix(in oklab, var(--button-background) 90%, var(--kit-scrim));
|
|
201
|
+
border-color: color-mix(in oklab, var(--button-background) 90%, var(--kit-scrim));
|
|
202
|
+
}
|
|
203
|
+
.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']):active,
|
|
204
|
+
.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']) {
|
|
217
205
|
background-color: color-mix(in oklab, currentColor 15%, transparent);
|
|
218
206
|
border-color: color-mix(in oklab, currentColor 15%, transparent);
|
|
219
207
|
}
|
|
220
208
|
|
|
221
|
-
.kit-btn:hover:not([class*='btn--variant-']),
|
|
222
|
-
.kit-btn:not([class*='btn--variant-']):is(input[type='radio']):hover,
|
|
223
|
-
.kit-btn:not([class*='btn--variant-']):is(input[type='checkbox']):hover {
|
|
224
|
-
background-color: color-mix(in oklab, var(--btn-background) 85%, var(--kit-scrim));
|
|
225
|
-
border-color: color-mix(in oklab, var(--btn-background) 85%, var(--kit-scrim));
|
|
226
|
-
}
|
|
227
|
-
.kit-btn:hover[class*='btn--variant-'],
|
|
228
|
-
.kit-btn[class*='btn--variant-']:is(input[type='radio']):hover,
|
|
229
|
-
.kit-btn[class*='btn--variant-']:is(input[type='checkbox']):hover {
|
|
230
|
-
background-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
209
|
/* icon */
|
|
234
|
-
.kit-
|
|
235
|
-
|
|
210
|
+
.kit-button i::before,
|
|
211
|
+
.kit-button .kit-icon {
|
|
212
|
+
--base-parent: var(--button-color);
|
|
236
213
|
}
|
|
237
214
|
|
|
238
215
|
/* disabled */
|
|
239
|
-
.kit-
|
|
240
|
-
.kit-
|
|
241
|
-
|
|
242
|
-
input.kit-btn[disabled] {
|
|
216
|
+
.kit-button.kit-button--disabled,
|
|
217
|
+
.kit-button[disabled],
|
|
218
|
+
.kit-button.kit-button--loading {
|
|
243
219
|
pointer-events: none;
|
|
244
220
|
user-select: none;
|
|
245
221
|
cursor: default;
|
|
246
222
|
}
|
|
247
|
-
.kit-
|
|
248
|
-
color: color-mix(in oklab, var(--
|
|
249
|
-
background-color: color-mix(in oklab, var(--
|
|
250
|
-
border-color: color-mix(in oklab, var(--
|
|
223
|
+
.kit-button[class*='button--variant-filled'].kit-button--disabled {
|
|
224
|
+
color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
|
|
225
|
+
background-color: color-mix(in oklab, var(--button-background) 70%, transparent) !important;
|
|
226
|
+
border-color: color-mix(in oklab, var(--button-background) 70%, transparent) !important;
|
|
251
227
|
}
|
|
252
|
-
.kit-
|
|
253
|
-
color: color-mix(in oklab, var(--
|
|
228
|
+
.kit-button[class*='button--variant-filled'].kit-button--disabled i:before {
|
|
229
|
+
color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
|
|
254
230
|
}
|
|
255
|
-
.kit-
|
|
256
|
-
.kit-
|
|
257
|
-
|
|
231
|
+
.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled,
|
|
232
|
+
.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled
|
|
233
|
+
i::before {
|
|
234
|
+
color: color-mix(in oklab, var(--button-background) 40%, transparent) !important;
|
|
258
235
|
}
|
|
259
236
|
|
|
260
237
|
/* loading */
|
|
261
|
-
.kit-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
}
|
|
266
|
-
.kit-btn.kit-btn--loading > .kit-btn-content {
|
|
267
|
-
color: transparent;
|
|
268
|
-
opacity: 0;
|
|
238
|
+
.kit-button.kit-button--loading > .kit-button-content,
|
|
239
|
+
.kit-button.kit-button--loading > .kit-button-append,
|
|
240
|
+
.kit-button.kit-button--loading > .kit-button-prepend {
|
|
241
|
+
visibility: hidden;
|
|
269
242
|
}
|
|
270
|
-
.kit-
|
|
243
|
+
.kit-button.kit-button--loading > .kit-button-loading {
|
|
271
244
|
position: absolute;
|
|
272
245
|
min-width: fit-content;
|
|
273
246
|
}
|
|
274
|
-
.kit-
|
|
247
|
+
.kit-button.kit-button--loading > .kit-button-loading .kit-icon-load {
|
|
275
248
|
animation: icon-rotate 1s ease-out infinite;
|
|
276
249
|
}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { getAssets } from '../../internal/index.js';
|
|
3
|
-
import {
|
|
4
|
-
import type { BtnProps } from './types.js';
|
|
3
|
+
import type { ButtonProps } from './types.js';
|
|
5
4
|
|
|
6
5
|
// external
|
|
6
|
+
import { Icon } from '../index.js';
|
|
7
7
|
import LoadingFill from '../../assets/icons/loading-fill.svelte';
|
|
8
|
+
import { ripple } from '../../internal/ripple.js';
|
|
8
9
|
|
|
9
10
|
let {
|
|
10
11
|
children,
|
|
12
|
+
prepend,
|
|
13
|
+
append,
|
|
11
14
|
ref = $bindable(),
|
|
12
15
|
is = 'button',
|
|
13
16
|
href,
|
|
14
17
|
dark,
|
|
15
18
|
light,
|
|
16
19
|
active,
|
|
17
|
-
variant,
|
|
20
|
+
variant = 'filled',
|
|
18
21
|
error,
|
|
19
22
|
info,
|
|
20
23
|
success,
|
|
@@ -25,22 +28,15 @@
|
|
|
25
28
|
type = 'button',
|
|
26
29
|
background,
|
|
27
30
|
color,
|
|
28
|
-
label,
|
|
29
31
|
loading,
|
|
30
32
|
rounded,
|
|
31
33
|
icon,
|
|
32
34
|
load,
|
|
35
|
+
noRipple,
|
|
33
36
|
...rest
|
|
34
|
-
}:
|
|
37
|
+
}: ButtonProps = $props();
|
|
35
38
|
|
|
36
39
|
const assets = getAssets();
|
|
37
|
-
|
|
38
|
-
$effect(() => {
|
|
39
|
-
if (type === 'radio') is = 'input';
|
|
40
|
-
if (type === 'checkbox') is = 'input';
|
|
41
|
-
if (type === 'submit') is = 'input';
|
|
42
|
-
if (type === 'reset') is = 'input';
|
|
43
|
-
});
|
|
44
40
|
</script>
|
|
45
41
|
|
|
46
42
|
<svelte:element
|
|
@@ -49,33 +45,34 @@
|
|
|
49
45
|
{...rest}
|
|
50
46
|
href={href && !disabled ? href : undefined}
|
|
51
47
|
class={[
|
|
52
|
-
'kit-
|
|
48
|
+
'kit-button',
|
|
53
49
|
light && 'light',
|
|
54
50
|
dark && 'dark',
|
|
55
|
-
size && assets.className('
|
|
56
|
-
variant && assets.className('
|
|
57
|
-
density && assets.className('
|
|
58
|
-
error && 'kit-
|
|
59
|
-
info && 'kit-
|
|
60
|
-
success && 'kit-
|
|
61
|
-
warning && 'kit-
|
|
62
|
-
disabled && 'kit-
|
|
63
|
-
active && 'kit-
|
|
64
|
-
loading && 'kit-
|
|
65
|
-
icon && 'kit-
|
|
51
|
+
size && assets.className('button', 'size', size),
|
|
52
|
+
variant && assets.className('button', 'variant', variant),
|
|
53
|
+
density && assets.className('button', 'density', density),
|
|
54
|
+
error && 'kit-button--error',
|
|
55
|
+
info && 'kit-button--info',
|
|
56
|
+
success && 'kit-button--success',
|
|
57
|
+
warning && 'kit-button--warning',
|
|
58
|
+
disabled && 'kit-button--disabled',
|
|
59
|
+
active && 'kit-button--active',
|
|
60
|
+
loading && 'kit-button--loading',
|
|
61
|
+
icon && 'kit-button--icon',
|
|
66
62
|
rest.class
|
|
67
63
|
]}
|
|
68
64
|
tabindex={href && disabled ? -1 : 0}
|
|
69
|
-
aria-disabled={href ? disabled : undefined}
|
|
70
|
-
aria-label={type !== 'button' ? label : undefined}
|
|
71
65
|
disabled={href ? undefined : disabled}
|
|
72
66
|
type={href ? undefined : type}
|
|
67
|
+
use:ripple={{
|
|
68
|
+
disabled: noRipple || disabled
|
|
69
|
+
}}
|
|
73
70
|
style:--base={assets.color(background)}
|
|
74
71
|
style:--on={assets.color(color)}
|
|
75
72
|
style:--shape={assets.shape(rounded)}
|
|
76
73
|
>
|
|
77
74
|
{#if loading}
|
|
78
|
-
<div class="kit-
|
|
75
|
+
<div class="kit-button-loading">
|
|
79
76
|
{#if load}
|
|
80
77
|
{@render load?.()}
|
|
81
78
|
{:else}
|
|
@@ -86,9 +83,19 @@
|
|
|
86
83
|
</div>
|
|
87
84
|
{/if}
|
|
88
85
|
|
|
89
|
-
{#if
|
|
90
|
-
<span class="kit-
|
|
91
|
-
{@render
|
|
86
|
+
{#if prepend}
|
|
87
|
+
<span class="kit-button-prepend">
|
|
88
|
+
{@render prepend?.()}
|
|
89
|
+
</span>
|
|
90
|
+
{/if}
|
|
91
|
+
|
|
92
|
+
<span class="kit-button-content">
|
|
93
|
+
{@render children?.()}
|
|
94
|
+
</span>
|
|
95
|
+
|
|
96
|
+
{#if append}
|
|
97
|
+
<span class="kit-button-append">
|
|
98
|
+
{@render append?.()}
|
|
92
99
|
</span>
|
|
93
100
|
{/if}
|
|
94
101
|
</svelte:element>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare const Button: import("svelte").Component<
|
|
1
|
+
import type { ButtonProps } from './types.js';
|
|
2
|
+
declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
|
|
3
3
|
type Button = ReturnType<typeof Button>;
|
|
4
4
|
export default Button;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { Component } from '../../internal/types.js';
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
|
-
export interface
|
|
3
|
+
export interface ButtonProps extends Component {
|
|
4
4
|
ref?: HTMLElement | null;
|
|
5
|
-
is?: 'button' | 'a'
|
|
5
|
+
is?: 'button' | 'a';
|
|
6
6
|
dark?: boolean;
|
|
7
7
|
light?: boolean;
|
|
8
8
|
href?: string;
|
|
9
|
-
variant?: 'outline' | 'text' | '
|
|
9
|
+
variant?: 'outline' | 'text' | 'filled';
|
|
10
10
|
density?: 'compact' | 'comfortable' | 'default';
|
|
11
11
|
active?: boolean;
|
|
12
12
|
loading?: boolean;
|
|
@@ -20,8 +20,10 @@ export interface BtnProps extends Component {
|
|
|
20
20
|
size?: string | {
|
|
21
21
|
[key: string]: string;
|
|
22
22
|
};
|
|
23
|
-
type?: 'button' | 'submit' | 'reset'
|
|
24
|
-
label?: string;
|
|
23
|
+
type?: 'button' | 'submit' | 'reset';
|
|
25
24
|
icon?: boolean;
|
|
26
25
|
load?: Snippet;
|
|
26
|
+
append?: Snippet;
|
|
27
|
+
prepend?: Snippet;
|
|
28
|
+
noRipple?: boolean;
|
|
27
29
|
}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
.kit-icon {
|
|
2
|
-
--icon-
|
|
3
|
-
--icon-color: var(--base, var(--kit-on-neutral));
|
|
2
|
+
--icon-color: var(--base, var(--base-parent, var(--kit-on-neutral)));
|
|
4
3
|
|
|
5
4
|
display: inline-flex;
|
|
6
5
|
align-items: center;
|
|
7
6
|
justify-content: center;
|
|
8
7
|
transition: color 0.5s;
|
|
9
8
|
text-indent: 0;
|
|
9
|
+
font-size: calc(
|
|
10
|
+
var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--kit-spacing)
|
|
11
|
+
);
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
.kit-icon:before {
|
|
13
|
-
font-size: calc(var(--icon-size-multiplier) * var(--icon-size));
|
|
14
15
|
color: var(--icon-color);
|
|
15
16
|
}
|
|
16
17
|
|
|
@@ -20,29 +21,31 @@
|
|
|
20
21
|
|
|
21
22
|
.kit-icon svg,
|
|
22
23
|
.kit-icon img {
|
|
23
|
-
width: calc(var(--icon-size-multiplier) * var(--
|
|
24
|
-
height: calc(
|
|
24
|
+
width: calc(var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--kit-spacing));
|
|
25
|
+
height: calc(
|
|
26
|
+
var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--kit-spacing)
|
|
27
|
+
);
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
/* size */
|
|
28
31
|
.kit-icon[breakpoint]kit-icon--size-xs {
|
|
29
|
-
--icon-size
|
|
32
|
+
--icon-multiplier-size: 7;
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
.kit-icon[breakpoint]kit-icon--size-sm {
|
|
33
|
-
--icon-size
|
|
36
|
+
--icon-multiplier-size: 8;
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
.kit-icon[breakpoint]kit-icon--size-md {
|
|
37
|
-
--icon-size
|
|
40
|
+
--icon-multiplier-size: 9;
|
|
38
41
|
}
|
|
39
42
|
|
|
40
43
|
.kit-icon[breakpoint]kit-icon--size-lg {
|
|
41
|
-
--icon-size
|
|
44
|
+
--icon-multiplier-size: 10;
|
|
42
45
|
}
|
|
43
46
|
|
|
44
47
|
.kit-icon[breakpoint]kit-icon--size-xl {
|
|
45
|
-
--icon-size
|
|
48
|
+
--icon-multiplier-size: 11;
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
/* state */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as App } from './app/app.svelte';
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as Button } from './button/button.svelte';
|
|
3
3
|
export { default as Icon } from './icon/icon.svelte';
|
|
4
4
|
export { default as Dropdown } from './dropdown/dropdown.svelte';
|
|
5
5
|
export { default as Popover } from './popover/popover.svelte';
|
package/dist/components/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// components
|
|
2
2
|
export { default as App } from './app/app.svelte';
|
|
3
|
-
export { default as
|
|
3
|
+
export { default as Button } from './button/button.svelte';
|
|
4
4
|
export { default as Icon } from './icon/icon.svelte';
|
|
5
5
|
export { default as Dropdown } from './dropdown/dropdown.svelte';
|
|
6
6
|
export { default as Popover } from './popover/popover.svelte';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface RippleOptions {
|
|
2
|
+
center?: boolean;
|
|
3
|
+
color?: string;
|
|
4
|
+
duration?: number;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare function ripple(el: HTMLElement, options?: RippleOptions): {
|
|
8
|
+
destroy(): void;
|
|
9
|
+
update(newOptions: RippleOptions): void;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
const triggerEvents = ['pointerdown', 'touchstart', 'keydown'];
|
|
2
|
+
const cancelEvents = ['mouseleave', 'dragleave', 'touchmove', 'touchcancel', 'pointerup', 'keyup'];
|
|
3
|
+
export function ripple(el, options = {}) {
|
|
4
|
+
const rippleContainer = document.createElement('div');
|
|
5
|
+
addClasses();
|
|
6
|
+
setOptions(options);
|
|
7
|
+
function addClasses(center) {
|
|
8
|
+
const shouldBeCentered = center || options.center;
|
|
9
|
+
if (!rippleContainer.classList.contains('kit-ripple--effect')) {
|
|
10
|
+
rippleContainer.classList.add('kit-ripple--effect');
|
|
11
|
+
}
|
|
12
|
+
if (!shouldBeCentered && rippleContainer.classList.contains('kit-ripple--center')) {
|
|
13
|
+
rippleContainer.classList.remove('kit-ripple--center');
|
|
14
|
+
}
|
|
15
|
+
if (shouldBeCentered) {
|
|
16
|
+
rippleContainer.classList.add('kit-ripple--center');
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
function setOptions(options) {
|
|
20
|
+
if (options.disabled || el.hasAttribute('aria-disabled')) {
|
|
21
|
+
rippleContainer.remove();
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
el.appendChild(rippleContainer);
|
|
25
|
+
}
|
|
26
|
+
if (options.duration && options.duration < 0) {
|
|
27
|
+
options.duration = undefined;
|
|
28
|
+
}
|
|
29
|
+
if (options.color) {
|
|
30
|
+
rippleContainer.style.setProperty('--ripple-color', options.color);
|
|
31
|
+
}
|
|
32
|
+
if (options.duration) {
|
|
33
|
+
rippleContainer.style.setProperty('--ripple-duration', `${options.duration}ms`);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
function createRipple(e, center) {
|
|
37
|
+
if (options.disabled || el.hasAttribute('aria-disabled')) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (e instanceof KeyboardEvent) {
|
|
41
|
+
if (!['Enter', 'Space'].includes(e.code) || e.repeat) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
const click = new PointerEvent('pointerdown');
|
|
46
|
+
createRipple(click, true);
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
addClasses(center);
|
|
50
|
+
const rect = el.getBoundingClientRect();
|
|
51
|
+
const clientX = window.TouchEvent && e instanceof TouchEvent
|
|
52
|
+
? e.touches[0].clientX
|
|
53
|
+
: e.clientX;
|
|
54
|
+
const clientY = window.TouchEvent && e instanceof TouchEvent
|
|
55
|
+
? e.touches[0].clientY
|
|
56
|
+
: e.clientY;
|
|
57
|
+
const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
|
|
58
|
+
const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
|
|
59
|
+
const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
|
|
60
|
+
const ripple = document.createElement('div');
|
|
61
|
+
ripple.classList.add('kit-ripple');
|
|
62
|
+
ripple.style.left = `${clientX - rect.left - radius}px`;
|
|
63
|
+
ripple.style.top = `${clientY - rect.top - radius}px`;
|
|
64
|
+
ripple.style.width = ripple.style.height = `${radius * 2}px`;
|
|
65
|
+
rippleContainer.appendChild(ripple);
|
|
66
|
+
function removeRipple() {
|
|
67
|
+
if (ripple === null) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
ripple.style.opacity = '0';
|
|
71
|
+
setTimeout(() => {
|
|
72
|
+
ripple.remove();
|
|
73
|
+
}, options.duration || 1000);
|
|
74
|
+
cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
|
|
75
|
+
}
|
|
76
|
+
cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
|
|
77
|
+
}
|
|
78
|
+
triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === 'touchstart' }));
|
|
79
|
+
return {
|
|
80
|
+
destroy() {
|
|
81
|
+
triggerEvents.forEach((event) => {
|
|
82
|
+
el.removeEventListener(event, createRipple);
|
|
83
|
+
});
|
|
84
|
+
},
|
|
85
|
+
update(newOptions) {
|
|
86
|
+
options = newOptions;
|
|
87
|
+
setOptions(newOptions);
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
}
|
package/dist/preset.js
CHANGED
|
@@ -4,7 +4,7 @@ export const config = {
|
|
|
4
4
|
minify: false // true | false
|
|
5
5
|
},
|
|
6
6
|
theme: {
|
|
7
|
-
colorScheme: '
|
|
7
|
+
colorScheme: 'system', // 'light' | 'dark' | 'system'
|
|
8
8
|
colors: {
|
|
9
9
|
primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
|
|
10
10
|
'on-primary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
@@ -35,7 +35,7 @@ export const config = {
|
|
|
35
35
|
breakpoints: {
|
|
36
36
|
mobileBreakpoint: 'sm',
|
|
37
37
|
tabletBreakpoint: 'md',
|
|
38
|
-
laptopBreakpoint: '
|
|
38
|
+
laptopBreakpoint: 'lg',
|
|
39
39
|
thresholds: {
|
|
40
40
|
_default: 0, // 0px
|
|
41
41
|
xs: '28rem', //448px
|
package/dist/stores/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { type Writable } from 'svelte/store';
|
|
2
|
-
export declare const colorScheme: Writable<'
|
|
2
|
+
export declare const colorScheme: Writable<'system' | 'dark' | 'light'>;
|
|
3
|
+
export declare const colorSchemeSystem: Writable<'dark' | 'light'>;
|
|
3
4
|
export declare const modalOpen: Writable<boolean | 'persistent'>;
|
|
4
5
|
export declare const modalStack: Writable<string[]>;
|
|
5
|
-
export declare function updateThemeStore(update: '
|
|
6
|
-
export declare function setColorScheme(scheme: '
|
|
6
|
+
export declare function updateThemeStore(update: 'system' | 'dark' | 'light'): void;
|
|
7
|
+
export declare function setColorScheme(scheme: 'system' | 'dark' | 'light'): void;
|
|
7
8
|
export declare function setOpenModal(state: boolean | 'persistent'): void;
|
|
8
9
|
export declare const pushModal: (id: string) => void;
|
|
9
10
|
export declare const popModal: (id: string) => void;
|
package/dist/stores/index.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { disabledScroll } from '../internal/scroll.js';
|
|
2
2
|
import { writable } from 'svelte/store';
|
|
3
3
|
// states
|
|
4
|
-
const colorScheme_default = '
|
|
4
|
+
const colorScheme_default = 'system';
|
|
5
5
|
const modalOpen_default = false;
|
|
6
6
|
const isBrowser = typeof window !== 'undefined';
|
|
7
7
|
export const colorScheme = writable(colorScheme_default);
|
|
8
|
+
export const colorSchemeSystem = writable('light');
|
|
8
9
|
export const modalOpen = writable(modalOpen_default);
|
|
9
10
|
export const modalStack = writable([]);
|
|
10
11
|
export function updateThemeStore(update) {
|
|
11
12
|
colorScheme.update(() => {
|
|
12
13
|
if (isBrowser) {
|
|
13
14
|
const ref = document.documentElement.classList;
|
|
14
|
-
if (update === '
|
|
15
|
+
if (update === 'system')
|
|
15
16
|
ref.remove('light', 'dark');
|
|
16
17
|
else {
|
|
17
18
|
ref.remove(update === 'dark' ? 'light' : 'dark');
|
package/dist/style/animation.css
CHANGED
|
@@ -18,3 +18,43 @@
|
|
|
18
18
|
transform: rotate(380deg);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
+
|
|
22
|
+
.kit-ripple {
|
|
23
|
+
background-color: currentColor;
|
|
24
|
+
opacity: 0.1;
|
|
25
|
+
position: absolute;
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
pointer-events: none;
|
|
28
|
+
-webkit-transition: 0.6s;
|
|
29
|
+
transition: 0.6s;
|
|
30
|
+
-webkit-animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
|
|
31
|
+
animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.kit-ripple--center {
|
|
35
|
+
top: 50% !important;
|
|
36
|
+
left: 50% !important;
|
|
37
|
+
translate: -50% -50% !important;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.kit-ripple--effect {
|
|
41
|
+
position: absolute;
|
|
42
|
+
left: 0;
|
|
43
|
+
right: 0;
|
|
44
|
+
top: 0;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
background: none;
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
z-index: 999;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@keyframes lapikit-ripple {
|
|
53
|
+
from {
|
|
54
|
+
scale: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
to {
|
|
58
|
+
scale: 1;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -6,12 +6,12 @@ export const devices = (config) => {
|
|
|
6
6
|
tablet: config.breakpoints.tabletBreakpoint,
|
|
7
7
|
laptop: config.breakpoints.laptopBreakpoint
|
|
8
8
|
};
|
|
9
|
-
css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.
|
|
9
|
+
css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
|
|
10
10
|
css += `.hidden-mobile {\n`;
|
|
11
11
|
css += `display: none !important;\n`;
|
|
12
12
|
css += `}\n`;
|
|
13
13
|
css += `}\n`;
|
|
14
|
-
css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.
|
|
14
|
+
css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
|
|
15
15
|
css += `.display-mobile {\n`;
|
|
16
16
|
css += `display: none !important;\n`;
|
|
17
17
|
css += `}\n`;
|