@king-design/vue 2.0.12 → 2.0.13

package/__tests__/components/dropdown.spec.ts

@@ -3,10 +3,18 @@ import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
 import {Dropdown, DropdownMenu, DropdownItem} from '../../';
 
 describe('Dropdown', () => {
+    let container: HTMLDivElement;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+    afterEach(() => {
+        render(null, container);
+        document.body.removeChild(container);
+    });
+
     it('should save original events', async () => {
         const click = sinon.spy();
-        const container = document.createElement('div');
-        document.body.appendChild(container);
         const vue = createApp({
             template: `
                 <div>
@@ -36,14 +44,9 @@ describe('Dropdown', () => {
         await wait();
         expect(click.callCount).to.eql(1);
         expect(getElement('.k-dropdown-menu')).to.be.exist;
-
-        render(null, container);
-        document.body.removeChild(container);
     });
 
     it('handle trigger without props', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
         const vue = createApp({
             template: `
                 <div>
@@ -65,8 +68,28 @@ describe('Dropdown', () => {
         vue.$el.querySelector('button').click();
         await wait();
         expect(getElement('.k-dropdown-menu')).to.be.exist;
+    });
 
-        render(null, container);
-        document.body.removeChild(container);
+    it('click trigger', async () => {
+        const vue = createApp({
+            template: `
+                <div>
+                    <Dropdown trigger="click">
+                        <button>click</button>
+                        <DropdownMenu>
+                            <DropdownItem>item 1</DropdownItem>
+                            <DropdownItem>item 2</DropdownItem>
+                            <DropdownItem>item 3</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
+            `,
+            components: {
+                Dropdown, DropdownMenu, DropdownItem
+            },
+        }).mount(container);
+
+        // FIXME: The bug can not be reproduced by code, only by manual
+        // dispatchEvent(vue.$el.querySelector('button'), 'click');
     });
 });

package/components/code/index.d.ts

@@ -1,5 +1,5 @@
 import { Component, TypeDefs } from 'intact-vue-next';
-import type { editor } from 'monaco-editor';
+import type { editor, default as monaco } from 'monaco-editor';
 import type { Events } from '../types';
 export interface CodeProps {
     value?: string;
@@ -11,7 +11,7 @@ export interface CodeProps {
     options?: editor.IStandaloneEditorConstructionOptions;
 }
 export interface CodeEvents {
-    ready: [editor.IStandaloneCodeEditor, typeof editor];
+    ready: [editor.IStandaloneCodeEditor, typeof editor, typeof monaco];
 }
 export declare class Code extends Component<CodeProps, CodeEvents> {
     static template: string | import("intact").Template<any>;

package/components/code/useEditor.js

@@ -29,7 +29,7 @@ export function useEditor() {
       }, options));
       watch(Editor, codeEditor);
       loading.set(false);
-      instance.trigger('ready', codeEditor, Editor);
+      instance.trigger('ready', codeEditor, Editor, monaco);
     });
   });
   onBeforeUnmount(function () {

package/components/drawer/index.spec.js

@@ -1,9 +1,14 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Component } from 'intact-vue-next';
+import { Drawer } from '.';
+import { Dialog } from '../dialog';
 describe('Drawer', function () {
   afterEach(function (done) {
     unmount();
@@ -159,4 +164,47 @@ describe('Drawer', function () {
       }
     }, _callee4);
   })));
+  it('nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount4, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context5;
+
+                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(_context5 = [this]).call(_context5, args)) || this;
+                _this.Dialog = Dialog;
+                _this.Drawer = Drawer;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dialog, Drawer} = this;\n                <Drawer value={true}>\n                    <Dialog value={true} ref=\"dialog\">Dialog</Dialog>\n                </Drawer>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
 });

package/components/dropdown/dropdown.d.ts

@@ -8,7 +8,7 @@ export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
 export declare const ROOT_DROPDOWN = "RootDropdown";
 export interface DropdownProps {
-    trigger?: 'hover' | 'click' | 'contextmenu';
+    trigger?: 'hover' | 'click' | 'contextmenu' | 'focus';
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
@@ -52,6 +52,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onEnter;
     private onContextMenu;
     private onLeave;
+    private initEventCallbacks;
     private callOriginalCallback;
     private normalizeTriggerProps;
 }

package/components/dropdown/dropdown.js

@@ -14,7 +14,7 @@ import { usePosition } from './usePosition';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
-  trigger: ['hover', 'click', 'contextmenu'],
+  trigger: ['hover', 'click', 'contextmenu', 'focus'],
   disabled: Boolean,
   value: Boolean,
   position: [Object, 'left', 'bottom', 'right', 'top'],
@@ -154,6 +154,33 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     this.hide();
   };
 
