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

package/README.md

@@ -96,7 +96,7 @@ Welcome to join us by QQ. Group Number: 529739732
 
 ## Develop 
 
-> Require `node@10` and `npm@6.9` or above.
+> Require `node@10 ~ node@14` and `npm@6.9` or above.
 
 ```shell
 git clone https://github.com/ksc-fe/kpc.git

package/components/button/demos/basic.md

@@ -17,6 +17,7 @@ import {Button} from 'kpc';
     <Button type="success">success</Button>
     <Button type="none">none</Button>
     <Button type="link">link</Button>
+    <Button type="flat">flat</Button>
 </div>
 ```
 

package/components/button/demos/group.md

@@ -20,6 +20,11 @@ import {Button, ButtonGroup} from 'kpc';
         <Button type="danger">关机</Button>
         <Button type="danger">重启</Button>
     </ButtonGroup>
+    <ButtonGroup>
+        <Button type="flat">开机</Button>
+        <Button type="flat">关机</Button>
+        <Button type="flat">重启</Button>
+    </ButtonGroup>
     <ButtonGroup>
         <Button type="primary">
             <i class="k-icon ion-ios-arrow-left"></i>上一页
@@ -43,6 +48,12 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
+    <ButtonGroup checkType="radio" v-model="city">
+        <Button type="flat" value="beijing">北京</Button>
+        <Button type="flat" value="shanghai">上海</Button>
+        <Button type="flat" value="guangzhou">广州</Button>
+        <Button type="flat" value="shenzhen">深圳</Button>
+    </ButtonGroup>
     <p>多选按钮组</p>
     <ButtonGroup checkType="checkbox" v-model="cities">
         <Button value="beijing" size="small">北京</Button>

package/components/button/demos/icon.md

@@ -14,6 +14,7 @@ import {Button, Icon} from 'kpc';
     <Button icon><Icon class="ion-ios-search" /></Button>
     <Button icon circle><Icon class="ion-ios-search" /></Button>
     <Button icon circle type="none"><Icon class="ion-ios-search" /></Button>
+    <Button icon circle type="flat"><Icon class="ion-ios-search" /></Button>
     <Button type="danger" size="large" icon circle><Icon class="ion-ios-search" size="large" /></Button>
     <Button type="primary"><Icon class="ion-ios-search" size="small" />搜索</Button>
     <Button circle type='primary'><Icon class="ion-ios-search" size="small" />搜索</Button>

package/components/button/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"`| `"default"` |
+| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"` | `"flat"` | `"default"` |
 | size | 按钮尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
 | icon | 是否为图标按钮（宽高相等）| `boolean` | `false` |
 | circle | 是否为圆角按钮 | `boolean` | `false` |

package/components/button/index.ts

