@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.1

package/components/copy/index.spec.ts

@@ -0,0 +1,21 @@
+import BasicDemo from '~/components/copy/demos/basic';
+import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+
+describe('Copy', () => {
+    afterEach(async () => {
+        unmount();
+    });
+
+    it('should copy', async function() {
+        const [instance, element] = mount(BasicDemo);
+        
+        element.click();
+        try {
+            const text = await navigator.clipboard.readText();
+            expect(text).to.eql('Hello King Desgin!');
+        } catch (e) {
+            // Read permisson denied 
+            console.log(e);
+        }
+    });
+});

package/components/copy/index.ts

@@ -0,0 +1,37 @@
+import { Component, TypeDefs } from 'intact';
+import template from './index.vdt';
+import { useCopy } from './useCopy';
+import { Events } from '../types';
+
+export interface CopyProps {
+    text: string;
+    showMessage?: boolean;
+}
+
+export interface CopyEvents {
+    success: [string]
+    error: []
+}
+
+const typeDefs: Required<TypeDefs<CopyProps>> = {
+    text: String,
+    showMessage: Boolean,
+};
+
+const defaults = (): Partial<CopyProps> => ({
+    showMessage: true,
+});
+
+const events: Events<CopyEvents> = {
+    success: true,
+    error: true,
+};
+
+export class Copy extends Component<CopyProps, CopyEvents> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    private copy = useCopy()
+}

package/components/copy/index.vdt

@@ -0,0 +1,23 @@
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { Virtual } from '../virtual';
+import { Transition } from 'intact';
+import { makeStyles } from './styles';
+import { _$ } from '../../i18n';
+
+const { children, className } = this.get();
+const { startCopy, success } = this.copy;
+
+const classNameObj = {
+    [`k-copy`]: true,
+    [makeStyles()]: true,
+    [className]: className,
+}
+
+<Transition name="k-fade">
+    <Virtual ev-click={startCopy} class={classNameObj} {...getRestProps(this)}>
+        <template v-if={children}>{children}</template>
+        <Icon key="1" v-else-if={!success.value} class="k-icon-clone" hoverable title={_$('复制')} />
+        <Icon key="2" v-else class="k-icon-truth" hoverable color="success" />
+    </Virtual>
+</Transition>

package/components/copy/styles.ts

@@ -0,0 +1,9 @@
+import {css} from '@emotion/css';
+import '../../styles/global';
+
+export function makeStyles() {
+    return css`
+        cursor: pointer;
+        vertical-align: middle;
+    `
+}

package/components/copy/useCopy.ts

@@ -0,0 +1,91 @@
+import { Message } from '../message';
+import { useInstance } from 'intact';
+import type { Copy } from './';
+import { selectValue } from '../utils';
+import { useState } from '../../hooks/useState';
+import { _$ } from '../../i18n';
+
+export function useCopy() {
+    const instance = useInstance() as Copy;
+    const success = useState(false);
+    let timer: number;
+
+    return {
+        startCopy: () => {
+            const { text, showMessage } = instance.get();
+
+            if (clipboardCopy(text) || commandCopy(text)) {
+                showMessage && Message.success({ content: _$('复制成功') });
+                success.set(true);
+                clearTimeout(timer);
+                timer = window.setTimeout(() => {
+                    success.set(false);
+                }, 1000);
+                instance.trigger('success', text);
+            } else {
+                showMessage && Message.error({ content: _$('复制失败') });
+                success.set(false);
+                instance.trigger('error');
+            }
+        },
+        success,
+    };
+}
+
+// @reference: https://github.com/zenorocha/clipboard.js/blob/master/src/common/create-fake-element.js
+function createFakeElement(value: string) {
+    const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+    const fakeElement = document.createElement('textarea');
+    // Prevent zooming on iOS
+    fakeElement.style.fontSize = '12pt';
+    // Reset box model
+    fakeElement.style.border = '0';
+    fakeElement.style.padding = '0';
+    fakeElement.style.margin = '0';
+    // Move element out of screen horizontally
+    fakeElement.style.position = 'absolute';
+    fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px';
+    // Move element to the same position vertically
+    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    fakeElement.style.top = `${yPosition}px`;
+
+    fakeElement.setAttribute('readonly', '');
+    fakeElement.value = value;
+
+    return fakeElement;
+}
+
+function clipboardCopy(text: string) {
+    try {
+        navigator.clipboard.writeText(text);
+
+        return true;
+    } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.log(e);
+        }
+        return false;
+    }
+}
+
+function commandCopy(text: string) {
+    const fakeElement = createFakeElement(text);
+    document.body.appendChild(fakeElement);
+    selectValue(fakeElement);
+
+    let result: boolean;
+    try {
+        document.execCommand('copy');
+        result = true;
+    } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.log(e);
+        }
+        result = false;
+    }
+
+    document.body.removeChild(fakeElement);
+
+    return result;
+}
+

