1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.menuItemProps = exports.default = void 0;
|
7 |
|
8 | var _vue = require("vue");
|
9 |
|
10 | var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
|
11 |
|
12 | var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
|
13 |
|
14 | var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
|
15 |
|
16 | var _domScrollIntoView = _interopRequireDefault(require("dom-scroll-into-view"));
|
17 |
|
18 | var _util = require("./util");
|
19 |
|
20 | var _propsUtil = require("../_util/props-util");
|
21 |
|
22 | var _InjectExtraProps = _interopRequireDefault(require("./InjectExtraProps"));
|
23 |
|
24 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
25 |
|
26 | 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; }
|
27 |
|
28 | 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; }
|
29 |
|
30 | 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; }
|
31 |
|
32 | 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); }
|
33 |
|
34 | var __rest = void 0 && (void 0).__rest || function (s, e) {
|
35 | var t = {};
|
36 |
|
37 | for (var p in s) {
|
38 | if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
39 | }
|
40 |
|
41 | if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
42 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
43 | }
|
44 | return t;
|
45 | };
|
46 |
|
47 | var props = {
|
48 | attribute: _vueTypes.default.object,
|
49 | rootPrefixCls: _vueTypes.default.string,
|
50 | eventKey: _vueTypes.default.oneOfType([_vueTypes.default.string, _vueTypes.default.number]),
|
51 | active: _vueTypes.default.looseBool,
|
52 | selectedKeys: _vueTypes.default.array,
|
53 | disabled: _vueTypes.default.looseBool,
|
54 | title: _vueTypes.default.any,
|
55 | index: _vueTypes.default.number,
|
56 | inlineIndent: _vueTypes.default.number.def(24),
|
57 | level: _vueTypes.default.number.def(1),
|
58 | mode: _vueTypes.default.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
|
59 | multiple: _vueTypes.default.looseBool,
|
60 | value: _vueTypes.default.any,
|
61 | manualRef: _vueTypes.default.func.def(_util.noop),
|
62 | role: _vueTypes.default.any,
|
63 | subMenuKey: _vueTypes.default.string,
|
64 | itemIcon: _vueTypes.default.any,
|
65 | parentUniKeys: _vueTypes.default.array.def(function () {
|
66 | return [];
|
67 | }),
|
68 | parentUniKey: _vueTypes.default.string
|
69 | };
|
70 | exports.menuItemProps = props;
|
71 | var indexGuid = 0;
|
72 | var MenuItem = (0, _vue.defineComponent)({
|
73 | name: 'AMenuItem',
|
74 | mixins: [_BaseMixin.default],
|
75 | inheritAttrs: false,
|
76 | props: props,
|
77 | isMenuItem: true,
|
78 | setup: function setup(props) {
|
79 | var uniKey = "menu_item_".concat(++indexGuid);
|
80 | var store = (0, _vue.inject)('menuStore', function () {
|
81 | return {};
|
82 | });
|
83 | var isSelected = (0, _vue.computed)(function () {
|
84 | return store.selectedKeys && store.selectedKeys.indexOf(props.eventKey) !== -1;
|
85 | });
|
86 | (0, _vue.onMounted)(function () {
|
87 | store.addChildrenInfo(uniKey, (0, _vue.computed)(function () {
|
88 | return {
|
89 | parentUniKeys: props.parentUniKeys,
|
90 | parentUniKey: props.parentUniKey,
|
91 | eventKey: props.eventKey,
|
92 | isSelected: isSelected.value,
|
93 | disabled: props.disabled
|
94 | };
|
95 | }));
|
96 | });
|
97 | (0, _vue.onBeforeUnmount)(function () {
|
98 | store.removeChildrenInfo(uniKey);
|
99 | });
|
100 | return {
|
101 | parentMenu: (0, _vue.inject)('parentMenu', undefined),
|
102 | isSelected: isSelected
|
103 | };
|
104 | },
|
105 | created: function created() {
|
106 | this.prevActive = this.active;
|
107 |
|
108 | this.callRef();
|
109 | },
|
110 | updated: function updated() {
|
111 | var _this = this;
|
112 |
|
113 | this.$nextTick(function () {
|
114 | var active = _this.active,
|
115 | parentMenu = _this.parentMenu,
|
116 | eventKey = _this.eventKey;
|
117 |
|
118 | if (!_this.prevActive && active && (!parentMenu || !parentMenu["scrolled-".concat(eventKey)])) {
|
119 | (0, _domScrollIntoView.default)((0, _propsUtil.findDOMNode)(_this.node), parentMenu.getEl(), {
|
120 | onlyScrollIfNeeded: true
|
121 | });
|
122 | parentMenu["scrolled-".concat(eventKey)] = true;
|
123 | } else if (parentMenu && parentMenu["scrolled-".concat(eventKey)]) {
|
124 | delete parentMenu["scrolled-".concat(eventKey)];
|
125 | }
|
126 |
|
127 | _this.prevActive = active;
|
128 | });
|
129 | this.callRef();
|
130 | },
|
131 | methods: {
|
132 | onKeyDown: function onKeyDown(e) {
|
133 | var keyCode = e.keyCode;
|
134 |
|
135 | if (keyCode === _KeyCode.default.ENTER) {
|
136 | this.onClick(e);
|
137 | return true;
|
138 | }
|
139 | },
|
140 | onMouseLeave: function onMouseLeave(e) {
|
141 | var eventKey = this.$props.eventKey;
|
142 |
|
143 | this.__emit('itemHover', {
|
144 | key: eventKey,
|
145 | hover: false
|
146 | });
|
147 |
|
148 | this.__emit('mouseleave', {
|
149 | key: eventKey,
|
150 | domEvent: e
|
151 | });
|
152 | },
|
153 | onMouseEnter: function onMouseEnter(e) {
|
154 | var eventKey = this.eventKey;
|
155 |
|
156 | this.__emit('itemHover', {
|
157 | key: eventKey,
|
158 | hover: true
|
159 | });
|
160 |
|
161 | this.__emit('mouseenter', {
|
162 | key: eventKey,
|
163 | domEvent: e
|
164 | });
|
165 | },
|
166 | onClick: function onClick(e) {
|
167 | var _this$$props = this.$props,
|
168 | eventKey = _this$$props.eventKey,
|
169 | multiple = _this$$props.multiple;
|
170 | var isSelected = this.isSelected;
|
171 | var info = {
|
172 | key: eventKey,
|
173 | keyPath: [eventKey],
|
174 | item: _extends(_extends({}, (0, _vue.toRaw)(this.$props)), {
|
175 | isSelected: isSelected
|
176 | }),
|
177 | domEvent: e
|
178 | };
|
179 |
|
180 | this.__emit('click', info);
|
181 |
|
182 | if (multiple) {
|
183 | if (isSelected) {
|
184 | this.__emit('deselect', info);
|
185 | } else {
|
186 | this.__emit('select', info);
|
187 | }
|
188 | } else if (!isSelected) {
|
189 | this.__emit('select', info);
|
190 | }
|
191 | },
|
192 | getPrefixCls: function getPrefixCls() {
|
193 | return "".concat(this.$props.rootPrefixCls, "-item");
|
194 | },
|
195 | getActiveClassName: function getActiveClassName() {
|
196 | return "".concat(this.getPrefixCls(), "-active");
|
197 | },
|
198 | getSelectedClassName: function getSelectedClassName() {
|
199 | return "".concat(this.getPrefixCls(), "-selected");
|
200 | },
|
201 | getDisabledClassName: function getDisabledClassName() {
|
202 | return "".concat(this.getPrefixCls(), "-disabled");
|
203 | },
|
204 | saveNode: function saveNode(node) {
|
205 | this.node = node;
|
206 | },
|
207 | callRef: function callRef() {
|
208 | if (this.manualRef) {
|
209 | this.manualRef(this);
|
210 | }
|
211 | }
|
212 | },
|
213 | render: function render() {
|
214 | var _className;
|
215 |
|
216 | var _a = _extends(_extends({}, this.$props), this.$attrs),
|
217 | cls = _a.class,
|
218 | style = _a.style,
|
219 | props = __rest(_a, ["class", "style"]);
|
220 |
|
221 | var className = (_className = {}, _defineProperty(_className, cls, !!cls), _defineProperty(_className, this.getPrefixCls(), true), _defineProperty(_className, this.getActiveClassName(), !props.disabled && this.active), _defineProperty(_className, this.getSelectedClassName(), this.isSelected), _defineProperty(_className, this.getDisabledClassName(), props.disabled), _className);
|
222 |
|
223 | var attrs = _extends(_extends({}, props.attribute), {
|
224 | title: props.title,
|
225 | role: props.role || 'menuitem',
|
226 | 'aria-disabled': props.disabled
|
227 | });
|
228 |
|
229 | if (props.role === 'option') {
|
230 |
|
231 | attrs = _extends(_extends({}, attrs), {
|
232 | role: 'option',
|
233 | 'aria-selected': this.isSelected
|
234 | });
|
235 | } else if (props.role === null || props.role === 'none') {
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 | attrs.role = 'none';
|
242 | }
|
243 |
|
244 |
|
245 | var mouseEvent = {
|
246 | onClick: props.disabled ? _util.noop : this.onClick,
|
247 | onMouseleave: props.disabled ? _util.noop : this.onMouseLeave,
|
248 | onMouseenter: props.disabled ? _util.noop : this.onMouseEnter
|
249 | };
|
250 |
|
251 | var styles = _extends({}, style || {});
|
252 |
|
253 | if (props.mode === 'inline') {
|
254 | styles.paddingLeft = "".concat(props.inlineIndent * props.level, "px");
|
255 | }
|
256 |
|
257 | _util.menuAllProps.forEach(function (key) {
|
258 | return delete props[key];
|
259 | });
|
260 |
|
261 | var liProps = _extends(_extends(_extends(_extends({}, props), attrs), mouseEvent), {
|
262 | ref: this.saveNode
|
263 | });
|
264 |
|
265 | return (0, _vue.createVNode)("li", _objectSpread(_objectSpread({}, liProps), {}, {
|
266 | "style": styles,
|
267 | "class": className
|
268 | }), [(0, _propsUtil.getSlot)(this), (0, _propsUtil.getComponent)(this, 'itemIcon', props)]);
|
269 | }
|
270 | });
|
271 |
|
272 | var _default = (0, _InjectExtraProps.default)(MenuItem);
|
273 |
|
274 | exports.default = _default; |
\ | No newline at end of file |