@esportsplus/ui 0.47.2 → 0.48.0
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/README.md +2 -3
- package/build/components/accordion/index.d.ts +16 -16
- package/build/components/accordion/index.js +13 -23
- package/build/components/alert/index.js +33 -64
- package/build/components/back/index.d.ts +8 -8
- package/build/components/back/index.js +8 -8
- package/build/components/button/index.d.ts +21 -21
- package/build/components/button/index.js +20 -36
- package/build/components/checkbox/index.js +19 -36
- package/build/components/clipboard/onclick.js +11 -21
- package/build/components/counter/index.js +28 -59
- package/build/components/ellipsis/index.js +5 -5
- package/build/components/form/action.js +8 -8
- package/build/components/highlight/index.d.ts +16 -16
- package/build/components/highlight/index.js +12 -22
- package/build/components/icon/index.d.ts +11 -11
- package/build/components/icon/index.js +6 -6
- package/build/components/input/index.js +16 -32
- package/build/components/loader/index.d.ts +16 -16
- package/build/components/loader/index.js +26 -48
- package/build/components/loading/index.js +5 -5
- package/build/components/range/index.js +19 -42
- package/build/components/scrollbar/index.d.ts +11 -11
- package/build/components/scrollbar/index.js +19 -35
- package/build/components/select/index.js +34 -63
- package/build/components/textarea/index.js +16 -32
- package/build/components/tooltip/menu.d.ts +11 -11
- package/build/components/tooltip/menu.js +20 -20
- package/build/components/tooltip/onclick.d.ts +1101 -1101
- package/build/components/tooltip/onclick.js +10 -22
- package/build/components/tooltip/onhover.d.ts +16 -16
- package/build/components/tooltip/onhover.js +11 -23
- package/build/components/typewriter/index.d.ts +11 -11
- package/build/components/typewriter/index.js +10 -22
- package/package.json +3 -4
- package/src/components/accordion/index.ts +1 -2
- package/src/components/alert/index.ts +1 -2
- package/src/components/button/index.ts +1 -2
- package/src/components/checkbox/index.ts +1 -2
- package/src/components/clipboard/onclick.ts +1 -2
- package/src/components/counter/index.ts +1 -2
- package/src/components/highlight/index.ts +1 -2
- package/src/components/input/index.ts +1 -2
- package/src/components/loader/index.ts +1 -2
- package/src/components/range/index.ts +1 -2
- package/src/components/scrollbar/index.ts +1 -2
- package/src/components/select/index.ts +1 -2
- package/src/components/textarea/index.ts +1 -2
- package/src/components/tooltip/onclick.ts +1 -2
- package/src/components/tooltip/onhover.ts +1 -2
- package/src/components/typewriter/index.ts +1 -2
package/README.md
CHANGED
|
@@ -10,8 +10,7 @@ pnpm add @esportsplus/ui
|
|
|
10
10
|
|
|
11
11
|
## Dependencies
|
|
12
12
|
|
|
13
|
-
- `@esportsplus/template` - Tagged template literals with compile-time transforms
|
|
14
|
-
- `@esportsplus/reactivity` - Reactive state management
|
|
13
|
+
- `@esportsplus/template` - Tagged template literals with compile-time transforms and reactive state management
|
|
15
14
|
- `@esportsplus/action` - Response/error handling
|
|
16
15
|
- `@esportsplus/utilities` - Core utilities
|
|
17
16
|
|
|
@@ -124,7 +123,7 @@ component({ class: 'custom' }, html`<span>Content</span>`)
|
|
|
124
123
|
Components can accept and return reactive state:
|
|
125
124
|
|
|
126
125
|
```typescript
|
|
127
|
-
import { reactive } from '@esportsplus/
|
|
126
|
+
import { reactive } from '@esportsplus/template';
|
|
128
127
|
|
|
129
128
|
let state = reactive({ active: false });
|
|
130
129
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
2
|
import './scss/index.scss';
|
|
3
3
|
declare const _default: {
|
|
4
4
|
(): ReturnType<(this: {
|
|
5
|
-
attributes?:
|
|
6
|
-
content?:
|
|
7
|
-
}, attributes: Readonly<
|
|
8
|
-
<T extends
|
|
9
|
-
attributes?:
|
|
10
|
-
content?:
|
|
11
|
-
}, attributes: Readonly<
|
|
12
|
-
<T extends
|
|
13
|
-
attributes?:
|
|
14
|
-
content?:
|
|
15
|
-
}, attributes: Readonly<
|
|
16
|
-
(attributes:
|
|
17
|
-
attributes?:
|
|
18
|
-
content?:
|
|
19
|
-
}, attributes: Readonly<
|
|
5
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
6
|
+
content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
|
|
7
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
8
|
+
<T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
|
|
9
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
10
|
+
content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
|
|
11
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
12
|
+
<T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>(content: T): ReturnType<(this: {
|
|
13
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
14
|
+
content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
|
|
15
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
16
|
+
(attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>): ReturnType<(this: {
|
|
17
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
18
|
+
content?: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>;
|
|
19
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
20
20
|
};
|
|
21
21
|
export default _default;
|
|
@@ -1,42 +1,32 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
|
+
import { reactive } from '@esportsplus/template';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
4
|
import template from '../../components/template/index.js';
|
|
5
5
|
import './scss/index.scss';
|
|
6
|
-
const
|
|
7
|
-
class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50002 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
|
|
8
|
-
#active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](0);
|
|
9
|
-
constructor() {
|
|
10
|
-
super(null);
|
|
11
|
-
}
|
|
12
|
-
get active() {
|
|
13
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
|
|
14
|
-
}
|
|
15
|
-
set active(_v0) {
|
|
16
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
6
|
+
const template_ed8f776bb07a460eadcbcfe445975fdf3 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div><!--$--></div>`);
|
|
19
7
|
const OMIT = ['state'];
|
|
20
8
|
let key = Symbol();
|
|
21
9
|
export default template.factory(function (attributes, content) {
|
|
22
|
-
let ref, state = attributes.state ||
|
|
10
|
+
let ref, state = attributes.state || reactive({
|
|
11
|
+
active: 0
|
|
12
|
+
});
|
|
23
13
|
return (() => {
|
|
24
|
-
let
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
let root_ed8f776bb07a460eadcbcfe445975fdf2 = template_ed8f776bb07a460eadcbcfe445975fdf3(), element_ed8f776bb07a460eadcbcfe445975fdf4 = root_ed8f776bb07a460eadcbcfe445975fdf2.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf5 = element_ed8f776bb07a460eadcbcfe445975fdf4.firstChild;
|
|
15
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf4, omit(attributes, OMIT));
|
|
16
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf4, '', () => {
|
|
27
17
|
return state.active && '--active';
|
|
28
18
|
});
|
|
29
|
-
|
|
19
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf4, (element) => {
|
|
30
20
|
(ref = element)[key] = state;
|
|
31
21
|
});
|
|
32
|
-
|
|
22
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf4, '', () => {
|
|
33
23
|
let parent = ref.closest('accordion');
|
|
34
24
|
if (parent && key in parent) {
|
|
35
25
|
parent[key].active = (+parent[key].active) + 1;
|
|
36
26
|
}
|
|
37
27
|
return state.active && `--max-height: ${ref.scrollHeight}`;
|
|
38
28
|
});
|
|
39
|
-
|
|
40
|
-
return
|
|
29
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf5, content);
|
|
30
|
+
return root_ed8f776bb07a460eadcbcfe445975fdf2;
|
|
41
31
|
})();
|
|
42
32
|
});
|
|
@@ -1,55 +1,19 @@
|
|
|
1
1
|
import '@esportsplus/vite/global.d.ts';
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
4
|
-
import { svg } from '@esportsplus/template';
|
|
2
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
3
|
+
import { reactive, svg } from '@esportsplus/template';
|
|
5
4
|
import { omit } from '@esportsplus/utilities';
|
|
6
5
|
import { icon } from '@esportsplus/ui';
|
|
7
6
|
import check from './svg/check.svg';
|
|
8
7
|
import close from './svg/close.svg';
|
|
9
8
|
import e from './svg/error.svg';
|
|
10
9
|
import './scss/index.scss';
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
10
|
+
const template_ed8f776bb07a460eadcbcfe445975fdf7 = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='--flex-vertical'><!--$--></div>`);
|
|
11
|
+
const template_ed8f776bb07a460eadcbcfe445975fdfb = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<p><!--$--></p>`);
|
|
12
|
+
const template_ed8f776bb07a460eadcbcfe445975fdff = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div class='--flex-start'><!--$--></div>`);
|
|
13
|
+
const template_ed8f776bb07a460eadcbcfe445975fdfi = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
|
|
15
14
|
class='alert anchor anchor--n --flex-row'><!--$--><div
|
|
16
15
|
class='alert-messages --flex-column --flex-fill'><!--$--></div><div class="--flex-vertical"><div
|
|
17
16
|
class='alert-close button --padding-300'><div class="icon" style='--size: 14px;'><!--$--></div></div></div></div>`);
|
|
18
|
-
class ReactiveObject_a6aeaec5a75649bd8ec693d5230c50007 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
|
|
19
|
-
#active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
|
|
20
|
-
#messages;
|
|
21
|
-
#rerender = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](0);
|
|
22
|
-
#type;
|
|
23
|
-
constructor(_p0, _p1) {
|
|
24
|
-
super(null);
|
|
25
|
-
this.#messages = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](_p0);
|
|
26
|
-
this.#type = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](_p1);
|
|
27
|
-
}
|
|
28
|
-
get active() {
|
|
29
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
|
|
30
|
-
}
|
|
31
|
-
set active(_v0) {
|
|
32
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
|
|
33
|
-
}
|
|
34
|
-
get messages() {
|
|
35
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#messages);
|
|
36
|
-
}
|
|
37
|
-
set messages(_v1) {
|
|
38
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#messages, _v1);
|
|
39
|
-
}
|
|
40
|
-
get rerender() {
|
|
41
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#rerender);
|
|
42
|
-
}
|
|
43
|
-
set rerender(_v2) {
|
|
44
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#rerender, _v2);
|
|
45
|
-
}
|
|
46
|
-
get type() {
|
|
47
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#type);
|
|
48
|
-
}
|
|
49
|
-
set type(_v3) {
|
|
50
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#type, _v3);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
17
|
const OMIT = ['alert-close', 'alert-messages', 'alert-message'];
|
|
54
18
|
let modifiers = {
|
|
55
19
|
error: 'red',
|
|
@@ -96,7 +60,12 @@ function deactivate(state) {
|
|
|
96
60
|
}, timeout);
|
|
97
61
|
}
|
|
98
62
|
export default (attributes) => {
|
|
99
|
-
let state =
|
|
63
|
+
let state = reactive({
|
|
64
|
+
active: false,
|
|
65
|
+
messages: new Set(),
|
|
66
|
+
rerender: 0,
|
|
67
|
+
type: ''
|
|
68
|
+
});
|
|
100
69
|
const error = (messages, seconds = 0) => activate('error', messages, seconds, state);
|
|
101
70
|
error.response = (response) => {
|
|
102
71
|
if (response.ok) {
|
|
@@ -111,41 +80,41 @@ export default (attributes) => {
|
|
|
111
80
|
};
|
|
112
81
|
return {
|
|
113
82
|
content: (() => {
|
|
114
|
-
let
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
new
|
|
83
|
+
let root_ed8f776bb07a460eadcbcfe445975fdfh = template_ed8f776bb07a460eadcbcfe445975fdfi(), element_ed8f776bb07a460eadcbcfe445975fdfj = root_ed8f776bb07a460eadcbcfe445975fdfh.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfk = element_ed8f776bb07a460eadcbcfe445975fdfj.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfl = element_ed8f776bb07a460eadcbcfe445975fdfj.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdfm = element_ed8f776bb07a460eadcbcfe445975fdfl.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfn = element_ed8f776bb07a460eadcbcfe445975fdfl.nextElementSibling.firstElementChild, element_ed8f776bb07a460eadcbcfe445975fdfo = element_ed8f776bb07a460eadcbcfe445975fdfn.firstElementChild.firstChild;
|
|
84
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdfj, ' --flex-row', () => state.active && '--active');
|
|
85
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfj, omit(attributes, OMIT));
|
|
86
|
+
new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdfk, () => {
|
|
118
87
|
let type = state.type;
|
|
119
88
|
return (() => {
|
|
120
|
-
let
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return
|
|
89
|
+
let root_ed8f776bb07a460eadcbcfe445975fdf6 = template_ed8f776bb07a460eadcbcfe445975fdf7(), element_ed8f776bb07a460eadcbcfe445975fdf8 = root_ed8f776bb07a460eadcbcfe445975fdf6.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf9 = element_ed8f776bb07a460eadcbcfe445975fdf8.firstChild;
|
|
90
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setStyle(element_ed8f776bb07a460eadcbcfe445975fdf8, ';', `--color: var(--color-${modifiers[type]}-400);`);
|
|
91
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdf9, icon({ class: '--size-500' }, type === 'error' ? e : check));
|
|
92
|
+
return root_ed8f776bb07a460eadcbcfe445975fdf6;
|
|
124
93
|
})();
|
|
125
94
|
});
|
|
126
|
-
|
|
127
|
-
new
|
|
95
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfl, attributes['alert-messages']);
|
|
96
|
+
new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdfm, () => {
|
|
128
97
|
let message = attributes['alert-message'];
|
|
129
98
|
return state.rerender && [...state.messages].map((content) => {
|
|
130
99
|
if (typeof content === 'string') {
|
|
131
100
|
return (() => {
|
|
132
|
-
let
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
return
|
|
101
|
+
let root_ed8f776bb07a460eadcbcfe445975fdfa = template_ed8f776bb07a460eadcbcfe445975fdfb(), element_ed8f776bb07a460eadcbcfe445975fdfc = root_ed8f776bb07a460eadcbcfe445975fdfa.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfd = element_ed8f776bb07a460eadcbcfe445975fdfc.firstChild;
|
|
102
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfc, message);
|
|
103
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfd, content);
|
|
104
|
+
return root_ed8f776bb07a460eadcbcfe445975fdfa;
|
|
136
105
|
})();
|
|
137
106
|
}
|
|
138
107
|
return (() => {
|
|
139
|
-
let
|
|
140
|
-
|
|
141
|
-
return
|
|
108
|
+
let root_ed8f776bb07a460eadcbcfe445975fdfe = template_ed8f776bb07a460eadcbcfe445975fdff(), element_ed8f776bb07a460eadcbcfe445975fdfg = root_ed8f776bb07a460eadcbcfe445975fdfe.firstChild.firstChild;
|
|
109
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfg, content);
|
|
110
|
+
return root_ed8f776bb07a460eadcbcfe445975fdfe;
|
|
142
111
|
})();
|
|
143
112
|
});
|
|
144
113
|
});
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
return
|
|
114
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfn, 'click', () => deactivate(state));
|
|
115
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfn, attributes['alert-close']);
|
|
116
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfo, svg.sprite(close));
|
|
117
|
+
return root_ed8f776bb07a460eadcbcfe445975fdfh;
|
|
149
118
|
})(),
|
|
150
119
|
deactivate: () => deactivate(state),
|
|
151
120
|
error,
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
2
|
import { Attributes } from '@esportsplus/template';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
declare const _default: {
|
|
5
5
|
(): ReturnType<(this: {
|
|
6
6
|
attributes?: Attributes;
|
|
7
|
-
}, attributes: Readonly<
|
|
8
|
-
<T extends
|
|
7
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
8
|
+
<T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
|
|
9
9
|
attributes?: Attributes;
|
|
10
|
-
}, attributes: Readonly<
|
|
11
|
-
<T extends
|
|
10
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
11
|
+
<T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>(content: T): ReturnType<(this: {
|
|
12
12
|
attributes?: Attributes;
|
|
13
|
-
}, attributes: Readonly<
|
|
14
|
-
(attributes:
|
|
13
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
14
|
+
(attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>): ReturnType<(this: {
|
|
15
15
|
attributes?: Attributes;
|
|
16
|
-
}, attributes: Readonly<
|
|
16
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>) => template_ed8f776bb07a460eadcbcfe445975fdf1.Renderable<any>>;
|
|
17
17
|
};
|
|
18
18
|
export default _default;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
2
|
import icon from '../../components/icon/index.js';
|
|
3
3
|
import template from '../../components/template/index.js';
|
|
4
4
|
import arrow from './svg/arrow.svg';
|
|
5
5
|
import './scss/index.scss';
|
|
6
|
-
const
|
|
6
|
+
const template_ed8f776bb07a460eadcbcfe445975fdfq = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<a
|
|
7
7
|
class='back link --padding-0px --flex-vertical'><!--$--><!--$--></a>`);
|
|
8
8
|
export default template.factory(function (attributes, content) {
|
|
9
9
|
return (() => {
|
|
10
|
-
let
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return
|
|
10
|
+
let root_ed8f776bb07a460eadcbcfe445975fdfp = template_ed8f776bb07a460eadcbcfe445975fdfq(), element_ed8f776bb07a460eadcbcfe445975fdfr = root_ed8f776bb07a460eadcbcfe445975fdfp.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfs = element_ed8f776bb07a460eadcbcfe445975fdfr.firstChild, element_ed8f776bb07a460eadcbcfe445975fdft = element_ed8f776bb07a460eadcbcfe445975fdfs.nextSibling;
|
|
11
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfr, this.attributes);
|
|
12
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfr, attributes);
|
|
13
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdfs, icon({ class: 'back-arrow --margin-right --margin-200' }, arrow));
|
|
14
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.slot(element_ed8f776bb07a460eadcbcfe445975fdft, content);
|
|
15
|
+
return root_ed8f776bb07a460eadcbcfe445975fdfp;
|
|
16
16
|
})();
|
|
17
17
|
});
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
2
|
import { Renderable } from '@esportsplus/template';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
declare const hold: {
|
|
5
5
|
(): ReturnType<(this: {
|
|
6
|
-
attributes?:
|
|
6
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
7
7
|
content?: ((state: {
|
|
8
8
|
holding: boolean;
|
|
9
9
|
complete: boolean;
|
|
10
10
|
}) => Renderable<any>) | undefined;
|
|
11
|
-
}, attributes: Readonly<
|
|
11
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
12
12
|
holding: boolean;
|
|
13
13
|
complete: boolean;
|
|
14
14
|
}) => Renderable<any>) => Renderable<any>>;
|
|
15
|
-
<T extends
|
|
16
|
-
attributes?:
|
|
15
|
+
<T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
|
|
16
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
17
17
|
content?: ((state: {
|
|
18
18
|
holding: boolean;
|
|
19
19
|
complete: boolean;
|
|
20
20
|
}) => Renderable<any>) | undefined;
|
|
21
|
-
}, attributes: Readonly<
|
|
21
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
22
22
|
holding: boolean;
|
|
23
23
|
complete: boolean;
|
|
24
24
|
}) => Renderable<any>) => Renderable<any>>;
|
|
@@ -26,25 +26,25 @@ declare const hold: {
|
|
|
26
26
|
holding: boolean;
|
|
27
27
|
complete: boolean;
|
|
28
28
|
}) => Renderable<any>>(content: T): ReturnType<(this: {
|
|
29
|
-
attributes?:
|
|
29
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
30
30
|
content?: ((state: {
|
|
31
31
|
holding: boolean;
|
|
32
32
|
complete: boolean;
|
|
33
33
|
}) => Renderable<any>) | undefined;
|
|
34
|
-
}, attributes: Readonly<
|
|
34
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
35
35
|
holding: boolean;
|
|
36
36
|
complete: boolean;
|
|
37
37
|
}) => Renderable<any>) => Renderable<any>>;
|
|
38
|
-
(attributes:
|
|
38
|
+
(attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: (state: {
|
|
39
39
|
holding: boolean;
|
|
40
40
|
complete: boolean;
|
|
41
41
|
}) => Renderable<any>): ReturnType<(this: {
|
|
42
|
-
attributes?:
|
|
42
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
43
43
|
content?: ((state: {
|
|
44
44
|
holding: boolean;
|
|
45
45
|
complete: boolean;
|
|
46
46
|
}) => Renderable<any>) | undefined;
|
|
47
|
-
}, attributes: Readonly<
|
|
47
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
48
48
|
holding: boolean;
|
|
49
49
|
complete: boolean;
|
|
50
50
|
}) => Renderable<any>) => Renderable<any>>;
|
|
@@ -52,22 +52,22 @@ declare const hold: {
|
|
|
52
52
|
declare const _default: {
|
|
53
53
|
hold: {
|
|
54
54
|
(): ReturnType<(this: {
|
|
55
|
-
attributes?:
|
|
55
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
56
56
|
content?: ((state: {
|
|
57
57
|
holding: boolean;
|
|
58
58
|
complete: boolean;
|
|
59
59
|
}) => Renderable<any>) | undefined;
|
|
60
|
-
}, attributes: Readonly<
|
|
60
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
61
61
|
holding: boolean;
|
|
62
62
|
complete: boolean;
|
|
63
63
|
}) => Renderable<any>) => Renderable<any>>;
|
|
64
|
-
<T extends
|
|
65
|
-
attributes?:
|
|
64
|
+
<T extends template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>(attributes: T): ReturnType<(this: {
|
|
65
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
66
66
|
content?: ((state: {
|
|
67
67
|
holding: boolean;
|
|
68
68
|
complete: boolean;
|
|
69
69
|
}) => Renderable<any>) | undefined;
|
|
70
|
-
}, attributes: Readonly<
|
|
70
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
71
71
|
holding: boolean;
|
|
72
72
|
complete: boolean;
|
|
73
73
|
}) => Renderable<any>) => Renderable<any>>;
|
|
@@ -75,25 +75,25 @@ declare const _default: {
|
|
|
75
75
|
holding: boolean;
|
|
76
76
|
complete: boolean;
|
|
77
77
|
}) => Renderable<any>>(content: T): ReturnType<(this: {
|
|
78
|
-
attributes?:
|
|
78
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
79
79
|
content?: ((state: {
|
|
80
80
|
holding: boolean;
|
|
81
81
|
complete: boolean;
|
|
82
82
|
}) => Renderable<any>) | undefined;
|
|
83
|
-
}, attributes: Readonly<
|
|
83
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
84
84
|
holding: boolean;
|
|
85
85
|
complete: boolean;
|
|
86
86
|
}) => Renderable<any>) => Renderable<any>>;
|
|
87
|
-
(attributes:
|
|
87
|
+
(attributes: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes, content: (state: {
|
|
88
88
|
holding: boolean;
|
|
89
89
|
complete: boolean;
|
|
90
90
|
}) => Renderable<any>): ReturnType<(this: {
|
|
91
|
-
attributes?:
|
|
91
|
+
attributes?: template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes | undefined;
|
|
92
92
|
content?: ((state: {
|
|
93
93
|
holding: boolean;
|
|
94
94
|
complete: boolean;
|
|
95
95
|
}) => Renderable<any>) | undefined;
|
|
96
|
-
}, attributes: Readonly<
|
|
96
|
+
}, attributes: Readonly<template_ed8f776bb07a460eadcbcfe445975fdf1.Attributes>, content: (state: {
|
|
97
97
|
holding: boolean;
|
|
98
98
|
complete: boolean;
|
|
99
99
|
}) => Renderable<any>) => Renderable<any>>;
|
|
@@ -1,61 +1,45 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
|
+
import { reactive } from '@esportsplus/template';
|
|
3
3
|
import template from '../template/index.js';
|
|
4
4
|
import './scss/index.scss';
|
|
5
|
-
const
|
|
5
|
+
const template_ed8f776bb07a460eadcbcfe445975fdfv = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div
|
|
6
6
|
class='button '><!--$--></div>`);
|
|
7
|
-
class ReactiveObject_a6aeaec5a75649bd8ec693d5230c5000w extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
|
|
8
|
-
#complete = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
|
|
9
|
-
#holding = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
|
|
10
|
-
constructor() {
|
|
11
|
-
super(null);
|
|
12
|
-
}
|
|
13
|
-
get complete() {
|
|
14
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#complete);
|
|
15
|
-
}
|
|
16
|
-
set complete(_v0) {
|
|
17
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#complete, _v0);
|
|
18
|
-
}
|
|
19
|
-
get holding() {
|
|
20
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#holding);
|
|
21
|
-
}
|
|
22
|
-
set holding(_v1) {
|
|
23
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#holding, _v1);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
7
|
const hold = template.factory(function (attributes, content) {
|
|
27
8
|
let end = () => {
|
|
28
9
|
if (!state.complete) {
|
|
29
10
|
state.holding = false;
|
|
30
11
|
}
|
|
31
|
-
}, state =
|
|
12
|
+
}, state = reactive({
|
|
13
|
+
complete: false,
|
|
14
|
+
holding: false
|
|
15
|
+
});
|
|
32
16
|
return (() => {
|
|
33
|
-
let
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
17
|
+
let root_ed8f776bb07a460eadcbcfe445975fdfu = template_ed8f776bb07a460eadcbcfe445975fdfv(), element_ed8f776bb07a460eadcbcfe445975fdfw = root_ed8f776bb07a460eadcbcfe445975fdfu.firstChild, element_ed8f776bb07a460eadcbcfe445975fdfx = element_ed8f776bb07a460eadcbcfe445975fdfw.firstChild;
|
|
18
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdfw, ' ', () => state.holding && 'button--holding');
|
|
19
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdfw, ' ', () => state.complete && '--active');
|
|
20
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'mousedown', (e) => {
|
|
37
21
|
e.preventDefault();
|
|
38
22
|
state.holding = true;
|
|
39
23
|
});
|
|
40
|
-
|
|
41
|
-
|
|
24
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdfw, attributes);
|
|
25
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'animationend', (e) => {
|
|
42
26
|
if (e.animationName === 'buttonHolding') {
|
|
43
27
|
state.complete = true;
|
|
44
28
|
}
|
|
45
29
|
});
|
|
46
|
-
|
|
47
|
-
|
|
30
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'click', () => { });
|
|
31
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'mousedown', (e) => {
|
|
48
32
|
e.preventDefault();
|
|
49
33
|
state.holding = true;
|
|
50
34
|
});
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
35
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'mouseup', end);
|
|
36
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'touchend', end);
|
|
37
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdfw, 'touchstart', (e) => {
|
|
54
38
|
e.preventDefault();
|
|
55
39
|
state.holding = true;
|
|
56
40
|
});
|
|
57
|
-
new
|
|
58
|
-
return
|
|
41
|
+
new template_ed8f776bb07a460eadcbcfe445975fdf1.EffectSlot(element_ed8f776bb07a460eadcbcfe445975fdfx, () => content(state));
|
|
42
|
+
return root_ed8f776bb07a460eadcbcfe445975fdfu;
|
|
59
43
|
})();
|
|
60
44
|
});
|
|
61
45
|
export default { hold };
|
|
@@ -1,51 +1,34 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { root } from '@esportsplus/
|
|
3
|
-
import * as template_a6aeaec5a75649bd8ec693d5230c50001 from '@esportsplus/template';
|
|
1
|
+
import * as template_ed8f776bb07a460eadcbcfe445975fdf1 from '@esportsplus/template';
|
|
2
|
+
import { reactive, root } from '@esportsplus/template';
|
|
4
3
|
import { omit } from '@esportsplus/utilities';
|
|
5
4
|
import form from '../../components/form/index.js';
|
|
6
5
|
import './scss/index.scss';
|
|
7
|
-
const
|
|
8
|
-
class ReactiveObject_a6aeaec5a75649bd8ec693d5230c500011 extends reactivity_a6aeaec5a75649bd8ec693d5230c50000.ReactiveObject {
|
|
9
|
-
#active = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL](false);
|
|
10
|
-
#error = this[reactivity_a6aeaec5a75649bd8ec693d5230c50000.SIGNAL]('');
|
|
11
|
-
constructor() {
|
|
12
|
-
super(null);
|
|
13
|
-
}
|
|
14
|
-
get active() {
|
|
15
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#active);
|
|
16
|
-
}
|
|
17
|
-
set active(_v0) {
|
|
18
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#active, _v0);
|
|
19
|
-
}
|
|
20
|
-
get error() {
|
|
21
|
-
return reactivity_a6aeaec5a75649bd8ec693d5230c50000.read(this.#error);
|
|
22
|
-
}
|
|
23
|
-
set error(_v1) {
|
|
24
|
-
reactivity_a6aeaec5a75649bd8ec693d5230c50000.write(this.#error, _v1);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
6
|
+
const template_ed8f776bb07a460eadcbcfe445975fdfz = template_ed8f776bb07a460eadcbcfe445975fdf1.template(`<div><input></div>`);
|
|
27
7
|
const OMIT = ['checked', 'value'];
|
|
28
8
|
const factory = (type) => {
|
|
29
9
|
function template(attributes) {
|
|
30
|
-
let state = attributes?.state ||
|
|
10
|
+
let state = attributes?.state || reactive({
|
|
11
|
+
active: false,
|
|
12
|
+
error: ''
|
|
13
|
+
});
|
|
31
14
|
if (attributes?.checked) {
|
|
32
15
|
state.active = true;
|
|
33
16
|
}
|
|
34
17
|
return (() => {
|
|
35
|
-
let
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
18
|
+
let root_ed8f776bb07a460eadcbcfe445975fdfy = template_ed8f776bb07a460eadcbcfe445975fdfz(), element_ed8f776bb07a460eadcbcfe445975fdf10 = root_ed8f776bb07a460eadcbcfe445975fdfy.firstChild, element_ed8f776bb07a460eadcbcfe445975fdf11 = element_ed8f776bb07a460eadcbcfe445975fdf10.firstElementChild;
|
|
19
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf10, ' ', type);
|
|
20
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf10, ' ', () => state.active && '--active');
|
|
21
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf10, this?.attributes && omit(this.attributes, OMIT));
|
|
22
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperties(element_ed8f776bb07a460eadcbcfe445975fdf10, attributes && omit(attributes, OMIT));
|
|
23
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf11, 'checked', attributes?.checked || root(() => state.active));
|
|
24
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setClass(element_ed8f776bb07a460eadcbcfe445975fdf11, '', `${type}-tag`);
|
|
25
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.delegate(element_ed8f776bb07a460eadcbcfe445975fdf11, 'change', (e) => {
|
|
43
26
|
state.active = e.target.checked;
|
|
44
27
|
});
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return
|
|
28
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.onrender(element_ed8f776bb07a460eadcbcfe445975fdf11, form.input.onrender(state));
|
|
29
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf11, 'type', type === 'radio' ? 'radio' : 'checkbox');
|
|
30
|
+
template_ed8f776bb07a460eadcbcfe445975fdf1.setProperty(element_ed8f776bb07a460eadcbcfe445975fdf11, 'value', attributes?.value || 1);
|
|
31
|
+
return root_ed8f776bb07a460eadcbcfe445975fdfy;
|
|
49
32
|
})();
|
|
50
33
|
}
|
|
51
34
|
return template;
|