@king-design/intact 2.0.12 → 2.0.13-beta.0

package/components/drawer/index.spec.ts

@@ -2,6 +2,9 @@ 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';
+import {Drawer} from '.';
+import {Dialog} from '../dialog';
 
 describe('Drawer', () => {
     afterEach((done) => {
@@ -67,4 +70,21 @@ describe('Drawer', () => {
         await wait(500);
         expect(getElement('.k-drawer')).to.be.undefined;
     });
+
+    it('nested dialog', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Dialog, Drawer} = this;
+                <Drawer value={true}>
+                    <Dialog value={true} ref="dialog">Dialog</Dialog>
+                </Drawer>
+            `;
+            private Dialog = Dialog;
+            private Drawer = Drawer;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait();
+        expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+    });
 });

package/components/dropdown/demos/trigger.md

@@ -3,11 +3,13 @@ title: 触发方式
 order: 0
 ---
 
-`Dropdown`提供了两种触发方式来弹窗菜单，`hover`悬停触发（默认），`click`点击触发。
+`Dropdown`提供了两种触发方式来弹窗菜单，`hover`悬停触发（默认），`click`点击触发，当使用`Input`组件时，还可以
+指定为`foucs`来触发。
+
 通过`trigger`属性来指定它们。
 
 ```vdt
-import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
+import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 
 <div>
     <Dropdown>
@@ -31,6 +33,15 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <DropdownItem>item 3</DropdownItem>
         </DropdownMenu>
     </Dropdown>
+
+    <Dropdown trigger="focus">
+        <Input placeholder="focus" />
+        <DropdownMenu>
+            <DropdownItem>item 1</DropdownItem>
+            <DropdownItem>item 2</DropdownItem>
+            <DropdownItem>item 3</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
 </div>
 ```
 

package/components/dropdown/dropdown.ts

@@ -31,7 +31,7 @@ export const DROPDOWN = 'Dropdown';
 export 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'
@@ -51,7 +51,7 @@ export interface DropdownEvents {
 export interface DropdownBlocks { }
 
 const typeDefs: Required<TypeDefs<DropdownProps>> = {
-    trigger: ['hover', 'click', 'contextmenu'],
+    trigger: ['hover', 'click', 'contextmenu', 'focus'],
     disabled: Boolean,
     value: Boolean,
     position: [Object, 'left', 'bottom', 'right', 'top'],
@@ -106,17 +106,7 @@ export class Dropdown<
 
         const [trigger, menu] = children as DropdownChildren;
         const triggerType = this.get('trigger');
-        const props: Record<string, Function> = {};
-
-        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;
-        }
+        const props = this.initEventCallbacks(triggerType); 
 
         const clonedTrigger = isTextChildren(trigger) ? 
             createVNode('span', null, trigger) :
@@ -235,6 +225,29 @@ export class Dropdown<
         this.hide();
     }
 
+    private initEventCallbacks(trigger: DropdownProps['trigger']) {
+        const props: Record<string, Function> = {};
+
+        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;
+    }
+
     private callOriginalCallback(name: string, e: MouseEvent) {
         const callback = this.triggerProps[name];
         const callbackOnDropdown = this.get<Function>(name);
@@ -283,7 +296,10 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
     const [addDocumentClick, removeDocumentClick] = useDocumentClick(elementRef, (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 
         const trigger = dropdown.get('trigger');
+        if (trigger === 'focus') return;
+
         const isHover = trigger === 'hover';
         if (isHover || trigger === 'contextmenu') {
             const triggerDom = findDomFromVNode(dropdown.$lastInput!, true) as Element;

package/components/dropdown/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
+| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"contextmenu"` | `"focus"` | `"hover"` |
 | disabled | 是否禁用整个菜单 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |

package/components/dropdown/index.spec.ts

@@ -280,4 +280,38 @@ describe('Dropdown', () => {
         await wait();
         expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
     });
+
+    it('trigger: focus', async() => {
+        class Demo extends Component {
+            static template = `
+                const {Dropdown, DropdownMenu, DropdownItem} = this;
+                <div>
+                    <Dropdown trigger="focus">
+                        <input ref="trigger" />
+                        <DropdownMenu>
+                            <DropdownItem>test1</DropdownItem>
+                            <DropdownItem>test2</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
+            `;
+            private Dropdown = Dropdown;
+            private DropdownItem = DropdownItem;
+            private DropdownMenu = DropdownMenu;
+        }
+        const [instance] = mount(Demo);
+
+        dispatchEvent(instance.refs.trigger, 'focusin');
+        await wait(500);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        // clicking anywhere should not hide menu
+        dispatchEvent(document, 'click');
+        await wait(500);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        dispatchEvent(instance.refs.trigger, 'focusout');
+        await wait(700);
+        expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+    });
 });

package/components/portal.ts

@@ -14,6 +14,7 @@ import {
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
 import type {Dialog} from './dialog';
+import {BaseDialog} from './dialog/base';
 
 export interface PortalProps {
     container?: Container
@@ -131,8 +132,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             }
         }
         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

package/components/select/demos/format.md

@@ -34,7 +34,7 @@ import {Select, Option, Icon} from 'kpc';
             </Option>
             <b:value args="[value, label]">
                 <Icon class={value} style="vertical-align: middle;" />
-                <span class="c-middle">{value}</span>
+                <span class="middle">{value}</span>
             </b:value>
         </Select>
     </div>
@@ -67,8 +67,9 @@ import {Select, Option, Icon} from 'kpc';
     height 60px
     line-height 60px
     text-align center
-.c-middle
+.middle
     margin-left 6px
+    vertical-align middle
 .label
     display inline-block
     width 100px

package/components/select/styles.ts

@@ -58,7 +58,7 @@ const defaults = deepDefaults(
         },
         tag: {
             margin: `3px 8px 3px 0`,
-            padding: `5px 8px`,
+            padding: `3px 8px`,
             get borderRadius() { return theme.borderRadius },
             get bgColor() { return theme.color.bg },
             disabledBgColor: '#eee',
@@ -225,6 +225,7 @@ export default function makeStyles() {
         .k-select-values {
             display: inline-block;
             margin-right: -${getRight(select.tag.margin)};
+            width: 100%;
             &.k-with-values {
                 margin: 0;
             }
@@ -236,16 +237,20 @@ export default function makeStyles() {
             background: ${select.tag.bgColor};
             border-radius: ${select.tag.borderRadius};
             margin: ${select.tag.margin};
-            line-height: 1;
+            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};
         }
-        .k-select-input {
-            margin-right: ${getRight(select.tag.margin)};
-        }
+        // .k-select-input {
+            // margin-right: ${getRight(select.tag.margin)};
+        // }
 
         // size
         ${sizes.map(size => {

package/components/timepicker/index.ts

@@ -9,6 +9,7 @@ export class Timepicker<
     Multipe extends boolean = false,
     Range extends boolean = false,
 > extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
+    static $doubleVNodes = true;
     static template(this: Timepicker) {
         const props = this.get();
         if (props.step && !props.range) {

package/components/tooltip/demos/trigger.md

@@ -3,11 +3,11 @@ title: 触发方式
 order: 2
 ---
 
-使用`trigger`指定触发方式，`click`点击触发，`hover`悬浮触发，默认为`hover`，在悬浮触发情况下，
+使用`trigger`指定触发方式，`click`点击触发，`hover`悬浮触发，`foucs`聚焦触发，默认为`hover`，在悬浮触发情况下，
 鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`canHover`属性
 
 ```vdt
-import {Tooltip, ButtonGroup, Button} from 'kpc';
+import {Tooltip, ButtonGroup, Button, Input} from 'kpc';
 
 <ButtonGroup>
     <Tooltip content="hover">
@@ -19,5 +19,8 @@ import {Tooltip, ButtonGroup, Button} from 'kpc';
     <Tooltip hoverable content="the text can be hovered">
         <Button>hoverable</Button>
     </Tooltip>
+    <Tooltip trigger="focus" content="foucs">
+        <Input placeholder="focus" />
+    </Tooltip>
 </ButtonGroup>
 ```

package/components/tooltip/index.md

@@ -9,7 +9,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
+| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"focus"` | `"hover"` |
 | disabled | 是否禁用整个菜单 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |

package/es/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';
+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/es/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/es/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/es/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/es/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';
 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/es/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/es/components/timepicker/index.d.ts

@@ -3,6 +3,7 @@ import { TimepickerProps, TimepickerEvents, TimepickerBlocks } from './constants
 import { SelectPicker } from './selectPicker';
 export type { TimepickerProps, TimepickerEvents, TimepickerBlocks };
 export declare class Timepicker<Multipe extends boolean = false, Range extends boolean = false> extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
+    static $doubleVNodes: boolean;
     static template(this: Timepicker): import("intact").VNode<typeof SelectPicker>;
     static typeDefs: Required<import("intact").TypeDefs<TimepickerProps<boolean, boolean>>>;
 }

package/es/components/timepicker/index.js

@@ -35,4 +35,5 @@ export var Timepicker = /*#__PURE__*/function (_Component) {
 // export const Timepicker: typeof _Timepicker = functionalWrapper ?
 // functionalWrapper(Wrapper) : Wrapper;
 
+Timepicker.$doubleVNodes = true;
 Timepicker.typeDefs = typeDefs;

package/es/hooks/useDocumentClick.js

@@ -1,12 +1,38 @@
 import { onMounted, onUnmounted } from 'intact';
-import { isFunction } from 'intact-shared';
+import { isFunction } from 'intact-shared'; // @reference: Vue3.0
+
+var getNow = Date.now; // Determine what event timestamp the browser is using. Annoyingly, the
+// timestamp can either be hi-res (relative to page load) or low-res
+// (relative to UNIX epoch), so in order to compare time we have to use the
+// same timestamp type when saving the flush timestamp.
+
+if (getNow() > document.createEvent('Event').timeStamp) {
+  // if the low-res timestamp which is bigger than the event timestamp
+  // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+  // and we need to use the hi-res version for event listeners as well.
+  getNow = function getNow() {
+    return performance.now();
+  };
+} // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
+// and does not fire microtasks in between event propagation, so safe to exclude.
+
+
+var ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
+var skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
 export function useDocumentClick(ref, callback, manual) {
   if (manual === void 0) {
     manual = false;
   }
 
   var onDocumentClick = function onDocumentClick(e) {
-    if (e._ignore) return;
+    if (e._ignore) return; // https://github.com/ksc-fe/kpc/issues/788
+
+    var timeStamp = e.timeStamp || getNow();
+
+    if (!skipTimestampCheck && onDocumentClick.timeStamp > timeStamp + 1) {
+      return;
+    }
+
     var target = e.target;
     var elem = isFunction(ref) ? ref() : ref.value;
     if (containsOrEqual(elem, target)) return;
@@ -14,6 +40,7 @@ export function useDocumentClick(ref, callback, manual) {
   };
 
   var add = function add() {
+    onDocumentClick.timeStamp = getNow();
     document.addEventListener('click', onDocumentClick);
     document.addEventListener('contextmenu', onDocumentClick);
   };

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.12
+ * @king-design v2.0.13-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,4 +57,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.12";
+export declare const version = "2.0.13-beta.0";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.12
+ * @king-design v2.0.13-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,5 +59,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.12';
+export var version = '2.0.13-beta.0';
 /* generate end */

package/es/site/data/components/dropdown/demos/trigger/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Dropdown, DropdownMenu, DropdownItem, Button, Icon } from '@king-design/react';
+import { Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input } from '@king-design/react';
 import './index.styl';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
@@ -23,7 +23,11 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "primary"
     }, "click ", /*#__PURE__*/React.createElement(Icon, {
       className: "ion-ios-arrow-down"
-    })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));
+    })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, {
+      trigger: "focus"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "focus"
+    }), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));
   };
 
   return Demo;

package/es/site/data/components/select/demos/format/react.js

@@ -95,7 +95,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
             "verticalAlign": "middle"
           }
         }), /*#__PURE__*/React.createElement("span", {
-          className: "c-middle"
+          className: "middle"
         }, value));
       }
     }, _mapInstanceProperty(_context3 = ['ion-chatbubble', 'ion-person-stalker', 'ion-beer', 'ion-camera']).call(_context3, function ($value, $key) {

package/es/site/data/components/tooltip/demos/trigger/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Tooltip, ButtonGroup, Button } from '@king-design/react';
+import { Tooltip, ButtonGroup, Button, Input } from '@king-design/react';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Demo, _React$Component);
@@ -20,7 +20,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Button, null, "click")), /*#__PURE__*/React.createElement(Tooltip, {
       hoverable: true,
       content: "the text can be hovered"
-    }, /*#__PURE__*/React.createElement(Button, null, "hoverable")));
+    }, /*#__PURE__*/React.createElement(Button, null, "hoverable")), /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: "focus",
+      content: "foucs"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "focus"
+    })));
   };
 
   return Demo;

package/hooks/useDocumentClick.ts

@@ -5,13 +5,40 @@ export interface IgnoreClickEvent extends MouseEvent {
     _ignore?: boolean
 }
 
+type FnWithTime = {
+    (e: IgnoreClickEvent): void;
+    timeStamp?: number;
+}
+
+// @reference: Vue3.0
+let getNow = Date.now;
+// Determine what event timestamp the browser is using. Annoyingly, the
+// timestamp can either be hi-res (relative to page load) or low-res
+// (relative to UNIX epoch), so in order to compare time we have to use the
+// same timestamp type when saving the flush timestamp.
+if (getNow() > document.createEvent('Event').timeStamp) {
+    // if the low-res timestamp which is bigger than the event timestamp
+    // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+    // and we need to use the hi-res version for event listeners as well.
+    getNow = () => performance.now();
+}
+// #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
+// and does not fire microtasks in between event propagation, so safe to exclude.
+const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
+const skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
+
 export function useDocumentClick(
     ref: RefObject<Element> | (() => Element),
     callback: (e: MouseEvent) => void,
     manual: boolean = false
 ) {
-    const onDocumentClick = (e: IgnoreClickEvent) => {
+    const onDocumentClick: FnWithTime = (e: IgnoreClickEvent) => {
         if (e._ignore) return;
+        // https://github.com/ksc-fe/kpc/issues/788
+        const timeStamp = e.timeStamp || getNow();
+        if (!skipTimestampCheck && onDocumentClick.timeStamp! > timeStamp + 1) {
+            return;
+        }
 
         const target = e.target as Element;
         const elem = isFunction(ref) ? ref() : ref.value!;
@@ -21,6 +48,7 @@ export function useDocumentClick(
     };
 
     const add = () => {
+        onDocumentClick.timeStamp = getNow();
         document.addEventListener('click', onDocumentClick);
         document.addEventListener('contextmenu', onDocumentClick);
     };

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.12
+ * @king-design v2.0.13-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,6 +62,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '2.0.12';
+export const version = '2.0.13-beta.0';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.12",
+  "version": "2.0.13-beta.0",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {