@jetlinks-web/components 3.3.7 → 3.3.9

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 (7) hide show
  1. package/es/ProLayout/SiderMenu/SiderMenu.js +136 -135
  2. package/es/ProLayout/SiderMenu/style.js +4 -4
  3. package/es/style/styleRegister.js +2 -6
  4. package/lib/ProLayout/SiderMenu/SiderMenu.js +135 -134
  5. package/lib/ProLayout/SiderMenu/style.js +4 -4
  6. package/lib/style/styleRegister.js +2 -6
  7. package/package.json +3 -3
package/es/ProLayout/SiderMenu/SiderMenu.js CHANGED
@@ -9,7 +9,7 @@ import { defaultSettingProps, LayoutType } from '../defaultSettings';
9
9
  import PropTypes from 'ant-design-vue/es/_util/vue-types';
10
10
  import IconFont from '../../Icon';
11
11
  import { useRouteContext } from '../RouteContext';
12
- import { computed, unref } from 'vue';
12
+ import { computed, defineComponent, unref } from 'vue';
13
13
  import "../typings";
14
14
  import useProLayoutStyle from '../style';
15
15
  export var siderMenuProps = _objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), baseMenuProps), {}, {
@@ -169,147 +169,148 @@ export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(
169
169
  "type": 'MenuFoldOutlined'
170
170
  }, null);
171
171
  };
