@king-design/vue 2.1.4 → 2.1.5

package/components/dropdown/dropdown.js

@@ -24,6 +24,7 @@ var typeDefs = {
   container: [String, Function],
   collison: ['none', 'fit', 'flip', 'flipfit', Array]
 };
+
 var defaults = function defaults() {
   return {
     trigger: 'hover',
@@ -31,6 +32,7 @@ var defaults = function defaults() {
     value: false
   };
 };
+
 var events = {
   shouldFocus: true,
   show: true,
@@ -43,12 +45,16 @@ var events = {
 };
 export var Dropdown = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Dropdown, _Component);
+
   function Dropdown() {
     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.menuVNode = null;
     _this.dropdown = null;
@@ -58,56 +64,71 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.timer = undefined;
     return _this;
   }
+
   var _proto = Dropdown.prototype;
+
   _proto.init = function init() {
     var _this2 = this;
+
     provide(DROPDOWN, this);
     this.dropdown = inject(DROPDOWN, null);
     useDocumentClickForDropdown(this);
-    useHideLastMenuOnShow(this);
-    // is root dropdown or not
+    useHideLastMenuOnShow(this); // is root dropdown or not
+
     var rootDropdown = this.rootDropdown = inject(ROOT_DROPDOWN, null);
+
     if (!rootDropdown) {
       provide(ROOT_DROPDOWN, this);
     }
-    useShowHideEvents();
-    // if disabled, always set value to false
+
+    useShowHideEvents(); // if disabled, always set value to false
+
     this.watch('disabled', function (disabled) {
       if (disabled) {
         _this2.set('value', false);
       }
     });
   };
+
   _proto.show = function show(shouldFocus) {
     var _this3 = this;
+
     if (shouldFocus === void 0) {
       shouldFocus = false;
     }
+
     if (this.get('disabled')) return;
     clearTimeout(this.timer);
-    this.set('value', true);
-    // should show parent dropdown
+    this.set('value', true); // should show parent dropdown
+
     var parentDropdown = this.dropdown;
+
     if (parentDropdown) {
       parentDropdown.show();
     }
+
     if (shouldFocus) {
       nextTick(function () {
         _this3.focusFirst();
       });
     }
   };
+
   _proto.hide = function hide(immediately) {
     var _this4 = this;
+
     if (immediately === void 0) {
       immediately = false;
     }
+
     if (this.get('disabled')) return;
     if (!this.get('value')) return;
     var showedDropdown = this.showedDropdown;
+
     if (showedDropdown) {
       showedDropdown.hide(immediately);
     }
+
     if (immediately) {
       this.set('value', false);
     } else {
@@ -117,61 +138,76 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
       }, 200);
     }
   };
+
   _proto.focusFirst = function focusFirst() {
     this.trigger('shouldFocus');
   };
+
   _proto.position = function position(callback) {
     if (callback === void 0) {
       callback = noop;
     }
+
     return this.positionHook.handle(callback);
   };
+
   _proto.onEnter = function onEnter(e) {
     this.show();
     this.trigger(e.type, e);
   };
+
   _proto.onContextMenu = function onContextMenu(e) {
     e.preventDefault();
     this.set('of', e);
     this.show();
     this.trigger('contextmenu', e);
   };
+
   _proto.onLeave = function onLeave(e) {
     this.hide();
     this.trigger(e.type, e);
   };
+
   _proto.initEventCallbacks = function initEventCallbacks() {
     var trigger = this.get('trigger');
     var props = {};
+
     switch (trigger) {
       case 'focus':
         props['ev-focusin'] = this.onEnter;
         props['ev-focusout'] = this.onLeave;
         break;
+
       case 'contextmenu':
         props['ev-contextmenu'] = this.onContextMenu;
         break;
+
       default:
         props['ev-click'] = this.onEnter;
+
         if (trigger === 'hover') {
           props['ev-mouseenter'] = this.onEnter;
           props['ev-mouseleave'] = this.onLeave;
         }
+
         break;
     }
+
     return props;
   };
+
   return Dropdown;
 }(Component);
-// for intact-react, intact-vue-next and intact-vue
 Dropdown.$doubleVNodes = true;
 Dropdown.typeDefs = typeDefs;
 Dropdown.defaults = defaults;
 Dropdown.events = events;
+
 Dropdown.template = function () {
   var _cx;
-  var children = this.get('children');
-  // ignore whitespaces between elements in Vue
+
+  var children = this.get('children'); // ignore whitespaces between elements in Vue
+
   if (this.$isVue || this.$isVueNext) {
     if (Array.isArray(children)) {
       children = _filterInstanceProperty(children).call(children, function (child) {
@@ -179,19 +215,23 @@ Dropdown.template = function () {
       });
     }
   }
+
   if (process.env.NODE_ENV !== 'production') {
     if (!Array.isArray(children) || children.length !== 2) {
       throw new Error('Dropdown must receive two children, ' + 'one is a trigger and the another one is DropdownMenu.' + (Array.isArray(children) && children.length > 2 ? ' Please check the children, maybe you should remove the whitespaces.' : ''));
     }
   }
+
   var _children = children,
-    trigger = _children[0],
-    menu = _children[1];
+      trigger = _children[0],
+      menu = _children[1];
   var props = this.initEventCallbacks();
+
   var _this$get = this.get(),
-    className = _this$get.className,
-    value = _this$get.value,
-    container = _this$get.container;
+      className = _this$get.className,
+      value = _this$get.value,
+      container = _this$get.container;
+
   className = cx((_cx = {
     'k-dropdown-open': value
   }, _cx[className] = !!className, _cx));
@@ -203,55 +243,71 @@ Dropdown.template = function () {
     container: container
   })];
 };
