@king-design/intact 2.0.0-beta.0

package/components/button/demos/loading.md

@@ -0,0 +1,65 @@
+---
+title: 加载状态按钮
+order: 2
+---
+
+添加`loading`属性，可以将按钮设为加载状态，此时按钮不可点。
+
+> 请给图标元素添加`k-icon`类名，或者使用`Icon`组件，用于定位图标元素，
+> 以便按钮变为`loading`状态时能够将它替换为loading图标
+
+```vdt
+import {Button, Icon} from 'kpc';
+
+<div>
+    <Button type="primary" loading>确认</Button>
+    <Button icon circle loading><i class="k-icon ion-ios-search"></i></Button>
+    <br /> <br />
+    <Button type="primary" 
+        loading={this.get('loading1')}
+        ev-click={this.onClick.bind(this, 'loading1')}
+    >点击加载</Button>
+    <Button type="primary" 
+        loading={this.get('loading2')}
+        ev-click={this.onClick.bind(this, 'loading2')}
+    ><Icon class="ion-ios-search" />点击加载</Button>
+    <Button icon circle
+        loading={this.get('loading3')}
+        ev-click={this.onClick.bind(this, 'loading3')}
+    ><Icon class="ion-ios-search" /></Button>
+    <Button type="primary" 
+        loading={this.get('loading4')}
+        ev-click={this.onClick.bind(this, 'loading4')}
+    >图标在右侧<Icon class="ion-ios-search" /></Button>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+```
+
+```ts
+interface Props {
+    loading1?: boolean
+    loading2?: boolean
+    loading3?: boolean
+    loading4?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            'loading1': false,
+            'loading2': false,
+            'loading3': false,
+            'loading4': false,
+        } as Props;
+    }
+
+    onClick(name: keyof Props) {
+        this.set(name, true);
+    }
+}
+```

package/components/button/demos/size.md

@@ -0,0 +1,27 @@
+---
+title: 按钮尺寸
+order: 4
+---
+
+通过`size`属性可以指定按钮的尺寸：`large`, `default`,`small`, `mini`。
+
+```vdt
+import {Button, Icon} from 'kpc';
+
+<div>
+    <Button size="large">large</Button>
+    <Button>default</Button>
+    <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>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+```

package/components/button/demos/tagName.md

@@ -0,0 +1,24 @@
+---
+title: 指定按钮tagName
+order: 5
+---
+
+`Button`默认渲染成`button`元素，通过`tagName`，我们可以渲染成任意元素或组件。
+此时，我们可以通过`tagProps`属性，给指定的`tagName`传递与`Button`属性名相冲突的属性。
+
+> 当给`Button`指定`href`属性时，则它会强制渲染成`a`标签
+
+```vdt
+import {Button} from 'kpc';
+
+<div>
+    <Button tagName="div" type="primary">div元素按钮</Button>
+    <Button tagName="div" disabled>disabled div button</Button>
+    <Button href="https://www.ksyun.com" target="_blank">超链接按钮</Button>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+```

package/components/button/dynamicButton.ts

@@ -0,0 +1,20 @@
+import {createVNode as h, ComponentFunction, ComponentConstructor} from 'intact';
+
+export type DynamicButtonProps = {
+    href?: string,
+    htmlType?: string
+    tagName: string | ComponentConstructor,
+    type?: string
+}
+
+export const DynamicButton: ComponentFunction<DynamicButtonProps> = ({tagName, htmlType, ...props}) => {
+    if (props.href && tagName === 'button') {
+        tagName = 'a';
+    }
+    if (tagName === 'button') {
+        // set type of html button
+        props = {...props, type: htmlType};
+    }
+
+    return h(tagName, props);
+}

package/components/button/group.ts

