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

package/components/button/demos/disabled.md

@@ -10,9 +10,20 @@ import {Button, Icon} from 'kpc';
 
 <div>
     <Button disabled>disabled</Button>
-    <Button disabled type="none">disabled text</Button>
     <Button disabled icon circle><Icon class="k-icon-search" /></Button>
-    <Button disabled type="link">link</Button>
-    <Button disabled type="flat">flat</Button>
+    <Button type="primary" disabled>primary</Button>
+    <Button type="secondary" disabled>secondary</Button>
+    <Button type="warning" disabled>warning</Button>
+    <Button type="danger" disabled>danger</Button>
+    <Button type="success" disabled>success</Button>
+    <Button type="none" disabled>none</Button>
+    <Button type="link" disabled>link</Button>
+    <Button type="flat" disabled>flat</Button>
+    <Button color="red" disabled>custom</Button>
 </div>
 ```
+
+```styl
+.k-btn
+    margin 0 20px 20px 0
+```

package/components/button/index.vdt

@@ -49,9 +49,9 @@ const classNameObj = {
     [cls('loading')]: loading,
     [cls('fluid')]: fluid,
     [cls('active')]: checked,
+    [cls('custom')]: color,
     [cls('disabled')]: disabled || loading,
     [cls('ghost')]: ghost,
-    [cls('custom')]: color,
     [makeButtonStyles(k, iconSide, color)]: true,
 };
 

package/components/button/styles.ts

@@ -31,7 +31,7 @@ const sizes = ['large', 'small', 'mini'] as const;
 const btnStyles = {
     get color() { return theme.color.text },
     bgColor: '#fff',
-    lineHeight: '1.15',
+    lineHeight: '1',
     get padding() { return `0 16px` },
     get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
@@ -230,6 +230,13 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                             background: ${palette(typeStyles.bgColor, 1)};
                             border-color: ${palette(typeStyles.borderColor, 1)};
                         }
+                        &.${k}-disabled {
+                            &, &:hover {
+                                background: ${palette(typeStyles.bgColor, -2)};
+                                color: ${palette(typeStyles.color, -2)};
+                                border-color: ${palette(typeStyles.borderColor, -2)};
+                            }
+                        }
                     }
                 `;
             })}
@@ -245,6 +252,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                 &:active {
                     background: ${secondary.activeBgColor};
                 }
+                &.${k}-disabled {
+                    border: none;
+                }
             }
 
             
@@ -260,6 +270,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                     &:active {
                         background: ${palette(color, -3)};
                     }