172
- var SiderMenu = function SiderMenu(props) {
173
- var collapsed = props.collapsed,
174
- siderWidth = props.siderWidth,
175
- breakpoint = props.breakpoint,
176
- _props$collapsedWidth = props.collapsedWidth,
177
- collapsedWidth = _props$collapsedWidth === void 0 ? 48 : _props$collapsedWidth,
178
- _props$menuExtraRende = props.menuExtraRender,
179
- menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
180
- _props$menuContentRen = props.menuContentRender,
181
- menuContentRender = _props$menuContentRen === void 0 ? false : _props$menuContentRen,
182
- _props$collapsedButto = props.collapsedButtonRender,
183
- collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
184
- linksRender = props.linksRender,
185
- theme = props.theme;
186
- var prefixCls = computed(function () {
187
- return 'pro-layout';
188
- });
189
- var _useProLayoutStyle = useProLayoutStyle(prefixCls),
190
- _useProLayoutStyle2 = _slicedToArray(_useProLayoutStyle, 2),
191
- wrapSSR = _useProLayoutStyle2[0],
192
- hashId = _useProLayoutStyle2[1];
193
- var context = useRouteContext();
194
- var getPrefixCls = context.getPrefixCls;
195
- var baseClassName = getPrefixCls('sider');
196
- var hasSplitMenu = computed(function () {
197
- return props.layout === 'mix' && props.splitMenus;
198
- });
199
- var sSideWidth = computed(function () {
200
- return props.collapsed ? props.collapsedWidth : props.siderWidth;
201
- });
202
- var classNames = computed(function () {
203
- return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), hashId.value, true);
204
- });
205
- var logCls = computed(function () {
206
- return _defineProperty(_defineProperty({}, "".concat(baseClassName, "-logo"), true), "".concat(baseClassName, "-logo-card"), props.layoutType === LayoutType.CARD);
207
- });
208
- var handleSelect = function handleSelect($event) {
209
- if (props.onSelect) {
210
- if (unref(hasSplitMenu)) {
211
- props.onSelect([context.selectedKeys[0]].concat(_toConsumableArray($event)));
212
- return;
172
+ var SiderMenu = defineComponent({
173
+ name: 'JProLayoutSiderMenu',
174
+ inheritAttrs: false,
175
+ props: siderMenuProps,
176
+ setup: function setup(props) {
177
+ var prefixCls = computed(function () {
178
+ return 'pro-layout';
179
+ });
180
+ var _useProLayoutStyle = useProLayoutStyle(prefixCls),
181
+ _useProLayoutStyle2 = _slicedToArray(_useProLayoutStyle, 2),
182
+ wrapSSR = _useProLayoutStyle2[0],
183
+ hashId = _useProLayoutStyle2[1];
184
+ var context = useRouteContext();
185
+ var getPrefixCls = context.getPrefixCls;
186
+ var baseClassName = getPrefixCls('sider');
187
+ var hasSplitMenu = computed(function () {
188
+ return props.layout === 'mix' && props.splitMenus;
189
+ });
190
+ var sSideWidth = computed(function () {
191
+ return props.collapsed ? props.collapsedWidth : props.siderWidth;
192
+ });
193
+ var classNames = computed(function () {
194
+ return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(props.theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), hashId.value, true);
195
+ });
196
+ var logCls = computed(function () {
197
+ return _defineProperty(_defineProperty({}, "".concat(baseClassName, "-logo"), true), "".concat(baseClassName, "-logo-card"), props.layoutType === LayoutType.CARD);
198
+ });
199
+ var handleSelect = function handleSelect($event) {
200
+ if (props.onSelect) {
201
+ if (unref(hasSplitMenu)) {
202
+ props.onSelect([context.selectedKeys[0]].concat(_toConsumableArray($event)));
203
+ return;
204
+ }
205
+ props.onSelect($event);
213
206
  }
214
- props.onSelect($event);
215
- }
216
- };
217
- var headerDom = defaultRenderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
218
- baseClassName: baseClassName
219
- }));
220
- var extraDom = menuExtraRender && menuExtraRender(props);
221
- if (props.layoutType !== LayoutType.CARD && hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
222
- return null;
223
- }
224
- var defaultMenuDom = _createVNode(BaseMenu, {
225
- "prefixCls": getPrefixCls(),
226
- "locale": props.locale || context.locale,
227
- "theme": theme,
228
- "mode": "inline",
229
- "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
230
- "collapsed": props.collapsed,
231
- "openKeys": context.openKeys,
232
- "selectedKeys": context.selectedKeys,
233
- "menuItemRender": props.menuItemRender,
234
- "subMenuItemRender": props.subMenuItemRender,
235
- "iconfontUrl": props.iconfontUrl,
236
- "onClick": props.onMenuClick,
237
- "style": {
238
- width: '100%'
239
- },
240
- "class": "".concat(baseClassName, "-menu"),
241
- 'onUpdate:openKeys': function onUpdateOpenKeys($event) {
242
- return props.onOpenKeys && props.onOpenKeys($event);
243
- },
244
- 'onUpdate:selectedKeys': handleSelect
245
- }, null);
246
- return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
247
- "style": {
248
- width: "".concat(sSideWidth.value, "px"),
249
- overflow: 'hidden',
250
- flex: "0 0 ".concat(sSideWidth.value, "px"),
251
- maxWidth: "".concat(sSideWidth.value, "px"),
252
- minWidth: "".concat(sSideWidth.value, "px"),
253
- transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
254
- }
255
- }, null), _createVNode(Sider, {
256
- "collapsible": true,
257
- "trigger": null,
258
- "collapsed": collapsed,
259
- "breakpoint": breakpoint || undefined,
260
- "onCollapse": function onCollapse(collapse) {
261
- var _props$onCollapse;
262
- (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
263
- },
264
- "collapsedWidth": collapsedWidth,
265
- "style": {
266
- overflow: 'hidden',
267
- paddingTop: "".concat(props.headerHeight, "px"),
268
- zIndex: props.layoutType === LayoutType.PAD ? 200 : 1
269
- },
270
- "width": siderWidth,
271
- "theme": theme,
272
- "class": classNames.value
273
- }, {
274
- default: function _default() {
275
- return [headerDom && _createVNode("div", {
276
- "class": logCls.value,
277
- "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
278
- "id": "logo",
279
- "style": props === null || props === void 0 ? void 0 : props.logoStyle
280
- }, [headerDom]), extraDom && _createVNode("div", {
281
- "class": _defineProperty(_defineProperty({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
282
- }, [extraDom]), _createVNode("div", {
283
- "class": "".concat(baseClassName, "-body"),
284
- "style": "flex: 1; overflow: hidden auto;"
285
- }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
286
- "class": "".concat(baseClassName, "-links")
287
- }, [linksRender ? linksRender() : collapsedButtonRender !== false ? _createVNode(Menu, {
288
- "class": "".concat(baseClassName, "-link-menu"),
289
- "inlineIndent": 16,
290
- "theme": theme,
291
- "selectedKeys": [],
292
- "openKeys": [],
207
+ };
208
+ var collapsedButtonRender = computed(function () {
209
+ return props.collapsedButtonRender === undefined ? defaultRenderCollapsedButton : props.collapsedButtonRender;
210
+ });
211
+ var headerDom = computed(function () {
212
+ return defaultRenderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
213
+ baseClassName: baseClassName
214
+ }));
215
+ });
216
+ var extraDom = computed(function () {
217
+ return props.menuExtraRender && props.menuExtraRender(props);
218
+ });
219
+ return function () {
220
+ if (props.layoutType !== LayoutType.CARD && hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
221
+ return null;
222
+ }
223
+ var defaultMenuDom = _createVNode(BaseMenu, {
224
+ "prefixCls": getPrefixCls(),
225
+ "locale": props.locale || context.locale,
226
+ "theme": props.theme,
293
227
  "mode": "inline",
294
- "onClick": function onClick() {
295
- if (props.onCollapse) {
296
- props.onCollapse(!props.collapsed);
297
- }
228
+ "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
229
+ "collapsed": props.collapsed,
230
+ "openKeys": context.openKeys,
231
+ "selectedKeys": context.selectedKeys,
232
+ "menuItemRender": props.menuItemRender,
233
+ "subMenuItemRender": props.subMenuItemRender,
234
+ "iconfontUrl": props.iconfontUrl,
235
+ "onClick": props.onMenuClick,
236
+ "style": {
237
+ width: '100%'
238
+ },
239
+ "class": "".concat(baseClassName, "-menu"),
240
+ 'onUpdate:openKeys': function onUpdateOpenKeys($event) {
241
+ return props.onOpenKeys && props.onOpenKeys($event);
242
+ },
243
+ 'onUpdate:selectedKeys': handleSelect
244
+ }, null);
245
+ return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
246
+ "style": {
247
+ width: "".concat(sSideWidth.value, "px"),
248
+ overflow: 'hidden',
249
+ flex: "0 0 ".concat(sSideWidth.value, "px"),
250
+ maxWidth: "".concat(sSideWidth.value, "px"),
251
+ minWidth: "".concat(sSideWidth.value, "px"),
252
+ transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
298
253
  }
254
+ }, null), _createVNode(Sider, {
255
+ "collapsible": true,
256
+ "trigger": null,
257
+ "collapsed": props.collapsed,
258
+ "breakpoint": props.breakpoint || undefined,
259
+ "onCollapse": function onCollapse(collapse) {
260
+ var _props$onCollapse;
261
+ (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
262
+ },
263
+ "collapsedWidth": props.collapsedWidth,
264
+ "style": {
265
+ overflow: 'hidden',
266
+ paddingTop: "".concat(props.headerHeight, "px"),
267
+ zIndex: props.layoutType === LayoutType.PAD ? 200 : 1
268
+ },
269
+ "width": props.siderWidth,
270
+ "theme": props.theme,
271
+ "class": classNames.value
299
272
  }, {
300
273
  default: function _default() {
301
- return [_createVNode(Menu.Item, {
302
- "key": 'collapsed-button',
303
- "class": "".concat(baseClassName, "-collapsed-button"),
304
- "title": false
274
+ return [headerDom.value && _createVNode("div", {
275
+ "class": logCls.value,
276
+ "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
277
+ "id": "logo",
278
+ "style": props === null || props === void 0 ? void 0 : props.logoStyle
279
+ }, [headerDom.value]), extraDom.value && _createVNode("div", {
280
+ "class": _defineProperty(_defineProperty({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom.value)
281
+ }, [extraDom.value]), _createVNode("div", {
282
+ "class": "".concat(baseClassName, "-body"),
283
+ "style": "flex: 1; overflow: hidden auto;"
284
+ }, [props.layoutType !== LayoutType.CARD ? props.menuContentRender && props.menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
285
+ "class": "".concat(baseClassName, "-links")
286
+ }, [props.linksRender ? props.linksRender() : collapsedButtonRender.value !== false ? _createVNode(Menu, {
287
+ "class": "".concat(baseClassName, "-link-menu"),
288
+ "inlineIndent": 16,
289
+ "theme": props.theme,
290
+ "selectedKeys": [],
291
+ "openKeys": [],
292
+ "mode": "inline",
293
+ "onClick": function onClick() {
294
+ if (props.onCollapse) {
295
+ props.onCollapse(!props.collapsed);
296
+ }
297
+ }
305
298
  }, {
306
299
  default: function _default() {
307
- return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
300
+ return [_createVNode(Menu.Item, {
301
+ "key": 'collapsed-button',
302
+ "class": "".concat(baseClassName, "-collapsed-button"),
303
+ "title": false
304
+ }, {
305
+ default: function _default() {
306
+ return [collapsedButtonRender.value && typeof collapsedButtonRender.value === 'function' ? collapsedButtonRender.value(props.collapsed) : collapsedButtonRender.value];
307
+ }
308
+ })];
308
309
  }
309
- })];
310
+ }) : null])];
310
311
  }
311
- }) : null])];
312
- }
313
- })]);
314
- };
312
+ })]);
313
+ };
314
+ }
315
+ });
315
316
  export default SiderMenu;
