@king-design/vue 3.1.4-beta.1 → 3.1.4

package/components/dropdown/dropdown.js

@@ -3,7 +3,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { __decorate } from "tslib";
-import { Component, createVNode as h, provide, inject, findDomFromVNode, nextTick } from 'intact-vue-next';
+import { Component, createVNode as h, directClone, provide, inject, findDomFromVNode, nextTick } from 'intact-vue-next';
 import { bind, getRestProps } from '../utils';
 import { noop } from 'intact-shared';
 import { cx } from '@emotion/css';
@@ -25,7 +25,6 @@ var typeDefs = {
   container: [String, Function],
   collison: ['none', 'fit', 'flip', 'flipfit', Array]
 };
-
 var defaults = function defaults() {
   return {
     trigger: 'hover',
@@ -33,7 +32,6 @@ var defaults = function defaults() {
     value: false
   };
 };
-
 var events = {
   shouldFocus: true,
   show: true,
@@ -46,16 +44,12 @@ 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;
@@ -66,71 +60,56 @@ 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 {
@@ -140,76 +119,61 @@ 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) {
@@ -217,23 +181,24 @@ 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];
+  /**
+   * In vue-legacy, if the menu is TooltipContent, the menu will be InUsed when update,
+   * so we clone it here, #954
+   */
+  menu = directClone(menu);
   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;
   var k = this.config.k;
   className = cx((_cx = {}, _cx[k + "-dropdown-open"] = value, _cx[className] = !!className, _cx));
   this.menuVNode = menu;
@@ -244,71 +209,55 @@ 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,7 +1,8 @@
 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,
@@ -15,22 +16,17 @@ export * from './item'; // Don't export the generic type class, because it will
 // 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);