@king-design/intact 3.1.0-beta.3 → 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/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/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/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/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/tree/demos/expandAll.md

@@ -5,19 +5,40 @@ order: 7
 
 给组件添加`defaultExpandAll`属性，可以默认展开所有节点
 
-> 仅限首次渲染`Tree`时生效，后续添加节点不会默认展开
+> `@before v3.1.0` 仅限首次渲染`Tree`时生效，后续添加节点不会默认展开
+> `@since v3.1.0` 当首次渲染时，如果不存在`data`或者`data`为空数组，则待接收到新的`data`后，展开所有节点
 
 ```vdt
-import {Tree} from 'kpc';
+import {Tree, Button} from 'kpc';
 
-<Tree
-    defaultExpandAll
-    data={this.get('data')}
-/>
+<div class="wrapper">
+    <Tree
+        defaultExpandAll
+        data={this.get('data')}
+    />
+    <Tree
+        defaultExpandAll
+        data={this.get('delayData')}
+    />
+    <Button ev-click={this.load}>加载数据</Button>
+</div>
+```
+
+```styl
+.wrapper
+    display flex
+    gap 18px
 ```
 
 ```ts
-export default class extends Component {
+import {bind, TreeDataItem} from 'kpc';
+
+interface Props {
+    data: TreeDataItem<string>[]
+    delayData?: TreeDataItem<string>[]
+}
+
+export default class extends Component<Props> {
     static template = template;
     static defaults() {
         return {
@@ -62,8 +83,15 @@ export default class extends Component {
                         }
                     ]
                 }
-            ]
+            ],
+
+            delayData: undefined
         }
     }
+
+    @bind
+    load() {
+        this.set('delayData', this.get('data'));
+    }
 }
 ```

package/components/tree/index.md

@@ -14,7 +14,7 @@ sidebar: doc
 | uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
 | checkedKeys | 通过`key`指定勾选的数据节点 | `K[]` | `undefined` |
 | expandedKeys | 通过`key`指定展开的数据节点 | `K[]` | `undefined` |
-| defaultExpandAll | 是否默认展开所有节点 （该属性只在首次渲染时起作用，渲染后再更新数据`data`，没有效果） | `boolean` | `false` |
+| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `false` |
 | selectable | 节点是否可选中，默认为`true`可选中 | `boolean` | `true` |
 | selectedKeys | 通过`key`指定选中的数据节点 | `K[]` | `undefined` |
 | multiple | `selectedKeys`是否支持多选 | `boolean` | `false` |

package/components/tree/useExpanded.ts

@@ -11,8 +11,20 @@ export function useExpanded(getNodes: () => Node<Key>[]) {
     });
 
     onBeforeMount(() => {
-        if (instance.get('defaultExpandAll')) {
-            expandAll();
+        /**
+         * change the behavior
+         * if the data is undefined, we expand all keys after we received data
+         */
+        const { defaultExpandAll, data } = instance.get();
+        if (defaultExpandAll) {
+            if (data && data.length) {
+                expandAll();
+            } else {
+                instance.on(`$receive:data`, function cb() {
+                    expandAll();
+                    instance.off(`$receive:data`, cb);
+                });
+            }
         }
     });
 

package/components/treeSelect/index.md

@@ -29,7 +29,7 @@ sidebar: doc
 | uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
 | load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: TreeNode<K>) => Proomise<void> &#124; void</code> | `undefined` |
 | showLine | 是否展示`Tree`的对齐线 | `boolean` | `true` |
-| defaultExpandAll | 是否默认展开所有节点 （该属性只在首次渲染时起作用，渲染后再更新数据`data`，没有效果） | `boolean` | `false` |
+| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `false` |
 | checkbox | 是否展示复选框 | `boolean` | `false` |
 | filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |

package/components/upload/demos/files.md

@@ -3,16 +3,20 @@ title: 定义初始化列表
 order: 3
 ---
 
-你可以通过`defaultFiles`定义初始化上传列表，该属性取值为数组，数组每一项结构如下：
-1. `name` 文件名
-2. `url` 文件对应的url地址
+你可以通过`files`定义初始化上传列表，该属性取值为数组，数组每一项结构如下：
+1. `name` 文件名，必填
+2. `url` 文件对应的url地址，非必填
+3. `status` 状态`UploadFileStatus`，默认成功，非必填
+4. `uid` 文件唯一标识id，非必填
+
+> @since 3.1.0，defaultFiles已被废弃，使用files来代替，支持响应式更新
 
 ```vdt
 import {Upload} from 'kpc';
 
 <Upload multiple
     action="//fakestoreapi.com/products"
-    defaultFiles={this.get('defaultFiles')}
+    v-model:files="files"
 />
 ```
 
@@ -22,22 +26,20 @@ import {Upload} from 'kpc';
 ```
 
 ```ts
-interface Props {
-    defaultFiles: DefaultFile[]
-}
+import {UploadFileStatus, UploadFile} from 'kpc';
 
