@esportsplus/ui 0.50.13 → 0.51.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/build/components/accordion/index.d.ts +16 -16
- package/build/components/accordion/index.js +17 -17
- package/build/components/alert/index.js +41 -41
- 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 +23 -23
- package/build/components/checkbox/index.js +23 -23
- package/build/components/checkbox/scss/index.scss +1 -1
- package/build/components/clipboard/onclick.js +13 -13
- package/build/components/counter/index.js +34 -34
- package/build/components/ellipsis/index.js +5 -5
- package/build/components/form/action.js +8 -8
- package/build/components/frame/scss/index.scss +1 -1
- package/build/components/highlight/index.d.ts +16 -16
- package/build/components/highlight/index.js +15 -15
- package/build/components/icon/index.d.ts +11 -11
- package/build/components/icon/index.js +6 -6
- package/build/components/input/index.js +20 -20
- package/build/components/loader/index.d.ts +16 -16
- package/build/components/loader/index.js +33 -33
- package/build/components/loading/index.js +5 -5
- package/build/components/range/index.js +25 -25
- package/build/components/scrollbar/index.d.ts +11 -11
- package/build/components/scrollbar/index.js +24 -24
- package/build/components/select/index.js +40 -40
- package/build/components/textarea/index.js +20 -20
- 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 +14 -14
- package/build/components/tooltip/onhover.d.ts +16 -16
- package/build/components/tooltip/onhover.js +15 -15
- package/build/components/typewriter/index.d.ts +11 -11
- package/build/components/typewriter/index.js +14 -14
- package/package.json +1 -1
- package/src/components/checkbox/scss/variables.scss +9 -7
- package/src/components/frame/scss/index.scss +24 -0
- package/src/components/frame/scss/variables.scss +4 -0
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
|
|
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
|
-
const
|
|
8
|
-
class
|
|
9
|
-
#load = this[
|
|
10
|
-
#remove = this[
|
|
11
|
-
#scale = this[
|
|
6
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e22v = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='loader-content'><div class='loader-logo text --flex-center --text-uppercase --text-600' style='color: var(--color-grey-500);'><!--$--></div></div>`);
|
|
7
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e232 = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='loader '><div class='loader '><!--$--></div></div>`);
|
|
8
|
+
class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e22t extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
|
|
9
|
+
#load = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
10
|
+
#remove = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
11
|
+
#scale = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
12
12
|
constructor() {
|
|
13
13
|
super(null);
|
|
14
14
|
}
|
|
15
15
|
get load() {
|
|
16
|
-
return
|
|
16
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#load);
|
|
17
17
|
}
|
|
18
18
|
set load(_v0) {
|
|
19
|
-
|
|
19
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#load, _v0);
|
|
20
20
|
}
|
|
21
21
|
get remove() {
|
|
22
|
-
return
|
|
22
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#remove);
|
|
23
23
|
}
|
|
24
24
|
set remove(_v1) {
|
|
25
|
-
|
|
25
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#remove, _v1);
|
|
26
26
|
}
|
|
27
27
|
get scale() {
|
|
28
|
-
return
|
|
28
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#scale);
|
|
29
29
|
}
|
|
30
30
|
set scale(_v2) {
|
|
31
|
-
|
|
31
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#scale, _v2);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
const OMIT = ['loader-content', 'loader-logo'];
|
|
35
35
|
export default template.factory((attributes, content) => {
|
|
36
|
-
let state = new
|
|
36
|
+
let state = new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e22t();
|
|
37
37
|
return () => {
|
|
38
38
|
if (state.remove) {
|
|
39
39
|
return;
|
|
40
40
|
}
|
|
41
41
|
let i = 0;
|
|
42
42
|
return (() => {
|
|
43
|
-
let
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e231 = template_bfe0e7193abc4b26be22b3bb5499d3e232(), element_bfe0e7193abc4b26be22b3bb5499d3e233 = root_bfe0e7193abc4b26be22b3bb5499d3e231.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e234 = element_bfe0e7193abc4b26be22b3bb5499d3e233.firstElementChild, element_bfe0e7193abc4b26be22b3bb5499d3e235 = element_bfe0e7193abc4b26be22b3bb5499d3e234.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e236 = { "class": "loader" }, attributes_bfe0e7193abc4b26be22b3bb5499d3e237 = { "class": "loader" };
|
|
44
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e233, 'class', () => state.load && 'loader--load', attributes_bfe0e7193abc4b26be22b3bb5499d3e236);
|
|
45
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e233, 'animationend', (e) => {
|
|
46
46
|
i++;
|
|
47
47
|
if (e.animationName === 'move' && i > 1) {
|
|
48
48
|
state.remove = true;
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e233, omit(attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e236);
|
|
52
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e234, 'class', () => state.load && 'loader--load', attributes_bfe0e7193abc4b26be22b3bb5499d3e237);
|
|
53
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e234, !content && {
|
|
54
54
|
onconnect: () => {
|
|
55
55
|
state.load = true;
|
|
56
56
|
}
|
|
57
|
-
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
let
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
57
|
+
}, attributes_bfe0e7193abc4b26be22b3bb5499d3e237);
|
|
58
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e234, attributes.loader, attributes_bfe0e7193abc4b26be22b3bb5499d3e237);
|
|
59
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.slot(element_bfe0e7193abc4b26be22b3bb5499d3e235, content && (() => {
|
|
60
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e22u = template_bfe0e7193abc4b26be22b3bb5499d3e22v(), element_bfe0e7193abc4b26be22b3bb5499d3e22w = root_bfe0e7193abc4b26be22b3bb5499d3e22u.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e22x = element_bfe0e7193abc4b26be22b3bb5499d3e22w.firstElementChild, element_bfe0e7193abc4b26be22b3bb5499d3e22y = element_bfe0e7193abc4b26be22b3bb5499d3e22x.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e22z = { "class": "loader-content" }, attributes_bfe0e7193abc4b26be22b3bb5499d3e230 = { "class": "loader-logo text --flex-center --text-uppercase --text-600", "style": "color:;var(--color-grey-500);" };
|
|
61
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e22w, attributes['loader-content'], attributes_bfe0e7193abc4b26be22b3bb5499d3e22z);
|
|
62
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e22x, attributes['loader-logo'], attributes_bfe0e7193abc4b26be22b3bb5499d3e230);
|
|
63
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e22x, 'class', () => state.scale && 'loader-logo--scale', attributes_bfe0e7193abc4b26be22b3bb5499d3e230);
|
|
64
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e22x, 'animationend', ({ animationName: name }) => {
|
|
65
65
|
if (name === 'scale') {
|
|
66
66
|
state.load = true;
|
|
67
67
|
}
|
|
68
68
|
});
|
|
69
|
-
|
|
69
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.onconnect(element_bfe0e7193abc4b26be22b3bb5499d3e22x, () => {
|
|
70
70
|
state.scale = true;
|
|
71
71
|
});
|
|
72
|
-
|
|
73
|
-
return
|
|
72
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.slot(element_bfe0e7193abc4b26be22b3bb5499d3e22y, content);
|
|
73
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e22u;
|
|
74
74
|
})());
|
|
75
|
-
return
|
|
75
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e231;
|
|
76
76
|
})();
|
|
77
77
|
};
|
|
78
78
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
2
|
import './scss/index.scss';
|
|
3
|
-
const
|
|
3
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e239 = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='loading --border-width-700 --size-800' style='--border-color: var(--color-border-500);'></div>`);
|
|
4
4
|
export default (attributes) => {
|
|
5
5
|
return (() => {
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
return
|
|
6
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e238 = template_bfe0e7193abc4b26be22b3bb5499d3e239(), element_bfe0e7193abc4b26be22b3bb5499d3e23a = root_bfe0e7193abc4b26be22b3bb5499d3e238.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e23b = { "class": "loading --border-width-700 --size-800", "style": "--border-color:;var(--color-border-500);" };
|
|
7
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23a, attributes, attributes_bfe0e7193abc4b26be22b3bb5499d3e23b);
|
|
8
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e238;
|
|
9
9
|
})();
|
|
10
10
|
};
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
|
|
3
3
|
import { root } from '@esportsplus/reactivity';
|
|
4
4
|
import form from '../../components/form/index.js';
|
|
5
5
|
import './scss/index.scss';
|
|
6
|
-
const
|
|
7
|
-
class
|
|
8
|
-
#active = this[
|
|
9
|
-
#error = this[
|
|
10
|
-
#value = this[
|
|
6
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e23e = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<input class='range --border-state --border-black' type='range' />`);
|
|
7
|
+
class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e23c extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
|
|
8
|
+
#active = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
9
|
+
#error = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL]('');
|
|
10
|
+
#value = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](0);
|
|
11
11
|
constructor() {
|
|
12
12
|
super(null);
|
|
13
13
|
}
|
|
14
14
|
get active() {
|
|
15
|
-
return
|
|
15
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#active);
|
|
16
16
|
}
|
|
17
17
|
set active(_v0) {
|
|
18
|
-
|
|
18
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#active, _v0);
|
|
19
19
|
}
|
|
20
20
|
get error() {
|
|
21
|
-
return
|
|
21
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#error);
|
|
22
22
|
}
|
|
23
23
|
set error(_v1) {
|
|
24
|
-
|
|
24
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#error, _v1);
|
|
25
25
|
}
|
|
26
26
|
get value() {
|
|
27
|
-
return
|
|
27
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#value);
|
|
28
28
|
}
|
|
29
29
|
set value(_v2) {
|
|
30
|
-
|
|
30
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#value, _v2);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
export default function (attributes) {
|
|
34
|
-
let { max, min } = attributes, state = attributes.state || new
|
|
34
|
+
let { max, min } = attributes, state = attributes.state || new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e23c();
|
|
35
35
|
if (attributes?.value) {
|
|
36
36
|
state.value = Number(attributes.value);
|
|
37
37
|
}
|
|
38
38
|
return (() => {
|
|
39
|
-
let
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e23d = template_bfe0e7193abc4b26be22b3bb5499d3e23e(), element_bfe0e7193abc4b26be22b3bb5499d3e23f = root_bfe0e7193abc4b26be22b3bb5499d3e23d.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e23g = { "class": "range --border-state --border-black", "style": "" };
|
|
40
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e23f, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`, attributes_bfe0e7193abc4b26be22b3bb5499d3e23g);
|
|
41
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23f, this?.attributes, attributes_bfe0e7193abc4b26be22b3bb5499d3e23g);
|
|
42
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23f, attributes, attributes_bfe0e7193abc4b26be22b3bb5499d3e23g);
|
|
43
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e23f, 'class', () => state.active && '--active', attributes_bfe0e7193abc4b26be22b3bb5499d3e23g);
|
|
44
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.on(element_bfe0e7193abc4b26be22b3bb5499d3e23f, 'focusin', () => {
|
|
45
45
|
state.active = true;
|
|
46
46
|
});
|
|
47
|
-
|
|
47
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.on(element_bfe0e7193abc4b26be22b3bb5499d3e23f, 'focusout', () => {
|
|
48
48
|
state.active = false;
|
|
49
49
|
});
|
|
50
|
-
|
|
50
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e23f, 'input', (e) => {
|
|
51
51
|
state.value = Number(e.target.value);
|
|
52
52
|
});
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return
|
|
53
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.onrender(element_bfe0e7193abc4b26be22b3bb5499d3e23f, form.input.onrender(state));
|
|
54
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperty(element_bfe0e7193abc4b26be22b3bb5499d3e23f, 'value', root(() => attributes?.value || state.value || 0));
|
|
55
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e23d;
|
|
56
56
|
})();
|
|
57
57
|
}
|
|
58
58
|
;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
2
|
import { Attributes } from '@esportsplus/template';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
type A = Attributes & {
|
|
@@ -8,20 +8,20 @@ type A = Attributes & {
|
|
|
8
8
|
declare const _default: {
|
|
9
9
|
(): ReturnType<(this: {
|
|
10
10
|
attributes?: A | undefined;
|
|
11
|
-
content?:
|
|
12
|
-
}, attributes: Readonly<A>, content:
|
|
11
|
+
content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
|
|
12
|
+
}, attributes: Readonly<A>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
|
|
13
13
|
<T extends A>(attributes: T): ReturnType<(this: {
|
|
14
14
|
attributes?: A | undefined;
|
|
15
|
-
content?:
|
|
16
|
-
}, attributes: Readonly<A>, content:
|
|
17
|
-
<T extends
|
|
15
|
+
content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
|
|
16
|
+
}, attributes: Readonly<A>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
|
|
17
|
+
<T extends template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>(content: T): ReturnType<(this: {
|
|
18
18
|
attributes?: A | undefined;
|
|
19
|
-
content?:
|
|
20
|
-
}, attributes: Readonly<A>, content:
|
|
21
|
-
(attributes: A, content:
|
|
19
|
+
content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
|
|
20
|
+
}, attributes: Readonly<A>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
|
|
21
|
+
(attributes: A, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>): ReturnType<(this: {
|
|
22
22
|
attributes?: A | undefined;
|
|
23
|
-
content?:
|
|
24
|
-
}, attributes: Readonly<A>, content:
|
|
23
|
+
content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
|
|
24
|
+
}, attributes: Readonly<A>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
|
|
25
25
|
};
|
|
26
26
|
export default _default;
|
|
27
27
|
export type { A as Attributes };
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
|
|
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
|
|
8
|
-
#height = this[
|
|
9
|
-
#translate = this[
|
|
6
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e23j = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='scrollbar-container'><div class='scrollbar-container-content'><!--$--></div><div class='scrollbar'></div></div>`);
|
|
7
|
+
class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e23h extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
|
|
8
|
+
#height = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](100);
|
|
9
|
+
#translate = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](0);
|
|
10
10
|
constructor() {
|
|
11
11
|
super(null);
|
|
12
12
|
}
|
|
13
13
|
get height() {
|
|
14
|
-
return
|
|
14
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#height);
|
|
15
15
|
}
|
|
16
16
|
set height(_v0) {
|
|
17
|
-
|
|
17
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#height, _v0);
|
|
18
18
|
}
|
|
19
19
|
get translate() {
|
|
20
|
-
return
|
|
20
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#translate);
|
|
21
21
|
}
|
|
22
22
|
set translate(_v1) {
|
|
23
|
-
|
|
23
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#translate, _v1);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
const OMIT = ['scrollbar', 'scrollbar-container-content'];
|
|
27
27
|
let root = document.body, width;
|
|
28
28
|
export default template.factory(function (attributes, content) {
|
|
29
|
-
let state = new
|
|
29
|
+
let state = new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e23h();
|
|
30
30
|
return (() => {
|
|
31
|
-
let
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e23i = template_bfe0e7193abc4b26be22b3bb5499d3e23j(), element_bfe0e7193abc4b26be22b3bb5499d3e23k = root_bfe0e7193abc4b26be22b3bb5499d3e23i.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e23l = element_bfe0e7193abc4b26be22b3bb5499d3e23k.firstElementChild, element_bfe0e7193abc4b26be22b3bb5499d3e23m = element_bfe0e7193abc4b26be22b3bb5499d3e23l.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e23n = element_bfe0e7193abc4b26be22b3bb5499d3e23l.nextElementSibling, attributes_bfe0e7193abc4b26be22b3bb5499d3e23o = { "class": "scrollbar-container" }, attributes_bfe0e7193abc4b26be22b3bb5499d3e23p = { "class": "scrollbar-container-content" }, attributes_bfe0e7193abc4b26be22b3bb5499d3e23q = { "class": "scrollbar" };
|
|
32
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23k, this?.attributes && omit(this.attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e23o);
|
|
33
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23k, omit(attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e23o);
|
|
34
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23l, this?.attributes?.['scrollbar-container-content'], attributes_bfe0e7193abc4b26be22b3bb5499d3e23p);
|
|
35
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23l, attributes['scrollbar-container-content'], attributes_bfe0e7193abc4b26be22b3bb5499d3e23p);
|
|
36
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.on(element_bfe0e7193abc4b26be22b3bb5499d3e23l, 'scroll', function () {
|
|
37
37
|
if (width === undefined) {
|
|
38
38
|
width = this.offsetWidth - this.clientWidth;
|
|
39
39
|
if (width && width !== 17) {
|
|
@@ -43,14 +43,14 @@ export default template.factory(function (attributes, content) {
|
|
|
43
43
|
state.height = (this.clientHeight / this.scrollHeight) * 100;
|
|
44
44
|
state.translate = (this.scrollTop / this.clientHeight) * 100;
|
|
45
45
|
});
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.slot(element_bfe0e7193abc4b26be22b3bb5499d3e23m, content);
|
|
47
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23n, this?.attributes?.scrollbar, attributes_bfe0e7193abc4b26be22b3bb5499d3e23q);
|
|
48
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23n, attributes.scrollbar, attributes_bfe0e7193abc4b26be22b3bb5499d3e23q);
|
|
49
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e23n, 'class', () => state.height >= 100 && 'scrollbar--hidden', attributes_bfe0e7193abc4b26be22b3bb5499d3e23q);
|
|
50
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e23n, 'style', () => `
|
|
51
51
|
--translate: translate3d(0, ${state.translate}%, 0);
|
|
52
52
|
--height: ${state.height}%;
|
|
53
|
-
`,
|
|
54
|
-
return
|
|
53
|
+
`, attributes_bfe0e7193abc4b26be22b3bb5499d3e23q);
|
|
54
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e23i;
|
|
55
55
|
})();
|
|
56
56
|
});
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
|
|
3
3
|
import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
|
|
4
4
|
import form from '../../components/form/index.js';
|
|
5
5
|
import root from '../../components/root/index.js';
|
|
6
6
|
import scrollbar from '../../components/scrollbar/index.js';
|
|
7
7
|
import template from '../../components/template/index.js';
|
|
8
8
|
import './scss/index.scss';
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
class
|
|
12
|
-
#active = this[
|
|
13
|
-
#error = this[
|
|
14
|
-
#render = this[
|
|
9
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e23t = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='link select-option '><!--$--></div>`);
|
|
10
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e23y = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='select tooltip '><!--$--><div class='select-arrow'></div><input class='select-tag' /><!--$--></div>`);
|
|
11
|
+
class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e23r extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
|
|
12
|
+
#active = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
13
|
+
#error = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL]('');
|
|
14
|
+
#render = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
15
15
|
#selected;
|
|
16
16
|
constructor(_p0) {
|
|
17
17
|
super(null);
|
|
18
|
-
this.#selected = this[
|
|
18
|
+
this.#selected = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](_p0);
|
|
19
19
|
}
|
|
20
20
|
get active() {
|
|
21
|
-
return
|
|
21
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#active);
|
|
22
22
|
}
|
|
23
23
|
set active(_v0) {
|
|
24
|
-
|
|
24
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#active, _v0);
|
|
25
25
|
}
|
|
26
26
|
get error() {
|
|
27
|
-
return
|
|
27
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#error);
|
|
28
28
|
}
|
|
29
29
|
set error(_v1) {
|
|
30
|
-
|
|
30
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#error, _v1);
|
|
31
31
|
}
|
|
32
32
|
get render() {
|
|
33
|
-
return
|
|
33
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#render);
|
|
34
34
|
}
|
|
35
35
|
set render(_v2) {
|
|
36
|
-
|
|
36
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#render, _v2);
|
|
37
37
|
}
|
|
38
38
|
get selected() {
|
|
39
|
-
return
|
|
39
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#selected);
|
|
40
40
|
}
|
|
41
41
|
set selected(_v3) {
|
|
42
|
-
|
|
42
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#selected, _v3);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
const OMIT = [
|
|
@@ -78,19 +78,19 @@ function set(current, value) {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
const select = template.factory(function (attributes, content) {
|
|
81
|
-
let { options, option } = attributes, state = attributes.state || new
|
|
81
|
+
let { options, option } = attributes, state = attributes.state || new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e23r(attributes.selected || Object.keys(options)[0]);
|
|
82
82
|
return (() => {
|
|
83
|
-
let
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e23x = template_bfe0e7193abc4b26be22b3bb5499d3e23y(), element_bfe0e7193abc4b26be22b3bb5499d3e23z = root_bfe0e7193abc4b26be22b3bb5499d3e23x.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e240 = element_bfe0e7193abc4b26be22b3bb5499d3e23z.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e241 = element_bfe0e7193abc4b26be22b3bb5499d3e23z.firstElementChild, element_bfe0e7193abc4b26be22b3bb5499d3e242 = element_bfe0e7193abc4b26be22b3bb5499d3e241.nextElementSibling, element_bfe0e7193abc4b26be22b3bb5499d3e243 = element_bfe0e7193abc4b26be22b3bb5499d3e240.nextSibling.nextSibling.nextSibling, attributes_bfe0e7193abc4b26be22b3bb5499d3e244 = { "class": "select tooltip" }, attributes_bfe0e7193abc4b26be22b3bb5499d3e245 = { "class": "select-arrow" };
|
|
84
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e23z, 'class', () => state.active && '--active', attributes_bfe0e7193abc4b26be22b3bb5499d3e244);
|
|
85
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23z, this?.attributes && omit(this.attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e244);
|
|
86
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23z, omit(attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e244);
|
|
87
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e23z, 'click', () => {
|
|
88
88
|
if (state.render) {
|
|
89
89
|
set(state, !state.active);
|
|
90
90
|
}
|
|
91
91
|
state.render = true;
|
|
92
92
|
});
|
|
93
|
-
new
|
|
93
|
+
new template_bfe0e7193abc4b26be22b3bb5499d3e21.EffectSlot(element_bfe0e7193abc4b26be22b3bb5499d3e240, content ? (() => content(state)) : (() => {
|
|
94
94
|
let selected = options[state.selected];
|
|
95
95
|
if (!selected) {
|
|
96
96
|
return '-';
|
|
@@ -100,17 +100,17 @@ const select = template.factory(function (attributes, content) {
|
|
|
100
100
|
}
|
|
101
101
|
return selected;
|
|
102
102
|
}));
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
new
|
|
103
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e241, this?.attributes?.arrow, attributes_bfe0e7193abc4b26be22b3bb5499d3e245);
|
|
104
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e241, attributes.arrow, attributes_bfe0e7193abc4b26be22b3bb5499d3e245);
|
|
105
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperty(element_bfe0e7193abc4b26be22b3bb5499d3e242, 'name', attributes.name);
|
|
106
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e242, 'click', () => { });
|
|
107
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.onrender(element_bfe0e7193abc4b26be22b3bb5499d3e242, form.input.onrender(state));
|
|
108
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperty(element_bfe0e7193abc4b26be22b3bb5499d3e242, 'value', () => state.selected);
|
|
109
|
+
new template_bfe0e7193abc4b26be22b3bb5499d3e21.EffectSlot(element_bfe0e7193abc4b26be22b3bb5499d3e243, () => {
|
|
110
110
|
if (!state.render) {
|
|
111
111
|
return;
|
|
112
112
|
}
|
|
113
|
-
let keys = Object.keys(options), selected =
|
|
113
|
+
let keys = Object.keys(options), selected = reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.reactive(Object.fromEntries(keys.map(key => [key, false])));
|
|
114
114
|
return sb({
|
|
115
115
|
...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
|
|
116
116
|
...attributes['tooltip-content'],
|
|
@@ -154,17 +154,17 @@ const select = template.factory(function (attributes, content) {
|
|
|
154
154
|
content = content.content;
|
|
155
155
|
}
|
|
156
156
|
return (() => {
|
|
157
|
-
let
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
return
|
|
157
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e23s = template_bfe0e7193abc4b26be22b3bb5499d3e23t(), element_bfe0e7193abc4b26be22b3bb5499d3e23u = root_bfe0e7193abc4b26be22b3bb5499d3e23s.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e23v = element_bfe0e7193abc4b26be22b3bb5499d3e23u.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e23w = { "class": "link select-option" };
|
|
158
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e23u, 'class', () => selected[key] && '--active', attributes_bfe0e7193abc4b26be22b3bb5499d3e23w);
|
|
159
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23u, this?.attributes?.option, attributes_bfe0e7193abc4b26be22b3bb5499d3e23w);
|
|
160
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e23u, option, attributes_bfe0e7193abc4b26be22b3bb5499d3e23w);
|
|
161
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperty(element_bfe0e7193abc4b26be22b3bb5499d3e23u, 'data-key', key);
|
|
162
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.slot(element_bfe0e7193abc4b26be22b3bb5499d3e23v, content);
|
|
163
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e23s;
|
|
164
164
|
})();
|
|
165
165
|
}));
|
|
166
166
|
});
|
|
167
|
-
return
|
|
167
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e23x;
|
|
168
168
|
})();
|
|
169
169
|
});
|
|
170
170
|
export default select;
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
4
|
import form from '../../components/form/index.js';
|
|
5
5
|
import './scss/index.scss';
|
|
6
|
-
const
|
|
7
|
-
class
|
|
8
|
-
#active = this[
|
|
9
|
-
#error = this[
|
|
6
|
+
const template_bfe0e7193abc4b26be22b3bb5499d3e248 = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<textarea class='textarea'></textarea>`);
|
|
7
|
+
class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e246 extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
|
|
8
|
+
#active = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
|
|
9
|
+
#error = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL]('');
|
|
10
10
|
constructor() {
|
|
11
11
|
super(null);
|
|
12
12
|
}
|
|
13
13
|
get active() {
|
|
14
|
-
return
|
|
14
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#active);
|
|
15
15
|
}
|
|
16
16
|
set active(_v0) {
|
|
17
|
-
|
|
17
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#active, _v0);
|
|
18
18
|
}
|
|
19
19
|
get error() {
|
|
20
|
-
return
|
|
20
|
+
return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#error);
|
|
21
21
|
}
|
|
22
22
|
set error(_v1) {
|
|
23
|
-
|
|
23
|
+
reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#error, _v1);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
const OMIT = ['state'];
|
|
27
27
|
export default function (attributes) {
|
|
28
|
-
let state = attributes.state || new
|
|
28
|
+
let state = attributes.state || new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e246();
|
|
29
29
|
return (() => {
|
|
30
|
-
let
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
let root_bfe0e7193abc4b26be22b3bb5499d3e247 = template_bfe0e7193abc4b26be22b3bb5499d3e248(), element_bfe0e7193abc4b26be22b3bb5499d3e249 = root_bfe0e7193abc4b26be22b3bb5499d3e247.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e24a = { "class": "textarea" };
|
|
31
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e249, this?.attributes && omit(this.attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e24a);
|
|
32
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e249, omit(attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e24a);
|
|
33
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e249, 'class', () => state.active && '--active', attributes_bfe0e7193abc4b26be22b3bb5499d3e24a);
|
|
34
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.on(element_bfe0e7193abc4b26be22b3bb5499d3e249, 'focusin', () => {
|
|
35
35
|
state.active = true;
|
|
36
36
|
});
|
|
37
|
-
|
|
37
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.on(element_bfe0e7193abc4b26be22b3bb5499d3e249, 'focusout', () => {
|
|
38
38
|
state.active = false;
|
|
39
39
|
});
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return
|
|
40
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.onrender(element_bfe0e7193abc4b26be22b3bb5499d3e249, form.input.onrender(state));
|
|
41
|
+
template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperty(element_bfe0e7193abc4b26be22b3bb5499d3e249, 'value', attributes?.value || '');
|
|
42
|
+
return root_bfe0e7193abc4b26be22b3bb5499d3e247;
|
|
43
43
|
})();
|
|
44
44
|
}
|
|
45
45
|
;
|