+
 __decorate([bind], Dropdown.prototype, "position", null);
+
 __decorate([bind], Dropdown.prototype, "onEnter", null);
+
 __decorate([bind], Dropdown.prototype, "onContextMenu", null);
+
 __decorate([bind], Dropdown.prototype, "onLeave", null);
+
 function useDocumentClickForDropdown(dropdown) {
   var elementRef = function elementRef() {
     return findDomFromVNode(dropdown.menuVNode, true);
   };
+
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
-      // case 1: if click a trigger and its trigger type is hover, ignore it
-      // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
-      // case 3: if click on a trigger and its trigger type is focus, do nothing 
-      // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
-      var trigger = dropdown.get('trigger');
-      if (trigger === 'focus') return;
-      var isHover = trigger === 'hover';
-      if (isHover || trigger === 'contextmenu') {
-        var triggerDom = findDomFromVNode(dropdown.$lastInput, true);
-        var target = e.target;
-        if (containsOrEqual(triggerDom, target)) {
-          if (isHover) return;
-          if (!isHover && e.type === 'contextmenu') return;
-        }
+    // case 1: if click a trigger and its trigger type is hover, ignore it
+    // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
+    // case 3: if click on a trigger and its trigger type is focus, do nothing 
+    // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
+    var trigger = dropdown.get('trigger');
+    if (trigger === 'focus') return;
+    var isHover = trigger === 'hover';
+
+    if (isHover || trigger === 'contextmenu') {
+      var triggerDom = findDomFromVNode(dropdown.$lastInput, true);
+      var target = e.target;
+
+      if (containsOrEqual(triggerDom, target)) {
+        if (isHover) return;
+        if (!isHover && e.type === 'contextmenu') return;
       }
-      if (isSubDropdownElement(e.target, dropdown)) return;
-      dropdown.hide(true);
-    }, true),
-    addDocumentClick = _useDocumentClick[0],
-    removeDocumentClick = _useDocumentClick[1];
+    }
+
+    if (isSubDropdownElement(e.target, dropdown)) return;
+    dropdown.hide(true);
+  }, true),
+      addDocumentClick = _useDocumentClick[0],
+      removeDocumentClick = _useDocumentClick[1];
+
   dropdown.on('show', addDocumentClick);
   dropdown.on('hide', removeDocumentClick);
 }
+
 function isSubDropdownElement(elem, dropdown) {
   var showedDropdown = dropdown.showedDropdown;
   if (!showedDropdown) return false;
   var subMenuElement = findDomFromVNode(showedDropdown.menuVNode, true);
+
   if (containsOrEqual(subMenuElement, elem)) {
     return true;
   }
+
   return isSubDropdownElement(elem, showedDropdown);
 }
+
 function useHideLastMenuOnShow(dropdown) {
   var parentDropdown = dropdown.dropdown;
   dropdown.on('show', function () {
     if (parentDropdown) {
       var showed = parentDropdown.showedDropdown;
+
       if (showed && showed !== dropdown) {
         showed.hide(true);
       }
+
       parentDropdown.showedDropdown = dropdown;
     }
   });

package/components/dropdown/index.js

@@ -1,8 +1,7 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import { Dropdown as BaseDropdown } from './dropdown';
 import { DropdownMenu as BaseDropdownMenu } from './menu';
-export * from './item';
-// Don't export the generic type class, because it will break down the type inference 
+export * from './item'; // Don't export the generic type class, because it will break down the type inference 
 // declare class _Dropdown extends BaseDropdown<
 // DropdownProps,
 // DropdownEvents,
@@ -16,17 +15,22 @@ export * from './item';
 // export const Dropdown = BaseDropdown as typeof _Dropdown;
 // export const DropdownMenu = BaseDropdownMenu as typeof _DropdownMenu;
 // above codes can not be used as instance type
+
 export var Dropdown = /*#__PURE__*/function (_BaseDropdown) {
   _inheritsLoose(Dropdown, _BaseDropdown);
+
   function Dropdown() {
     return _BaseDropdown.apply(this, arguments) || this;
   }
+
   return Dropdown;
 }(BaseDropdown);
 export var DropdownMenu = /*#__PURE__*/function (_BaseDropdownMenu) {
   _inheritsLoose(DropdownMenu, _BaseDropdownMenu);
+
   function DropdownMenu() {
     return _BaseDropdownMenu.apply(this, arguments) || this;
   }
+
   return DropdownMenu;
 }(BaseDropdownMenu);