@king-design/intact 3.3.2 → 3.4.0-beta.0

package/components/button/demos/basic.md

@@ -3,7 +3,7 @@ title: 按钮类型
 order: 0
 ---
 
-有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮，扁平按钮
+有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮，扁平按钮, 自定义color按钮
 
 ```vdt
 import {Button} from 'kpc';
@@ -18,10 +18,13 @@ import {Button} from 'kpc';
     <Button type="none">none</Button>
     <Button type="link">link</Button>
     <Button type="flat">flat</Button>
+    <Button color="red">custom</Button>
+    <Button color="#0000ea">custom</Button>
+    <Button color="rgb(183, 18, 193)">custom</Button>
 </div>
 ```
 
 ```styl
 .k-btn
-    margin-right 20px
+    margin 0 20px 20px 0
 ```

package/components/button/demos/ghost.md

@@ -14,6 +14,7 @@ import {Button, Icon} from 'kpc';
     <Button type="warning" ghost>warning</Button>
     <Button type="danger" ghost>danger</Button>
     <Button type="success" ghost>success</Button>
+    <Button color="rgb(183, 18, 193)" ghost>custom</Button>
     <Button type="none" ghost>none</Button>
     <Button type="primary" ghost disabled>primay</Button>
 </div>

package/components/button/demos/group.md

@@ -74,6 +74,13 @@ import {Button, ButtonGroup, Icon} from 'kpc';
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
+    <p>支持自定义ButtonGroup下的Button宽度</p>
+    <ButtonGroup checkType="radio" v-model="city" btnWidth="100px">
+        <Button value="beijing">北京</Button>
+        <Button value="shanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
 </div>
 ```
 

package/components/button/group.ts

@@ -10,6 +10,7 @@ export interface ButtonGroupProps {
     checkType?: 'none' | 'radio' | 'checkbox' 
     fluid?: boolean
     seperate?: boolean
+    btnWidth?: number | string
 }
 
 const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
@@ -18,6 +19,7 @@ const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
     fluid: Boolean,
     checkType: ['none', 'radio', 'checkbox'],
     seperate: Boolean,
+    btnWidth: [Number, String],
 };
 
 const defaults = (): Partial<ButtonGroupProps> => ({

package/components/button/index.md

@@ -23,6 +23,7 @@ sidebar: doc
 | value | 对于`radio/checkbox`类型的按钮组，我们可以给每个按钮指定一个选中时的值 | `*` | `undefined` |
 | name | 对于`radio/checkbox`类型的按钮组，我们给`input`指定`name`属性 | `string` | `undefined` |
 | ghost | 展示透明背景的按钮 | `boolean` | `false` |
+| color | 自定义字体、边框、波纹动效颜色 | `string` | `undefined` |
 
 ## ButtonGroup
 

package/components/button/index.ts

@@ -26,6 +26,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     size?: Sizes,
     icon?: boolean
     circle?: boolean
+    color?: string
     loading?: boolean
     disabled?: boolean
     fluid?: boolean
@@ -47,6 +48,7 @@ const typeDefs: Required<TypeDefs<Omit<ButtonProps, keyof ButtonHTMLAttributes>>
     size: ['large', 'default', 'small', 'mini'],
     icon: Boolean,
     circle: Boolean,
+    color: String,
     loading: Boolean,
     disabled: Boolean,
     fluid: Boolean,

package/components/button/index.vdt

@@ -1,4 +1,4 @@
-import {getRestProps} from '../utils';
+import {addStyle, getRestProps} from '../utils';
 import {Icon} from '../icon';
 import {makeButtonStyles} from './styles';
 import {DynamicButton} from './dynamicButton';
@@ -8,7 +8,7 @@ import {button as theme} from './styles';
 let {
     type, className, size, icon, circle, ref, key, tabindex,
     tagName, htmlType, fluid, children, loading, disabled,
-    name, ghost,
+    name, ghost, color, style
 } = this.get();
 
 const { cls, k } = this.config;
@@ -42,7 +42,7 @@ if (!icon && Array.isArray(children)) {
 const classNameObj = {
     [cls('btn')]: true,
     [cls(size)]: size !== 'default',
-    [cls(type)]: true,
+    [cls(type)]: !color,
     [cls(`btn-icon`)]: icon,
     [className]: className, 
     [cls('circle')]: circle,
@@ -51,7 +51,8 @@ const classNameObj = {
     [cls('active')]: checked,
     [cls('disabled')]: disabled || loading,
     [cls('ghost')]: ghost,
-    [makeButtonStyles(k, iconSide)]: true,
+    [cls('custom')]: color,
+    [makeButtonStyles(k, iconSide, color)]: true,
 };
 
 const loadingIcon = (
@@ -63,11 +64,14 @@ const loadingIcon = (
 );
 
 const buttonGroup = this.buttonGroup;
-const checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
+const checkType = buttonGroup?.get('checkType') ?? 'none';
+const btnWidth = buttonGroup?.get('btnWidth');
+const _style = {
+    width: typeof btnWidth === 'number' ? `${btnWidth}px` : btnWidth,
+}
 const isCheckType = checkType !== 'none';
 const typeStyles = theme[type];
-const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
-
+const waveColor = typeStyles && typeStyles.borderColor || color || theme.primary.borderColor;
 <Wave disabled={loading || disabled || type === 'none' || type === 'link'}
     inset={type === 'flat' ? '-1px' : '-2px'}
     color={waveColor}
@@ -76,6 +80,7 @@ const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderCo
         class={classNameObj}
         tagName={tagName}
         {...getRestProps(this)}
+        style={btnWidth ? addStyle(style, _style) : style} 
         ref={this.elementRef}
         tabindex={disabled || loading ? '-1' : tabindex}
         ev-click={this.onClick}

package/components/button/styles.ts

@@ -157,7 +157,7 @@ setDefault(() => {
 
 export {button};
 
-export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconSide?: string) {
+export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconSide?: string, color?: string) {
     const {secondary, link} = button;
 
     return cx(
@@ -247,6 +247,22 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                 }
             }
 
+            
+
+            ${color && css`
+                &.${k}-custom {
+                    color: ${color};
+                    border-color: ${color};
+                    &:hover,
+                    &:focus {
+                        background: ${palette(color, -4)};
+                    }
+                    &:active {
+                        background: ${palette(color, -3)};
+                    }
+                }
+            `}
+
             &.${k}-link {
                 color: ${link.color};
                 &:hover {
@@ -395,6 +411,20 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                         }
                     `
                 })}