package/es/ProLayout/SiderMenu/style.js CHANGED
@@ -19,7 +19,7 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
19
19
  opacity: 1
20
20
  }
21
21
  });
22
- return _defineProperty(_defineProperty(_defineProperty({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
22
+ return ["\n ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n "), _defineProperty(_defineProperty(_defineProperty({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
23
23
  position: 'relative',
24
24
  backgroundColor: '#001529',
25
25
  borderRight: 0,
@@ -113,7 +113,7 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
113
113
  }, "> ".concat(token.antCls, "-menu-root"), _defineProperty({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
114
114
  height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
115
115
  overflowY: 'auto'
116
- }))), "".concat(proLayoutSiderMenuCls, "-light"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
116
+ }))), "&".concat(proLayoutSiderMenuCls, "-light"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
117
117
  backgroundColor: token.colorBgContainer,
118
118
  boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
119
119
  }, "".concat(token.antCls, "-layout-sider-children"), {
@@ -139,7 +139,7 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
139
139
  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
140
140
  width: '14px',
141
141
  verticalAlign: 'baseline'
142
- }), "".concat(proLayoutSiderMenuCls, "-link"), _defineProperty({
142
+ }), "".concat(proLayoutSiderMenuCls, "-links"), _defineProperty({
143
143
  width: '100%'
144
144
  }, "ul".concat(token.antCls, "-menu-root"), {
145
145
  height: 'auto'
@@ -166,5 +166,5 @@ export var genSiderMenuStyle = function genSiderMenuStyle(config) {
166
166
  '&:hover': {
167
167
  backgroundColor: '#efefef'
168
168
  }
169
- });
169
+ })];
170
170
  };
