@meethive/components 0.0.4 → 0.0.6
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/ProLayout/Basic/BasicLayout.js +128 -68
- package/es/ProLayout/Basic/Header.js +15 -9
- package/es/ProLayout/PageContainer/index.js +83 -52
- package/es/ProLayout/SiderMenu/BaseMenu.js +69 -22
- package/lib/ProLayout/Basic/BasicLayout.js +128 -68
- package/lib/ProLayout/Basic/Header.js +15 -9
- package/lib/ProLayout/PageContainer/index.js +83 -52
- package/lib/ProLayout/SiderMenu/BaseMenu.js +69 -22
- package/package.json +9 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, computed, reactive, watchEffect, toRefs, provide, h, Fragment } from 'vue';
|
|
1
|
+
import { defineComponent, computed, reactive, watchEffect, toRefs, provide, h, Fragment, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from 'vue';
|
|
2
2
|
import { pick } from 'lodash-es';
|
|
3
3
|
import { Layout, LayoutContent, Breadcrumb, Tabs } from 'ant-design-vue';
|
|
4
4
|
import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
|
|
@@ -227,78 +227,138 @@ export default defineComponent({
|
|
|
227
227
|
return slots.default?.();
|
|
228
228
|
}
|
|
229
229
|
if (props.layoutType === LayoutType.LIST) {
|
|
230
|
-
return
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
230
|
+
return _createVNode(_Fragment, null, [_createVNode("div", {
|
|
231
|
+
"class": className.value
|
|
232
|
+
}, [_createVNode(Layout, {
|
|
233
|
+
"style": {
|
|
234
|
+
minHeight: '100vh',
|
|
235
|
+
...(attrs.style || {})
|
|
236
|
+
}
|
|
237
|
+
}, {
|
|
238
|
+
default: () => [headerDom.value, _createVNode(Layout, {
|
|
239
|
+
"style": genLayoutStyle,
|
|
240
|
+
"class": prefixCls.value
|
|
241
|
+
}, {
|
|
242
|
+
default: () => [!isTop.value && _createVNode(SiderMenu, _mergeProps(restProps, {
|
|
243
|
+
"logo": logoRender || restProps.logo,
|
|
244
|
+
"menuHeaderRender": menuHeaderRender,
|
|
245
|
+
"menuExtraRender": menuExtraRender,
|
|
246
|
+
"menuContentRender": menuContentRender,
|
|
247
|
+
"menuItemRender": menuItemRender,
|
|
248
|
+
"subMenuItemRender": subMenuItemRender,
|
|
249
|
+
"collapsedButtonRender": collapsedButtonRender,
|
|
250
|
+
"onCollapse": onCollapse,
|
|
251
|
+
"onSelect": onSelect,
|
|
252
|
+
"onOpenKeys": onOpenKeys,
|
|
253
|
+
"onMenuClick": onMenuClick
|
|
254
|
+
}), null), _createVNode(Layout, null, {
|
|
255
|
+
default: () => [_createVNode(LayoutContent, null, {
|
|
256
|
+
default: () => [slots.default?.()]
|
|
257
|
+
})]
|
|
258
|
+
})]
|
|
259
|
+
})]
|
|
260
|
+
})])]);
|
|
248
261
|
} else if (props.layoutType === LayoutType.PAD) {
|
|
249
|
-
return
|
|
250
|
-
|
|
262
|
+
return _createVNode("div", {
|
|
263
|
+
"class": className.value
|
|
264
|
+
}, [_createVNode(Layout, {
|
|
265
|
+
"style": {
|
|
251
266
|
minHeight: '100vh',
|
|
252
267
|
...(attrs.style || {})
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
268
|
+
}
|
|
269
|
+
}, {
|
|
270
|
+
default: () => [_createVNode(SiderMenu, _mergeProps(restProps, {
|
|
271
|
+
"logo": logoRender || restProps.logo,
|
|
272
|
+
"collapsedWidth": 0,
|
|
273
|
+
"headerHeight": 0,
|
|
274
|
+
"menuHeaderRender": menuHeaderRender,
|
|
275
|
+
"menuExtraRender": menuExtraRender,
|
|
276
|
+
"menuContentRender": menuContentRender,
|
|
277
|
+
"menuItemRender": menuItemRender,
|
|
278
|
+
"subMenuItemRender": subMenuItemRender,
|
|
279
|
+
"collapsedButtonRender": collapsedButtonRender,
|
|
280
|
+
"onCollapse": onCollapse,
|
|
281
|
+
"onSelect": onSelect,
|
|
282
|
+
"onOpenKeys": onOpenKeys,
|
|
283
|
+
"onMenuClick": onMenuClick
|
|
284
|
+
}), null), _createVNode(Layout, {
|
|
285
|
+
"style": genLayoutStyle,
|
|
286
|
+
"class": prefixCls.value
|
|
287
|
+
}, {
|
|
288
|
+
default: () => [headerDom.value, _createVNode(LayoutContent, null, {
|
|
289
|
+
default: () => [slots.default?.()]
|
|
290
|
+
})]
|
|
291
|
+
})]
|
|
292
|
+
})]);
|
|
263
293
|
} else {
|
|
264
294
|
// CARD layout
|
|
265
|
-
return
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
295
|
+
return _createVNode(_Fragment, null, [_createVNode("div", {
|
|
296
|
+
"class": className.value
|
|
297
|
+
}, [_createVNode(Layout, null, {
|
|
298
|
+
default: () => [_createVNode(SiderMenu, _mergeProps(restProps, {
|
|
299
|
+
"logo": logoRender || restProps.logo,
|
|
300
|
+
"siderWidth": props.cardSiderWidth,
|
|
301
|
+
"headerHeight": 0,
|
|
302
|
+
"menuHeaderRender": menuHeaderRender,
|
|
303
|
+
"menuExtraRender": menuExtraRender,
|
|
304
|
+
"linksRender": linksRender,
|
|
305
|
+
"menuContentRender": menuContentRender,
|
|
306
|
+
"menuItemRender": menuItemRender,
|
|
307
|
+
"subMenuItemRender": subMenuItemRender,
|
|
308
|
+
"onCollapse": onCollapse,
|
|
309
|
+
"onSelect": onSelect,
|
|
310
|
+
"onOpenKeys": onOpenKeys,
|
|
311
|
+
"onMenuClick": onMenuClick,
|
|
312
|
+
"onAppMenuClick": onAppMenuClick
|
|
313
|
+
}), null), _createVNode(Layout, null, {
|
|
314
|
+
default: () => [_createVNode(Layout.Header, {
|
|
315
|
+
"style": {
|
|
316
|
+
background: 'transparent',
|
|
317
|
+
padding: 0,
|
|
318
|
+
height: '40px',
|
|
319
|
+
...(props.pageHeaderStyle || {})
|
|
320
|
+
}
|
|
321
|
+
}, {
|
|
322
|
+
default: () => [_createVNode(Tabs, {
|
|
323
|
+
"hide-add": true,
|
|
324
|
+
"type": "editable-card",
|
|
325
|
+
"class": "history-tabs",
|
|
326
|
+
"id": "history-route-tabs",
|
|
327
|
+
"tabBarStyle": {
|
|
328
|
+
margin: 0
|
|
329
|
+
},
|
|
330
|
+
"onTabClick": onTabClick,
|
|
331
|
+
"onEdit": onTabEdit,
|
|
332
|
+
"activeKey": props.historyActive,
|
|
333
|
+
"onChange": onTabChange
|
|
334
|
+
}, {
|
|
335
|
+
default: () => [historyRender ? historyRender() : props.historyRoutes.map(item => _createVNode(Tabs.TabPane, {
|
|
336
|
+
"key": item.name,
|
|
337
|
+
"tab": item.label,
|
|
338
|
+
"closable": true
|
|
339
|
+
}, null))]
|
|
340
|
+
})]
|
|
341
|
+
}), _createVNode(LayoutContent, {
|
|
342
|
+
"style": {
|
|
343
|
+
flex: '1 1 0',
|
|
344
|
+
overflow: 'auto'
|
|
345
|
+
}
|
|
346
|
+
}, {
|
|
347
|
+
default: () => [slots.default?.()]
|
|
348
|
+
}), _createVNode(Layout.Footer, {
|
|
349
|
+
"style": {
|
|
350
|
+
padding: '11px 24px',
|
|
351
|
+
...(props.pageFooterStyle || {})
|
|
352
|
+
}
|
|
353
|
+
}, {
|
|
354
|
+
default: () => [_createVNode(Breadcrumb, {
|
|
355
|
+
"routes": breadcrumb.value.routes
|
|
356
|
+
}, {
|
|
357
|
+
itemRender: breadcrumb.value.itemRender
|
|
358
|
+
})]
|
|
359
|
+
})]
|
|
360
|
+
})]
|
|
361
|
+
})])]);
|
|
302
362
|
}
|
|
303
363
|
};
|
|
304
364
|
}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { createVNode as _createVNode } from 'vue';
|
|
1
|
+
import { createVNode as _createVNode, Fragment as _Fragment2, createVNode as _createVNode2, isVNode as _isVNode } from 'vue';
|
|
2
2
|
import { defineComponent, computed, toRefs } from 'vue';
|
|
3
3
|
import { Layout } from 'ant-design-vue';
|
|
4
4
|
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
|
5
5
|
import { baseHeaderProps, TopNavHeader } from '../TopHeader';
|
|
6
6
|
import { useRouteContext } from '../RouteContext';
|
|
7
7
|
import { LayoutType } from '../defaultSettings';
|
|
8
|
+
function _isSlot(s) {
|
|
9
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
|
10
|
+
}
|
|
8
11
|
export const headerViewProps = {
|
|
9
12
|
...baseHeaderProps,
|
|
10
13
|
headerRender: {
|
|
@@ -69,23 +72,26 @@ export default defineComponent({
|
|
|
69
72
|
return 0;
|
|
70
73
|
});
|
|
71
74
|
return () => {
|
|
72
|
-
|
|
73
|
-
|
|
75
|
+
let _slot;
|
|
76
|
+
return _createVNode2(_Fragment2, null, [needFixedHeader.value && _createVNode2(Layout.Header, {
|
|
77
|
+
"style": {
|
|
74
78
|
height: `${headerHeight.value}px`,
|
|
75
79
|
lineHeight: `${headerHeight.value}px`,
|
|
76
80
|
background: 'transparent'
|
|
77
|
-
}
|
|
78
|
-
|
|
81
|
+
}
|
|
82
|
+
}, null), _createVNode2(Layout.Header, {
|
|
83
|
+
"style": {
|
|
79
84
|
padding: 0,
|
|
80
85
|
height: `${headerHeight.value}px`,
|
|
81
86
|
lineHeight: `${headerHeight.value}px`,
|
|
82
87
|
width: props.hasSiderMenu ? `calc(100% - ${width.value}px)` : '100%',
|
|
83
88
|
zIndex: 100,
|
|
84
89
|
right: right.value
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
90
|
+
},
|
|
91
|
+
"class": className.value
|
|
92
|
+
}, _isSlot(_slot = renderContent()) ? _slot : {
|
|
93
|
+
default: () => [_slot]
|
|
94
|
+
})]);
|
|
89
95
|
};
|
|
90
96
|
}
|
|
91
97
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, computed, toRefs, unref } from 'vue';
|
|
1
|
+
import { defineComponent, computed, toRefs, unref, createVNode as _createVNode, mergeProps as _mergeProps, isVNode as _isVNode, Fragment as _Fragment } from 'vue';
|
|
2
2
|
import { withInstall } from 'ant-design-vue/es/_util/type';
|
|
3
3
|
import { Affix, Spin, PageHeader, Tabs, Button } from 'ant-design-vue';
|
|
4
4
|
import { pageHeaderProps } from 'ant-design-vue/es/page-header';
|
|
@@ -7,6 +7,9 @@ import { getSlotVNode } from '../util';
|
|
|
7
7
|
import { LayoutType } from '../defaultSettings';
|
|
8
8
|
import { useLocaleReceiver } from '../../LocaleReciver';
|
|
9
9
|
import useProLayoutStyle from '../style';
|
|
10
|
+
function _isSlot(s) {
|
|
11
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
|
12
|
+
}
|
|
10
13
|
export const pageHeaderTabConfig = {
|
|
11
14
|
/**
|
|
12
15
|
* @name tabs 的列表
|
|
@@ -116,16 +119,27 @@ const renderFooter = props => {
|
|
|
116
119
|
tabProps
|
|
117
120
|
} = props;
|
|
118
121
|
const tabPane = item => {
|
|
119
|
-
return
|
|
122
|
+
return _createVNode("span", {
|
|
123
|
+
"class": item.class || `tab-pane-${item.key}`
|
|
124
|
+
}, [item.tab]);
|
|
120
125
|
};
|
|
121
126
|
if (tabList && tabList.length) {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
let _slot;
|
|
128
|
+
return _createVNode(Tabs, _mergeProps({
|
|
129
|
+
"class": "page-container-tabs",
|
|
130
|
+
"activeKey": tabActiveKey,
|
|
131
|
+
"onChange": key => {
|
|
132
|
+
if (onTabChange) {
|
|
133
|
+
onTabChange(key);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
"tabBarExtraContent": tabBarExtraContent
|
|
137
|
+
}, tabProps), _isSlot(_slot = tabList.map(item => _createVNode(Tabs.TabPane, _mergeProps(item, {
|
|
138
|
+
"tab": tabPane(item),
|
|
139
|
+
"key": item.key
|
|
140
|
+
}), null))) ? _slot : {
|
|
141
|
+
default: () => [_slot]
|
|
142
|
+
});
|
|
129
143
|
}
|
|
130
144
|
return null;
|
|
131
145
|
};
|
|
@@ -133,18 +147,17 @@ const renderPageHeader = (content, extraContent, prefixedClassName) => {
|
|
|
133
147
|
if (!content && !extraContent) {
|
|
134
148
|
return null;
|
|
135
149
|
}
|
|
136
|
-
return
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
</div>;
|
|
150
|
+
return _createVNode("div", {
|
|
151
|
+
"class": `${prefixedClassName}-detail`
|
|
152
|
+
}, [_createVNode("div", {
|
|
153
|
+
"class": `${prefixedClassName}-main`
|
|
154
|
+
}, [_createVNode("div", {
|
|
155
|
+
"class": `${prefixedClassName}-row`
|
|
156
|
+
}, [content && _createVNode("div", {
|
|
157
|
+
"class": `${prefixedClassName}-content`
|
|
158
|
+
}, [typeof content === 'function' && content() || content]), extraContent && _createVNode("div", {
|
|
159
|
+
"class": `${prefixedClassName}-extraContent`
|
|
160
|
+
}, [typeof extraContent === 'function' && extraContent() || extraContent])])])]);
|
|
148
161
|
};
|
|
149
162
|
const ProPageHeader = props => {
|
|
150
163
|
const {
|
|
@@ -185,7 +198,9 @@ const ProPageHeader = props => {
|
|
|
185
198
|
const backProps = {};
|
|
186
199
|
if (showBack) {
|
|
187
200
|
// @ts-ignore
|
|
188
|
-
backProps.backIcon =
|
|
201
|
+
backProps.backIcon = _createVNode(Button, null, {
|
|
202
|
+
default: () => [contextLocale.value.pageContainer.back]
|
|
203
|
+
});
|
|
189
204
|
backProps.onBack = () => {
|
|
190
205
|
if (props.onBack) {
|
|
191
206
|
props.onBack();
|
|
@@ -197,15 +212,22 @@ const ProPageHeader = props => {
|
|
|
197
212
|
const styles = value.layoutType === LayoutType.CARD ? {
|
|
198
213
|
padding: props.extra || props.subTitle || pageHeaderTitle || tabList || props.extraContent || props.showBack || props.title ? '16px 24px' : '0px'
|
|
199
214
|
} : {};
|
|
200
|
-
return
|
|
201
|
-
|
|
215
|
+
return _createVNode("div", {
|
|
216
|
+
"class": `${prefixedClassName}-wrap`
|
|
217
|
+
}, [_createVNode(PageHeader, _mergeProps({
|
|
218
|
+
"style": styles
|
|
219
|
+
}, backProps, restProps, {
|
|
220
|
+
"title": pageHeaderTitle,
|
|
221
|
+
"breadcrumb": value.layoutType === LayoutType.LIST ? breadcrumb : null,
|
|
222
|
+
"footer": renderFooter({
|
|
202
223
|
...restProps,
|
|
203
224
|
tabList,
|
|
204
225
|
tabActiveKey
|
|
205
|
-
})
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
226
|
+
}),
|
|
227
|
+
"prefixCls": prefixCls
|
|
228
|
+
}), {
|
|
229
|
+
default: () => [header || renderPageHeader(content, extraContent, prefixedClassName)]
|
|
230
|
+
})]);
|
|
209
231
|
};
|
|
210
232
|
const PageContainer = defineComponent({
|
|
211
233
|
name: 'JPageContainer',
|
|
@@ -240,37 +262,46 @@ const PageContainer = defineComponent({
|
|
|
240
262
|
const subTitle = getSlotVNode(slots, props, 'subTitle');
|
|
241
263
|
const title = getSlotVNode(slots, props, 'title');
|
|
242
264
|
// @ts-ignore
|
|
243
|
-
return
|
|
265
|
+
return _createVNode(ProPageHeader, _mergeProps(props, {
|
|
266
|
+
"prefixCls": undefined,
|
|
267
|
+
"prefixedClassName": prefixedClassName.value,
|
|
268
|
+
"ghost": ghost.value,
|
|
269
|
+
"title": title,
|
|
270
|
+
"subTitle": subTitle,
|
|
271
|
+
"content": headerContent,
|
|
272
|
+
"extra": extra,
|
|
273
|
+
"extraContent": extraContent
|
|
274
|
+
}), null);
|
|
244
275
|
});
|
|
245
276
|
return () => {
|
|
246
277
|
const {
|
|
247
278
|
fixedHeader,
|
|
248
279
|
pure
|
|
249
280
|
} = props;
|
|
250
|
-
return
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
281
|
+
return _createVNode(_Fragment, null, [pure ? _createVNode("div", {
|
|
282
|
+
"class": classNames.value
|
|
283
|
+
}, [slots.default?.()]) : _createVNode("div", {
|
|
284
|
+
"class": classNames.value,
|
|
285
|
+
"style": {
|
|
254
286
|
...(attrs.style || {})
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
</>;
|
|
287
|
+
}
|
|
288
|
+
}, [fixedHeader && headerDom.value ? _createVNode(Affix, _mergeProps(affixProps.value, {
|
|
289
|
+
"offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
|
|
290
|
+
}), {
|
|
291
|
+
default: () => [headerDom.value]
|
|
292
|
+
}) : headerDom.value, _createVNode("div", {
|
|
293
|
+
"class": `${prefixedClassName.value}-grid-content`
|
|
294
|
+
}, [loading.value ? _createVNode(Spin, null, null) : slots.default ? _createVNode("div", null, [_createVNode("div", {
|
|
295
|
+
"class": `${prefixedClassName.value}-children-content ${childrenFullHeight.value ? 'children-full-height' : ''} ${hashId.value}`,
|
|
296
|
+
"style": {
|
|
297
|
+
...(props.contentStyle || {})
|
|
298
|
+
}
|
|
299
|
+
}, [slots.default()]), value.hasFooterToolbar && _createVNode("div", {
|
|
300
|
+
"style": {
|
|
301
|
+
height: 48,
|
|
302
|
+
marginTop: 24
|
|
303
|
+
}
|
|
304
|
+
}, null)]) : null])])]);
|
|
274
305
|
};
|
|
275
306
|
}
|
|
276
307
|
});
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { defineComponent, watchEffect, isVNode, resolveComponent, getCurrentInstance, withCtx } from 'vue';
|
|
1
|
+
import { defineComponent, watchEffect, isVNode, resolveComponent, getCurrentInstance, withCtx, createVNode as _createVNode, isVNode as _isVNode, mergeProps as _mergeProps } from 'vue';
|
|
2
2
|
import { Menu } from 'ant-design-vue';
|
|
3
3
|
import { createFromIconfontCN } from '@ant-design/icons-vue';
|
|
4
4
|
import { defaultSettingProps } from '../defaultSettings';
|
|
5
5
|
import { defaultPrefixCls } from '../RouteContext';
|
|
6
6
|
import IconFont from '../../Icon';
|
|
7
7
|
import { regular } from '@meethive/utils';
|
|
8
|
+
function _isSlot(s) {
|
|
9
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
|
10
|
+
}
|
|
8
11
|
let AntdIconFont = createFromIconfontCN({
|
|
9
12
|
scriptUrl: ''
|
|
10
13
|
});
|
|
@@ -20,9 +23,17 @@ const LazyIcon = props => {
|
|
|
20
23
|
}
|
|
21
24
|
if (typeof icon === 'string' && icon !== '') {
|
|
22
25
|
if (regular.isUrl(icon) || regular.isImg(icon)) {
|
|
23
|
-
return
|
|
26
|
+
return _createVNode("img", {
|
|
27
|
+
"src": icon,
|
|
28
|
+
"alt": "icon",
|
|
29
|
+
"class": `${prefixCls}-sider-menu-icon`
|
|
30
|
+
}, null);
|
|
24
31
|
}
|
|
25
|
-
return iconUrl ?
|
|
32
|
+
return iconUrl ? _createVNode(AntdIconFont, {
|
|
33
|
+
"type": icon
|
|
34
|
+
}, null) : _createVNode(IconFont, {
|
|
35
|
+
"type": icon
|
|
36
|
+
}, null);
|
|
26
37
|
}
|
|
27
38
|
return null;
|
|
28
39
|
};
|
|
@@ -87,6 +98,7 @@ class MenuUtil {
|
|
|
87
98
|
};
|
|
88
99
|
getSubMenuOrItem = item => {
|
|
89
100
|
if (Array.isArray(item.children) && item.children.length > 0 && !item.meta?.hideInMenu && !item.meta?.hideChildrenInMenu) {
|
|
101
|
+
let _slot;
|
|
90
102
|
if (this.props.subMenuItemRender) {
|
|
91
103
|
const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
|
|
92
104
|
return subMenuItemRender({
|
|
@@ -99,12 +111,24 @@ class MenuUtil {
|
|
|
99
111
|
locale
|
|
100
112
|
} = this.props;
|
|
101
113
|
const menuTitle = locale && locale(item.meta?.title) || item.meta?.title;
|
|
102
|
-
const defaultTitle = item.meta?.icon ?
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
114
|
+
const defaultTitle = item.meta?.icon ? _createVNode("span", {
|
|
115
|
+
"class": `${prefixCls}-menu-item`
|
|
116
|
+
}, [_createVNode("span", {
|
|
117
|
+
"class": `${prefixCls}-menu-item-title`
|
|
118
|
+
}, [menuTitle])]) : _createVNode("span", {
|
|
119
|
+
"class": `${prefixCls}-menu-item`
|
|
120
|
+
}, [menuTitle]);
|
|
121
|
+
return _createVNode(Menu.SubMenu, {
|
|
122
|
+
"title": defaultTitle,
|
|
123
|
+
"key": item.key || item.path,
|
|
124
|
+
"popupClassName": `${prefixCls}-menu-popup`,
|
|
125
|
+
"icon": _createVNode(LazyIcon, {
|
|
126
|
+
"iconUrl": this.props.iconfontUrl,
|
|
127
|
+
"icon": item.meta?.icon
|
|
128
|
+
}, null)
|
|
129
|
+
}, _isSlot(_slot = this.getNavMenuItems(item.children)) ? _slot : {
|
|
130
|
+
default: () => [_slot]
|
|
131
|
+
});
|
|
108
132
|
}
|
|
109
133
|
const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
|
|
110
134
|
const [title, icon] = this.getMenuItem(item);
|
|
@@ -112,9 +136,13 @@ class MenuUtil {
|
|
|
112
136
|
item,
|
|
113
137
|
title,
|
|
114
138
|
icon
|
|
115
|
-
}) ||
|
|
116
|
-
|
|
117
|
-
|
|
139
|
+
}) || _createVNode(Menu.Item, {
|
|
140
|
+
"disabled": item.meta?.disabled,
|
|
141
|
+
"danger": item.meta?.danger,
|
|
142
|
+
"key": item.key || item.path
|
|
143
|
+
}, _isSlot(title) ? title : {
|
|
144
|
+
default: () => [title]
|
|
145
|
+
});
|
|
118
146
|
};
|
|
119
147
|
getMenuItem = item => {
|
|
120
148
|
const meta = {
|
|
@@ -138,14 +166,22 @@ class MenuUtil {
|
|
|
138
166
|
prefixCls,
|
|
139
167
|
locale
|
|
140
168
|
} = this.props;
|
|
141
|
-
const icon = item.meta?.icon &&
|
|
169
|
+
const icon = item.meta?.icon && _createVNode(LazyIcon, {
|
|
170
|
+
"iconUrl": this.props.iconfontUrl,
|
|
171
|
+
"icon": item.meta?.icon
|
|
172
|
+
}, null) || undefined;
|
|
142
173
|
const menuTitle = locale && locale(item.meta?.title) || item.meta?.title;
|
|
143
|
-
const defaultTitle = item.meta?.icon ?
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
174
|
+
const defaultTitle = item.meta?.icon ? _createVNode(CustomTag, _mergeProps(attrs, routerProps, {
|
|
175
|
+
"class": `${prefixCls}-menu-item`
|
|
176
|
+
}), {
|
|
177
|
+
default: () => [icon, _createVNode("span", {
|
|
178
|
+
"class": `${prefixCls}-menu-item-title`
|
|
179
|
+
}, [menuTitle])]
|
|
180
|
+
}) : _createVNode(CustomTag, _mergeProps(attrs, routerProps, {
|
|
181
|
+
"class": `${prefixCls}-menu-item`
|
|
182
|
+
}), {
|
|
183
|
+
default: () => [_createVNode("span", null, [menuTitle])]
|
|
184
|
+
});
|
|
149
185
|
return [defaultTitle, icon];
|
|
150
186
|
};
|
|
151
187
|
}
|
|
@@ -179,9 +215,20 @@ export default defineComponent({
|
|
|
179
215
|
emit('click', args);
|
|
180
216
|
};
|
|
181
217
|
return () => {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
218
|
+
let _slot2;
|
|
219
|
+
return _createVNode(Menu, _mergeProps({
|
|
220
|
+
"key": "Menu",
|
|
221
|
+
"inlineIndent": 16,
|
|
222
|
+
"mode": props.mode,
|
|
223
|
+
"theme": props.theme,
|
|
224
|
+
"openKeys": props.openKeys === false ? [] : props.openKeys,
|
|
225
|
+
"selectedKeys": props.selectedKeys || [],
|
|
226
|
+
"onOpenChange": handleOpenChange,
|
|
227
|
+
"onSelect": handleSelect,
|
|
228
|
+
"onClick": handleClick
|
|
229
|
+
}, props.menuProps), _isSlot(_slot2 = menuUtil.getNavMenuItems(props.menuData)) ? _slot2 : {
|
|
230
|
+
default: () => [_slot2]
|
|
231
|
+
});
|
|
185
232
|
};
|
|
186
233
|
}
|
|
187
234
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, computed, reactive, watchEffect, toRefs, provide, h, Fragment } from 'vue';
|
|
1
|
+
import { defineComponent, computed, reactive, watchEffect, toRefs, provide, h, Fragment, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from 'vue';
|
|
2
2
|
import { pick } from 'lodash-es';
|
|
3
3
|
import { Layout, LayoutContent, Breadcrumb, Tabs } from 'ant-design-vue';
|
|
4
4
|
import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
|
|
@@ -227,78 +227,138 @@ export default defineComponent({
|
|
|
227
227
|
return slots.default?.();
|
|
228
228
|
}
|
|
229
229
|
if (props.layoutType === LayoutType.LIST) {
|
|
230
|
-
return
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
230
|
+
return _createVNode(_Fragment, null, [_createVNode("div", {
|
|
231
|
+
"class": className.value
|
|
232
|
+
}, [_createVNode(Layout, {
|
|
233
|
+
"style": {
|
|
234
|
+
minHeight: '100vh',
|
|
235
|
+
...(attrs.style || {})
|
|
236
|
+
}
|
|
237
|
+
}, {
|
|
238
|
+
default: () => [headerDom.value, _createVNode(Layout, {
|
|
239
|
+
"style": genLayoutStyle,
|
|
240
|
+
"class": prefixCls.value
|
|
241
|
+
}, {
|
|
242
|
+
default: () => [!isTop.value && _createVNode(SiderMenu, _mergeProps(restProps, {
|
|
243
|
+
"logo": logoRender || restProps.logo,
|
|
244
|
+
"menuHeaderRender": menuHeaderRender,
|
|
245
|
+
"menuExtraRender": menuExtraRender,
|
|
246
|
+
"menuContentRender": menuContentRender,
|
|
247
|
+
"menuItemRender": menuItemRender,
|
|
248
|
+
"subMenuItemRender": subMenuItemRender,
|
|
249
|
+
"collapsedButtonRender": collapsedButtonRender,
|
|
250
|
+
"onCollapse": onCollapse,
|
|
251
|
+
"onSelect": onSelect,
|
|
252
|
+
"onOpenKeys": onOpenKeys,
|
|
253
|
+
"onMenuClick": onMenuClick
|
|
254
|
+
}), null), _createVNode(Layout, null, {
|
|
255
|
+
default: () => [_createVNode(LayoutContent, null, {
|
|
256
|
+
default: () => [slots.default?.()]
|
|
257
|
+
})]
|
|
258
|
+
})]
|
|
259
|
+
})]
|
|
260
|
+
})])]);
|
|
248
261
|
} else if (props.layoutType === LayoutType.PAD) {
|
|
249
|
-
return
|
|
250
|
-
|
|
262
|
+
return _createVNode("div", {
|
|
263
|
+
"class": className.value
|
|
264
|
+
}, [_createVNode(Layout, {
|
|
265
|
+
"style": {
|
|
251
266
|
minHeight: '100vh',
|
|
252
267
|
...(attrs.style || {})
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
268
|
+
}
|
|
269
|
+
}, {
|
|
270
|
+
default: () => [_createVNode(SiderMenu, _mergeProps(restProps, {
|
|
271
|
+
"logo": logoRender || restProps.logo,
|
|
272
|
+
"collapsedWidth": 0,
|
|
273
|
+
"headerHeight": 0,
|
|
274
|
+
"menuHeaderRender": menuHeaderRender,
|
|
275
|
+
"menuExtraRender": menuExtraRender,
|
|
276
|
+
"menuContentRender": menuContentRender,
|
|
277
|
+
"menuItemRender": menuItemRender,
|
|
278
|
+
"subMenuItemRender": subMenuItemRender,
|
|
279
|
+
"collapsedButtonRender": collapsedButtonRender,
|
|
280
|
+
"onCollapse": onCollapse,
|
|
281
|
+
"onSelect": onSelect,
|
|
282
|
+
"onOpenKeys": onOpenKeys,
|
|
283
|
+
"onMenuClick": onMenuClick
|
|
284
|
+
}), null), _createVNode(Layout, {
|
|
285
|
+
"style": genLayoutStyle,
|
|
286
|
+
"class": prefixCls.value
|
|
287
|
+
}, {
|
|
288
|
+
default: () => [headerDom.value, _createVNode(LayoutContent, null, {
|
|
289
|
+
default: () => [slots.default?.()]
|
|
290
|
+
})]
|
|
291
|
+
})]
|
|
292
|
+
})]);
|
|
263
293
|
} else {
|
|
264
294
|
// CARD layout
|
|
265
|
-
return
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
295
|
+
return _createVNode(_Fragment, null, [_createVNode("div", {
|
|
296
|
+
"class": className.value
|
|
297
|
+
}, [_createVNode(Layout, null, {
|
|
298
|
+
default: () => [_createVNode(SiderMenu, _mergeProps(restProps, {
|
|
299
|
+
"logo": logoRender || restProps.logo,
|
|
300
|
+
"siderWidth": props.cardSiderWidth,
|
|
301
|
+
"headerHeight": 0,
|
|
302
|
+
"menuHeaderRender": menuHeaderRender,
|
|
303
|
+
"menuExtraRender": menuExtraRender,
|
|
304
|
+
"linksRender": linksRender,
|
|
305
|
+
"menuContentRender": menuContentRender,
|
|
306
|
+
"menuItemRender": menuItemRender,
|
|
307
|
+
"subMenuItemRender": subMenuItemRender,
|
|
308
|
+
"onCollapse": onCollapse,
|
|
309
|
+
"onSelect": onSelect,
|
|
310
|
+
"onOpenKeys": onOpenKeys,
|
|
311
|
+
"onMenuClick": onMenuClick,
|
|
312
|
+
"onAppMenuClick": onAppMenuClick
|
|
313
|
+
}), null), _createVNode(Layout, null, {
|
|
314
|
+
default: () => [_createVNode(Layout.Header, {
|
|
315
|
+
"style": {
|
|
316
|
+
background: 'transparent',
|
|
317
|
+
padding: 0,
|
|
318
|
+
height: '40px',
|
|
319
|
+
...(props.pageHeaderStyle || {})
|
|
320
|
+
}
|
|
321
|
+
}, {
|
|
322
|
+
default: () => [_createVNode(Tabs, {
|
|
323
|
+
"hide-add": true,
|
|
324
|
+
"type": "editable-card",
|
|
325
|
+
"class": "history-tabs",
|
|
326
|
+
"id": "history-route-tabs",
|
|
327
|
+
"tabBarStyle": {
|
|
328
|
+
margin: 0
|
|
329
|
+
},
|
|
330
|
+
"onTabClick": onTabClick,
|
|
331
|
+
"onEdit": onTabEdit,
|
|
332
|
+
"activeKey": props.historyActive,
|
|
333
|
+
"onChange": onTabChange
|
|
334
|
+
}, {
|
|
335
|
+
default: () => [historyRender ? historyRender() : props.historyRoutes.map(item => _createVNode(Tabs.TabPane, {
|
|
336
|
+
"key": item.name,
|
|
337
|
+
"tab": item.label,
|
|
338
|
+
"closable": true
|
|
339
|
+
}, null))]
|
|
340
|
+
})]
|
|
341
|
+
}), _createVNode(LayoutContent, {
|
|
342
|
+
"style": {
|
|
343
|
+
flex: '1 1 0',
|
|
344
|
+
overflow: 'auto'
|
|
345
|
+
}
|
|
346
|
+
}, {
|
|
347
|
+
default: () => [slots.default?.()]
|
|
348
|
+
}), _createVNode(Layout.Footer, {
|
|
349
|
+
"style": {
|
|
350
|
+
padding: '11px 24px',
|
|
351
|
+
...(props.pageFooterStyle || {})
|
|
352
|
+
}
|
|
353
|
+
}, {
|
|
354
|
+
default: () => [_createVNode(Breadcrumb, {
|
|
355
|
+
"routes": breadcrumb.value.routes
|
|
356
|
+
}, {
|
|
357
|
+
itemRender: breadcrumb.value.itemRender
|
|
358
|
+
})]
|
|
359
|
+
})]
|
|
360
|
+
})]
|
|
361
|
+
})])]);
|
|
302
362
|
}
|
|
303
363
|
};
|
|
304
364
|
}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { createVNode as _createVNode } from 'vue';
|
|
1
|
+
import { createVNode as _createVNode, Fragment as _Fragment2, createVNode as _createVNode2, isVNode as _isVNode } from 'vue';
|
|
2
2
|
import { defineComponent, computed, toRefs } from 'vue';
|
|
3
3
|
import { Layout } from 'ant-design-vue';
|
|
4
4
|
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
|
5
5
|
import { baseHeaderProps, TopNavHeader } from '../TopHeader';
|
|
6
6
|
import { useRouteContext } from '../RouteContext';
|
|
7
7
|
import { LayoutType } from '../defaultSettings';
|
|
8
|
+
function _isSlot(s) {
|
|
9
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
|
10
|
+
}
|
|
8
11
|
export const headerViewProps = {
|
|
9
12
|
...baseHeaderProps,
|
|
10
13
|
headerRender: {
|
|
@@ -69,23 +72,26 @@ export default defineComponent({
|
|
|
69
72
|
return 0;
|
|
70
73
|
});
|
|
71
74
|
return () => {
|
|
72
|
-
|
|
73
|
-
|
|
75
|
+
let _slot;
|
|
76
|
+
return _createVNode2(_Fragment2, null, [needFixedHeader.value && _createVNode2(Layout.Header, {
|
|
77
|
+
"style": {
|
|
74
78
|
height: `${headerHeight.value}px`,
|
|
75
79
|
lineHeight: `${headerHeight.value}px`,
|
|
76
80
|
background: 'transparent'
|
|
77
|
-
}
|
|
78
|
-
|
|
81
|
+
}
|
|
82
|
+
}, null), _createVNode2(Layout.Header, {
|
|
83
|
+
"style": {
|
|
79
84
|
padding: 0,
|
|
80
85
|
height: `${headerHeight.value}px`,
|
|
81
86
|
lineHeight: `${headerHeight.value}px`,
|
|
82
87
|
width: props.hasSiderMenu ? `calc(100% - ${width.value}px)` : '100%',
|
|
83
88
|
zIndex: 100,
|
|
84
89
|
right: right.value
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
90
|
+
},
|
|
91
|
+
"class": className.value
|
|
92
|
+
}, _isSlot(_slot = renderContent()) ? _slot : {
|
|
93
|
+
default: () => [_slot]
|
|
94
|
+
})]);
|
|
89
95
|
};
|
|
90
96
|
}
|
|
91
97
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, computed, toRefs, unref } from 'vue';
|
|
1
|
+
import { defineComponent, computed, toRefs, unref, createVNode as _createVNode, mergeProps as _mergeProps, isVNode as _isVNode, Fragment as _Fragment } from 'vue';
|
|
2
2
|
import { withInstall } from 'ant-design-vue/es/_util/type';
|
|
3
3
|
import { Affix, Spin, PageHeader, Tabs, Button } from 'ant-design-vue';
|
|
4
4
|
import { pageHeaderProps } from 'ant-design-vue/es/page-header';
|
|
@@ -7,6 +7,9 @@ import { getSlotVNode } from '../util';
|
|
|
7
7
|
import { LayoutType } from '../defaultSettings';
|
|
8
8
|
import { useLocaleReceiver } from '../../LocaleReciver';
|
|
9
9
|
import useProLayoutStyle from '../style';
|
|
10
|
+
function _isSlot(s) {
|
|
11
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
|
12
|
+
}
|
|
10
13
|
export const pageHeaderTabConfig = {
|
|
11
14
|
/**
|
|
12
15
|
* @name tabs 的列表
|
|
@@ -116,16 +119,27 @@ const renderFooter = props => {
|
|
|
116
119
|
tabProps
|
|
117
120
|
} = props;
|
|
118
121
|
const tabPane = item => {
|
|
119
|
-
return
|
|
122
|
+
return _createVNode("span", {
|
|
123
|
+
"class": item.class || `tab-pane-${item.key}`
|
|
124
|
+
}, [item.tab]);
|
|
120
125
|
};
|
|
121
126
|
if (tabList && tabList.length) {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
let _slot;
|
|
128
|
+
return _createVNode(Tabs, _mergeProps({
|
|
129
|
+
"class": "page-container-tabs",
|
|
130
|
+
"activeKey": tabActiveKey,
|
|
131
|
+
"onChange": key => {
|
|
132
|
+
if (onTabChange) {
|
|
133
|
+
onTabChange(key);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
"tabBarExtraContent": tabBarExtraContent
|
|
137
|
+
}, tabProps), _isSlot(_slot = tabList.map(item => _createVNode(Tabs.TabPane, _mergeProps(item, {
|
|
138
|
+
"tab": tabPane(item),
|
|
139
|
+
"key": item.key
|
|
140
|
+
}), null))) ? _slot : {
|
|
141
|
+
default: () => [_slot]
|
|
142
|
+
});
|
|
129
143
|
}
|
|
130
144
|
return null;
|
|
131
145
|
};
|
|
@@ -133,18 +147,17 @@ const renderPageHeader = (content, extraContent, prefixedClassName) => {
|
|
|
133
147
|
if (!content && !extraContent) {
|
|
134
148
|
return null;
|
|
135
149
|
}
|
|
136
|
-
return
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
</div>;
|
|
150
|
+
return _createVNode("div", {
|
|
151
|
+
"class": `${prefixedClassName}-detail`
|
|
152
|
+
}, [_createVNode("div", {
|
|
153
|
+
"class": `${prefixedClassName}-main`
|
|
154
|
+
}, [_createVNode("div", {
|
|
155
|
+
"class": `${prefixedClassName}-row`
|
|
156
|
+
}, [content && _createVNode("div", {
|
|
157
|
+
"class": `${prefixedClassName}-content`
|
|
158
|
+
}, [typeof content === 'function' && content() || content]), extraContent && _createVNode("div", {
|
|
159
|
+
"class": `${prefixedClassName}-extraContent`
|
|
160
|
+
}, [typeof extraContent === 'function' && extraContent() || extraContent])])])]);
|
|
148
161
|
};
|
|
149
162
|
const ProPageHeader = props => {
|
|
150
163
|
const {
|
|
@@ -185,7 +198,9 @@ const ProPageHeader = props => {
|
|
|
185
198
|
const backProps = {};
|
|
186
199
|
if (showBack) {
|
|
187
200
|
// @ts-ignore
|
|
188
|
-
backProps.backIcon =
|
|
201
|
+
backProps.backIcon = _createVNode(Button, null, {
|
|
202
|
+
default: () => [contextLocale.value.pageContainer.back]
|
|
203
|
+
});
|
|
189
204
|
backProps.onBack = () => {
|
|
190
205
|
if (props.onBack) {
|
|
191
206
|
props.onBack();
|
|
@@ -197,15 +212,22 @@ const ProPageHeader = props => {
|
|
|
197
212
|
const styles = value.layoutType === LayoutType.CARD ? {
|
|
198
213
|
padding: props.extra || props.subTitle || pageHeaderTitle || tabList || props.extraContent || props.showBack || props.title ? '16px 24px' : '0px'
|
|
199
214
|
} : {};
|
|
200
|
-
return
|
|
201
|
-
|
|
215
|
+
return _createVNode("div", {
|
|
216
|
+
"class": `${prefixedClassName}-wrap`
|
|
217
|
+
}, [_createVNode(PageHeader, _mergeProps({
|
|
218
|
+
"style": styles
|
|
219
|
+
}, backProps, restProps, {
|
|
220
|
+
"title": pageHeaderTitle,
|
|
221
|
+
"breadcrumb": value.layoutType === LayoutType.LIST ? breadcrumb : null,
|
|
222
|
+
"footer": renderFooter({
|
|
202
223
|
...restProps,
|
|
203
224
|
tabList,
|
|
204
225
|
tabActiveKey
|
|
205
|
-
})
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
226
|
+
}),
|
|
227
|
+
"prefixCls": prefixCls
|
|
228
|
+
}), {
|
|
229
|
+
default: () => [header || renderPageHeader(content, extraContent, prefixedClassName)]
|
|
230
|
+
})]);
|
|
209
231
|
};
|
|
210
232
|
const PageContainer = defineComponent({
|
|
211
233
|
name: 'JPageContainer',
|
|
@@ -240,37 +262,46 @@ const PageContainer = defineComponent({
|
|
|
240
262
|
const subTitle = getSlotVNode(slots, props, 'subTitle');
|
|
241
263
|
const title = getSlotVNode(slots, props, 'title');
|
|
242
264
|
// @ts-ignore
|
|
243
|
-
return
|
|
265
|
+
return _createVNode(ProPageHeader, _mergeProps(props, {
|
|
266
|
+
"prefixCls": undefined,
|
|
267
|
+
"prefixedClassName": prefixedClassName.value,
|
|
268
|
+
"ghost": ghost.value,
|
|
269
|
+
"title": title,
|
|
270
|
+
"subTitle": subTitle,
|
|
271
|
+
"content": headerContent,
|
|
272
|
+
"extra": extra,
|
|
273
|
+
"extraContent": extraContent
|
|
274
|
+
}), null);
|
|
244
275
|
});
|
|
245
276
|
return () => {
|
|
246
277
|
const {
|
|
247
278
|
fixedHeader,
|
|
248
279
|
pure
|
|
249
280
|
} = props;
|
|
250
|
-
return
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
281
|
+
return _createVNode(_Fragment, null, [pure ? _createVNode("div", {
|
|
282
|
+
"class": classNames.value
|
|
283
|
+
}, [slots.default?.()]) : _createVNode("div", {
|
|
284
|
+
"class": classNames.value,
|
|
285
|
+
"style": {
|
|
254
286
|
...(attrs.style || {})
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
</>;
|
|
287
|
+
}
|
|
288
|
+
}, [fixedHeader && headerDom.value ? _createVNode(Affix, _mergeProps(affixProps.value, {
|
|
289
|
+
"offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
|
|
290
|
+
}), {
|
|
291
|
+
default: () => [headerDom.value]
|
|
292
|
+
}) : headerDom.value, _createVNode("div", {
|
|
293
|
+
"class": `${prefixedClassName.value}-grid-content`
|
|
294
|
+
}, [loading.value ? _createVNode(Spin, null, null) : slots.default ? _createVNode("div", null, [_createVNode("div", {
|
|
295
|
+
"class": `${prefixedClassName.value}-children-content ${childrenFullHeight.value ? 'children-full-height' : ''} ${hashId.value}`,
|
|
296
|
+
"style": {
|
|
297
|
+
...(props.contentStyle || {})
|
|
298
|
+
}
|
|
299
|
+
}, [slots.default()]), value.hasFooterToolbar && _createVNode("div", {
|
|
300
|
+
"style": {
|
|
301
|
+
height: 48,
|
|
302
|
+
marginTop: 24
|
|
303
|
+
}
|
|
304
|
+
}, null)]) : null])])]);
|
|
274
305
|
};
|
|
275
306
|
}
|
|
276
307
|
});
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { defineComponent, watchEffect, isVNode, resolveComponent, getCurrentInstance, withCtx } from 'vue';
|
|
1
|
+
import { defineComponent, watchEffect, isVNode, resolveComponent, getCurrentInstance, withCtx, createVNode as _createVNode, isVNode as _isVNode, mergeProps as _mergeProps } from 'vue';
|
|
2
2
|
import { Menu } from 'ant-design-vue';
|
|
3
3
|
import { createFromIconfontCN } from '@ant-design/icons-vue';
|
|
4
4
|
import { defaultSettingProps } from '../defaultSettings';
|
|
5
5
|
import { defaultPrefixCls } from '../RouteContext';
|
|
6
6
|
import IconFont from '../../Icon';
|
|
7
7
|
import { regular } from '@meethive/utils';
|
|
8
|
+
function _isSlot(s) {
|
|
9
|
+
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
|
10
|
+
}
|
|
8
11
|
let AntdIconFont = createFromIconfontCN({
|
|
9
12
|
scriptUrl: ''
|
|
10
13
|
});
|
|
@@ -20,9 +23,17 @@ const LazyIcon = props => {
|
|
|
20
23
|
}
|
|
21
24
|
if (typeof icon === 'string' && icon !== '') {
|
|
22
25
|
if (regular.isUrl(icon) || regular.isImg(icon)) {
|
|
23
|
-
return
|
|
26
|
+
return _createVNode("img", {
|
|
27
|
+
"src": icon,
|
|
28
|
+
"alt": "icon",
|
|
29
|
+
"class": `${prefixCls}-sider-menu-icon`
|
|
30
|
+
}, null);
|
|
24
31
|
}
|
|
25
|
-
return iconUrl ?
|
|
32
|
+
return iconUrl ? _createVNode(AntdIconFont, {
|
|
33
|
+
"type": icon
|
|
34
|
+
}, null) : _createVNode(IconFont, {
|
|
35
|
+
"type": icon
|
|
36
|
+
}, null);
|
|
26
37
|
}
|
|
27
38
|
return null;
|
|
28
39
|
};
|
|
@@ -87,6 +98,7 @@ class MenuUtil {
|
|
|
87
98
|
};
|
|
88
99
|
getSubMenuOrItem = item => {
|
|
89
100
|
if (Array.isArray(item.children) && item.children.length > 0 && !item.meta?.hideInMenu && !item.meta?.hideChildrenInMenu) {
|
|
101
|
+
let _slot;
|
|
90
102
|
if (this.props.subMenuItemRender) {
|
|
91
103
|
const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
|
|
92
104
|
return subMenuItemRender({
|
|
@@ -99,12 +111,24 @@ class MenuUtil {
|
|
|
99
111
|
locale
|
|
100
112
|
} = this.props;
|
|
101
113
|
const menuTitle = locale && locale(item.meta?.title) || item.meta?.title;
|
|
102
|
-
const defaultTitle = item.meta?.icon ?
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
114
|
+
const defaultTitle = item.meta?.icon ? _createVNode("span", {
|
|
115
|
+
"class": `${prefixCls}-menu-item`
|
|
116
|
+
}, [_createVNode("span", {
|
|
117
|
+
"class": `${prefixCls}-menu-item-title`
|
|
118
|
+
}, [menuTitle])]) : _createVNode("span", {
|
|
119
|
+
"class": `${prefixCls}-menu-item`
|
|
120
|
+
}, [menuTitle]);
|
|
121
|
+
return _createVNode(Menu.SubMenu, {
|
|
122
|
+
"title": defaultTitle,
|
|
123
|
+
"key": item.key || item.path,
|
|
124
|
+
"popupClassName": `${prefixCls}-menu-popup`,
|
|
125
|
+
"icon": _createVNode(LazyIcon, {
|
|
126
|
+
"iconUrl": this.props.iconfontUrl,
|
|
127
|
+
"icon": item.meta?.icon
|
|
128
|
+
}, null)
|
|
129
|
+
}, _isSlot(_slot = this.getNavMenuItems(item.children)) ? _slot : {
|
|
130
|
+
default: () => [_slot]
|
|
131
|
+
});
|
|
108
132
|
}
|
|
109
133
|
const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
|
|
110
134
|
const [title, icon] = this.getMenuItem(item);
|
|
@@ -112,9 +136,13 @@ class MenuUtil {
|
|
|
112
136
|
item,
|
|
113
137
|
title,
|
|
114
138
|
icon
|
|
115
|
-
}) ||
|
|
116
|
-
|
|
117
|
-
|
|
139
|
+
}) || _createVNode(Menu.Item, {
|
|
140
|
+
"disabled": item.meta?.disabled,
|
|
141
|
+
"danger": item.meta?.danger,
|
|
142
|
+
"key": item.key || item.path
|
|
143
|
+
}, _isSlot(title) ? title : {
|
|
144
|
+
default: () => [title]
|
|
145
|
+
});
|
|
118
146
|
};
|
|
119
147
|
getMenuItem = item => {
|
|
120
148
|
const meta = {
|
|
@@ -138,14 +166,22 @@ class MenuUtil {
|
|
|
138
166
|
prefixCls,
|
|
139
167
|
locale
|
|
140
168
|
} = this.props;
|
|
141
|
-
const icon = item.meta?.icon &&
|
|
169
|
+
const icon = item.meta?.icon && _createVNode(LazyIcon, {
|
|
170
|
+
"iconUrl": this.props.iconfontUrl,
|
|
171
|
+
"icon": item.meta?.icon
|
|
172
|
+
}, null) || undefined;
|
|
142
173
|
const menuTitle = locale && locale(item.meta?.title) || item.meta?.title;
|
|
143
|
-
const defaultTitle = item.meta?.icon ?
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
174
|
+
const defaultTitle = item.meta?.icon ? _createVNode(CustomTag, _mergeProps(attrs, routerProps, {
|
|
175
|
+
"class": `${prefixCls}-menu-item`
|
|
176
|
+
}), {
|
|
177
|
+
default: () => [icon, _createVNode("span", {
|
|
178
|
+
"class": `${prefixCls}-menu-item-title`
|
|
179
|
+
}, [menuTitle])]
|
|
180
|
+
}) : _createVNode(CustomTag, _mergeProps(attrs, routerProps, {
|
|
181
|
+
"class": `${prefixCls}-menu-item`
|
|
182
|
+
}), {
|
|
183
|
+
default: () => [_createVNode("span", null, [menuTitle])]
|
|
184
|
+
});
|
|
149
185
|
return [defaultTitle, icon];
|
|
150
186
|
};
|
|
151
187
|
}
|
|
@@ -179,9 +215,20 @@ export default defineComponent({
|
|
|
179
215
|
emit('click', args);
|
|
180
216
|
};
|
|
181
217
|
return () => {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
218
|
+
let _slot2;
|
|
219
|
+
return _createVNode(Menu, _mergeProps({
|
|
220
|
+
"key": "Menu",
|
|
221
|
+
"inlineIndent": 16,
|
|
222
|
+
"mode": props.mode,
|
|
223
|
+
"theme": props.theme,
|
|
224
|
+
"openKeys": props.openKeys === false ? [] : props.openKeys,
|
|
225
|
+
"selectedKeys": props.selectedKeys || [],
|
|
226
|
+
"onOpenChange": handleOpenChange,
|
|
227
|
+
"onSelect": handleSelect,
|
|
228
|
+
"onClick": handleClick
|
|
229
|
+
}, props.menuProps), _isSlot(_slot2 = menuUtil.getNavMenuItems(props.menuData)) ? _slot2 : {
|
|
230
|
+
default: () => [_slot2]
|
|
231
|
+
});
|
|
185
232
|
};
|
|
186
233
|
}
|
|
187
234
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meethive/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -11,6 +11,14 @@
|
|
|
11
11
|
"private": false,
|
|
12
12
|
"author": "",
|
|
13
13
|
"license": "ISC",
|
|
14
|
+
"peerDependencies": {
|
|
15
|
+
"vue": "^3.2.0",
|
|
16
|
+
"vue-router": "^4.0.0",
|
|
17
|
+
"ant-design-vue": "^4.0.0",
|
|
18
|
+
"@ant-design/icons-vue": "^7.0.0",
|
|
19
|
+
"lodash-es": "^4.17.0",
|
|
20
|
+
"dayjs": "^1.11.0"
|
|
21
|
+
},
|
|
14
22
|
"dependencies": {
|
|
15
23
|
"@vueuse/core": "^10.2.1",
|
|
16
24
|
"@vueuse/router": "^12.1.0",
|