+                    &.${k}-disabled {
+                        border: none;
+                    }
                 }
             `}
 

package/components/dialog/styles.ts

@@ -52,12 +52,12 @@ const defaults = {
         padding: `0 24px`,
         bodyMarginTop: `-25px`,
         tipIconMarginBottom: '10px',
-        tipIconFontSize: '37px',
-        tipIconLineHeight: '37px',
+        tipIconFontSize: '24px',
+        tipIconLineHeight: '24px',
 
         // with title
         titleFontWeight: '500',
-        titleTipIconFontSize: '37px',
+        titleTipIconFontSize: '24px',
         titleFontSize: '14px',
         wrapperPaddingLeft: '8px',
         titleBodyMarginTop: '-36px',

package/components/dropdown/item.ts

@@ -7,6 +7,7 @@ import {DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 import { useConfigContext } from '../config';
+import type { Tooltip } from '../tooltip/tooltip';
 
 export interface DropdownItemProps {
     disabled?: boolean
@@ -61,8 +62,12 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
         if (this.get('hideOnSelect')) {
             // hide all dropdowns
             let dropdown = this.dropdown;
-            do { dropdown!.hide(true); }
-            while (dropdown = dropdown!.dropdown);
+            do {
+                if (!(dropdown as Tooltip).$isTooltip) {
+                    dropdown!.hide(true);
+                }
+                dropdown = dropdown!.dropdown;
+            } while (dropdown);
         }
     }
 

package/components/editable/demos/textarea.md

@@ -0,0 +1,53 @@
+---
+title: 多行使用
+order: 2
+---
+
+当`rows`属性默认为`1`，此时为单行输入，设置成`'auto'`时，组件的高度将会自适应。
+你也可以通过对象`{min, max}`来设置文本框最小和最大的自动调整行数。
+
+```vdt
+import {Editable} from 'kpc';
+
+<div>
+    <Editable v-model="text" ref="__test" rows="auto">
+        <i class="ion-ios-location"></i>
+        <a href="">{this.get('text')}</a>
+    </Editable>
+    <br />
+    <Editable v-model="text2" rows={5}>
+        <i class="ion-ios-location"></i>
+        <a href="">{this.get('text2')}</a>
+    </Editable>
+    <br />
+    <Editable v-model="text3" rows={{min: 3, max: 4}}>
+        <i class="ion-ios-location"></i>
+        <a href="">{this.get('text3')}</a>
+    </Editable>
+</div>
+```
+
+```styl
+.ion-ios-location
+    margin-right 10px
+```
+
+```ts
+interface Props {
+    text?: string
+    text2?: string
+    text3?: string
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            text: 'editable text auto',
+            text2: 'editable text for 5 rows',
+            text3: 'editable text for many rows',
+        };
+    }
+}
+```

package/components/editable/index.md

@@ -17,7 +17,13 @@ sidebar: doc
 | tip | 编辑按钮提示文案 | `string` | `"编辑"` |
 | trim | 是否去掉前后空白字符 | `boolean` | `true` |
 | invalid | 是否为验证失败状态 | `boolean` | `false` |
-
+| rows | 是否自动折行，以及行数控制 | `string`|`number`|`auto`| `AutoRows` | `1` |
+```ts
+type AutoRows = {
+    min?: number
+    max?: number
+} 
+```
 # 事件
 
 | 事件名 | 说明 | 参数 |

package/components/editable/index.spec.ts

@@ -1,5 +1,6 @@
 import BasicDemo from '~/components/editable/demos/basic';
 import ValidateDemo from '~/components/editable/demos/validate';
+import TextAreaDemo from '~/components/editable/demos/textarea';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import {Editable} from './';
 import {Component, findDomFromVNode} from 'intact';
@@ -120,4 +121,30 @@ describe('Editable', () => {
         input = element.querySelector("input") as HTMLInputElement;
         expect(input.value).to.eql('aa');
     });
+
+    it('should auto use input or textarea', async () => {
+        const [instance, element] = mount(TextAreaDemo);
+        const editable = instance.refs.__test as Editable;
+        // @ts-ignore
+        editable.edit();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+
+        let input = element.querySelector('input') as HTMLInputElement;
+        let textarea = element.querySelector('textarea') as HTMLTextAreaElement;
+        expect(input).to.be.null;
+        
+        textarea.value = 'test';
+        dispatchEvent(textarea, 'blur');
+        await wait();
+        expect(instance.get('text')).to.eql('test');
+
+        editable.set('rows', 1);
+        await wait();
+        // @ts-ignore
+        editable.edit();
+        await wait();
+        let textarea2 = element.querySelector('textarea') as HTMLTextAreaElement;
+        expect(textarea2).to.be.null;
+    });
 });

package/components/editable/index.ts

@@ -2,7 +2,7 @@ import {Component, TypeDefs, createRef, nextTick, Children} from 'intact';
 import template from './index.vdt';
 import {_$} from '../../i18n';
 import {bind} from '../utils';
-import type {Input} from '../input';
+import type {Input, AutoRows} from '../input';
 import type {Events} from '../types';
 import { useConfigContext } from '../config';
 
@@ -17,6 +17,7 @@ export interface EditableProps<V extends Value = Value> {
     tip?: Value, 
     trim?: boolean,
     invalid?: boolean,
+    rows?: string | number | 'auto' | AutoRows
 }
 
 export interface EditableEvents<V extends Value = Value> {
@@ -33,12 +34,14 @@ const typeDefs: Required<TypeDefs<EditableProps>> = {
     tip: [String, Number],
     trim: Boolean,
     invalid: Boolean,
+    rows: [String, Number, 'auto', Object],
 };
 
 const defaults = (): Partial<EditableProps> => ({
     required: true,
     tip: _$('编辑'),
     trim: true,
+    rows: 1
 });
 
 const events: Events<EditableEvents> = {

package/components/editable/index.vdt

@@ -3,11 +3,12 @@ import {Input} from '../input';
 import {Icon} from '../icon';
 import {makeStyles} from './styles';
 import { Tooltip } from '../tooltip';
+import {isNullOrUndefined} from 'intact-shared';
 
 const {
     children, className, editing, 
     value, validate, disabled, 
-    tip, invalid
+    tip, invalid, rows
 } = this.get();
 const { k } = this.config;
 
@@ -19,19 +20,27 @@ const classNameObj = {
     [className]: className,
     [makeStyles(k)]: true
 };
+const isTextArea = !isNullOrUndefined(rows) && rows != '1';
+
+const inputProps = {
+    autoWidth: !isTextArea,
+    fluid: isTextArea,
+    ...(isTextArea && { type: 'textarea' }),
+    rows,
+    ...((!isTextArea || rows === 'auto') && {size: 'mini'})
+};
 
 <div {...getRestProps(this)} class={classNameObj}>
     <div class="c-ellipsis">
         <template v-if={!editing}>{children}</template>
         <Input v-else
-            size="mini"
-            defaultValue={value} 
+            defaultValue={value}
             ev-blur={this.onBlur}
             ev-keydown={this.onKeydown}
             ref={this.inputRef}
             frozenOnInput
             ev-$mounted={this.select}
-            autoWidth
+            {...inputProps}
         />
     </div>
     <Tooltip v-if={!disabled && !editing} content={tip}>

package/components/editable/styles.ts

@@ -6,7 +6,7 @@ import { cache } from '../utils';
 
 const defaults = {
     iconGap: '0 0 0 8px',
-
+    get smallPadding() { return theme.small.padding },
     // invalid
     invalid: {
         get border() { return `1px solid ${theme.color.danger}`}, 

package/components/ellipsis/demos/hoverable.md

@@ -0,0 +1,23 @@
+---
+title: hoverable
+order: 3
+---
+
+鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`hoverable`属性
+
+```vdt
+import {Ellipsis} from 'kpc';
+
+<div>
+    <Ellipsis style={{width: '50px'}} hoverable>hoverable</Ellipsis>
+</div>
+```
+
+```styl
+.k-split
+    border 1px solid #ccc
+    height 200px
+    margin-bottom 20px
+.panel
+    margin 10px
+```

package/components/ellipsis/index.ts

@@ -10,6 +10,7 @@ export interface EllipsisProps {
     disabled?: boolean,
     position?: Position | 'left' | 'bottom' | 'right' | 'top',
     theme?: 'light' | 'dark',
+    hoverable?: boolean
 }
 
 const typeDefs: Required<TypeDefs<EllipsisProps>> = {
@@ -17,11 +18,13 @@ const typeDefs: Required<TypeDefs<EllipsisProps>> = {
     disabled: Boolean,
     position: [Object, 'left', 'bottom', 'right', 'top'],
     theme: ['light', 'dark'],
+    hoverable: Boolean
 };
 
 const defaults = (): Partial<EllipsisProps> => ({
     disabled: false,
-    theme: 'light'
+    theme: 'light',
+    hoverable: false
 });
 
 export class Ellipsis extends Component<EllipsisProps> {

package/components/ellipsis/index.vdt

@@ -4,7 +4,8 @@ import {getRestProps, addStyle} from '../utils';
 
 const {
     children, className, maxLines, 
-    disabled, position, theme, style
+    disabled, position, theme, style,
+    hoverable
 } = this.get();
 const { k } = this.config;
 
@@ -30,6 +31,7 @@ const wrapper = <div class={{
         position={position}
         theme={theme}
         class={className}
+        hoverable={hoverable}
     >
         {wrapper}
         <b:content>{children}</b:content> 

package/components/input/demos/size.md

@@ -3,7 +3,7 @@ title: 尺寸
 order: 2
 ---
 
-添加`size`属性，定义如下尺寸：`large`, `default`，`small`，`mini`
+添加`size`属性，定义如下尺寸：`large`, `default`，`small`，`mini`；`textarea`使用`size`时，仅支持`rows`为`auto`
 
 ```vdt
 import {Input, Button, Icon} from 'kpc';
