@keyblade/pro-components 1.5.2 → 1.5.3
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-menu/interface.d.ts +6 -0
- package/es/pro-menu/pro-menu.vue.js +56 -53
- package/es/style.css +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,12 @@ export interface IProMenuItem {
|
|
|
13
13
|
* 方式二、url: 绝对路径或相对路径
|
|
14
14
|
* */
|
|
15
15
|
icon?: string;
|
|
16
|
+
/**
|
|
17
|
+
* 选中菜单图标
|
|
18
|
+
* 方式一、arco design icon: 'icon-apps'，这样需要在主项目中，手动使用 app.use(IconXXX) 进行注册，否则按需加载不能识别动态组件
|
|
19
|
+
* 方式二、url: 绝对路径或相对路径
|
|
20
|
+
* */
|
|
21
|
+
selectedIcon?: string;
|
|
16
22
|
/** 如果设置为 true，右侧菜单不显示 */
|
|
17
23
|
hideInMenu?: boolean;
|
|
18
24
|
/** 如果设置为 true，右侧菜单不显示下面子菜单 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { createReusableTemplate as
|
|
3
|
-
import { useRouter as
|
|
4
|
-
const
|
|
1
|
+
import { defineComponent as W, computed as b, resolveComponent as k, openBlock as l, createBlock as c, normalizeClass as f, withCtx as a, createVNode as $, unref as _, createSlots as I, createTextVNode as N, toDisplayString as T, createElementBlock as s, Fragment as v, renderList as q, createCommentVNode as r, resolveDynamicComponent as B } from "vue";
|
|
2
|
+
import { createReusableTemplate as A } from "@vueuse/core";
|
|
3
|
+
import { useRouter as z } from "vue-router";
|
|
4
|
+
const E = ["src"], F = ["src"], L = "keyblade-pro-menu", w = "keyblade-pro-menu-item", J = /* @__PURE__ */ W({
|
|
5
5
|
__name: "pro-menu",
|
|
6
6
|
props: {
|
|
7
7
|
mode: {
|
|
@@ -23,97 +23,100 @@ const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
emits: {
|
|
26
|
-
"menu-item-click": (
|
|
26
|
+
"menu-item-click": (u) => !0
|
|
27
27
|
},
|
|
28
|
-
setup(
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
return
|
|
32
|
-
}),
|
|
28
|
+
setup(u, { emit: D }) {
|
|
29
|
+
const p = u, y = z(), [K, C] = A(), t = b(() => (n) => {
|
|
30
|
+
var o;
|
|
31
|
+
return (o = p == null ? void 0 : p.selectedKeys) != null && o.includes(n.name) && n != null && n.selectedIcon ? n == null ? void 0 : n.selectedIcon : n == null ? void 0 : n.icon;
|
|
32
|
+
}), d = b(() => (n) => {
|
|
33
|
+
const o = n == null ? void 0 : n.icon;
|
|
34
|
+
return o != null && o.startsWith("icon") ? "icon" : "url";
|
|
35
|
+
}), M = (n) => {
|
|
33
36
|
if (n != null && n.path) {
|
|
34
37
|
if (n.path.startsWith("http") || n.path.startsWith("https")) {
|
|
35
38
|
window.open(n.path);
|
|
36
39
|
return;
|
|
37
40
|
}
|
|
38
|
-
|
|
41
|
+
y == null || y.push({ path: n.path }), D("menu-item-click", n.name);
|
|
39
42
|
}
|
|
40
43
|
};
|
|
41
|
-
return (n,
|
|
42
|
-
const
|
|
43
|
-
return
|
|
44
|
-
mode:
|
|
45
|
-
class:
|
|
46
|
-
collapsed:
|
|
47
|
-
"selected-keys":
|
|
44
|
+
return (n, o) => {
|
|
45
|
+
const R = k("a-sub-menu"), S = k("a-menu-item"), V = k("a-menu");
|
|
46
|
+
return l(), c(V, {
|
|
47
|
+
mode: u.mode,
|
|
48
|
+
class: f(L),
|
|
49
|
+
collapsed: u.collapsed,
|
|
50
|
+
"selected-keys": u.selectedKeys,
|
|
48
51
|
"auto-open-selected": ""
|
|
49
52
|
}, {
|
|
50
|
-
default:
|
|
51
|
-
|
|
52
|
-
default:
|
|
53
|
-
var
|
|
53
|
+
default: a(() => [
|
|
54
|
+
$(_(K), null, {
|
|
55
|
+
default: a(({ item: e }) => {
|
|
56
|
+
var g, x;
|
|
54
57
|
return [
|
|
55
|
-
e != null && e.children && ((
|
|
58
|
+
e != null && e.children && ((g = e == null ? void 0 : e.children) == null ? void 0 : g.length) > 0 ? (l(), c(R, {
|
|
56
59
|
key: e.name
|
|
57
|
-
},
|
|
58
|
-
title:
|
|
59
|
-
|
|
60
|
+
}, I({
|
|
61
|
+
title: a(() => [
|
|
62
|
+
N(T(e.title), 1)
|
|
60
63
|
]),
|
|
61
|
-
default:
|
|
62
|
-
e != null && e.hideChildrenInMenu ?
|
|
63
|
-
key:
|
|
64
|
-
item:
|
|
64
|
+
default: a(() => [
|
|
65
|
+
e != null && e.hideChildrenInMenu ? r("", !0) : (l(!0), s(v, { key: 0 }, q((e == null ? void 0 : e.children) || [], (h) => (l(), c(_(C), {
|
|
66
|
+
key: h.name,
|
|
67
|
+
item: h
|
|
65
68
|
}, null, 8, ["item"]))), 128))
|
|
66
69
|
]),
|
|
67
70
|
_: 2
|
|
68
71
|
}, [
|
|
69
72
|
e != null && e.icon ? {
|
|
70
73
|
name: "icon",
|
|
71
|
-
fn:
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
fn: a(() => [
|
|
75
|
+
d.value(e) === "icon" ? (l(), c(B(t.value(e)), { key: 0 })) : r("", !0),
|
|
76
|
+
d.value(e) === "url" ? (l(), s("img", {
|
|
74
77
|
key: 1,
|
|
75
|
-
class:
|
|
76
|
-
src: e
|
|
78
|
+
class: f(`${w}-img`),
|
|
79
|
+
src: t.value(e),
|
|
77
80
|
alt: ""
|
|
78
|
-
}, null, 10,
|
|
81
|
+
}, null, 10, E)) : r("", !0)
|
|
79
82
|
]),
|
|
80
83
|
key: "0"
|
|
81
84
|
} : void 0
|
|
82
|
-
]), 1024)) :
|
|
83
|
-
!(e != null && e.children) || ((
|
|
85
|
+
]), 1024)) : r("", !0),
|
|
86
|
+
!(e != null && e.children) || ((x = e == null ? void 0 : e.children) == null ? void 0 : x.length) === 0 ? (l(), c(S, {
|
|
84
87
|
key: e.name,
|
|
85
|
-
onClick: (
|
|
86
|
-
},
|
|
87
|
-
default:
|
|
88
|
-
|
|
88
|
+
onClick: (h) => M(e)
|
|
89
|
+
}, I({
|
|
90
|
+
default: a(() => [
|
|
91
|
+
N(" " + T(e.title), 1)
|
|
89
92
|
]),
|
|
90
93
|
_: 2
|
|
91
94
|
}, [
|
|
92
95
|
e != null && e.icon ? {
|
|
93
96
|
name: "icon",
|
|
94
|
-
fn:
|
|
95
|
-
|
|
96
|
-
|
|
97
|
+
fn: a(() => [
|
|
98
|
+
d.value(e) === "icon" ? (l(), c(B(t.value(e)), { key: 0 })) : r("", !0),
|
|
99
|
+
d.value(e) === "url" ? (l(), s("img", {
|
|
97
100
|
key: 1,
|
|
98
|
-
class:
|
|
99
|
-
src: e
|
|
101
|
+
class: f(`${w}-img`),
|
|
102
|
+
src: t.value(e),
|
|
100
103
|
alt: ""
|
|
101
|
-
}, null, 10,
|
|
104
|
+
}, null, 10, F)) : r("", !0)
|
|
102
105
|
]),
|
|
103
106
|
key: "0"
|
|
104
107
|
} : void 0
|
|
105
|
-
]), 1032, ["onClick"])) :
|
|
108
|
+
]), 1032, ["onClick"])) : r("", !0)
|
|
106
109
|
];
|
|
107
110
|
}),
|
|
108
111
|
_: 1
|
|
109
112
|
}),
|
|
110
|
-
(
|
|
113
|
+
(l(!0), s(v, null, q(u.items, (e) => (l(), s(v, {
|
|
111
114
|
key: e.name
|
|
112
115
|
}, [
|
|
113
|
-
e && !e.hideInMenu ? (
|
|
116
|
+
e && !e.hideInMenu ? (l(), c(_(C), {
|
|
114
117
|
key: 0,
|
|
115
118
|
item: e
|
|
116
|
-
}, null, 8, ["item"])) :
|
|
119
|
+
}, null, 8, ["item"])) : r("", !0)
|
|
117
120
|
], 64))), 128))
|
|
118
121
|
]),
|
|
119
122
|
_: 1
|
|
@@ -122,5 +125,5 @@ const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-
|
|
|
122
125
|
}
|
|
123
126
|
});
|
|
124
127
|
export {
|
|
125
|
-
|
|
128
|
+
J as default
|
|
126
129
|
};
|
package/es/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.keyblade-pro-
|
|
1
|
+
.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-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-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}
|