@king-design/vue 2.1.3 → 2.1.4

package/components/dropdown/item.js

@@ -13,25 +13,19 @@ var typeDefs = {
   hideOnSelect: Boolean,
   _isFocus: null
 };
-
 var defaults = function defaults() {
   return {
     hideOnSelect: true
   };
 };
-
 export var DropdownItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DropdownItem, _Component);
-
   function DropdownItem() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.parentDropdown = void 0;
     _this.dropdown = null;
@@ -39,35 +33,28 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
     _this.dropdownMenu = null;
     return _this;
   }
-
   var _proto = DropdownItem.prototype;
-
   _proto.init = function init() {
     this.dropdown = inject(DROPDOWN);
     this.parentDropdown = this.hasSubMenu();
     this.dropdownMenu = inject(DROPDOWN_MENU);
     this.keyboard = useKeyboardForDropdownItem(this);
   };
-
   _proto.select = function select() {
-    if (this.parentDropdown) return; // trigger select event firstly for Cascader update values
-
+    if (this.parentDropdown) return;
+    // trigger select event firstly for Cascader update values
     this.trigger('select');
-
     if (this.get('hideOnSelect')) {
       // hide all dropdowns
       var dropdown = this.dropdown;
-
       do {
         dropdown.hide(true);
       } while (dropdown = dropdown.dropdown);
     }
   };
-
   _proto.hasSubMenu = function hasSubMenu() {
     // wrapped by Dropdown rather than DropdownMenu
     var parent = this.$senior;
-
     while (parent) {
       // Tooltip extends Dropdown, it's also a instance of Dropdown
       // so use constructor to detect
@@ -75,45 +62,37 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
       if (parent.constructor === ExportDropdownMenu) {
         return;
       }
-
       if (parent.constructor === ExportDropdown) {
         return parent;
       }
-
       parent = parent.$senior;
     }
   };
-
   _proto.onClick = function onClick(e) {
-    if (this.get('disabled')) return; // Some cases, the item may been removed after click immediately
+    if (this.get('disabled')) return;
+    // Some cases, the item may been removed after click immediately
     // and the menu will hide, because it can't detect it contains
     // the removed item.
     // Set the ignore flag to prevent menu from hidding
     // 
     // @Change Cascader need click item to toggle show an hide
     // (e as IgnoreClickEvent)._ignore = true;
-
     this.trigger('click', e);
     this.select();
   };
-
   return DropdownItem;
 }(Component);
 DropdownItem.template = template;
 DropdownItem.typeDefs = typeDefs;
 DropdownItem.defaults = defaults;
-
 __decorate([bind], DropdownItem.prototype, "onClick", null);