@@ -30,6 +30,14 @@ import {Input, Button, Icon} from 'kpc';
     </Input>
     <br />
     <Input value="mini" size="mini" />
+    <br />
+    <Input value="textarea auto mini" size="mini" type="textarea" rows="auto"/>
+    <br />
+    <Input value="textarea auto small" size="small" type="textarea" rows="auto"/>
+    <br />
+    <Input value="textarea auto default" size="default" type="textarea" rows="auto"/>
+    <br />
+    <Input value="textarea auto large" size="large" type="textarea" rows="auto"/>
 </div>
 ```
 

package/components/input/styles.ts

@@ -4,7 +4,12 @@ import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
 import {Input} from './';
 import { cache } from '../utils';
-
+const textareaSize = {
+    mini: '0',
+    small: '1px',
+    default: '5px',
+    large: '7px'
+}
 const defaults = deepDefaults(
     {
         get transition() { return theme.transition.middle },
@@ -55,14 +60,16 @@ const defaults = deepDefaults(
     },
     sizes.reduce((memo, size) => {
         const styles = theme[size];
+        const textareaStyles = textareaSize[size];
         memo[size] = {
             get fontSize() { return styles.fontSize },
             get height() { return styles.height },
             get paddingGap() { return styles.padding },
+            get padding() {return textareaStyles }
         }
 
         return memo;
-    }, {} as Record<Sizes, {fontSize: string, height: string, paddingGap: string}>),
+    }, {} as Record<Sizes, {fontSize: string, height: string, paddingGap: string, padding: string}>),
 )
 
 let input: typeof defaults;
@@ -255,6 +262,9 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 .${k}-input-wrapper {
                     height: ${styles.height};
                     padding: 0 ${styles.paddingGap};
+                    .${k}-textarea {
+                        padding: ${styles.padding} ${styles.paddingGap};
+                    }
                 }
             `;
             

