@keyblade/pro-components 1.4.6 → 1.5.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.
Files changed (36) hide show
  1. package/es/components.d.ts +1 -1
  2. package/es/index.d.ts +1 -1
  3. package/es/index.js +19 -19
  4. package/es/pro-keep-alive-router-view/index.d.ts +1 -1
  5. package/es/pro-layout/hooks.d.ts +1 -1
  6. package/es/pro-layout/hooks.js +1 -1
  7. package/es/pro-layout/index.d.ts +31 -13
  8. package/es/pro-layout/pro-layout.vue.d.ts +36 -15
  9. package/es/pro-layout/pro-layout.vue.js +127 -115
  10. package/es/pro-menu/index.d.ts +24 -4
  11. package/es/pro-menu/index.js +7 -6
  12. package/es/pro-menu/pro-menu.vue.d.ts +13 -1
  13. package/es/pro-menu/pro-menu.vue.js +99 -34
  14. package/es/pro-menu/pro-menu.vue2.js +2 -2
  15. package/es/pro-menu/pro-menu.vue3.js +5 -0
  16. package/es/pro-page-container/index.d.ts +82 -109
  17. package/es/pro-page-container/index.js +7 -7
  18. package/es/pro-page-container/pro-page-container.vue.d.ts +49 -79
  19. package/es/pro-page-container/pro-page-container.vue.js +32 -51
  20. package/es/{pro-breadcrumb → pro-page-header}/index.d.ts +55 -55
  21. package/es/pro-page-header/index.js +13 -0
  22. package/es/{pro-breadcrumb/pro-breadcrumb.vue.d.ts → pro-page-header/pro-page-header.vue.d.ts} +41 -41
  23. package/es/pro-page-header/pro-page-header.vue.js +125 -0
  24. package/es/pro-page-header/pro-page-header.vue3.js +5 -0
  25. package/es/pro-reuse-tabs/index.d.ts +1 -1
  26. package/es/style.css +1 -1
  27. package/package.json +3 -2
  28. package/src/index.ts +3 -3
  29. package/es/pro-breadcrumb/index.js +0 -13
  30. package/es/pro-breadcrumb/pro-breadcrumb.vue.js +0 -102
  31. package/es/pro-breadcrumb/pro-breadcrumb.vue3.js +0 -5
  32. package/es/pro-menu/pro-menu-item.vue.d.ts +0 -14
  33. package/es/pro-menu/pro-menu-item.vue.js +0 -88
  34. package/es/pro-menu/pro-menu-item.vue2.js +0 -4
  35. package/es/pro-menu/pro-menu-item.vue3.js +0 -5
  36. /package/es/{pro-breadcrumb/pro-breadcrumb.vue2.js → pro-page-header/pro-page-header.vue2.js} +0 -0
@@ -1,16 +1,15 @@
1
1
  import { ComponentInternalInstance, VNodeRef, VNode, RendererNode, RendererElement, Slot, ComponentPublicInstance, ComponentOptionsBase, ExtractPropTypes, PropType, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, VNodeProps, AllowedComponentProps, ComponentCustomProps, App } from 'vue';
