@keyblade/pro-components 1.5.2 → 1.5.4

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.
Files changed (4) hide show
  1. package/es/pro-menu/interface.d.ts +6 -0
  2. package/es/pro-menu/pro-menu.vue.js +81 -80
  3. package/es/style.css +1 -1
  4. package/package.json +1 -1
package/es/pro-menu/interface.d.ts CHANGED
@@ -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，右侧菜单不显示下面子菜单 */
package/es/pro-menu/pro-menu.vue.js CHANGED
@@ -1,7 +1,7 @@
1
- import { defineComponent as R, computed as S, resolveComponent as y, openBlock as r, createBlock as l, normalizeClass as h, withCtx as c, createVNode as V, unref as k, createSlots as g, createTextVNode as i, toDisplayString as x, createElementBlock as u, Fragment as f, renderList as b, createCommentVNode as o, resolveDynamicComponent as N } from "vue";
2
- import { createReusableTemplate as W } from "@vueuse/core";
3
- import { useRouter as $ } from "vue-router";
4
- const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-item", j = /* @__PURE__ */ R({
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 _, createElementBlock as s, Fragment as v, createSlots as I, createTextVNode as N, toDisplayString as T, 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,98 +23,99 @@ const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-
23
23
  }
24
24
  },
25
25
  emits: {
26
- "menu-item-click": (a) => !0
26
+ "menu-item-click": (u) => !0
27
27
  },
28
- setup(a, { emit: q }) {
29
- const d = $(), [B, _] = W(), s = S(() => (n) => {
30
- const t = n == null ? void 0 : n.icon;
31
- return t != null && t.startsWith("icon") ? "icon" : "url";
32
- }), w = (n) => {
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
- d == null || d.push({ path: n.path }), q("menu-item-click", n.name);
41
+ y == null || y.push({ path: n.path }), D("menu-item-click", n.name);
39
42
  }
40
43
  };
