@esportsplus/ui 0.17.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,17 +1,24 @@
|
|
|
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
|
}
|
|
@@ -27,16 +34,23 @@ const onclick = (data, content, state = reactive({ active: false })) => {
|
|
|
27
34
|
class='tooltip'
|
|
28
35
|
onclick='${function (e) {
|
|
29
36
|
let active = true, node = e.target;
|
|
30
|
-
if (data.toggle &&
|
|
37
|
+
if (this === node || (data.toggle && this.contains(node))) {
|
|
31
38
|
active = !state.active;
|
|
32
39
|
}
|
|
33
|
-
if (this
|
|
34
|
-
|
|
35
|
-
|
|
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;
|
|
36
47
|
}
|
|
37
48
|
state.active = active;
|
|
38
49
|
if (active) {
|
|
39
|
-
queue.push(
|
|
50
|
+
queue.push({
|
|
51
|
+
fn: () => state.active = false,
|
|
52
|
+
tooltip: this
|
|
53
|
+
});
|
|
40
54
|
}
|
|
41
55
|
if (!scheduled) {
|
|
42
56
|
root.onclick.push(() => {
|
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,10 +18,20 @@ 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;
|
|
@@ -46,19 +57,28 @@ const onclick = (
|
|
|
46
57
|
let active = true,
|
|
47
58
|
node = e.target as Node | null;
|
|
48
59
|
|
|
49
|
-
if (data.toggle &&
|
|
60
|
+
if (this === node || (data.toggle && this.contains(node))) {
|
|
50
61
|
active = !state.active;
|
|
51
62
|
}
|
|
52
63
|
|
|
53
|
-
if (this
|
|
54
|
-
|
|
55
|
-
|
|
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;
|
|
56
73
|
}
|
|
57
74
|
|
|
58
75
|
state.active = active;
|
|
59
76
|
|
|
60
77
|
if (active) {
|
|
61
|
-
queue.push(
|
|
78
|
+
queue.push({
|
|
79
|
+
fn: () => state.active = false,
|
|
80
|
+
tooltip: this
|
|
81
|
+
});
|
|
62
82
|
}
|
|
63
83
|
|
|
64
84
|
if (!scheduled) {
|