package/components/datepicker/demos/basic.md

@@ -10,6 +10,7 @@ import {Datepicker} from 'kpc';
 
 <div>
     <Datepicker v-model="date" ref="__demo" />
+    <Datepicker v-model="date" flat />
     <Datepicker disabled value="2018-01-01"/>
 </div>
 ```

package/components/datepicker/index.md

@@ -31,6 +31,9 @@ sidebar: doc
 | type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"date"` |
 | shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 import {Dayjs} from 'dayjs';
@@ -41,6 +44,16 @@ export type Shortcut = {
     label: (() => string | VNode) | string | VNode 
     value: () => Value | [Value, Value]
 }
+
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 

package/components/datepicker/index.spec.ts

@@ -115,7 +115,7 @@ describe('Datepicker', () => {
             input.click();
             await wait();
             content = getElement('.k-datepicker-content')!;
-            const [yearDom, monthDom] = Array.from(content.querySelectorAll('.k-month-value'));
+            const [yearDom, monthDom] = Array.from(content.querySelectorAll<HTMLElement>('.k-month-value'));
             yearDom.click();
             await wait();
             (content.querySelector('.k-today') as HTMLElement).click();
@@ -282,7 +282,7 @@ describe('Datepicker', () => {
 
             await wait();
             // remove specified item
-            const close = element.querySelector('.k-select-close') as HTMLElement;
+            const close = element.querySelector('.k-tag-close') as HTMLElement;
             close.click();
             expect(instance.get('date')).have.lengthOf(0);
 

package/components/datepicker/index.vdt

@@ -42,7 +42,7 @@ const generatePanel = (flag) => {
                         timeString = valueString[1];
                     }
                     return (
-                        <Tabs type="border-card"
+                        <Tabs type="card"
                             value={panel.value}
                             ev-$change:value={panel.set}
                         >
@@ -87,7 +87,7 @@ const generatePanel = (flag) => {
             <div class="k-datepicker-wrapper">
                 <div class="k-datepicker-calendars">
                     {generatePanel(PanelFlags.Start)}
-                    {range ? generatePanel(PanelFlags.End) : null} 
+                    {range ? generatePanel(PanelFlags.End) : null}
                 </div>
                 <div v-if={type === 'datetime'} class="k-datepicker-footer">
                     <Button type="primary" size="small"

package/components/datepicker/styles.ts

@@ -149,20 +149,22 @@ export function makeCalendarStyles() {
             align-items: center;
             cursor: pointer;
             position: relative;
-            border-radius: ${datepicker.item.borderRadius};
-            &.k-hover {
+            .k-value {
+                border-radius: ${datepicker.item.borderRadius};
+            }
+            &.k-hover .k-value {
                 background: ${datepicker.item.hoverBgColor};
             }
             &.k-exceed {
                 color: ${datepicker.item.exceedColor};
             }
-            &.k-today {
+            &.k-today .k-value {
                 border: ${datepicker.item.todayBorder};
             }
             &.k-active {
                 background: ${datepicker.item.active.bgColor};
                 color: ${datepicker.item.active.color};
-                &.k-today {
+                &.k-today .k-value {
                     border-color: ${datepicker.item.active.todayBorderColor};
                 }
             }
@@ -185,6 +187,10 @@ export function makeCalendarStyles() {
             }
             .k-value {
                 flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
             }
         }
         .k-days {

package/components/dialog/alert.vdt

@@ -19,12 +19,16 @@ const classNameObj = {
     <b:header />
     <b:body>
         <div class="k-dialog-tip-icon">
-            <Icon class={iconClassName || {
-                "ion-ios-checkmark": type === 'success',
-                "ion-ios-information": type === 'warning',
-                "ion-ios-close": type === 'error',
-                "ion-ios-help": type === 'confirm',
-            }} v-if={!hideIcon && !icon} />
+            <Icon 
+                v-if={!hideIcon && !icon}
+                class={iconClassName || {
+                    "k-icon-success-fill": type === 'success',
+                    "k-icon-warning-fill": type === 'warning',
+                    "k-icon-error-fill": type === 'error',
+                    "k-icon-question-fill": type === 'confirm',
+                }}
+                color={type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type}
+            />
             {icon}
         </div>
         <div class="k-alert-dialog-wrapper">

package/components/dialog/index.spec.ts

@@ -87,7 +87,7 @@ describe('Dialog', () => {
         }
 
         const [instance] = mount(Demo);
-        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 确定取消');
+        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 取消确定');
     });
 
     it('basic test', async () => {
@@ -114,7 +114,7 @@ describe('Dialog', () => {
         dispatchEvent(document, 'keydown', {keyCode: 27});
         expect(instance.get('show')).be.false;
         await wait(500);
-        expect(document.body.getAttribute('style')).to.be.null;
+        expect(!!document.body.getAttribute('style')).to.be.false;
     });
 
     it('methods test', async () => {
@@ -156,7 +156,7 @@ describe('Dialog', () => {
             unmount();
         }
         await wait(500);
-        expect(document.body.getAttribute('style')).to.be.null;
+        expect(!!document.body.getAttribute('style')).to.be.false;
     });
 
     it('async close', async () => {
@@ -193,7 +193,7 @@ describe('Dialog', () => {
         Dialog.success({content: 'test'}).then(cb);
         await wait();
         let dialog = expectDialog();
-        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        dialog.querySelector<HTMLElement>('.k-dialog-ok')!.click();
         await wait();
         expect(cb.callCount).to.eql(1);
 
@@ -209,7 +209,7 @@ describe('Dialog', () => {
         Dialog.error({title: 'error', content: 'test'});
         await wait();
         dialog = expectDialog();
-        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        dialog.querySelector<HTMLElement>('.k-dialog-ok')!.click();
 
         const cb2 = sinon.spy();
         Dialog.confirm({content: 'test', closable: false}).then(() => {}, cb2);
@@ -218,7 +218,7 @@ describe('Dialog', () => {
         overlay.click();
         await wait();
         expect(cb2.callCount).to.eql(0);
-        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-btn')!.click();
+        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-dialog-ok')!.click();
     });
 
     it('should double check for closing dialog', async () => {

package/components/dropdown/demos/tooltip.md

@@ -19,7 +19,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Tooltip} from 'kpc';
             <Tooltip content="disabled">
                 <DropdownItem disabled>item 3</DropdownItem>
             </Tooltip>
-            <Dropdown position={{my: 'left top', at: 'right top'}}>
+            <Dropdown position={{my: 'left top', at: 'right top'}} trigger="click">
                 <Tooltip content="This is a nested Dropdown.">
                     <DropdownItem>item 4</DropdownItem>
                 </Tooltip>

package/components/dropdown/dropdown.ts

@@ -11,7 +11,7 @@ import {
     createVNode,
     nextTick,
 } from 'intact';
-import {bind, isTextChildren} from '../utils';
+import {bind, isTextChildren, getRestProps} from '../utils';
 import {EMPTY_OBJ, isFunction, noop} from 'intact-shared';
 import {Options, position, Feedback} from '../position';
 import {cx} from '@emotion/css';
@@ -21,6 +21,7 @@ import {Portal, PortalProps} from '../portal';
 import {useShowHideEvents} from '../../hooks/useShowHideEvents';
 import {usePosition, FeedbackCallback} from './usePosition';
 import type {Events} from '../types';
+import { Virtual } from '../virtual';
 
 export type Position = Options 
 export type PositionShorthand = 'left' | 'bottom' | 'right' | 'top'
@@ -35,6 +36,7 @@ export interface DropdownProps {
     disabled?: boolean
     value?: boolean
     position?: Position | 'left' | 'bottom' | 'right' | 'top'
+    collison?: Position['collision']
     of?: 'self' | 'parent' | Event
     container?: PortalProps['container']
 }
@@ -45,6 +47,8 @@ export interface DropdownEvents {
     hide: []
     mouseenter: [MouseEvent]
     mouseleave: [MouseEvent]
+    click: [MouseEvent]
+    contextmenu: [MouseEvent]
     positioned: [Feedback]
 }
 
@@ -58,11 +62,11 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
     // Event is undefined in NodeJs
     of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
     container: [String, Function],
+    collison: ['none', 'fit', 'flip', 'flipfit', Array],
 };
 
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
-    position: {},
     of: 'self',
 });
 
@@ -72,6 +76,8 @@ const events: Events<DropdownEvents> = {
     hide: true,
     mouseenter: true,
     mouseleave: true,
+    click: true,
+    contextmenu: true,
     positioned: true,
 };
 
@@ -105,31 +111,18 @@ export class Dropdown<
         }
 
         const [trigger, menu] = children as DropdownChildren;
-        const triggerType = this.get('trigger');
-        const props = this.initEventCallbacks(triggerType); 
-
-        const clonedTrigger = isTextChildren(trigger) ? 
-            createVNode('span', null, trigger) :
-            directClone(trigger);
-        const triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ);
-        // add a className for opening status
-        let className = trigger.className || triggerProps.className;
+        const props = this.initEventCallbacks(); 
+        let {className, value, container} = this.get();
         className = cx({
-            [className]: className,
-            'k-dropdown-open': this.get('value'),
+            'k-dropdown-open': value,
+            [className!]: !!className,
         });
-
-        clonedTrigger.props = {...triggerProps, ...props, className};
-        clonedTrigger.className = className;
-
+    
         this.menuVNode = menu;
 
         return [
-            clonedTrigger,
-            // wrap the root dropdown menu to Portal to render into body
-            this.alwaysPortal || !this.rootDropdown ?
-                h(Portal, {children: menu, container: this.get('container')}) :
-                menu
+            h(Virtual, {...props, ...getRestProps(this), className}, trigger),
+            h(Portal, {children: menu, container})
         ];
     };
 
@@ -139,10 +132,7 @@ export class Dropdown<
     public showedDropdown: Dropdown | null = null;
     public positionHook = usePosition();
 
-    protected alwaysPortal = false;
-
-    private timer: number | undefined = undefined;
-    private triggerProps: any = null;
+    protected timer: number | undefined = undefined;
 
     init() {
         provide(DROPDOWN, this);
@@ -173,6 +163,12 @@ export class Dropdown<
         clearTimeout(this.timer);
         this.set('value', true);
 
+        // should show parent dropdown
+        const parentDropdown = this.dropdown;
+        if (parentDropdown) {
+            parentDropdown.show();
+        }
+
         if (shouldFocus) {
             nextTick(() => {
                 this.focusFirst();
@@ -184,9 +180,15 @@ export class Dropdown<
         if (this.get('disabled')) return;
         if (!this.get('value')) return;
 
+        const showedDropdown = this.showedDropdown;
+        if (showedDropdown) {
+            showedDropdown.hide(immediately);
+        }
+
         if (immediately) {
             this.set('value', false);
         } else {
+            clearTimeout(this.timer);
             this.timer = window.setTimeout(() => {
                 this.set('value', false);
             }, 200);
@@ -204,29 +206,27 @@ export class Dropdown<
 
     @bind
     private onEnter(e: MouseEvent) {
-        this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
-
         this.show();
+        this.trigger(e.type as 'mouseenter', e);
     }
 
     @bind 
     private onContextMenu(e: MouseEvent) {
-        this.callOriginalCallback('ev-contextmenu', e);
-
         e.preventDefault();
         this.set('of', e);
         this.show();
+        this.trigger('contextmenu', e);
     }
 
     @bind 
     private onLeave(e: MouseEvent) {
-        this.callOriginalCallback('ev-mouseleave', e);
-
         this.hide();
+        this.trigger(e.type as 'mouseleave', e);
     }
 
-    private initEventCallbacks(trigger: DropdownProps['trigger']) {
-        const props: Record<string, Function> = {};
+    private initEventCallbacks() {
+        const trigger = this.get('trigger');
+        const props: Record<string, Function | string> = {};
 
         switch (trigger) {
             case 'focus':
@@ -247,56 +247,15 @@ export class Dropdown<
 
         return props;
     }
-
-    private callOriginalCallback(name: string, e: MouseEvent) {
-        const callback = this.triggerProps[name];
-        const callbackOnDropdown = this.get<Function>(name);
-        if (isFunction(callback)) callback(e);
-        if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
-    }
-
-    private normalizeTriggerProps(props: any) {
-        // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-        const vnode = props.vnode;
-        if (!vnode) return props;
-
-        // maybe we render the intact component in react slot property, in this case
-        // the $isReact is false. so use the vnode $$typeof field as gauge
-        if (vnode.$$typeof || (this as any).$isVueNext) {
-            const _props = vnode.props;
-            if (!_props) return props;
-
-            return {
-                vnode,
-                'ev-click': _props.onClick,
-                'ev-mouseenter': _props.onMouseEnter,
-                'ev-mouseleave': _props.onMouseLeave,
-                'ev-contextmenu': _props.onContextMenu,
-                className: _props.className || _props.class /* vue-next */,
-            };
-        } else if ((this as any).$isVue) {
-            const data = vnode.data;
-            const on = data && data.on || EMPTY_OBJ;
-            const ret: Record<string, any> = {vnode};
-            ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(event => {
-                const method = on[event];
-                if (method) {
-                    ret[`ev-${event}`] = method;
-                }
-            });
-            return ret;
-        }
-
-        return props;
-    }
 }
 
 function useDocumentClickForDropdown(dropdown: Dropdown) {
     const elementRef = () => findDomFromVNode(dropdown.menuVNode!, true) as Element;
     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 
+        // 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
         const trigger = dropdown.get('trigger');
         if (trigger === 'focus') return;
 
@@ -310,6 +269,8 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
             }
         }
 
+        if (isSubDropdownElement(e.target as Element, dropdown)) return;
+
         dropdown.hide(true);
     }, true);
 
@@ -317,6 +278,17 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
     dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem: Element, dropdown: Dropdown): boolean {
+    const showedDropdown = dropdown.showedDropdown;
+    if (!showedDropdown) return false;
+
+    const subMenuElement = findDomFromVNode(showedDropdown.menuVNode!, true) as Element;
+    if (containsOrEqual(subMenuElement, elem)) {
+        return true;
+    }
+    return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown: Dropdown) {
     const parentDropdown = dropdown.dropdown;
     dropdown.on('show', () => {