@esportsplus/ui 0.51.6 → 0.51.7
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/.github/workflows/bump.yml +4 -1
- package/.github/workflows/publish.yml +4 -0
- package/build/components/accordion/index.d.ts +17 -16
- package/build/components/accordion/index.js +16 -16
- package/build/components/alert/index.d.ts +7 -7
- package/build/components/alert/index.js +42 -42
- package/build/components/back/index.d.ts +8 -8
- package/build/components/back/index.js +10 -10
- package/build/components/button/index.d.ts +22 -22
- package/build/components/button/index.js +23 -23
- package/build/components/checkbox/index.d.ts +1 -1
- package/build/components/checkbox/index.js +23 -23
- package/build/components/clipboard/onclick.d.ts +1 -1
- package/build/components/clipboard/onclick.js +14 -14
- package/build/components/clipboard/write.d.ts +1 -1
- package/build/components/counter/index.d.ts +5 -5
- package/build/components/counter/index.js +34 -34
- package/build/components/ellipsis/index.d.ts +1 -1
- package/build/components/ellipsis/index.js +5 -5
- package/build/components/form/action.d.ts +3 -3
- package/build/components/form/action.js +8 -8
- package/build/components/form/index.d.ts +2 -2
- package/build/components/form/input.d.ts +8 -6
- package/build/components/frame/index.d.ts +10 -10
- package/build/components/frame/index.js +1 -1
- package/build/components/highlight/index.d.ts +17 -16
- package/build/components/highlight/index.js +15 -15
- package/build/components/icon/index.d.ts +11 -11
- package/build/components/icon/index.js +7 -7
- package/build/components/input/index.d.ts +1 -1
- package/build/components/input/index.js +21 -21
- package/build/components/json/download.d.ts +1 -1
- package/build/components/loader/index.d.ts +17 -16
- package/build/components/loader/index.js +33 -33
- package/build/components/loading/index.d.ts +1 -1
- package/build/components/loading/index.js +5 -5
- package/build/components/overlay/index.d.ts +10 -10
- package/build/components/overlay/index.js +1 -1
- package/build/components/radio/index.js +1 -1
- package/build/components/range/index.d.ts +1 -1
- package/build/components/range/index.js +26 -26
- package/build/components/root/index.d.ts +1 -4
- package/build/components/root/onclick.d.ts +4 -4
- package/build/components/scrollbar/index.d.ts +12 -12
- package/build/components/scrollbar/index.js +24 -24
- package/build/components/select/index.d.ts +2 -2
- package/build/components/select/index.js +44 -44
- package/build/components/sidebar/index.d.ts +10 -10
- package/build/components/sidebar/index.js +1 -1
- package/build/components/site/index.d.ts +10 -10
- package/build/components/site/index.js +2 -2
- package/build/components/switch/index.js +1 -1
- package/build/components/template/index.d.ts +10 -9
- package/build/components/textarea/index.d.ts +1 -1
- package/build/components/textarea/index.js +21 -21
- package/build/components/tooltip/menu.d.ts +11 -12
- package/build/components/tooltip/menu.js +21 -21
- package/build/components/tooltip/onclick.d.ts +1131 -1131
- package/build/components/tooltip/onclick.js +16 -16
- package/build/components/tooltip/onhover.d.ts +17 -16
- package/build/components/tooltip/onhover.js +16 -16
- package/build/components/typewriter/index.d.ts +11 -11
- package/build/components/typewriter/index.js +15 -15
- package/build/themes/dark/alert.d.ts +1 -1
- package/package.json +8 -8
- package/pnpm-workspace.yaml +8 -0
- package/src/components/alert/index.ts +2 -2
- package/src/components/tooltip/onclick.ts +1 -1
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
3
|
-
import form from '
|
|
1
|
+
import * as template_u1 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_u0 from '@esportsplus/reactivity';
|
|
3
|
+
import form from '../form/index.js';
|
|
4
4
|
import './scss/index.scss';
|
|
5
|
-
const
|
|
6
|
-
class
|
|
7
|
-
#active = this[
|
|
8
|
-
#error = this[
|
|
5
|
+
const template_0j57g2t2 = template_u1.template(`<input class='input' />`);
|
|
6
|
+
class ReactiveObject_0j57g2t0 extends reactivity_u0.ReactiveObject {
|
|
7
|
+
#active = this[reactivity_u0.SIGNAL](false);
|
|
8
|
+
#error = this[reactivity_u0.SIGNAL]('');
|
|
9
9
|
constructor() {
|
|
10
10
|
super(null);
|
|
11
11
|
}
|
|
12
12
|
get active() {
|
|
13
|
-
return
|
|
13
|
+
return reactivity_u0.read(this.#active);
|
|
14
14
|
}
|
|
15
15
|
set active(_v0) {
|
|
16
|
-
|
|
16
|
+
reactivity_u0.write(this.#active, _v0);
|
|
17
17
|
}
|
|
18
18
|
get error() {
|
|
19
|
-
return
|
|
19
|
+
return reactivity_u0.read(this.#error);
|
|
20
20
|
}
|
|
21
21
|
set error(_v1) {
|
|
22
|
-
|
|
22
|
+
reactivity_u0.write(this.#error, _v1);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
export default function (attributes) {
|
|
26
|
-
let state = attributes.state || new
|
|
26
|
+
let state = attributes.state || new ReactiveObject_0j57g2t0();
|
|
27
27
|
return (() => {
|
|
28
|
-
let
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
let root_0j57g2t1 = template_0j57g2t2(), element_0j57g2t3 = root_0j57g2t1.firstChild;
|
|
29
|
+
template_u1.setProperties(element_0j57g2t3, this?.attributes);
|
|
30
|
+
template_u1.setProperties(element_0j57g2t3, attributes);
|
|
31
|
+
template_u1.setList(element_0j57g2t3, 'class', () => state.active && '--active');
|
|
32
|
+
template_u1.on(element_0j57g2t3, 'focusin', () => {
|
|
33
33
|
state.active = true;
|
|
34
34
|
});
|
|
35
|
-
|
|
35
|
+
template_u1.on(element_0j57g2t3, 'focusout', () => {
|
|
36
36
|
state.active = false;
|
|
37
37
|
});
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return
|
|
38
|
+
template_u1.onrender(element_0j57g2t3, form.input.onrender(state));
|
|
39
|
+
template_u1.setProperty(element_0j57g2t3, 'type', (attributes.type || 'text'));
|
|
40
|
+
return root_0j57g2t1;
|
|
41
41
|
})();
|
|
42
42
|
}
|
|
43
43
|
;
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_u1 from '@esportsplus/template';
|
|
2
|
+
import { type Attributes } from '@esportsplus/template';
|
|
2
3
|
import './scss/index.scss';
|
|
3
4
|
declare const _default: {
|
|
4
5
|
(): 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<
|
|
6
|
+
attributes?: Attributes | undefined;
|
|
7
|
+
content?: template_u1.Renderable<any>;
|
|
8
|
+
}, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
|
|
9
|
+
<T extends Attributes>(attributes: T): ReturnType<(this: {
|
|
10
|
+
attributes?: Attributes | undefined;
|
|
11
|
+
content?: template_u1.Renderable<any>;
|
|
12
|
+
}, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
|
|
13
|
+
<T extends template_u1.Renderable<any>>(content: T): ReturnType<(this: {
|
|
14
|
+
attributes?: Attributes | undefined;
|
|
15
|
+
content?: template_u1.Renderable<any>;
|
|
16
|
+
}, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
|
|
17
|
+
(attributes: Attributes, content: template_u1.Renderable<any>): ReturnType<(this: {
|
|
18
|
+
attributes?: Attributes | undefined;
|
|
19
|
+
content?: template_u1.Renderable<any>;
|
|
20
|
+
}, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
|
|
20
21
|
};
|
|
21
22
|
export default _default;
|
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_u1 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_u0 from '@esportsplus/reactivity';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
|
-
import template from '
|
|
4
|
+
import template from '../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_0bvfqbq2 = template_u1.template(`<div class='loader-content' ><div class='loader-logo text --flex-center --text-uppercase --text-600' style='color: var(--color-grey-500);' >`);
|
|
7
|
+
const template_0bvfqbq6 = template_u1.template(`<div class='loader '><div class='loader ' >`);
|
|
8
|
+
class ReactiveObject_0bvfqbq0 extends reactivity_u0.ReactiveObject {
|
|
9
|
+
#load = this[reactivity_u0.SIGNAL](false);
|
|
10
|
+
#remove = this[reactivity_u0.SIGNAL](false);
|
|
11
|
+
#scale = this[reactivity_u0.SIGNAL](false);
|
|
12
12
|
constructor() {
|
|
13
13
|
super(null);
|
|
14
14
|
}
|
|
15
15
|
get load() {
|
|
16
|
-
return
|
|
16
|
+
return reactivity_u0.read(this.#load);
|
|
17
17
|
}
|
|
18
18
|
set load(_v0) {
|
|
19
|
-
|
|
19
|
+
reactivity_u0.write(this.#load, _v0);
|
|
20
20
|
}
|
|
21
21
|
get remove() {
|
|
22
|
-
return
|
|
22
|
+
return reactivity_u0.read(this.#remove);
|
|
23
23
|
}
|
|
24
24
|
set remove(_v1) {
|
|
25
|
-
|
|
25
|
+
reactivity_u0.write(this.#remove, _v1);
|
|
26
26
|
}
|
|
27
27
|
get scale() {
|
|
28
|
-
return
|
|
28
|
+
return reactivity_u0.read(this.#scale);
|
|
29
29
|
}
|
|
30
30
|
set scale(_v2) {
|
|
31
|
-
|
|
31
|
+
reactivity_u0.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_0bvfqbq0();
|
|
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_0bvfqbq5 = template_0bvfqbq6(), element_0bvfqbq7 = root_0bvfqbq5.firstChild, element_0bvfqbq8 = element_0bvfqbq7.firstElementChild;
|
|
44
|
+
template_u1.setList(element_0bvfqbq7, 'class', () => state.load && 'loader--load');
|
|
45
|
+
template_u1.delegate(element_0bvfqbq7, '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_u1.setProperties(element_0bvfqbq7, omit(attributes, OMIT));
|
|
52
|
+
template_u1.setList(element_0bvfqbq8, 'class', () => state.load && 'loader--load');
|
|
53
|
+
template_u1.setProperties(element_0bvfqbq8, !content && {
|
|
54
54
|
onconnect: () => {
|
|
55
55
|
state.load = true;
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
let
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
template_u1.setProperties(element_0bvfqbq8, attributes.loader);
|
|
59
|
+
template_u1.slot(element_0bvfqbq8, content && (() => {
|
|
60
|
+
let root_0bvfqbq1 = template_0bvfqbq2(), element_0bvfqbq3 = root_0bvfqbq1.firstChild, element_0bvfqbq4 = element_0bvfqbq3.firstElementChild;
|
|
61
|
+
template_u1.setProperties(element_0bvfqbq3, attributes['loader-content']);
|
|
62
|
+
template_u1.setProperties(element_0bvfqbq4, attributes['loader-logo']);
|
|
63
|
+
template_u1.setList(element_0bvfqbq4, 'class', () => state.scale && 'loader-logo--scale');
|
|
64
|
+
template_u1.delegate(element_0bvfqbq4, 'animationend', ({ animationName: name }) => {
|
|
65
65
|
if (name === 'scale') {
|
|
66
66
|
state.load = true;
|
|
67
67
|
}
|
|
68
68
|
});
|
|
69
|
-
|
|
69
|
+
template_u1.onconnect(element_0bvfqbq4, () => {
|
|
70
70
|
state.scale = true;
|
|
71
71
|
});
|
|
72
|
-
|
|
73
|
-
return
|
|
72
|
+
template_u1.slot(element_0bvfqbq4, content, 1);
|
|
73
|
+
return root_0bvfqbq1;
|
|
74
74
|
})(), 1);
|
|
75
|
-
return
|
|
75
|
+
return root_0bvfqbq5;
|
|
76
76
|
})();
|
|
77
77
|
};
|
|
78
78
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as template_u1 from '@esportsplus/template';
|
|
2
2
|
import './scss/index.scss';
|
|
3
|
-
const
|
|
3
|
+
const template_17hj0u91 = template_u1.template(`<div class='loading --border-width-700 --size-800' style='--border-color: var(--color-border-500);' >`);
|
|
4
4
|
export default (attributes) => {
|
|
5
5
|
return (() => {
|
|
6
|
-
let
|
|
7
|
-
|
|
8
|
-
return
|
|
6
|
+
let root_17hj0u90 = template_17hj0u91(), element_17hj0u92 = root_17hj0u90.firstChild;
|
|
7
|
+
template_u1.setProperties(element_17hj0u92, attributes);
|
|
8
|
+
return root_17hj0u90;
|
|
9
9
|
})();
|
|
10
10
|
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import './scss/index.scss';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
(): ReturnType<(this: {
|
|
4
|
-
attributes?: import("
|
|
4
|
+
attributes?: import("../scrollbar/index.js").Attributes | undefined;
|
|
5
5
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
6
|
-
}, attributes: Readonly<import("
|
|
7
|
-
<T extends import("
|
|
8
|
-
attributes?: import("
|
|
6
|
+
}, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
7
|
+
<T extends import("../scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
|
|
8
|
+
attributes?: import("../scrollbar/index.js").Attributes | undefined;
|
|
9
9
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
10
|
-
}, attributes: Readonly<import("
|
|
10
|
+
}, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
11
11
|
<T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
|
|
12
|
-
attributes?: import("
|
|
12
|
+
attributes?: import("../scrollbar/index.js").Attributes | undefined;
|
|
13
13
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
14
|
-
}, attributes: Readonly<import("
|
|
15
|
-
(attributes: import("
|
|
16
|
-
attributes?: import("
|
|
14
|
+
}, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
15
|
+
(attributes: import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
|
|
16
|
+
attributes?: import("../scrollbar/index.js").Attributes | undefined;
|
|
17
17
|
content?: import("@esportsplus/template").Renderable<any>;
|
|
18
|
-
}, attributes: Readonly<import("
|
|
18
|
+
}, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
19
19
|
};
|
|
20
20
|
export default _default;
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as template_u1 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_u0 from '@esportsplus/reactivity';
|
|
3
3
|
import { root } from '@esportsplus/reactivity';
|
|
4
|
-
import form from '
|
|
4
|
+
import form from '../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_0aka2e62 = template_u1.template(`<input class='range --border-state --border-black' type='range' />`);
|
|
7
|
+
class ReactiveObject_0aka2e60 extends reactivity_u0.ReactiveObject {
|
|
8
|
+
#active = this[reactivity_u0.SIGNAL](false);
|
|
9
|
+
#error = this[reactivity_u0.SIGNAL]('');
|
|
10
|
+
#value = this[reactivity_u0.SIGNAL](0);
|
|
11
11
|
constructor() {
|
|
12
12
|
super(null);
|
|
13
13
|
}
|
|
14
14
|
get active() {
|
|
15
|
-
return
|
|
15
|
+
return reactivity_u0.read(this.#active);
|
|
16
16
|
}
|
|
17
17
|
set active(_v0) {
|
|
18
|
-
|
|
18
|
+
reactivity_u0.write(this.#active, _v0);
|
|
19
19
|
}
|
|
20
20
|
get error() {
|
|
21
|
-
return
|
|
21
|
+
return reactivity_u0.read(this.#error);
|
|
22
22
|
}
|
|
23
23
|
set error(_v1) {
|
|
24
|
-
|
|
24
|
+
reactivity_u0.write(this.#error, _v1);
|
|
25
25
|
}
|
|
26
26
|
get value() {
|
|
27
|
-
return
|
|
27
|
+
return reactivity_u0.read(this.#value);
|
|
28
28
|
}
|
|
29
29
|
set value(_v2) {
|
|
30
|
-
|
|
30
|
+
reactivity_u0.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_0aka2e60();
|
|
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_0aka2e61 = template_0aka2e62(), element_0aka2e63 = root_0aka2e61.firstChild;
|
|
40
|
+
template_u1.setList(element_0aka2e63, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
|
|
41
|
+
template_u1.setProperties(element_0aka2e63, this?.attributes);
|
|
42
|
+
template_u1.setProperties(element_0aka2e63, attributes);
|
|
43
|
+
template_u1.setList(element_0aka2e63, 'class', () => state.active && '--active');
|
|
44
|
+
template_u1.on(element_0aka2e63, 'focusin', () => {
|
|
45
45
|
state.active = true;
|
|
46
46
|
});
|
|
47
|
-
|
|
47
|
+
template_u1.on(element_0aka2e63, 'focusout', () => {
|
|
48
48
|
state.active = false;
|
|
49
49
|
});
|
|
50
|
-
|
|
50
|
+
template_u1.delegate(element_0aka2e63, 'input', (e) => {
|
|
51
51
|
state.value = Number(e.target.value);
|
|
52
52
|
});
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return
|
|
53
|
+
template_u1.onrender(element_0aka2e63, form.input.onrender(state));
|
|
54
|
+
template_u1.setProperty(element_0aka2e63, 'value', root(() => attributes?.value || state.value || 0));
|
|
55
|
+
return root_0aka2e61;
|
|
56
56
|
})();
|
|
57
57
|
}
|
|
58
58
|
;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
declare
|
|
2
|
-
|
|
3
|
-
push(fn: VoidFunction)
|
|
4
|
-
}
|
|
1
|
+
declare function onclick(): Promise<void>;
|
|
2
|
+
declare namespace onclick {
|
|
3
|
+
var push: (fn: VoidFunction) => void;
|
|
4
|
+
}
|
|
5
5
|
export default onclick;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { Attributes } from '@esportsplus/template';
|
|
1
|
+
import * as template_u1 from '@esportsplus/template';
|
|
2
|
+
import { type Attributes } from '@esportsplus/template';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
type A = Attributes & {
|
|
5
5
|
scrollbar?: 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_u1.Renderable<any>;
|
|
12
|
+
}, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.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_u1.Renderable<any>;
|
|
16
|
+
}, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
|
|
17
|
+
<T extends template_u1.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_u1.Renderable<any>;
|
|
20
|
+
}, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
|
|
21
|
+
(attributes: A, content: template_u1.Renderable<any>): ReturnType<(this: {
|
|
22
22
|
attributes?: A | undefined;
|
|
23
|
-
content?:
|
|
24
|
-
}, attributes: Readonly<A>, content:
|
|
23
|
+
content?: template_u1.Renderable<any>;
|
|
24
|
+
}, attributes: Readonly<A>, content: template_u1.Renderable<any>) => template_u1.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_u1 from '@esportsplus/template';
|
|
2
|
+
import * as reactivity_u0 from '@esportsplus/reactivity';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
|
-
import template from '
|
|
4
|
+
import template from '../template/index.js';
|
|
5
5
|
import './scss/index.scss';
|
|
6
|
-
const
|
|
7
|
-
class
|
|
8
|
-
#height = this[
|
|
9
|
-
#translate = this[
|
|
6
|
+
const template_1aruxaj2 = template_u1.template(`<div class='scrollbar-container' ><div class='scrollbar-container-content' ></div><div class='scrollbar' >`);
|
|
7
|
+
class ReactiveObject_1aruxaj0 extends reactivity_u0.ReactiveObject {
|
|
8
|
+
#height = this[reactivity_u0.SIGNAL](100);
|
|
9
|
+
#translate = this[reactivity_u0.SIGNAL](0);
|
|
10
10
|
constructor() {
|
|
11
11
|
super(null);
|
|
12
12
|
}
|
|
13
13
|
get height() {
|
|
14
|
-
return
|
|
14
|
+
return reactivity_u0.read(this.#height);
|
|
15
15
|
}
|
|
16
16
|
set height(_v0) {
|
|
17
|
-
|
|
17
|
+
reactivity_u0.write(this.#height, _v0);
|
|
18
18
|
}
|
|
19
19
|
get translate() {
|
|
20
|
-
return
|
|
20
|
+
return reactivity_u0.read(this.#translate);
|
|
21
21
|
}
|
|
22
22
|
set translate(_v1) {
|
|
23
|
-
|
|
23
|
+
reactivity_u0.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_1aruxaj0();
|
|
30
30
|
return (() => {
|
|
31
|
-
let
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
let root_1aruxaj1 = template_1aruxaj2(), element_1aruxaj3 = root_1aruxaj1.firstChild, element_1aruxaj4 = element_1aruxaj3.firstElementChild, element_1aruxaj5 = element_1aruxaj4.nextElementSibling;
|
|
32
|
+
template_u1.setProperties(element_1aruxaj3, this?.attributes && omit(this.attributes, OMIT));
|
|
33
|
+
template_u1.setProperties(element_1aruxaj3, omit(attributes, OMIT));
|
|
34
|
+
template_u1.setProperties(element_1aruxaj4, this?.attributes?.['scrollbar-container-content']);
|
|
35
|
+
template_u1.setProperties(element_1aruxaj4, attributes['scrollbar-container-content']);
|
|
36
|
+
template_u1.on(element_1aruxaj4, '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_u1.slot(element_1aruxaj4, content, 1);
|
|
47
|
+
template_u1.setProperties(element_1aruxaj5, this?.attributes?.scrollbar);
|
|
48
|
+
template_u1.setProperties(element_1aruxaj5, attributes.scrollbar);
|
|
49
|
+
template_u1.setList(element_1aruxaj5, 'class', () => state.height >= 100 && 'scrollbar--hidden');
|
|
50
|
+
template_u1.setList(element_1aruxaj5, 'style', () => `
|
|
51
51
|
--translate: translate3d(0, ${state.translate}%, 0);
|
|
52
52
|
--height: ${state.height}%;
|
|
53
53
|
`);
|
|
54
|
-
return
|
|
54
|
+
return root_1aruxaj1;
|
|
55
55
|
})();
|
|
56
56
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Attributes, Renderable } from '@esportsplus/template';
|
|
2
|
-
import { Attributes as Attr } from '
|
|
1
|
+
import { type Attributes, type Renderable } from '@esportsplus/template';
|
|
2
|
+
import { Attributes as Attr } from '../scrollbar/index.js';
|
|
3
3
|
import './scss/index.scss';
|
|
4
4
|
type A = {
|
|
5
5
|
arrow?: Attributes;
|