@king-design/intact 2.0.0-beta.1 → 2.0.2

package/components/icon/styles.ts

@@ -1,5 +1,5 @@
 import {css, cx} from '@emotion/css';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
 import {IconProps} from './index';
 import {Sizes, Colors} from '../types';
@@ -8,18 +8,18 @@ import '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
 
-const iconStyles = {
+const defaults = {
+    get transition() { return theme.transition.small },
+
     fontSize: {
         default: '16px',
         large: '22px',
         small: '14px',
         mini: '12px',
-    }
+    },
 };
 
-const defaults = iconStyles;
-
-let icon: any;
+let icon: typeof defaults;
 setDefault(() => {
     icon = deepDefaults(theme, {icon: defaults}).icon;
 });
@@ -33,9 +33,10 @@ export default function makeStyles(color?: string) {
         line-height: 1;
         // display: inline-block;
         ${sizes.map(size => {
+            const fontSize = icon.fontSize[size];
             return css`
                 &.k-${size} {
-                    font-size: ${icon.fontSize[size]};
+                    font-size: ${fontSize};
                 }
             `
         })}
@@ -54,13 +55,15 @@ export default function makeStyles(color?: string) {
             animation: ${rotate} 1s infinite linear;
         }
         &:before {
+            position: relative;
             font-size: inherit;
+            z-index: 1;
         }
 
         // hoverable
         &.k-hoverable {
             cursor: pointer;
-            transition: color ${theme.transition};
+            transition: color ${icon.transition};
             &:hover {
                 color: ${theme.color.primary};
             }

package/components/input/demos/blocks.md

@@ -32,13 +32,13 @@ import {Input, Button, Icon} from 'kpc';
     </Input>
     <Input placeholder="please enter">
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="k-icon-search" /></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
     <Input placeholder="please enter">
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="k-icon-search" /></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

package/components/input/demos/clearable.md

@@ -6,7 +6,7 @@ order: 4
 指定`clearable`可以展示快速清除按钮，如果同时指定`stackClearIcon`则将清空按钮覆盖在`suffix`按钮上展示来节省空间
 
 ```vdt
-import {Input} from 'kpc';
+import {Input, Icon} from 'kpc';
 
 <div>
     <Input clearable placeholder="please enter" />
@@ -14,11 +14,11 @@ import {Input} from 'kpc';
     <Input value="disabled" clearable disabled />
     <br />
     <Input clearable placeholder="please enter">
-        <b:suffix><i class="ion-ios-search"></i></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
     <br />
     <Input clearable stackClearIcon placeholder="please enter">
-        <b:suffix><i class="ion-ios-search"></i></b:suffix>
+        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

package/components/input/demos/inline.md

@@ -0,0 +1,12 @@
+---
+title: 内联模式
+order: 8 
+---
+
+添加`inline`属性，即可展示内联输入框
+
+```vdt
+import {Input} from 'kpc';
+
+<Input placeholder="内联文字" inline />
+```

package/components/input/demos/size.md

@@ -21,7 +21,6 @@ import {Button} from 'kpc';
     </Input>
     <Input size="small" placeholder="please enter">
         <b:prefix><i class="ion-earth"></i></b:prefix>
-        <b:suffix><i class="ion-ios-search"></i></b:suffix>
         <b:append><Button size="small" icon type="primary"><i class="ion-ios-search"></i></Button></b:append>
     </Input>
     <Input size="small" placeholder="please enter" clearable>

package/components/input/index.md

@@ -11,36 +11,32 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 在原生`input`标签的`type`取值的基础上扩展了`textarea`值,当取该值时渲染成`<textarea>` | `String` | `"text"` |
-| name | 原生`input`标签的`name`属性 | `String` | `undefined` |
-| value | 输入框的值,可用`v-model`进行双向绑定 | `String` | `undefined` |
-| defaultValue | `input`的`defaultValue`，首次渲染使用该值 | `String` | `undefined` |
-| placeholder | 占位文案 | `String` | `undefined` |
-| readonly | 是否只读 | `Boolean` | `false` |
-| clearable | 是否展示快速清除按钮 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| type | 在原生`input`标签的`type`取值的基础上扩展了`textarea`值,当取该值时渲染成`<textarea>` | `string` | `"text"` |
+| name | 原生`input`标签的`name`属性 | `string` | `undefined` |
+| value | 输入框的值,可用`v-model`进行双向绑定 | `string` | `undefined` |
+| defaultValue | `input`的`defaultValue`，首次渲染使用该值 | `string` | `undefined` |
+| placeholder | 占位文案 | `string` | `undefined` |
+| readonly | 是否只读 | `boolean` | `false` |
+| clearable | 是否展示快速清除按钮 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
 | size | 组件尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| rows | 当`type = "textarea"`时，默认展示文本行数 | `Number` &#124; `String` | `2` |
-| spellcheck | `textarea`是否进行拼写检查 | `Boolean` | `false` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| autoWidth | 是否宽度随输入的文本的长度变化而变化 | `Boolean` | `false` |
-| width | 指定宽度，组件会加上单位`px` | `String`  &#124; `Number` | `undefined` |
-| tabindex | 原生`tabindex`属性 | `String` | `undefined` |
-| autocomplete | 原生`autocomplete`属性 | `String` | `undefined` |
-| nativeProps | 原生`input`或`textarea`上的属性 | `Object` | `undefined` |
-| stackClearIcon | 是否将清空按钮覆盖在`suffix`按钮上展示来节省空间 | `Boolean` | `false` |
-| frozenOnInput | 是否在输入的过程中冻结`value`更新到视图 | `Boolean` | `false` |
-
+| rows | 当`type = "textarea"`时，默认展示文本行数 | `number` &#124; `string` | `2` |
+| autoWidth | 是否宽度随输入的文本的长度变化而变化 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| width | 指定宽度，组件会加上单位`px` | `string`  &#124; `number` | `undefined` |
+| stackClearIcon | 是否将清空按钮覆盖在`suffix`按钮上展示来节省空间 | `boolean` | `false` |
+| frozenOnInput | 是否在输入的过程中冻结`value`更新到视图 | `boolean` | `false` |
+| inline | 是否展示内联模式 | `boolean` | `flase` |
 
 ## Search
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件输入的值 | `String` | `""` |
-| placeholder | 展位文案 | `String` | `"请输入关键字"` |
+| value | 组件输入的值 | `string` | `""` |
+| placeholder | 展位文案 | `string` | `"请输入关键字"` |
 | type | 类型 | `"default"` &#124; `"line"` | `"default"` |
 | size | 尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| open | 是否展开状态 | `Boolean` | `false` |
+| open | 是否展开状态 | `boolean` | `false` |
 
 # 扩展点
 

package/components/input/index.ts

@@ -63,6 +63,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     stackClearIcon?: boolean
     frozenOnInput?: boolean
     inline?: boolean
+    waveDisabled?: boolean
 }
 
 export interface InputEvents {
@@ -95,6 +96,7 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     stackClearIcon: Boolean,
     frozenOnInput: Boolean,
     inline: Boolean,
+    waveDisabled: Boolean,
 }
 
 const defaults = (): Partial<InputProps> => ({

package/components/input/index.vdt

@@ -2,12 +2,15 @@ import {Icon} from '../icon';
 import {addStyle, isTextBlock, getRestProps} from '../utils';
 import {makeStyles} from './styles';
 import {noop, isNullOrUndefined} from 'intact-shared';
+import {Wave} from '../wave';
+import {context as ErrorContext} from '../form/useError';
 
 const {
     className, style, type, value, defaultValue, placeholder,
     clearable, disabled, size, rows, autoWidth, fluid,
     width, stackClearIcon, frozenOnInput, readonly, inline,
-
+    waveDisabled,
+    
     'ev-click': click,
     'ev-mounseenter': mouseenter,
     'ev-mouseleave': mouseleave,
@@ -59,7 +62,6 @@ const inputProps = {
 if (hasInputValue) {
     inputProps.value = inputValue;
 }
-
 <div class={classNameObj}
     style={width != null ? addStyle(style, {width: `${width}px`}) : style} 
     ev-click={click}
@@ -75,45 +77,52 @@ if (hasInputValue) {
             <div class={{
                 "k-input-prepend": true, 
                 "k-input-padding": isTextBlock(children)
-           }}>{children}</div>
+        }}>{children}</div>
         }
     }}
-    <div class="k-input-wrapper">
-        <div class="k-input-prefix" v-if={$blocks.prefix}>
-            <b:prefix />
-        </div>
-        <input v-if={type !== 'textarea'}
-            {...inputProps}
-            class="k-input-inner" 
-            type={type}
-        />
-        <textarea v-else 
-            {...inputProps}
-            class="k-input-inner k-textarea"
-            rows={rows}
-        ></textarea>
-        <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled}>
-            <Icon v-if={clearable && !disabled}
-                class={{
-                    "k-input-clear ion-ios-close": true, 
-                    "k-input-show": hasValue,
-                }}
-                ev-click={this.clear}
-            />{' '}
-            <b:suffix />
-        </div>
-        <div v-if={autoWidth}
-            class="k-input-fake"
-            ref={fakeRef}
-        >{!hasValue ? placeholder : inputValue}</div>
-    </div>
+    <ErrorContext.Consumer defaultValue={false}>
+        {isInvalid => {
+            return <Wave disabled={waveDisabled || disabled || isInvalid}>
+                <div class="k-input-wrapper">
+                    <div class="k-input-prefix" v-if={$blocks.prefix}>
+                        <b:prefix />
+                    </div>
+                    <input v-if={type !== 'textarea'}
+                        {...inputProps}
+                        class="k-input-inner" 
+                        type={type}
+                    />
+                    <textarea v-else 
+                        {...inputProps}
+                        class="k-input-inner k-textarea"
+                        rows={rows}
+                    ></textarea>
+                    <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled}>
+                        <Icon v-if={clearable && !disabled}
+                            class={{
+                                "k-input-clear ion-ios-close": true, 
+                                "k-input-show": hasValue,
+                            }}
+                            ev-click={this.clear}
+                            hoverable
+                        />{' '}
+                        <b:suffix />
+                    </div>
+                    <div v-if={autoWidth}
+                        class="k-input-fake"
+                        ref={fakeRef}
+                    >{!hasValue ? placeholder : inputValue}</div>
+                </div>
+            </Wave>
+        }}
+    </ErrorContext.Consumer>
     {do {
         if ($blocks.append) {
             const children = $blocks.append(noop);
             <div class={{
                 "k-input-append": true, 
                 "k-input-padding": isTextBlock(children)
-           }}>{children}</div>
+            }}>{children}</div> 
         }
     }}
 </div>

package/components/input/search.vdt

@@ -9,12 +9,14 @@ const {
     type, size, open, 
 } = this.get();
 
+const isTypeNotDefault = type !== 'default';
+
 const classNameObj = {
     'k-search': true,
     [className]: className,
     'k-open': open,
     'k-hide': !open,
-    [`k-${type}`]: type !== 'default',
+    [`k-${type}`]: isTypeNotDefault,
     [makeSearchStyles()]: true,
 };
 
@@ -31,6 +33,7 @@ const classNameObj = {
         readonly={!open}
         size={size}
         class="k-with-suffix"
+        waveDisabled={isTypeNotDefault}
     />
     <Button icon type="none" ev-click={this.onClickBtn} size={size}>
         <Icon class="k-icon-search k-search-icon" />

package/components/input/styles.ts

@@ -5,6 +5,7 @@ import '../../styles/global';
 
 const defaults = deepDefaults(
     {
+        get transition() { return theme.transition.middle },
         get fontSize() { return theme.default.fontSize },
         get height() { return theme.default.height },
         width: '300px',
@@ -13,7 +14,8 @@ const defaults = deepDefaults(
         bgColor: '#fff',
         get color() { return theme.color.text },
         get focusBorder() { return `1px solid ${theme.color.primary}` },
-        get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
+        // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
+        get hoverBorder() { return `1px solid ${theme.color.primary}` },
         get borderRadius() { return theme.borderRadius },
         get placeholderColor() { return theme.color.placeholder },
 
@@ -60,7 +62,7 @@ const defaults = deepDefaults(
     }, {} as Record<Sizes, {fontSize: string, height: string, paddingGap: string}>),
 )
 
-let input: any;
+let input: typeof defaults;
 setDefault(() => {
     input = deepDefaults(theme, {input: defaults}).input;
 })
@@ -80,7 +82,7 @@ export function makeStyles() {
             width: 100%;
             border: ${input.border};
             background-color: ${input.bgColor};
-            transition: border ${theme.transition}, background ${theme.transition}, box-shadow ${theme.transition};
+            transition: border ${input.transition}, background ${input.transition}, box-shadow ${input.transition};
             border-radius: ${input.borderRadius};
             outline: none;
             position: relative;
@@ -114,16 +116,10 @@ export function makeStyles() {
 
         // clearable
         .k-input-clear {
-            display: inline-block;
-            vertical-align: top;
-            cursor: pointer;
             opacity: 0;
-            transition: opacity ${theme.transition};
+            transition: opacity ${input.transition};
             pointer-events: none;
             color: ${input.clearIconColor};
-            &:hover {
-                color: ${theme.color.primary};
-            }
             + * {
                 margin-left: ${input.clearIconGap};
             }
@@ -140,7 +136,7 @@ export function makeStyles() {
                 z-index: 1;
                 right: 0;
                 &.k-input-show + i {
-                    transition: opacity ${theme.transition};
+                    transition: opacity ${input.transition};
                 }
             }
             &:hover {
@@ -308,7 +304,7 @@ export function makeSearchStyles() {
         position: relative;
         display: inline-block;
         .k-input {
-            transition: width ${theme.transition};
+            transition: width ${input.transition};
         }
         .k-btn {
             position: absolute;

package/components/layout/demos/asideFix.md

@@ -5,8 +5,7 @@ iframe: 400
 ---
 
 给`Header`和`Aside`分别添加`fixed`属性，即可固定顶部或者侧边栏，组件会自动添加相应样式，无需手动
-添加样式。另外我们可以通过给`Aside`添加`size`属性，来控制侧边栏的宽度，给属性会自动应用到子组件
-`Menu`中
+添加样式。另外我们可以通过给`Aside`添加`width`属性，来控制侧边栏的宽度
 
 ```vdt
 import {
@@ -18,7 +17,7 @@ import {
 } from 'kpc';
 
 <Layout class="layout">
-    <Aside collapse={this.get('collapse')} fixed theme="white">
+    <Aside collapse={this.get('collapse')} fixed theme="white" width="260px">
         <div class="logo">LOGO</div>
         <Menu
             v-model:expandedKeys="expandedKeys" 

package/components/layout/index.md

@@ -11,15 +11,15 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| fixed | 是否固定头部 | `Boolean` | `false` |
+| fixed | 是否固定头部 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
-| height | 高度 | `String` | `Number` | `"64px"` |
+| height | 高度 | `string` | `number` | `"64px"` |
 
 ## Aside
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| fixed | 是否固定侧边栏 | `Boolean` | `false` |
-| collapse | 是否收起侧边栏 | `Boolean` | `false` |
+| fixed | 是否固定侧边栏 | `boolean` | `false` |
+| collapse | 是否收起侧边栏 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
-| width | 宽度 | `String` | `Number` | `"200px"` |
+| width | 宽度 | `string` | `number` | `"200px"` |

package/components/layout/styles.ts

@@ -8,6 +8,7 @@ const sizes = ['small', 'large'] as const;
 export const themes = ['light', 'dark', 'white'] as const;
 
 const defaults = {
+    get transition() { return theme.transition.large },
     get color() { return menu.item.color },
     get bgColor() { return menu.bgColor },
     light: {
@@ -26,7 +27,7 @@ const defaults = {
     // bodyMargin: '0 20px',
 };
 
-let layout: any;
+let layout: typeof defaults;
 setDefault(() => {
     layout = deepDefaults(theme, {layout: defaults}).layout;
 });
@@ -40,7 +41,7 @@ export function makeLayoutStyles() {
         display: flex;
         flex-direction: column;
         flex: 1;
-        transition: padding-left ${theme.transition};
+        transition: padding-left ${layout.transition};
         &.k-has-aside {
             flex-direction: row;
         }
@@ -60,7 +61,7 @@ export function makeHeaderStyles() {
         color: ${layout.color};
         background: ${layout.bgColor};
         left: 0;
-        transition: left ${theme.transition};
+        transition: left ${layout.transition};
         &.k-fixed {
             position: fixed;
             left: 0;
@@ -84,7 +85,7 @@ export function makeHeaderStyles() {
 
 export function makeAsideStyles() {
     return css`
-        transition: width ${theme.transition};
+        transition: width ${layout.transition};
         display: flex;
         flex-direction: column;
         background: ${layout.bgColor};

package/components/menu/demos/collapse.md

@@ -24,7 +24,8 @@ import {Menu, MenuItem, Switch, Icon} from 'kpc';
         falseValue="dark"
     />
     <br /><br />
-    <Menu v-model:expandedKeys="expandedKeys" 
+    <Menu v-model:expandedKeys="expandedKeys"
+        v-model:selectedKey="selectedKey"
         collapse={this.get('collapse')}
         theme={this.get('theme')}
         ref="__test"
@@ -62,6 +63,7 @@ export default class extends Component<Props> {
     static defaults() {
         return {
             expandedKeys: ['3'],
+            selectedKey: '3-2',
             collapse: false,
             theme: 'dark'
         } as MenuProps;

package/components/menu/index.md

@@ -11,22 +11,23 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| expandedKeys | 定义菜单展开项 | `Array` | `[]` |
-| selectedKey | 定义菜单选中项 | `String` | `""` |
-| theme | 定义菜单主题 | `"light"` | `"dark"` | `"dark"` |
-| collapse | 菜单是否折叠 | `Boolean` | `false` |
+| expandedKeys | 定义菜单展开项 | <code>(string &#124; number)[]</code> | `[]` |
+| selectedKey | 定义菜单选中项 | <code>string &#124; number</code> | `undefined` |
+| theme | 定义菜单主题 | `"light"` &#124; `"dark"` &#124; `"white"` | `"dark"` |
+| collapse | 菜单是否折叠 | `boolean` | `false` |
 | type | 定义菜单排列方式：垂直，水平 | `"vertical"` &#124; `"horizontal"` | `"vertical"` |
 | size | 定义菜单尺寸 | `"large"` &#124; `"default"` &#124; `"small"` | `"default"` |
-| accordion | 是否每次只能展开一项 | `Boolean` | `false` |
-| dot | 是否给菜单项前面添加圆点 | `Boolean` | `false` |
+| accordion | 是否每次只能展开一项 | `boolean` | `false` |
+| dot | 是否给菜单项前面添加圆点 | `boolean` | `false` |
 
 ## MenuItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| key | 定义全局唯一的`key`，用于标识每一项 | `String` | `undefined` |
-| to | 定义超链接菜单项，点击直接跳转 | `String` | `undefined` |
-| dot | 是否给当前菜单项前面添加圆点 | `Boolean` | `false` |
+| key | 定义全局唯一的`key`，用于标识每一项 | <code>string &#124; number</code> | `undefined` |
+| to | 定义超链接菜单项，点击直接跳转 | `string` &#124; `object` | `undefined` |
+| dot | 是否给当前菜单项前面添加圆点 | `boolean` | `false` |
+| disabled | 是否禁用当前项 | `boolean` | `false` |
 
 # 扩展点
 
@@ -42,5 +43,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| click | 点击菜单项触发，不管该菜单项是否包含子菜单 | `Event` |
-| select | 选中没有子菜单的菜单项触发 | `MenuItem, Event` |
+| select | 选中没有子菜单的菜单项触发 | `(menuItem: MenuItem, e: MouseEvent) => void` |

package/components/menu/index.spec.ts

@@ -11,34 +11,40 @@ describe('Menu', () => {
 
         const title = element.querySelector('.k-expanded .k-menu-title') as HTMLElement;
         title.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql([]);
         title.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3']);
     });
 
     it('select', async () => {
         const [instance, element] = mount(CollapseDemo);
-        const menu = instance.refs.__test as Menu;
+
+        expect(element.innerHTML).to.matchSnapshot();
 
         const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-title');
         title.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('1');
+        expect(instance.get('selectedKey')).to.eql('1');
         disabledTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('1');
+        expect(instance.get('selectedKey')).to.eql('1');
 
         const subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title') as HTMLElement;
         subTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('3-1');
+        expect(instance.get('selectedKey')).to.eql('3-1');
+
+        // clear
+        instance.set('selectedKey', '');
+        await wait();
+        expect(element.querySelector('.k-highlighted')).to.be.null;
     });
 
     it('collapse', async () => {