@king-design/intact 3.2.2-beta.0 → 3.3.1

package/components/breadcrumb/index.ts

@@ -19,7 +19,7 @@ const typeDefs: Required<TypeDefs<BreadcrumbProps>> = {
 };
 
 const defaults = (): Partial<BreadcrumbProps> => ({
-    separator: '>'
+    separator: ''
 });
 
 export class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEvents, BreadcrumbBlocks> {

package/components/breadcrumb/index.vdt

@@ -1,6 +1,7 @@
 import {getRestProps, mapChildren} from '../utils';
 import {BreadcrumbItem} from './item';
 import { makeStyles } from './styles';
+import { Icon } from '../icon';
 
 const {children, separator, className} = this.get();
 const { k } = this.config;
@@ -13,7 +14,10 @@ const classNameObj = {
 
 const separatorVNode = (
     <span class={`${k}-breadcrumb-separator`}>
-        <b:separator>{separator}</b:separator>
+        <template v-if={!$blocks.separator && !separator}>
+            <Icon class="k-icon-right" />
+        </template>
+        <b:separator v-else>{separator}</b:separator>
     </span>
 );
 const vNodes = [];

package/components/cascader/demos/filterable.md

@@ -11,12 +11,15 @@ import {Cascader} from 'kpc';
 
 <div>
     <Cascader data={this.get('data')} v-model="value" filterable />
+    <br /><br />
+    <Cascader data={this.get('data')} v-model="values" filterable multiple />
 </div>
 ```
 
 ```ts
 interface Props {
     value?: string[] | null
+    values?: string[][] | null
 }
 
 export default class extends Component<Props> {
@@ -25,6 +28,7 @@ export default class extends Component<Props> {
     static defaults() {
         return {
             value: [] as string[],
+            values: [] as string[][],
             data: [
                 {
                     value: 'beijing',

package/components/cascader/index.spec.ts

@@ -310,4 +310,27 @@ describe('Cascader', () => {
         await wait();
         expect(instance.get('value')).to.eql(['hunan']);
     });
+
+    it('should only show submenu while the root menu will show', async () => {
+        const [instance, element] = mount(FilterDemo);
+        instance.set('values', [['beijing', 'haidian']]);
+        await wait();
+
+        const [, dom] = element.querySelectorAll<HTMLDivElement>('.k-cascader');
+
+        dispatchEvent(dom, 'click');
+        await wait();
+
+        const input = dom.querySelector<HTMLInputElement>('.k-input-inner')!;
+
+        // should show layer when input empty string
+        input.value = 's';
+        dispatchEvent(input, 'input');
+        await wait();
+
+        document.body.click();
+        await wait();
+
+        expect(getElement('.k-cascader-menu')).to.not.exist;
+    });
 });

package/components/cascader/index.ts

@@ -80,7 +80,8 @@ export class Cascader<
     private filterable = useFilterable(
         this.input.keywords,
         this.value.setValue,
-        this.fields
+        this.fields,
+        this.value.values
     );
     private positionObj = {my: 'left top', at: 'right top', collisionDirection: ['left']};
 

package/components/cascader/index.vdt

@@ -3,7 +3,7 @@ import {Icon} from '../icon';
 import {_$} from '../../i18n';
 import {makeMenuStyles, makeFilterMenuStyles} from './styles';
 
-const {data, trigger, filterable, fields, multiple} = this.get();
+const {data, trigger, filterable, fields, multiple, show} = this.get();
 const { k } = this.config;
 const baseMenuStyles = makeMenuStyles(k);
 const classNameObj = {
@@ -24,7 +24,7 @@ const Options = (data, level, loaded, parentSelected) => {
 
     return data.map((item, index) => {
         const value = getField(item, 'value');
-        const showed = isShowed(value, level);
+        const showed = show && isShowed(value, level);
         const selected = parentSelected && isSelected(value, level);
         const children = getField(item, 'children');
 
@@ -69,7 +69,7 @@ const Options = (data, level, loaded, parentSelected) => {
     });
 }
 
-const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
+const {filter, keywords: {value: keywords}, selectByFilter, isSelectedItem} = this.filterable;
 <t:super class={`${k}-cascader`}>
     <b:base-menu>
         <DropdownMenu 
@@ -94,6 +94,8 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
                 return <DropdownItem v-for={items}
                     ev-select={selectByFilter.bind(null, $value)}
                     disabled={$value.disabled}
+                    hideOnSelect={!multiple}
+                    class={{[`${k}-selected`]: isSelectedItem($value)}}
                 >
                     {(() => {
                         // highlight keywords

package/components/cascader/styles.ts

@@ -77,5 +77,8 @@ export const makeFilterMenuStyles = cache(function makeFilterMenuStyles(k: strin
             font-style: normal;
             color: ${cascader.filter.highlightColor};
         }
+        .${k}-dropdown-item.${k}-selected {
+            color: ${cascader.selectedColor};
+        }
     `;
 });

package/components/cascader/useFilterable.ts

@@ -3,11 +3,13 @@ import type {Cascader, CascaderData, BaseCascaderData} from './';
 import {State} from '../../hooks/useState';
 import type {Value} from './useValue';
 import type {useFields} from './useFields';
+import { isEqualArray } from '../utils';
 
 export function useFilterable(
     keywords: State<string>,
     setValue: (value: Value) => void, 
-    getField: ReturnType<typeof useFields>
+    getField: ReturnType<typeof useFields>,
+    values: State<Value[]>
 ) {
     const instance = useInstance() as Cascader;
 
@@ -48,9 +50,16 @@ export function useFilterable(
     }
 
     function selectByFilter(data: CascaderData<any>[]) {
-        const value = data.map(item => getField(item, 'value'));
-        setValue(value);
+        setValue(getValue(data));
     }
 
-    return {filter, selectByFilter, keywords};
+    function isSelectedItem(data: CascaderData<any>[]) {
+        return !!values.value.find((value) => isEqualArray(value, getValue(data)));
+    }
+
+    function getValue(data: CascaderData<any>[]) {
+        return data.map(item => getField(item, 'value'));
+    }
+
+    return {filter, selectByFilter, keywords, isSelectedItem};
 }

package/components/config/demos/disableWave.md

@@ -0,0 +1,47 @@
+---
+title: 控制全局水波纹动效
+order: 1
+---
+
+通过配置`disableWave`，可以控制是否开启水波纹动效，默认`false`
+
+```vdt
+import {ConfigProvider, Button, Input, Checkbox, Radio, Select, Option} from 'kpc';
+
+<ConfigProvider value={{disableWave: true}}>
+    <Button>Button</Button>
+    <Input />
+    <Checkbox v-model="value">checkbox</Checkbox>
+    <Radio v-model="value">radio</Radio>
+    <Select v-model="day">
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+</ConfigProvider>
+```
+
+```styl
+.k-input, .k-input, .k-checkbox, .k-radio
+    margin 0 10px
+```
+
+```ts
+interface Props {
+    value?: boolean,
+    day?: string | null
+}
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value: false,
+            day: ''
+        }
+    }
+}
+```

package/components/config/index.md

@@ -15,6 +15,7 @@ sidebar: doc
 
 ```ts
 export interface ConfigProps {
-    classNamePrefix?: string 
+    classNamePrefix?: string
+    disableWave?: boolean
 }
 ```

package/components/config/index.ts

@@ -2,7 +2,8 @@ import { createContext, ProviderProps } from '../context';
 import { EMPTY_OBJ, Component } from 'intact';
 
 export interface ConfigProps {
-    classNamePrefix?: string 
+    classNamePrefix?: string,
+    disableWave?: boolean,
 }
 
 const {
@@ -17,6 +18,7 @@ function useConfigContext() {
     return {
         cls: (name: string) => `${config.value!.classNamePrefix || 'k'}-${name}`,
         get k() { return config.value!.classNamePrefix || 'k' },
+        get disableWave() { return config.value!.disableWave || false }
     }
 }
 

package/components/datepicker/index.ts

@@ -23,6 +23,7 @@ import {
 } from './basepicker';
 
 export * as shortcuts from './shortcuts';
+export { dayjs };
 
 export interface DatepickerProps<
     V extends Value = Value,

package/components/divider/demos/basic.md

@@ -0,0 +1,35 @@
+---
+title: 基本用法
+order: 0
+---
+
+`Divider`组件为区域内容的分割线，`dashed`属性可定义为虚线。
+
+```vdt
+import {Card, Divider} from 'kpc';
+
+<div>
+    <Card>
+        <div>默认直线</div>
+        <Divider/>
+        <div>虚线</div>
+        <Divider borderType={this.get('border')}/>
+    </Card>
+</div>
+```
+
+```ts
+
+interface Props {
+    border?: 'solid' | 'dashed' | 'dotted' | 'double'
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            border: 'dashed'
+        } as Props;
+    }
+}
+```

package/components/divider/demos/horizontal.md

@@ -0,0 +1,31 @@
+---
+title: 排列
+order: 2
+---
+
+通过`type`属性设置排列方式。
+
+```vdt
+import {Card, Divider, Icon} from 'kpc';
+
+<div class="divider-content">
+    Text
+    <Divider type="vertical"></Divider>
+    <a href="#">Link</a>
+    <Divider type="vertical">Text</Divider>
+    <a href="#">Link</a>
+</div>
+```
+
+```styl
+.divider-content
+    height 20px
+    display flex
+    align-items center
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+}
+```

package/components/divider/demos/margin.md

@@ -0,0 +1,32 @@
+---
+title: 外边距
+order: 3
+---
+
+通过`type`属性设置排列方式。
+
+```vdt
+import {Divider} from 'kpc';
+
+<div>
+    <div v-for={this.get('margin')}>
+        margin {$value}
+        <Divider margin={$value}/>
+    </div>
+    自定义margin
+    <Divider margin={30}/>
+    自定义margin
+    <Divider style={{margin: '8px 0 0 0'}}/>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            margin: ['large', 'default', 'small', 'none'] as const
+        }
+    }
+}
+```

package/components/divider/demos/text.md

@@ -0,0 +1,27 @@
+---
+title: 文字及位置
+order: 1
+---
+
+`Divider`分割线可以设置文字，文字位置通过`position`属性设置。
+
+```vdt
+import {Card, Divider} from 'kpc';
+
+<div>
+    <Card>
+        <div>卡片内容</div>
+        <Divider>Text</Divider>
+        <div>卡片内容</div>
+        <Divider position="left">Text</Divider>
+        <div>卡片内容</div>
+        <Divider position="right">Text</Divider>
+    </Card>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+}
+```

package/components/divider/index.md

@@ -0,0 +1,16 @@
+---
+title: 分割线
+category: 组件
+order: 30
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| borderType | 定义线的类型 | `"solid"` | `"dashed"` | `"dotted"` | `"double"` | `"solid"` |
+| position | 定义文字位置 | `"left"` | `"right"` | `"center"` | `"center"` |
+| type | 定义菜单排列方式：垂直，水平 | `"vertical"` | `"horizontal"` | `"vertical"` |
+| theme | 定义菜单主题 | `"light"` | `"dark"` | `"light"` |
+| margin | 定义`Divider`外边距 | `"large"` | `"default"` | `"small"` | `"none"` | `number` | `"default"` |

package/components/divider/index.ts

@@ -0,0 +1,36 @@
+import {Component, TypeDefs} from 'intact';
+import template from './index.vdt';
+import { useConfigContext } from '../config';
+
+export interface DividerProps {
+    borderType?: 'solid' | 'dashed' | 'dotted' | 'double',
+    position?: 'left' | 'right' | 'center',
+    type?: 'vertical' | 'horizontal',
+    theme?: 'light' | 'dark',
+    margin?: 'large' | 'default' | 'small' | 'none' | number,
+}
+
+const typeDefs: Required<TypeDefs<DividerProps>> = {
+    borderType: ['solid', 'dashed', 'dotted', 'double'],
+    position: ['left', 'right', 'center'],
+    type: ['vertical', 'horizontal'],
+    theme: ['light', 'dark'],
+    margin: ['large', 'default', 'small', 'none', Number]
+};
+
+const defaults = (): Partial<DividerProps> => ({
+    borderType: 'solid',
+    position: 'center',
+    type: 'horizontal',
+    theme: 'light',
+    margin: 'default'
+});
+
+export class Divider extends Component<DividerProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    private config = useConfigContext();
+}
+

package/components/divider/index.vdt

@@ -0,0 +1,35 @@
+import {makeStyles} from './styles';
+import {getRestProps, addStyle} from '../utils';
+
+const {
+    children, className, borderType, 
+    position, type, theme, margin,
+    style
+} = this.get();
+const { k } = this.config;
+const _style = {};
+if (typeof margin === 'number') {
+    const _margin = type === 'vertical' ? `0 ${margin}px` : `${margin}px 0`;
+    _style.margin = _margin;
+}
+
+const classNameObj = {
+    [`${k}-divider`]: true,
+    [`${k}-${theme === 'dark' ? 'dark' : 'light'}`]: theme,
+    [`${k}-${type}`]: type,
+    [`${k}-${margin}`]: margin && typeof margin !== 'number',
+    [`${k}-with-text`]: children && type === 'horizontal',
+    [`${k}-${position}`]: position !== 'center',
+    [makeStyles(k, borderType)]: true,
+    [className]: className,
+};
+
+<div
+    {...getRestProps(this)}
+    class={classNameObj}
+    style={addStyle(style, _style)}
+>
+    <div v-if={children && type === 'horizontal'} class={`${k}-divider-text`}>
+        {children}
+    </div>
+</div>

package/components/divider/styles.ts

@@ -0,0 +1,109 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+
+const sizes = ['large', 'default', 'small'] as const;
+
+const defaults = {
+    positionOffset: '5%',
+    get borderColor() { return theme.color.darkBorder },
+
+    light: {
+        get borderColor() { return theme.color.disabledBg },
+    },
+
+    large: {
+        get margin() { return theme.large.padding},
+    }
+    
+};
+
+let divider: typeof defaults;
+setDefault(() => {
+    divider = deepDefaults(theme, {divider: defaults}).divider;
+    makeStyles?.clearCache();
+});
+
+export const makeStyles = cache(function makeStyles(k: string, borderType: string) {
+    return css`
+        &.${k}-divider {
+            padding: 0;
+            border-top: 1px ${borderType} ${divider.borderColor};
+        }
+
+        &.${k}-light {
+            border-top-color: ${divider.light.borderColor};
+            &.${k}-with-text {
+                &::before, &::after {
+                    border-top-color: ${divider.light.borderColor};
+                }
+            }
+            &.${k}-vertical {
+                border-right-color: ${divider.light.borderColor};
+            }
+        }
+
+        &.${k}-vertical {
+            border-top: 0; 
+            display: inline-block;
+            height: 100%;
+            border-right: 1px solid ${divider.borderColor};
+            vertical-align: middle;
+        }
+
+        &.${k}-horizontal {
+            width: 100%;
+            min-width: 100%;
+        }
+
+        &.${k}-with-text {
+            border-top: 0;
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
+            text-align: center;
+            &::before, &::after {
+                width: 50%;
+                content: '';
+                transform: translateY(50%);
+                border-top: 1px solid ${divider.borderColor};
+            }
+        }
+
+        .${k}-divider-text {
+            padding: 0 16px;
+        }
+
+        &.${k}-left {
+            &::before {
+                width: ${divider.positionOffset};
+            }
+            &::after {
+                width: calc(100% - ${divider.positionOffset});
+            }
+        }
+
+        &.${k}-right {
+            &::before {
+                width: calc(100% - ${divider.positionOffset});
+            }
+            &::after {
+                width: ${divider.positionOffset};
+            }
+        }
+
+        // margin sizes
+        ${sizes.map(size => {
+            return css`
+                &.${k}-${size} {
+                    margin: ${theme[size].margin} 0;
+                    &.${k}-vertical {
+                        margin: 0 ${theme[size].margin};
+                    }
+                }
+            `;
+        })}
+    `;
+});

package/components/dropdown/dropdown.ts

@@ -99,7 +99,7 @@ export class Dropdown<
         // ignore whitespaces between elements in Vue
         if ((this as any).$isVue || (this as any).$isVueNext) {
             if (Array.isArray(children)) {
-                children = children.filter(child => child !== ' ');
+                children = children.filter(child => child !== ' ' && child /* comment is null in vue3 */);
             }
         }
         if (process.env.NODE_ENV !== 'production') {

package/components/dropdown/menu.ts

@@ -67,7 +67,7 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     const focus = () => focusByIndex(0);
 
     // In Cascader the menu may have been replaced by another menu, in this case,
-    // if the dropdown has showed while we mounted the menu, add keydown listener
+    // if the dropdown has showed while we mounted the menu, add the keydown listener
     if (dropdown.get('value')) {
         onShow();
     }

package/components/ellipsis/demos/basic.md

@@ -0,0 +1,44 @@
+---
+title: 基本用法
+order: 0
+---
+
+`width`属性可定义可展示的宽度，若不设置`width`，默认父级宽度为准。`maxLines`设置多行忽略最大行数。
+
+```vdt
+import {Ellipsis, Split} from 'kpc';
+
+<Split style="width: 400px">
+    <b:first>
+        <Ellipsis class="panel">测试测试测试测试测试测试</Ellipsis>
+        <br/>
+        <Ellipsis class="panel" maxLines={2}>最大几行忽略最大几行忽略最大几行忽略</Ellipsis>
+    </b:first>
+    <b:last>
+        <Ellipsis class="panel" disabled={this.get('disabled')}>不展示tooltip不展示tooltip</Ellipsis>
+    </b:last>
+</Split>
+```
+
+```styl
+.k-split
+    border 1px solid #ccc
+    height 200px
+    margin-bottom 20px
+.panel
+    margin 10px
+```
+```ts
+interface Props {
+    disabled?: boolean
+}
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            disabled: true
+        };
+    }
+}
+```