2
- declare const ProBreadcrumb: {
2
+ declare const ProPageHeader: {
3
3
  new (...args: any[]): {
4
4
  $: ComponentInternalInstance;
5
5
  $data: {};
6
6
  $props: {
7
- showIcon?: boolean | undefined;
8
- icon?: string | undefined;
9
- items?: string[] | undefined;
10
- showTitle?: boolean | undefined;
11
7
  title?: string | undefined;
8
+ breadcrumbItems?: string[] | undefined;
12
9
  subTitle?: string | undefined;
13
- style?: unknown;
10
+ titlePosition?: "top" | "bottom" | undefined;
11
+ hideTitle?: boolean | undefined;
12
+ breadcrumbPrefixIcon?: string | boolean | undefined;
14
13
  key?: string | number | symbol | undefined;
15
14
  ref?: VNodeRef | undefined;
16
15
  ref_for?: boolean | undefined;
@@ -54,6 +53,7 @@ declare const ProBreadcrumb: {
54
53
  [key: string]: any;
55
54
  }>) => void)[] | undefined;
56
55
  class?: unknown;
56
+ style?: unknown;
57
57
  };
58
58
  $attrs: {
59
59
  [x: string]: unknown;
@@ -69,43 +69,43 @@ declare const ProBreadcrumb: {
69
69
  $emit: (event: string, ...args: any[]) => void;
70
70
  $el: any;
71
71
  $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
72
- showIcon: {
73
- type: PropType<boolean>;
72
+ title: {
73
+ type: PropType<string>;
74
74
  required: false;
75
- default: boolean;
75
+ default: string;
76
76
  };
77
- icon: {
77
+ subTitle: {
78
78
  type: PropType<string>;
79
79
  required: false;
80
80
  default: string;
81
81
  };
82
- items: {
83
- type: PropType<string[]>;
82
+ titlePosition: {
83
+ type: PropType<"top" | "bottom">;
84
84
  required: false;
85
- default: () => never[];
85
+ default: string;
86
86
  };
87
- showTitle: {
87
+ hideTitle: {
88
88
  type: PropType<boolean>;
89
89
  required: false;
90
90
  default: boolean;
91
91
  };
92
- title: {
93
- type: PropType<string>;
92
+ breadcrumbPrefixIcon: {
93
+ type: PropType<string | boolean>;
94
94
  required: false;
95
95
  default: string;
96
96
  };
97
- subTitle: {
98
- type: PropType<string>;
97
+ breadcrumbItems: {
98
+ type: PropType<string[]>;
99
99
  required: false;
100
- default: string;
100
+ default: () => never[];
101
101
  };
102
102
  }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
103
- showIcon: boolean;
104
- icon: string;
105
- items: string[];
106
- showTitle: boolean;
107
103
  title: string;
104
+ breadcrumbItems: string[];
108
105
  subTitle: string;
106
+ titlePosition: "top" | "bottom";
107
+ hideTitle: boolean;
108
+ breadcrumbPrefixIcon: string | boolean;
109
109
  }, {}, string, {}> & {
110
110
  beforeCreate?: ((() => void) | (() => void)[]) | undefined;
111
111
  created?: ((() => void) | (() => void)[]) | undefined;
@@ -127,80 +127,80 @@ declare const ProBreadcrumb: {
127
127
  $nextTick: typeof nextTick;
128
128
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
129
129
  } & Readonly<ExtractPropTypes<{
130
- showIcon: {
131
- type: PropType<boolean>;
130
+ title: {
131
+ type: PropType<string>;
132
132
  required: false;
133
- default: boolean;
133
+ default: string;
134
134
  };
135
- icon: {
135
+ subTitle: {
136
136
  type: PropType<string>;
137
137
  required: false;
138
138
  default: string;
139
139
  };
140
- items: {
141
- type: PropType<string[]>;
140
+ titlePosition: {
141
+ type: PropType<"top" | "bottom">;
142
142
  required: false;
143
- default: () => never[];
143
+ default: string;
144
144
  };
145
- showTitle: {
145
+ hideTitle: {
146
146
  type: PropType<boolean>;
147
147
  required: false;
148
148
  default: boolean;
149
149
  };
150
- title: {
151
- type: PropType<string>;
150
+ breadcrumbPrefixIcon: {
151
+ type: PropType<string | boolean>;
152
152
  required: false;
153
153
  default: string;
154
154
  };
155
- subTitle: {
156
- type: PropType<string>;
155
+ breadcrumbItems: {
156
+ type: PropType<string[]>;
157
157
  required: false;
158
- default: string;
158
+ default: () => never[];
159
159
  };
160
160
  }>> & ShallowUnwrapRef<{}> & {} & ComponentCustomProperties & {};
161
161
  __isFragment?: undefined;
162
162
  __isTeleport?: undefined;
163
163
  __isSuspense?: undefined;
164
164
  } & ComponentOptionsBase<Readonly<ExtractPropTypes<{
165
- showIcon: {
166
- type: PropType<boolean>;
165
+ title: {
166
+ type: PropType<string>;
167
167
  required: false;
168
- default: boolean;
168
+ default: string;
169
169
  };
170
- icon: {
170
+ subTitle: {
171
171
  type: PropType<string>;
172
172
  required: false;
173
173
  default: string;
174
174
  };
175
- items: {
176
- type: PropType<string[]>;
175
+ titlePosition: {
176
+ type: PropType<"top" | "bottom">;
177
177
  required: false;
178
- default: () => never[];
178
+ default: string;
179
179
  };
180
- showTitle: {
180
+ hideTitle: {
181
181
  type: PropType<boolean>;
182
182
  required: false;
183
183
  default: boolean;
184
184
  };
185
- title: {
186
- type: PropType<string>;
185
+ breadcrumbPrefixIcon: {
186
+ type: PropType<string | boolean>;
187
187
  required: false;
188
188
  default: string;
189
189
  };
190
- subTitle: {
191
- type: PropType<string>;
190
+ breadcrumbItems: {
191
+ type: PropType<string[]>;
192
192
  required: false;
193
- default: string;
193
+ default: () => never[];
194
194
  };
195
195
  }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
196
- showIcon: boolean;
197
- icon: string;
198
- items: string[];
199
- showTitle: boolean;
200
196
  title: string;
197
+ breadcrumbItems: string[];
201
198
  subTitle: string;
199
+ titlePosition: "top" | "bottom";
200
+ hideTitle: boolean;
201
+ breadcrumbPrefixIcon: string | boolean;
202
202
  }, {}, string, {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
203
203
  install: (app: App) => void;
204
204
  };
205
- export { ProBreadcrumb };
206
- export default ProBreadcrumb;
205
+ export { ProPageHeader };
206
+ export default ProPageHeader;
@@ -0,0 +1,13 @@
1
+ import o from "./pro-page-header.vue.js";
2
+ import "./pro-page-header.vue2.js";
3
+ import { Breadcrumb as r, Typography as s } from "@arco-design/web-vue";
4
+ import { IconApps as t } from "@arco-design/web-vue/es/icon";
5
+ const a = Object.assign(o, {
6
+ install: (e) => {
7
+ e.use(r), e.use(s), e.use(t), e.component("KbProPageHeader", o);
8
+ }
9
+ }), P = a;
10
+ export {
11
+ a as ProPageHeader,
12
+ P as default
13
+ };
@@ -1,29 +1,42 @@
1
1
  import { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, type PropType } from 'vue';
2
2
  declare const _default: DefineComponent<{
3
- /** 是否显示图标 */
4
- showIcon: {
5
- type: PropType<boolean>;
3
+ /** 标题,不传默认展示面包屑标题最后一项 */
4
+ title: {
5
+ type: PropType<string>;
6
6
  required: false;
7
- default: boolean;
7
+ default: string;
8
8
  };
9
- /** 图标类型 */
10
- icon: {
9
+ /** 副标题,不传默认不展示 */
10
+ subTitle: {
11
11
  type: PropType<string>;
12
12
  required: false;
13
13
  default: string;
14
14
  };
15
- /** 面包屑项目 */
16
- items: {
17
- type: PropType<string[]>;
15
+ /** 标题位置 */
16
+ titlePosition: {
17
+ type: PropType<"top" | "bottom">;
18
18
  required: false;
19
- default: () => never[];
19
+ default: string;
20
20
  };
21
- /** 是否显示标题 */
22
- showTitle: {
21
+ /** 是否隐藏标题 */
22
+ hideTitle: {
23
23
  type: PropType<boolean>;
24
24
  required: false;
25
25
  default: boolean;
26
26
  };
27
+ /** 面包屑前缀图标 */
28
+ breadcrumbPrefixIcon: {
29
+ type: PropType<string | boolean>;
30
+ required: false;
31
+ default: string;
32
+ };
33
+ /** 面包屑项 */
34
+ breadcrumbItems: {
35
+ type: PropType<string[]>;
36
+ required: false;
37
+ default: () => never[];
38
+ };
39
+ }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
27
40
  /** 标题,不传默认展示面包屑标题最后一项 */
28
41
  title: {
29
42
  type: PropType<string>;
@@ -36,49 +49,36 @@ declare const _default: DefineComponent<{
36
49
  required: false;
37
50
  default: string;
38
51
  };
39
- }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
40
- /** 是否显示图标 */
41
- showIcon: {
42
- type: PropType<boolean>;
43
- required: false;
44
- default: boolean;
45
- };
46
- /** 图标类型 */
47
- icon: {
48
- type: PropType<string>;
52
+ /** 标题位置 */
53
+ titlePosition: {
54
+ type: PropType<"top" | "bottom">;
49
55
  required: false;
50
56
  default: string;
51
57
  };
52
- /** 面包屑项目 */
53
- items: {
54
- type: PropType<string[]>;
55
- required: false;
56
- default: () => never[];
57
- };
58
- /** 是否显示标题 */
59
- showTitle: {
58
+ /** 是否隐藏标题 */
59
+ hideTitle: {
60
60
  type: PropType<boolean>;
61
61
  required: false;
62
62
  default: boolean;
63
63
  };
64
- /** 标题,不传默认展示面包屑标题最后一项 */
65
- title: {
66
- type: PropType<string>;
64
+ /** 面包屑前缀图标 */
65
+ breadcrumbPrefixIcon: {
66
+ type: PropType<string | boolean>;
67
67
  required: false;
68
68
  default: string;
69
69
  };
70
- /** 副标题,不传默认不展示 */
71
- subTitle: {
72
- type: PropType<string>;
70
+ /** 面包屑项 */
71
+ breadcrumbItems: {
72
+ type: PropType<string[]>;
73
73
  required: false;
74
- default: string;
74
+ default: () => never[];
75
75
  };
76
76
  }>>, {
77
- showIcon: boolean;
78
- icon: string;
79
- items: string[];
80
- showTitle: boolean;
81
77
  title: string;
78
+ breadcrumbItems: string[];
82
79
  subTitle: string;
80
+ titlePosition: "top" | "bottom";
81
+ hideTitle: boolean;
82
+ breadcrumbPrefixIcon: string | boolean;
83
83
  }, {}>;
84
84
  export default _default;
@@ -0,0 +1,125 @@
1
+ import { defineComponent as q, inject as $, computed as S, resolveComponent as d, openBlock as t, createElementBlock as c, normalizeClass as o, createVNode as r, unref as n, withCtx as a, createTextVNode as y, toDisplayString as p, createBlock as b, createCommentVNode as s, resolveDynamicComponent as N, Fragment as _, renderList as R } from "vue";
2
+ import { createReusableTemplate as x } from "@vueuse/core";
3
+ const i = "keyblade-pro-page-header", w = /* @__PURE__ */ q({
4
+ __name: "pro-page-header",
5
+ props: {
6
+ /** 标题,不传默认展示面包屑标题最后一项 */
7
+ title: {
8
+ type: String,
9
+ required: !1,
10
+ default: ""
11
+ },
12
+ /** 副标题,不传默认不展示 */
13
+ subTitle: {
14
+ type: String,
15
+ required: !1,
16
+ default: ""
17
+ },
18
+ /** 标题位置 */
19
+ titlePosition: {
20
+ type: String,
21
+ required: !1,
22
+ default: "top"
23
+ },
24
+ /** 是否隐藏标题 */
25
+ hideTitle: {
26
+ type: Boolean,
27
+ required: !1,
28
+ default: !1
29
+ },
30
+ /** 面包屑前缀图标 */
31
+ breadcrumbPrefixIcon: {
32
+ type: [Boolean, String],
33
+ required: !1,
34
+ default: "icon-apps"
35
+ },
36
+ /** 面包屑项 */
37
+ breadcrumbItems: {
38
+ type: Array,
39
+ required: !1,
40
+ default: () => []
41
+ }
42
+ },
43
+ setup(l) {
44
+ const e = l, [I, g] = x(), [k, h] = x(), B = $("ProBreadcrumbItems", []), f = S(() => e.breadcrumbItems instanceof Array && e.breadcrumbItems.length === 0 || !e.breadcrumbItems ? B.value : e.breadcrumbItems || []);
45
+ return (V, A) => {
46
+ const v = d("a-typography-title"), C = d("a-typography-text"), T = d("a-breadcrumb-item"), P = d("a-breadcrumb");
47
+ return t(), c("div", {
48
+ class: o(i)
49
+ }, [
50
+ r(n(k), null, {
51
+ default: a(() => [
52
+ l.hideTitle ? s("", !0) : (t(), c("div", {
53
+ key: 0,
54
+ class: o(`${i}-section-title`)
55
+ }, [
56
+ r(v, {
57
+ heading: 6,
58
+ class: o(`${i}-title`)
59
+ }, {
60
+ default: a(() => {
61
+ var u, m;
62
+ return [
63
+ y(p((e == null ? void 0 : e.title) || ((m = f.value) == null ? void 0 : m[((u = f.value) == null ? void 0 : u.length) - 1])), 1)
64
+ ];
65
+ }),
66
+ _: 1
67
+ }, 8, ["class"]),
68
+ e != null && e.subTitle ? (t(), b(C, {
69
+ key: 0,
70
+ type: "secondary",
71
+ class: o(`${i}-subtitle`)
72
+ }, {
73
+ default: a(() => [
74
+ y(p(e == null ? void 0 : e.subTitle), 1)
75
+ ]),
76
+ _: 1
77
+ }, 8, ["class"])) : s("", !0)
78
+ ], 2))
79
+ ]),
80
+ _: 1
81
+ }),
82
+ r(n(I), null, {
83
+ default: a(() => [
84
+ r(P, {
85
+ class: o(`${i}-section-breadcrumb`)
86
+ }, {
87
+ default: a(() => [
88
+ l.breadcrumbPrefixIcon ? (t(), b(T, {
89
+ key: 0,
90
+ style: { cursor: "text" }
91
+ }, {
92
+ default: a(() => [
93
+ (t(), b(N(l.breadcrumbPrefixIcon)))
94
+ ]),
95
+ _: 1
96
+ })) : s("", !0),
97
+ (t(!0), c(_, null, R(f.value, (u, m) => (t(), b(T, {
98
+ key: `${u}-${m}`
99
+ }, {
100
+ default: a(() => [
101
+ y(p(u), 1)
102
+ ]),
103
+ _: 2
104
+ }, 1024))), 128))
105
+ ]),
106
+ _: 1
107
+ }, 8, ["class"])
108
+ ]),
109
+ _: 1
110
+ }),
111
+ l.titlePosition === "top" ? (t(), c(_, { key: 0 }, [
112
+ r(n(h)),
113
+ r(n(g))
114
+ ], 64)) : s("", !0),
115
+ l.titlePosition === "bottom" ? (t(), c(_, { key: 1 }, [
116
+ r(n(g)),
117
+ r(n(h))
118
+ ], 64)) : s("", !0)
119
+ ]);
120
+ };
121
+ }
122
+ });
123
+ export {
124
+ w as default
125
+ };
@@ -0,0 +1,5 @@
1
+ import o from "./pro-page-header.vue.js";
2
+ import "./pro-page-header.vue2.js";
3
+ export {
4
+ o as default
5
+ };
@@ -6,7 +6,6 @@ declare const ProReuseTabs: {
6
6
  $data: {};
7
7
  $props: {
8
8
  tabs?: IProTab[] | undefined;
9
- style?: unknown;
10
9
  key?: string | number | symbol | undefined;
11
10
  ref?: VNodeRef | undefined;
12
11
  ref_for?: boolean | undefined;
@@ -50,6 +49,7 @@ declare const ProReuseTabs: {
50
49
  [key: string]: any;
51
50
  }>) => void)[] | undefined;
52
51
  class?: unknown;
52
+ style?: unknown;
53
53
  "onTab-click"?: ((key: string) => any) | undefined;
54
54
  "onTab-delete"?: ((key: string) => any) | undefined;
55
55
  };
package/es/style.css CHANGED
@@ -1 +1 @@
1
- .keyblade-pro-breadcrumb{margin:16px 0}.keyblade-pro-page-container{padding:0 20px 20px}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout :global(.arco-layout-sider-trigger){border-top:0}.keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--79d837bc);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-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout-header-left-logo{height:28px}.keyblade-pro-layout-header-left-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-sider{padding-top:var(--79d837bc);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout-sider-collapsed-icon.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout-body{padding-top:var(--79d837bc);padding-left:var(--51986431);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout-body-affix .arco-affix{z-index:98}.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-body-collapsed{padding-left:var(--2cc12c98)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--51986431);width:calc(100% - var(--51986431))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--2cc12c98);width:calc(100% - var(--2cc12c98))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-top{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-top-logo{width:28px;height:auto}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-top-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-top{padding:16px 8px}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-menu-item-img{width:14px;height:auto}
1
+ .keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout :global(.arco-layout-sider-trigger){border-top:0}.keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--db27ef1a);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-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout-header-left-logo{height:28px}.keyblade-pro-layout-header-left-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout-sider{padding-top:var(--db27ef1a);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout-sider-collapsed-icon.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout-body{padding-top:var(--db27ef1a);padding-left:var(--2f10394c);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout-body-affix .arco-affix{z-index:98}.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-body-collapsed{padding-left:var(--2c81e8ab)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--2f10394c);width:calc(100% - var(--2f10394c))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--2c81e8ab);width:calc(100% - var(--2c81e8ab))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-top{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-top-logo{width:28px;height:auto}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-top-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-top{padding:16px 8px}.keyblade-pro-page-container-content{padding:20px}.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.4.6",
5
+ "version": "1.5.0",
6
6
  "private": false,
7
7
  "type": "module",
8
8
  "main": "es/index.js",
@@ -21,7 +21,8 @@
21
21
  ],
22
22
  "dependencies": {
23
23
  "@arco-design/web-vue": "^2.50.0",
24
- "vue-router": "^4.2.4"
24
+ "vue-router": "^4.2.4",
25
+ "@vueuse/core": "^10.3.0"
25
26
  },
26
27
  "peerDependencies": {
27
28
  "vue": "^3.3.4"
package/src/index.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { App } from 'vue'
2
- import { ProBreadcrumb } from './pro-breadcrumb'
2
+ import { ProPageHeader } from './pro-page-header'
3
3
  import { ProKeepAliveRouterView } from './pro-keep-alive-router-view'
4
4
  import { ProLayout } from './pro-layout'
5
5
  import { ProMenu } from './pro-menu'
@@ -8,7 +8,7 @@ import { ProReuseTabs } from './pro-reuse-tabs'
8
8
 
9
9
  export default {
10
10
  install(app: App): void {
11
- app.use(ProBreadcrumb)
11
+ app.use(ProPageHeader)
12
12
  app.use(ProKeepAliveRouterView)
13
13
  app.use(ProLayout)
14
14
  app.use(ProMenu)
@@ -18,7 +18,7 @@ export default {
18
18
  }
19
19
 
20
20
  // 按组件导出
21
- export { default as ProBreadcrumb } from './pro-breadcrumb'
21
+ export { default as ProPageHeader } from './pro-page-header'
22
22
 
23
23
  export { default as ProKeepAliveRouterView } from './pro-keep-alive-router-view'
24
24
 
@@ -1,13 +0,0 @@
1
- import o from "./pro-breadcrumb.vue.js";
2
- import "./pro-breadcrumb.vue2.js";
3
- import { Breadcrumb as m } from "@arco-design/web-vue";
4
- import { IconApps as t } from "@arco-design/web-vue/es/icon";
5
- const c = Object.assign(o, {
6
- install: (r) => {
7
- r.use(m), r.use(t), r.component("KbProBreadcrumb", o);
8
- }
9
- }), i = c;
10
- export {
11
- c as ProBreadcrumb,
12
- i as default
13
- };
@@ -1,102 +0,0 @@
1
- import { defineComponent as k, inject as v, computed as x, resolveComponent as s, openBlock as t, createElementBlock as _, normalizeClass as u, createVNode as B, withCtx as r, createBlock as l, resolveDynamicComponent as C, createCommentVNode as c, Fragment as q, renderList as T, createTextVNode as d, toDisplayString as y } from "vue";
2
- const i = "keyblade-pro-breadcrumb", N = /* @__PURE__ */ k({
3
- __name: "pro-breadcrumb",
4
- props: {
5
- /** 是否显示图标 */
6
- showIcon: {
7
- type: Boolean,
8
- required: !1,
9
- default: !0
10
- },
11
- /** 图标类型 */
12
- icon: {
13
- type: String,
14
- required: !1,
15
- default: "icon-apps"
16
- },
17
- /** 面包屑项目 */
18
- items: {
19
- type: Array,
20
- required: !1,
21
- default: () => []
22
- },
23
- /** 是否显示标题 */
24
- showTitle: {
25
- type: Boolean,
26
- required: !1,
27
- default: !0
28
- },
29
- /** 标题,不传默认展示面包屑标题最后一项 */
30
- title: {
31
- type: String,
32
- required: !1,
33
- default: ""
34
- },
35
- /** 副标题,不传默认不展示 */
36
- subTitle: {
37
- type: String,
38
- required: !1,
39
- default: ""
40
- }
41
- },
42
- setup(m) {
43
- const e = m, b = v("ProBreadcrumbItems", []), n = x(() => e.items instanceof Array && e.items.length === 0 || !e.items ? b.value : e.items || []);
44
- return (w, I) => {
45
- const f = s("a-breadcrumb-item"), p = s("a-breadcrumb"), h = s("a-typography-title"), g = s("a-typography-text");
46
- return n.value ? (t(), _("div", {
47
- key: 0,
48
- class: u(i)
49
- }, [
50
- B(p, {
51
- class: u(`${i}-items`)
52
- }, {
53
- default: r(() => [
54
- m.showIcon ? (t(), l(f, {
55
- key: 0,
56
- style: { cursor: "text" }
57
- }, {
58
- default: r(() => [
59
- (t(), l(C(m.icon)))
60
- ]),
61
- _: 1
62
- })) : c("", !0),
63
- (t(!0), _(q, null, T(n.value, (a, o) => (t(), l(f, {
64
- key: `${a}-${o}`
65
- }, {
66
- default: r(() => [
67
- d(y(a), 1)
68
- ]),
69
- _: 2
70
- }, 1024))), 128))
71
- ]),
72
- _: 1
73
- }, 8, ["class"]),
74
- e != null && e.showTitle ? (t(), l(h, {
75
- key: 0,
76
- heading: 6,
77
- class: u(`${i}-title`)
78
- }, {
79
- default: r(() => {
80
- var a, o;
81
- return [
82
- d(y((e == null ? void 0 : e.title) || ((o = n.value) == null ? void 0 : o[((a = n.value) == null ? void 0 : a.length) - 1])), 1)
83
- ];
84
- }),
85
- _: 1
86
- }, 8, ["class"])) : c("", !0),
87
- e != null && e.subTitle ? (t(), l(g, {
88
- key: 1,
89
- class: u(`${i}-subtitle`)
90
- }, {
91
- default: r(() => [
92
- d(y(e == null ? void 0 : e.subTitle), 1)
93
- ]),
94
- _: 1
95
- }, 8, ["class"])) : c("", !0)
96
- ])) : c("", !0);
97
- };
98
- }
99
- });
100
- export {
101
- N as default
102
- };
@@ -1,5 +0,0 @@
1
- import o from "./pro-breadcrumb.vue.js";
2
- import "./pro-breadcrumb.vue2.js";
3
- export {
4
- o as default
5
- };