beercss 3.5.8 → 3.6.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.
- package/README.md +9 -9
- package/dist/cdn/beer.css +99 -27
- package/dist/cdn/beer.js +49 -38
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/index.d.ts +6 -5
- package/package.json +32 -25
- package/src/cdn/beer.ts +26 -31
- package/src/cdn/elements/dialogs.css +0 -8
- package/src/cdn/elements/menus.css +62 -1
- package/src/cdn/elements/navigations.css +35 -0
- package/src/cdn/elements/tabs.css +13 -15
- package/src/cdn/helpers/waves.css +6 -4
- package/src/cdn/interfaces.ts +4 -0
- package/src/cdn/settings/fonts.css +3 -3
package/README.md
CHANGED
|
@@ -123,20 +123,20 @@ From jsdelivr.net.
|
|
|
123
123
|
|
|
124
124
|
```html
|
|
125
125
|
// with html
|
|
126
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
127
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
128
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.
|
|
126
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
127
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/beer.min.js"></script>
|
|
128
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
129
129
|
```
|
|
130
130
|
|
|
131
131
|
```css
|
|
132
132
|
// with css
|
|
133
|
-
@import "https://cdn.jsdelivr.net/npm/beercss@3.
|
|
133
|
+
@import "https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/beer.min.css";
|
|
134
134
|
```
|
|
135
135
|
|
|
136
136
|
```js
|
|
137
137
|
// with javascript
|
|
138
|
-
import "https://cdn.jsdelivr.net/npm/beercss@3.
|
|
139
|
-
import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.
|
|
138
|
+
import "https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/beer.min.js";
|
|
139
|
+
import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js";
|
|
140
140
|
```
|
|
141
141
|
|
|
142
142
|
### NPM
|
|
@@ -187,9 +187,9 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
|
|
|
187
187
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
188
188
|
<meta name="google" content="notranslate">
|
|
189
189
|
<title>Hello world</title>
|
|
190
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
191
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.
|
|
192
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.
|
|
190
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/beer.min.css" rel="stylesheet">
|
|
191
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/beer.min.js"></script>
|
|
192
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
|
|
193
193
|
</head>
|
|
194
194
|
<body class="dark">
|
|
195
195
|
<nav class="left drawer l">
|
package/dist/cdn/beer.css
CHANGED
|
@@ -102,7 +102,7 @@ body.dark {
|
|
|
102
102
|
font-display: block;
|
|
103
103
|
src:
|
|
104
104
|
url("material-symbols-outlined.woff2") format("woff2"),
|
|
105
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.
|
|
105
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/material-symbols-outlined.woff2") format("woff2");
|
|
106
106
|
}
|
|
107
107
|
/* rounded icons */
|
|
108
108
|
@font-face {
|
|
@@ -112,7 +112,7 @@ body.dark {
|
|
|
112
112
|
font-display: block;
|
|
113
113
|
src:
|
|
114
114
|
url("material-symbols-rounded.woff2") format("woff2"),
|
|
115
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.
|
|
115
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/material-symbols-rounded.woff2") format("woff2");
|
|
116
116
|
}
|
|
117
117
|
/* sharp icons */
|
|
118
118
|
@font-face {
|
|
@@ -122,7 +122,7 @@ body.dark {
|
|
|
122
122
|
font-display: block;
|
|
123
123
|
src:
|
|
124
124
|
url("material-symbols-sharp.woff2") format("woff2"),
|
|
125
|
-
url("https://cdn.jsdelivr.net/npm/beercss@3.
|
|
125
|
+
url("https://cdn.jsdelivr.net/npm/beercss@3.6.1/dist/cdn/material-symbols-sharp.woff2") format("woff2");
|
|
126
126
|
}
|
|
127
127
|
* {
|
|
128
128
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -1552,7 +1552,8 @@ p {
|
|
|
1552
1552
|
.wave::after,
|
|
1553
1553
|
.chip::after,
|
|
1554
1554
|
.wave.light::after,
|
|
1555
|
-
:is(.button, button)::after
|
|
1555
|
+
:is(.button, button)::after,
|
|
1556
|
+
:is(nav.tabbed, .tabs) > a::after {
|
|
1556
1557
|
content: "";
|
|
1557
1558
|
position: absolute;
|
|
1558
1559
|
inset: 0;
|
|
@@ -1569,15 +1570,16 @@ p {
|
|
|
1569
1570
|
.wave.row::after,
|
|
1570
1571
|
.chip::after,
|
|
1571
1572
|
:is(.button, button).border::after,
|
|
1572
|
-
:is(.button, button).transparent::after
|
|
1573
|
+
:is(.button, button).transparent::after ,
|
|
1574
|
+
:is(nav.tabbed, .tabs) > a::after {
|
|
1573
1575
|
background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
|
|
1574
1576
|
}
|
|
1575
|
-
:is(.wave, .chip, .button, button):is(:focus-visible, :hover)::after {
|
|
1577
|
+
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
|
|
1576
1578
|
background-size: 15000%;
|
|
1577
1579
|
opacity: 1;
|
|
1578
1580
|
transition: background-size var(--speed2) linear;
|
|
1579
1581
|
}
|
|
1580
|
-
:is(.wave, .chip, .button, button):active::after {
|
|
1582
|
+
:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):active::after {
|
|
1581
1583
|
background-size: 5000%;
|
|
1582
1584
|
opacity: 0;
|
|
1583
1585
|
transition: none;
|
|
@@ -2068,12 +2070,6 @@ dialog.medium:is(.top, .bottom) {
|
|
|
2068
2070
|
dialog.large:is(.top, .bottom) {
|
|
2069
2071
|
block-size: 32rem;
|
|
2070
2072
|
}
|
|
2071
|
-
dialog > a.row:is(:hover, .active) {
|
|
2072
|
-
background-color: var(--secondary-container);
|
|
2073
|
-
}
|
|
2074
|
-
dialog > .row {
|
|
2075
|
-
padding: 0.75rem;
|
|
2076
|
-
}
|
|
2077
2073
|
summary.none {
|
|
2078
2074
|
list-style-type: none;
|
|
2079
2075
|
}
|
|
@@ -2880,7 +2876,9 @@ menu.no-wrap {
|
|
|
2880
2876
|
}
|
|
2881
2877
|
menu.active,
|
|
2882
2878
|
menu:not([data-ui]):active,
|
|
2883
|
-
:not([data-ui]):focus-within > menu
|
|
2879
|
+
:not([data-ui]):focus-within > menu,
|
|
2880
|
+
menu > a:hover + menu,
|
|
2881
|
+
menu > menu:hover {
|
|
2884
2882
|
opacity: 1;
|
|
2885
2883
|
visibility: visible;
|
|
2886
2884
|
transform: scale(1) translateY(100%);
|
|
@@ -2937,6 +2935,52 @@ menu.left {
|
|
|
2937
2935
|
menu.right {
|
|
2938
2936
|
inset: auto auto 0 0;
|
|
2939
2937
|
}
|
|
2938
|
+
menu:has(> menu),
|
|
2939
|
+
menu > menu {
|
|
2940
|
+
overflow: unset;
|
|
2941
|
+
white-space: nowrap;
|
|
2942
|
+
inline-size: auto;
|
|
2943
|
+
min-inline-size: 12rem;
|
|
2944
|
+
max-block-size: none;
|
|
2945
|
+
}
|
|
2946
|
+
menu > menu {
|
|
2947
|
+
---y: 1;
|
|
2948
|
+
inset: auto auto calc(3rem * var(---y)) 100%;
|
|
2949
|
+
}
|
|
2950
|
+
[dir=rtl] menu > menu {
|
|
2951
|
+
---y: 1;
|
|
2952
|
+
inset: auto 100% calc(3rem * var(---y)) auto;
|
|
2953
|
+
}
|
|
2954
|
+
menu > menu:nth-last-child(2) {
|
|
2955
|
+
---y: 2;
|
|
2956
|
+
}
|
|
2957
|
+
menu > menu:nth-last-child(3) {
|
|
2958
|
+
---y: 3;
|
|
2959
|
+
}
|
|
2960
|
+
menu > menu:nth-last-child(4) {
|
|
2961
|
+
---y: 4;
|
|
2962
|
+
}
|
|
2963
|
+
menu > menu:nth-last-child(5) {
|
|
2964
|
+
---y: 5;
|
|
2965
|
+
}
|
|
2966
|
+
menu > menu:nth-last-child(6) {
|
|
2967
|
+
---y: 6;
|
|
2968
|
+
}
|
|
2969
|
+
menu > menu:nth-last-child(7) {
|
|
2970
|
+
---y: 7;
|
|
2971
|
+
}
|
|
2972
|
+
menu > menu:nth-last-child(8) {
|
|
2973
|
+
---y: 8;
|
|
2974
|
+
}
|
|
2975
|
+
menu > menu:nth-last-child(9) {
|
|
2976
|
+
---y: 9;
|
|
2977
|
+
}
|
|
2978
|
+
menu > menu:nth-last-child(10) {
|
|
2979
|
+
---y: 10;
|
|
2980
|
+
}
|
|
2981
|
+
menu > menu:nth-last-child(11) {
|
|
2982
|
+
---y: 11;
|
|
2983
|
+
}
|
|
2940
2984
|
nav > :is(ol, ul),
|
|
2941
2985
|
nav > :is(ol, ul) > li {
|
|
2942
2986
|
all: unset;
|
|
@@ -2955,6 +2999,9 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) {
|
|
|
2955
2999
|
gap: 1rem;
|
|
2956
3000
|
margin: 0;
|
|
2957
3001
|
}
|
|
3002
|
+
a.row {
|
|
3003
|
+
min-block-size: 3rem;
|
|
3004
|
+
}
|
|
2958
3005
|
:is(nav, .row, .max) > :only-child,
|
|
2959
3006
|
nav > :is(ol, ul) > li > :only-child {
|
|
2960
3007
|
margin: 0;
|
|
@@ -3136,6 +3183,32 @@ nav:not(.left, .right) > .medium-space {
|
|
|
3136
3183
|
nav:not(.left, .right) > .large-space {
|
|
3137
3184
|
inline-size: 1.5rem;
|
|
3138
3185
|
}
|
|
3186
|
+
nav.tabbed {
|
|
3187
|
+
background-color: var(--surface-container);
|
|
3188
|
+
border-radius: 4rem !important;
|
|
3189
|
+
gap: 0rem;
|
|
3190
|
+
overflow-x: auto;
|
|
3191
|
+
block-size: 4rem;
|
|
3192
|
+
}
|
|
3193
|
+
nav.tabbed.small {
|
|
3194
|
+
block-size: 3rem;
|
|
3195
|
+
}
|
|
3196
|
+
nav.tabbed.large {
|
|
3197
|
+
block-size: 5rem;
|
|
3198
|
+
}
|
|
3199
|
+
nav.tabbed > a {
|
|
3200
|
+
border-radius: inherit;
|
|
3201
|
+
block-size: inherit;
|
|
3202
|
+
display: inline-flex;
|
|
3203
|
+
align-items: center;
|
|
3204
|
+
padding-inline: 1rem;
|
|
3205
|
+
gap: 0.5rem;
|
|
3206
|
+
font-size: 1rem;
|
|
3207
|
+
flex: 1;
|
|
3208
|
+
}
|
|
3209
|
+
nav.tabbed > a.active {
|
|
3210
|
+
background-color: var(--primary-container);
|
|
3211
|
+
}
|
|
3139
3212
|
@media only screen and (max-width: 600px) {
|
|
3140
3213
|
nav.top,
|
|
3141
3214
|
nav.bottom {
|
|
@@ -3881,10 +3954,6 @@ tfoot th.fixed {
|
|
|
3881
3954
|
white-space: nowrap;
|
|
3882
3955
|
border-block-end: 0.0625rem solid var(--surface-variant);
|
|
3883
3956
|
}
|
|
3884
|
-
.tabs.min {
|
|
3885
|
-
padding: 0 1rem;
|
|
3886
|
-
gap: 2rem;
|
|
3887
|
-
}
|
|
3888
3957
|
.tabs:not(.left-align, .right-align, .center-align) {
|
|
3889
3958
|
justify-content: space-around;
|
|
3890
3959
|
}
|
|
@@ -3897,29 +3966,32 @@ tfoot th.fixed {
|
|
|
3897
3966
|
font-weight: 500;
|
|
3898
3967
|
color: var(--on-surface-variant);
|
|
3899
3968
|
padding: 0.5rem 1rem;
|
|
3900
|
-
border-block-end: 0.125rem solid transparent;
|
|
3901
3969
|
text-align: center;
|
|
3902
3970
|
min-block-size: 3rem;
|
|
3903
3971
|
inline-size: 100%;
|
|
3904
3972
|
gap: 0.25rem;
|
|
3905
3973
|
}
|
|
3906
|
-
.tabs.min > a {
|
|
3907
|
-
inline-size: auto;
|
|
3908
|
-
padding: 0.5rem 0;
|
|
3909
|
-
}
|
|
3910
3974
|
.tabs.small > a {
|
|
3911
3975
|
min-block-size: 2rem;
|
|
3912
3976
|
}
|
|
3913
3977
|
.tabs.large > a {
|
|
3914
3978
|
min-block-size: 4rem;
|
|
3915
3979
|
}
|
|
3916
|
-
.tabs > a.active
|
|
3917
|
-
color: var(--primary);
|
|
3918
|
-
border-block-end: 0.125rem solid var(--primary);
|
|
3919
|
-
}
|
|
3980
|
+
.tabs > a.active,
|
|
3920
3981
|
.tabs > a.active > i {
|
|
3921
3982
|
color: var(--primary);
|
|
3922
3983
|
}
|
|
3984
|
+
.tabs > a.active::before {
|
|
3985
|
+
content: '';
|
|
3986
|
+
position: absolute;
|
|
3987
|
+
inset: auto 0 0 0;
|
|
3988
|
+
block-size: 0.125rem;
|
|
3989
|
+
background-color: var(--primary);
|
|
3990
|
+
}
|
|
3991
|
+
.tabs.min > a.active::before {
|
|
3992
|
+
margin: 0 auto;
|
|
3993
|
+
max-inline-size: min(100%, 4rem);
|
|
3994
|
+
}
|
|
3923
3995
|
.tabs:is(.left-align, .center-align, .right-align) > a {
|
|
3924
3996
|
inline-size: auto;
|
|
3925
3997
|
}
|
package/dist/cdn/beer.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
var beer = "";
|
|
2
1
|
let _timeoutSnackbar;
|
|
3
2
|
let _timeoutMutation;
|
|
4
3
|
let _timeoutMenu;
|
|
@@ -9,7 +8,7 @@ const _lastTheme = {
|
|
|
9
8
|
};
|
|
10
9
|
const _emptyNodeList = [];
|
|
11
10
|
async function wait(milliseconds) {
|
|
12
|
-
|
|
11
|
+
await new Promise((resolve) => setTimeout(resolve, milliseconds));
|
|
13
12
|
}
|
|
14
13
|
function guid() {
|
|
15
14
|
return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
|
@@ -20,21 +19,21 @@ function guid() {
|
|
|
20
19
|
}
|
|
21
20
|
function query(selector, element) {
|
|
22
21
|
try {
|
|
23
|
-
return typeof selector === "string" ? (element
|
|
22
|
+
return typeof selector === "string" ? (element ?? document).querySelector(selector) : selector;
|
|
24
23
|
} catch {
|
|
25
24
|
return null;
|
|
26
25
|
}
|
|
27
26
|
}
|
|
28
27
|
function queryAll(selector, element) {
|
|
29
28
|
try {
|
|
30
|
-
return typeof selector === "string" ? (element
|
|
29
|
+
return typeof selector === "string" ? (element ?? document).querySelectorAll(selector) : selector ?? _emptyNodeList;
|
|
31
30
|
} catch {
|
|
32
31
|
return _emptyNodeList;
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
function hasClass(element, name) {
|
|
36
|
-
var _a
|
|
37
|
-
return (
|
|
35
|
+
var _a;
|
|
36
|
+
return ((_a = element == null ? void 0 : element.classList) == null ? void 0 : _a.contains(name)) ?? false;
|
|
38
37
|
}
|
|
39
38
|
function hasTag(element, name) {
|
|
40
39
|
var _a;
|
|
@@ -75,7 +74,8 @@ function create(htmlAttributesAsJson) {
|
|
|
75
74
|
const element = document.createElement("div");
|
|
76
75
|
for (let i = 0, keys = Object.keys(htmlAttributesAsJson), n = keys.length; i < n; i++) {
|
|
77
76
|
const key = keys[i];
|
|
78
|
-
|
|
77
|
+
const value = htmlAttributesAsJson[key];
|
|
78
|
+
element.setAttribute(key, value);
|
|
79
79
|
}
|
|
80
80
|
return element;
|
|
81
81
|
}
|
|
@@ -151,7 +151,8 @@ function updateFile(target, e) {
|
|
|
151
151
|
const previousTarget = prev(target);
|
|
152
152
|
if (!hasType(previousTarget, "file"))
|
|
153
153
|
return;
|
|
154
|
-
|
|
154
|
+
previousTarget.click();
|
|
155
|
+
return;
|
|
155
156
|
}
|
|
156
157
|
const currentTarget = target;
|
|
157
158
|
const nextTarget = next(target);
|
|
@@ -167,7 +168,8 @@ function updateColor(target, e) {
|
|
|
167
168
|
const previousTarget = prev(target);
|
|
168
169
|
if (!hasType(previousTarget, "color"))
|
|
169
170
|
return;
|
|
170
|
-
|
|
171
|
+
previousTarget.click();
|
|
172
|
+
return;
|
|
171
173
|
}
|
|
172
174
|
const currentTarget = target;
|
|
173
175
|
const nextTarget = next(target);
|
|
@@ -226,8 +228,10 @@ function updateRange(target) {
|
|
|
226
228
|
function updateAllRanges(e) {
|
|
227
229
|
if (e) {
|
|
228
230
|
const input = e.target;
|
|
229
|
-
if (input.type === "range")
|
|
230
|
-
|
|
231
|
+
if (input.type === "range") {
|
|
232
|
+
updateRange(input);
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
231
235
|
}
|
|
232
236
|
const ranges = queryAll(".slider > input[type=range]");
|
|
233
237
|
if (!ranges.length)
|
|
@@ -243,22 +247,32 @@ async function open(from, to, options, e) {
|
|
|
243
247
|
if (!to)
|
|
244
248
|
return;
|
|
245
249
|
}
|
|
246
|
-
if (hasTag(to, "dialog"))
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
if (
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
250
|
+
if (hasTag(to, "dialog")) {
|
|
251
|
+
await dialog(from, to);
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
if (hasTag(to, "menu")) {
|
|
255
|
+
menu(from, to, e);
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
if (hasClass(to, "snackbar")) {
|
|
259
|
+
snackbar(from, to, options);
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
if (hasClass(to, "page")) {
|
|
263
|
+
page(from, to);
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
254
266
|
tab(from);
|
|
255
|
-
if (hasClass(to, "active"))
|
|
256
|
-
|
|
267
|
+
if (hasClass(to, "active")) {
|
|
268
|
+
removeClass(to, "active");
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
257
271
|
addClass(to, "active");
|
|
258
272
|
}
|
|
259
273
|
function tab(from) {
|
|
260
274
|
if (from.id && hasClass(from, "page"))
|
|
261
|
-
from = query(`[data-ui="#${from.id}"]`);
|
|
275
|
+
from = query(`[data-ui="#${from.id}"]`) ?? from;
|
|
262
276
|
const container = parent(from);
|
|
263
277
|
if (!hasClass(container, "tabs"))
|
|
264
278
|
return;
|
|
@@ -282,21 +296,16 @@ function menu(from, to, e) {
|
|
|
282
296
|
if (_timeoutMenu)
|
|
283
297
|
clearTimeout(_timeoutMenu);
|
|
284
298
|
_timeoutMenu = setTimeout(() => {
|
|
285
|
-
var _a
|
|
299
|
+
var _a;
|
|
286
300
|
on(document.body, "click", onClickDocument);
|
|
301
|
+
(_a = document.activeElement) == null ? void 0 : _a.blur();
|
|
287
302
|
tab(from);
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
const trustedActive = !query("menu", (_b = trustedFrom.closest("[data-ui]")) != null ? _b : void 0);
|
|
295
|
-
if (trustedTo && trustedTo !== trustedMenu)
|
|
296
|
-
return menu(trustedFrom, trustedTo);
|
|
297
|
-
if (!trustedTo && !trustedActive && trustedMenu)
|
|
298
|
-
return false;
|
|
299
|
-
return removeClass(to, "active");
|
|
303
|
+
const isActive = hasClass(to, "active");
|
|
304
|
+
const isEvent = !!((e == null ? void 0 : e.target) === from);
|
|
305
|
+
const isChild = !!from.closest("menu");
|
|
306
|
+
if (!isActive && isChild || isActive && isEvent) {
|
|
307
|
+
removeClass(to, "active");
|
|
308
|
+
return;
|
|
300
309
|
}
|
|
301
310
|
const menus = queryAll("menu.active");
|
|
302
311
|
for (let i = 0, n = menus.length; i < n; i++)
|
|
@@ -367,7 +376,7 @@ function snackbar(from, to, milliseconds) {
|
|
|
367
376
|
return;
|
|
368
377
|
_timeoutSnackbar = setTimeout(() => {
|
|
369
378
|
removeClass(to, "active");
|
|
370
|
-
}, milliseconds
|
|
379
|
+
}, milliseconds ?? 6e3);
|
|
371
380
|
}
|
|
372
381
|
function lastTheme() {
|
|
373
382
|
if (_lastTheme.light && _lastTheme.dark)
|
|
@@ -435,8 +444,10 @@ function setup() {
|
|
|
435
444
|
}
|
|
436
445
|
function ui(selector, options) {
|
|
437
446
|
if (selector) {
|
|
438
|
-
if (selector === "setup")
|
|
439
|
-
|
|
447
|
+
if (selector === "setup") {
|
|
448
|
+
setup();
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
440
451
|
if (selector === "guid")
|
|
441
452
|
return guid();
|
|
442
453
|
if (selector === "mode")
|