-
 function useKeyboardForDropdownItem(instance) {
   var dropdownMenu = inject(DROPDOWN_MENU);
-
   var showMenu = function showMenu() {
     if (instance.parentDropdown) {
       instance.parentDropdown.show(true);
     }
   };
-
   return useItemKeyboard({
     onShowMenu: showMenu,
     onHideMenu: function onHideMenu() {

package/components/dropdown/item.vdt.js

@@ -4,18 +4,15 @@ import { getRestProps } from '../utils';
 import { makeItemStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      children = _this$get.children,
-      disabled = _this$get.disabled,
-      className = _this$get.className,
-      hideOnSelect = _this$get.hideOnSelect,
-      _isFocus = _this$get._isFocus;
-
+    children = _this$get.children,
+    disabled = _this$get.disabled,
+    className = _this$get.className,
+    hideOnSelect = _this$get.hideOnSelect,
+    _isFocus = _this$get._isFocus;
   var classNameObj = (_classNameObj = {
     'k-dropdown-item': true,
     'k-disabled': disabled

package/components/dropdown/menu.js

@@ -8,19 +8,16 @@ import { DROPDOWN } from './dropdown';
 import { useTransition } from './useTransition';
 import { useMenuKeyboard } from './useKeyboard';
 import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
+import { usePositionForDropdownMenu } from './usePosition';
 export var DROPDOWN_MENU = 'DropdownMenu';
 export var DropdownMenu = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DropdownMenu, _Component);
-
   function DropdownMenu() {
     var _context;
-
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.dropdown = inject(DROPDOWN);
@@ -30,68 +27,56 @@ export var DropdownMenu = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-
   var _proto = DropdownMenu.prototype;
-
   _proto.init = function init() {
     provide(DROPDOWN_MENU, this);
     useMouseOutsidable(this.elementRef);
-  } // no matter what the trigger is, we should show menu when enter into it.
+    usePositionForDropdownMenu();
+  }
+  // no matter what the trigger is, we should show menu when enter into it.
   ;
-
   _proto.onMouseEnter = function onMouseEnter(e) {
     var dropdown = this.dropdown;
     dropdown.show();
     dropdown.trigger('mouseenter', e);
   };
-
   _proto.onMouseLeave = function onMouseLeave(e) {
     var dropdown = this.dropdown;
     dropdown.hide();
     dropdown.trigger('mouseleave', e);
   };
-
   return DropdownMenu;
 }(Component);
 DropdownMenu.template = template;
-
 __decorate([bind], DropdownMenu.prototype, "onMouseEnter", null);
-
 __decorate([bind], DropdownMenu.prototype, "onMouseLeave", null);
-
 function useKeyboardForDropdownMenu(dropdown) {
   var parentDropdownMenu = inject(DROPDOWN_MENU, null);
-
   var _useMenuKeyboard = useMenuKeyboard(),
-      _useMenuKeyboard$ = _useMenuKeyboard[0],
-      addKeydown = _useMenuKeyboard$[0],
-      removeKeydown = _useMenuKeyboard$[1],
-      lock = _useMenuKeyboard$[2],
-      focusByIndex = _useMenuKeyboard[1],
-      reset = _useMenuKeyboard[2];
-
+    _useMenuKeyboard$ = _useMenuKeyboard[0],
+    addKeydown = _useMenuKeyboard$[0],
+    removeKeydown = _useMenuKeyboard$[1],
+    lock = _useMenuKeyboard$[2],
+    focusByIndex = _useMenuKeyboard[1],
+    reset = _useMenuKeyboard[2];
   var onShow = function onShow() {
-    addKeydown(); // lock parent dropdown menu, prevent it from operating by keyboard
-
+    addKeydown();
+    // lock parent dropdown menu, prevent it from operating by keyboard
     parentDropdownMenu && parentDropdownMenu.keyboard.lock(true);
   };
-
   var onHide = function onHide() {
     reset();
     removeKeydown();
     parentDropdownMenu && parentDropdownMenu.keyboard.lock(false);
   };
-
   var focus = function focus() {
     return focusByIndex(0);
-  }; // In Cascader the menu may have been replaced by another menu, in this case,
+  };
+  // In Cascader the menu may have been replaced by another menu, in this case,
   // if the dropdown has showed while we mounted the menu, add keydown listener
-
-
   if (dropdown.get('value')) {
     onShow();
   }
-
   dropdown.on('show', onShow);
   dropdown.on('hide', onHide);
   dropdown.on('shouldFocus', focus);

package/components/dropdown/menu.vdt.js

@@ -4,30 +4,24 @@ import { Transition } from 'intact';
 import { makeMenuStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
-
   var _this$dropdown$get = this.dropdown.get(),
-      value = _this$dropdown$get.value,
-      trigger = _this$dropdown$get.trigger,
-      container = _this$dropdown$get.container;
-
+    value = _this$dropdown$get.value,
+    trigger = _this$dropdown$get.trigger,
+    container = _this$dropdown$get.container;
   var _this$get = this.get(),
-      children = _this$get.children,
-      className = _this$get.className;
-
+    children = _this$get.children,
+    className = _this$get.className;
   var classNameObj = (_classNameObj = {
     'k-dropdown-menu': true
   }, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeMenuStyles()] = true, _classNameObj);
-
   var transition = $props.transition || _extends({
     css: false
   }, this.transition);
-
   return _$cc(Transition, _extends({
     'show': 'value' in $props ? $props.value : !!value,
     'appear': true
@@ -36,11 +30,9 @@ export default function ($props, $blocks, $__proto__) {
       return children;
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];
-
       var callBlock = function callBlock() {
         return _$blocks['children'].call($this, $super, data);
       };
-
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['children'](_$no)), 0, _$cn(classNameObj), {
       'ev-mouseenter': this.onMouseEnter,

package/components/dropdown/styles.js

@@ -7,39 +7,30 @@ var defaults = {
     get height() {
       return theme.default.height;
     },
-
     get padding() {
       return "0 " + theme.default.padding;
     },
-
     get hoverBgColor() {
       return theme.color.bg;
     },
-
     // disabled
     get disabledBgColor() {
       return theme.color.disabledBg;
     },
-
     get disabledColor() {
       return theme.color.disabled;
     }
-
   },
   menu: {
     minWidth: '100px',
     bgColor: '#fff',
-
     get borderRadius() {
       return theme.borderRadius;
     },
-
     fontSize: '12px',
-
     get zIndex() {
       return theme.midZIndex;
     }
-
   }
 };
 var dropdown;

package/components/dropdown/useKeyboard.d.ts

@@ -10,11 +10,11 @@ export declare enum Direction {
     Up = 0,
     Down = 1
 }
-export declare type MenuKeyboardMethods = {
+export type MenuKeyboardMethods = {
     reset: () => void;
     focus: (item: DropdownItem) => void;
 };
-export declare function useMenuKeyboard(): readonly [readonly [() => void, () => void, (v: boolean) => boolean], (index: number, direction?: Direction | undefined) => void, () => void];
+export declare function useMenuKeyboard(): readonly [readonly [() => void, () => void, (v: boolean) => boolean], (index: number, direction?: Direction) => void, () => void];
 export declare function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>): {
     onMouseEnter(e: MouseEvent): void;
     onMouseLeave(e: MouseEvent): void;

package/components/dropdown/useKeyboard.js

@@ -4,39 +4,34 @@ import { useRecordParent, useRecordItem } from '../../hooks/useRecordComponent';
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { useState } from '../../hooks/useState';
 import { isComponentVNode } from '../utils';
-import { DropdownItem } from './item'; // can not import DropdownMenu from index.ts, otherwise it will cause circle reference
+import { DropdownItem } from './item';
+// can not import DropdownMenu from index.ts, otherwise it will cause circle reference
 // import {DropdownMenu} from './';
-
 import { DropdownMenu } from './menu';
 export var Direction;
-
 (function (Direction) {
   Direction[Direction["Up"] = 0] = "Up";
   Direction[Direction["Down"] = 1] = "Down";
 })(Direction || (Direction = {}));
-
 var ITEM_EVENTS = 'ItemEvents';
 var MENU_KEYBOARD = 'MenuKeyboard';
 export function useMenuKeyboard() {
   var items = [];
   var itemEvents = useRecordParent(ITEM_EVENTS, true);
   var instance = useInstance();
-  var focusIndex = -1; // we can't use the way that DropdownItem push itself to DropdownMenu to collect the items
+  var focusIndex = -1;
+  // we can't use the way that DropdownItem push itself to DropdownMenu to collect the items
   // because it can't guarantee the order
-
   function collect() {
     items.length = 0;
     var children = instance.$lastInput;
-
     var loop = function loop(vNode) {
       if (isComponentVNode(vNode, DropdownItem)) {
         items.push(vNode.children);
       } else {
         var _children = vNode.children;
-
         if (isComponentClass(vNode)) {
           var tag = vNode.tag;
-
           if (tag !== DropdownMenu && !(tag.prototype instanceof DropdownMenu)) {
             loop(_children.$lastInput);
           }
@@ -49,11 +44,9 @@ export function useMenuKeyboard() {
         }
       }
     };
-
     loop(children);
     return children;
   }
-
   onMounted(collect);
   var oldFocusIndex;
   onBeforeUpdate(function () {
@@ -65,52 +58,43 @@ export function useMenuKeyboard() {
     if (oldFocusIndex < 0) return;
     focusByIndex(oldFocusIndex, Direction.Up);
   });
-
   function next(e) {
     e.preventDefault();
     focusByIndex(focusIndex + 1, Direction.Down);
   }
-
   function prev(e) {
     e.preventDefault();
     focusByIndex(focusIndex - 1, Direction.Up);
   }
-
   function focusByIndex(index, direction) {
     var max = items.length - 1;
     index = fixIndex(index, max);
     reset();
     var item = items[index];
     var i = 0;
-
     while (i <= max && item && item.get('disabled')) {
       index = fixIndex(direction === Direction.Down ? index + 1 : index - 1, max);
       item = items[index];
       i++;
-    } // all items are disabled
-
-
+    }
+    // all items are disabled
     if (i > max) return;
     focusIndex = index;
     focusItem(item);
   }
-
   function focusItem(item) {
     itemEvents.get(item).onFocusin();
     var el = findDomFromVNode(item.$lastInput, true);
     var menuEl = findDomFromVNode(instance.$vNode, false);
     scrollToView(el, menuEl);
   }
-
   function reset() {
     var item = items[focusIndex];
-
     if (focusIndex > -1 && item) {
       itemEvents.get(item).onFocusout();
       focusIndex = -1;
     }
   }
-
   function makeEventCall(name) {
     return function (e) {
       if (focusIndex < 0) return;
@@ -118,13 +102,12 @@ export function useMenuKeyboard() {
       itemEvents.get(items[focusIndex])[name]();
     };
   }
-
   provide(MENU_KEYBOARD, {
     reset: reset,
     focus: function focus(item) {
       // reset();
-      var index = items.indexOf(item); // if (index === -1) debugger
-
+      var index = items.indexOf(item);
+      // if (index === -1) debugger
       focusIndex = index;
       focusItem(item);
     }
@@ -162,31 +145,26 @@ export function useItemKeyboard(itemEvents) {
     isFocus: isFocus
   };
 }
-
 function fixIndex(index, max) {
   if (index > max) {
     index = 0;
   } else if (index < 0) {
     index = max;
   }
-
   return index;
 }
-
 function scrollToView(el, menuEl) {
   var elRect = el.getBoundingClientRect();
   var pEl = getScrollParent(el.parentElement, menuEl);
   var pElRect = pEl.getBoundingClientRect();
   var bottomOverflowDistance = elRect.bottom - pElRect.bottom;
   var topOverflowDistance = elRect.top - pElRect.top;
-
   if (bottomOverflowDistance > 0) {
     pEl.scrollTop += bottomOverflowDistance;
   } else if (topOverflowDistance < 0) {
     pEl.scrollTop += topOverflowDistance;
   }
 }
-
 function getScrollParent(node, breakEl) {
   if (node === breakEl || node.scrollHeight > node.clientHeight) return node;
   return getScrollParent(node.parentElement, breakEl);

package/components/dropdown/usePosition.d.ts

@@ -1,8 +1,9 @@
 import { Feedback } from '../position';
-export declare type FeedbackCallback = (feedback: Feedback) => void;
+export type FeedbackCallback = (feedback: Feedback) => void;
 export declare function usePosition(): {
     handle: (callback: FeedbackCallback) => void;
     positioned: {
         value: boolean;
     };
 };
+export declare function usePositionForDropdownMenu(): void;

package/components/dropdown/usePosition.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { useInstance, findDomFromVNode } from 'intact-vue-next';
+import { useInstance, findDomFromVNode, onBeforeUnmount } from 'intact-vue-next';
 import { position } from '../position';
 import { noop, isObject, isFunction } from 'intact-shared';
 import { isEqualObject } from '../utils';
@@ -15,29 +15,31 @@ export function usePosition() {
   });
   ['of', 'position'].forEach(function (item) {
     instance.watch(item, function (newValue, oldValue) {
-      if (!instance.get('value') || // return if object is the same
-      isObject(newValue) && isObject(oldValue) && // is not event object
+      if (!instance.get('value') ||
+      // return if object is the same
+      isObject(newValue) && isObject(oldValue) &&
+      // is not event object
       !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) return;
       handle(noop);
     }, {
       presented: true,
       inited: true
     });
-  }); // watch container, it is not commonly used
-
+  });
+  // watch container, it is not commonly used
   instance.watch('container', function (newValue, oldValue) {
-    if (!instance.get('value') || // return if function is the same. Not rigorous!
+    if (!instance.get('value') ||
+    // return if function is the same. Not rigorous!
     isFunction(newValue) && isFunction(oldValue) && newValue.toString() === oldValue.toString()) return;
     handle(noop);
   }, {
     presented: true,
     inited: true
-  }); // if the dropdown is nested, we must show child after parent has positioned
-
+  });
+  // if the dropdown is nested, we must show child after parent has positioned
   function p(ofElement, parentFeedback) {
     var feedback;
     var pos = instance.get('position');
-
     switch (pos) {
       case 'left':
       case 'left':
@@ -46,21 +48,18 @@ export function usePosition() {
           at: 'left center'
         };
         break;
-
       case 'bottom':
         pos = {
           my: 'center top+10',
           at: 'center bottom'
         };
         break;
-
       case 'right':
         pos = {
           my: 'left+10 center',
           at: 'right center'
         };
         break;
-
       case 'top':
         pos = {
           my: 'center bottom-10',
@@ -68,7 +67,6 @@ export function usePosition() {
         };
         break;
     }
-
     position(findDomFromVNode(instance.menuVNode, true), _extends({
       my: 'left top+8',
       at: 'left bottom',
@@ -83,32 +81,26 @@ export function usePosition() {
     instance.trigger('positioned', parentFeedback || feedback);
     return parentFeedback || feedback;
   }
-
   function handle(callback) {
     var _of = instance.get('of');
-
     if (_of === 'parent') {
       var parent = instance.dropdown;
-
       if (process.env.NODE_ENV !== 'production') {
         if (!parent) {
           throw new Error('The dropdown has not parent, so you can not use `parent` as `of`.');
         }
       }
-
       var ofElement = findDomFromVNode(parent.menuVNode, true);
-
       if (parent.positionHook.positioned.value) {
         callback(p(ofElement, null));
       } else {
         // wait the parent has positioned
         var fn = function fn(feedback) {
-          parent.off('positioned', fn); // let the child menu has the same transtion with parent menu,
+          parent.off('positioned', fn);
+          // let the child menu has the same transtion with parent menu,
           // when them show together
-
           callback(p(ofElement, feedback));
         };
-
         parent.on('positioned', fn);
       }
     } else if (_of === 'self') {
@@ -117,9 +109,19 @@ export function usePosition() {
       callback(p(_of, null));
     }
   }
-
   return {
     handle: handle,
     positioned: positioned
   };
+}
+export function usePositionForDropdownMenu() {
+  var instance = useInstance();
+  /**
+   * Meybe the DropdownMenu has changed by specified key
+   * so, we must reset the positioned.value beforeUnmount
+   * #956
+   */
+  onBeforeUnmount(function () {
+    instance.dropdown.positionHook.positioned.value = false;
+  });
 }

package/components/dropdown/useTransition.js

@@ -1,7 +1,6 @@
 import { addTransitionClass, removeTransitionClass, whenTransitionEnds } from 'intact-vue-next';
 export function useTransition(getFeedback) {
   var transition = 'k-slidedown';
-
   function onEnter(el, done) {
     getFeedback(function (feedback) {
       transition = getTransition(feedback);
@@ -17,11 +16,9 @@ export function useTransition(getFeedback) {
       });
     });
   }
-
   function onEnterCancelled(el) {
     removeTransitionClass(el, transition + "-enter-active");
   }
-
   function onLeave(el, done) {
     // maybe the position has changed, so we re-get it
     getFeedback(function (feedback) {
@@ -34,12 +31,10 @@ export function useTransition(getFeedback) {
       });
     });
   }
-
   function onLeaveCancelled(el) {
     removeTransitionClass(el, transition + "-leave-to");
     removeTransitionClass(el, transition + "-leave-active");
   }
-
   return {
     onEnter: onEnter,
     onEnterCancelled: onEnterCancelled,
@@ -47,11 +42,9 @@ export function useTransition(getFeedback) {
     onLeaveCancelled: onLeaveCancelled
   };
 }
-
 function getTransition(feedback) {
   var horizontal = feedback.horizontal;
   var vertical = feedback.vertical;
-
   if (feedback.important === 'horizontal') {
     if (horizontal === 'left') {
       return 'k-slideright';
@@ -73,6 +66,5 @@ function getTransition(feedback) {
       return 'k-slideleft';
     }
   }
-
   return 'k-slidedown';
 }