1 | import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
|
2 |
|
3 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
4 |
|
5 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
6 |
|
7 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
8 |
|
9 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
10 |
|
11 | var __rest = this && this.__rest || function (s, e) {
|
12 | var t = {};
|
13 |
|
14 | for (var p in s) {
|
15 | if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
16 | }
|
17 |
|
18 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
19 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
20 | }
|
21 | return t;
|
22 | };
|
23 |
|
24 | import { defineComponent, inject, provide, toRef } from 'vue';
|
25 | import omit from 'omit.js';
|
26 | import VcMenu, { Divider, ItemGroup } from '../vc-menu';
|
27 | import SubMenu from './SubMenu';
|
28 | import PropTypes from '../_util/vue-types';
|
29 | import animation from '../_util/openAnimation';
|
30 | import warning from '../_util/warning';
|
31 | import Item from './MenuItem';
|
32 | import { hasProp, getOptionProps } from '../_util/props-util';
|
33 | import BaseMixin from '../_util/BaseMixin';
|
34 | import commonPropsType from '../vc-menu/commonPropsType';
|
35 | import { defaultConfigProvider } from '../config-provider';
|
36 | import { tuple } from '../_util/type';
|
37 |
|
38 | export var MenuMode = PropTypes.oneOf(['vertical', 'vertical-left', 'vertical-right', 'horizontal', 'inline']);
|
39 | export var menuProps = _extends(_extends({}, commonPropsType), {
|
40 | theme: PropTypes.oneOf(tuple('light', 'dark')).def('light'),
|
41 | mode: MenuMode.def('vertical'),
|
42 | selectable: PropTypes.looseBool,
|
43 | selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
44 | defaultSelectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
45 | openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
46 | defaultOpenKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
47 | openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
48 | openTransitionName: PropTypes.string,
|
49 | prefixCls: PropTypes.string,
|
50 | multiple: PropTypes.looseBool,
|
51 | inlineIndent: PropTypes.number.def(24),
|
52 | inlineCollapsed: PropTypes.looseBool,
|
53 | isRootMenu: PropTypes.looseBool.def(true),
|
54 | focusable: PropTypes.looseBool.def(false),
|
55 | onOpenChange: PropTypes.func,
|
56 | onSelect: PropTypes.func,
|
57 | onDeselect: PropTypes.func,
|
58 | onClick: PropTypes.func,
|
59 | onMouseenter: PropTypes.func,
|
60 | onSelectChange: PropTypes.func
|
61 | });
|
62 | var Menu = defineComponent({
|
63 | name: 'AMenu',
|
64 | mixins: [BaseMixin],
|
65 | inheritAttrs: false,
|
66 | props: menuProps,
|
67 | Divider: _extends(_extends({}, Divider), {
|
68 | name: 'AMenuDivider'
|
69 | }),
|
70 | Item: _extends(_extends({}, Item), {
|
71 | name: 'AMenuItem'
|
72 | }),
|
73 | SubMenu: _extends(_extends({}, SubMenu), {
|
74 | name: 'ASubMenu'
|
75 | }),
|
76 | ItemGroup: _extends(_extends({}, ItemGroup), {
|
77 | name: 'AMenuItemGroup'
|
78 | }),
|
79 | emits: ['update:selectedKeys', 'update:openKeys', 'mouseenter', 'openChange', 'click', 'selectChange', 'select', 'deselect'],
|
80 | setup: function setup() {
|
81 | var layoutSiderContext = inject('layoutSiderContext', {});
|
82 | var layoutSiderCollapsed = toRef(layoutSiderContext, 'sCollapsed');
|
83 | return {
|
84 | configProvider: inject('configProvider', defaultConfigProvider),
|
85 | layoutSiderContext: layoutSiderContext,
|
86 | layoutSiderCollapsed: layoutSiderCollapsed,
|
87 | propsUpdating: false,
|
88 | switchingModeFromInline: false,
|
89 | leaveAnimationExecutedWhenInlineCollapsed: false,
|
90 | inlineOpenKeys: []
|
91 | };
|
92 | },
|
93 | data: function data() {
|
94 | var props = getOptionProps(this);
|
95 | warning(!('inlineCollapsed' in props && props.mode !== 'inline'), 'Menu', "`inlineCollapsed` should only be used when Menu's `mode` is inline.");
|
96 | var sOpenKeys;
|
97 |
|
98 | if ('openKeys' in props) {
|
99 | sOpenKeys = props.openKeys;
|
100 | } else if ('defaultOpenKeys' in props) {
|
101 | sOpenKeys = props.defaultOpenKeys;
|
102 | }
|
103 |
|
104 | return {
|
105 | sOpenKeys: sOpenKeys
|
106 | };
|
107 | },
|
108 |
|
109 |
|
110 |
|
111 | watch: {
|
112 | mode: function mode(val, oldVal) {
|
113 | if (oldVal === 'inline' && val !== 'inline') {
|
114 | this.switchingModeFromInline = true;
|
115 | }
|
116 | },
|
117 | openKeys: function openKeys(val) {
|
118 | this.setState({
|
119 | sOpenKeys: val
|
120 | });
|
121 | },
|
122 | inlineCollapsed: function inlineCollapsed(val) {
|
123 | this.collapsedChange(val);
|
124 | },
|
125 | layoutSiderCollapsed: function layoutSiderCollapsed(val) {
|
126 | this.collapsedChange(val);
|
127 | }
|
128 | },
|
129 | created: function created() {
|
130 | provide('getInlineCollapsed', this.getInlineCollapsed);
|
131 | provide('menuPropsContext', this.$props);
|
132 | },
|
133 | updated: function updated() {
|
134 | this.propsUpdating = false;
|
135 | },
|
136 | methods: {
|
137 | collapsedChange: function collapsedChange(val) {
|
138 | if (this.propsUpdating) {
|
139 | return;
|
140 | }
|
141 |
|
142 | this.propsUpdating = true;
|
143 |
|
144 | if (!hasProp(this, 'openKeys')) {
|
145 | if (val) {
|
146 | this.switchingModeFromInline = true;
|
147 | this.inlineOpenKeys = this.sOpenKeys;
|
148 | this.setState({
|
149 | sOpenKeys: []
|
150 | });
|
151 | } else {
|
152 | this.setState({
|
153 | sOpenKeys: this.inlineOpenKeys
|
154 | });
|
155 | this.inlineOpenKeys = [];
|
156 | }
|
157 | } else if (val) {
|
158 |
|
159 | this.switchingModeFromInline = true;
|
160 | }
|
161 | },
|
162 | restoreModeVerticalFromInline: function restoreModeVerticalFromInline() {
|
163 | if (this.switchingModeFromInline) {
|
164 | this.switchingModeFromInline = false;
|
165 | this.$forceUpdate();
|
166 | }
|
167 | },
|
168 |
|
169 |
|
170 |
|
171 | handleMouseEnter: function handleMouseEnter(e) {
|
172 | this.restoreModeVerticalFromInline();
|
173 | this.$emit('mouseenter', e);
|
174 | },
|
175 | handleTransitionEnd: function handleTransitionEnd(e) {
|
176 |
|
177 |
|
178 | var widthCollapsed = e.propertyName === 'width' && e.target === e.currentTarget;
|
179 |
|
180 |
|
181 | var className = e.target.className;
|
182 |
|
183 | var classNameValue = Object.prototype.toString.call(className) === '[object SVGAnimatedString]' ? className.animVal : className;
|
184 |
|
185 |
|
186 | var iconScaled = e.propertyName === 'font-size' && classNameValue.indexOf('anticon') >= 0;
|
187 |
|
188 | if (widthCollapsed || iconScaled) {
|
189 | this.restoreModeVerticalFromInline();
|
190 | }
|
191 | },
|
192 | handleClick: function handleClick(e) {
|
193 | this.handleOpenChange([]);
|
194 | this.$emit('click', e);
|
195 | },
|
196 | handleSelect: function handleSelect(info) {
|
197 | this.$emit('update:selectedKeys', info.selectedKeys);
|
198 | this.$emit('select', info);
|
199 | this.$emit('selectChange', info.selectedKeys);
|
200 | },
|
201 | handleDeselect: function handleDeselect(info) {
|
202 | this.$emit('update:selectedKeys', info.selectedKeys);
|
203 | this.$emit('deselect', info);
|
204 | this.$emit('selectChange', info.selectedKeys);
|
205 | },
|
206 | handleOpenChange: function handleOpenChange(openKeys) {
|
207 | this.setOpenKeys(openKeys);
|
208 | this.$emit('update:openKeys', openKeys);
|
209 | this.$emit('openChange', openKeys);
|
210 | },
|
211 | setOpenKeys: function setOpenKeys(openKeys) {
|
212 | if (!hasProp(this, 'openKeys')) {
|
213 | this.setState({
|
214 | sOpenKeys: openKeys
|
215 | });
|
216 | }
|
217 | },
|
218 | getRealMenuMode: function getRealMenuMode() {
|
219 | var inlineCollapsed = this.getInlineCollapsed();
|
220 |
|
221 | if (this.switchingModeFromInline && inlineCollapsed) {
|
222 | return 'inline';
|
223 | }
|
224 |
|
225 | var mode = this.$props.mode;
|
226 | return inlineCollapsed ? 'vertical' : mode;
|
227 | },
|
228 | getInlineCollapsed: function getInlineCollapsed() {
|
229 | var inlineCollapsed = this.$props.inlineCollapsed;
|
230 |
|
231 | if (this.layoutSiderContext.sCollapsed !== undefined) {
|
232 | return this.layoutSiderContext.sCollapsed;
|
233 | }
|
234 |
|
235 | return inlineCollapsed;
|
236 | },
|
237 | getMenuOpenAnimation: function getMenuOpenAnimation(menuMode) {
|
238 | var _this$$props = this.$props,
|
239 | openAnimation = _this$$props.openAnimation,
|
240 | openTransitionName = _this$$props.openTransitionName;
|
241 | var menuOpenAnimation = openAnimation || openTransitionName;
|
242 |
|
243 | if (openAnimation === undefined && openTransitionName === undefined) {
|
244 | if (menuMode === 'horizontal') {
|
245 | menuOpenAnimation = 'slide-up';
|
246 | } else if (menuMode === 'inline') {
|
247 | menuOpenAnimation = animation;
|
248 | } else {
|
249 |
|
250 |
|
251 | if (this.switchingModeFromInline) {
|
252 | menuOpenAnimation = '';
|
253 | this.switchingModeFromInline = false;
|
254 | } else {
|
255 | menuOpenAnimation = 'zoom-big';
|
256 | }
|
257 | }
|
258 | }
|
259 |
|
260 | return menuOpenAnimation;
|
261 | }
|
262 | },
|
263 | render: function render() {
|
264 | var _menuClassName,
|
265 | _this = this;
|
266 |
|
267 | var layoutSiderContext = this.layoutSiderContext;
|
268 | var collapsedWidth = layoutSiderContext.collapsedWidth;
|
269 | var getContextPopupContainer = this.configProvider.getPopupContainer;
|
270 | var props = getOptionProps(this);
|
271 | var customizePrefixCls = props.prefixCls,
|
272 | theme = props.theme,
|
273 | getPopupContainer = props.getPopupContainer;
|
274 | var getPrefixCls = this.configProvider.getPrefixCls;
|
275 | var prefixCls = getPrefixCls('menu', customizePrefixCls);
|
276 | var menuMode = this.getRealMenuMode();
|
277 | var menuOpenAnimation = this.getMenuOpenAnimation(menuMode);
|
278 |
|
279 | var _a = this.$attrs,
|
280 | className = _a.class,
|
281 | otherAttrs = __rest(_a, ["class"]);
|
282 |
|
283 | var menuClassName = (_menuClassName = {}, _defineProperty(_menuClassName, className, className), _defineProperty(_menuClassName, "".concat(prefixCls, "-").concat(theme), true), _defineProperty(_menuClassName, "".concat(prefixCls, "-inline-collapsed"), this.getInlineCollapsed()), _menuClassName);
|
284 |
|
285 | var menuProps = _extends(_extends(_extends(_extends({}, omit(props, ['inlineCollapsed', 'onUpdate:selectedKeys', 'onUpdate:openKeys', 'onSelectChange'])), {
|
286 | getPopupContainer: getPopupContainer || getContextPopupContainer,
|
287 | openKeys: this.sOpenKeys,
|
288 | mode: menuMode,
|
289 | prefixCls: prefixCls
|
290 | }), otherAttrs), {
|
291 | onSelect: this.handleSelect,
|
292 | onDeselect: this.handleDeselect,
|
293 | onOpenChange: this.handleOpenChange,
|
294 | onMouseenter: this.handleMouseEnter,
|
295 | onTransitionend: this.handleTransitionEnd
|
296 | });
|
297 |
|
298 | if (!hasProp(this, 'selectedKeys')) {
|
299 | delete menuProps.selectedKeys;
|
300 | }
|
301 |
|
302 | if (menuMode !== 'inline') {
|
303 |
|
304 | menuProps.onClick = this.handleClick;
|
305 | menuProps.openTransitionName = menuOpenAnimation;
|
306 | } else {
|
307 | menuProps.onClick = function (e) {
|
308 | _this.$emit('click', e);
|
309 | };
|
310 |
|
311 | menuProps.openAnimation = menuOpenAnimation;
|
312 | }
|
313 |
|
314 |
|
315 | var hideMenu = this.getInlineCollapsed() && (collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px');
|
316 |
|
317 | if (hideMenu) {
|
318 | menuProps.openKeys = [];
|
319 | }
|
320 |
|
321 | return _createVNode(VcMenu, _objectSpread(_objectSpread({}, menuProps), {}, {
|
322 | "class": menuClassName
|
323 | }), _objectSpread({}, this.$slots));
|
324 | }
|
325 | });
|
326 |
|
327 |
|
328 | Menu.install = function (app) {
|
329 | app.component(Menu.name, Menu);
|
330 | app.component(Menu.Item.name, Menu.Item);
|
331 | app.component(Menu.SubMenu.name, Menu.SubMenu);
|
332 | app.component(Menu.Divider.name, Menu.Divider);
|
333 | app.component(Menu.ItemGroup.name, Menu.ItemGroup);
|
334 | return app;
|
335 | };
|
336 |
|
337 | export default Menu; |
\ | No newline at end of file |