@@ -0,0 +1,42 @@
+import {Component, provide, TypeDefs} from 'intact';
+import template from './group.vdt';
+import {toggleArray} from '../utils';
+import {BUTTON_GROUP} from './constants';
+
+export interface ButtonGroupProps {
+    vertical?: boolean
+    value?: any
+    checkType?: 'none' | 'radio' | 'checkbox' 
+    fluid?: boolean
+}
+
+const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
+    vertical: Boolean,
+    value: null,
+    fluid: Boolean,
+    checkType: ['none', 'radio', 'checkbox']
+};
+
+const defaults = (): Partial<ButtonGroupProps> => ({
+    checkType: 'none',
+});
+
+export class ButtonGroup extends Component<ButtonGroupProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    init() {
+        provide(BUTTON_GROUP, this); 
+    }
+
+    setValue(v: any): void {
+        let {checkType, value} = this.get();
+        if (checkType === 'radio') {
+            this.set('value', v);
+        } else if (checkType === 'checkbox') {
+            value = toggleArray(value, v);
+            this.set('value', value);
+        }
+    }
+}

package/components/button/group.vdt

@@ -0,0 +1,14 @@
+import {getRestProps} from '../utils';
+import {makeButtonGroupStyles} from './styles';
+
+const {className, vertical, children, fluid} = this.get();
+
+const classNameObj = {
+    'k-btns': true,
+    'k-vertical': vertical,
+    'k-fluid': fluid,
+    [className]: className,
+    [makeButtonGroupStyles()]: true,
+};
+
+<div class={classNameObj} {...getRestProps(this)}>{children}</div>

package/components/button/index.md

@@ -0,0 +1,46 @@
+---
+title: 按钮
+category: 组件
+order: 0
+sidebar: doc
+---
+
+# 属性
+
+## Button
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"default"` |
+| size | 按钮尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
+| icon | 是否为图标按钮（宽高相等）| `Boolean` | `false` |
+| circle | 是否为圆角按钮 | `Boolean` | `false` |
+| loading | 是否为正在加载中的按钮 | `Boolean` | `false` |
+| disabled | 是否禁用状态 | `Boolean` | `false` |
+| fluid | 是否宽度100% | `Boolean` | `false` |
+| htmlType | 按钮`<button>`元素的`type` | `String` | `"button"` |
+| tagName | 按钮渲染后的实际html元素，例如我们可以传入`"a"`来渲染成超链接 | `String` | `button` |
+| tagProps | 当指定`tagName`时，该属性将传给`tagName`指定的元素 | `Object` | `undefind` |
+| value | 对于`radio`类型的按钮组，我们可以给每个按钮指定一个选中时的值 | `*` | `undefined` |
+| name | 对于`radio`类型的按钮组，我们给`radio`指定`name`属性 | `String` | `undefined` |
+| ghost | 展示透明背景的按钮 | `Boolean` | `false` |
+
+## ButtonGroup
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| vertical | 是否垂直排列按钮组 | `Boolean` | `false` |
+| checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` &#124; `"checkbox"` &#124; `"none"` | `"none"` |
+| value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
+
+# 方法
+
+## Button
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| showLoading | 展示loading状态 | - | `undefined` |
+| hideLoading | 取消loading状态 | - | `undefined` |
+| disable | 禁用按钮 | - | `undefined` |
+| enable | 启用按钮 | - | `undefined` |
+

package/components/button/index.spec.ts

