@rebilly/revel 13.6.10 → 13.8.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/CHANGELOG.md +3 -3
- package/dist/components/r-file-dropzone/pretty-file-name-format.mjs +1 -0
- package/dist/components/r-tabs/r-tabs.vue.d.ts +22 -0
- package/dist/components/r-tabs/r-tabs.vue.mjs +74 -56
- package/dist/components/r-tabs/r-tabs.vue_vue_type_script_lang.mjs +65 -15
- package/dist/revel.umd.js +11 -11
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -50,11 +50,23 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|
|
50
50
|
type: BooleanConstructor;
|
|
51
51
|
default: boolean;
|
|
52
52
|
};
|
|
53
|
+
/**
|
|
54
|
+
* Pin the tab list to the top of the nearest scroll parent once it
|
|
55
|
+
* scrolls out of view. When that scroll parent has a header child,
|
|
56
|
+
* the tab list sits below the header.
|
|
57
|
+
*/
|
|
58
|
+
sticky: {
|
|
59
|
+
type: BooleanConstructor;
|
|
60
|
+
default: boolean;
|
|
61
|
+
};
|
|
53
62
|
}>, {
|
|
54
63
|
tabItemLinkRefs: import("vue").Ref<HTMLElement[], HTMLElement[]>;
|
|
55
64
|
tablistRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
|
|
65
|
+
stickyHostRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
|
|
66
|
+
stickySentinelRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
|
|
56
67
|
layoutVersion: import("vue").Ref<number, number>;
|
|
57
68
|
recomputeIndicator: () => void;
|
|
69
|
+
isStuck: import("vue").Ref<boolean, boolean>;
|
|
58
70
|
}, State, {
|
|
59
71
|
visibleTabs(): {
|
|
60
72
|
tabId: string;
|
|
@@ -136,11 +148,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
|
|
136
148
|
type: BooleanConstructor;
|
|
137
149
|
default: boolean;
|
|
138
150
|
};
|
|
151
|
+
/**
|
|
152
|
+
* Pin the tab list to the top of the nearest scroll parent once it
|
|
153
|
+
* scrolls out of view. When that scroll parent has a header child,
|
|
154
|
+
* the tab list sits below the header.
|
|
155
|
+
*/
|
|
156
|
+
sticky: {
|
|
157
|
+
type: BooleanConstructor;
|
|
158
|
+
default: boolean;
|
|
159
|
+
};
|
|
139
160
|
}>> & Readonly<{
|
|
140
161
|
"onTab-selected"?: ((...args: any[]) => any) | undefined;
|
|
141
162
|
}>, {
|
|
142
163
|
lazy: boolean;
|
|
143
164
|
showValidateMessages: boolean;
|
|
165
|
+
sticky: boolean;
|
|
144
166
|
divided: boolean;
|
|
145
167
|
menuClass: string;
|
|
146
168
|
contentClass: string;
|
|
@@ -1,72 +1,90 @@
|
|
|
1
1
|
import e from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
2
2
|
import t from "./r-tabs.vue_vue_type_script_lang.mjs";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { Fragment as n,
|
|
4
|
+
import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveDirective as f, toDisplayString as p, vShow as m, withDirectives as h } from "vue";
|
|
5
5
|
//#region src/components/r-tabs/r-tabs.vue
|
|
6
|
-
var
|
|
6
|
+
var g = {
|
|
7
|
+
key: 0,
|
|
8
|
+
ref: "stickySentinelRef",
|
|
9
|
+
class: "r-tab-sticky-sentinel",
|
|
10
|
+
"aria-hidden": "true"
|
|
11
|
+
}, _ = [
|
|
7
12
|
"id",
|
|
8
13
|
"to",
|
|
9
14
|
"aria-selected",
|
|
10
15
|
"aria-controls",
|
|
11
16
|
"onClick"
|
|
12
|
-
],
|
|
17
|
+
], v = [
|
|
13
18
|
"id",
|
|
14
19
|
"aria-selected",
|
|
15
20
|
"aria-controls",
|
|
16
21
|
"onClick"
|
|
17
22
|
];
|
|
18
|
-
function
|
|
19
|
-
let
|
|
20
|
-
return
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
"r-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
23
|
+
function y(e, t, y, b, x, S) {
|
|
24
|
+
let C = f("tooltip");
|
|
25
|
+
return l(), i("div", null, [
|
|
26
|
+
e.sticky ? (l(), i("div", g, null, 512)) : r("", !0),
|
|
27
|
+
a("div", {
|
|
28
|
+
ref: "stickyHostRef",
|
|
29
|
+
class: s(["r-tab-sticky-host", {
|
|
30
|
+
"r-is-sticky": e.sticky,
|
|
31
|
+
"r-is-stuck": e.isStuck
|
|
32
|
+
}])
|
|
33
|
+
}, [a("div", {
|
|
34
|
+
ref: "tablistRef",
|
|
35
|
+
class: s(["r-tab", [{
|
|
36
|
+
"r-tab-divided": e.divided,
|
|
37
|
+
"r-is-sticky": e.sticky
|
|
38
|
+
}, e.menuClass]]),
|
|
39
|
+
role: "tablist"
|
|
40
|
+
}, [(l(!0), i(n, null, u(e.visibleTabs, (t, n) => h((l(), i("div", {
|
|
41
|
+
key: t.tabId,
|
|
42
|
+
class: "r-tab-item"
|
|
43
|
+
}, [t.to ? (l(), i("button", {
|
|
44
|
+
key: 0,
|
|
45
|
+
id: t.tabId,
|
|
46
|
+
ref_for: !0,
|
|
47
|
+
ref: "tabItemLinkRefs",
|
|
48
|
+
to: t.to,
|
|
49
|
+
role: "tab",
|
|
50
|
+
"aria-selected": t.isActive,
|
|
51
|
+
"aria-controls": t.tabPanelId,
|
|
52
|
+
class: s(["r-tab-item-link", {
|
|
53
|
+
"r-is-active": t.isActive,
|
|
54
|
+
"r-is-error": t.isInvalid,
|
|
55
|
+
"r-has-error": t.isInvalid
|
|
56
|
+
}]),
|
|
57
|
+
onClick: (r) => e.selectTab(t, n)
|
|
58
|
+
}, [d(e.$slots, "label", {
|
|
59
|
+
tab: t,
|
|
60
|
+
index: n
|
|
61
|
+
}, () => [o(p(e.getTabName(t, n)), 1)])], 10, _)) : (l(), i("button", {
|
|
62
|
+
key: 1,
|
|
63
|
+
id: t.tabId,
|
|
64
|
+
ref_for: !0,
|
|
65
|
+
ref: "tabItemLinkRefs",
|
|
66
|
+
role: "tab",
|
|
67
|
+
"aria-selected": t.isActive,
|
|
68
|
+
"aria-controls": t.tabPanelId,
|
|
69
|
+
class: s(["r-tab-item-link", {
|
|
70
|
+
"r-is-active": t.isActive,
|
|
71
|
+
"r-is-error": t.isInvalid,
|
|
72
|
+
"r-has-error": t.isInvalid
|
|
73
|
+
}]),
|
|
74
|
+
onClick: (r) => e.selectTab(t, n)
|
|
75
|
+
}, [d(e.$slots, "label", {
|
|
76
|
+
tab: t,
|
|
77
|
+
index: n
|
|
78
|
+
}, () => [o(p(e.getTabName(t, n)), 1)])], 10, v))])), [[C, { text: t.isInvalid && e.showValidateMessages ? t.validateErrorMessages.join("\n") : null }]])), 128)), h(a("div", {
|
|
79
|
+
class: s(["r-tab-item-indicator", { "r-is-error": e.isInvalidTab }]),
|
|
80
|
+
style: c({
|
|
81
|
+
width: e.visibleTabIndicatorWidth + "px",
|
|
82
|
+
left: e.visibleTabIndicatorPosition + "px"
|
|
83
|
+
})
|
|
84
|
+
}, null, 6), [[m, e.isIndicatorReady]])], 2)], 2),
|
|
85
|
+
a("div", { class: s(["r-tab-content", e.contentClass]) }, [d(e.$slots, "default")], 2)
|
|
86
|
+
]);
|
|
69
87
|
}
|
|
70
|
-
var
|
|
88
|
+
var b = /*#__PURE__*/ e(t, [["render", y]]);
|
|
71
89
|
//#endregion
|
|
72
|
-
export {
|
|
90
|
+
export { b as default };
|
|
@@ -2,9 +2,22 @@ import { capitalizeFirstLetter as e } from "../../common/helpers/capitalize-firs
|
|
|
2
2
|
import { debounce as t } from "../../vendor/es-toolkit/dist/compat/function/debounce.mjs";
|
|
3
3
|
import { isKebabCase as n } from "../../common/helpers/is-kebab-case.mjs";
|
|
4
4
|
import { RTooltipDirective as r } from "../../directives/r-tooltip/r-tooltip.mjs";
|
|
5
|
-
import { computed as i, defineComponent as a,
|
|
5
|
+
import { computed as i, defineComponent as a, nextTick as o, onBeforeUnmount as s, onMounted as c, ref as l, watch as u } from "vue";
|
|
6
6
|
//#region src/components/r-tabs/r-tabs.vue?vue&type=script&lang.ts
|
|
7
|
-
|
|
7
|
+
function d(e) {
|
|
8
|
+
let t = e?.parentElement ?? null;
|
|
9
|
+
for (; t;) {
|
|
10
|
+
let { overflowY: e } = window.getComputedStyle(t);
|
|
11
|
+
if (e === "auto" || e === "scroll" || e === "overlay") return t;
|
|
12
|
+
t = t.parentElement;
|
|
13
|
+
}
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
function f(e) {
|
|
17
|
+
let t = Array.from(e.children).find((e) => e instanceof HTMLElement && e.tagName === "HEADER");
|
|
18
|
+
return t instanceof HTMLElement ? t : null;
|
|
19
|
+
}
|
|
20
|
+
var p = a({
|
|
8
21
|
name: "RTabs",
|
|
9
22
|
components: {},
|
|
10
23
|
directives: { tooltip: r },
|
|
@@ -40,22 +53,59 @@ var l = a({
|
|
|
40
53
|
lazy: {
|
|
41
54
|
type: Boolean,
|
|
42
55
|
default: !0
|
|
56
|
+
},
|
|
57
|
+
sticky: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
default: !1
|
|
43
60
|
}
|
|
44
61
|
},
|
|
45
62
|
emits: ["tab-selected"],
|
|
46
|
-
setup() {
|
|
47
|
-
let
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
|
|
63
|
+
setup(e) {
|
|
64
|
+
let n = l([]), r = l(null), i = l(null), a = l(null), p = l(0), m = l(!1), h = null, g = null, _ = !1, v = () => {
|
|
65
|
+
p.value += 1;
|
|
66
|
+
}, y = t(v, 100);
|
|
67
|
+
function b() {
|
|
68
|
+
h?.disconnect(), h = null, g?.disconnect(), g = null, m.value = !1, i.value?.style.removeProperty("--r-tabs-sticky-offset");
|
|
69
|
+
}
|
|
70
|
+
function x(e, t) {
|
|
71
|
+
g?.disconnect(), g = null;
|
|
72
|
+
let n = a.value;
|
|
73
|
+
if (!n || typeof IntersectionObserver > "u") return;
|
|
74
|
+
let r = e === document.documentElement ? null : e, i = new IntersectionObserver(([e]) => {
|
|
75
|
+
if (g !== i) return;
|
|
76
|
+
let t = e?.rootBounds?.top;
|
|
77
|
+
m.value = !!(e && !e.isIntersecting && t != null && e.boundingClientRect.bottom <= t);
|
|
78
|
+
}, {
|
|
79
|
+
root: r,
|
|
80
|
+
rootMargin: `-${Math.round(t)}px 0px 0px 0px`,
|
|
81
|
+
threshold: 0
|
|
82
|
+
});
|
|
83
|
+
g = i, i.observe(n);
|
|
84
|
+
}
|
|
85
|
+
function S() {
|
|
86
|
+
if (b(), !e.sticky) return;
|
|
87
|
+
let t = i.value;
|
|
88
|
+
if (!t) return;
|
|
89
|
+
let n = d(t) ?? document.documentElement, r = f(n), a = () => {
|
|
90
|
+
let e = r ? r.getBoundingClientRect().height : 0;
|
|
91
|
+
t.style.setProperty("--r-tabs-sticky-offset", `${e}px`), x(n, e);
|
|
92
|
+
};
|
|
93
|
+
a(), r && typeof ResizeObserver < "u" && (h = new ResizeObserver(() => a()), h.observe(r));
|
|
94
|
+
}
|
|
95
|
+
return c(() => {
|
|
96
|
+
window.addEventListener("resize", y), _ = !0, S();
|
|
97
|
+
}), s(() => {
|
|
98
|
+
window.removeEventListener("resize", y), y.cancel?.(), _ = !1, b();
|
|
99
|
+
}), u(() => e.sticky, () => {
|
|
100
|
+
_ && o(() => S());
|
|
54
101
|
}), {
|
|
55
|
-
tabItemLinkRefs:
|
|
56
|
-
tablistRef:
|
|
57
|
-
|
|
58
|
-
|
|
102
|
+
tabItemLinkRefs: n,
|
|
103
|
+
tablistRef: r,
|
|
104
|
+
stickyHostRef: i,
|
|
105
|
+
stickySentinelRef: a,
|
|
106
|
+
layoutVersion: p,
|
|
107
|
+
recomputeIndicator: v,
|
|
108
|
+
isStuck: m
|
|
59
109
|
};
|
|
60
110
|
},
|
|
61
111
|
data: () => ({
|
|
@@ -137,4 +187,4 @@ var l = a({
|
|
|
137
187
|
}
|
|
138
188
|
});
|
|
139
189
|
//#endregion
|
|
140
|
-
export {
|
|
190
|
+
export { p as default };
|