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

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/demos/group.md

@@ -4,7 +4,7 @@ order: 1
 ---
 
 将`Button`作为`ButtonGroup`的子元素，可以展示按钮组。给`ButtonGroup`添加`vertical`属性，
-可以是按钮组纵向排列。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
+可以使按钮组纵向排列。给`ButtonGroup`添加`separate`属性，可以在按钮之间插入间隔。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
 
 ```vdt
 import {Button, ButtonGroup, Icon} from 'kpc';
@@ -62,13 +62,13 @@ import {Button, ButtonGroup, Icon} from 'kpc';
         <Button value="shenzhen" size="small">深圳</Button>
     </ButtonGroup>
     <p>有间隔的按钮组</p>
-    <ButtonGroup checkType="radio" v-model="city" seperate>
+    <ButtonGroup checkType="radio" v-model="city" separate>
         <Button value="beijing">北京</Button>
         <Button value="shanghai">上海</Button>
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
-    <ButtonGroup seperate>
+    <ButtonGroup separate>
         <Button value="beijing" type="primary" disabled>北京</Button>
         <Button value="shanghai">上海</Button>
         <Button value="guangzhou">广州</Button>

package/components/button/group.ts

@@ -10,6 +10,7 @@ export interface ButtonGroupProps {
     checkType?: 'none' | 'radio' | 'checkbox' 
     fluid?: boolean
     seperate?: boolean
+    separate?: boolean
     btnWidth?: number | string
 }
 
@@ -19,6 +20,7 @@ const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
     fluid: Boolean,
     checkType: ['none', 'radio', 'checkbox'],
     seperate: Boolean,
+    separate: Boolean,
     btnWidth: [Number, String],
 };
 
@@ -35,6 +37,9 @@ export class ButtonGroup extends Component<ButtonGroupProps> {
 
     init() {
         provide(BUTTON_GROUP, this); 
+        if (typeof this.get().seperate === 'boolean') {
+            console.warn("`seperate` is a typo which will be removed in next version, please using `separate` instead");
+        }
     }
 
     setValue(v: any): void {

package/components/button/group.vdt

@@ -1,14 +1,14 @@
 import {getRestProps} from '../utils';
 import {makeButtonGroupStyles} from './styles';
 
-const {className, vertical, children, fluid, seperate} = this.get();
+const {className, vertical, children, fluid, seperate, separate} = this.get();
 const {k} = this.config;
 
 const classNameObj = {
     [`${k}-btns`]: true,
     [`${k}-vertical`]: vertical,
     [`${k}-fluid`]: fluid,
-    [`${k}-seperate`]: seperate,
+    [`${k}-separate`]: typeof separate === 'boolean' ? separate : separate,
     [className]: className,
     [makeButtonGroupStyles(k)]: true,
 };

package/components/button/index.md

@@ -33,7 +33,8 @@ sidebar: doc
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` | `"checkbox"` | `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
 | fluid | 是否宽度100% | `boolean` | `false` |
-| seperate | 是否展示间隔 | `boolean` | `false` |
+| seperate | 是否展示间隔，此属性为错别字，将会在下个版本被删除，请使用正确的属性 `separate`，若两个属性同时使用，则会优先使用`separate`属性 | `boolean` | `false` |
+| separate | 是否展示间隔 | `boolean` | `false` |
 
 # 方法
 

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;
+                    }
                 }
             `}
 
@@ -489,7 +502,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
 
         // horizontal
-        &:not(.${k}-vertical):not(.${k}-seperate) {
+        &:not(.${k}-vertical):not(.${k}-separate) {
             > .${k}-btn {
                 &:not(:first-child) {
                     margin-left: -1px;
@@ -527,7 +540,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
             
         // vertical
-        &.${k}-vertical:not(.${k}-seperate) {
+        &.${k}-vertical:not(.${k}-separate) {
             flex-direction: column;
             > .${k}-btn {
                 &:not(.${k}-btn-icon) {
@@ -562,8 +575,8 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
             }
         }
 
-        // seperate
-        &.${k}-seperate {
+        // separate
+        &.${k}-separate {
             gap: 8px;
         }
     `;

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 };
-}
+}