@king-design/intact 2.0.17-beta.0 → 2.1.0

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/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/datepicker/index.md

@@ -31,6 +31,7 @@ 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'}` |
 
 ```ts
 import {Dayjs} from 'dayjs';
@@ -41,6 +42,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/dialog/index.spec.ts

@@ -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 () => {

package/components/dropdown/dropdown.ts

@@ -62,7 +62,6 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
 
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
-    position: {},
     of: 'self',
 });
 

package/components/dropdown/item.ts

@@ -52,14 +52,15 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
     select() {
         if (this.parentDropdown) return;
 
+        // trigger select event firstly for Cascader update values
+        this.trigger('select');
+
         if (this.get('hideOnSelect')) {
             // hide all dropdowns
             let dropdown = this.dropdown;
             do { dropdown!.hide(true); }
             while (dropdown = dropdown!.dropdown);
         }
-
-        this.trigger('select');
     }
 
     hasSubMenu() {

package/components/dropdown/usePosition.ts

@@ -2,6 +2,7 @@ import {useInstance, findDomFromVNode} from 'intact';
 import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
 import {noop} from 'intact-shared';
+import {isObject} from 'intact-shared';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
 
@@ -16,7 +17,14 @@ export function usePosition() {
     });
 
     (['of', 'position'] as const).forEach(item => {
-        instance.watch(item, () => {
+        instance.watch(item, (newValue, oldValue) => {
+            // return if object is the same
+            if (
+                isObject(newValue) && isObject(oldValue) &&
+                JSON.stringify(newValue) === JSON.stringify(oldValue)
+            )  {
+                return;
+            }
             if (instance.get('value')) {
                 handle(noop);
             }

package/components/editable/index.ts

@@ -58,9 +58,23 @@ export class Editable<
     @bind
     private edit() {
         this.set('editing', true);
-        nextTick(() => {
-            this.inputRef.value!.select();
-        });
+        /**
+         * Intact will update in nextTick, but Vue will call
+         * call updated method in nextTick of this nextTick
+         * so we should do it after two nextTicks
+         * https://github.com/ksc-fe/kpc/issues/847
+         *
+         * use binding this.select to Input $mounted event instead
+         */
+        // nextTick(() => {
+            // nextTick(() => {
+                // this.inputRef.value!.select();
+            // });
+        // });
+    }
+
+    @bind select() {
+        this.inputRef.value!.select();
     }
 
     @bind

package/components/editable/index.vdt

@@ -33,6 +33,7 @@ const classNameObj = {
             ev-keydown={this.onKeydown}
             ref={this.inputRef}
             frozenOnInput
+            ev-$mounted={this.select}
         />
     </div>
 </div>

package/components/input/demos/autoRows.md

@@ -0,0 +1,44 @@
+---
+title: 文本框自适应高度
+order: 3.1
+---
+
+当`textarea`组件`rows`属性设置成`'auto'`时，组件的高度将会自适应，此时组件从1行高度开始，根据内容自动调整高度。
+你也可以通过对象`{min, max}`来设置文本框最小和最大的自动调整行数。
+
+> 自适应高度，文本框将禁用鼠标拖拽调整大小
+
+```vdt
+import {Input} from 'kpc';
+
+<div>
+    <Input
+        v-model="value1"
+        type="textarea"
+        placeholder="please enter"
+        fluid
+        rows="auto"
+    />
+    <br />
+    <br />
+    <Input
+        v-model="value2"
+        type="textarea"
+        placeholder="please enter"
+        fluid
+        rows={{min: 3, max: 5}}
+    />
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            value1: '',
+            value2: '',
+        }
+    }
+}
+```

package/components/input/demos/password.md

@@ -0,0 +1,12 @@
+---
+title: 密码框 
+order: 9
+---
+
+当`type="password"`时，添加`showPassword`属性，即可展示带显隐密码按钮的密码框
+
+```vdt
+import {Input} from 'kpc';
+
+<Input placeholder="password" type="password" showPassword ref="__demo" />
+```

package/components/input/demos/textarea.md

@@ -9,9 +9,9 @@ order: 3
 import {Input} from 'kpc';
 
 <div>
-    <Input type="textarea" placeholder="please enter" />
+    <Input type="textarea" placeholder="please enter" fluid />
     <br />
     <br />
-    <Input type="textarea" rows="5" placeholder="please enter" />
+    <Input type="textarea" rows="5" placeholder="please enter" fluid />
 </div>
 ```