@@ -21,7 +21,7 @@ interface ButtonHTMLAttributes {
 }
 
 export interface ButtonProps extends ButtonHTMLAttributes {
-    type?: Colors | 'none' | 'secondary' | 'link'
+    type?: Colors | 'none' | 'secondary' | 'link' | 'flat'
     size?: Sizes,
     icon?: boolean
     circle?: boolean
@@ -42,7 +42,7 @@ export interface ButtonEvents {
 }
 
 const typeDefs: Required<TypeDefs<Omit<ButtonProps, keyof ButtonHTMLAttributes>>> = {
-    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link', 'flat'],
     size: ['large', 'default', 'small', 'mini'],
     icon: Boolean,
     circle: Boolean,

package/components/button/styles.ts

@@ -245,7 +245,8 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             }
 
             &.k-none,
-            &.k-link {
+            &.k-link,
+            &.k-flat {
                 background: transparent;
                 &, &:hover {
                     border: none;
@@ -258,6 +259,10 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 background: ${button.none.hoverBgColor};
             }
 
+            &.k-flat {
+                background: ${button.none.hoverBgColor};
+            }
+
             ${sizes.map(size => {
                 const styles = button[size];
 

package/components/cascader/index.md

@@ -30,6 +30,8 @@ sidebar: doc
 | loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `(data: CascaderData<V>) => any` | `undefined` |
 | filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `(keywords: string, data: CascaderData<V>) => boolean` | `(keywords: string, data: CascaderData<V>) => data.label.includes(keywords)` |
 | show | 是否展示菜单项 | `boolean` | `false` |
+| fields | 指定`value` `label` `children` `disabled`字段名 | `CascaderFields<CascaderData<any>>` | `{ value: 'value', label: 'label', children: 'children', disabled: 'disabled' }` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` &#124; `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` | `{my: 'left top+8', 'left bottom'}` |
 
 ```ts
 export type CascaderData<V> = {
@@ -40,6 +42,22 @@ export type CascaderData<V> = {
     children?: CascaderData<V>[]
 }
 
+export type CascaderFields<Data> = {
+    value?: keyof Data,
+    label?: keyof Data,
+    children?: keyof Data,
+    disabled?: keyof Data,
+}
+
+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/cascader/index.spec.ts

@@ -205,4 +205,60 @@ describe('Cascader', () => {
         expect(instance.get('value')).to.eql(['hunan', 'haidian']);
         expect(element.textContent).to.eql('湖南 / 海淀区');
     });
+
+    it('specify fields', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Cascader} = this;
+                <Cascader data={this.get('data')}
+                    v-model="value"
+                    fields={{value: 'v', label: 'l', children: 'c'}}
+                />
+            `;
+            static defaults() {
+                return {
+                    value: [],
+                    data: [
+                        {
+                            v: 'beijing',
+                            l: '北京',
+                            c: [
+                                {
+                                    v: 'haidian',
+                                    l: '海淀区'
+                                },
+                            ]
+                        },
+                        {
+                            v: 'hunan',
+                            l: '湖南',
+                            c: [
+                                {
+                                    v: 'haidian',
+                                    l: '海淀区'
+                                },
+                            ]
+                        },
+                    ]
+                }
+            }
+            private Cascader = Cascader;
+        }
+
+        const [instance, element] = mount(Demo);
+        const select = element;
+        select.click();
+        await wait();
+        const dropdown1 = getElement('.k-cascader-menu')!;
+        const [item1] = dropdown1.querySelectorAll<HTMLElement>(':scope > .k-dropdown-item');
+        item1.click();
+        await wait();
+        expect(dropdown1.innerHTML).to.matchSnapshot();
+        const dropdown2 = getElement('.k-cascader-menu')!;
+        const [item11,] = dropdown2.querySelectorAll<HTMLElement>(':scope > .k-dropdown-item');
+        item11.click();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(instance.get('value')).to.eql(['beijing', 'haidian']);
+    });
 });

package/components/cascader/index.ts

@@ -7,22 +7,39 @@ import {useValue} from './useValue';
 import {useLabel} from './useLabel';
 import {useLoad} from './useLoad';
 import {useFilterable} from './useFilterable';
+import { useFields } from './useFields';
 
-export interface CascaderProps<V = any, Multipe extends boolean = boolean> extends BaseSelectProps<V[], Multipe> {
-    data?: CascaderData<V>[]
+export interface CascaderProps<
+    V = any,
+    Multipe extends boolean = boolean,
+    Data extends BaseCascaderData = CascaderData<V>
+> extends BaseSelectProps<V[], Multipe> {
+    data?: Data[],
     trigger?: 'click' | 'hover'
     changeOnSelect?: boolean
     format?: (labels: string[]) => string
-    loadData?: (data: CascaderData<V>) => any 
-    filter?: (keywords: string, data: CascaderData<V>) => boolean,
+    loadData?: (data: Data) => any 
+    filter?: (keywords: string, data: Data) => boolean,
+    fields?: CascaderFields<Data>,
+}
+
+export type CascaderFields<Data> = {
+    value?: keyof Data,
+    label?: keyof Data,
+    children?: keyof Data,
+    disabled?: keyof Data,
 }
 
-export type CascaderData<V> = {
+export interface BaseCascaderData {
+    loaded?: boolean
+    [key: string]: any
+}
+
+export interface CascaderData<V> extends BaseCascaderData {
     value: V 
     label: string
-    disabled?: boolean
-    loaded?: boolean
     children?: CascaderData<V>[]
+    disabled?: boolean
 }
 
 export interface CascaderEvents extends BaseSelectEvents { }
@@ -37,6 +54,7 @@ const typeDefs: Required<TypeDefs<CascaderProps>> = {
     format: Function,
     loadData: Function,
     filter: Function,
+    fields: Object,
 };
 
 const defaults = (): Partial<CascaderProps> => ({
@@ -44,21 +62,26 @@ const defaults = (): Partial<CascaderProps> => ({
     data: [],
     trigger: 'click',
     format: (labels: string[]) => labels.join(' / '),
-    filter: (keywords: string, data: CascaderData<any>) => data.label.includes(keywords),
 });
 
 export class Cascader<
     V = any,
     Multipe extends boolean = false,
-> extends BaseSelect<CascaderProps<V, Multipe>, CascaderEvents, CascaderBlocks<V>> {
+    Data extends BaseCascaderData = CascaderData<V>
+> extends BaseSelect<CascaderProps<V, Multipe, Data>, CascaderEvents, CascaderBlocks<V>> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
 
+    private fields = useFields();
     private value = useValue();
-    private label = useLabel();
-    private load = useLoad();
-    private filterable = useFilterable(this.input.keywords, this.value.setValue);
+    private label = useLabel(this.fields);
+    private load = useLoad(this.fields);
+    private filterable = useFilterable(
+        this.input.keywords,
+        this.value.setValue,
+        this.fields
+    );
     private positionObj = {my: 'left top', at: 'right top', collisionDirection: ['left']};
 
     protected getPlaceholder() {

package/components/cascader/index.vdt

@@ -3,12 +3,13 @@ import {Icon} from '../icon';
 import {_$} from '../../i18n';
 import {makeMenuStyles, makeFilterMenuStyles} from './styles';
 
-const {data, trigger, filterable} = this.get();
+const {data, trigger, filterable, fields} = this.get();
 const baseMenuStyles = makeMenuStyles();
 const classNameObj = {
     'k-cascader-menu': true,
     [baseMenuStyles]: true,
 };
+const getField = this.fields;
 
 const {values, isShowed, isSelected, onSelect, toggleShowedValue} = this.value;
 const Options = (data, level, loaded, parentSelected) => {
@@ -21,15 +22,15 @@ const Options = (data, level, loaded, parentSelected) => {
     }
 
     return data.map((item, index) => {
-        const value = item.value;
+        const value = getField(item, 'value');
         const showed = isShowed(value, level);
         const selected = parentSelected && isSelected(value, level);
-        const children = item.children;
+        const children = getField(item, 'children');
 
         const Item = () => {
             return (
                 <DropdownItem
-                    disabled={item.disabled}
+                    disabled={getField(item, 'disabled')}
                     class={{
                         'k-cascader-option': true,
                         'k-active': showed,
@@ -37,7 +38,7 @@ const Options = (data, level, loaded, parentSelected) => {
                     }}
                     ev-select={onSelect.bind(null, value, level)}
                 >
-                    {item.label}
+                    {getField(item, 'label')}
                     <Icon v-if={children}
                         class="k-cascader-arrow ion-ios-arrow-right"
                     /> 
@@ -50,10 +51,10 @@ const Options = (data, level, loaded, parentSelected) => {
                 <Dropdown
                     position={this.positionObj}
                     of="parent"
-                    disabled={item.disabled}
+                    disabled={getField(item, 'disabled')}
                     trigger={trigger}
                     value={showed}
-                    ev-$changed:value={toggleShowedValue.bind(null, value, level)}
+                    ev-$change:value={toggleShowedValue.bind(null, value, level)}
                     ev-show={this.load.bind(null, item)}
                 >
                     {Item()}
@@ -94,7 +95,7 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
                 >
                     {(() => {
                         // highlight keywords
-                        const label = $value.map(item => item.label).join(' / ');
+                        const label = $value.map(item => getField(item, 'label')).join(' / ');
                         const labels = label.split(keywords);
                         const length = labels.length; 
                         return labels.map((item, index) => {

package/components/cascader/styles.ts

@@ -33,7 +33,8 @@ setDefault(() => {
 export function makeMenuStyles() {
     return css`
         min-width: ${cascader.width} !important;
-        min-height: ${cascader.height};
+        height: ${cascader.height};
+        overflow: auto;
         .k-cascader-arrow {
             float: right;
             height: 100%;

package/components/cascader/useFields.ts

@@ -0,0 +1,22 @@
+import {useInstance} from 'intact';
+import type {Cascader, CascaderData, BaseCascaderData, CascaderFields} from './';
+
+export function useFields() {
+    const instance = useInstance() as Cascader;
+
+    return function getField<
+        Data extends BaseCascaderData = CascaderData<unknown>,
+        Key extends keyof Data = keyof Data
+    >(data: Data, key: Key): Data[Key] {
+        const {fields} = instance.get();
+
+        if (fields) {
+            const field = fields[key as keyof CascaderFields<Data>] as Key;
+            if (field) {
+                return data[field];
+            }
+        }
+
+        return data[key];
+    }
+}

package/components/cascader/useFilterable.ts

@@ -1,26 +1,41 @@
 import {useInstance} from 'intact';
-import type {Cascader, CascaderData} from './';
+import type {Cascader, CascaderData, BaseCascaderData} from './';
 import {State} from '../../hooks/useState';
-import type {Value} from './useValue'
+import type {Value} from './useValue';
+import type {useFields} from './useFields';
 
 export function useFilterable(
     keywords: State<string>,
     setValue: (value: Value) => void, 
+    getField: ReturnType<typeof useFields>
 ) {
     const instance = useInstance() as Cascader;
 
     function filter() {
-        const {data, filter} = instance.get();
         const ret: CascaderData<any>[][] = [];
 
-        const loop = (data: CascaderData<any>[], prefix: CascaderData<any>[] = [], valid = false, disabled = false) => {
+        let {data, filter} = instance.get();
+        if (!filter) {
+            filter = (keywords: string, data: CascaderData<any>) => {
+                return getField(data, 'label').includes(keywords);
+            }
+        }
+
+        const loop = (
+            data: CascaderData<any>[],
+            prefix: CascaderData<any>[] = [],
+            valid = false,
+            disabled = false
+        ) => {
             data.forEach(item => {
                 const _valid = valid || filter!(keywords.value, item);
-                const _disabled = disabled || item.disabled;
+                const _disabled = disabled || getField(item, 'disabled');
                 const _prefix = prefix.slice(0);
                 _prefix.push(item);
-                if (item.children) {
-                    loop(item.children, _prefix, _valid, _disabled);
+
+                const children = getField(item, 'children');
+                if (children) {
+                    loop(children, _prefix, _valid, _disabled);
                 } else if (_valid) {
                     (_prefix as any).disabled = _disabled;
                     ret.push(_prefix);
@@ -33,7 +48,7 @@ export function useFilterable(
     }
 
     function selectByFilter(data: CascaderData<any>[]) {
-        const value = data.map(item => item.value);
+        const value = data.map(item => getField(item, 'value'));
         setValue(value);
     }
 

package/components/cascader/useLabel.ts

@@ -3,11 +3,14 @@ import type {Cascader, CascaderData} from './';
 import {useState, watchState} from '../../hooks/useState';
 import {isNullOrUndefined} from 'intact-shared';
 import {useBaseLabel} from '../select/useBaseLabel';
+import type {useFields} from './useFields';
 
 // treat value as string
 type CascaderStringData = CascaderData<string>
 
-export function useLabel() {
+export function useLabel(
+    getField: ReturnType<typeof useFields>
+) {
     const instance = useInstance() as Cascader;
 
     function findLabel(data: CascaderStringData[], value: string[]) {
@@ -19,10 +22,10 @@ export function useLabel() {
 
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
-                if (item.value === value[level]) {
-                    labels.push(item.label); 
+                if (getField(item, 'value') === value[level]) {
+                    labels.push(getField(item, 'label')); 
 
-                    const children = item.children;
+                    const children = getField(item, 'children');
                     if (children) {
                         loop(children, level + 1);
                     }

package/components/cascader/useLoad.ts

@@ -1,14 +1,16 @@
 import {useInstance} from 'intact';
 import type {Cascader, CascaderData} from './';
+import type {useFields} from './useFields';
 
-export function useLoad() {
+export function useLoad(getField: ReturnType<typeof useFields>) {
     const instance = useInstance() as Cascader;
 
     async function loadData(item: CascaderData<any>) {
         const {loadData} = instance.get();
         if (!loadData) return;
 
-        if (item.children && !item.children.length && !item.loaded) {
+        const children = getField(item, 'children');
+        if (children && !children.length && !item.loaded) {
             await loadData(item);
             item.loaded = true;
             instance.forceUpdate();

package/components/code/demos/basic.md

@@ -12,7 +12,7 @@ order: 0
 > `import {Code} from '@king-design/react';`
 
 组件可以通过`v-model`双向绑定编辑的代码，通过`height`指定组件的高度（需要带单位），默认`100%`；通过
-`language`可以指定编程语言，默认为`javasript`
+`language`可以指定编程语言，默认为`javascript`
 
 > `Code`组件基于[Monaco Editor@0.26](https://github.com/Microsoft/monaco-editor)，使用该组件之前，你需要
 > 安装[monaco-editor-webpack-plugin@4](https://github.com/Microsoft/monaco-editor-webpack-plugin)插件，

package/components/colorpicker/index.md

@@ -14,3 +14,19 @@ sidebar: doc
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | disabled | 是否禁用 | `boolean` | `false` |
 | show | 是否展示颜色选择面板 | `boolean` | `false` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom', collison: 'fit'}` |
+
+```ts
+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/colorpicker/index.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
 import {Container} from '../portal';
+import {Dropdown, DropdownProps} from '../dropdown';
 
 export interface ColorpickerProps {
     value: string
@@ -10,6 +11,7 @@ export interface ColorpickerProps {
     disabled?: boolean
     container?: Container
     show?: boolean
+    position?: DropdownProps['position']
 }
 
 export interface ColorpickerEvents { }
@@ -24,6 +26,7 @@ const typeDefs: Required<TypeDefs<ColorpickerProps>> = {
     disabled: Boolean,
     container: [Function, String],
     show: Boolean,
+    position: Dropdown.typeDefs.position,
 };
 
 const defaults = (): Partial<ColorpickerProps> => ({
@@ -33,6 +36,7 @@ const defaults = (): Partial<ColorpickerProps> => ({
         '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
     ], 
     size: 'default',
+    position: {collision: 'fit'},
 });
 
 export class Colorpicker extends Component<ColorpickerProps, ColorpickerEvents> {

package/components/colorpicker/index.vdt

@@ -6,7 +6,8 @@ import {Dropdown, DropdownMenu} from '../dropdown';
 
 const {
     className, transition, presets,
-    value, size, disabled, container
+    value, size, disabled, container,
+    position,
 } = this.get();
 
 const classNameObj = {
@@ -19,7 +20,7 @@ const classNameObj = {
 
 <div class={classNameObj} {...getRestProps(this)}>
     <Dropdown
-        position={{my: 'left top+8', at: 'left bottom', collision: 'flip'}}
+        position={position}
         trigger="click"
         disabled={disabled}
         container={container}

package/components/copy/demos/basic.md

@@ -0,0 +1,12 @@
+---
+title: 基本用法
+order: 0
+---
+
+组件接收任意合法的字符串当做`text`值
+
+```vdt
+import {Copy} from 'kpc';
+
+<Copy text="Hello King Desgin!" />
+```

package/components/copy/demos/children.md

@@ -0,0 +1,37 @@
+---
+title: 自定义复制按钮
+order: 1
+---
+
+传入一个唯一的子元素当作`children`，则点击该子元素即可复制相应内容
+
+> `Copy`组件不会产生任何额外的元素
+
+```vdt
+import {Copy, Button, Icon} from 'kpc';
+
+<div>
+    <Copy text="Hello King Desgin!">
+        Copy
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Button>Copy</Button>
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Button type="link" size="mini">Copy</Button>
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Icon class="ion-ios-copy" size="large" hoverable />
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Button icon circle>
+            <Icon class="ion-ios-copy-outline" />
+        </Button>
+    </Copy>
+</div>
+```
+
+```styl
+.k-copy
+    margin-right 18px
+```

package/components/copy/index.md

@@ -0,0 +1,21 @@
+---
+title: 复制
+category: 组件
+order: 99
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 复制文案值 | `string` | `undefined` |
+| showMessage | 复制成功/失败时，是否展示Message | `boolean` | `true` |
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| success | 复制成功时触发 | `(value: string) => void` |
+| error | 复制失败时触发 | `() => void` |
+