@esportsplus/ui 0.16.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.scrollbar{--background:transparent;--height:0;--translate:translate3d(0,0,0);--width:4px}::-webkit-scrollbar{box-shadow:unset;background:0 0}::-webkit-scrollbar-track{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb:window-inactive{box-shadow:unset;background:0 0}.scrollbar{z-index:9;height:100%}.scrollbar,.scrollbar:before{transition:opacity var(--transition-duration)ease-in-out;width:var(--width);position:absolute;top:0;right:0}.scrollbar:before{background:var(--background);content:"";height:var(--height);transform:var(--translate);transform-origin:top;border-radius:1px 0 0 1px}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{flex-flow:column;width:100%;height:
|
|
1
|
+
@layer components {.scrollbar{--background:transparent;--height:0;--translate:translate3d(0,0,0);--width:4px}::-webkit-scrollbar{box-shadow:unset;background:0 0}::-webkit-scrollbar-track{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb:window-inactive{box-shadow:unset;background:0 0}.scrollbar{z-index:9;height:100%}.scrollbar,.scrollbar:before{transition:opacity var(--transition-duration)ease-in-out;width:var(--width);position:absolute;top:0;right:0}.scrollbar:before{background:var(--background);content:"";height:var(--height);transform:var(--translate);transform-origin:top;border-radius:1px 0 0 1px}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{flex-flow:column;width:100%;height:auto;display:flex;position:relative;overflow:hidden}.scrollbar-container--full{height:100%}.scrollbar-container-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);padding-right:var(--scrollbar-width);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));flex-wrap:wrap;justify-content:flex-start;display:flex;overflow:hidden scroll}.scrollbar-container-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-container-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import './scss/index.scss';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
onclick: (data: Record<string, unknown> & {
|
|
4
|
-
active?: boolean;
|
|
5
4
|
toggle?: boolean;
|
|
6
|
-
}, content: unknown
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
}, content: unknown, state?: {
|
|
6
|
+
active: boolean;
|
|
7
|
+
}) => import("@esportsplus/template/build/types").RenderableTemplate;
|
|
8
|
+
onhover: (data: Record<string, unknown>, content: unknown, state?: {
|
|
9
|
+
active: boolean;
|
|
10
|
+
}) => import("@esportsplus/template/build/types").RenderableTemplate;
|
|
10
11
|
};
|
|
11
12
|
export default _default;
|
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
import { reactive } from '@esportsplus/reactivity';
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import { isArray, omit } from '@esportsplus/utilities';
|
|
4
|
-
import root from '
|
|
4
|
+
import { root } from '@esportsplus/ui';
|
|
5
5
|
import './scss/index.scss';
|
|
6
|
-
let queue = [], running = false, scheduled = false;
|
|
6
|
+
let parent = null, queue = [], running = false, scheduled = false;
|
|
7
7
|
function frame() {
|
|
8
8
|
if (running) {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
11
11
|
running = true;
|
|
12
|
-
let item;
|
|
12
|
+
let item, keep;
|
|
13
13
|
while (item = queue.pop()) {
|
|
14
|
-
item
|
|
14
|
+
if (parent === item.tooltip) {
|
|
15
|
+
keep = item;
|
|
16
|
+
continue;
|
|
17
|
+
}
|
|
18
|
+
item.fn();
|
|
19
|
+
}
|
|
20
|
+
if (keep) {
|
|
21
|
+
queue.push(keep);
|
|
15
22
|
}
|
|
16
23
|
running = false;
|
|
17
24
|
}
|
|
18
|
-
const onclick = (data, content) => {
|
|
19
|
-
let state = reactive({
|
|
20
|
-
active: data.active || false
|
|
21
|
-
});
|
|
25
|
+
const onclick = (data, content, state = reactive({ active: false })) => {
|
|
22
26
|
if (!isArray(data.class)) {
|
|
23
27
|
data.class = data.class ? [data.class] : [];
|
|
24
28
|
}
|
|
@@ -30,16 +34,23 @@ const onclick = (data, content) => {
|
|
|
30
34
|
class='tooltip'
|
|
31
35
|
onclick='${function (e) {
|
|
32
36
|
let active = true, node = e.target;
|
|
33
|
-
if (data.toggle &&
|
|
37
|
+
if (this === node || (data.toggle && this.contains(node))) {
|
|
34
38
|
active = !state.active;
|
|
35
39
|
}
|
|
36
|
-
if (this
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
if (parent !== this && !parent?.contains(this)) {
|
|
41
|
+
parent = this.parentElement?.closest('.tooltip');
|
|
42
|
+
}
|
|
43
|
+
frame();
|
|
44
|
+
if (parent === this) {
|
|
45
|
+
parent = null;
|
|
46
|
+
return;
|
|
39
47
|
}
|
|
40
48
|
state.active = active;
|
|
41
49
|
if (active) {
|
|
42
|
-
queue.push(
|
|
50
|
+
queue.push({
|
|
51
|
+
fn: () => state.active = false,
|
|
52
|
+
tooltip: this
|
|
53
|
+
});
|
|
43
54
|
}
|
|
44
55
|
if (!scheduled) {
|
|
45
56
|
root.onclick.push(() => {
|
|
@@ -55,8 +66,7 @@ const onclick = (data, content) => {
|
|
|
55
66
|
</div>
|
|
56
67
|
`;
|
|
57
68
|
};
|
|
58
|
-
const onhover = (data, content) => {
|
|
59
|
-
let state = reactive({ active: data.active || false });
|
|
69
|
+
const onhover = (data, content, state = reactive({ active: false })) => {
|
|
60
70
|
if (!isArray(data.class)) {
|
|
61
71
|
data.class = data.class ? [data.class] : [];
|
|
62
72
|
}
|
package/package.json
CHANGED
|
@@ -45,11 +45,15 @@
|
|
|
45
45
|
&-container {
|
|
46
46
|
display: flex;
|
|
47
47
|
flex-flow: column;
|
|
48
|
-
height:
|
|
48
|
+
height: auto;
|
|
49
49
|
overflow: hidden;
|
|
50
50
|
position: relative;
|
|
51
51
|
width: 100%;
|
|
52
52
|
|
|
53
|
+
&--full {
|
|
54
|
+
height: 100%;
|
|
55
|
+
}
|
|
56
|
+
|
|
53
57
|
&-content {
|
|
54
58
|
display: flex;
|
|
55
59
|
flex-wrap: wrap;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { reactive } from '@esportsplus/reactivity';
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import { isArray, omit } from '@esportsplus/utilities';
|
|
4
|
-
import root from '
|
|
4
|
+
import { root } from '@esportsplus/ui';
|
|
5
5
|
import './scss/index.scss';
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
let
|
|
8
|
+
let parent: HTMLElement | null | undefined = null,
|
|
9
|
+
queue: { fn: VoidFunction, tooltip: HTMLElement }[] = [],
|
|
9
10
|
running = false,
|
|
10
11
|
scheduled = false;
|
|
11
12
|
|
|
@@ -17,21 +18,30 @@ function frame() {
|
|
|
17
18
|
|
|
18
19
|
running = true;
|
|
19
20
|
|
|
20
|
-
let item
|
|
21
|
+
let item,
|
|
22
|
+
keep;
|
|
21
23
|
|
|
22
24
|
while (item = queue.pop()) {
|
|
23
|
-
item
|
|
25
|
+
if (parent === item.tooltip) {
|
|
26
|
+
keep = item;
|
|
27
|
+
continue;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
item.fn();
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (keep) {
|
|
34
|
+
queue.push(keep);
|
|
24
35
|
}
|
|
25
36
|
|
|
26
37
|
running = false;
|
|
27
38
|
}
|
|
28
39
|
|
|
29
40
|
|
|
30
|
-
const onclick = (
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
41
|
+
const onclick = (
|
|
42
|
+
data: Record<string, unknown> & { toggle?: boolean }, content: unknown,
|
|
43
|
+
state: { active: boolean } = reactive({ active: false })
|
|
44
|
+
) => {
|
|
35
45
|
if (!isArray(data.class)) {
|
|
36
46
|
data.class = data.class ? [data.class] : [];
|
|
37
47
|
}
|
|
@@ -47,19 +57,28 @@ const onclick = (data: Record<string, unknown> & { active?: boolean, toggle?: bo
|
|
|
47
57
|
let active = true,
|
|
48
58
|
node = e.target as Node | null;
|
|
49
59
|
|
|
50
|
-
if (data.toggle &&
|
|
60
|
+
if (this === node || (data.toggle && this.contains(node))) {
|
|
51
61
|
active = !state.active;
|
|
52
62
|
}
|
|
53
63
|
|
|
54
|
-
if (this
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
if (parent !== this && !parent?.contains(this)) {
|
|
65
|
+
parent = this.parentElement?.closest('.tooltip');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
frame();
|
|
69
|
+
|
|
70
|
+
if (parent === this) {
|
|
71
|
+
parent = null;
|
|
72
|
+
return;
|
|
57
73
|
}
|
|
58
74
|
|
|
59
75
|
state.active = active;
|
|
60
76
|
|
|
61
77
|
if (active) {
|
|
62
|
-
queue.push(
|
|
78
|
+
queue.push({
|
|
79
|
+
fn: () => state.active = false,
|
|
80
|
+
tooltip: this
|
|
81
|
+
});
|
|
63
82
|
}
|
|
64
83
|
|
|
65
84
|
if (!scheduled) {
|
|
@@ -77,9 +96,11 @@ const onclick = (data: Record<string, unknown> & { active?: boolean, toggle?: bo
|
|
|
77
96
|
`;
|
|
78
97
|
};
|
|
79
98
|
|
|
80
|
-
const onhover = (
|
|
81
|
-
|
|
82
|
-
|
|
99
|
+
const onhover = (
|
|
100
|
+
data: Record<string, unknown>,
|
|
101
|
+
content: unknown,
|
|
102
|
+
state: { active: boolean } = reactive({ active: false })
|
|
103
|
+
) => {
|
|
83
104
|
if (!isArray(data.class)) {
|
|
84
105
|
data.class = data.class ? [data.class] : [];
|
|
85
106
|
}
|