41
- return (n, t) => {
42
- const D = y("a-sub-menu"), I = y("a-menu-item"), M = y("a-menu");
43
- return r(), l(M, {
44
- mode: a.mode,
45
- class: h(z),
46
- collapsed: a.collapsed,
47
- "selected-keys": a.selectedKeys,
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: c(() => [
51
- V(k(B), null, {
52
- default: c(({ item: e }) => {
53
- var C, v;
53
+ default: a(() => [
54
+ $(_(K), null, {
55
+ default: a(({ item: e }) => {
56
+ var g, x;
54
57
  return [
55
- e != null && e.children && ((C = e == null ? void 0 : e.children) == null ? void 0 : C.length) > 0 ? (r(), l(D, {
56
- key: e.name
57
- }, g({
58
- title: c(() => [
59
- i(x(e.title), 1)
60
- ]),
61
- default: c(() => [
62
- e != null && e.hideChildrenInMenu ? o("", !0) : (r(!0), u(f, { key: 0 }, b((e == null ? void 0 : e.children) || [], (p) => (r(), l(k(_), {
63
- key: p.name,
64
- item: p
65
- }, null, 8, ["item"]))), 128))
66
- ]),
67
- _: 2
68
- }, [
69
- e != null && e.icon ? {
70
- name: "icon",
71
- fn: c(() => [
72
- s.value(e) === "icon" ? (r(), l(N(e.icon), { key: 0 })) : o("", !0),
73
- s.value(e) === "url" ? (r(), u("img", {
74
- key: 1,
75
- class: h(`${T}-img`),
76
- src: e.icon,
77
- alt: ""
78
- }, null, 10, A)) : o("", !0)
58
+ e && !e.hideInMenu ? (l(), s(v, { key: 0 }, [
59
+ e != null && e.children && ((g = e == null ? void 0 : e.children) == null ? void 0 : g.length) > 0 ? (l(), c(R, {
60
+ key: e.name
61
+ }, I({
62
+ title: a(() => [
63
+ N(T(e.title), 1)
79
64
  ]),
80
- key: "0"
81
- } : void 0
82
- ]), 1024)) : o("", !0),
83
- !(e != null && e.children) || ((v = e == null ? void 0 : e.children) == null ? void 0 : v.length) === 0 ? (r(), l(I, {
84
- key: e.name,
85
- onClick: (p) => w(e)
86
- }, g({
87
- default: c(() => [
88
- i(" " + x(e.title), 1)
89
- ]),
90
- _: 2
91
- }, [
92
- e != null && e.icon ? {
93
- name: "icon",
94
- fn: c(() => [
95
- s.value(e) === "icon" ? (r(), l(N(e.icon), { key: 0 })) : o("", !0),
96
- s.value(e) === "url" ? (r(), u("img", {
97
- key: 1,
98
- class: h(`${T}-img`),
99
- src: e.icon,
100
- alt: ""
101
- }, null, 10, K)) : o("", !0)
65
+ default: a(() => [
66
+ e != null && e.hideChildrenInMenu ? r("", !0) : (l(!0), s(v, { key: 0 }, q((e == null ? void 0 : e.children) || [], (h) => (l(), c(_(C), {
67
+ key: h.name,
68
+ item: h
69
+ }, null, 8, ["item"]))), 128))
102
70
  ]),
103
- key: "0"
104
- } : void 0
105
- ]), 1032, ["onClick"])) : o("", !0)
71
+ _: 2
72
+ }, [
73
+ e != null && e.icon ? {
74
+ name: "icon",
75
+ fn: a(() => [
76
+ d.value(e) === "icon" ? (l(), c(B(t.value(e)), { key: 0 })) : r("", !0),
77
+ d.value(e) === "url" ? (l(), s("img", {
78
+ key: 1,
79
+ class: f(`${w}-img`),
80
+ src: t.value(e),
81
+ alt: ""
82
+ }, null, 10, E)) : r("", !0)
83
+ ]),
84
+ key: "0"
85
+ } : void 0
86
+ ]), 1024)) : r("", !0),
87
+ !(e != null && e.children) || ((x = e == null ? void 0 : e.children) == null ? void 0 : x.length) === 0 ? (l(), c(S, {
88
+ key: e.name,
89
+ onClick: (h) => M(e)
90
+ }, I({
91
+ default: a(() => [
92
+ N(" " + T(e.title), 1)
93
+ ]),
94
+ _: 2
95
+ }, [
96
+ e != null && e.icon ? {
97
+ name: "icon",
98
+ fn: a(() => [
99
+ d.value(e) === "icon" ? (l(), c(B(t.value(e)), { key: 0 })) : r("", !0),
100
+ d.value(e) === "url" ? (l(), s("img", {
101
+ key: 1,
102
+ class: f(`${w}-img`),
103
+ src: t.value(e),
104
+ alt: ""
105
+ }, null, 10, F)) : r("", !0)
106
+ ]),
107
+ key: "0"
108
+ } : void 0
109
+ ]), 1032, ["onClick"])) : r("", !0)
110
+ ], 64)) : r("", !0)
106
111
  ];
107
112
  }),
108
113
  _: 1
109
114
  }),
110
- (r(!0), u(f, null, b(a.items, (e) => (r(), u(f, {
111
- key: e.name
112
- }, [
113
- e && !e.hideInMenu ? (r(), l(k(_), {
114
- key: 0,
115
- item: e
116
- }, null, 8, ["item"])) : o("", !0)
117
- ], 64))), 128))
115
+ (l(!0), s(v, null, q(u.items, (e) => (l(), c(_(C), {
116
+ key: e.name,
117
+ item: e
118
+ }, null, 8, ["item"]))), 128))
118
119
  ]),
119
120
  _: 1
120
121
  }, 8, ["mode", "collapsed", "selected-keys"]);
@@ -122,5 +123,5 @@ const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-
122
123
  }
123
124
  });
124
125
  export {
125
- j as default
126
+ J as default
126
127
  };
package/es/style.css CHANGED
@@ -1 +1 @@
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}
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-page-container .keyblade-pro-page-container-content{padding: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(--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-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@keyblade/pro-components",
3
3
  "description": "KeyBlade Pro Components",
4
4
  "author": "yangshuai <704807396@qq.com>",
5
- "version": "1.5.2",
5
+ "version": "1.5.4",
6
6
  "private": false,
7
7
  "type": "module",
8
8
  "main": "es/index.js",