package/es/style/styleRegister.js CHANGED
@@ -1,16 +1,12 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
2
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
3
  import { genComponentStyleHook } from 'ant-design-vue/es/theme/internal';
4
- import { theme } from 'ant-design-vue';
5
4
  import variableToken from './variable';
6
5
  var genCompoentStyle = function genCompoentStyle(styleFn) {
7
- return genComponentStyleHook('jetlinks-components', function (_token) {
8
- var _theme$useToken = theme.useToken(),
9
- token = _theme$useToken.token,
10
- hashId = _theme$useToken.hashId;
6
+ return genComponentStyleHook('jetlinks-components', function (_token, info) {
11
7
  var componentToken = {
12
8
  token: _objectSpread(_objectSpread({}, _token), variableToken),
13
- hashId: hashId.value,
9
+ hashId: info.hashId,
14
10
  componentCls: ".".concat(_token.prefixCls)
15
11
  };
16
12
  return _toConsumableArray(styleFn.map(function (item) {
package/lib/ProLayout/SiderMenu/SiderMenu.js CHANGED
@@ -177,147 +177,148 @@ var defaultRenderCollapsedButton = exports.defaultRenderCollapsedButton = functi
177
177
  "type": 'MenuFoldOutlined'
178
178
  }, null);
179
179
  };
180
- var SiderMenu = function SiderMenu(props) {
181
- var collapsed = props.collapsed,
182
- siderWidth = props.siderWidth,
183
- breakpoint = props.breakpoint,
184
- _props$collapsedWidth = props.collapsedWidth,
185
- collapsedWidth = _props$collapsedWidth === void 0 ? 48 : _props$collapsedWidth,
186
- _props$menuExtraRende = props.menuExtraRender,
187
- menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
188
- _props$menuContentRen = props.menuContentRender,
189
- menuContentRender = _props$menuContentRen === void 0 ? false : _props$menuContentRen,
190
- _props$collapsedButto = props.collapsedButtonRender,
191
- collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
192
- linksRender = props.linksRender,
193
- theme = props.theme;
194
- var prefixCls = (0, _vue.computed)(function () {
195
- return 'pro-layout';
196
- });
197
- var _useProLayoutStyle = (0, _style.default)(prefixCls),
198
- _useProLayoutStyle2 = (0, _slicedToArray2.default)(_useProLayoutStyle, 2),
199
- wrapSSR = _useProLayoutStyle2[0],
200
- hashId = _useProLayoutStyle2[1];
201
- var context = (0, _RouteContext.useRouteContext)();
202
- var getPrefixCls = context.getPrefixCls;
203
- var baseClassName = getPrefixCls('sider');
204
- var hasSplitMenu = (0, _vue.computed)(function () {
205
- return props.layout === 'mix' && props.splitMenus;
206
- });
207
- var sSideWidth = (0, _vue.computed)(function () {
208
- return props.collapsed ? props.collapsedWidth : props.siderWidth;
209
- });
210
- var classNames = (0, _vue.computed)(function () {
211
- return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), hashId.value, true);
212
- });
213
- var logCls = (0, _vue.computed)(function () {
214
- return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-logo"), true), "".concat(baseClassName, "-logo-card"), props.layoutType === _defaultSettings.LayoutType.CARD);
215
- });
216
- var handleSelect = function handleSelect($event) {
217
- if (props.onSelect) {
218
- if ((0, _vue.unref)(hasSplitMenu)) {
219
- props.onSelect([context.selectedKeys[0]].concat((0, _toConsumableArray2.default)($event)));
220
- return;
180
+ var SiderMenu = (0, _vue.defineComponent)({
181
+ name: 'JProLayoutSiderMenu',
182
+ inheritAttrs: false,
183
+ props: siderMenuProps,
184
+ setup: function setup(props) {
185
+ var prefixCls = (0, _vue.computed)(function () {
186
+ return 'pro-layout';
187
+ });
188
+ var _useProLayoutStyle = (0, _style.default)(prefixCls),
189
+ _useProLayoutStyle2 = (0, _slicedToArray2.default)(_useProLayoutStyle, 2),
190
+ wrapSSR = _useProLayoutStyle2[0],
191
+ hashId = _useProLayoutStyle2[1];
192
+ var context = (0, _RouteContext.useRouteContext)();
193
+ var getPrefixCls = context.getPrefixCls;
194
+ var baseClassName = getPrefixCls('sider');
195
+ var hasSplitMenu = (0, _vue.computed)(function () {
196
+ return props.layout === 'mix' && props.splitMenus;
197
+ });
198
+ var sSideWidth = (0, _vue.computed)(function () {
199
+ return props.collapsed ? props.collapsedWidth : props.siderWidth;
200
+ });
201
+ var classNames = (0, _vue.computed)(function () {
202
+ return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, baseClassName, true), "".concat(baseClassName, "-fixed"), context.fixSiderbar), "".concat(baseClassName, "-").concat(props.theme), true), "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), hashId.value, true);
203
+ });
204
+ var logCls = (0, _vue.computed)(function () {
205
+ return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-logo"), true), "".concat(baseClassName, "-logo-card"), props.layoutType === _defaultSettings.LayoutType.CARD);
206
+ });
207
+ var handleSelect = function handleSelect($event) {
208
+ if (props.onSelect) {
209
+ if ((0, _vue.unref)(hasSplitMenu)) {
210
+ props.onSelect([context.selectedKeys[0]].concat((0, _toConsumableArray2.default)($event)));
211
+ return;
212
+ }
213
+ props.onSelect($event);
221
214
  }
222
- props.onSelect($event);
223
- }
224
- };
225
- var headerDom = defaultRenderLogoAndTitle((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
226
- baseClassName: baseClassName
227
- }));
228
- var extraDom = menuExtraRender && menuExtraRender(props);
229
- if (props.layoutType !== _defaultSettings.LayoutType.CARD && hasSplitMenu.value && (0, _vue.unref)(context.flatMenuData).length === 0) {
230
- return null;
231
- }
232
- var defaultMenuDom = (0, _vue.createVNode)(_BaseMenu.default, {
233
- "prefixCls": getPrefixCls(),
234
- "locale": props.locale || context.locale,
235
- "theme": theme,
236
- "mode": "inline",
237
- "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
238
- "collapsed": props.collapsed,
239
- "openKeys": context.openKeys,
240
- "selectedKeys": context.selectedKeys,
241
- "menuItemRender": props.menuItemRender,
242
- "subMenuItemRender": props.subMenuItemRender,
243
- "iconfontUrl": props.iconfontUrl,
244
- "onClick": props.onMenuClick,
245
- "style": {
246
- width: '100%'
247
- },
248
- "class": "".concat(baseClassName, "-menu"),
249
- 'onUpdate:openKeys': function onUpdateOpenKeys($event) {
250
- return props.onOpenKeys && props.onOpenKeys($event);
251
- },
252
- 'onUpdate:selectedKeys': handleSelect
253
- }, null);
254
- return (0, _vue.createVNode)(_vue.Fragment, null, [context.fixSiderbar && (0, _vue.createVNode)("div", {
255
- "style": {
256
- width: "".concat(sSideWidth.value, "px"),
257
- overflow: 'hidden',
258
- flex: "0 0 ".concat(sSideWidth.value, "px"),
259
- maxWidth: "".concat(sSideWidth.value, "px"),
260
- minWidth: "".concat(sSideWidth.value, "px"),
261
- transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
262
- }
263
- }, null), (0, _vue.createVNode)(_antDesignVue.LayoutSider, {
264
- "collapsible": true,
265
- "trigger": null,
266
- "collapsed": collapsed,
267
- "breakpoint": breakpoint || undefined,
268
- "onCollapse": function onCollapse(collapse) {
269
- var _props$onCollapse;
270
- (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
271
- },
272
- "collapsedWidth": collapsedWidth,
273
- "style": {
274
- overflow: 'hidden',
275
- paddingTop: "".concat(props.headerHeight, "px"),
276
- zIndex: props.layoutType === _defaultSettings.LayoutType.PAD ? 200 : 1
277
- },
278
- "width": siderWidth,
279
- "theme": theme,
280
- "class": classNames.value
281
- }, {
282
- default: function _default() {
283
- return [headerDom && (0, _vue.createVNode)("div", {
284
- "class": logCls.value,
285
- "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
286
- "id": "logo",
287
- "style": props === null || props === void 0 ? void 0 : props.logoStyle
288
- }, [headerDom]), extraDom && (0, _vue.createVNode)("div", {
289
- "class": (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
290
- }, [extraDom]), (0, _vue.createVNode)("div", {
291
- "class": "".concat(baseClassName, "-body"),
292
- "style": "flex: 1; overflow: hidden auto;"
293
- }, [props.layoutType !== _defaultSettings.LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), (0, _vue.createVNode)("div", {
294
- "class": "".concat(baseClassName, "-links")
295
- }, [linksRender ? linksRender() : collapsedButtonRender !== false ? (0, _vue.createVNode)(_antDesignVue.Menu, {
296
- "class": "".concat(baseClassName, "-link-menu"),
297
- "inlineIndent": 16,
298
- "theme": theme,
299
- "selectedKeys": [],
300
- "openKeys": [],
215
+ };
216
+ var collapsedButtonRender = (0, _vue.computed)(function () {
217
+ return props.collapsedButtonRender === undefined ? defaultRenderCollapsedButton : props.collapsedButtonRender;
218
+ });
219
+ var headerDom = (0, _vue.computed)(function () {
220
+ return defaultRenderLogoAndTitle((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
221
+ baseClassName: baseClassName
222
+ }));
223
+ });
224
+ var extraDom = (0, _vue.computed)(function () {
225
+ return props.menuExtraRender && props.menuExtraRender(props);
226
+ });
227
+ return function () {
228
+ if (props.layoutType !== _defaultSettings.LayoutType.CARD && hasSplitMenu.value && (0, _vue.unref)(context.flatMenuData).length === 0) {
229
+ return null;
230
+ }
231
+ var defaultMenuDom = (0, _vue.createVNode)(_BaseMenu.default, {
232
+ "prefixCls": getPrefixCls(),
233
+ "locale": props.locale || context.locale,
234
+ "theme": props.theme,
301
235
  "mode": "inline",
302
- "onClick": function onClick() {
303
- if (props.onCollapse) {
304
- props.onCollapse(!props.collapsed);
305
- }
236
+ "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
237
+ "collapsed": props.collapsed,
238
+ "openKeys": context.openKeys,
239
+ "selectedKeys": context.selectedKeys,
240
+ "menuItemRender": props.menuItemRender,
241
+ "subMenuItemRender": props.subMenuItemRender,
242
+ "iconfontUrl": props.iconfontUrl,
243
+ "onClick": props.onMenuClick,
244
+ "style": {
245
+ width: '100%'
246
+ },
247
+ "class": "".concat(baseClassName, "-menu"),
248
+ 'onUpdate:openKeys': function onUpdateOpenKeys($event) {
249
+ return props.onOpenKeys && props.onOpenKeys($event);
250
+ },
251
+ 'onUpdate:selectedKeys': handleSelect
252
+ }, null);
253
+ return (0, _vue.createVNode)(_vue.Fragment, null, [context.fixSiderbar && (0, _vue.createVNode)("div", {
254
+ "style": {
255
+ width: "".concat(sSideWidth.value, "px"),
256
+ overflow: 'hidden',
257
+ flex: "0 0 ".concat(sSideWidth.value, "px"),
258
+ maxWidth: "".concat(sSideWidth.value, "px"),
259
+ minWidth: "".concat(sSideWidth.value, "px"),
260
+ transition: "background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
306
261
  }
262
+ }, null), (0, _vue.createVNode)(_antDesignVue.LayoutSider, {
263
+ "collapsible": true,
264
+ "trigger": null,
265
+ "collapsed": props.collapsed,
266
+ "breakpoint": props.breakpoint || undefined,
267
+ "onCollapse": function onCollapse(collapse) {
268
+ var _props$onCollapse;
269
+ (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
270
+ },
271
+ "collapsedWidth": props.collapsedWidth,
272
+ "style": {
273
+ overflow: 'hidden',
274
+ paddingTop: "".concat(props.headerHeight, "px"),
275
+ zIndex: props.layoutType === _defaultSettings.LayoutType.PAD ? 200 : 1
276
+ },
277
+ "width": props.siderWidth,
278
+ "theme": props.theme,
279
+ "class": classNames.value
307
280
  }, {
308
281
  default: function _default() {
309
- return [(0, _vue.createVNode)(_antDesignVue.Menu.Item, {
310
- "key": 'collapsed-button',
311
- "class": "".concat(baseClassName, "-collapsed-button"),
312
- "title": false
282
+ return [headerDom.value && (0, _vue.createVNode)("div", {
283
+ "class": logCls.value,
284
+ "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
285
+ "id": "logo",
286
+ "style": props === null || props === void 0 ? void 0 : props.logoStyle
287
+ }, [headerDom.value]), extraDom.value && (0, _vue.createVNode)("div", {
288
+ "class": (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom.value)
289
+ }, [extraDom.value]), (0, _vue.createVNode)("div", {
290
+ "class": "".concat(baseClassName, "-body"),
291
+ "style": "flex: 1; overflow: hidden auto;"
292
+ }, [props.layoutType !== _defaultSettings.LayoutType.CARD ? props.menuContentRender && props.menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), (0, _vue.createVNode)("div", {
293
+ "class": "".concat(baseClassName, "-links")
294
+ }, [props.linksRender ? props.linksRender() : collapsedButtonRender.value !== false ? (0, _vue.createVNode)(_antDesignVue.Menu, {
295
+ "class": "".concat(baseClassName, "-link-menu"),
296
+ "inlineIndent": 16,
297
+ "theme": props.theme,
298
+ "selectedKeys": [],
299
+ "openKeys": [],
300
+ "mode": "inline",
301
+ "onClick": function onClick() {
302
+ if (props.onCollapse) {
303
+ props.onCollapse(!props.collapsed);
304
+ }
305
+ }
313
306
  }, {
314
307
  default: function _default() {
315
- return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
308
+ return [(0, _vue.createVNode)(_antDesignVue.Menu.Item, {
309
+ "key": 'collapsed-button',
310
+ "class": "".concat(baseClassName, "-collapsed-button"),
311
+ "title": false
312
+ }, {
313
+ default: function _default() {
314
+ return [collapsedButtonRender.value && typeof collapsedButtonRender.value === 'function' ? collapsedButtonRender.value(props.collapsed) : collapsedButtonRender.value];
315
+ }
316
+ })];
316
317
  }
317
- })];
318
+ }) : null])];
318
319
  }
319
- }) : null])];
320
- }
321
- })]);
322
- };
320
+ })]);
321
+ };
322
+ }
323
+ });
323
324
  var _default2 = exports.default = SiderMenu;
package/lib/ProLayout/SiderMenu/style.js CHANGED
@@ -26,7 +26,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
26
26
  opacity: 1
27
27
  }
28
28
  });
29
- return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
29
+ return ["\n ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
30
30
  position: 'relative',
31
31
  backgroundColor: '#001529',
32
32
  borderRight: 0,
@@ -120,7 +120,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
120
120
  }, "> ".concat(token.antCls, "-menu-root"), (0, _defineProperty2.default)({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
121
121
  height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
122
122
  overflowY: 'auto'
123
- }))), "".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
123
+ }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
124
124
  backgroundColor: token.colorBgContainer,
