@mkbabb/glass-ui 3.10.0 → 3.11.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/dist/{ToggleGroupItem-Cev4pOVK.js → ToggleGroupItem-COu_4IW4.js} +17 -13
- package/dist/api/index.d.ts +1 -1
- package/dist/api.js +2 -2
- package/dist/aurora.js +77 -77
- package/dist/components/custom/aurora/constants/presets.d.ts +62 -5
- package/dist/components/custom/aurora/index.d.ts +1 -1
- package/dist/components/custom/dock/GlassDock.vue.d.ts +5 -1
- package/dist/components/custom/expandable-container/ExpandableContainer.vue.d.ts +10 -7
- package/dist/components/custom/handmark/brush.d.ts +23 -0
- package/dist/components/custom/handmark/geometry.d.ts +20 -2
- package/dist/components/custom/handmark/index.d.ts +2 -2
- package/dist/components/custom/handmark/useHandMark.d.ts +26 -5
- package/dist/components/ui/toggle/Toggle.vue.d.ts +1 -1
- package/dist/components/ui/toggle/index.d.ts +1 -1
- package/dist/components/ui/toggle-group/ToggleGroup.vue.d.ts +7 -1
- package/dist/components/ui/toggle-group/ToggleGroupItem.vue.d.ts +3 -1
- package/dist/components/ui/toggle-group/toggleGroupContext.d.ts +13 -0
- package/dist/composables/dark/index.d.ts +1 -1
- package/dist/composables/dark/useGlobalDark.d.ts +21 -1
- package/dist/controls.js +1 -1
- package/dist/dark.d.ts +1 -1
- package/dist/dark.js +1 -1
- package/dist/dock.js +191 -174
- package/dist/expandable-container.js +67 -49
- package/dist/fourier-field.js +1 -1
- package/dist/glass-ui.css +1 -1
- package/dist/glass-ui.js +2 -2
- package/dist/handmark.js +176 -123
- package/dist/labeled-field.js +1 -1
- package/dist/{presets-Dkdv55Gt.js → presets-BP_ALM0m.js} +14 -1
- package/dist/{slider-CyzcxBoh.js → slider-ClgpP7EB.js} +1 -1
- package/dist/slider.js +1 -1
- package/dist/styles/animations.css +40 -0
- package/dist/styles/components.css +1 -1
- package/dist/styles/tokens.css +5 -0
- package/dist/styles/utilities.css +44 -13
- package/dist/toggle-group.js +1 -1
- package/dist/{useGlobalDark-d6waty-X.js → useGlobalDark-D1wgEqfW.js} +21 -2
- package/package.json +10 -4
- package/src/styles/animations.css +40 -0
- package/src/styles/tokens.css +5 -0
- package/src/styles/utilities.css +44 -13
package/dist/dock.js
CHANGED
|
@@ -6,10 +6,10 @@ import { t as i } from "./useTouchGate-WFyJYsth.js";
|
|
|
6
6
|
import { n as a, t as o } from "./createContext-B44Sah_H.js";
|
|
7
7
|
import { i as s, n as c, r as l, t as u } from "./dockContext-BKeIMmNk.js";
|
|
8
8
|
import { i as d, n as f, r as p, t as m } from "./TabsList-B8CVOQPC.js";
|
|
9
|
-
import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S,
|
|
10
|
-
import { DropdownMenuTrigger as H, Primitive as U, SelectIcon as
|
|
11
|
-
import { SpringProgress as
|
|
12
|
-
var
|
|
9
|
+
import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, getCurrentInstance as C, mergeModels as w, mergeProps as T, nextTick as E, normalizeClass as D, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, onUnmounted as O, openBlock as k, readonly as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, useAttrs as L, useId as re, useModel as R, useTemplateRef as z, watch as B, withCtx as V } from "vue";
|
|
10
|
+
import { DropdownMenuTrigger as H, Primitive as U, SelectIcon as ie, SelectTrigger as ae, useForwardProps as W } from "reka-ui";
|
|
11
|
+
import { SpringProgress as G } from "@mkbabb/keyframes.js";
|
|
12
|
+
var K = t("pause", [["rect", {
|
|
13
13
|
x: "14",
|
|
14
14
|
y: "3",
|
|
15
15
|
width: "5",
|
|
@@ -23,10 +23,10 @@ var ie = t("pause", [["rect", {
|
|
|
23
23
|
height: "18",
|
|
24
24
|
rx: "1",
|
|
25
25
|
key: "1wsw3u"
|
|
26
|
-
}]]),
|
|
26
|
+
}]]), oe = t("play", [["path", {
|
|
27
27
|
d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
|
|
28
28
|
key: "10ikf1"
|
|
29
|
-
}]]),
|
|
29
|
+
}]]), se = ["data-orientation", "aria-orientation"], ce = /* @__PURE__ */ S({
|
|
30
30
|
__name: "DockSeparator",
|
|
31
31
|
setup(e) {
|
|
32
32
|
let t = s(), n = g(() => t?.orientation.value ?? "horizontal"), r = g(() => n.value), i = g(() => n.value === "vertical" ? "horizontal" : "vertical");
|
|
@@ -35,19 +35,19 @@ var ie = t("pause", [["rect", {
|
|
|
35
35
|
role: "separator",
|
|
36
36
|
"data-orientation": r.value,
|
|
37
37
|
"aria-orientation": i.value
|
|
38
|
-
}, null, 8,
|
|
38
|
+
}, null, 8, se));
|
|
39
39
|
}
|
|
40
40
|
});
|
|
41
41
|
//#endregion
|
|
42
42
|
//#region src/components/custom/dock/composables/isTeleportedTarget.ts
|
|
43
|
-
function
|
|
43
|
+
function q(e, t) {
|
|
44
44
|
if (!(e instanceof Element)) return !1;
|
|
45
45
|
let n = e.closest("[data-glass-dock-portal]");
|
|
46
46
|
return n ? t ? n.getAttribute("data-glass-dock-owner") === t : !0 : !1;
|
|
47
47
|
}
|
|
48
48
|
//#endregion
|
|
49
49
|
//#region src/components/custom/dock/composables/useDockState.ts
|
|
50
|
-
function
|
|
50
|
+
function le(e) {
|
|
51
51
|
let { collapseDelay: t = 2500, rootEl: n, alwaysExpanded: r = !1, isTransitioning: i, dockId: a, onStateChange: o } = e, s = () => typeof r == "boolean" ? r : r.value, c = s(), l = j(c ? "pinned" : "collapsed"), u = j(c), d = j(c), f = null, p = j(0), m = g(() => p.value > 0), h = null, _ = null, v = !1, y = l.value;
|
|
52
52
|
function b() {
|
|
53
53
|
s() && (l.value = "pinned"), u.value = l.value !== "collapsed", d.value = l.value === "pinned", o && y !== l.value && o(l.value, y), y = l.value;
|
|
@@ -79,14 +79,14 @@ function se(e) {
|
|
|
79
79
|
}
|
|
80
80
|
v ||= (v = !0, x(), T(), l.value = "collapsed", b(), !1);
|
|
81
81
|
}
|
|
82
|
-
function
|
|
82
|
+
function D() {
|
|
83
83
|
if (s()) {
|
|
84
84
|
l.value = "pinned", b();
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
87
|
x(), l.value = "hover", b();
|
|
88
88
|
}
|
|
89
|
-
function
|
|
89
|
+
function ee() {
|
|
90
90
|
s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
|
|
91
91
|
}
|
|
92
92
|
function te(e) {
|
|
@@ -94,43 +94,43 @@ function se(e) {
|
|
|
94
94
|
if (p.value > 0) return;
|
|
95
95
|
if (e) {
|
|
96
96
|
let t = n.value;
|
|
97
|
-
if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) ||
|
|
97
|
+
if (t && e.relatedTarget instanceof Node && t.contains(e.relatedTarget) || q(e.relatedTarget, a)) return;
|
|
98
98
|
}
|
|
99
99
|
w();
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
function
|
|
102
|
+
function ne() {
|
|
103
103
|
s() || (x(), l.value === "collapsed" && (l.value = "hover", b()));
|
|
104
104
|
}
|
|
105
|
-
function
|
|
105
|
+
function k(e) {
|
|
106
106
|
if (s() || l.value !== "hover" || p.value > 0) return;
|
|
107
107
|
let t = e.currentTarget;
|
|
108
|
-
e.relatedTarget && t.contains(e.relatedTarget) ||
|
|
108
|
+
e.relatedTarget && t.contains(e.relatedTarget) || q(e.relatedTarget, a) || w();
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function A() {
|
|
111
111
|
if (s()) {
|
|
112
112
|
l.value = "pinned", b();
|
|
113
113
|
return;
|
|
114
114
|
}
|
|
115
115
|
x(), l.value = "pinned", b();
|
|
116
116
|
}
|
|
117
|
-
function
|
|
117
|
+
function M() {
|
|
118
118
|
p.value++, x();
|
|
119
119
|
}
|
|
120
|
-
function
|
|
120
|
+
function N() {
|
|
121
121
|
p.value = Math.max(0, p.value - 1), p.value === 0 && l.value === "hover" && (x(), f = setTimeout(() => {
|
|
122
122
|
p.value === 0 && l.value === "hover" && w();
|
|
123
123
|
}, Math.min(t, 800)));
|
|
124
124
|
}
|
|
125
|
-
function
|
|
125
|
+
function P(e) {
|
|
126
126
|
if (s() || i?.value) return;
|
|
127
127
|
let t = n.value;
|
|
128
|
-
!t || t.contains(e.target) ||
|
|
128
|
+
!t || t.contains(e.target) || q(e.target, a) || E();
|
|
129
129
|
}
|
|
130
130
|
return B(u, (e) => {
|
|
131
131
|
e ? (C(), _ = requestAnimationFrame(() => {
|
|
132
|
-
_ = null, u.value && (document.addEventListener("pointerdown",
|
|
133
|
-
document.removeEventListener("pointerdown",
|
|
132
|
+
_ = null, u.value && (document.addEventListener("pointerdown", P, !0), h = () => {
|
|
133
|
+
document.removeEventListener("pointerdown", P, !0), h = null;
|
|
134
134
|
});
|
|
135
135
|
})) : C();
|
|
136
136
|
}), typeof r == "boolean" ? r && (l.value = "pinned", b()) : B(r, (e) => {
|
|
@@ -146,29 +146,29 @@ function se(e) {
|
|
|
146
146
|
expanded: u,
|
|
147
147
|
isPinned: d,
|
|
148
148
|
isHeld: m,
|
|
149
|
-
onMouseEnter:
|
|
149
|
+
onMouseEnter: ee,
|
|
150
150
|
onMouseLeave: te,
|
|
151
|
-
onFocusIn:
|
|
152
|
-
onFocusOut:
|
|
153
|
-
onClickCollapsed:
|
|
154
|
-
keepOpen:
|
|
155
|
-
release:
|
|
156
|
-
expand:
|
|
151
|
+
onFocusIn: ne,
|
|
152
|
+
onFocusOut: k,
|
|
153
|
+
onClickCollapsed: A,
|
|
154
|
+
keepOpen: M,
|
|
155
|
+
release: N,
|
|
156
|
+
expand: D,
|
|
157
157
|
collapse: E
|
|
158
158
|
};
|
|
159
159
|
}
|
|
160
160
|
//#endregion
|
|
161
161
|
//#region src/components/custom/dock/composables/dockMorphContext.ts
|
|
162
|
-
var
|
|
162
|
+
var J = {
|
|
163
163
|
response: .32,
|
|
164
164
|
dampingFraction: .7
|
|
165
165
|
}, Y = o("glass-ui:dock-morph-context");
|
|
166
166
|
Y.KEY;
|
|
167
|
-
function
|
|
167
|
+
function ue(e) {
|
|
168
168
|
Y.provide(e);
|
|
169
169
|
}
|
|
170
|
-
var
|
|
171
|
-
function
|
|
170
|
+
var de = Y.use;
|
|
171
|
+
function fe(e) {
|
|
172
172
|
let { rootEl: t, outerEl: n, outerActiveLayer: r, outerAxis: i } = e, a = null, o = /* @__PURE__ */ new Set();
|
|
173
173
|
function s() {
|
|
174
174
|
return t.value;
|
|
@@ -208,9 +208,9 @@ function de(e) {
|
|
|
208
208
|
if (!s()) return;
|
|
209
209
|
let e = a !== null && !a.settled ? a.velocity : 0;
|
|
210
210
|
if (!a || a.settled) {
|
|
211
|
-
c(), a = new
|
|
212
|
-
response:
|
|
213
|
-
dampingFraction:
|
|
211
|
+
c(), a = new G({
|
|
212
|
+
response: J.response,
|
|
213
|
+
dampingFraction: J.dampingFraction,
|
|
214
214
|
initial: 0,
|
|
215
215
|
respectReducedMotion: !0
|
|
216
216
|
});
|
|
@@ -312,17 +312,20 @@ function de(e) {
|
|
|
312
312
|
}
|
|
313
313
|
//#endregion
|
|
314
314
|
//#region src/components/custom/dock/GlassDock.vue?vue&type=script&setup=true&lang.ts
|
|
315
|
-
var
|
|
315
|
+
var pe = [
|
|
316
316
|
"data-density",
|
|
317
317
|
"data-held",
|
|
318
318
|
"data-container-name"
|
|
319
|
-
],
|
|
319
|
+
], me = {
|
|
320
320
|
key: 0,
|
|
321
321
|
class: "dock-persistent"
|
|
322
|
-
},
|
|
323
|
-
key:
|
|
322
|
+
}, he = ["inert"], ge = ["inert"], _e = {
|
|
323
|
+
key: 0,
|
|
324
|
+
class: "dock-layers dock-layer--vertical-body"
|
|
325
|
+
}, ve = { class: "dock-layer--vertical-section" }, ye = {
|
|
326
|
+
key: 1,
|
|
324
327
|
class: "dock-layers dock-layer--vertical-body"
|
|
325
|
-
},
|
|
328
|
+
}, be = ["inert"], xe = ["inert"], Se = /* @__PURE__ */ S({
|
|
326
329
|
__name: "GlassDock",
|
|
327
330
|
props: {
|
|
328
331
|
variant: {},
|
|
@@ -348,154 +351,168 @@ var fe = [
|
|
|
348
351
|
function a(e) {
|
|
349
352
|
return e.variant !== "rail" && e.variant !== "instrument-strip";
|
|
350
353
|
}
|
|
351
|
-
let o = g(() => a(n) ? n.collapseDelay ?? 2e3 : 2e3), s = g(() => a(n) ? n.startCollapsed ?? !0 : !1), l = g(() => a(n) ? n.layout ?? "linear" : "linear"), u = z("dockEl"), d = z("layersEl"), f = g(() => n.variant ?? "dock"), p = g(() => n.shape ?? "pill"), m = l, _ = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation ?? "horizontal"), S = g(() => n.density ?? "comfortable"),
|
|
354
|
+
let o = g(() => a(n) ? n.collapseDelay ?? 2e3 : 2e3), s = g(() => a(n) ? n.startCollapsed ?? !0 : !1), l = g(() => a(n) ? n.layout ?? "linear" : "linear"), u = z("dockEl"), d = z("layersEl"), f = g(() => n.variant ?? "dock"), p = g(() => n.shape ?? "pill"), m = l, _ = g(() => n.variant === "rail" || n.variant === "instrument-strip" ? "vertical" : n.orientation ?? "horizontal"), S = g(() => n.density ?? "comfortable"), w = g(() => n.overflow === "scroll" ? _.value === "vertical" ? "dock-scroll-y" : "dock-scroll-x" : null), T = C(), E = g(() => {
|
|
355
|
+
let e = T?.vnode.props;
|
|
356
|
+
if (e && !(!("alwaysExpanded" in e) && !("always-expanded" in e))) return n.alwaysExpanded;
|
|
357
|
+
}), O = g(() => (E.value ?? _.value === "vertical") || l.value === "grid"), A = g(() => n.fitContent || n.variant === "rail" || n.variant === "instrument-strip"), M = j(!1), P = i(o.value), F = `glass-dock-${re()}`, L = null, R = 0, { expanded: V, isPinned: H, isHeld: U, onMouseEnter: ie, onMouseLeave: ae, onFocusIn: W, onFocusOut: G, onClickCollapsed: K, keepOpen: oe, release: se, expand: q, collapse: J } = le({
|
|
352
358
|
collapseDelay: o.value,
|
|
353
359
|
rootEl: u,
|
|
354
|
-
alwaysExpanded:
|
|
355
|
-
isTransitioning:
|
|
356
|
-
dockId:
|
|
360
|
+
alwaysExpanded: O,
|
|
361
|
+
isTransitioning: M,
|
|
362
|
+
dockId: F
|
|
357
363
|
});
|
|
358
364
|
c({
|
|
359
|
-
id:
|
|
365
|
+
id: F,
|
|
360
366
|
orientation: _,
|
|
361
367
|
layout: m,
|
|
362
|
-
keepOpen:
|
|
363
|
-
release:
|
|
364
|
-
held:
|
|
368
|
+
keepOpen: oe,
|
|
369
|
+
release: se,
|
|
370
|
+
held: U
|
|
365
371
|
});
|
|
366
|
-
let
|
|
372
|
+
let Y = g(() => O.value || V.value), { context: de, onOuterTransitionEnd: Se } = fe({
|
|
367
373
|
rootEl: u,
|
|
368
374
|
outerEl: d,
|
|
369
|
-
outerActiveLayer: g(() =>
|
|
375
|
+
outerActiveLayer: g(() => Y.value ? "full" : "summary"),
|
|
370
376
|
outerAxis: g(() => "horizontal")
|
|
371
377
|
});
|
|
372
|
-
|
|
373
|
-
let
|
|
374
|
-
function
|
|
378
|
+
ue(de);
|
|
379
|
+
let X = g(() => ({ "view-transition-name": F.replace(/[^a-zA-Z0-9_-]/g, "-") }));
|
|
380
|
+
function Z(e) {
|
|
375
381
|
let t = e.trim();
|
|
376
382
|
return t ? t.endsWith("ms") ? Number.parseFloat(t) : t.endsWith("s") ? Number.parseFloat(t) * 1e3 : Number.parseFloat(t) || 0 : 0;
|
|
377
383
|
}
|
|
378
|
-
function
|
|
379
|
-
let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(
|
|
384
|
+
function Ce(e) {
|
|
385
|
+
let t = getComputedStyle(e), n = t.transitionDuration.split(",").map(Z), r = t.transitionDelay.split(",").map(Z);
|
|
380
386
|
return Math.max(0, ...n.map((e, t) => e + (r[t] ?? r[0] ?? 0)));
|
|
381
387
|
}
|
|
382
|
-
function
|
|
383
|
-
let t =
|
|
388
|
+
function we(e) {
|
|
389
|
+
let t = Z(getComputedStyle(e).getPropertyValue("--duration-normal") || "0.3s");
|
|
384
390
|
return Math.max(t > 0 ? t * 2 : 0, 600);
|
|
385
391
|
}
|
|
386
392
|
function Q() {
|
|
387
|
-
|
|
393
|
+
L &&= (clearTimeout(L), null);
|
|
388
394
|
}
|
|
389
|
-
let
|
|
395
|
+
let Te = new Set([
|
|
390
396
|
"width",
|
|
391
397
|
"height",
|
|
392
398
|
"padding",
|
|
393
399
|
"transform"
|
|
394
400
|
]);
|
|
395
|
-
function
|
|
401
|
+
function Ee() {
|
|
396
402
|
let e = u.value;
|
|
397
403
|
if (!e) return;
|
|
398
|
-
let t = ++
|
|
399
|
-
Q(),
|
|
400
|
-
t ===
|
|
401
|
-
}, Math.max(
|
|
404
|
+
let t = ++R;
|
|
405
|
+
Q(), M.value = !0, L = setTimeout(() => {
|
|
406
|
+
t === R && (M.value = !1, L = null);
|
|
407
|
+
}, Math.max(Ce(e), we(e)) + 50);
|
|
402
408
|
}
|
|
403
|
-
function
|
|
404
|
-
e.target === u.value &&
|
|
409
|
+
function De(e) {
|
|
410
|
+
e.target === u.value && Te.has(e.propertyName) && (Q(), R++, M.value = !1);
|
|
405
411
|
}
|
|
406
|
-
|
|
407
|
-
(
|
|
412
|
+
ne(() => {
|
|
413
|
+
if (O.value) {
|
|
414
|
+
q();
|
|
415
|
+
return;
|
|
416
|
+
}
|
|
417
|
+
_.value === "horizontal" && !s.value && q();
|
|
408
418
|
});
|
|
409
419
|
function $() {
|
|
410
|
-
return _.value === "horizontal" && !
|
|
420
|
+
return _.value === "horizontal" && !O.value;
|
|
411
421
|
}
|
|
412
|
-
function
|
|
413
|
-
if (!$() ||
|
|
422
|
+
function Oe(e) {
|
|
423
|
+
if (!$() || Y.value) return;
|
|
414
424
|
let t = u.value, n = e.touches[0];
|
|
415
|
-
!t || !n ||
|
|
425
|
+
!t || !n || P.handleTouchStart(t, n.clientY);
|
|
416
426
|
}
|
|
417
|
-
function
|
|
418
|
-
$() &&
|
|
427
|
+
function ke(e) {
|
|
428
|
+
$() && P.handleScrollCheck(e);
|
|
419
429
|
}
|
|
420
|
-
function
|
|
430
|
+
function Ae() {
|
|
421
431
|
if (!$()) return;
|
|
422
|
-
let e =
|
|
423
|
-
|
|
432
|
+
let e = P.isActive.value;
|
|
433
|
+
P.handleTouchEnd(), !e && P.isActive.value && !Y.value && q();
|
|
424
434
|
}
|
|
425
|
-
return B(
|
|
426
|
-
!e &&
|
|
427
|
-
}), B(
|
|
428
|
-
|
|
429
|
-
}),
|
|
430
|
-
expanded:
|
|
431
|
-
isPinned:
|
|
432
|
-
isHeld:
|
|
433
|
-
isTransitioning:
|
|
435
|
+
return B(P.isActive, (e) => {
|
|
436
|
+
!e && V.value && !H.value && !O.value && J();
|
|
437
|
+
}), B(Y, (e) => {
|
|
438
|
+
Ee(), e || P.deactivate();
|
|
439
|
+
}), te(Q), t({
|
|
440
|
+
expanded: V,
|
|
441
|
+
isPinned: H,
|
|
442
|
+
isHeld: U,
|
|
443
|
+
isTransitioning: M,
|
|
434
444
|
expand: q,
|
|
435
|
-
collapse:
|
|
436
|
-
keepOpen:
|
|
437
|
-
release:
|
|
445
|
+
collapse: J,
|
|
446
|
+
keepOpen: oe,
|
|
447
|
+
release: se
|
|
438
448
|
}), (t, n) => (k(), y("div", {
|
|
439
449
|
ref_key: "dockEl",
|
|
440
450
|
ref: u,
|
|
441
|
-
class:
|
|
451
|
+
class: D(["glass-dock", [
|
|
442
452
|
_.value,
|
|
443
453
|
`variant-${f.value}`,
|
|
444
454
|
`shape-${p.value}`,
|
|
445
455
|
`layout-${I(m)}`,
|
|
446
|
-
|
|
456
|
+
w.value,
|
|
447
457
|
{
|
|
448
|
-
expanded:
|
|
449
|
-
collapsed: !
|
|
450
|
-
pinned: I(
|
|
451
|
-
"fit-content":
|
|
452
|
-
"always-expanded":
|
|
458
|
+
expanded: Y.value,
|
|
459
|
+
collapsed: !Y.value,
|
|
460
|
+
pinned: I(H),
|
|
461
|
+
"fit-content": A.value,
|
|
462
|
+
"always-expanded": O.value,
|
|
453
463
|
"dock-overflow-wrap": e.overflow === "wrap" && _.value !== "vertical"
|
|
454
464
|
},
|
|
455
465
|
e.position === "fixed" ? "fixed bottom-[var(--dock-pos)] left-1/2 -translate-x-1/2" : e.position === "sticky" ? "dock-sticky" : "dock-inline"
|
|
456
466
|
]]),
|
|
457
467
|
"data-density": S.value,
|
|
458
|
-
"data-held": I(
|
|
468
|
+
"data-held": I(U) || void 0,
|
|
459
469
|
"data-container-name": e.containerName || void 0,
|
|
460
|
-
style: ee([r.value,
|
|
461
|
-
onMouseenter: n[
|
|
462
|
-
onMouseleave: n[
|
|
463
|
-
onFocusin: n[
|
|
464
|
-
onFocusout: n[
|
|
465
|
-
onTouchstart:
|
|
466
|
-
onTouchmove:
|
|
467
|
-
onTouchend:
|
|
468
|
-
onTransitionend:
|
|
469
|
-
onTransitioncancel:
|
|
470
|
-
}, [t.$slots.persistent ? (k(), y("div",
|
|
470
|
+
style: ee([r.value, X.value]),
|
|
471
|
+
onMouseenter: n[3] ||= (...e) => I(ie) && I(ie)(...e),
|
|
472
|
+
onMouseleave: n[4] ||= (e) => I(ae)(e),
|
|
473
|
+
onFocusin: n[5] ||= (...e) => I(W) && I(W)(...e),
|
|
474
|
+
onFocusout: n[6] ||= (...e) => I(G) && I(G)(...e),
|
|
475
|
+
onTouchstart: Oe,
|
|
476
|
+
onTouchmove: ke,
|
|
477
|
+
onTouchend: Ae,
|
|
478
|
+
onTransitionend: De,
|
|
479
|
+
onTransitioncancel: De
|
|
480
|
+
}, [t.$slots.persistent ? (k(), y("div", me, [N(t.$slots, "persistent")])) : v("", !0), _.value === "horizontal" ? (k(), y("div", {
|
|
471
481
|
key: 1,
|
|
472
482
|
ref_key: "layersEl",
|
|
473
483
|
ref: d,
|
|
474
484
|
class: "dock-layers",
|
|
475
|
-
onTransitionend: n[1] ||= (...e) => I(
|
|
485
|
+
onTransitionend: n[1] ||= (...e) => I(Se) && I(Se)(...e)
|
|
476
486
|
}, [b("div", {
|
|
477
|
-
class:
|
|
478
|
-
inert: !I(
|
|
479
|
-
}, [N(t.$slots, "default")], 10,
|
|
480
|
-
class:
|
|
481
|
-
inert: I(
|
|
482
|
-
onClick: n[0] ||= (...e) => I(
|
|
483
|
-
}, [N(t.$slots, "collapsed")], 10,
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
487
|
+
class: D(["dock-layer dock-layer--full", { "is-active": Y.value }]),
|
|
488
|
+
inert: !I(V) || void 0
|
|
489
|
+
}, [N(t.$slots, "default")], 10, he), b("div", {
|
|
490
|
+
class: D(["dock-layer dock-layer--summary", { "is-active": !Y.value }]),
|
|
491
|
+
inert: I(V) || void 0,
|
|
492
|
+
onClick: n[0] ||= (...e) => I(K) && I(K)(...e)
|
|
493
|
+
}, [N(t.$slots, "collapsed")], 10, ge)], 544)) : (k(), y(h, { key: 2 }, [O.value ? (k(), y("div", _e, [N(t.$slots, "default"), t.$slots.collapsed ? (k(), y(h, { key: 0 }, [x(ce), b("div", ve, [N(t.$slots, "collapsed")])], 64)) : v("", !0)])) : (k(), y("div", ye, [b("div", {
|
|
494
|
+
class: D(["dock-layer dock-layer--full", { "is-active": Y.value }]),
|
|
495
|
+
inert: !I(V) || void 0
|
|
496
|
+
}, [N(t.$slots, "default")], 10, be), b("div", {
|
|
497
|
+
class: D(["dock-layer dock-layer--summary", { "is-active": !Y.value }]),
|
|
498
|
+
inert: I(V) || void 0,
|
|
499
|
+
onClick: n[2] ||= (...e) => I(K) && I(K)(...e)
|
|
500
|
+
}, [N(t.$slots, "collapsed")], 10, xe)]))], 64))], 46, pe));
|
|
501
|
+
}
|
|
502
|
+
}), X = a("glass-ui:dock-layer-group", "[glass-ui:dock] <DockLayer> must be used inside <DockLayerGroup>");
|
|
503
|
+
X.KEY;
|
|
504
|
+
function Z(e) {
|
|
505
|
+
X.provide(e);
|
|
489
506
|
}
|
|
490
|
-
var
|
|
491
|
-
|
|
507
|
+
var Ce = X.use;
|
|
508
|
+
X.useOptional;
|
|
492
509
|
//#endregion
|
|
493
510
|
//#region src/components/custom/dock/composables/useLayerTransition.ts
|
|
494
|
-
var
|
|
511
|
+
var we = {
|
|
495
512
|
response: .32,
|
|
496
513
|
dampingFraction: .7
|
|
497
514
|
};
|
|
498
|
-
function
|
|
515
|
+
function Q(e) {
|
|
499
516
|
let { containerEl: t, activeLayer: n, axis: r } = e, i = g(() => r?.value === "vertical" ? "height" : "width"), a = g(() => i.value === "width" ? "inline-size" : "block-size"), o = (e) => e.getBoundingClientRect()[i.value], s = j(n.value), c = j(null), l = 0, u = null, d = null;
|
|
500
517
|
function f() {
|
|
501
518
|
u &&= (u.dispose(), null), d = null;
|
|
@@ -514,9 +531,9 @@ function be(e) {
|
|
|
514
531
|
h(e, t);
|
|
515
532
|
return;
|
|
516
533
|
}
|
|
517
|
-
e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new
|
|
518
|
-
response:
|
|
519
|
-
dampingFraction:
|
|
534
|
+
e.style.setProperty("--dock-morph-from", `${r}px`), e.style.setProperty("--dock-morph-to", `${i}px`), t.style.setProperty("--dock-morph-t", "0"), t.setAttribute("data-morphing", ""), o || (f(), u = new G({
|
|
535
|
+
response: we.response,
|
|
536
|
+
dampingFraction: we.dampingFraction,
|
|
520
537
|
initial: 0,
|
|
521
538
|
respectReducedMotion: !0
|
|
522
539
|
}), d = e);
|
|
@@ -555,9 +572,9 @@ function be(e) {
|
|
|
555
572
|
}
|
|
556
573
|
//#endregion
|
|
557
574
|
//#region src/components/custom/dock/DockLayerGroup.vue?vue&type=script&setup=true&lang.ts
|
|
558
|
-
var
|
|
575
|
+
var Te = { key: 1 }, Ee = { key: 2 }, De = /* @__PURE__ */ S({
|
|
559
576
|
__name: "DockLayerGroup",
|
|
560
|
-
props: /* @__PURE__ */
|
|
577
|
+
props: /* @__PURE__ */ w({
|
|
561
578
|
orientation: {},
|
|
562
579
|
showRail: {
|
|
563
580
|
type: Boolean,
|
|
@@ -577,16 +594,16 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
577
594
|
function c(e) {
|
|
578
595
|
i.value = i.value.filter((t) => t.id !== e);
|
|
579
596
|
}
|
|
580
|
-
let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = g(() => l.value === "vertical" ? "horizontal" : "vertical"), S =
|
|
597
|
+
let l = g(() => t.orientation ?? r?.orientation.value ?? "horizontal"), u = g(() => l.value === "vertical" ? "horizontal" : "vertical"), S = de(), C, w, T;
|
|
581
598
|
if (S) {
|
|
582
599
|
let e = S.registerGroup({
|
|
583
600
|
containerEl: a,
|
|
584
601
|
activeLayer: n,
|
|
585
602
|
axis: l
|
|
586
603
|
});
|
|
587
|
-
C = e.currentLayer, w = e.leavingLayer, T = () => {},
|
|
604
|
+
C = e.currentLayer, w = e.leavingLayer, T = () => {}, te(() => e.release());
|
|
588
605
|
} else {
|
|
589
|
-
let e =
|
|
606
|
+
let e = Q({
|
|
590
607
|
containerEl: a,
|
|
591
608
|
activeLayer: n,
|
|
592
609
|
axis: l,
|
|
@@ -597,28 +614,28 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
597
614
|
});
|
|
598
615
|
C = A(e.currentLayer), w = A(e.leavingLayer), T = e.onTransitionEnd;
|
|
599
616
|
}
|
|
600
|
-
let
|
|
601
|
-
"view-transition-name": `gl-dock-stack-${
|
|
617
|
+
let E = typeof document < "u" && "startViewTransition" in document, ne = re(), O = g(() => E ? {
|
|
618
|
+
"view-transition-name": `gl-dock-stack-${ne.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
|
|
602
619
|
"view-transition-class": "gl-dock-layer"
|
|
603
620
|
} : void 0);
|
|
604
|
-
|
|
621
|
+
Z({
|
|
605
622
|
register: o,
|
|
606
623
|
unregister: c,
|
|
607
624
|
currentLayerId: C,
|
|
608
625
|
leavingLayerId: w
|
|
609
626
|
});
|
|
610
|
-
function
|
|
627
|
+
function L(e) {
|
|
611
628
|
return typeof e == "object" && !!e;
|
|
612
629
|
}
|
|
613
|
-
let
|
|
614
|
-
function
|
|
615
|
-
|
|
630
|
+
let B = j(!1);
|
|
631
|
+
function H() {
|
|
632
|
+
B.value || (B.value = !0, r?.keepOpen());
|
|
616
633
|
}
|
|
617
|
-
function
|
|
634
|
+
function U(e) {
|
|
618
635
|
let t = e.relatedTarget, n = e.currentTarget;
|
|
619
|
-
t && n?.contains(t) ||
|
|
636
|
+
t && n?.contains(t) || B.value && (B.value = !1, r?.release());
|
|
620
637
|
}
|
|
621
|
-
return (t, r) => (k(), y("div", { class:
|
|
638
|
+
return (t, r) => (k(), y("div", { class: D(["dock-layer-group", [l.value, `rail-${e.railPosition}`]]) }, [e.showRail && i.value.length > 1 ? (k(), _(I(d), {
|
|
622
639
|
key: 0,
|
|
623
640
|
modelValue: n.value,
|
|
624
641
|
"onUpdate:modelValue": r[0] ||= (e) => n.value = e,
|
|
@@ -626,10 +643,10 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
626
643
|
"as-child": !0
|
|
627
644
|
}, {
|
|
628
645
|
default: V(() => [x(I(m), {
|
|
629
|
-
class:
|
|
646
|
+
class: D(["dock-layer-rail", e.railPosition]),
|
|
630
647
|
indicator: !1,
|
|
631
|
-
onFocusin:
|
|
632
|
-
onFocusout:
|
|
648
|
+
onFocusin: H,
|
|
649
|
+
onFocusout: U
|
|
633
650
|
}, {
|
|
634
651
|
default: V(() => [(k(!0), y(h, null, M(i.value, (e) => (k(), _(I(p), {
|
|
635
652
|
key: e.id,
|
|
@@ -638,10 +655,10 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
638
655
|
title: e.label,
|
|
639
656
|
"aria-label": e.label ?? e.id
|
|
640
657
|
}, {
|
|
641
|
-
default: V(() => [
|
|
658
|
+
default: V(() => [L(e.icon) ? (k(), _(P(e.icon), {
|
|
642
659
|
key: 0,
|
|
643
660
|
class: "size-4"
|
|
644
|
-
})) : typeof e.icon == "string" ? (k(), y("span",
|
|
661
|
+
})) : typeof e.icon == "string" ? (k(), y("span", Te, F(e.icon), 1)) : (k(), y("span", Ee, F((e.label ?? e.id).charAt(0)), 1))]),
|
|
645
662
|
_: 2
|
|
646
663
|
}, 1032, [
|
|
647
664
|
"value",
|
|
@@ -655,15 +672,15 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
655
672
|
ref_key: "containerEl",
|
|
656
673
|
ref: a,
|
|
657
674
|
class: "dock-layer-stack",
|
|
658
|
-
style: ee(
|
|
675
|
+
style: ee(O.value),
|
|
659
676
|
onTransitionend: r[1] ||= (...e) => I(T) && I(T)(...e)
|
|
660
677
|
}, [N(t.$slots, "default")], 36)], 2));
|
|
661
678
|
}
|
|
662
|
-
}),
|
|
679
|
+
}), $ = [
|
|
663
680
|
"inert",
|
|
664
681
|
"aria-hidden",
|
|
665
682
|
"tabindex"
|
|
666
|
-
],
|
|
683
|
+
], Oe = /* @__PURE__ */ S({
|
|
667
684
|
__name: "DockLayer",
|
|
668
685
|
props: {
|
|
669
686
|
id: {},
|
|
@@ -671,14 +688,14 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
671
688
|
icon: {}
|
|
672
689
|
},
|
|
673
690
|
setup(e) {
|
|
674
|
-
let t = e, n =
|
|
675
|
-
|
|
691
|
+
let t = e, n = Ce();
|
|
692
|
+
ne(() => {
|
|
676
693
|
n.register({
|
|
677
694
|
id: t.id,
|
|
678
695
|
label: t.label,
|
|
679
696
|
icon: t.icon
|
|
680
697
|
});
|
|
681
|
-
}),
|
|
698
|
+
}), te(() => {
|
|
682
699
|
n.unregister(t.id);
|
|
683
700
|
});
|
|
684
701
|
let r = g(() => n.currentLayerId.value === t.id), i = g(() => n.leavingLayerId.value === t.id), a = z("hostEl");
|
|
@@ -686,20 +703,20 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
686
703
|
!e || t || typeof document < "u" && (() => {
|
|
687
704
|
let e = document.activeElement;
|
|
688
705
|
return !e || e === document.body ? !0 : !!e.closest("[inert]");
|
|
689
|
-
})() && (await
|
|
706
|
+
})() && (await E(), a.value?.focus());
|
|
690
707
|
}), (e, t) => (k(), y("div", {
|
|
691
708
|
ref_key: "hostEl",
|
|
692
709
|
ref: a,
|
|
693
|
-
class:
|
|
710
|
+
class: D(["dock-layer-item-host", {
|
|
694
711
|
"is-active": r.value,
|
|
695
712
|
"is-leaving": i.value
|
|
696
713
|
}]),
|
|
697
714
|
inert: r.value ? void 0 : !0,
|
|
698
715
|
"aria-hidden": r.value ? void 0 : !0,
|
|
699
716
|
tabindex: r.value ? -1 : void 0
|
|
700
|
-
}, [N(e.$slots, "default")], 10,
|
|
717
|
+
}, [N(e.$slots, "default")], 10, $));
|
|
701
718
|
}
|
|
702
|
-
}),
|
|
719
|
+
}), ke = /* @__PURE__ */ S({
|
|
703
720
|
__name: "DockIconButton",
|
|
704
721
|
props: {
|
|
705
722
|
compact: {
|
|
@@ -722,7 +739,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
722
739
|
},
|
|
723
740
|
setup(t) {
|
|
724
741
|
let n = t, i = g(() => e("dock-icon-button glass-specular-track", { "dock-icon-button--compact": n.compact }, n.class)), { specularStyle: a, onPointerMove: o } = r(), s = g(() => !n.asChild && n.as === "button" ? { type: n.type } : {});
|
|
725
|
-
return (e, n) => (k(), _(I(U),
|
|
742
|
+
return (e, n) => (k(), _(I(U), T({
|
|
726
743
|
as: t.as,
|
|
727
744
|
"as-child": t.asChild
|
|
728
745
|
}, s.value, {
|
|
@@ -740,7 +757,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
740
757
|
"onPointermove"
|
|
741
758
|
]));
|
|
742
759
|
}
|
|
743
|
-
}),
|
|
760
|
+
}), Ae = /* @__PURE__ */ S({
|
|
744
761
|
__name: "DockBackgroundToggle",
|
|
745
762
|
props: {
|
|
746
763
|
paused: {
|
|
@@ -756,18 +773,18 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
756
773
|
function a() {
|
|
757
774
|
r("update:paused", !n.paused);
|
|
758
775
|
}
|
|
759
|
-
return (t, n) => (k(), _(
|
|
776
|
+
return (t, n) => (k(), _(ke, {
|
|
760
777
|
type: "button",
|
|
761
778
|
"aria-pressed": e.paused,
|
|
762
779
|
"aria-label": i.value,
|
|
763
780
|
title: i.value,
|
|
764
781
|
onClick: a
|
|
765
782
|
}, {
|
|
766
|
-
default: V(() => [e.paused ? (k(), _(I(
|
|
783
|
+
default: V(() => [e.paused ? (k(), _(I(oe), {
|
|
767
784
|
key: 0,
|
|
768
785
|
size: 18,
|
|
769
786
|
"aria-hidden": "true"
|
|
770
|
-
})) : (k(), _(I(
|
|
787
|
+
})) : (k(), _(I(K), {
|
|
771
788
|
key: 1,
|
|
772
789
|
size: 18,
|
|
773
790
|
"aria-hidden": "true"
|
|
@@ -779,7 +796,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
779
796
|
"title"
|
|
780
797
|
]));
|
|
781
798
|
}
|
|
782
|
-
}),
|
|
799
|
+
}), je = /* @__PURE__ */ S({
|
|
783
800
|
__name: "DockTabButton",
|
|
784
801
|
props: {
|
|
785
802
|
as: { default: "button" },
|
|
@@ -800,7 +817,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
800
817
|
return (e, n) => (k(), _(I(U), {
|
|
801
818
|
as: t.as,
|
|
802
819
|
"as-child": t.asChild,
|
|
803
|
-
class:
|
|
820
|
+
class: D(a.value)
|
|
804
821
|
}, {
|
|
805
822
|
default: V(() => [N(e.$slots, "default")]),
|
|
806
823
|
_: 3
|
|
@@ -810,7 +827,7 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
810
827
|
"class"
|
|
811
828
|
]));
|
|
812
829
|
}
|
|
813
|
-
}),
|
|
830
|
+
}), Me = /* @__PURE__ */ S({
|
|
814
831
|
__name: "DockSelectTrigger",
|
|
815
832
|
props: {
|
|
816
833
|
disabled: { type: Boolean },
|
|
@@ -826,19 +843,19 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
826
843
|
] }
|
|
827
844
|
},
|
|
828
845
|
setup(t) {
|
|
829
|
-
let r = t, i =
|
|
846
|
+
let r = t, i = W(g(() => {
|
|
830
847
|
let { class: e, ...t } = r;
|
|
831
848
|
return t;
|
|
832
849
|
}));
|
|
833
|
-
return (t, a) => (k(), _(I(
|
|
834
|
-
default: V(() => [N(t.$slots, "default"), x(I(
|
|
850
|
+
return (t, a) => (k(), _(I(ae), T(I(i), { class: I(e)("dock-select-trigger", r.class) }), {
|
|
851
|
+
default: V(() => [N(t.$slots, "default"), x(I(ie), { "as-child": "" }, {
|
|
835
852
|
default: V(() => [N(t.$slots, "icon", {}, () => [x(I(n), { class: "dock-select-trigger__chevron" })])]),
|
|
836
853
|
_: 3
|
|
837
854
|
})]),
|
|
838
855
|
_: 3
|
|
839
856
|
}, 16, ["class"]));
|
|
840
857
|
}
|
|
841
|
-
}),
|
|
858
|
+
}), Ne = /* @__PURE__ */ S({
|
|
842
859
|
__name: "DockDropdownTrigger",
|
|
843
860
|
props: {
|
|
844
861
|
disabled: { type: Boolean },
|
|
@@ -854,15 +871,15 @@ var xe = { key: 1 }, $ = { key: 2 }, Se = /* @__PURE__ */ S({
|
|
|
854
871
|
] }
|
|
855
872
|
},
|
|
856
873
|
setup(t) {
|
|
857
|
-
let n = t, r =
|
|
874
|
+
let n = t, r = W(g(() => {
|
|
858
875
|
let { class: e, ...t } = n;
|
|
859
876
|
return t;
|
|
860
877
|
}));
|
|
861
|
-
return (t, i) => (k(), _(I(H),
|
|
878
|
+
return (t, i) => (k(), _(I(H), T(I(r), { class: I(e)("dock-dropdown-trigger", n.class) }), {
|
|
862
879
|
default: V(() => [N(t.$slots, "default")]),
|
|
863
880
|
_: 3
|
|
864
881
|
}, 16, ["class"]));
|
|
865
882
|
}
|
|
866
883
|
});
|
|
867
884
|
//#endregion
|
|
868
|
-
export { u as DOCK_CONTEXT_KEY,
|
|
885
|
+
export { u as DOCK_CONTEXT_KEY, Ae as DockBackgroundToggle, Ne as DockDropdownTrigger, ke as DockIconButton, Oe as DockLayer, De as DockLayerGroup, Me as DockSelectTrigger, ce as DockSeparator, je as DockTabButton, Se as GlassDock, c as provideDockContext, l as useDockContext, Q as useLayerTransition, s as useOptionalDockContext };
|