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

package/components/dropdown/demos/checkbox.md

@@ -10,7 +10,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Checkbox, Button, Icon} from 'kpc'
 
 <div>
     <Dropdown>
-        <Button>More<Icon class="ion-ios-arrow-right" /></Button>
+        <Button>More<Icon class="k-icon-right" /></Button>
         <DropdownMenu class="checkbox-menu">
             <DropdownItem hideOnSelect={false}>
                 <Checkbox v-model="checked"

package/components/dropdown/demos/disabled.md

@@ -13,7 +13,7 @@ import {Icon} from 'kpc';
 <div>
     <Dropdown disabled>
         <Button type="primary">
-            disabled <Icon class="ion-ios-arrow-down" />
+            disabled <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -24,7 +24,7 @@ import {Icon} from 'kpc';
 
     <Dropdown>
         <Button type="primary">
-            disabled item <Icon class="ion-ios-arrow-down" />
+            disabled item <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/nested.md

@@ -12,7 +12,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown trigger="click">
         <Button type="primary">
-            click <Icon class="ion-ios-arrow-down" />
+            click <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu class="dropdown-demo">
             <DropdownItem>item 1</DropdownItem>
@@ -21,13 +21,13 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <Dropdown position={{my: 'left top', at: 'right top'}} class="dropdown-demo">
                 <DropdownItem>
                     <span>hover</span>
-                    <i class="ion-ios-arrow-right"></i>
+                    <Icon class="k-icon-right" />
                 </DropdownItem>
                 <DropdownMenu class="dropdown-demo">
                     <Dropdown position={{my: 'left top', at: 'right top'}}>
                         <DropdownItem>
                             <span>hover</span>
-                            <i class="ion-ios-arrow-right"></i>
+                            <Icon class="k-icon-right" />
                         </DropdownItem>
                         <DropdownMenu class="dropdown-demo">
                             <DropdownItem>item 1</DropdownItem>
@@ -40,13 +40,13 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <Dropdown trigger="click" position={{my: 'left top', at: 'right top'}}>
                 <DropdownItem>
                     <span>click</span>
-                    <i class="ion-ios-arrow-right"></i>
+                    <Icon class="k-icon-right" />
                 </DropdownItem>
                 <DropdownMenu class="dropdown-demo">
                     <Dropdown trigger="click" position={{my: 'left top', at: 'right top'}}>
                         <DropdownItem>
                             <span>click</span>
-                            <i class="ion-ios-arrow-right"></i>
+                            <Icon class="k-icon-right" />
                         </DropdownItem>
                         <DropdownMenu class="dropdown-demo">
                             <DropdownItem>item 1</DropdownItem>
@@ -64,7 +64,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
 ```styl
 /.dropdown-demo.k-dropdown-menu
-    .ion-ios-arrow-right
+    .k-icon
         float right
         height 32px
         &:before

package/components/dropdown/demos/position.md

@@ -12,7 +12,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown position={{my: 'left top', at: 'left bottom+5'}}>
         <Button type="primary">
-            left <Icon class="ion-ios-arrow-down" />
+            left <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -23,7 +23,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
     <Dropdown position={{my: 'right top', at: 'right bottom+5'}}>
         <Button type="primary">
-            right <Icon class="ion-ios-arrow-down" />
+            right <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -34,7 +34,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
     <Dropdown position="top">
         <Button type="primary">
-            top center <Icon class="ion-ios-arrow-down" />
+            top center <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/trigger.md

@@ -14,7 +14,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 <div>
     <Dropdown>
         <Button type="primary">
-            hover <Icon class="ion-ios-arrow-down" />
+            hover <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -25,7 +25,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 
     <Dropdown trigger="click">
         <Button type="primary">
-            click <Icon class="ion-ios-arrow-down" />
+            click <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/dropdown.ts

@@ -68,6 +68,7 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
     of: 'self',
+    value: false,
 });
 
 const events: Events<DropdownEvents> = {

package/components/form/demos/basic.md

@@ -110,7 +110,7 @@ import {
     </FormItem>
     <FormItem>
         <Button type="primary" htmlType="submit" ev-click={this.handleSubmit}>提交</Button>
-        <Button style="margin-left: 20px" ev-click={this.reset}>重置</Button>
+        <Button style="margin-left: 8px" ev-click={this.reset}>重置</Button>
     </FormItem>
 </Form>
 ```
