Merge pull request #1003 from ksc-fe/revision-menu

add button props and fix table hidden
ksc-fe · May 22, 2024 · b1e2869 · b1e2869
2 parents 44229f5 + 9e3169e
commit b1e2869
Show file tree

Hide file tree

Showing 48 changed files with 999 additions and 748 deletions.
diff --git a/components/button/demos/basic.md b/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
 ```
diff --git a/components/button/demos/ghost.md b/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>

diff --git a/components/button/demos/group.md b/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>
 ```
 

diff --git a/components/button/group.ts b/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> => ({

diff --git a/components/button/index.md b/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
 

diff --git a/components/button/index.ts b/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,

diff --git a/components/button/index.vdt b/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}

diff --git a/components/button/styles.ts b/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 {

diff --git a/components/dialog/alert.vdt b/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>

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

diff --git a/components/switch/index.spec.ts b/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;
+    });
 });
diff --git a/components/switch/index.ts b/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,13 +42,16 @@ const typeDefs: Required<TypeDefs<SwitchProps>> = {
     height: [Number, String],
     size: sizes,
     disabled: Boolean,
+    loading: Boolean,
+    beforeChange: Function,
 };
 
 const defaults = (): Partial<SwitchProps> => ({
     value: false,
     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();