@keyblade/pro-components 1.11.6 → 1.11.7
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/pro-layout.vue.js +41 -41
- package/es/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as X, useCssVars as Y, toRefs as Z, useSlots as ee, provide as
|
|
1
|
+
import { defineComponent as X, useCssVars as Y, toRefs as Z, useSlots as ee, provide as k, ref as A, onMounted as te, watch as w, resolveComponent as l, openBlock as o, createBlock as u, normalizeClass as a, withCtx as s, createElementVNode as p, unref as r, renderSlot as m, createElementBlock as y, Fragment as v, createVNode as c, createTextVNode as _, toDisplayString as $, createCommentVNode as f } from "vue";
|
|
2
2
|
import { useHooks as ae } from "./hooks.js";
|
|
3
3
|
const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @__PURE__ */ X({
|
|
4
4
|
__name: "pro-layout",
|
|
@@ -116,37 +116,37 @@ const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @_
|
|
|
116
116
|
/** keepAlive改变事件 */
|
|
117
117
|
keepAliveIncludeChange: (e) => !0
|
|
118
118
|
},
|
|
119
|
-
setup(e, { emit:
|
|
119
|
+
setup(e, { emit: C }) {
|
|
120
120
|
const n = e;
|
|
121
121
|
Y((i) => ({
|
|
122
|
-
"
|
|
123
|
-
"
|
|
124
|
-
|
|
122
|
+
"2156faf3": S.value,
|
|
123
|
+
"2e3e7e4c": D,
|
|
124
|
+
a70b89aa: V
|
|
125
125
|
}));
|
|
126
|
-
const { menuItems:
|
|
127
|
-
menuSelectedKeys:
|
|
128
|
-
breadcrumbItems:
|
|
126
|
+
const { menuItems: T } = Z(n), h = ee(), {
|
|
127
|
+
menuSelectedKeys: K,
|
|
128
|
+
breadcrumbItems: N,
|
|
129
129
|
tabs: q,
|
|
130
130
|
keepAliveInclude: b,
|
|
131
|
-
onMenuItemClick:
|
|
132
|
-
onTabClick:
|
|
133
|
-
onTabDelete:
|
|
134
|
-
} = ae(
|
|
131
|
+
onMenuItemClick: W,
|
|
132
|
+
onTabClick: z,
|
|
133
|
+
onTabDelete: B
|
|
134
|
+
} = ae(T, {
|
|
135
135
|
hideTabs: n.hideTabs,
|
|
136
136
|
disableKeepAlive: n.disableKeepAlive
|
|
137
137
|
});
|
|
138
|
-
|
|
139
|
-
const
|
|
140
|
-
d.value = i,
|
|
138
|
+
k("ProBreadcrumbItems", N), k("ProKeepAliveInclude", b), k("onProReuseTabDelete", B);
|
|
139
|
+
const S = A(`${n.headerHeight}px`), D = `${n.siderWidth}px`, V = `${se}px`, d = A(n.siderCollapsed), x = (i) => {
|
|
140
|
+
d.value = i, C("collapse", i);
|
|
141
141
|
};
|
|
142
142
|
return te(() => {
|
|
143
|
-
n.hideHeader && (
|
|
144
|
-
}),
|
|
143
|
+
n.hideHeader && (S.value = "0px");
|
|
144
|
+
}), w(() => n.siderCollapsed, () => {
|
|
145
145
|
d.value = n.siderCollapsed;
|
|
146
|
-
}, { immediate: !0 }),
|
|
147
|
-
|
|
148
|
-
}, { immediate: !0 }), (i,
|
|
149
|
-
const
|
|
146
|
+
}, { immediate: !0 }), w(b, () => {
|
|
147
|
+
C("keepAliveIncludeChange", b.value);
|
|
148
|
+
}, { immediate: !0 }), (i, I) => {
|
|
149
|
+
const P = l("a-typography-title"), H = l("a-space"), M = l("a-layout-header"), F = l("kb-pro-menu"), E = l("icon-menu-unfold"), R = l("icon-menu-fold"), j = l("a-button"), O = l("a-layout-sider"), G = l("kb-pro-reuse-tabs"), J = l("a-affix"), L = l("kb-pro-keep-alive-router-view"), Q = l("a-layout-content"), U = l("a-layout-footer"), g = l("a-layout");
|
|
150
150
|
return o(), u(g, {
|
|
151
151
|
class: a([t, `${t}-${e.layout}`])
|
|
152
152
|
}, {
|
|
@@ -159,25 +159,25 @@ const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @_
|
|
|
159
159
|
p("div", {
|
|
160
160
|
class: a(`${t}-header-left`)
|
|
161
161
|
}, [
|
|
162
|
-
r(h)["header-left"] ? m(i.$slots, "header-left", { key: 0 }) : (o(), y(
|
|
162
|
+
r(h)["header-left"] ? m(i.$slots, "header-left", { key: 0 }) : (o(), y(v, { key: 1 }, [
|
|
163
163
|
e.layout !== "side" ? (o(), y("div", {
|
|
164
164
|
key: 0,
|
|
165
165
|
class: a(`${t}-header-left-logo`)
|
|
166
166
|
}, [
|
|
167
|
-
c(
|
|
167
|
+
c(H, null, {
|
|
168
168
|
default: s(() => [
|
|
169
169
|
p("img", {
|
|
170
170
|
class: a(`${t}-header-left-logo-img`),
|
|
171
171
|
alt: "logo",
|
|
172
172
|
src: e.logo
|
|
173
173
|
}, null, 10, le),
|
|
174
|
-
d.value ? f("", !0) : (o(), u(
|
|
174
|
+
d.value ? f("", !0) : (o(), u(P, {
|
|
175
175
|
key: 0,
|
|
176
176
|
class: a(`${t}-header-left-logo-title`),
|
|
177
177
|
heading: 5
|
|
178
178
|
}, {
|
|
179
179
|
default: s(() => [
|
|
180
|
-
|
|
180
|
+
_($(e.title), 1)
|
|
181
181
|
]),
|
|
182
182
|
_: 1
|
|
183
183
|
}, 8, ["class"]))
|
|
@@ -202,38 +202,38 @@ const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @_
|
|
|
202
202
|
}, 8, ["class"])),
|
|
203
203
|
c(g, null, {
|
|
204
204
|
default: s(() => [
|
|
205
|
-
c(
|
|
205
|
+
c(O, {
|
|
206
206
|
class: a([`${t}-sider`, { [`${t}-sider-collapsed`]: d.value }]),
|
|
207
207
|
width: e.siderWidth,
|
|
208
208
|
collapsible: !0,
|
|
209
209
|
breakpoint: e.siderBreakpoint,
|
|
210
210
|
collapsed: d.value,
|
|
211
211
|
"hide-trigger": !0,
|
|
212
|
-
onCollapse:
|
|
212
|
+
onCollapse: x
|
|
213
213
|
}, {
|
|
214
214
|
default: s(() => [
|
|
215
215
|
p("div", {
|
|
216
216
|
class: a(`${t}-sider-content`)
|
|
217
217
|
}, [
|
|
218
|
-
r(h)["sider-top"] ? m(i.$slots, "sider-top", { key: 0 }) : (o(), y(
|
|
218
|
+
r(h)["sider-top"] ? m(i.$slots, "sider-top", { key: 0 }) : (o(), y(v, { key: 1 }, [
|
|
219
219
|
e.layout === "side" ? (o(), y("div", {
|
|
220
220
|
key: 0,
|
|
221
221
|
class: a(`${t}-sider-content-logo`)
|
|
222
222
|
}, [
|
|
223
|
-
c(
|
|
223
|
+
c(H, null, {
|
|
224
224
|
default: s(() => [
|
|
225
225
|
p("img", {
|
|
226
226
|
class: a(`${t}-sider-content-logo-img`),
|
|
227
227
|
alt: "logo",
|
|
228
228
|
src: e.logo
|
|
229
229
|
}, null, 10, oe),
|
|
230
|
-
d.value ? f("", !0) : (o(), u(
|
|
230
|
+
d.value ? f("", !0) : (o(), u(P, {
|
|
231
231
|
key: 0,
|
|
232
232
|
class: a(`${t}-sider-content-logo-title`),
|
|
233
233
|
heading: 5
|
|
234
234
|
}, {
|
|
235
235
|
default: s(() => [
|
|
236
|
-
|
|
236
|
+
_($(e.title), 1)
|
|
237
237
|
]),
|
|
238
238
|
_: 1
|
|
239
239
|
}, 8, ["class"]))
|
|
@@ -244,19 +244,19 @@ const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @_
|
|
|
244
244
|
], 64)),
|
|
245
245
|
c(F, {
|
|
246
246
|
collapsed: d.value,
|
|
247
|
-
"selected-keys": r(
|
|
248
|
-
items: r(
|
|
247
|
+
"selected-keys": r(K),
|
|
248
|
+
items: r(T),
|
|
249
249
|
"menu-props": e.menuProps,
|
|
250
|
-
onMenuItemClick: r(
|
|
250
|
+
onMenuItemClick: r(W)
|
|
251
251
|
}, null, 8, ["collapsed", "selected-keys", "items", "menu-props", "onMenuItemClick"])
|
|
252
252
|
], 2),
|
|
253
|
-
c(
|
|
253
|
+
c(j, {
|
|
254
254
|
class: a(`${t}-sider-collapse-btn`),
|
|
255
255
|
size: "mini",
|
|
256
|
-
onClick:
|
|
256
|
+
onClick: I[0] || (I[0] = (de) => x(!d.value))
|
|
257
257
|
}, {
|
|
258
258
|
icon: s(() => [
|
|
259
|
-
d.value ? (o(), u(E, { key: 0 })) : (o(), u(
|
|
259
|
+
d.value ? (o(), u(E, { key: 0 })) : (o(), u(R, { key: 1 }))
|
|
260
260
|
]),
|
|
261
261
|
_: 1
|
|
262
262
|
}, 8, ["class"])
|
|
@@ -279,8 +279,8 @@ const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @_
|
|
|
279
279
|
"tabs-size": e.tabsSize,
|
|
280
280
|
"tabs-type": e.tabsType,
|
|
281
281
|
"tabs-header-padding": e.tabsHeaderPadding,
|
|
282
|
-
onTabClick: r(
|
|
283
|
-
onTabDelete: r(
|
|
282
|
+
onTabClick: r(z),
|
|
283
|
+
onTabDelete: r(B)
|
|
284
284
|
}, null, 8, ["tabs", "tabs-size", "tabs-type", "tabs-header-padding", "onTabClick", "onTabDelete"])) : f("", !0)
|
|
285
285
|
]),
|
|
286
286
|
_: 1
|
|
@@ -291,13 +291,13 @@ const le = ["src"], oe = ["src"], t = "keyblade-pro-layout", se = 48, ie = /* @_
|
|
|
291
291
|
]),
|
|
292
292
|
_: 1
|
|
293
293
|
}),
|
|
294
|
-
e.hideFooter ? f("", !0) : (o(), y(
|
|
294
|
+
e.hideFooter ? f("", !0) : (o(), y(v, { key: 1 }, [
|
|
295
295
|
r(h).footer !== void 0 ? m(i.$slots, "footer", { key: 0 }) : (o(), u(U, {
|
|
296
296
|
key: 1,
|
|
297
297
|
class: a(`${t}-body-footer`)
|
|
298
298
|
}, {
|
|
299
299
|
default: s(() => [
|
|
300
|
-
|
|
300
|
+
_($(e.footerTitle), 1)
|
|
301
301
|
]),
|
|
302
302
|
_: 1
|
|
303
303
|
}, 8, ["class"]))
|
package/es/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.keyblade-pro-
|
|
1
|
+
.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--2156faf3);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(--2156faf3);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(--2156faf3);padding-left:var(--2e3e7e4c);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(--a70b89aa)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--2e3e7e4c);width:calc(100% - var(--2e3e7e4c))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--a70b89aa);width:calc(100% - var(--a70b89aa))}.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-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.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}
|