@@ -121,7 +121,7 @@ import {
     width 300px
 .k-radio
 .k-checkbox
-    margin-right 10px
+    margin-right 24px
 
 @media (max-width: 768px) 
     .k-form-item

package/components/form/demos/custom.md

@@ -36,16 +36,14 @@ import {Form, FormItem, Input, Button} from 'kpc';
                 <Button ev-click={this.remove.bind(self, $key)}>删除</Button>
             </b:append>
         </FormItem>
+    </FormItem>
+    <FormItem>
         <Button ev-click={this.add}>添加</Button>
     </FormItem>
 </Form>
 ```
 
 ```styl
-.k-form-item
-    .k-form-item
-        margin-bottom 20px
-
 @media (max-width: 768px)
     .k-form-item
         width 100%

package/components/form/index.spec.ts

@@ -6,6 +6,7 @@ import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import {Component, findDomFromVNode} from 'intact';
 import {Form, FormItem} from './';
 import {Input} from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function(value) {
     // mock api
@@ -440,4 +441,24 @@ describe('Form', () => {
         await wait();
         expect(classList.contains('k-ellipsis')).to.be.true;
     });
+
+    it('should not validate when select is disabled on init', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Form, FormItem, Select} = this;
+                <Form ref="form">
+                    <FormItem rules={{required: true}}>
+                        <Select disabled />
+                    </FormItem>
+                </Form>
+            `;
+            Form = Form;
+            FormItem = FormItem;
+            Select = Select;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait(500);
+        expect(element.querySelector('.k-form-error')).to.be.null;
+    });
 });

package/components/form/styles.ts

@@ -86,7 +86,7 @@ export function makeItemStyles() {
         &.k-invalid {
             // input
             .k-input {
-                .k-input-inner {
+                .k-input-wrapper {
                     border: ${form.item.invalidBorder};
                     position: relative;
                     z-index: 1
@@ -98,7 +98,7 @@ export function makeItemStyles() {
             .k-radio-wrapper {
                 border: ${form.item.invalidBorder} !important;
             }
-            .k-select .k-input .k-input-inner {
+            .k-select .k-input .k-input-wrapper {
                 border: none;
             }
         }

package/components/icon/demos/icons.md

@@ -6,20 +6,25 @@ order: 3
 
 
 ```vdt
-import {Icon} from 'kpc';
+import {Icon, Input} from 'kpc';
 
-<div class="icons">
-    <div class="icon" v-for={this.get('fonts')}>
-        <Icon 
-            class={'k-icon-' + $value}
-            size="large"
-        />
-        <div>{'k-icon-' + $value}</div>
+<div>
+    <Input v-model="keywords" placeholder="Search icon" clearable />
+    <div class="icons">
+        <div class="icon" v-for={this.filter()}>
+            <Icon 
+                class={'k-icon-' + $value[0]}
+                size="large"
+            />
+            <div>{'k-icon-' + $value[0]}</div>
+        </div>
     </div>
 </div>
 ```
 
 ```styl
+.k-input
+    margin-bottom 16px
 .icons
     display flex
     flex-wrap wrap
@@ -30,100 +35,128 @@ import {Icon} from 'kpc';
 ```
 
 ```ts
-export default class extends Component {
+interface Props {
+    keywords?: string
+    fonts: string[][]
+}
+
+export default class extends Component<Props> {
     static template = template;
 
     static defaults() {
         return {
+            keywords: '',
             fonts: [
-                "tag",
-                "clone",
-                "information-fill",
-                "warning-fill",
-                "success-fill",
-                "error-fill",
-                "question-fill",
-                "information", 
-                "cloud", 
-                "pin", 
-                "home", 
-                "cut", 
-                "servers", 
-                "internet", 
-                "mail", 
-                "paper", 
-                "phone", 
-                "panel", 
-                "alarm", 
-                "notification-outline", 
-                "earphone", 
-                "settings-horizontal", 
-                "message", 
-                "heart-outline", 
-                "return-right", 
-                "picture", 
-                "logout", 
-                "all", 
-                "drag", 
-                "settings-vertical", 
-                "more", 
-                "more-circled", 
-                "folder", 
-                "unlock", 
-                "user", 
-                "folder-open", 
-                "lock", 
-                "users", 
-                "edit", 
-                "location", 
-                "delete", 
-                "edit2", 
-                "settings", 
-                "calendar", 
-                "search", 
-                "alert", 
-                "question", 
-                "zoom-in", 
-                "zoom-out",
-                "fault-outline", 
-                "truth-circled", 
-                "hide", 
-                "visible", 
-                "time", 
-                "refresh", 
-                "batchsearch", 
-                "refresh2", 
-                "upload", 
-                "download", 
-                "left-squared", 
-                "right-squared", 
-                "down-squared", 
-                "up-squared", 
-                "arrow-right-circled", 
-                "arrow-down-circled", 
-                "arrow-left-circled", 
-                "arrow-up-circled", 
-                "arrow-up-big", 
-                "arrow-left-big", 
-                "arrow-down", 
-                "arrow-right-big", 
-                "arrow-right", 
-                "sortfill", 
-                "arrow-left", 
-                "arrow-up", 
-                "arrow-down-big", 
-                "sort", 
-                "sortbig", 
-                "truth", 
-                "check", 
-                "close-big", 
-                "add-small",
-                "minus", 
-                "close", 
-                "minuss-mall", 
-                "add-big"
-            ]
-        }
+                ["information-fill"],
+                ["warning-fill"],
+                ["success-fill"],
+                ["error-fill"],
+                ["question-fill"],
+                ["heart-fill"],
+                ['heart'],
+                ['notification-fill'],
+                ['notification'],
+                ["information"], 
+                ["alert"],
+                ["question"],
+                ["zoom-in"],
+                ["zoom-out"],
+                ["close-outline"],
+                ["check-outline"],
+                ["time"],
+                ['right-circled', 'arrow'],
+                ['down-circled', 'arrow'],
+                ['right-circled', 'arrow'],
+                ['up-circled', 'arrow'],
+                ['right-squared', 'arrow'],
+                ['down-squared', 'arrow'],
+                ['left-squared', 'arrow'],
+                ['up-squared', 'arrow'],
+                ['right', 'arrow'],
+                ['down', 'arrow'],
+                ['left', 'arrow'],
+                ['up', 'arrow'],
+                ['right-bold', 'arrow'],
+                ['down-bold', 'arrow'],
+                ['left-bold', 'arrow'],
+                ['up-bold', 'arrow'],
+                ['sort'],
+                ['sort-bold'],
+                ['close'],
+                ['close-bold'],
+                ['check'],
+                ['check-bold'],
+                ['add'],
+                ['add-bold'],
+                ['minus'],
+                ['minus-bold'],
+                ['share'],
+                ['tag'],
+                ['clone'],
+                ['cloud'],
+                ['pin'],
+                ['home'],
+                ['cut'],
+                ['server'],
+                ['internet'],
+                ['mail'],
+                ['paper'],
+                ['phone'],
+                ['panel'],
+                ['alarm'],
+                ['earphone'],
+                ['settings-horizontal'],
+                ['settings-vertical'],
+                ['settings'],
+                ['message'],
+                ['return-right'],
+                ['picture'],
+                ['logout'],
+                ['all'],
+                ['drag'],
+                ['more'],
+                ['more-circled'],
+                ['folder'],
+                ['folder-open'],
+                ['lock'],
+                ['unlock'],
+                ['user'],
+                ['users'],
+                ['edit'],
+                ['location'],
+                ['delete'],
+                ['calendar'],
+                ['search'],
+                ['batchsearch'],
+                ['hidden'],
+                ['visible'],
+                ['refresh'],
+                ['upload'],
+                ['download'],
+            ],
+        } as Props
+    }
+
+    init() {
+        const fonts = this.get('fonts');
+        const map: Record<string, boolean> = {};
+        fonts.forEach(([font]) => {
+            if (map[font]) {
+                console.log('duplicated', font);
+            }
+            map[font] = true;
+        })
+    }
+
+    filter() {
+        const keywords = this.get('keywords')!.trim().toLowerCase();
+        const fonts = this.get('fonts');
+
+        if (!keywords) return fonts;
+
+        return fonts.filter((font) => {
+            return font[0].includes(keywords) || font[1] && font[1].includes(keywords);
+        });
     }
 }
 ```

package/components/icon/index.vdt

@@ -30,6 +30,6 @@ if (this.colors.indexOf(color) > -1) {
 }
 
 <i class={classNameObj}
-    style={addStyle(style, _style)}
     {...getRestProps(this)}
+    style={addStyle(style, _style)}
 >{children}</i>

package/components/icon/styles.ts

@@ -57,9 +57,13 @@ export default function makeStyles(color?: string) {
             animation: ${rotate} 1s infinite linear;
         }
         &:before {
-            position: relative;
             font-size: inherit;
-            z-index: 1;
+            /**
+             * FIXME: Why add bellow two styles?
+             * https://github.com/ksc-fe/kpc/issues/876
+             */
+            // position: relative;
+            // z-index: 1;
         }
 
         // hoverable

package/components/input/demos/blocks.md

@@ -13,6 +13,7 @@ import {Input, Button, Icon} from 'kpc';
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="none">
@@ -20,6 +21,7 @@ import {Input, Button, Icon} from 'kpc';
             </Button>
         </b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="primary">
@@ -27,18 +29,21 @@ import {Input, Button, Icon} from 'kpc';
             </Button>
         </b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append><Button type="primary">搜索</Button></b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
+    <br />
     <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="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

package/components/input/demos/clearable.md

@@ -14,11 +14,11 @@ import {Input, Icon} from 'kpc';
     <Input value="disabled" clearable disabled />
     <br />
     <Input clearable placeholder="please enter">
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
     <br />
     <Input clearable stackClearIcon placeholder="please enter">
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```

package/components/input/demos/showCount.md

@@ -0,0 +1,18 @@
+---
+title: 展示提示数字
+order: 11
+---
+
+添加`showCount`属性，展示字符长度提示数字
+
+```vdt
+import {Input} from 'kpc';
+
+<div>
+    <Input placeholder="Please enter" showCount />
+    <br /><br />
+    <Input placeholder="Please enter" showCount maxlength="10" />
+    <br /><br />
+    <Input type="textarea" placeholder="please enter" showCount maxlength="100" />
+</div>
+```

package/components/input/demos/size.md

@@ -6,8 +6,7 @@ order: 2
 添加`size`属性，定义如下尺寸：`large`, `default`，`small`，`mini`
 
 ```vdt
-import {Input} from 'kpc';
-import {Button} from 'kpc';
+import {Input, Button, Icon} from 'kpc';
 
 <div>
     <Input size="large" value="large" />
@@ -15,18 +14,21 @@ import {Button} from 'kpc';
     <Input value="default" />
     <br />
     <Input value="small" size="small" />
+    <br />
     <Input size="small" placeholder="please enter">
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
     </Input>
+    <br />
     <Input size="small" placeholder="please enter">
         <b:prefix><i class="ion-earth"></i></b:prefix>
-        <b:append><Button size="small" icon type="primary"><i class="ion-ios-search"></i></Button></b:append>
+        <b:append><Button size="small" icon type="primary"><Icon class="k-icon k-icon-search" size="small" /></Button></b:append>
     </Input>
+    <br />
     <Input size="small" placeholder="please enter" clearable>
         <b:append><Button type="primary" size="small">Search</Button></b:append>
     </Input>
-
+    <br />
     <Input value="mini" size="mini" />
 </div>
 ```

package/components/input/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | inline | 是否展示内联模式 | `boolean` | `flase` |
 | resize | 指定textarea输入框拖动调整大小的方向，默认只能垂直方向调整 | `"none"` | `"vertical"` | `"horizontal"` | `"both"`' | `"vertical"` |
 | flat | 是否展示扁平样式 | `boolean` | `false` |
+| showCount | 是否展示字符长度提示数字 | `boolean` | `false` |
 
 ## Search