@king-design/intact 3.1.0-beta.2 → 3.1.0

package/components/cascader/index.vdt

@@ -5,6 +5,7 @@ import {makeMenuStyles, makeFilterMenuStyles} from './styles';
 
 const {data, trigger, filterable, fields} = this.get();
 const { k } = this.config;
+const baseMenuStyles = makeMenuStyles(k);
 const classNameObj = {
     [`${k}-cascader-menu`]: true,
     [makeMenuStyles(k)]: true,

package/components/config/demos/basic.md

@@ -0,0 +1,19 @@
+---
+title: 改变className前缀
+order: 0
+---
+
+通过配置`classNamePrefix`，可以改变样式名className的前缀，组件默认是`k`开头，如: `k-datepicker`
+
+> 本例中，我们将前缀设为`kd`，可以打开调试工具查看
+
+```vdt
+import {ConfigProvider, Button, Input} from 'kpc';
+
+<ConfigProvider value={{classNamePrefix: 'kd'}}>
+    <Button>Button</Button>
+    <div style="margin-top: 8px;">
+        <Input />
+    </div>
+</ConfigProvider>
+```

package/components/config/index.md

@@ -0,0 +1,20 @@
+---
+title: 全局配置
+category: 组件
+order: 99
+sidebar: doc
+---
+
+# 属性
+
+## ConfigProvider
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 全局配置参数 | `ConfigProps` | `undefined` |
+
+```ts
+export interface ConfigProps {
+    classNamePrefix?: string 
+}
+```

package/components/config/index.ts

@@ -1,13 +1,12 @@
 import { createContext, ProviderProps } from '../context';
-import { EMPTY_OBJ } from 'intact';
-import {makeIconStyles} from '../../styles/fonts/iconfont';
+import { EMPTY_OBJ, Component } from 'intact';
 
 export interface ConfigProps {
     classNamePrefix?: string 
 }
 
 const {
-    Provider: ConfigProvider,
+    Provider,
     Consumer: ConfigConsumer,
     useContext,
 } = createContext<ConfigProps>(EMPTY_OBJ);
@@ -21,8 +20,13 @@ function useConfigContext() {
     }
 }
 
+/**
+ * for vue/react type checking
+ */
+export declare class _ConfigProvider extends Component<ProviderProps<ConfigProps>> { }
+export const ConfigProvider = Provider as typeof _ConfigProvider;
+
 export {
-    ConfigProvider,
     ConfigConsumer,
     useConfigContext,
 }

package/components/copy/index.spec.ts

@@ -1,5 +1,8 @@
 import BasicDemo from '~/components/copy/demos/basic';
 import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+import { Tooltip } from '../tooltip';
