@done-coding/admin-core 0.15.1-alpha.0 → 0.16.1-alpha.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/es/components/app-layout/AppBody.vue.mjs +1 -1
- package/es/components/app-layout/AppBody.vue2.mjs +43 -39
- package/es/components/app-layout/AppPage.vue.mjs +2 -2
- package/es/components/app-layout/AppPage.vue2.mjs +114 -105
- package/es/components/display/TabsHeader.vue.mjs +2 -2
- package/es/components/display/TabsHeader.vue2.mjs +31 -32
- package/es/components/display/TabsRefineFlow.vue.mjs +30 -32
- package/es/components/display/TabsTile.vue.mjs +2 -2
- package/es/components/display/WatchSize.vue.mjs +34 -31
- package/es/components/form/FormMain.vue.mjs +2 -2
- package/es/components/form/FormMain.vue2.mjs +80 -75
- package/es/components/form/FormSearch.vue.mjs +1 -1
- package/es/components/form/FormSearch.vue2.mjs +82 -80
- package/es/components/form/FormSubmitPanel.vue2.mjs +11 -10
- package/es/components/form/use-layout-by-container.mjs +20 -0
- package/es/components/list-page/ListPage.vue.mjs +2 -2
- package/es/components/list-page/ListPage.vue2.mjs +167 -137
- package/es/components/list-page/use-sticky.mjs +41 -0
- package/es/components/modal/ConfirmModal.vue.mjs +3 -2
- package/es/components/modal/ConfirmModal.vue2.mjs +104 -55
- package/es/components/modal/DetailModal.vue.mjs +40 -34
- package/es/components/modal/ModalPorter.vue.mjs +20 -23
- package/es/components/table/TableMain.vue.mjs +1 -1
- package/es/components/table/TableMain.vue2.mjs +27 -28
- package/es/hooks/activated.mjs +16 -24
- package/es/hooks/use-breakpoint.mjs +17 -21
- package/es/hooks/use-channel-viewport-height.mjs +26 -8
- package/es/hooks/use-observe-size.mjs +26 -0
- package/es/index.mjs +177 -173
- package/es/inject/key.mjs +18 -15
- package/es/style.css +1 -1
- package/es/utils/dom.mjs +11 -1
- package/package.json +2 -2
- package/types/components/app-layout/AppPage.vue.d.ts +8 -0
- package/types/components/display/TabsTile.vue.d.ts +2 -2
- package/types/components/display/WatchSize.vue.d.ts +4 -0
- package/types/components/display/types.d.ts +1 -5
- package/types/components/form/FormItem.vue.d.ts +8 -8
- package/types/components/form/FormMain.vue.d.ts +1 -12
- package/types/components/form/FormSubmitPanel.vue.d.ts +1 -1
- package/types/components/form/types.d.ts +1 -0
- package/types/components/form/use-layout-by-container.d.ts +11 -0
- package/types/components/list-page/ListPage.vue.d.ts +6 -1
- package/types/components/list-page/types.d.ts +5 -0
- package/types/components/list-page/use-sticky.d.ts +19 -0
- package/types/components/modal/ConfirmModal.vue.d.ts +15 -3
- package/types/components/modal/DetailModal.vue.d.ts +4 -1
- package/types/components/panel/PanelItemNestForm.vue.d.ts +1 -1
- package/types/hooks/index.d.ts +1 -0
- package/types/hooks/use-channel-viewport-height.d.ts +2 -1
- package/types/hooks/use-observe-size.d.ts +7 -0
- package/types/inject/key.d.ts +8 -2
- package/types/injectInfo.json.d.ts +1 -1
- package/types/utils/dom.d.ts +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./AppBody.vue2.mjs";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import p from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const m = /* @__PURE__ */ p(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ p(o, [["__scopeId", "data-v-f97530b2"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
|
@@ -1,81 +1,85 @@
|
|
|
1
|
-
import { defineComponent as N, useCssVars as
|
|
2
|
-
import { ElAffix as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { APP_LAYOUT_APP_STORE_KEY as
|
|
1
|
+
import { defineComponent as N, useCssVars as H, inject as E, ref as g, computed as o, provide as a, readonly as T, watch as L, resolveComponent as F, openBlock as i, createElementBlock as Y, normalizeStyle as b, createElementVNode as $, createBlock as l, unref as S, withCtx as w, createVNode as A, createCommentVNode as c, KeepAlive as k, resolveDynamicComponent as O, renderSlot as D } from "vue";
|
|
2
|
+
import { ElAffix as G } from "element-plus";
|
|
3
|
+
import U from "./AppBreadcrumb.vue.mjs";
|
|
4
|
+
import M from "lodash/debounce";
|
|
5
|
+
import { APP_LAYOUT_APP_STORE_KEY as W, APP_LAYOUT_BRIDGE_KEY as z, BODY_CONTENT_VIEWPORT_HEIGHT as K, SCOPE_VIEWPORT_MAX_HEIGHT as j, BODY_CONTENT_VIEWPORT_RECT as X, BODY_CONTENT_VIEWPORT_INSET as q } from "../../inject/key.mjs";
|
|
6
6
|
import { useActivated as J } from "../../hooks/activated.mjs";
|
|
7
|
-
const
|
|
7
|
+
const ae = /* @__PURE__ */ N({
|
|
8
8
|
__name: "AppBody",
|
|
9
9
|
props: {
|
|
10
10
|
menuFlatList: { default: () => [] }
|
|
11
11
|
},
|
|
12
|
-
setup(
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
setup(P) {
|
|
13
|
+
H((e) => ({
|
|
14
|
+
v85c12e9e: s.value
|
|
15
15
|
}));
|
|
16
|
-
const t = E(
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
const t = E(W), u = E(z), C = u.APP_ROUTER_CONFIG, p = g(!1), m = o(() => u.APP_LAYOUT_BREADCRUMB_CONFIG.height), r = g(0);
|
|
17
|
+
a(K, T(r)), a(j, {
|
|
18
|
+
scope: void 0,
|
|
19
|
+
viewportMaxHeight: T(r),
|
|
20
|
+
parent: void 0
|
|
21
|
+
});
|
|
22
|
+
const y = o(() => t.bodyShimPadding), d = o(() => t.bodyShimStyle), R = o(() => t.bodyStyle), f = o(() => t.showBreadcrumb), V = o(() => parseFloat(`${t.bodyStyle.paddingTop ?? 0}`) || 0), x = o(() => ({
|
|
19
23
|
top: t.bodyStyle.paddingTop,
|
|
20
24
|
left: t.bodyStyle.paddingLeft,
|
|
21
25
|
right: t.bodyStyle.paddingRight,
|
|
22
|
-
bottom: `calc(100vh - ${t.bodyStyle.paddingTop} - ${
|
|
26
|
+
bottom: `calc(100vh - ${t.bodyStyle.paddingTop} - ${d.value.minHeight})`,
|
|
23
27
|
// app-body-shim 内边距:供 AppPage 各插槽 shim 朝 chrome 侧留呼吸
|
|
24
28
|
shimPadding: y.value
|
|
25
29
|
}));
|
|
26
|
-
|
|
30
|
+
a(X, x), a(
|
|
27
31
|
q,
|
|
28
32
|
o(() => t.contentViewportInset)
|
|
29
33
|
);
|
|
30
|
-
const
|
|
31
|
-
() => `calc(${
|
|
32
|
-
),
|
|
33
|
-
|
|
34
|
-
}, n =
|
|
34
|
+
const s = o(
|
|
35
|
+
() => `calc(${d.value.minHeight} - ${f.value && p.value ? m.value : 0}px - ${y.value * 2}px)`
|
|
36
|
+
), B = (e) => {
|
|
37
|
+
p.value = e;
|
|
38
|
+
}, n = M(() => {
|
|
35
39
|
const e = document.createElement("div");
|
|
36
|
-
e.style.height =
|
|
40
|
+
e.style.height = s.value, e.style.position = "fixed", e.style.left = "100%", e.style.top = "100%", e.style.opacity = "0", e.style.pointerEvents = "none", document.body.appendChild(e), r.value = e.clientHeight, e.remove();
|
|
37
41
|
}, 16);
|
|
38
|
-
return
|
|
42
|
+
return L(s, () => {
|
|
39
43
|
n();
|
|
40
44
|
}), J((e) => {
|
|
41
45
|
typeof window > "u" || (e.isActivated ? (n(), window.addEventListener("resize", n)) : (window.removeEventListener("resize", n), n.cancel()));
|
|
42
46
|
}), (e, Q) => {
|
|
43
|
-
const
|
|
47
|
+
const I = F("RouterView");
|
|
44
48
|
return i(), Y("div", {
|
|
45
49
|
class: "app-body",
|
|
46
|
-
style:
|
|
50
|
+
style: b(R.value)
|
|
47
51
|
}, [
|
|
48
52
|
$("div", {
|
|
49
53
|
class: "app-body-shim",
|
|
50
|
-
style:
|
|
54
|
+
style: b(d.value)
|
|
51
55
|
}, [
|
|
52
|
-
f.value ? (i(),
|
|
56
|
+
f.value ? (i(), l(S(G), {
|
|
53
57
|
key: 0,
|
|
54
|
-
offset:
|
|
58
|
+
offset: V.value
|
|
55
59
|
}, {
|
|
56
|
-
default:
|
|
57
|
-
|
|
58
|
-
height:
|
|
59
|
-
menuFlatList:
|
|
60
|
-
onShow:
|
|
60
|
+
default: w(() => [
|
|
61
|
+
A(U, {
|
|
62
|
+
height: m.value,
|
|
63
|
+
menuFlatList: P.menuFlatList,
|
|
64
|
+
onShow: B
|
|
61
65
|
}, null, 8, ["height", "menuFlatList"])
|
|
62
66
|
]),
|
|
63
67
|
_: 1
|
|
64
|
-
}, 8, ["offset"])) :
|
|
65
|
-
|
|
66
|
-
default:
|
|
68
|
+
}, 8, ["offset"])) : c("", !0),
|
|
69
|
+
A(I, null, {
|
|
70
|
+
default: w(({
|
|
67
71
|
Component: v,
|
|
68
72
|
route: {
|
|
69
73
|
path: _,
|
|
70
74
|
meta: { keepAlive: h }
|
|
71
75
|
}
|
|
72
76
|
}) => [
|
|
73
|
-
(i(),
|
|
74
|
-
max: S(
|
|
77
|
+
(i(), l(k, {
|
|
78
|
+
max: S(C).keepAliveMaxCount
|
|
75
79
|
}, [
|
|
76
|
-
h ? (i(),
|
|
80
|
+
h ? (i(), l(O(v), { key: _ })) : c("", !0)
|
|
77
81
|
], 1032, ["max"])),
|
|
78
|
-
h ?
|
|
82
|
+
h ? c("", !0) : (i(), l(O(v), { key: _ }))
|
|
79
83
|
]),
|
|
80
84
|
_: 1
|
|
81
85
|
})
|
|
@@ -86,5 +90,5 @@ const ie = /* @__PURE__ */ N({
|
|
|
86
90
|
}
|
|
87
91
|
});
|
|
88
92
|
export {
|
|
89
|
-
|
|
93
|
+
ae as default
|
|
90
94
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./AppPage.vue2.mjs";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import p from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const c = /* @__PURE__ */ p(o, [["__scopeId", "data-v-8fb8acc9"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
c as default
|
|
7
7
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as oe, useCssVars as ae, computed as t, useSlots as se, ref as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { computeAppPageReducedViewportHeight as
|
|
6
|
-
import { BODY_CONTENT_VIEWPORT_RECT as
|
|
7
|
-
import { useActivated as
|
|
8
|
-
const
|
|
1
|
+
import { defineComponent as oe, useCssVars as ae, computed as t, useSlots as se, ref as n, shallowRef as le, inject as H, provide as W, readonly as ie, openBlock as v, createElementBlock as ne, normalizeStyle as s, createElementVNode as d, createVNode as pe, unref as c, withCtx as g, renderSlot as f, createBlock as B, createCommentVNode as R } from "vue";
|
|
2
|
+
import A from "lodash/debounce";
|
|
3
|
+
import re from "../modal/ModalShelf.vue.mjs";
|
|
4
|
+
import E from "../display/WatchSize.vue.mjs";
|
|
5
|
+
import { computeAppPageReducedViewportHeight as ue, computeAppPageContentInset as ve, computeAppPageReducedViewportWidth as de, computeAppPageSlotStyles as ce, computeAppPageSlotShimStyles as ge } from "./app-page-geometry.mjs";
|
|
6
|
+
import { BODY_CONTENT_VIEWPORT_RECT as fe, SCOPE_VIEWPORT_MAX_HEIGHT as I, BODY_CONTENT_VIEWPORT_HEIGHT as he, BODY_CONTENT_VIEWPORT_INSET as me, APP_PAGE_CONTENT_INSET as be } from "../../inject/key.mjs";
|
|
7
|
+
import { useActivated as M } from "../../hooks/activated.mjs";
|
|
8
|
+
const ye = "--app-viewport-max-height", _e = /* @__PURE__ */ oe({
|
|
9
9
|
name: "AppPage",
|
|
10
10
|
__name: "AppPage",
|
|
11
11
|
props: {
|
|
@@ -17,41 +17,45 @@ const me = "--app-viewport-max-height", Ee = /* @__PURE__ */ oe({
|
|
|
17
17
|
topBg: {},
|
|
18
18
|
bottomBg: {},
|
|
19
19
|
leftBg: {},
|
|
20
|
-
rightBg: {}
|
|
20
|
+
rightBg: {},
|
|
21
|
+
topObserveResize: { type: Boolean, default: !1 },
|
|
22
|
+
bottomObserveResize: { type: Boolean, default: !1 },
|
|
23
|
+
leftObserveResize: { type: Boolean, default: !1 },
|
|
24
|
+
rightObserveResize: { type: Boolean, default: !1 }
|
|
21
25
|
},
|
|
22
|
-
setup(
|
|
26
|
+
setup(r) {
|
|
23
27
|
ae((e) => ({
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
v292949d5: p.value.top,
|
|
29
|
+
v45d97caa: p.value.bottom,
|
|
30
|
+
v0807b0f2: p.value.left,
|
|
31
|
+
f841aac8: p.value.right,
|
|
32
|
+
f7b4d374: p.value.width,
|
|
33
|
+
v32838eb2: p.value.height,
|
|
34
|
+
v5c736bbc: a.nextViewportMaxHeight
|
|
31
35
|
}));
|
|
32
|
-
const a =
|
|
36
|
+
const a = r, L = t(() => ({
|
|
33
37
|
background: a.background,
|
|
34
38
|
...a.fullViewport ? {
|
|
35
|
-
[a.fullMode]: `var(${
|
|
39
|
+
[a.fullMode]: `var(${ye})`
|
|
36
40
|
} : {}
|
|
37
|
-
})),
|
|
38
|
-
h.value = e;
|
|
39
|
-
}, q = (e) => {
|
|
41
|
+
})), h = se(), D = t(() => !!h.top), F = t(() => !!h.bottom), G = t(() => !!h.left), Y = t(() => !!h.right), m = n(0), b = n(0), P = n(0), _ = n(0), X = (e) => {
|
|
40
42
|
m.value = e;
|
|
43
|
+
}, q = (e) => {
|
|
44
|
+
b.value = e;
|
|
41
45
|
}, J = (e) => {
|
|
42
|
-
|
|
46
|
+
P.value = e;
|
|
43
47
|
}, K = (e) => {
|
|
44
|
-
|
|
45
|
-
}, l = le(),
|
|
48
|
+
_.value = e;
|
|
49
|
+
}, l = le(), $ = n({
|
|
46
50
|
top: "0px",
|
|
47
51
|
left: "0px",
|
|
48
52
|
right: "0px",
|
|
49
53
|
bottom: "0px"
|
|
50
|
-
}),
|
|
54
|
+
}), i = H(fe, void 0), Q = !i, u = A(() => {
|
|
51
55
|
const e = l.value;
|
|
52
56
|
if (!e || typeof window > "u") return;
|
|
53
57
|
const o = e.getBoundingClientRect();
|
|
54
|
-
|
|
58
|
+
$.value = {
|
|
55
59
|
top: `${o.top}px`,
|
|
56
60
|
left: `${o.left}px`,
|
|
57
61
|
right: `${window.innerWidth - o.right}px`,
|
|
@@ -59,58 +63,59 @@ const me = "--app-viewport-max-height", Ee = /* @__PURE__ */ oe({
|
|
|
59
63
|
};
|
|
60
64
|
}, 16);
|
|
61
65
|
if (Q && typeof window < "u") {
|
|
62
|
-
const e = typeof ResizeObserver < "u" ? new ResizeObserver(() =>
|
|
63
|
-
|
|
64
|
-
o.isActivated ? (
|
|
66
|
+
const e = typeof ResizeObserver < "u" ? new ResizeObserver(() => u()) : void 0;
|
|
67
|
+
M((o) => {
|
|
68
|
+
o.isActivated ? (u(), e && l.value && e.observe(l.value), window.addEventListener("resize", u)) : (e == null || e.disconnect(), window.removeEventListener("resize", u), u.cancel());
|
|
65
69
|
});
|
|
66
70
|
}
|
|
67
71
|
const U = t(() => {
|
|
68
|
-
const e =
|
|
69
|
-
return e ? { top: e.top, left: e.left, right: e.right, bottom: e.bottom } :
|
|
70
|
-
}),
|
|
72
|
+
const e = i == null ? void 0 : i.value;
|
|
73
|
+
return e ? { top: e.top, left: e.left, right: e.right, bottom: e.bottom } : $.value;
|
|
74
|
+
}), y = t(() => {
|
|
71
75
|
var e;
|
|
72
|
-
return ((e =
|
|
76
|
+
return ((e = i == null ? void 0 : i.value) == null ? void 0 : e.shimPadding) ?? 0;
|
|
73
77
|
}), T = t(() => ({
|
|
74
|
-
topH:
|
|
75
|
-
bottomH:
|
|
76
|
-
leftW:
|
|
77
|
-
rightW:
|
|
78
|
-
})),
|
|
79
|
-
() =>
|
|
80
|
-
|
|
78
|
+
topH: m.value,
|
|
79
|
+
bottomH: b.value,
|
|
80
|
+
leftW: P.value,
|
|
81
|
+
rightW: _.value
|
|
82
|
+
})), w = H(I, void 0), k = t(
|
|
83
|
+
() => ue(
|
|
84
|
+
(w == null ? void 0 : w.viewportMaxHeight.value) ?? 0,
|
|
81
85
|
T.value,
|
|
82
|
-
|
|
86
|
+
y.value
|
|
83
87
|
)
|
|
84
88
|
);
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
W(he, k), W(I, {
|
|
90
|
+
scope: void 0,
|
|
91
|
+
viewportMaxHeight: k,
|
|
92
|
+
parent: w
|
|
93
|
+
});
|
|
94
|
+
const Z = n({
|
|
87
95
|
top: 0,
|
|
88
96
|
bottom: 0,
|
|
89
97
|
left: 0,
|
|
90
98
|
right: 0
|
|
91
|
-
}, j =
|
|
92
|
-
|
|
93
|
-
t(() => Z)
|
|
94
|
-
), C = t(
|
|
95
|
-
() => ue(j.value, T.value, a.gap)
|
|
99
|
+
}), j = H(me, Z), C = t(
|
|
100
|
+
() => ve(j.value, T.value, a.gap)
|
|
96
101
|
);
|
|
97
|
-
|
|
98
|
-
const
|
|
99
|
-
l.value && (
|
|
100
|
-
},
|
|
102
|
+
W(be, ie(C));
|
|
103
|
+
const V = n(0), N = () => {
|
|
104
|
+
l.value && (V.value = l.value.clientWidth);
|
|
105
|
+
}, z = A(N, 16);
|
|
101
106
|
if (typeof window < "u") {
|
|
102
|
-
const e = typeof ResizeObserver < "u" ? new ResizeObserver(() =>
|
|
103
|
-
|
|
104
|
-
o.isActivated ? (
|
|
107
|
+
const e = typeof ResizeObserver < "u" ? new ResizeObserver(() => z()) : void 0;
|
|
108
|
+
M((o) => {
|
|
109
|
+
o.isActivated ? (N(), e && l.value ? e.observe(l.value) : window.addEventListener("resize", z)) : (e == null || e.disconnect(), window.removeEventListener("resize", z), z.cancel());
|
|
105
110
|
});
|
|
106
111
|
}
|
|
107
112
|
const ee = t(
|
|
108
|
-
() =>
|
|
109
|
-
|
|
113
|
+
() => de(
|
|
114
|
+
V.value,
|
|
110
115
|
T.value,
|
|
111
|
-
|
|
116
|
+
y.value
|
|
112
117
|
)
|
|
113
|
-
),
|
|
118
|
+
), p = t(() => {
|
|
114
119
|
const e = C.value;
|
|
115
120
|
return {
|
|
116
121
|
top: `${e.top}px`,
|
|
@@ -118,12 +123,12 @@ const me = "--app-viewport-max-height", Ee = /* @__PURE__ */ oe({
|
|
|
118
123
|
left: `${e.left}px`,
|
|
119
124
|
right: `${e.right}px`,
|
|
120
125
|
width: `${ee.value}px`,
|
|
121
|
-
height: `${
|
|
126
|
+
height: `${k.value}px`
|
|
122
127
|
};
|
|
123
|
-
}),
|
|
124
|
-
() =>
|
|
125
|
-
),
|
|
126
|
-
const e =
|
|
128
|
+
}), O = t(
|
|
129
|
+
() => ce(U.value, m.value, b.value)
|
|
130
|
+
), x = t(() => {
|
|
131
|
+
const e = ge(y.value, a.gap);
|
|
127
132
|
return {
|
|
128
133
|
top: { ...e.top, background: a.topBg },
|
|
129
134
|
bottom: { ...e.bottom, background: a.bottomBg },
|
|
@@ -131,102 +136,106 @@ const me = "--app-viewport-max-height", Ee = /* @__PURE__ */ oe({
|
|
|
131
136
|
right: { ...e.right, background: a.rightBg }
|
|
132
137
|
};
|
|
133
138
|
}), te = t(() => {
|
|
134
|
-
const e =
|
|
139
|
+
const e = y.value, o = (S) => `${Math.max(0, S ? S - e : 0)}px`;
|
|
135
140
|
return {
|
|
136
|
-
paddingTop: o(
|
|
137
|
-
paddingBottom: o(
|
|
138
|
-
paddingLeft: o(
|
|
139
|
-
paddingRight: o(
|
|
141
|
+
paddingTop: o(m.value),
|
|
142
|
+
paddingBottom: o(b.value),
|
|
143
|
+
paddingLeft: o(P.value),
|
|
144
|
+
paddingRight: o(_.value)
|
|
140
145
|
};
|
|
141
146
|
});
|
|
142
|
-
return (e, o) => (
|
|
147
|
+
return (e, o) => (v(), ne("div", {
|
|
143
148
|
ref_key: "appPageRef",
|
|
144
149
|
ref: l,
|
|
145
150
|
class: "dc-app-page app-page",
|
|
146
151
|
style: s(L.value)
|
|
147
152
|
}, [
|
|
148
|
-
|
|
153
|
+
d("div", {
|
|
149
154
|
class: "app-page-shim",
|
|
150
155
|
style: s(te.value)
|
|
151
156
|
}, [
|
|
152
|
-
|
|
153
|
-
default:
|
|
154
|
-
|
|
157
|
+
pe(c(re), { level: "page" }, {
|
|
158
|
+
default: g(() => [
|
|
159
|
+
f(e.$slots, "default", {}, void 0, !0)
|
|
155
160
|
]),
|
|
156
161
|
_: 3
|
|
157
162
|
})
|
|
158
163
|
], 4),
|
|
159
|
-
|
|
164
|
+
D.value ? (v(), B(c(E), {
|
|
160
165
|
key: 0,
|
|
161
166
|
mode: "height",
|
|
167
|
+
"observe-resize": r.topObserveResize,
|
|
162
168
|
class: "app-page-slot app-page-slot--top",
|
|
163
|
-
style: s(
|
|
164
|
-
onHeightChange:
|
|
169
|
+
style: s(O.value.top),
|
|
170
|
+
onHeightChange: X
|
|
165
171
|
}, {
|
|
166
|
-
default:
|
|
167
|
-
|
|
172
|
+
default: g(() => [
|
|
173
|
+
d("div", {
|
|
168
174
|
class: "app-page-slot-shim",
|
|
169
|
-
style: s(
|
|
175
|
+
style: s(x.value.top)
|
|
170
176
|
}, [
|
|
171
|
-
|
|
177
|
+
f(e.$slots, "top", {}, void 0, !0)
|
|
172
178
|
], 4)
|
|
173
179
|
]),
|
|
174
180
|
_: 3
|
|
175
|
-
}, 8, ["style"])) :
|
|
176
|
-
|
|
181
|
+
}, 8, ["observe-resize", "style"])) : R("", !0),
|
|
182
|
+
F.value ? (v(), B(c(E), {
|
|
177
183
|
key: 1,
|
|
178
184
|
mode: "height",
|
|
185
|
+
"observe-resize": r.bottomObserveResize,
|
|
179
186
|
class: "app-page-slot app-page-slot--bottom",
|
|
180
|
-
style: s(
|
|
187
|
+
style: s(O.value.bottom),
|
|
181
188
|
onHeightChange: q
|
|
182
189
|
}, {
|
|
183
|
-
default:
|
|
184
|
-
|
|
190
|
+
default: g(() => [
|
|
191
|
+
d("div", {
|
|
185
192
|
class: "app-page-slot-shim",
|
|
186
|
-
style: s(
|
|
193
|
+
style: s(x.value.bottom)
|
|
187
194
|
}, [
|
|
188
|
-
|
|
195
|
+
f(e.$slots, "bottom", {}, void 0, !0)
|
|
189
196
|
], 4)
|
|
190
197
|
]),
|
|
191
198
|
_: 3
|
|
192
|
-
}, 8, ["style"])) :
|
|
193
|
-
|
|
199
|
+
}, 8, ["observe-resize", "style"])) : R("", !0),
|
|
200
|
+
G.value ? (v(), B(c(E), {
|
|
194
201
|
key: 2,
|
|
195
202
|
mode: "width",
|
|
203
|
+
"observe-resize": r.leftObserveResize,
|
|
196
204
|
class: "app-page-slot app-page-slot--left",
|
|
197
|
-
style: s(
|
|
205
|
+
style: s(O.value.left),
|
|
198
206
|
onWidthChange: J
|
|
199
207
|
}, {
|
|
200
|
-
default:
|
|
201
|
-
|
|
208
|
+
default: g(() => [
|
|
209
|
+
d("div", {
|
|
202
210
|
class: "app-page-slot-shim",
|
|
203
|
-
style: s(
|
|
211
|
+
style: s(x.value.left)
|
|
204
212
|
}, [
|
|
205
|
-
|
|
213
|
+
f(e.$slots, "left", {}, void 0, !0)
|
|
206
214
|
], 4)
|
|
207
215
|
]),
|
|
208
216
|
_: 3
|
|
209
|
-
}, 8, ["style"])) :
|
|
210
|
-
Y.value ? (
|
|
217
|
+
}, 8, ["observe-resize", "style"])) : R("", !0),
|
|
218
|
+
Y.value ? (v(), B(c(E), {
|
|
211
219
|
key: 3,
|
|
212
220
|
mode: "width",
|
|
221
|
+
"observe-resize": r.rightObserveResize,
|
|
213
222
|
class: "app-page-slot app-page-slot--right",
|
|
214
|
-
style: s(
|
|
223
|
+
style: s(O.value.right),
|
|
215
224
|
onWidthChange: K
|
|
216
225
|
}, {
|
|
217
|
-
default:
|
|
218
|
-
|
|
226
|
+
default: g(() => [
|
|
227
|
+
d("div", {
|
|
219
228
|
class: "app-page-slot-shim",
|
|
220
|
-
style: s(
|
|
229
|
+
style: s(x.value.right)
|
|
221
230
|
}, [
|
|
222
|
-
|
|
231
|
+
f(e.$slots, "right", {}, void 0, !0)
|
|
223
232
|
], 4)
|
|
224
233
|
]),
|
|
225
234
|
_: 3
|
|
226
|
-
}, 8, ["style"])) :
|
|
235
|
+
}, 8, ["observe-resize", "style"])) : R("", !0)
|
|
227
236
|
], 4));
|
|
228
237
|
}
|
|
229
238
|
});
|
|
230
239
|
export {
|
|
231
|
-
|
|
240
|
+
_e as default
|
|
232
241
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./TabsHeader.vue2.mjs";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import r from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9d365b46"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
m as default
|
|
7
7
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { defineComponent as L, toRefs as $, useModel as z, ref as K, computed as n,
|
|
2
|
-
|
|
1
|
+
import { defineComponent as L, toRefs as $, useModel as z, ref as K, computed as n, watch as T, openBlock as i, createElementBlock as o, normalizeClass as y, Fragment as g, renderList as R, unref as S, renderSlot as B, createTextVNode as A, toDisplayString as D, normalizeStyle as H, createCommentVNode as I, mergeModels as N, nextTick as V } from "vue";
|
|
2
|
+
import { useActivated as F } from "../../hooks/activated.mjs";
|
|
3
|
+
const W = ["onClick"], q = /* @__PURE__ */ L({
|
|
3
4
|
__name: "TabsHeader",
|
|
4
|
-
props: /* @__PURE__ */
|
|
5
|
+
props: /* @__PURE__ */ N({
|
|
5
6
|
tabs: {},
|
|
6
7
|
level: { default: 1 },
|
|
7
8
|
variant: {}
|
|
@@ -10,64 +11,62 @@ const X = ["onClick"], q = /* @__PURE__ */ L({
|
|
|
10
11
|
activeKeyModifiers: {}
|
|
11
12
|
}),
|
|
12
13
|
emits: ["update:activeKey"],
|
|
13
|
-
setup(
|
|
14
|
-
const
|
|
14
|
+
setup(v) {
|
|
15
|
+
const u = v, { tabs: b, level: k, variant: h } = $(u), s = z(v, "activeKey"), l = /* @__PURE__ */ new Map(), d = K(0), m = n(
|
|
15
16
|
() => Math.min(Math.max(Math.floor(k.value), 1), 4)
|
|
16
|
-
),
|
|
17
|
+
), w = n(() => `tabs-main-bar--l${m.value}`), M = {
|
|
17
18
|
1: "card",
|
|
18
19
|
2: "indicator",
|
|
19
20
|
3: "indicator-compact",
|
|
20
21
|
4: "plain"
|
|
21
22
|
}, r = n(
|
|
22
|
-
() => h.value ??
|
|
23
|
+
() => h.value ?? M[m.value]
|
|
23
24
|
), C = n(
|
|
24
25
|
() => `tabs-main-bar--variant-${r.value}`
|
|
25
26
|
), x = n(
|
|
26
27
|
() => r.value === "indicator" || r.value === "indicator-compact"
|
|
27
28
|
), _ = n(() => {
|
|
28
|
-
const [,
|
|
29
|
+
const [, e] = [d.value, s.value], a = e ? l.get(e) : void 0;
|
|
29
30
|
return a ? {
|
|
30
31
|
width: `${a.offsetWidth}px`,
|
|
31
32
|
transform: `translateX(${a.offsetLeft}px)`
|
|
32
33
|
} : { width: "0px" };
|
|
33
|
-
}), E = (
|
|
34
|
-
a instanceof HTMLElement ?
|
|
34
|
+
}), E = (e, a) => {
|
|
35
|
+
a instanceof HTMLElement ? l.set(e, a) : l.delete(e);
|
|
35
36
|
}, c = () => {
|
|
36
|
-
|
|
37
|
+
V(() => {
|
|
37
38
|
d.value++;
|
|
38
39
|
});
|
|
39
40
|
}, f = () => c();
|
|
40
|
-
return
|
|
41
|
-
c(), window.addEventListener("resize", f);
|
|
42
|
-
}),
|
|
43
|
-
|
|
44
|
-
}), B(
|
|
45
|
-
() => v.tabs,
|
|
41
|
+
return F((e) => {
|
|
42
|
+
e.isActivated ? (c(), window.addEventListener("resize", f)) : window.removeEventListener("resize", f);
|
|
43
|
+
}), T(
|
|
44
|
+
() => u.tabs,
|
|
46
45
|
() => c(),
|
|
47
46
|
{ flush: "post" }
|
|
48
|
-
), (
|
|
49
|
-
class: y(["tabs-main-bar", [
|
|
47
|
+
), (e, a) => (i(), o("div", {
|
|
48
|
+
class: y(["tabs-main-bar", [w.value, C.value]])
|
|
50
49
|
}, [
|
|
51
|
-
(
|
|
52
|
-
key:
|
|
50
|
+
(i(!0), o(g, null, R(S(b), (t) => (i(), o("button", {
|
|
51
|
+
key: t.key,
|
|
53
52
|
ref_for: !0,
|
|
54
|
-
ref: (p) => E(
|
|
53
|
+
ref: (p) => E(t.key, p),
|
|
55
54
|
type: "button",
|
|
56
|
-
class: y(["tabs-main-bar-item", { "tabs-main-bar-item_active":
|
|
57
|
-
onClick: (p) =>
|
|
55
|
+
class: y(["tabs-main-bar-item", { "tabs-main-bar-item_active": t.key === s.value }]),
|
|
56
|
+
onClick: (p) => s.value = t.key
|
|
58
57
|
}, [
|
|
59
|
-
|
|
60
|
-
tab:
|
|
61
|
-
active:
|
|
58
|
+
B(e.$slots, t.key, {
|
|
59
|
+
tab: t,
|
|
60
|
+
active: t.key === s.value
|
|
62
61
|
}, () => [
|
|
63
|
-
|
|
62
|
+
A(D(t.title), 1)
|
|
64
63
|
], !0)
|
|
65
|
-
], 10,
|
|
66
|
-
x.value ? (
|
|
64
|
+
], 10, W))), 128)),
|
|
65
|
+
x.value ? (i(), o("div", {
|
|
67
66
|
key: 0,
|
|
68
67
|
class: "tabs-main-bar-indicator",
|
|
69
|
-
style:
|
|
70
|
-
}, null, 4)) :
|
|
68
|
+
style: H(_.value)
|
|
69
|
+
}, null, 4)) : I("", !0)
|
|
71
70
|
], 2));
|
|
72
71
|
}
|
|
73
72
|
});
|