125
125
  boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
126
126
  }, "".concat(token.antCls, "-layout-sider-children"), {
@@ -146,7 +146,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
146
146
  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
147
147
  width: '14px',
148
148
  verticalAlign: 'baseline'
149
- }), "".concat(proLayoutSiderMenuCls, "-link"), (0, _defineProperty2.default)({
149
+ }), "".concat(proLayoutSiderMenuCls, "-links"), (0, _defineProperty2.default)({
150
150
  width: '100%'
151
151
  }, "ul".concat(token.antCls, "-menu-root"), {
152
152
  height: 'auto'
@@ -173,5 +173,5 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
173
173
  '&:hover': {
174
174
  backgroundColor: '#efefef'
175
175
  }
176
- });
176
+ })];
177
177
  };
package/lib/style/styleRegister.js CHANGED
@@ -8,16 +8,12 @@ exports.default = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
10
10
  var _internal = require("ant-design-vue/es/theme/internal");
11
- var _antDesignVue = require("ant-design-vue");
12
11
  var _variable = _interopRequireDefault(require("./variable"));
13
12
  var genCompoentStyle = function genCompoentStyle(styleFn) {
14
- return (0, _internal.genComponentStyleHook)('jetlinks-components', function (_token) {
15
- var _theme$useToken = _antDesignVue.theme.useToken(),
16
- token = _theme$useToken.token,
17
- hashId = _theme$useToken.hashId;
13
+ return (0, _internal.genComponentStyleHook)('jetlinks-components', function (_token, info) {
18
14
  var componentToken = {
19
15
  token: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _token), _variable.default),
20
- hashId: hashId.value,
16
+ hashId: info.hashId,
21
17
  componentCls: ".".concat(_token.prefixCls)
22
18
  };
23
19
  return (0, _toConsumableArray2.default)(styleFn.map(function (item) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetlinks-web/components",
3
- "version": "3.3.7",
3
+ "version": "3.3.9",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -154,9 +154,9 @@
154
154
  "webpack-dev-server": "^4.0.0",
155
155
  "webpack-merge": "^5.0.0",
156
156
  "webpackbar": "^5.0.2",
157
+ "@jetlinks-web/utils": "^1.3.3",
157
158
  "@jetlinks-web/constants": "^1.0.9",
158
- "@jetlinks-web/hooks": "^1.1.2",
159
- "@jetlinks-web/utils": "^1.3.3"
159
+ "@jetlinks-web/hooks": "^1.1.2"
160
160
  },
161
161
  "publishConfig": {
162
162
  "registry": "https://registry.npmjs.org/",