+import { Component } from 'intact';
+import { Copy } from '.';
 
 describe('Copy', () => {
     afterEach(async () => {
@@ -18,4 +21,29 @@ describe('Copy', () => {
             console.log(e);
         }
     });
+
+    it('wrap copy with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Tooltip, Copy } = this;
+                <Tooltip content="test">
+                    <Copy text="test" />
+                </Tooltip>
+            `;
+            Tooltip = Tooltip;
+            Copy = Copy;
+        }
+
+        const [instance, element] = mount(Demo);
+
+        element.click();
+        await wait();
+        try {
+            const text = await navigator.clipboard.readText();
+            expect(text).to.eql('test');
+        } catch (e) {
+            // Read permisson denied 
+            console.log(e);
+        }
+    });
 });

package/components/copy/index.ts

@@ -12,6 +12,7 @@ export interface CopyProps {
 export interface CopyEvents {
     success: [string]
     error: []
+    click: [MouseEvent]
 }
 
 const typeDefs: Required<TypeDefs<CopyProps>> = {
@@ -26,6 +27,7 @@ const defaults = (): Partial<CopyProps> => ({
 const events: Events<CopyEvents> = {
     success: true,
     error: true,
+    click: true,
 };
 
 export class Copy extends Component<CopyProps, CopyEvents> {

package/components/copy/useCopy.ts

@@ -11,7 +11,7 @@ export function useCopy() {
     let timer: number;
 
     return {
-        startCopy: () => {
+        startCopy: (e: MouseEvent) => {
             const { text, showMessage } = instance.get();
 
             if (clipboardCopy(text) || commandCopy(text)) {
@@ -27,6 +27,8 @@ export function useCopy() {
                 success.set(false);
                 instance.trigger('error');
             }
+
+            instance.trigger('click', e);
         },
         success,
     };

package/components/dialog/base.ts

@@ -179,7 +179,7 @@ export class BaseDialog<
 
     @bind
     private onClickWrapper(e: MouseEvent) {
-        if (this.get('closable')) {
+        if (this.get('closable') && e.target === this.overlayRef.value) {
             this.terminate();
         }
     }

package/components/dialog/base.vdt

@@ -90,8 +90,8 @@ const dialog = (
                 ev-click={this.onClickWrapper}
                 class={`${k}-dialog-overlay`}
                 ref={this.overlayRef}
-            ></div>
+            >{dialog}</div>
         </Transition>
-        {dialog}
+        <template v-else>{dialog}</template>
     </div>
 </Portal>

package/components/dialog/index.spec.ts

@@ -1,7 +1,7 @@
 import {Component} from 'intact';
 import {Dialog, BaseDialog, DialogProps} from './';
 import {bind} from '../utils';
-import {getElement, mount, unmount, dispatchEvent, wait} from '../../test/utils';
+import {getElement, mount, unmount, dispatchEvent, wait, getElements} from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
 import TerminateDemo from '~/components/dialog/demos/terminate';
@@ -295,7 +295,46 @@ describe('Dialog', () => {
         instance.refs.dialog.close();
 
         await wait();
-        expect(document.body.getAttribute('style')).to.be.null;
+        const style = document.body.getAttribute('style');
+        expect(style === null || style === '').to.be.true;
+    });
+
+    it('show nested dialog', async () => {
+        class Test extends Component {
+            static template = `
+                const { Dialog } = this;
+                <Dialog v-model="value">test</Dialog>
+            `
+            Dialog = Dialog;
+        }
+
+        class Demo extends Component<{show: boolean, testShow: boolean}> {
+            static template = `
+                const { Test, Dialog } = this;
+                <Dialog v-model="show">
+                    <div ev-click={this.showTest}>click</div>
+                    <Test v-model="testShow" /> 
+                </Dialog>
+            `
+            Test = Test;
+            Dialog = Dialog;
+
+            @bind
+            showTest() {
+                this.set('testShow', true);
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+
+        instance.set('show', true);
+        await wait();
+
+        instance.showTest();
+        await wait();
+
+        const [dialog1, dialog2] = getElements('.k-dialog');
+        expect(dialog2.querySelector('.k-dialog-body')!.textContent).to.eql('test');
     });
 
     // it('should handle v-if and v-model at the same time correctly in Vue', async () => {

package/components/dialog/styles.ts

@@ -168,6 +168,7 @@ export function makeWrapperStyles(k: string) {
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0, .5);
+            overflow: auto;
         }
     `;
 }

package/components/drawer/index.spec.ts

@@ -1,7 +1,7 @@
 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 {mount, unmount, dispatchEvent, getElement, wait, getElements} from '../../test/utils';
 import {Component} from 'intact';
 import {Drawer} from '.';
 import {Dialog} from '../dialog';
@@ -85,6 +85,8 @@ describe('Drawer', () => {
         const [instance, element] = mount(Demo);
 
         await wait();
-        expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+        // expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+        const [dialog1, dialog2] = getElements('.k-dialog');
+        expect(dialog2.querySelector('.k-dialog-body')!.textContent).to.eql('Dialog');
     });
 });

package/components/icon/demos/icons.md

@@ -6,18 +6,20 @@ order: 3
 
 
 ```vdt
-import {Icon, Input} from 'kpc';
+import {Icon, Input, Copy} from 'kpc';
 
 <div>
     <Input v-model="keywords" placeholder="Search icon" clearable />
     <div class="icons">
-        <div class="icon" v-for={this.filter()}>
-            <Icon 
-                class={this.config.k + '-icon-' + $value[0]}
-                size="large"
-            />
-            <div>{this.config.k + '-icon-' + $value[0]}</div>
-        </div>
+        <Copy v-for={this.filter()} text={this.config.k + '-icon-' + $value[0]}>
+            <div class="icon">
+                <Icon 
+                    class={this.config.k + '-icon-' + $value[0]}
+                    size="large"
+                />
+                <div>{this.config.k + '-icon-' + $value[0]}</div>
+            </div>
+        </Copy>
     </div>
 </div>
 ```
@@ -158,8 +160,17 @@ export default class extends Component<Props> {
         if (!keywords) return fonts;
 
         return fonts.filter((font) => {
-            return font[0].includes(keywords) || font[1] && font[1].includes(keywords);
+            return `${this.config.k}-icon-${font[0]}`.includes(keywords) ||
+                font[1] && font[1].includes(keywords);
         });
     }
 }
 ```
+
+```vue-ignore
+该示例无展示代码
+```
+
+```react-ignore
+该示例无展示代码
+```

package/components/input/demos/blocks.md

@@ -6,7 +6,7 @@ order: 1
 使用`append`，`prepend`，`suffix`，`prefix`扩展点，可以往组件追加内容
 
 ```vdt