+  _proto.initEventCallbacks = function initEventCallbacks(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;
+  };
+
   _proto.callOriginalCallback = function callOriginalCallback(name, e) {
     var callback = this.triggerProps[name];
     var callbackOnDropdown = this.get(name);
@@ -229,19 +256,7 @@ Dropdown.template = function () {
       trigger = _children[0],
       menu = _children[1];
   var triggerType = this.get('trigger');
-  var props = {};
-
-  if (triggerType !== 'contextmenu') {
-    props['ev-click'] = this.onEnter;
-
-    if (triggerType === 'hover') {
-      props['ev-mouseenter'] = this.onEnter;
-      props['ev-mouseleave'] = this.onLeave;
-    }
-  } else {
-    props['ev-contextmenu'] = this.onContextMenu;
-  }
-
+  var props = this.initEventCallbacks(triggerType);
   var clonedTrigger = isTextChildren(trigger) ? createVNode('span', null, trigger) : directClone(trigger);
   var triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ); // add a className for opening status
 
@@ -275,7 +290,9 @@ function useDocumentClickForDropdown(dropdown) {
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
     // case 1: if click an trigger and the trigger type is hover, ignore it
     // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
+    // case 3: if click on trigger and the trigger type is focus, do nothing 
     var trigger = dropdown.get('trigger');
+    if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
 
     if (isHover || trigger === 'contextmenu') {

package/components/dropdown/index.spec.js

@@ -483,4 +483,62 @@ describe('Dropdown', function () {
       }
     }, _callee9);
   })));
+  it('trigger: focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount9, instance;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context13;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+                _this4.Dropdown = Dropdown;
+                _this4.DropdownItem = DropdownItem;
+                _this4.DropdownMenu = DropdownMenu;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0];
+            dispatchEvent(instance.refs.trigger, 'focusin');
+            _context14.next = 6;
+            return wait(500);
+
+          case 6:
+            expect(getElement('.k-dropdown-menu')).to.be.exist; // clicking anywhere should not hide menu
+
+            dispatchEvent(document, 'click');
+            _context14.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            dispatchEvent(instance.refs.trigger, 'focusout');
+            _context14.next = 14;
+            return wait(700);
+
+          case 14:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 15:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee10);
+  })));
 });

package/components/portal.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact-vue-next';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
+import { BaseDialog } from './dialog/base';
 var typeDefs = {
   container: [String, Function]
 };
@@ -96,8 +97,13 @@ export var Portal = /*#__PURE__*/function (_Component) {
     }
 
     if (!this.container) {
-      // find the closest dialog if exists
-      this.container = parentDom.closest('.k-dialog') || document.body;
+      if (this.$senior instanceof BaseDialog) {
+        // Dialog and Drawer must be inserted into document.body
+        this.container = document.body;
+      } else {
+        // find the closest dialog if exists
+        this.container = parentDom.closest('.k-dialog') || document.body;
+      }
       /**
        * @FIXME: We cannot get parent ref from sub component in Vue
        */
@@ -108,6 +114,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // } else {
       // this.container = document.body;
       // }
+
     }
   };
 

package/components/select/styles.js

@@ -94,7 +94,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "5px 8px",
+    padding: "3px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -188,7 +188,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

package/components/table/row.d.ts

@@ -23,6 +23,7 @@ export interface TableRowProps {
     onToggleSpreadRow: (key: TableRowKey) => void;
     onBeforeUnmount: (key: TableRowKey) => void;
     offsetMap: Record<Key, number>;
+    animation: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;
     onRowDragStart: DragCallback;

package/components/table/row.vdt.js

@@ -5,7 +5,7 @@ import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { TableCell } from './cell';
-import { createElementVNode, className as cx } from 'intact';
+import { createElementVNode, className as cx, createFragment } from 'intact';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -34,7 +34,8 @@ export default function ($props, $blocks, $__proto__) {
       key = _this$get.key,
       offsetMap = _this$get.offsetMap,
       draggable = _this$get.draggable,
-      draggingKey = _this$get.draggingKey;
+      draggingKey = _this$get.draggingKey,
+      animation = _this$get.animation;
 
   var classNameObj = (_classNameObj = {
     'k-disabled': disabled,
@@ -110,16 +111,14 @@ export default function ($props, $blocks, $__proto__) {
       'key': columnKey
     }, columnKey));
   });
-
-  var rows = _$cc(TransitionGroup, {
+  var rows = animation ? _$cc(TransitionGroup, {
     'name': 'k-fade-expand',
     'move': false,
     'children': vNodes
-  });
+  }) : createFragment(vNodes, 8);
   /* const rows = vNodes; */
   // for performance, no normalize
 
-
   return createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
     'data-key': key,
     'ev-mouseenter': this.onMouseEnter,

package/components/table/table.d.ts

@@ -34,6 +34,7 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     minColWidth?: number;
     widthStoreKey?: string;
     draggable?: boolean;
+    animation?: boolean | [boolean, boolean];
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K];

package/components/table/table.js

@@ -56,7 +56,8 @@ var typeDefs = {
   resizable: Boolean,
   minColWidth: Number,
   widthStoreKey: String,
-  draggable: Boolean
+  draggable: Boolean,
+  animation: [Boolean, Array]
 };
 
 var defaults = function defaults() {
@@ -69,7 +70,8 @@ var defaults = function defaults() {
     rowExpandable: true,
     childrenKey: 'children',
     indent: 32,
-    minColWidth: 40
+    minColWidth: 40,
+    animation: true
   };
 };