package/components/menu/styles.ts

@@ -276,9 +276,6 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
             .${k}-menu-header {
                 padding: 0;
             }
-            .${k}-menu-header {
-                padding: 0;
-            }
             .${k}-menu-body {
                 overflow: hidden;
                 padding: 0;

package/components/select/demos/immutable.md

@@ -7,8 +7,9 @@ order: 14
 
 ```vdt
 import {Select, Option, OptionGroup} from 'kpc';
+
 <div>
-    <Select v-model="day" multiple filterable clearable>
+    <Select v-model="days" multiple filterable clearable>
         <Option value="Monday">星期一</Option>
         <Option value="Tuesday" disabled>星期二</Option>
         <Option value="Wednesday">星期三</Option>
@@ -17,21 +18,21 @@ import {Select, Option, OptionGroup} from 'kpc';
         <Option value="Saturday">星期六</Option>
         <Option value="Sunday">星期天</Option>
     </Select>
-    You selected: {JSON.stringify(this.get('day'))} 
+    You selected: {JSON.stringify(this.get('days'))} 
 </div>
 ```
 
 ```ts
 interface Props {
-   day?: string[]
+   days?: string[]
 }
 
-export default class extends Component {
+export default class extends Component<Props> {
     static template = template;
     static defaults() {
         return {
-            day: ['Tuesday', 'Sunday', 'Wednesday'],
+            days: ['Tuesday', 'Sunday', 'Wednesday'],
         } as Props;
     }
 }
-```
+```

package/components/select/index.spec.ts

@@ -9,6 +9,7 @@ import {Tooltip} from '../tooltip';
 import {Component} from 'intact';
 import {Select, Option} from '../select';
 import SearchableDemo from '~/components/select/demos/searchable';
+import ImmutableDemo from '~/components/select/demos/immutable';
 
 describe('Select', () => {
     afterEach((done) => {
@@ -288,6 +289,36 @@ describe('Select', () => {
         expect(instance.get('days')).include('Monday')
     });
 
+    it('disabled option does not allow clearable and close', async () => {
+        const [instance, element] = mount(ImmutableDemo);
+
+        instance.set('days', ['Tuesday', 'Friday']);
+        await wait();
+        expect(element.outerHTML).to.matchSnapshot();
+        const [clear1] = element.querySelectorAll<HTMLElement>('.k-select-clear');
+        clear1.click();
+        await wait();
+        const [tag1] = element.querySelectorAll<HTMLElement>('.k-tag');
+        expect(tag1.className).not.contain("k-closable");
+        expect(instance.get('days')).to.eql(['Tuesday', 'Friday']);
+
+        instance.set('days', ['Monday', 'Tuesday']);
+        await wait();
+        const [clear2] = element.querySelectorAll<HTMLElement>('.k-select-clear');
+        clear2.click();
+        await wait();
+        expect(instance.get('days')).to.eql(['Tuesday']);
+
+        instance.set('days', ['Monday', 'Wednesday']);
+        await wait();
+        const [clear3] = element.querySelectorAll<HTMLElement>('.k-select-clear');
+        clear3.click();
+        await wait();
+        expect(instance.get('days')).to.eql([]);
+
+        // expect(clear).to.be.null;
+    });
+
     // it('should trigger change event correctly', async () => {
         // const spy = sinon.spy();
 

package/components/select/useImmutable.ts

@@ -41,4 +41,4 @@ export function useImmutable() {
     instance.on('$receive:children', setImmutableValues);
 
     return { immutableValues, isClosable };
-}
+}

package/components/switch/styles.ts

@@ -185,6 +185,11 @@ export const makeStyles = cache(function makeStyles(k: string) {
             `
         })}
 
