@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.2

package/README.md

@@ -96,7 +96,7 @@ Welcome to join us by QQ. Group Number: 529739732
 
 ## Develop 
 
-> Require `node@10` and `npm@6.9` or above.
+> Require `node@10 ~ node@14` and `npm@6.9` or above.
 
 ```shell
 git clone https://github.com/ksc-fe/kpc.git

package/components/button/demos/basic.md

@@ -3,7 +3,7 @@ title: 按钮类型
 order: 0
 ---
 
-有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮
+有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮，扁平按钮
 
 ```vdt
 import {Button} from 'kpc';
@@ -17,6 +17,7 @@ import {Button} from 'kpc';
     <Button type="success">success</Button>
     <Button type="none">none</Button>
     <Button type="link">link</Button>
+    <Button type="flat">flat</Button>
 </div>
 ```
 

package/components/button/demos/disabled.md

@@ -11,7 +11,8 @@ import {Button} from 'kpc';
 <div>
     <Button disabled>disabled</Button>
     <Button disabled type="none">disabled text</Button>
-    <Button disabled icon circle><i class="k-icon ion-ios-search"></i></Button>
+    <Button disabled icon circle><i class="k-icon k-icon-search"></i></Button>
     <Button disabled type="link">link</Button>
+    <Button disabled type="flat">flat</Button>
 </div>
 ```

package/components/button/demos/group.md

@@ -20,12 +20,17 @@ import {Button, ButtonGroup} from 'kpc';
         <Button type="danger">关机</Button>
         <Button type="danger">重启</Button>
     </ButtonGroup>
+    <ButtonGroup>
+        <Button type="flat">开机</Button>
+        <Button type="flat">关机</Button>
+        <Button type="flat">重启</Button>
+    </ButtonGroup>
     <ButtonGroup>
         <Button type="primary">
-            <i class="k-icon ion-ios-arrow-left"></i>上一页
+            <i class="k-icon k-icon-left"></i>上一页
         </Button>
         <Button type="primary">
-            下一页<i class="k-icon ion-ios-arrow-right"></i>
+            下一页<i class="k-icon k-icon-right"></i>
         </Button>
     </ButtonGroup>
     <br /><br />
@@ -43,6 +48,12 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
+    <ButtonGroup checkType="radio" v-model="city">
+        <Button type="flat" value="beijing">北京</Button>
+        <Button type="flat" value="shanghai">上海</Button>
+        <Button type="flat" value="guangzhou">广州</Button>
+        <Button type="flat" value="shenzhen">深圳</Button>
+    </ButtonGroup>
     <p>多选按钮组</p>
     <ButtonGroup checkType="checkbox" v-model="cities">
         <Button value="beijing" size="small">北京</Button>

package/components/button/demos/icon.md

@@ -11,12 +11,13 @@ order: 1
 import {Button, Icon} from 'kpc';
 
 <div>
-    <Button icon><Icon class="ion-ios-search" /></Button>
-    <Button icon circle><Icon class="ion-ios-search" /></Button>
-    <Button icon circle type="none"><Icon class="ion-ios-search" /></Button>
-    <Button type="danger" size="large" icon circle><Icon class="ion-ios-search" size="large" /></Button>
-    <Button type="primary"><Icon class="ion-ios-search" size="small" />搜索</Button>
-    <Button circle type='primary'><Icon class="ion-ios-search" size="small" />搜索</Button>
+    <Button icon><Icon class="k-icon-search" /></Button>
+    <Button icon circle><Icon class="k-icon-search" /></Button>
+    <Button icon circle type="none"><Icon class="k-icon-search" /></Button>
+    <Button icon circle type="flat"><Icon class="k-icon-search" /></Button>
+    <Button type="danger" size="large" icon circle><Icon class="k-icon-search" size="large" /></Button>
+    <Button type="primary"><Icon class="k-icon-search" size="small" />搜索</Button>
+    <Button circle type='primary'><Icon class="k-icon-search" size="small" />搜索</Button>
 </div>
 ```
 

package/components/button/demos/loading.md

@@ -13,7 +13,7 @@ import {Button, Icon} from 'kpc';
 
 <div>
     <Button type="primary" loading>确认</Button>
-    <Button icon circle loading><i class="k-icon ion-ios-search"></i></Button>
+    <Button icon circle loading><i class="k-icon k-icon-search"></i></Button>
     <br /> <br />
     <Button type="primary" 
         loading={this.get('loading1')}
@@ -22,15 +22,15 @@ import {Button, Icon} from 'kpc';
     <Button type="primary" 
         loading={this.get('loading2')}
         ev-click={this.onClick.bind(this, 'loading2')}
-    ><Icon class="ion-ios-search" />点击加载</Button>
+    ><Icon class="k-icon-search" />点击加载</Button>
     <Button icon circle
         loading={this.get('loading3')}
         ev-click={this.onClick.bind(this, 'loading3')}
-    ><Icon class="ion-ios-search" /></Button>
+    ><Icon class="k-icon-search" /></Button>
     <Button type="primary" 
         loading={this.get('loading4')}
         ev-click={this.onClick.bind(this, 'loading4')}
-    >图标在右侧<Icon class="ion-ios-search" /></Button>
+    >图标在右侧<Icon class="k-icon-search" /></Button>
 </div>
 ```
 