@@ -0,0 +1,64 @@
+import {Button} from './';
+import {dispatchEvent, mount, unmount, wait} from '../../test/utils';
+import GroupDemo from '~/components/button/demos/group';
+import {findDomFromVNode} from 'intact';
+import {button as buttonStyles} from './styles';
+import tinycolor from 'tinycolor2';
+
+describe('Button', () => {
+    afterEach(() => unmount());
+
+    it('should change value when click radio buttons', async () => {
+        const [instance] = mount(GroupDemo);
+
+        const radioShanggaiElement = findDomFromVNode(instance.refs.__radioShanghai.$lastInput, true) as HTMLElement;
+        dispatchEvent(radioShanggaiElement, 'click');
+        await wait();
+        expect(instance.get('city')).to.eql('shanghai');
+
+        const checkboxShanghaiElement = findDomFromVNode(instance.refs.__checkboxShanghai.$lastInput, true) as HTMLElement;
+        dispatchEvent(checkboxShanghaiElement, 'click');
+        await wait();
+        expect(instance.get('cities')).to.eql(['shanghai']);
+
+        dispatchEvent(checkboxShanghaiElement, 'click');
+        await wait();
+        expect(instance.get('cities')).to.eql([]);
+
+        // should set value correctly, even if the type of value is not an array
+        instance.set<string>('cities', '');
+        dispatchEvent(checkboxShanghaiElement, 'click');
+        await wait();
+        expect(instance.get('cities')).to.eql(['shanghai']);
+    });
+
+    it('method test', async () => {
+        const [instance, element] = mount(Button);
+
+        instance.showLoading();
+        await wait();
+        expect(element.classList.contains('k-loading')).to.be.true;
+        instance.hideLoading();
+        await wait();
+        expect(element.classList.contains('k-loading')).to.be.false;
+        instance.disable();
+        await wait();
+        expect(element.classList.contains('k-disabled')).to.be.true;
+        instance.enable();
+        await wait();
+        expect(element.classList.contains('k-disabled')).to.be.false;
+    });
+
+    it('should blur on mouse up', async () => {
+        const [, element] = mount(Button);
+
+        element.focus();
+        // test color of focus style 
+        await wait(500); // has transition
+        expect(tinycolor(getComputedStyle(element).color).toHexString()).to.eql(buttonStyles.hoverColor);
+        
+        dispatchEvent(element, 'mouseup');
+        await wait(500);
+        expect(tinycolor(getComputedStyle(element).color).toHexString()).to.eql(buttonStyles.color);
+    });
+});

package/components/button/index.ts

@@ -0,0 +1,135 @@
+import {Component, ComponentConstructor, TypeDefs, inject, createRef} from 'intact';
+import template from './index.vdt';
+import {ButtonGroup} from './group';
+import {bind} from '../utils';
+import {Sizes, Colors} from '../types';
+import {BUTTON_GROUP} from './constants';
+export * from './group';
+
+interface ButtonHTMLAttributes {
+    autofocus?: boolean
+    form?: string
+    formaction?: string
+    formenctype?: string
+    formmethod?: string
+    formnovalidate?: boolean
+    formtarget?: string
+    // Anchor
+    href?: string
+    target?: string
+    download?: string
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes {
+    type?: Colors | 'none' | 'secondary' | 'link'
+    size?: Sizes,
+    icon?: boolean
+    circle?: boolean
+    loading?: boolean
+    disabled?: boolean
+    fluid?: boolean
+    htmlType?: 'submit' | 'reset' | 'button'
+    tagName?: string | ComponentConstructor
+    value?: any
+    name?: string
+    tabindex?: string | number
+    ghost?: boolean
+}
+
+export interface ButtonEvents {
+    click: [MouseEvent]
+    mouseup: [MouseEvent]
+}
+
+const typeDefs: Required<TypeDefs<Omit<ButtonProps, keyof ButtonHTMLAttributes>>> = {
+    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+    size: ['large', 'default', 'small', 'mini'],
+    icon: Boolean,
+    circle: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    fluid: Boolean,
+    htmlType: String,
+    tagName: [String, Function],
+    value: null,
+    name: String,
+    tabindex: [String, Number],
+    ghost: Boolean,
+};
+
+const defaults = (): Partial<ButtonProps> => ({
+    type: 'default',
+    size: 'default',
+    htmlType: 'button',
+    tagName: 'button',
+    tabindex: '0',
+}); 
+
+
+export class Button extends Component<ButtonProps, ButtonEvents> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    private buttonGroup = inject<ButtonGroup | null>(BUTTON_GROUP, null);
+    private elementRef = createRef<HTMLButtonElement>();
+
+    showLoading() {
+        this.set('loading', true);
+    }
+
+    hideLoading() {
+        this.set('loading', false);
+    }
+
+    disable() {
+        this.set('disabled', true);
+    }
+
+    enable() {
+        this.set('disabled', false);
+    }
+
+    private isChecked(): boolean {
+        const group = this.buttonGroup;
+        if (!group) return false;
+
+        const {checkType, value: groupValue} = group.get();
+        const {value} = this.get();
+        return value !== undefined ?
+            checkType === 'radio' ? 
+                value === groupValue :  
+                (
+                    checkType === 'checkbox' ? 
+                        Array.isArray(groupValue) && !!~groupValue.indexOf(value) :
+                        false
+                )
+            : false;
+    }
+
+    @bind
+    private onClick(e: MouseEvent): void {
+        if (this.get('disabled') || this.get('loading')) {
+            e.preventDefault();
+            return;
+        }
+
+        const buttonGroup = this.buttonGroup;
+        if (buttonGroup) {
+            const value = this.get('value');
+            if (value !== undefined) {
+                buttonGroup.setValue(value);
+            }
+        }
+
+        (e as any).$component = this;
+        this.trigger('click', e);
+    }
+
+    @bind
+    private onMouseUp(e: MouseEvent): void {
+        // when click, blur it to remove the focus style
+        this.elementRef.value!.blur();
+        this.trigger('mouseup', e);
+    }
+}

