@keyblade/pro-components 1.5.1 → 1.5.2
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/pro-layout/index.js +1 -1
- package/es/pro-layout/pro-layout.vue.js +79 -74
- package/es/style.css +1 -1
- package/package.json +1 -1
package/es/pro-layout/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { ProReuseTabs as f } from "../pro-reuse-tabs/index.js";
|
|
|
7
7
|
import { IconMenuFold as c, IconMenuUnfold as l } from "@arco-design/web-vue/es/icon";
|
|
8
8
|
const y = Object.assign(e, {
|
|
9
9
|
install: (o) => {
|
|
10
|
-
o.use(r), o.use(t), o.use(u), o.use(s), o.use(m), o.use(
|
|
10
|
+
o.use(r), o.use(t), o.use(u), o.use(s), o.use(m), o.use(i), o.use(f), o.use(n), o.use(c), o.use(l), o.component("KbProLayout", e);
|
|
11
11
|
}
|
|
12
12
|
}), x = y;
|
|
13
13
|
export {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as U, useCssVars as X, toRefs as Y, useSlots as Z, provide as S, ref as ee, watch as w, resolveComponent as o, openBlock as a, createBlock as
|
|
1
|
+
import { defineComponent as U, useCssVars as X, toRefs as Y, useSlots as Z, provide as S, ref as ee, watch as w, resolveComponent as o, openBlock as a, createBlock as c, normalizeClass as t, withCtx as s, createVNode as r, createElementVNode as p, unref as n, renderSlot as m, createElementBlock as y, Fragment as b, createTextVNode as g, toDisplayString as v, createCommentVNode as u } from "vue";
|
|
2
2
|
import { useHooks as te } from "./hooks.js";
|
|
3
3
|
const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @__PURE__ */ U({
|
|
4
4
|
__name: "pro-layout",
|
|
@@ -76,18 +76,18 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
76
76
|
},
|
|
77
77
|
emits: {
|
|
78
78
|
/** 收缩事件 */
|
|
79
|
-
collapse: (
|
|
79
|
+
collapse: (l) => !0,
|
|
80
80
|
/** keepAlive改变事件 */
|
|
81
|
-
keepAliveIncludeChange: (
|
|
81
|
+
keepAliveIncludeChange: (l) => !0
|
|
82
82
|
},
|
|
83
|
-
setup(
|
|
84
|
-
const f =
|
|
85
|
-
X((
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
"
|
|
83
|
+
setup(l, { emit: $ }) {
|
|
84
|
+
const f = l;
|
|
85
|
+
X((i) => ({
|
|
86
|
+
"72cbe0ed": V,
|
|
87
|
+
af7d7fc0: D,
|
|
88
|
+
"744d8aa5": K
|
|
89
89
|
}));
|
|
90
|
-
const { menuItems: C } = Y(f),
|
|
90
|
+
const { menuItems: C } = Y(f), h = Z(), {
|
|
91
91
|
menuSelectedKeys: N,
|
|
92
92
|
breadcrumbItems: P,
|
|
93
93
|
tabs: T,
|
|
@@ -99,96 +99,101 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
99
99
|
hideTabs: f.hideTabs
|
|
100
100
|
});
|
|
101
101
|
S("ProBreadcrumbItems", P), S("ProKeepAliveInclude", _);
|
|
102
|
-
const V = `${f.headerHeight}px`, D = `${f.siderWidth}px`, K = `${ae}px`, d = ee(f.siderCollapsed), x = (
|
|
103
|
-
d.value =
|
|
102
|
+
const V = `${f.headerHeight}px`, D = `${f.siderWidth}px`, K = `${ae}px`, d = ee(f.siderCollapsed), x = (i) => {
|
|
103
|
+
d.value = i, $("collapse", i);
|
|
104
104
|
};
|
|
105
105
|
return w(() => f.siderCollapsed, () => {
|
|
106
106
|
d.value = f.siderCollapsed;
|
|
107
107
|
}, { immediate: !0 }), w(_, () => {
|
|
108
108
|
$("keepAliveIncludeChange", _.value);
|
|
109
|
-
}, { immediate: !0 }), (
|
|
109
|
+
}, { immediate: !0 }), (i, I) => {
|
|
110
110
|
const q = o("a-typography-title"), B = o("a-space"), F = o("a-layout-header"), M = o("kb-pro-menu"), z = o("icon-menu-unfold"), E = o("icon-menu-fold"), R = o("a-button"), j = o("a-layout-sider"), G = o("kb-pro-reuse-tabs"), J = o("a-affix"), L = o("kb-pro-keep-alive-router-view"), O = o("a-layout-content"), Q = o("a-layout-footer"), k = o("a-layout");
|
|
111
|
-
return a(),
|
|
112
|
-
class:
|
|
111
|
+
return a(), c(k, {
|
|
112
|
+
class: t([e, `${e}-${l.layout}`])
|
|
113
113
|
}, {
|
|
114
114
|
default: s(() => [
|
|
115
|
-
|
|
116
|
-
class:
|
|
115
|
+
r(F, {
|
|
116
|
+
class: t([`${e}-header`, { [`${e}-header-collapsed`]: d.value }])
|
|
117
117
|
}, {
|
|
118
118
|
default: s(() => [
|
|
119
119
|
p("div", {
|
|
120
|
-
class:
|
|
120
|
+
class: t(`${e}-header-left`)
|
|
121
121
|
}, [
|
|
122
|
-
n(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
122
|
+
n(h)["header-left"] ? m(i.$slots, "header-left", { key: 0 }) : (a(), y(b, { key: 1 }, [
|
|
123
|
+
l.layout !== "side" ? (a(), y("div", {
|
|
124
|
+
key: 0,
|
|
125
|
+
class: t(`${e}-header-left-logo`)
|
|
126
|
+
}, [
|
|
127
|
+
r(B, null, {
|
|
128
|
+
default: s(() => [
|
|
129
|
+
p("img", {
|
|
130
|
+
class: t(`${e}-header-left-logo-img`),
|
|
131
|
+
alt: "logo",
|
|
132
|
+
src: l.logo
|
|
133
|
+
}, null, 10, le),
|
|
134
|
+
d.value ? u("", !0) : (a(), c(q, {
|
|
135
|
+
key: 0,
|
|
136
|
+
class: t(`${e}-header-left-logo-title`),
|
|
137
|
+
heading: 5
|
|
138
|
+
}, {
|
|
139
|
+
default: s(() => [
|
|
140
|
+
g(v(l.title), 1)
|
|
141
|
+
]),
|
|
142
|
+
_: 1
|
|
143
|
+
}, 8, ["class"]))
|
|
144
|
+
]),
|
|
145
|
+
_: 1
|
|
146
|
+
})
|
|
147
|
+
], 2)) : u("", !0)
|
|
143
148
|
], 64))
|
|
144
149
|
], 2),
|
|
145
150
|
p("div", {
|
|
146
|
-
class:
|
|
151
|
+
class: t(`${e}-header-center`)
|
|
147
152
|
}, [
|
|
148
|
-
n(
|
|
153
|
+
n(h)["header-center"] ? m(i.$slots, "header-center", { key: 0 }) : u("", !0)
|
|
149
154
|
], 2),
|
|
150
155
|
p("div", {
|
|
151
|
-
class:
|
|
156
|
+
class: t(`${e}-header-right`)
|
|
152
157
|
}, [
|
|
153
|
-
m(
|
|
158
|
+
m(i.$slots, "header-right")
|
|
154
159
|
], 2)
|
|
155
160
|
]),
|
|
156
161
|
_: 3
|
|
157
162
|
}, 8, ["class"]),
|
|
158
|
-
|
|
163
|
+
r(k, null, {
|
|
159
164
|
default: s(() => [
|
|
160
|
-
|
|
161
|
-
class:
|
|
162
|
-
width:
|
|
165
|
+
r(j, {
|
|
166
|
+
class: t([`${e}-sider`, { [`${e}-sider-collapsed`]: d.value }]),
|
|
167
|
+
width: l.siderWidth,
|
|
163
168
|
collapsible: !0,
|
|
164
|
-
breakpoint:
|
|
169
|
+
breakpoint: l.siderBreakpoint,
|
|
165
170
|
collapsed: d.value,
|
|
166
171
|
"hide-trigger": !0,
|
|
167
172
|
onCollapse: x
|
|
168
173
|
}, {
|
|
169
174
|
default: s(() => [
|
|
170
175
|
p("div", {
|
|
171
|
-
class:
|
|
176
|
+
class: t(`${e}-sider-content`)
|
|
172
177
|
}, [
|
|
173
|
-
n(
|
|
174
|
-
|
|
178
|
+
n(h)["sider-top"] ? m(i.$slots, "sider-top", { key: 0 }) : (a(), y(b, { key: 1 }, [
|
|
179
|
+
l.layout === "side" ? (a(), y("div", {
|
|
175
180
|
key: 0,
|
|
176
|
-
class:
|
|
181
|
+
class: t(`${e}-sider-content-logo`)
|
|
177
182
|
}, [
|
|
178
|
-
|
|
183
|
+
r(B, null, {
|
|
179
184
|
default: s(() => [
|
|
180
185
|
p("img", {
|
|
181
|
-
class:
|
|
186
|
+
class: t(`${e}-sider-content-logo-img`),
|
|
182
187
|
alt: "logo",
|
|
183
|
-
src:
|
|
188
|
+
src: l.logo
|
|
184
189
|
}, null, 10, oe),
|
|
185
|
-
d.value ? u("", !0) : (a(),
|
|
190
|
+
d.value ? u("", !0) : (a(), c(q, {
|
|
186
191
|
key: 0,
|
|
187
|
-
class:
|
|
192
|
+
class: t(`${e}-sider-content-logo-title`),
|
|
188
193
|
heading: 5
|
|
189
194
|
}, {
|
|
190
195
|
default: s(() => [
|
|
191
|
-
g(v(
|
|
196
|
+
g(v(l.title), 1)
|
|
192
197
|
]),
|
|
193
198
|
_: 1
|
|
194
199
|
}, 8, ["class"]))
|
|
@@ -197,37 +202,37 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
197
202
|
})
|
|
198
203
|
], 2)) : u("", !0)
|
|
199
204
|
], 64)),
|
|
200
|
-
|
|
205
|
+
r(M, {
|
|
201
206
|
collapsed: d.value,
|
|
202
207
|
"selected-keys": n(N),
|
|
203
208
|
items: n(C),
|
|
204
209
|
onMenuItemClick: n(W)
|
|
205
210
|
}, null, 8, ["collapsed", "selected-keys", "items", "onMenuItemClick"])
|
|
206
211
|
], 2),
|
|
207
|
-
|
|
212
|
+
r(R, {
|
|
213
|
+
class: t(`${e}-sider-collapse-btn`),
|
|
208
214
|
size: "mini",
|
|
209
|
-
class: l(`${e}-sider-collapsed-icon`),
|
|
210
215
|
onClick: I[0] || (I[0] = (se) => x(!d.value))
|
|
211
216
|
}, {
|
|
212
217
|
icon: s(() => [
|
|
213
|
-
d.value ? (a(),
|
|
218
|
+
d.value ? (a(), c(z, { key: 0 })) : (a(), c(E, { key: 1 }))
|
|
214
219
|
]),
|
|
215
220
|
_: 1
|
|
216
221
|
}, 8, ["class"])
|
|
217
222
|
]),
|
|
218
223
|
_: 3
|
|
219
224
|
}, 8, ["class", "width", "breakpoint", "collapsed"]),
|
|
220
|
-
|
|
221
|
-
class:
|
|
225
|
+
r(k, {
|
|
226
|
+
class: t([`${e}-body`, { [`${e}-body-collapsed`]: d.value }])
|
|
222
227
|
}, {
|
|
223
228
|
default: s(() => [
|
|
224
|
-
|
|
229
|
+
l.hideTabs ? u("", !0) : (a(), c(J, {
|
|
225
230
|
key: 0,
|
|
226
|
-
class:
|
|
227
|
-
offsetTop:
|
|
231
|
+
class: t(`${e}-body-affix`),
|
|
232
|
+
offsetTop: l.headerHeight
|
|
228
233
|
}, {
|
|
229
234
|
default: s(() => [
|
|
230
|
-
n(T).length > 0 ? (a(),
|
|
235
|
+
n(T).length > 0 ? (a(), c(G, {
|
|
231
236
|
key: 0,
|
|
232
237
|
tabs: n(T),
|
|
233
238
|
onTabClick: n(A),
|
|
@@ -236,19 +241,19 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
236
241
|
]),
|
|
237
242
|
_: 1
|
|
238
243
|
}, 8, ["class", "offsetTop"])),
|
|
239
|
-
|
|
244
|
+
r(O, null, {
|
|
240
245
|
default: s(() => [
|
|
241
|
-
|
|
246
|
+
r(L)
|
|
242
247
|
]),
|
|
243
248
|
_: 1
|
|
244
249
|
}),
|
|
245
|
-
|
|
246
|
-
n(
|
|
250
|
+
l.hideFooter ? u("", !0) : (a(), y(b, { key: 1 }, [
|
|
251
|
+
n(h).footer !== void 0 ? m(i.$slots, "footer", { key: 0 }) : (a(), c(Q, {
|
|
247
252
|
key: 1,
|
|
248
|
-
class:
|
|
253
|
+
class: t(`${e}-body-footer`)
|
|
249
254
|
}, {
|
|
250
255
|
default: s(() => [
|
|
251
|
-
g(v(
|
|
256
|
+
g(v(l.footerTitle), 1)
|
|
252
257
|
]),
|
|
253
258
|
_: 1
|
|
254
259
|
}, 8, ["class"]))
|
package/es/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.keyblade-pro-
|
|
1
|
+
.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--72cbe0ed);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--72cbe0ed);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--72cbe0ed);padding-left:var(--af7d7fc0);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--744d8aa5)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--af7d7fc0);width:calc(100% - var(--af7d7fc0))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--744d8aa5);width:calc(100% - var(--744d8aa5))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}
|