-type DefaultFile = {
-    name: string
-    url: string
+interface Props {
+    files?: UploadFile[]
 }
 
 export default class extends Component<Props> {
     static template = template;
     static defaults() {
         return {
-            defaultFiles: [
+            files: [
                 {name: 'test1.jpg', url: 'http://www.example.com/test1.jpg'},
-                {name: 'test2.png', url: 'http://www.example.com/test2.png'}
+                {name: 'test2.png', url: 'http://www.example.com/test2.png'},
+                {name: 'test3.png', status: UploadFileStatus.Error},
             ]
         } as Props;
     }

package/components/upload/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 | --- | --- | --- | --- |
 | accept | `input`的[accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)属性，支持的文件的类型 | `string` | `undefined` |
 | files | 所有已上传和待上传的文件列表 | `UploadFile[]` | `[]` |
-| defaultFiles | 指定初始化上传列表，见示例 | <code>(Partial&lt;UploadFile&gt; & Pick&lt;UploadFile, 'name' &#124; 'url'&gt;)[]</code> | `undefined` |
+| defaultFiles `@deprecated` | 指定初始化上传列表，见示例 | <code>(Partial&lt;UploadFile&gt; & Pick&lt;UploadFile, 'name' &#124; 'url'&gt;)[]</code> | `undefined` |
 | maxSize | 最大上传文件大小限制(kb)，默认无限制 | `number` | `undefined` |
 | limit | 最大上传文件数量限制，默认无限制 | `number` | `undefined` |
 | autoUpload | 是否选择文件后即自动上传 | `boolean` | `true` |
@@ -29,13 +29,13 @@ sidebar: doc
 
 ```ts
 export type UploadFile = {
-    status: UploadFileStatus
+    status?: UploadFileStatus
     type?: string
     size?: number
     name: string
-    percent: number
-    uid: number
-    raw: File | Partial<UploadFile>
+    percent?: number
+    uid?: number
+    raw?: File | Partial<UploadFile>
     url?: string
     request?: any
 }

package/components/upload/index.ts

@@ -10,7 +10,8 @@ import type {RequestError} from './ajaxUploader';
 import type {Events} from '../types';
 import { useConfigContext } from '../config';
 
-export type {RequestError, UploadFileStatus};
+export type {RequestError};
+export {UploadFileStatus};
 
 export interface UploadProps {
     accept?: string
@@ -45,13 +46,13 @@ export interface UploadBlocks {
 }
 
 export type UploadFile = {
-    status: UploadFileStatus
+    status?: UploadFileStatus
     type?: string
     size?: number
     name: string
-    percent: number
-    uid: number
-    raw: File | Partial<UploadFile>
+    percent?: number
+    uid?: number | string
+    raw?: File | Partial<UploadFile>
     url?: string
     request?: any
 }

package/components/upload/useFiles.ts

@@ -17,21 +17,22 @@ export function useFiles(
         const {files, defaultFiles} = instance.get();
         const _files = files!.slice(0);
         if (defaultFiles) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn(`'defaultFiles' is deprecated, use 'files' instead for reactive updating.`)
+            }
             defaultFiles.forEach(file => {
-                _files.push({
-                    status: UploadFileStatus.Done,
-                    name: file.name,
-                    percent: 100,
-                    uid: uid++,
-                    raw: file,
-                    url: file.url,
-                });
+                _files.push(normalizeFile(file));
             });
 
             instance.set('files', _files);
         }
     }
 
+    instance.on(`$receive:files`, (files) => {
+        if (!files) return;
+        instance.set('files', files.map(normalizeFile));
+    });
+
     async function addFiles(fileList: FileList) {
         const files = instance.get('files')!.slice(0);
         const newFiles = Array.from(fileList);
@@ -100,3 +101,13 @@ export function useFiles(
 
     return {addFiles, removeFile};
 }
+
+function normalizeFile(file: UploadFile) {
+    return {
+        status: UploadFileStatus.Done,
+        percent: 100,
+        uid: uid++,
+        raw: file,
+        ...file
+    };
+}

package/es/components/cascader/index.vdt.js

@@ -21,6 +21,7 @@ export default function ($props, $blocks, $__proto__) {
       fields = _this$get.fields;
 
   var k = this.config.k;
+  var baseMenuStyles = makeMenuStyles(k);
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-cascader-menu"] = true, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   var getField = this.fields;
 

package/es/components/config/index.d.ts

@@ -1,10 +1,17 @@
 import { ProviderProps } from '../context';
+import { Component } from 'intact';
 export interface ConfigProps {
     classNamePrefix?: string;
 }
-declare const ConfigProvider: import("intact").ComponentConstructor<import("intact").Component<ProviderProps<ConfigProps>, {}, {}, {}>>, ConfigConsumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ConfigProps>, {}, {}, {}>>;
+declare const ConfigConsumer: import("intact").ComponentConstructor<Component<import("../context").ConsumerProps<ConfigProps>, {}, {}, {}>>;
 declare function useConfigContext(): {
     cls: (name: string) => string;
     readonly k: string;
 };
-export { ConfigProvider, ConfigConsumer, useConfigContext, };
+/**
+ * for vue/react type checking
+ */
+export declare class _ConfigProvider extends Component<ProviderProps<ConfigProps>> {
+}
+export declare const ConfigProvider: typeof _ConfigProvider;
+export { ConfigConsumer, useConfigContext, };

package/es/components/config/index.js

@@ -1,8 +1,8 @@
 import { createContext } from '../context';
-import { EMPTY_OBJ } from 'intact';
+import { EMPTY_OBJ, Component } from 'intact';
 
 var _createContext = createContext(EMPTY_OBJ),
-    ConfigProvider = _createContext.Provider,
+    Provider = _createContext.Provider,
     ConfigConsumer = _createContext.Consumer,
     useContext = _createContext.useContext;
 
@@ -20,4 +20,5 @@ function useConfigContext() {
   };
 }
 
-export { ConfigProvider, ConfigConsumer, useConfigContext };
+export var ConfigProvider = Provider;
+export { ConfigConsumer, useConfigContext };