package/components/button/index.vdt

@@ -0,0 +1,88 @@
+import {getRestProps} from '../utils';
+import {Icon} from '../icon';
+import {makeButtonStyles} from './styles';
+import {DynamicButton} from './dynamicButton';
+
+let {
+    type, className, size, icon, circle, ref, key, tabindex,
+    tagName, htmlType, fluid, children, loading, disabled,
+    name, ghost
+} = this.get();
+
+const checked = this.isChecked();
+
+const isIcon = child => (
+    child.tag === Icon ||
+    child.className && child.className.indexOf('icon') > -1
+);
+
+let iconSide;
+// hack for loading transition of width
+if (!icon && Array.isArray(children)) {
+    children.forEach((child, index) => {
+        if (child) {
+            // whether the icon is on the left side or right
+            if (index === 0) {
+                if (isIcon(child)) {
+                    iconSide = 'left';
+                }
+            } else if (index === children.length - 1) {
+                if (isIcon(child)) {
+                    iconSide = 'right';
+                }
+            }
+        }
+    });
+}
+
+const classNameObj = {
+    'k-btn': true,
+    [`k-${type}`]: type !== 'default',
+    [`k-${size}`]: size !== 'default',
+    'k-btn-icon': icon,
+    [className]: className, 
+    'k-circle': circle,
+    'k-loading': loading,
+    'k-fluid': fluid,
+    'k-active': checked,
+    'k-disabled': disabled || loading,
+    'k-ghost': ghost,
+    [makeButtonStyles({iconSide})]: true,
+};
+
+const loadingIcon = (
+    <Icon class="ion-load-c k-icon-loading" 
+        size={size /*loadingSizeMap[size]*/}
+        key="k-loading"
+        rotate
+    />
+);
+
+const buttonGroup = this.buttonGroup;
+const checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
+const isCheckType = checkType !== 'none';
+
+<DynamicButton 
+    class={classNameObj}
+    tagName={tagName}
+    {...getRestProps(this)}
+    ref={this.elementRef}
+    tabindex={disabled || loading ? '-1' : tabindex}
+    ev-click={this.onClick}
+    ev-mouseup={this.onMouseUp}
+    htmlType={htmlType}
+    name={isCheckType ? null : name}
+>
+    {loading ? 
+        iconSide === 'right' ?
+            [children, loadingIcon] :
+            [loadingIcon, children] :
+        children 
+    }
+    <input type={checkType} v-if={isCheckType}
+        class="k-button-input"
+        name={name} 
+        checked={checked}
+        tabindex="-1"
+    />
+</DynamicButton>