-import {Input, Button, Icon} from 'kpc';
+import {Input, Button, Icon, ButtonGroup} from 'kpc';
 
 <div>
     <Input placeholder="please enter">
@@ -22,6 +22,21 @@ import {Input, Button, Icon} from 'kpc';
         </b:append>
     </Input>
     <br />
+    <Input placeholder="please enter">
+        <b:append>
+            <Button>提交</Button>
+        </b:append>
+    </Input>
+    <br />
+    <Input placeholder="please enter">
+        <b:append>
+            <ButtonGroup>
+                <Button type="primary">提交</Button>
+                <Button type="primary">创建</Button>
+            </ButtonGroup>
+        </b:append>
+    </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="primary">

package/components/input/styles.ts

@@ -167,6 +167,7 @@ export function makeStyles(k: string) {
             display: inline-flex;
             .${k}-input-wrapper {
                 border-radius: 0;
+                flex: 1;
             }
             .${k}-input-wrapper:first-child {
                 border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
@@ -184,7 +185,7 @@ export function makeStyles(k: string) {
             white-space: nowrap;
             .${k}-btn {
                 margin: -1px;
-                border: none;
+                // border: none;
                 &.${k}-none:hover {
                     background: transparent;
                 }

package/components/menu/demos/basic.md

@@ -26,7 +26,7 @@ import {Menu, MenuItem, Icon} from 'kpc';
     </MenuItem>
     <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
     <MenuItem key="3">
-        <i class="k-icon ion-heart"></i>menu 3
+        <Icon class="ion-heart" />menu 3
         <Menu>
             <MenuItem key="3-1">sub menu 1</MenuItem>
             <MenuItem key="3-2">sub menu 2</MenuItem>

package/components/menu/item.vdt

@@ -5,7 +5,7 @@ import {Icon} from '../icon';
 import {Menu} from './menu';
 import {getRestProps, expandAnimationCallbacks} from '../utils';
 import {isNullOrUndefined} from 'intact-shared';
-import {makeItemStyles, makeTitleStyles} from './styles';
+import {makeItemStyles, makeTitleStyles, makeNestedMenuStyles} from './styles';
 
 const rootMenu = this.rootMenu;
 const {theme, type, dot: rootDot} = rootMenu.get();
@@ -18,6 +18,7 @@ const {
     tooltipContents, iconVNode, titleVNodes,
     position, isCollapse,
 } = this.dropdown();
+
 const { k } = this.config;
 const classNameObj = {
     [`${k}-menu-item`]: true,
@@ -48,7 +49,21 @@ const title = (children) => (
             key="subMenu"
             {...expandAnimationCallbacks}
         >
-            {subMenuVNode}
+            {(() => {
+                if (subMenuVNode) {
+                    const paddingLeft = this.parentMenu.get('_paddingLeft');
+                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft);
+                    const className = _$cn({
+                        [_classname]: true,
+                        [subMenuVNode.className]: subMenuVNode.className,
+                    });
+                    const clonedVNode = directClone(subMenuVNode);
+                    clonedVNode.props = { ...clonedVNode.props, className, _paddingLeft };
+                    clonedVNode.className = className;
+
+                    return clonedVNode;
+                }
+            })()}
         </Transition>
     </template>
 

package/components/menu/menu.ts

@@ -12,6 +12,8 @@ export interface MenuProps<K extends Key = Key> {
     size?: 'large' | 'default' | 'small' 
     accordion?: boolean
     dot?: boolean
+
+    _paddingLeft?: string 
 }
 
 export interface MenuEvents { }
@@ -29,6 +31,8 @@ const typeDefs: Required<TypeDefs<MenuProps>> = {
     size: ['large', 'default', 'small'],
     accordion: Boolean,
     dot: Boolean,
+
+    _paddingLeft: String,
 };
 
 const defaults = (): Partial<MenuProps> => ({

package/components/menu/menu.vdt

@@ -41,7 +41,7 @@ const content = (
     <div v-if={!isDropdownMenu}
         {...getRestProps(this)}
         class={classNameObj}
-    >{content}{}</div>
+    >{content}</div>
     <DropdownMenu v-else 
         {...getRestProps(this)}
         class={classNameObj}

package/components/menu/styles.ts

@@ -96,20 +96,6 @@ export function makeMenuStyles(k: string) {
             font-size: ${menu.fontSize};
         }
 
-        // nested menu
-        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
-            width: auto;
-            background: ${menu.subBgColor};
-            .${k}-menu-title {
-                padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} + ${menu.icon.gap});
-            }
-        }
-        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
-            .${k}-menu-title {
-                padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} * 2 + ${menu.icon.gap});
-            }
-        }
-
         .${k}-icon {
             width: ${menu.icon.width};
             margin-right: ${menu.icon.gap};
@@ -244,7 +230,6 @@ export function makeItemStyles(k: string) {
         .${k}-menu-title {
             cursor: pointer;
             height: ${menu.item.height};
-            transition: all ${menu.transition};
             &:hover {
                 color: ${menu.item.hoverColor};
             }
@@ -259,6 +244,9 @@ export function makeItemStyles(k: string) {
                 text-overflow: ellipsis;
                 min-width: 0;
             }
+            .${k}-icon {
+                color: inherit;
+            }
         }
         .${k}-menu-arrow {
             transition: transform ${menu.transition};
@@ -305,3 +293,19 @@ export function makeItemStyles(k: string) {
         }
     `
 }
+
+export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
+    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width : ''} + ${menu.icon.gap}`;
+    return [
+        css`
+            &.${k}-menu {
+                width: auto;
+                background: ${menu.subBgColor};
+                .${k}-menu-title {
+                    padding-left: calc(${paddingLeft});
+                }
+            }
+        `,
+        paddingLeft,
+    ]
+}

package/components/menu/useDropdown.ts

@@ -45,16 +45,13 @@ export function useDropdown(rootMenu: Menu, parentMenu: Menu) {
         eachChildren(children, vNode => {
             if (isComponentVNode(vNode, Menu)) {
                 subMenuVNode = vNode;
-            } else if (isTopItem && isCollapse) {
-                if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
-                    tooltipContents.push(vNode);
-                } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
-                    iconVNode = vNode;
-                }
             } else {
                 if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
                     // wrap with span for showing text ellipsis
                     vNode = createVNode('span', null, vNode);
+                    tooltipContents.push(vNode);
+                } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
+                    iconVNode = vNode;
                 }
                 titleVNodes.push(vNode);
             }

package/components/portal.ts

@@ -146,7 +146,12 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         if (!this.container) {
             if (this.$senior instanceof BaseDialog) {
                 // Dialog and Drawer must be inserted into document.body
-                this.container = document.body;
+                // this.container = document.body;
+                /**
+                 * @Modify https://github.com/ksc-fe/kpc/issues/915
+                 * shoud insert to parent .k-dialog-wrapper to show nested dialog in Vue
+                 */
+                this.container = parentDom.closest(`.${this.config.k}-dialog-wrapper`) || document.body;
             } else {
                 // find the closest dialog if exists
                 this.container = parentDom.closest(`.${this.config.k}-dialog`) || document.body;

package/components/table/row.vdt

@@ -39,8 +39,8 @@ const pushCheckTypeVNode = (children) => {
         <td key="$checktype"
             {...getClassAndStyleForFixed({
                 fixed: hasFixedLeft ? 'left' : false,
-                className: [`${k}-table-check`]
-            }, 0)}
+                className: [`${k}-table-check`],
+            }, 0, k)}
             {...spans}
         >{children}</td>
     )

package/components/table/styles.ts

@@ -60,6 +60,7 @@ const defaults = {
     // tree
     arrow: {
         gap: `4px`,
+        width: `16px`,
     },
 
     resizeWidth: `5px`,
@@ -311,6 +312,7 @@ export function makeStyles(k: string) {
             // display: none;
         // }
         .${k}-table-arrow {
+            width: ${table.arrow.width} !important;
             margin-right: ${table.arrow.gap};
             transition: transform ${table.transition};
             position: relative;

package/components/table/table.vdt

@@ -80,7 +80,7 @@ const thead = hideHeader ? null : (
                                         <th v-if={$key === 0 && checkType !== 'none'}
                                             {...getClassAndStyleForFixed({
                                                 fixed: hasFixedLeft ? 'left' : false,
-                                            }, 0)}
+                                            }, 0, k)}
                                             rowspan={maxRows}
                                             key="$checktype"
                                         >