package/components/button/demos/size.md

@@ -14,10 +14,10 @@ import {Button, Icon} from 'kpc';
     <Button size="small">small</Button>
     <Button size="mini">mini</Button>
     <br /><br />
-    <Button icon circle size="large"><Icon class="ion-ios-search" size="large" /></Button>
-    <Button icon circle><Icon class="ion-ios-search" /></Button>
-    <Button icon circle size="small"><Icon class="ion-ios-search" size="small" /></Button>
-    <Button icon circle size="mini"><Icon class="ion-ios-search" size="mini" /></Button>
+    <Button icon circle size="large"><Icon class="k-icon-search" size="large" /></Button>
+    <Button icon circle><Icon class="k-icon-search" /></Button>
+    <Button icon circle size="small"><Icon class="k-icon-search" size="small" /></Button>
+    <Button icon circle size="mini"><Icon class="k-icon-search" size="mini" /></Button>
 </div>
 ```
 

package/components/button/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"`| `"default"` |
+| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"` | `"flat"` | `"default"` |
 | size | 按钮尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
 | icon | 是否为图标按钮（宽高相等）| `boolean` | `false` |
 | circle | 是否为圆角按钮 | `boolean` | `false` |

package/components/button/index.ts

@@ -21,7 +21,7 @@ interface ButtonHTMLAttributes {
 }
 
 export interface ButtonProps extends ButtonHTMLAttributes {
-    type?: Colors | 'none' | 'secondary' | 'link'
+    type?: Colors | 'none' | 'secondary' | 'link' | 'flat'
     size?: Sizes,
     icon?: boolean
     circle?: boolean
@@ -42,7 +42,7 @@ export interface ButtonEvents {
 }
 
 const typeDefs: Required<TypeDefs<Omit<ButtonProps, keyof ButtonHTMLAttributes>>> = {
-    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link', 'flat'],
     size: ['large', 'default', 'small', 'mini'],
     icon: Boolean,
     circle: Boolean,

package/components/button/styles.ts

@@ -29,7 +29,7 @@ export const types = ['primary', 'warning', 'danger', 'active', 'success'] as co
 const sizes = ['large', 'small', 'mini'] as const;
 
 const btnStyles = {
-    get color() { return theme.color.lightBlack },
+    get color() { return theme.color.text },
     bgColor: '#fff',
     lineHeight: '1.15',
     get padding() { return `0 ${theme.default.padding}` },
@@ -114,7 +114,8 @@ const defaults = deepDefaults(
         link: {
             get color() { return theme.color.link },
             get hoverColor() { return theme.color.linkHover },
-            get hoverBgColor() { return theme.color.hoverBg },
+            hoverBgColor: 'transparent',
+            // get hoverBgColor() { return theme.color.hoverBg },
         },
 
         none: {
@@ -234,18 +235,9 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 }
             }
 
-            // disabled
-            &.k-disabled {
-                &, &:hover {
-                    color: ${button.disabled.color};
-                    background: ${button.disabled.bgColor};
-                    border-color: ${button.disabled.borderColor};
-                    cursor: not-allowed
-                }
-            }
-
             &.k-none,
-            &.k-link {
+            &.k-link,
+            &.k-flat {
                 background: transparent;
                 &, &:hover {
                     border: none;
@@ -257,6 +249,25 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             &.k-none:hover {
                 background: ${button.none.hoverBgColor};
             }
+            &.k-flat {
+                background: ${button.none.hoverBgColor};
+            }
+
+            // disabled
+            &.k-disabled {
+                &, &:hover {
+                    color: ${button.disabled.color};
+                    background: ${button.disabled.bgColor};
+                    border-color: ${button.disabled.borderColor};
+                    cursor: not-allowed
+                }
+            }
+            &.k-none.k-disabled,
+            &.k-link.k-disabled {
+                &, &:hover {
+                    background: transparent;
+                }
+            }
 
             ${sizes.map(size => {
                 const styles = button[size];

package/components/carousel/index.vdt

@@ -36,12 +36,12 @@ const {stop, play} = this.autoplay;
     <Button icon circle type="none" size="large" class="k-carousel-btn k-prev"
         ev-click={this.prev}
     >
-        <Icon class="ion-ios-arrow-left" />
+        <Icon class="k-icon-left" />
     </Button>
     <Button icon circle type="none" size="large" class="k-carousel-btn k-next"
         ev-click={this.next}
     >
-        <Icon class="ion-ios-arrow-right" />
+        <Icon class="k-icon-right" />
     </Button>
     <div class="k-carousel-indicator c-clearfix">
         <div v-for={getItems()}

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,9 +38,9 @@ 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"
+                        class="k-cascader-arrow k-icon-right"
                     /> 
                 </DropdownItem>
             );
@@ -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/styles.ts

@@ -33,7 +33,8 @@ setDefault(() => {
 export function makeMenuStyles() {
     return css`
         min-width: ${cascader.width} !important;
-        min-height: ${cascader.height};
+        height: ${cascader.height};
+        overflow: auto;
         .k-cascader-arrow {
             float: right;
             height: 100%;

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

@@ -20,7 +20,7 @@ import {Checkbox} from 'kpc';
 
 ```styl
 .k-checkbox
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts