@esportsplus/ui 0.20.8 → 0.20.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,16 +1,17 @@
|
|
|
1
|
+
import { Attributes } from '@esportsplus/template';
|
|
1
2
|
import './scss/index.scss';
|
|
2
3
|
declare const _default: {
|
|
3
4
|
(): ReturnType<(this: {
|
|
4
|
-
attributes?:
|
|
5
|
+
attributes?: Attributes | undefined;
|
|
5
6
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
6
|
-
}, attributes: Readonly<
|
|
7
|
+
}, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
7
8
|
(content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
|
|
8
|
-
attributes?:
|
|
9
|
+
attributes?: Attributes | undefined;
|
|
9
10
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
10
|
-
}, attributes: Readonly<
|
|
11
|
-
(attributes:
|
|
12
|
-
attributes?:
|
|
11
|
+
}, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
12
|
+
(attributes: Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
|
|
13
|
+
attributes?: Attributes | undefined;
|
|
13
14
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
14
|
-
}, attributes: Readonly<
|
|
15
|
+
}, attributes: Readonly<Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
15
16
|
};
|
|
16
17
|
export default _default;
|
|
@@ -1,36 +1,59 @@
|
|
|
1
1
|
import { reactive } from '@esportsplus/reactivity';
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
|
+
import { omit } from '@esportsplus/utilities';
|
|
3
4
|
import template from '../../components/template/index.js';
|
|
4
5
|
import './scss/index.scss';
|
|
6
|
+
const OMIT = ['loader-content', 'loader-logo'];
|
|
5
7
|
export default template.factory((attributes, content) => {
|
|
6
|
-
let
|
|
8
|
+
let a = {
|
|
9
|
+
class: () => state.load && 'loader--load'
|
|
10
|
+
}, state = reactive({
|
|
7
11
|
load: false,
|
|
12
|
+
remove: false,
|
|
8
13
|
scale: false
|
|
9
14
|
});
|
|
10
|
-
|
|
11
|
-
state.
|
|
12
|
-
|
|
13
|
-
return html `
|
|
14
|
-
<div class='loader' ${{ class: c }}>
|
|
15
|
-
<div class='loader' ${{ class: c }}>
|
|
16
|
-
<div class='loader-content'>
|
|
17
|
-
<div
|
|
18
|
-
class='loader-logo text --flex-center --text-uppercase --text-600'
|
|
19
|
-
style='color: var(--color-grey-500);'
|
|
20
|
-
${attributes}
|
|
21
|
-
${{
|
|
22
|
-
class: () => state.scale && 'loader-logo--scale',
|
|
23
|
-
onanimationend: ({ animationName: name }) => {
|
|
24
|
-
if (name === 'scale') {
|
|
25
|
-
state.load = true;
|
|
26
|
-
}
|
|
15
|
+
return () => {
|
|
16
|
+
if (state.remove) {
|
|
17
|
+
return;
|
|
27
18
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
19
|
+
let i = 0;
|
|
20
|
+
return html `
|
|
21
|
+
<div
|
|
22
|
+
class='loader'
|
|
23
|
+
onanimationend=${(e) => {
|
|
24
|
+
i++;
|
|
25
|
+
if (e.animationName === 'move' && i > 1) {
|
|
26
|
+
state.remove = true;
|
|
27
|
+
}
|
|
28
|
+
}}
|
|
29
|
+
${a}
|
|
30
|
+
${omit(attributes, OMIT)}
|
|
31
|
+
>
|
|
32
|
+
<div class='loader' ${a}>
|
|
33
|
+
${content && html `
|
|
34
|
+
<div class='loader-content' ${attributes['loader-content']}>
|
|
35
|
+
<div
|
|
36
|
+
class='loader-logo text --flex-center --text-uppercase --text-600'
|
|
37
|
+
style='color: var(--color-grey-500);'
|
|
38
|
+
${attributes['loader-logo']}
|
|
39
|
+
${{
|
|
40
|
+
class: () => state.scale && 'loader-logo--scale',
|
|
41
|
+
onanimationend: ({ animationName: name }) => {
|
|
42
|
+
if (name === 'scale') {
|
|
43
|
+
state.load = true;
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
onconnect: () => {
|
|
47
|
+
state.scale = true;
|
|
48
|
+
}
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
${content}
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
`}
|
|
32
55
|
</div>
|
|
33
56
|
</div>
|
|
34
|
-
|
|
35
|
-
|
|
57
|
+
`;
|
|
58
|
+
};
|
|
36
59
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.loader-logo{--size:10svh;--translateY:8px}.loader{
|
|
1
|
+
@layer components {.loader-logo{--size:10svh;--translateY:8px}.loader{opacity:1;pointer-events:none;visibility:visible;z-index:9999;background-color:#01020964;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.4s ease-in-out .2s both move}.loader--load .loader--load{animation:.4s ease-in-out both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both scale}@keyframes scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"@esportsplus/action": "^0.0.58",
|
|
5
5
|
"@esportsplus/queue": "^0.1.0",
|
|
6
6
|
"@esportsplus/reactivity": "^0.16.7",
|
|
7
|
-
"@esportsplus/template": "^0.22.
|
|
7
|
+
"@esportsplus/template": "^0.22.5",
|
|
8
8
|
"@esportsplus/utilities": "^0.22.1",
|
|
9
9
|
"modern-normalize": "^3.0.1"
|
|
10
10
|
},
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"private": false,
|
|
49
49
|
"sideEffects": false,
|
|
50
50
|
"type": "module",
|
|
51
|
-
"version": "0.20.
|
|
51
|
+
"version": "0.20.9",
|
|
52
52
|
"scripts": {
|
|
53
53
|
"build": "run-s build:vite build:ts",
|
|
54
54
|
"build:ts": "tsc && tsc-alias",
|
|
@@ -1,43 +1,76 @@
|
|
|
1
1
|
import { reactive } from '@esportsplus/reactivity';
|
|
2
|
-
import { html } from '@esportsplus/template';
|
|
2
|
+
import { html, Attributes } from '@esportsplus/template';
|
|
3
|
+
import { omit } from '@esportsplus/utilities'
|
|
3
4
|
import template from '~/components/template';
|
|
4
5
|
import './scss/index.scss';
|
|
5
6
|
|
|
6
7
|
|
|
8
|
+
type A = Attributes & {
|
|
9
|
+
'loader-content'?: Attributes,
|
|
10
|
+
'loader-logo'?: Attributes
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
const OMIT = ['loader-content', 'loader-logo'];
|
|
15
|
+
|
|
16
|
+
|
|
7
17
|
export default template.factory(
|
|
8
|
-
(attributes, content) => {
|
|
9
|
-
let
|
|
18
|
+
(attributes: A, content) => {
|
|
19
|
+
let a = {
|
|
20
|
+
class: () => state.load && 'loader--load'
|
|
21
|
+
},
|
|
10
22
|
state = reactive({
|
|
11
23
|
load: false,
|
|
24
|
+
remove: false,
|
|
12
25
|
scale: false
|
|
13
26
|
});
|
|
14
27
|
|
|
15
|
-
|
|
16
|
-
state.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
return () => {
|
|
29
|
+
if (state.remove) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
let i = 0;
|
|
34
|
+
|
|
35
|
+
return html`
|
|
36
|
+
<div
|
|
37
|
+
class='loader'
|
|
38
|
+
onanimationend=${(e: AnimationEvent) => {
|
|
39
|
+
i++;
|
|
40
|
+
|
|
41
|
+
if (e.animationName === 'move' && i > 1) {
|
|
42
|
+
state.remove = true;
|
|
43
|
+
}
|
|
44
|
+
}}
|
|
45
|
+
${a}
|
|
46
|
+
${omit(attributes, OMIT)}
|
|
47
|
+
>
|
|
48
|
+
<div class='loader' ${a}>
|
|
49
|
+
${content && html`
|
|
50
|
+
<div class='loader-content' ${attributes['loader-content']}>
|
|
51
|
+
<div
|
|
52
|
+
class='loader-logo text --flex-center --text-uppercase --text-600'
|
|
53
|
+
style='color: var(--color-grey-500);'
|
|
54
|
+
${attributes['loader-logo']}
|
|
55
|
+
${{
|
|
56
|
+
class: () => state.scale && 'loader-logo--scale',
|
|
57
|
+
onanimationend: ({ animationName: name }) => {
|
|
58
|
+
if (name === 'scale') {
|
|
59
|
+
state.load = true;
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
onconnect: () => {
|
|
63
|
+
state.scale = true;
|
|
64
|
+
}
|
|
65
|
+
}}
|
|
66
|
+
>
|
|
67
|
+
${content}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
`}
|
|
38
71
|
</div>
|
|
39
72
|
</div>
|
|
40
|
-
|
|
41
|
-
|
|
73
|
+
`;
|
|
74
|
+
}
|
|
42
75
|
}
|
|
43
76
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use 'variables';
|
|
2
2
|
|
|
3
3
|
.loader {
|
|
4
|
-
background-color:
|
|
4
|
+
background-color: #01020964;
|
|
5
5
|
bottom: 0;
|
|
6
6
|
left: 0;
|
|
7
7
|
position: fixed;
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
&--load {
|
|
18
|
-
animation: 0.
|
|
18
|
+
animation: 0.4s 0.2s ease-in-out 1 both move;
|
|
19
19
|
|
|
20
20
|
& & {
|
|
21
|
-
animation: 0.
|
|
21
|
+
animation: 0.4s ease-in-out 1 both move;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|