@king-design/intact 2.1.1 → 3.0.0-beta.1

package/components/popover/content.ts

@@ -0,0 +1,40 @@
+import {
+    TooltipContent,
+    TooltipContentProps,
+    TooltipContentEvents,
+    TooltipContentBlocks,
+} from "../tooltip/content";
+import { Component, TypeDefs, Children, VNode } from "intact";
+import template from "./content.vdt";
+
+export interface PopoverContentProps extends TooltipContentProps {
+    type?: 'info' | 'success' | 'warning' | 'error'
+    title?: Children;
+    content?: Children;
+}
+
+export interface PopoverContentEvents extends TooltipContentEvents { }
+
+export interface PopoverContentBlocks extends TooltipContentBlocks {
+    title: null;
+    content: null;
+    footer: null;
+}
+
+const typeDefs: Required<TypeDefs<PopoverContentProps>> = {
+    type: ['info', 'error', 'success', 'warning'],
+    title: [String, Number, VNode, Array],
+    content: [String, Number, VNode, Array],
+};
+
+export class PopoverContent extends TooltipContent<
+    PopoverContentProps,
+    PopoverContentEvents,
+    PopoverContentBlocks
+> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    // don't check children
+    protected isEmptyChildren: boolean = false;
+}

package/components/popover/content.vdt

@@ -0,0 +1,32 @@
+import {Icon} from '../icon';
+import makeStyles from "./styles";
+
+const { type, title, content } = this.get();
+
+const iconMap = {
+    info: 'information-fill',
+    warning: 'warning-fill',
+    success: 'success-fill',
+    error: 'error-fill',
+};
+
+const classNameObj = {
+    [makeStyles()]: true,
+    'k-popover': true,
+}
+
+<t:super class={classNameObj}>
+    <b:body>
+        <div class="k-popover-title" v-if={title || $blocks.title}>
+            <Icon v-if={type} class={`k-icon-${iconMap[type]} k-popover-icon`}
+                color={type === 'error' ? 'danger' : type}
+                size="large"
+            />
+            <b:title>{title}</b:title>
+        </div>
+        <div v-if={content || $blocks.content} class="k-popover-content">
+            <b:content>{content}</b:content>
+        </div>
+    </b:body>
+</t:super>
+

package/components/popover/demos/basic.md

@@ -0,0 +1,47 @@
+---
+title: 基础用法
+order: 0
+---
+
+通过`title`和`content`属性设置提示内容，点击“确认”和“取消”按钮分别会触发`ok`和`cancel`事件。
+
+```vdt
+import {Popover, Button} from 'kpc';
+
+<div>
+    <Popover
+        title="确定删除？"
+        ev-ok={this.ok}
+        ev-cancel={this.cancel}
+        ref="popover1"
+    >
+        <Button>删除</Button>
+    </Popover>
+    {' '}
+    <Popover
+        title="确定删除？"
+        content="这是一段描述文字"
+        ev-ok={this.ok}
+        ev-cancel={this.cancel}
+        ref="popover2"
+    >
+        <Button>删除</Button>
+    </Popover>
+</div>
+```
+
+```ts
+import {Message} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    ok() {
+        Message.success('Clicked ok!');
+    }
+
+    cancel() {
+        Message.info('Clicked cancel!');
+    }
+}
+```

package/components/popover/demos/button.md

@@ -0,0 +1,49 @@
+---
+title: 自定义按钮
+order: 3
+---
+
+`Popover` 组件默认提供了“确认”和“取消”两个按钮，在极少数情况下，这两个按钮无法满足我们的需求，
+我们可以通过`footer`扩展点来自定义按钮。需要注意的是，自定义按钮时`Popover`组件的`ok`和`cancel`
+事件将不会被触发，且 `Popover` 组件的关闭也需要在自定义按钮对应的事件中进行处理。
+
+```vdt
+import {Popover, Button} from 'kpc';
+
+<div>
+    <Popover title="确定删除？" ref="popover">
+        <Button>删除</Button>
+        <b:footer>
+            <Button size="small" ev-click={this.cancel}>取消</Button>
+            <Button size="small" ev-click={this.remove}>永久删除</Button>
+            <Button size="small" type="primary" ev-click={this.moveToTrash}>移到回收站</Button>
+        </b:footer>
+    </Popover>
+</div>
+```
+
+```ts
+import {Message,bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    @bind
+    remove() {
+        Message.warning("Clicked remove!");
+        this.refs.popover.hide();
+    }
+
+    @bind
+    moveToTrash() {
+        Message.success('Clicked move to trash!');
+        this.refs.popover.hide();
+    }
+
+    @bind
+    cancel() {
+        Message.info('Clicked cancel!');
+        this.refs.popover.hide();
+    }
+}
+```

package/components/popover/demos/content.md