+        &.${k}-small .${k}-switch-on,
+        &.${k}-small .${k}-switch-off {
+            font-size: 10px;
+        }
+
         // checked
         &.${k}-checked {
             .${k}-switch-bar,

package/components/table/cell.ts

@@ -18,6 +18,7 @@ export interface TableCellProps {
     rowspan: number
     onClickArrow: (e: MouseEvent) => void 
     hasChildren: boolean
+    loaded: boolean
 }
 
 export class TableCell extends Component<TableCellProps> {

package/components/table/cell.vdt

@@ -3,11 +3,12 @@ import {get, noop} from 'intact-shared';
 import {Button} from '../button';
 import {Icon} from '../icon';
 import {getTextByChildren} from '../utils';
+import {Ellipsis} from '../ellipsis';
 
 const {
     props, rowIndex, columnIndex, offset,
     data, checkType, indent, grid,
-    colspan, rowspan, onClickArrow, hasChildren,
+    colspan, rowspan, onClickArrow, hasChildren, loaded
 } = this.get();
 const { k } = this.config;
 
@@ -20,6 +21,10 @@ if (blocks) {
     }
 }
 
+if (props.ellipsis) {
+    children = <Ellipsis>{children}</Ellipsis>
+}
+
 let {className, style} = getClassAndStyleForFixed(props, offset, k, checkType);
 if (columnIndex === 0 && indent) {
     style || (style = {});
@@ -41,8 +46,10 @@ const classNameObj = {
         type="none" icon circle size="mini"
         class={`${k}-table-arrow`}
         ev-click={onClickArrow}
+        disabled={loaded === false}
     >
-        <Icon class={`${k}-icon-right`} size="small" />
+        <Icon v-if={loaded !== false} class={`${k}-icon-right`} size="small" />
+        <Icon v-else class={`${k}-tree-icon ion-load-c`} rotate />
     </Button>
     {children}
 </td>

package/components/table/column.ts

@@ -18,6 +18,7 @@ export interface TableColumnProps {
     exportCell?: (data: any, index: number) => string
     minWidth?: number
     hidden?: boolean
+    ellipsis?: boolean
 
     // passed by Table
     // offset: number
@@ -58,6 +59,7 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     exportCell: Function,
     minWidth: Number,
     hidden: Boolean,
+    ellipsis: Boolean,
 
     // offset: null,
     cols: null,