+                ${color && css`
+                    &.${k}-custom {
+                        color: ${color};
+                        border-color: ${color};
+                        &:hover {
+                            color: ${palette(color, -1)};
+                            border-color: ${palette(color, -1)};
+                        }
+                        &:active {
+                            color: ${palette(color, 1)};
+                            border-color: ${palette(color, 1)};
+                        }
+                    }
+                `}
                 // disabled
                 &.${k}-disabled {
                     &, &:hover {

package/components/dialog/alert.vdt

@@ -24,11 +24,10 @@ const classNameObj = {
                 v-if={!hideIcon && !icon}
                 class={iconClassName || {
                     [`${k}-icon-success-fill`]: type === 'success',
-                    [`${k}-icon-warning-fill`]: type === 'warning',
+                    [`${k}-icon-warning-fill`]: type === 'warning' || type === 'confirm',
                     [`${k}-icon-error-fill`]: type === 'error',
-                    [`${k}-icon-question-fill`]: type === 'confirm',
                 }}
-                color={type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type}
+                color={type === 'error' ? 'danger' : type === 'confirm' ? 'warning' : type}
             />
             {icon}
         </div>

package/components/dialog/demos/static.md

@@ -29,6 +29,10 @@ import {Button, ButtonGroup} from 'kpc';
             ev-click={this.showDialogWithTitle.bind(this, $value)}
         >Show {$value[0].toUpperCase() + $value.substring(1)} Dialog with Title</Button>
     </ButtonGroup>
+
+    <br />
+    <br />
+    <Button ev-click={this.showAsyncCloseConfirm}>异步关闭confirm弹层</Button>
 </div>
 ```
 
@@ -69,5 +73,19 @@ export default class extends Component<Props> {
             Message.info('clicked cancel button');
         });
     }
+
+    showAsyncCloseConfirm() {
+        let dialog: Dialog;
+        Dialog.confirm({
+            content: '点击确认，异步关闭',
+            ref: (_dialog) => dialog = _dialog,
+            ok: () => {
+                dialog.showLoading();
+                setTimeout(() => {
+                    dialog.close();
+                }, 3000);
+            },
+        });
+    }
 }
 ```

package/components/switch/demos/beforeChange.md

@@ -0,0 +1,52 @@
+---
+title: 定义switch切换前的拦截函数
+order: 8
+---
+
+给`Switch`添加`beforeChange`函数，来定义开关切换之前的逻辑，如果该函数返回`true`则成功切换，否则忽略本次切换
+
+> 支持异步函数
+
+```vdt
+import {Switch} from 'kpc';
+
+<div>
+    <Switch v-model="value1" beforeChange={this.beforeChange} />
+    <Switch v-model="value2" beforeChange={this.beforeChangeFalse} />
+</div>
+```
+
+```styl
+.k-switch
+    margin-right 20px
+```
+
+```ts
+import { Message } from 'kpc';
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            value1: false,
+            value2: false,
+        }
+    }
+
+    beforeChange(value: any) {
+        return new Promise<boolean>(resolve => {
+            Message.warning(`current value is ${value}`);
+            setTimeout(() => {
+                resolve(true);
+            }, 1000);
+        });
+    }
+    beforeChangeFalse(value: any) {
+        Message.warning(`current value is ${value}`);
+        return new Promise<boolean>(resolve => {
+            setTimeout(() => {
+                resolve(false);
+            }, 1000);
+        });
+    }
+}
+```

package/components/switch/index.md

@@ -22,6 +22,8 @@ sidebar: doc
 | height | 开关的高度 | `number` | `string` | `undefined` |
 | size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | disabled | 控制禁用 | `boolean` | `false` |
+| loading | 开关loading属性 | `boolean` | `false` |
+| beforeChange | 切换`Switch`之前的拦截函数，如果该函数返回`false`则阻止本次切换，支持异步函数, 参数为当前value | <code>(value: any) => boolean &#124; Promise&lt;boolean&gt;</code> | `undefined` |
 
 # 扩展点
 

package/components/switch/index.spec.ts

@@ -2,6 +2,7 @@ import BasicDemo from '~/components/switch/demos/basic';
 import DisabledDemo from '~/components/switch/demos/disabled';
 import ValueDemo from '~/components/switch/demos/value';
 import WidthHeightDemo from '~/components/switch/demos/widthHeight';
+import BeforeChangeDemo from '~/components/switch/demos/beforeChange';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 
 describe('Switch', () => {
@@ -118,4 +119,14 @@ describe('Switch', () => {
         await wait();
         expect(element.outerHTML).to.matchSnapshot();  
     });
+
+    it('beforeChange', async function() {
+        const [instance, element] = mount(BeforeChangeDemo);
+        const [el1, el2] = element.querySelectorAll<HTMLElement>('.k-switch');
+        el1.click();
+        el2.click();
+        await wait(1000);
+        expect(instance.get('value1')).to.be.true;
+        expect(instance.get('value2')).to.be.false;
+    });
 });

package/components/switch/index.ts

@@ -17,6 +17,8 @@ export interface SwitchProps<True = any, False = any> {
     height?: number | string
     size?: Sizes
     disabled?: boolean
+    loading?: boolean
+    beforeChange?: (value: True | False | undefined) => boolean | Promise<boolean>;
 }
 
 export interface SwitchEvents {
@@ -40,6 +42,8 @@ const typeDefs: Required<TypeDefs<SwitchProps>> = {
     height: [Number, String],
     size: sizes,
     disabled: Boolean,
+    loading: Boolean,
+    beforeChange: Function,
 };
 
 const defaults = (): Partial<SwitchProps> => ({
@@ -47,6 +51,7 @@ const defaults = (): Partial<SwitchProps> => ({
     trueValue: true,
     falseValue: false,
     size: 'default',
+    loading: false,
 });
 
 const events: Events<SwitchEvents> = {
@@ -90,13 +95,30 @@ export class Switch<True = true, False = false> extends Component<SwitchProps<Tr
         }
     }
 
-    public toggle(isKeypress: boolean) {
-        if (this.get('disabled')) return;
+    public async toggle(isKeypress: boolean) {
+        const {disabled, beforeChange, value} = this.get();
+        if (disabled) return;
 
-         // if is not keypress, we blur it to remove focus style
-         if (!isKeypress) {
-             this.elementRef.value!.blur();
-         }
+        // if is not keypress, we blur it to remove focus style
+        if (!isKeypress) {
+            this.elementRef.value!.blur();
+        }
+         
+        if (beforeChange) {
+            this.set({
+                disabled: true,
+                loading: true
+            });
+            try {
+                const ret = await beforeChange(value);
+                if (!ret) return;
+            } finally {
+                this.set({
+                    disabled: false,
+                    loading: false
+                });
+            }
+        }
 
          if (this.isChecked()) {
              this.uncheck();

package/components/switch/index.vdt

@@ -1,10 +1,11 @@
 import {makeStyles} from './styles';
 import {addStyle, getRestProps} from '../utils';
+import {Icon} from '../icon';
 
 let {
     className, style, name, on,
     off, value, trueValue, falseValue,
-    width, height, size, disabled,
+    width, height, size, disabled, loading
 } = this.get();
 
 const {start, dragging, barRef, barWidth} = this.draggable;
@@ -24,6 +25,7 @@ const classNameObj = {
 let onStyle;
 let offStyle;
 let barStyle;
+let iconStyle;
 if (width || height) {
     const _style = {};
     onStyle = {};
@@ -51,6 +53,9 @@ if (width || height) {
         barStyle = {
             width: value === trueValue ? '100%' : `${height}px`,
         }
+        iconStyle = {
+            fontSize: `${height * 0.7}px`,
+        }
     }
     style = addStyle(style, _style);
 }
@@ -74,7 +79,7 @@ if (barWidth.value) {
         v-model-true={trueValue}
         v-model-false={falseValue}
         tabindex="-1"
-    /> 
+    />
     <div class={`${k}-switch-off`} v-if={off || $blocks.off} style={offStyle}>
         <b:off>{off}</b:off>
     </div>
@@ -83,6 +88,7 @@ if (barWidth.value) {
             <b:on>{on}</b:on>
         </div>
         <div class={`${k}-switch-wrapper`}>
+            <Icon v-if={loading} class={`${k}-switch-icon ion-load-c`} rotate style={iconStyle}/>
             <div class={`${k}-switch-handle`}
                 ev-click={this.onClickOnHandle}
                 ev-mousedown={start}

package/components/switch/styles.ts

@@ -27,6 +27,7 @@ const defaults = {
         width: `45px`,
         height: `24px`,
         padding: `3px`,
+        iconSize: `16px`,
     },
 
     // large
@@ -34,6 +35,7 @@ const defaults = {
         width: `58px`,
         height: `30px`,
         padding: `3px`,
+        iconSize: `20px`,
     },
 
     // small
@@ -41,6 +43,7 @@ const defaults = {
         width: `30px`,
         height: `16px`,
         padding: `2px`,
+        iconSize: `10px`,
     },
 
     // mini
@@ -48,6 +51,7 @@ const defaults = {
         width: `18px`,
         height: `10px`,
         padding: `1px`,
+        iconSize: `6px`,
     },
 
     // disabled
@@ -116,6 +120,13 @@ export const makeStyles = cache(function makeStyles(k: string) {
             }
         }
 
+        .${k}-switch-icon {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
         // text
         .${k}-switch-on,
         .${k}-switch-off {
@@ -139,7 +150,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
 
         // size
         ${sizes.map(size => {
-            const {width, height, padding} = kswitch[size];
+            const {width, height, padding, iconSize} = kswitch[size];
             return css`
                &.${k}-${size},
                &.${k}-${size} .${k}-switch-on,
@@ -167,6 +178,9 @@ export const makeStyles = cache(function makeStyles(k: string) {
                    .${k}-switch-off {
                        padding: 0 calc(${height} / 3) 0 ${height};
                    }
+                   .${k}-switch-icon {
+                        font-size: ${iconSize};
+                   }
                }
             `
         })}

package/components/table/cell.vdt

@@ -26,7 +26,12 @@ if (columnIndex === 0 && indent) {
     style.paddingLeft = `${indent}px`;
 }
 
-<td className={className}
+const classNameObj = {
+    [`${k}-hidden`]: props.hidden,
+    [className]: className
+}
+
+<td class={classNameObj}
     style={style}
     title={getTextByChildren(children)}
     rowspan={rowspan}

package/components/table/column.ts

@@ -16,6 +16,7 @@ export interface TableColumnProps {
     exportTitle?: string
     exportCell?: (data: any, index: number) => string
     minWidth?: number
+    hidden?: boolean
 
     // passed by Table
     // offset: number
@@ -54,6 +55,7 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     exportTitle: String,
     exportCell: Function,
     minWidth: Number,
+    hidden: Boolean,
 
     // offset: null,
     cols: null,

package/components/table/column.vdt

@@ -16,7 +16,7 @@ import {Input} from '../input';
 import {_$} from '../../i18n';
 import {ignoreSortable} from './useSortable';
 
-const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
+const {title, fixed, group, multiple, key, sortable, cols, rows, hidden} = this.get();
 const {
     onSelect, isChecked, keywords, filteredGroup,
     onShow, reset, confirm, dropdownRef,
@@ -37,6 +37,7 @@ const { k } = this.config;
                                         const {className, style} = getClassAndStyleForFixed(this.get(), offsetMap[key], k, checkType);
                                         const classNameObj = {
                                             [`${k}-column-sortable`]: sortable,
+                                            [`${k}-hidden`]: hidden,
                                             [className]: className,
                                         }
 

package/components/table/demos/hidden.md

@@ -0,0 +1,44 @@
+---
+title: 隐藏列
+order: 31
+---
+
+通过`TableColumn`的`hidden`属性配置隐藏列
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <Table data={this.get('data')} resizable>
+        <TableColumn key="a" title="Title 1" minWidth={200}/>
+        <TableColumn key="b" title="Title 2" minWidth={300} hidden/>
+        <TableColumn key="c" title="Title 3"/>
+    </Table>
+    <p>无数据展示</p>
+    <Table data={this.get('data2')} resizable>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn key="b" title="Title 2" hidden/>
+        <TableColumn key="c" title="Title 3"/>
+    </Table>
+</div>
+```
+
+```styl
+.k-table
+    margin-bottom 20px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: 'Cell 1-1', b: 'Cell 1-2', c: 'cell 1-3'},
+                {a: 'Cell 2-1', b: 'Cell 2-2', c: 'cell 2-3'}
+            ],
+            data2: []
+        };
+    }
+}
+```

package/components/table/index.md

@@ -111,6 +111,7 @@ export interface PaginationProps {
 | exportCell | 自定义导出的单元格内容 | `(data: any, index: number) => string` | `undefined` |
 | minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `number` | `undefined` |
 | className | 给当前列添加className | `string` &#124; `Record<string, any>` | `undefined` |
+| hidden | 是否隐藏当前列，仅为不可见，不影响`exportTable`导出表格 | `boolean` | `false` |
 
 ```ts
 import {VNode} from 'intact';