@@ -0,0 +1,36 @@
+---
+title: 自定义提示内容
+order: 1
+---
+
+有时候提示内容比较复杂，无法通过字符串实现，我们可以通过 `title`和`content` 扩展点来自定义这些复杂的提示内容。
+
+```vdt
+import {Popover, Button} from 'kpc';
+
+<div>
+    <Popover ev-ok={this.ok} ev-cancel={this.cancel}>
+        <Button>删除</Button>
+        <b:title>是否确认<span style="color: red">删除</span>？</b:title>
+        <b:content>
+            <span style="color: red">删除</span>是一个危险操作，请谨慎操作
+        </b:content>
+    </Popover>
+</div>
+```
+
+```ts
+import {Message} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    ok() {
+        Message.success('Clicked ok!');
+    }
+
+    cancel() {
+        Message.info('Clicked cancel!');
+    }
+}
+```

package/components/popover/demos/text.md

@@ -0,0 +1,38 @@
+---
+title: 自定义按钮文案
+order: 2
+---
+
+你还可以通过`okText`和`cancelText`属性指定按钮文案。
+
+```vdt
+import {Popover, Button} from 'kpc';
+
+<div>
+    <Popover
+        title="确定删除？"
+        ev-ok={this.ok}
+        ev-cancel={this.cancel}
+        okText="confirm"
+        cancelText="cancel"
+    >
+        <Button>删除</Button>
+    </Popover>
+</div>
+```
+
+```ts
+import {Message} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    ok() {
+        Message.success('Clicked ok!');
+    }
+
+    cancel() {
+        Message.info('Clicked cancel!');
+    }
+}
+```

package/components/popover/demos/type.md

@@ -0,0 +1,51 @@
+---
+title: 指定提示类型
+order: 2
+---
+
+可以通过`type`指定提示的类型
+
+```vdt
+import {Popover, Button, ButtonGroup} from 'kpc';
+
+<div>
+    <ButtonGroup>
+        <Popover
+            v-for={this.get('types')}
+            key={$value}
+            title="确定删除？"
+            type={$value}
+            ev-ok={this.ok}
+            ev-cancel={this.cancel}
+        >
+            <Button data-type={$value} value={$value}>{$value}</Button>
+        </Popover>
+    </ButtonGroup>
+</div>
+```
+
+```ts
+import {Message} from 'kpc';
+
+interface Props {
+    types: ('info' | 'success' | 'error' | 'warning')[]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            types: ['info', 'success', 'error', 'warning'],
+        } as Props;
+    }
+
+    ok() {
+        Message.success('Clicked ok!');
+    }
+
+    cancel() {
+        Message.info('Clicked cancel!');
+    }
+}
+```

package/components/popover/index.md

@@ -0,0 +1,54 @@
+---
+title: 确认提示层
+category: 组件
+order: 13
+sidebar: doc
+---
+
+# 属性
+
+| 属性       | 说明                            | 类型     | 默认值   |
+| ---------- | ------------------------------- | -------- | -------- |
+| title | 指定提示的标题，也可以用`title`扩展点指定 | `string` | `VNode` | `undefined` |
+| type | 指定提示的类型 | `"info"` | `"success"` | `"error"` | `"warning"` | `undefined` |
+| disabled | 是否禁用组件 | `boolean` | `false` |
+| value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |
+| of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `Event` | `"self"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个 DOM 用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| showArrow | 弹层是否展示箭头 | `boolean` | `true` |
+| always | 是否一直保持当前展示/隐藏状态 | `boolean` | `false` |
+| size | 弹层尺寸 | `"default"` | `"small"` | `"default"` |
+| content | 指定提示的内容，当然你也可以用`content`扩展点指定 | `String` | `VNode` | `undefined` |
+| okText     | “确认”按钮文案                    | `string` | `"确认"` |
+| cancelText | “取消”按钮文案                    | `string` | `"取消"` |
+
+```ts
+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)
+```
+
+# 事件
+
+| 事件名 | 说明                                | 参数 |
+| ------ | ----------------------------------- | ---- |
+| show   | 弹层展开事件                        | -    |
+| hide   | 弹层隐藏事件                        | -    |
+| ok     | 点击“确认”按钮触发 | -    |
+| cancel | 点击“取消”按钮触发 | -    |
+
+# 扩展点
+
+| 名称    | 说明           |
+| ------- | -------------- |
+| title | 自定义提示标题 |
+| content | 自定义提示内容 |
+| footer | 自定义顶部按钮 |

package/components/popover/index.spec.ts

@@ -0,0 +1,91 @@
+import BasicDemo from '~/components/popover/demos/basic';
+import ContentDemo from '~/components/popover/demos/content';
+import ButtonDemo from '~/components/popover/demos/button';
+import TextDemo from '~/components/popover/demos/text';
+import TypeDemo from '~/components/popover/demos/type';
+import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+
+describe("Popover", () => {
+    afterEach((done) => {
+        unmount();
+        setTimeout(done, 500);
+    });
+
+    it('should handle popover correctly', async () => {
+        const [instance, element] = mount(BasicDemo);
+
+        const cancelCb = sinon.spy();
+        const okCb = sinon.spy();
+
+        instance.refs.popover1.on('cancel', cancelCb);
+        instance.refs.popover1.on('ok', okCb);
+
+        dispatchEvent(element.children[0], 'click');
+        await wait();
+        let content = getElement('.k-tooltip-content')!;
+        expect(content.innerHTML).to.matchSnapshot();
+
+        (content.querySelector('.k-btn') as HTMLElement).click();
+        await wait(500);
+        expect(content.style.display).eql('none');
+
+        dispatchEvent(element.firstElementChild!, 'click');
+        await wait();
+        content = getElement('.k-tooltip-content')!;
+        const [, btn] = Array.from<HTMLElement>(content.querySelectorAll('.k-btn'));
+        btn.click();
+
+        await wait(500);
+        expect(content.style.display).eql('none');
+        expect(cancelCb.callCount).eql(1);
+        expect(okCb.callCount).eql(1);
+    });
+
+    it('should handle type correctly', async () => {
+        const [instance, element] = mount(TypeDemo);
+        const [info, success, error, warning] = element.querySelectorAll<HTMLButtonElement>('.k-btn');
+        const test = async (element: HTMLButtonElement, className: string) => {
+            element.click();
+            await wait();
+            const content = getElement('.k-tooltip-content')!;
+            expect(content.querySelector('.k-popover-icon')!.classList.contains(className)).eql(true);
+        }
+
+        await test(info, 'k-icon-information-fill');
+        await test(success, 'k-icon-success-fill');
+        await test(error, 'k-icon-error-fill');
+        await test(warning, 'k-icon-warning-fill');
+    });
+
+    it('should handle title/content slot correctly', async () => {
+        const [instance, element] = mount(ContentDemo);
+
+        dispatchEvent(element.children[0], 'click');
+        await wait();
+
+        const content = getElement('.k-tooltip-content')!;
+        expect(content.querySelector('.k-popover-title')).to.matchSnapshot();
+        expect(content.querySelector('.k-popover-content')).to.matchSnapshot();
+    });
+
+    it('should handle text props correctly', async () => {
+        const [instance, element] = mount(TextDemo);
+
+        dispatchEvent(element.children[0], 'click');
+        await wait();
+
+        const content = getElement('.k-tooltip-content')!;
+        const btns = content.querySelectorAll('.k-btn');
+        expect(btns[0].textContent).eql('cancel');
+        expect(btns[1].textContent).eql('confirm');
+    });
+
+    it('should handle footer slot correctly', async () => {
+        const [instance, element] = mount(ButtonDemo);
+
+        dispatchEvent(element.children[0], 'click');
+        await wait();
+        let content = getElement('.k-tooltip-content')!;
+        expect((content.querySelector('.k-tooltip-footer') as HTMLElement).outerHTML).to.matchSnapshot();
+    });
+});

package/components/popover/index.ts

@@ -0,0 +1,52 @@
+import { Props, createVNode as h, Component } from "intact";
+import { Tooltip } from "../tooltip/tooltip";
+import { TooltipProps, TooltipEvents, TooltipBlocks } from "../tooltip/tooltip";
+import { PopoverContent, PopoverContentProps, PopoverContentBlocks } from './content';
+import {noop} from 'intact-shared';
+
+export interface PopoverProps extends TooltipProps, PopoverContentProps {
+    confirm?: never;
+    theme?: never;
+    hoverable?: never;
+    trigger?: never;
+}
+
+export interface PopoverEvents extends TooltipEvents { }
+
+export interface PopoverBlocks extends TooltipBlocks, PopoverContentBlocks { }
+
+export declare class _Popover extends Tooltip<PopoverProps, PopoverEvents, PopoverBlocks> { }
+
+function Wrapper(props: Props<PopoverProps, Tooltip>) {
+    let { children, type, title, content, $blocks, ...rest } = props;
+
+    if ($blocks) {
+        if ($blocks.title) {
+            title = $blocks.title(noop as any);
+        }
+        if ($blocks.content) {
+            content = $blocks.content(noop as any);
+        }
+    }
+
+    const contentVNode = h(PopoverContent, {
+        type,
+        title,
+        content,
+        $blocks,
+    });
+
+    return h(Tooltip, {
+        children: [children, contentVNode],
+        ...rest,
+        confirm: true,
+        theme: 'light',
+        hoverable: true,
+        trigger: 'click',
+    });
+}
+
+const functionalWrapper = (Component as any).functionalWrapper;
+export const Popover: typeof _Popover = functionalWrapper
+    ? functionalWrapper(Wrapper)
+    : Wrapper;

package/components/popover/styles.ts

@@ -0,0 +1,45 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+
+const defaults = {
+    width: '240px',
+    padding: '8px 16px',
+    gap: '8px',
+    title: {
+        fontSize: '14px',
+        lineHeight: '20px',
+        fontWeight: 500,
+    }
+};
+
+let popover: typeof defaults;
+setDefault(() => {
+    popover = deepDefaults(theme, {popover: defaults}).popover;
+});
+
+
+export default function makeStyles() {
+    return css`
+        // increase priority
+        &.k-tooltip-content.k-popover {
+            width: ${popover.width};
+            padding: ${popover.padding};
+            .k-popover-title {
+                display: flex;
+                align-items: center;
+                font-size: ${popover.title.fontSize};
+                line-height: ${popover.title.lineHeight};
+                font-weight: ${popover.title.fontWeight};
+            }
+            .k-popover-icon {
+                margin-right: ${popover.gap};
+            }
+            .k-popover-content {
+                margin-top: ${popover.gap};
+            }
+            .k-tooltip-footer {
+                text-align: right;
+            }
+    `;
+}

package/components/progress/demos/children.md

@@ -19,8 +19,8 @@ import {Progress, Button, ButtonGroup} from 'kpc';
         </div>
     </Progress>
     <ButtonGroup>
-        <Button size="mini" icon ev-click={this.add}>+</Button>
         <Button size="mini" icon ev-click={this.minus}>-</Button>
+        <Button size="mini" icon ev-click={this.add}>+</Button>
     </ButtonGroup>
 </div>
 ```

package/components/progress/demos/circleSize.md

@@ -0,0 +1,84 @@
+---
+title: 圆形进度尺寸
+order: 6
+---
+
+通过`size`来指定尺寸：`default` `small` `mini`
+
+```vdt
+import {Progress, ButtonGroup, Button} from 'kpc';
+
+<div>
+    状态：
+    <ButtonGroup v-model="status" checkType="radio">
+        <Button value="active">active</Button>
+        <Button value="success">success</Button>
+        <Button value="error">error</Button>
+        <Button value="normal">normal</Button>
+        <Button value="warning">warning</Button>
+    </ButtonGroup>
+
+    进度：
+    <ButtonGroup>
+        <Button size="mini" icon ev-click={this.minus}>-</Button>
+        <Button size="mini" icon ev-click={this.add}>+</Button>
+    </ButtonGroup>
+    <br /> <br />
+
+    <Progress type="circle" percent={this.get('percent')} status={this.get('status')} />
+    <Progress type="circle" percent={this.get('percent')} status={this.get('status')} size="small" />
+    <Progress type="circle" percent={this.get('percent')} status={this.get('status')} size="mini" />
+</div>
+```
+
+```styl
+.k-progress
+    display inline-block
+    margin 0 10px
+```
+
+```ts
+import {bind, ProgressProps} from 'kpc';
+
+interface Props {
+    percent: number
+    status: ProgressProps['status'] 
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            percent: 40,
+            status: 'active',
+        } as Props;
+    }
+
+    @bind
+    add() {
+        if (this.get('percent') >= 100) return;
+
+        this.set('percent', this.get('percent') + 10);
+    }
+
+    @bind
+    minus() {
+        if (this.get('percent') <= 0) return;
+
+        this.set('percent', this.get('percent') - 10);
+    }
+}
+```
+
+```vue-methods
+add() {
+    if (this.percent >= 100) return;
+    this.percent += 10;
+}
+
+minus() {
+    if (this.percent <= 0) return;
+    this.percent -= 10;
+}
+```

package/components/progress/demos/customColor.md

@@ -17,8 +17,8 @@ import {Progress, Button, ButtonGroup} from 'kpc';
     <Progress percent={this.get('percent')} color={this.get('colors')}/>
     <Progress percent={this.get('percent')} color={this.setColor}/>
     <ButtonGroup>
-        <Button size="mini" icon ev-click={this.add}>+</Button>
         <Button size="mini" icon ev-click={this.minus}>-</Button>
+        <Button size="mini" icon ev-click={this.add}>+</Button>
     </ButtonGroup>
 </div>
 ```
@@ -26,8 +26,6 @@ import {Progress, Button, ButtonGroup} from 'kpc';
 ```styl
 .k-progress
     margin 10px 0
-.k-btn
-    margin-right 5px
 ```
 
 ```ts

package/components/progress/index.ts

@@ -40,7 +40,7 @@ const defaults = (): Partial<ProgressProps> => ({
     size: 'default',
     showOuterText: true,
     status: 'active',
-    strokeWidth: 4,
+    strokeWidth: 6,
 });
 
 export class Progress extends Component<ProgressProps> {