@king-design/intact 3.6.2-beta.1 → 3.7.0

package/components/notification/demos/hideClose.md

@@ -0,0 +1,30 @@
+---
+title: 隐藏关闭按钮
+order: 4
+---
+
+设置`closable`为`false`即可隐藏关闭按钮
+
+```vdt
+import {Button} from 'kpc';
+
+<Button ev-click={this.hideClosable}>隐藏关闭按钮</Button>
+```
+
+```ts
+import {Notification} from 'kpc';
+import {bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    
+    @bind
+    hideClosable() {
+        Notification.info({
+            title: '隐藏关闭按钮',
+            content: '这条通知隐藏了关闭按钮',
+            closable: false
+        });
+    }
+}
+```

package/components/notification/demos/icon.md

@@ -0,0 +1,47 @@
+---
+title: 自定义图标
+order: 3
+---
+
+可以通过`icon`属性自定义通知图标，支持传入组件库支持的`Icon`类名（string）或自定义`VNode`。当指定了四种`type`之一时，会优先使用`type`对应的图标。
+
+```vdt
+import {ButtonGroup, Button, Icon} from 'kpc';
+
+<ButtonGroup>
+    <Button ev-click={this.showNotificationIcon}>
+        <Icon class="k-icon-notification-fill" />
+    </Button>
+    <Button ev-click={this.showTimeIcon}>
+        <Icon class="k-icon-time" />
+    </Button>
+</ButtonGroup>
+```
+
+```ts
+import {Notification} from 'kpc';
+import {bind} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    
+    @bind
+    showNotificationIcon() {
+        Notification.notice({
+            title: '自定义图标',
+            content: 'hello, kc',
+            icon: 'k-icon-notification-fill'
+        });
+    }
+
+    @bind
+    showTimeIcon() {
+        Notification.notice({
+            title: '自定义图标',
+            content: 'hello, kc',
+            icon: 'k-icon-time'
+        });
+    }
+}
+```
+

package/components/notification/demos/position.md

@@ -0,0 +1,39 @@
+---
+title: 弹出位置
+order: 2
+---
+
+通过`position`属性可以设置通知出现的位置，支持六个位置：`topRight`、`topLeft`、`bottomRight`、`bottomLeft`、`top`（顶部中间）、`bottom`（底部中间）。
+
+```vdt
+import {ButtonGroup, Button} from 'kpc';
+
+<ButtonGroup>
+    <Button v-for={this.get('positions')}
+        ev-click={this.showNotification.bind(this, $value)}
+    >{$value}</Button>
+</ButtonGroup>
+```
+
+```ts
+import {Notification} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            positions: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'] as const
+        }
+    }
+
+    showNotification(position: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom') {
+        Notification.info({
+            title: '通知标题',
+            content: `通知出现在${position}位置`,
+            position
+        });
+    }
+}
+```
+

package/components/notification/demos/types.md

@@ -0,0 +1,38 @@
+---
+title: 不同类型的通知
+order: 1
+---
+
+可以使用`Notification`提供的静态方法，展示通知，包括：`info`, `error`, `warning`, `success`；也可以使用`notice`静态方法，通过设置`type`属性来使用这四种类型。
+
+```vdt
+import {ButtonGroup, Button} from 'kpc';
+
+<ButtonGroup>
+    <Button v-for={this.get('types')}
+        ev-click={this.showNotification.bind(this, $value)}
+    >{$value}</Button>
+</ButtonGroup>
+```
+
+```ts
+import {Notification} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            types: ['info', 'error', 'warning', 'success'] as const
+        }
+    }
+
+    showNotification(type: 'info' | 'error' | 'warning' | 'success') {
+        Notification[type]({
+            title: type,
+            content: `这是一条${type}类型的通知`
+        });
+    }
+}
+```
+

package/components/notification/index.md

@@ -0,0 +1,62 @@
+---
+title: 通知提醒
+category: 组件
+order: 13 
+sidebar: doc
+---
+
+> 如果你在Vue下全局安装@king-design，可以通过`this.$notification`引用到`Notification`组件，所以你可以这样调用它的
+> 方法：`this.$notification.success({ title: 'Test', content: 'test' })`
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 通知标题 | `string` | `VNode` | `undefined` |
+| content | 通知内容 | `string` | `VNode` | `undefined` |
+| duration | 通知展示多长时间后自动关闭，当传入`0`时，通知将会一直展示。单位ms | `number` | `4500` |
+| type | 通知类型 | `"info"` | `"error"` | `"success"` | `"warning"` | `""` | `""` |
+| closable | 是否显示关闭按钮 | `boolean` | `true` |
+| icon | 自定义图标，可以传入组件库支持的Icon类名（string）或自定义VNode。当指定了四种type之一时，会优先使用type对应的图标 | `string` | `VNode` | `undefined` |
+| position | 通知位置 | `"topRight"` | `"topLeft"` | `"bottomRight"` | `"bottomLeft"` | `"top"` | `"bottom"` | `"topRight"` |
+| className | 自定义类名 | `string` | `undefined` |
+| onClick | 点击通知的回调函数 | `(e: MouseEvent) => void` | `undefined` |
+| onClose | 通知关闭的回调函数(主动关闭、延时到达关闭都会触发) | `() => void` | `undefined` |
+
+> **VNode 使用说明：** `title` 、 `content` 和 `icon` 属性都支持传入 `VNode`，可以实现更丰富的内容展示。需要注意：将 VNode 作为属性传给 KingDesign 组件时，需要使用 `normalize` 方法处理 VNode。详细用法请参考文档中在[各框架中使用的注意事项](/docs/vue/)。
+
+# 静态方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| notice | 显示通知 | <code>(props: Partial&lt;NotificationProps&gt;) => number</code> | 通知的唯一 ID |
+| info | 信息通知 | <code>(props: Partial&lt;NotificationProps&gt;) => number</code> | 通知的唯一 ID |
+| error | 错误通知 | <code>(props: Partial&lt;NotificationProps&gt;) => number</code> | 通知的唯一 ID |
+| success | 成功通知 | <code>(props: Partial&lt;NotificationProps&gt;) => number</code> | 通知的唯一 ID |
+| warning | 警告通知 | <code>(props: Partial&lt;NotificationProps&gt;) => number</code> | 通知的唯一 ID |
+| close | 关闭指定 ID 的通知 | <code>(id: number) => void</code> | - |
+
+参数说明：
+
+| 参数名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| props | 通知配置对象 | `Partial<NotificationProps>` | - |
+| id | 通知的唯一 ID，由 `notice`、`info`、`error`、`success`、`warning` 方法返回 | `number` | - |
+
+```ts
+import {VNode} from 'intact';
+
+export interface NotificationProps {
+    title?: string | VNode 
+    content?: string | VNode 
+    duration?: number
+    type?: 'info' | 'error' | 'success' | 'warning' | ''
+    closable?: boolean
+    icon?: string | VNode
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom'
+    className?: string
+    onClick?: (e: MouseEvent) => void
+    onClose?: () => void
+}
+```
+

package/components/notification/index.spec.ts

@@ -0,0 +1,211 @@
+import TypesDemo from '~/components/notification/demos/types';
+import EventDemo from '~/components/notification/demos/events';
+import {mount, unmount, dispatchEvent, getElement, wait, nextFrame} from '../../test/utils';
+import {Notification} from './';
+import {createVNode as h} from 'intact';
+
+describe('Notification', () => {
+    afterEach(() => {unmount()});
+
+    it('show basic notification', async () => {
+        Notification.notice({
+            title: 'Hello, Kingcloud Design!',
+            content: '这是一条基础用法的通知'
+        });
+    
+        await wait();
+        const notification = getElement('.k-notification')!;
+        expect(notification.outerHTML).to.matchSnapshot();
+    });
+
+    it('show notifications with different types', async () => {
+        const [instance, element] = mount(TypesDemo);
+
+        const [info, error, warning, success] = element.querySelectorAll<HTMLElement>('.k-btn');
+        
+        info.click();
+        await wait();
+        let notification = getElement('.k-notification')!;
+        expect(notification.outerHTML).to.matchSnapshot();
+
+        error.click();
+        await wait();
+        expect(getElement('.k-notification')!.outerHTML).to.matchSnapshot();
+
+        warning.click();
+        await wait();
+        expect(getElement('.k-notification')!.outerHTML).to.matchSnapshot();
+
+        success.click();
+        await wait();
+        expect(getElement('.k-notification')!.outerHTML).to.matchSnapshot();
+    });
+
+    it('set duration', async function() {
+        this.timeout(0);
+
+        Notification.info({
+            title: '测试标题',
+            content: '测试内容',
+            duration: 500
+        });
+
+        await wait();
+        const notification = getElement('.k-notification')!;
+        expect(notification.outerHTML).to.matchSnapshot();
+        
+        // should not remove when mouseenter
+        dispatchEvent(notification, 'mouseenter');
+        await wait(1000);
+        let notification1 = getElement('.k-notification');
+        expect(notification1).eql(notification);
+
+        dispatchEvent(notification, 'mouseleave');
+        await wait(500);
+        notification1 = getElement('.k-notification');
+        expect(notification1).eql(notification);
+
+        await wait(700);
+        notification1 = getElement('.k-notification');
+        expect(notification1).not.eql(notification);
+    });
+
+    it('set duration to 0 should not auto close', async function() {
+        this.timeout(0);
+
+        Notification.warning({
+            title: '不会自动关闭',
+            content: '这条通知不会自动关闭',
+            duration: 0
+        });
+
+        await wait();
+        const notification = getElement('.k-notification')!;
+        
+        // wait for a long time, should still exist
+        await wait(2000);
+        const notification1 = getElement('.k-notification');
+        expect(notification1).eql(notification);
+    });
+
+    it('hide close button when closable is false', async () => {
+        Notification.info({
+            title: '隐藏关闭按钮',
+            content: '这条通知隐藏了关闭按钮',
+            closable: false
+        });
+
+        await wait();
+        const notification = getElement('.k-notification')!;
+        const closeButton = notification.querySelector('.k-notification-close');
+        expect(closeButton).to.be.null;
+        expect(notification.outerHTML).to.matchSnapshot();
+    });
+
+    it('should not show icon when type is empty string and icon is not provided', async () => {
+        Notification.notice({
+            title: '无类型通知',
+            content: '这条通知没有类型，不应该显示图标',
+            type: ''
+        });
+
+        await wait();
+        const notification = getElement('.k-notification')!;
+        const icon = notification.querySelector('.k-notification-icon');
+        expect(icon).to.be.null;
+        expect(notification.outerHTML).to.matchSnapshot();
+    });
+
+    it('show notification at different positions', async () => {
+        const positions: Array<'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom'> = 
+            ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'];
+
+        for (const position of positions) {
+            Notification.info({
+                title: '位置测试',
+                content: `通知出现在${position}位置`,
+                position
+            });
+            await wait();
+            
+            const containers = document.querySelectorAll(`.k-notifications`);
+            const container = containers[containers.length - 1] as HTMLElement;
+            expect(container).to.exist;
+            
+            const notification = container?.querySelector(`.k-notification.k-position-${position}`);
+            expect(notification).to.exist;
+            expect(notification!.outerHTML).to.matchSnapshot();
+        }
+    });
+
+    it('should trigger onClose callback when notification auto closes', async function() {
+        this.timeout(0);
+        const onCloseSpy = sinon.spy();
+        
+        Notification.info({
+            title: '自动关闭测试',
+            content: '这条通知会自动关闭',
+            onClose: onCloseSpy,
+            duration: 500
+        });
+
+        await wait();
+        const notification = getElement('.k-notification')!;
+        expect(notification).to.exist;
+        
+        // 等待自动关闭
+        await wait(700);
+        
+        expect(onCloseSpy.callCount).to.eql(1);
+        expect(onCloseSpy.calledOnce).to.be.true;
+    });
+
+    it('test notification click and close event', async () => {
+        const [instance, element] = mount(EventDemo);
+    
+        const [btn] = element.querySelectorAll<HTMLElement>('.k-btn');
+        
+        btn.click();
+        await wait();
+        let notification = document.querySelector('.event-test')!;
+        dispatchEvent(notification, 'click');
+        await wait(500);
+        let message1 = document.querySelector('.k-info') as HTMLElement;
+        expect(message1.outerHTML).to.matchSnapshot();
+        await wait(500);
+        const closeButton = notification.querySelector<HTMLElement>('.k-notification-close')!;
+        closeButton.click();
+        await wait(500);
+        let message2 = document.querySelector('.k-warning') as HTMLElement;
+        expect(message2.outerHTML).to.matchSnapshot();
+    });
+
+    it('should support VNode as title and content', async () => {
+        Notification.info({
+            title: h('div', {class: 'custom-title'}, '自定义标题'),
+            content: h('div', {class: 'custom-content'}, [
+                h('span', {style: 'color: red;'}, '这是'),
+                '一段',
+                h('strong', null, '自定义内容')
+            ]),
+            className: 'custom-notification'
+        });
+    
+        await wait(100);
+        const notification = document.querySelector('.custom-notification') as HTMLElement;
+        expect(notification.outerHTML).to.matchSnapshot();
+        
+        const titleContainer = notification.querySelector('.k-notification-title');
+        expect(titleContainer).to.exist;
+        const title = titleContainer!.querySelector('.custom-title');
+        expect(title).to.exist;
+        expect(title!.textContent).to.eql('自定义标题');
+        
+        const contentContainer = notification.querySelector('.k-notification-body');
+        expect(contentContainer).to.exist;
+        const content = contentContainer!.querySelector('.custom-content');
+        expect(content).to.exist;
+        expect(content!.querySelector('span')).to.exist;
+        expect(content!.querySelector('strong')).to.exist;
+    });
+});

package/components/notification/index.ts

@@ -0,0 +1,2 @@
+export * from './notification';
+

package/components/notification/notification.ts

@@ -0,0 +1,185 @@
+import {
+    Component,
+    VNode,
+    TypeDefs,
+    render,
+    createVNode as h,
+    Children,
+    Props,
+} from 'intact';
+import template from './notification.vdt';
+import {Notifications} from './notifications';
+import {useDelayClose} from '../../hooks/useDelayClose';
+import {bind} from '../utils';
+import { useConfigContext } from '../config';
+
+export interface NotificationProps {
+    title?: Children,
+    content?: Children
+    duration?: number
+    type?: 'info' | 'error' | 'success' | 'warning' | ''
+    closable?: boolean
+    icon?: string | VNode
+    position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' | 'top' | 'bottom'
+    className?: string
+    onClick?: (e: MouseEvent) => void
+    onClose?: () => void
+}
+
+const typeDefs: Required<TypeDefs<NotificationProps>> = {
+    title: [String, VNode],
+    content: [String, VNode],
+    duration: Number,
+    type: ['info', 'error', 'success', 'warning', ''],
+    closable: Boolean,
+    icon: [String, VNode],
+    position: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'top', 'bottom'],
+    className: String,
+    onClick: Function,
+    onClose: Function,
+};
+
+let id = 0;
+const defaults = (): Partial<NotificationProps> => ({
+    duration: 4500,
+    type: '',
+    closable: true,
+    position: 'topRight',
+});
+// 按位置维护多个容器实例
+let notificationsMap: Map<string, Notifications> = new Map();
+// 存储 notificationId -> { position, key } 的映射，用于通过 id 关闭通知
+let notificationIdMap: Map<number, { position: string; key: number | string }> = new Map();
+
+export class Notification extends Component<NotificationProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static classNamePrefix: string;
+
+    /**
+     * 显示通知
+     * @param props 通知配置对象
+     * @returns 返回通知的唯一 ID，可用于调用 close 方法关闭通知
+     */
+    static notice(props: Partial<NotificationProps>): number {
+        const notificationId = id++;
+        const key = notificationId;
+        const finalProps = {
+            ...props,
+            key,
+            type: props.type ?? '',
+            duration: props.duration ?? 4500,
+            position: props.position || 'topRight',
+        } as Partial<Props<NotificationProps>>;
+
+        const position = finalProps.position!;
+
+        // 存储 notificationId 到 position 和 key 的映射
+        notificationIdMap.set(notificationId, { position, key });
+
+        // 如果该位置的容器不存在，创建并挂载
+        if (!notificationsMap.has(position)) {
+            const container = document.createElement('div');
+            document.body.append(container);
+            // @ts-ignore 类型实例化过深
+            render(h(Notifications, {
+                ref: (i: Notifications | null) => {
+                    if (i) {
+                        notificationsMap.set(position, i);
+                        // 设置清理回调
+                        i.__cleanup = () => {
+                            notificationsMap.delete(position);
+                            render(null, container);
+                            container.remove();
+                        };
+                    }
+                },
+                classNamePrefix: Notification.classNamePrefix,
+                position,
+            } as any), container);
+        }
+
+        // @ts-ignore 类型实例化过深
+        notificationsMap.get(position)!.notice(h(Notification, finalProps as any));
+        return notificationId;
+    }
+
+    /**
+     * 关闭指定 ID 的通知
+     * @param id 通知的唯一 ID，由 notice 方法返回
+     */
+    static close(id: number) {
+        const notificationInfo = notificationIdMap.get(id);
+        if (!notificationInfo) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn(`Notification with id ${id} does not exist.`);
+            }
+            return;
+        }
+
+        const { position, key } = notificationInfo;
+        const notifications = notificationsMap.get(position);
+        if (notifications) {
+            notifications.delete(key);
+        }
+        // 从映射中移除
+        notificationIdMap.delete(id);
+    }
+
+    static info(props: Partial<NotificationProps>): number {
+        return Notification.notice({...props, type: 'info'});
+    }
+
+    static error(props: Partial<NotificationProps>): number {
+        return Notification.notice({...props, type: 'error'});
+    }
+
+    static success(props: Partial<NotificationProps>): number {
+        return Notification.notice({...props, type: 'success'});
+    }
+
+    static warning(props: Partial<NotificationProps>): number {
+        return Notification.notice({...props, type: 'warning'});
+    }
+
+    private delayClose = useDelayClose(
+        this.close,
+        this.get('duration')!
+    );
+    private config = useConfigContext();
+
+    @bind
+    onClick(e: MouseEvent) {
+        const onClick = this.get('onClick');
+        if (onClick) {
+            onClick(e);
+        }
+    }
+
+    @bind
+    onCloseClick(e: MouseEvent) {
+        e.stopPropagation(); // 阻止事件冒泡，避免触发外层的 onClick
+        this.close();
+    }
+
+    @bind
+    close() {
+        const onClose = this.get('onClose');
+        if (onClose) {
+            onClose();
+        }
+        const position = this.get('position') || 'topRight';
+        const key = this.get('key')!;
+        
+        // 从 notificationIdMap 中移除对应的映射
+        for (const [notificationId, info] of notificationIdMap.entries()) {
+            if (info.position === position && info.key === key) {
+                notificationIdMap.delete(notificationId);
+                break;
+            }
+        }
+        
+        notificationsMap.get(position)!.delete(key);
+    }
+}

package/components/notification/notification.vdt

@@ -0,0 +1,62 @@
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {getRestProps} from '../utils';
+import {makeNotificationStyles} from './styles';
+import {theme} from '../../styles/theme';
+
+const {type, title, content, children, closable, icon, classNamePrefix, position, className} = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-notification`]: true,
+    [className]: className,
+    [`${k}-${type}`]: type && (type === 'info' || type === 'error' || type === 'success' || type === 'warning'),
+    [`${k}-position-${position || 'topRight'}`]: true,
+    [makeNotificationStyles(k)]: true,
+};
+
+const iconMap = {
+    info:  `${k}-icon-information-fill`,
+    warning: `${k}-icon-warning-fill`,
+    success: `${k}-icon-success-fill`,
+    error: `${k}-icon-error-fill`,
+};
+
+// type 优先级大于 icon，如果 type 存在且是四种类型之一，使用 type 对应的 icon
+// 否则如果 icon 有值，使用自定义 icon
+const hasIcon = (type && iconMap[type]) || icon;
+const iconName = type && iconMap[type] ? iconMap[type] : (typeof icon === 'string' ? icon : null);
+const iconColor = type ? theme.color[type === 'error' ? 'danger' : type] : 'default';
+
+<div {...getRestProps(this)}
+    class={classNameObj}
+    ev-mouseenter={this.delayClose.onMouseEnter}
+    ev-mouseleave={this.delayClose.onMouseLeave}
+    ev-click={this.onClick}
+>
+    <div class={`${k}-notification-container`}>
+        <div class={{[`${k}-notification-wrapper`]: true, [`${k}-with-icon`]: hasIcon}}>
+            <div v-if={hasIcon && iconName} class={`${k}-notification-icon`}>
+                <Icon class={iconName} color={iconColor}/>
+            </div>
+            <div v-else-if={hasIcon && !iconName} class={`${k}-notification-icon`}>
+                {icon}
+            </div>
+            <div class={`${k}-notification-content`}>
+                <div v-if={title} class={`${k}-notification-title`}>{title}</div>
+                <div v-if={content || children} class={`${k}-notification-body`}>
+                    {content || children}
+                </div>
+            </div>
+        </div>
+        <Button 
+            v-if={closable}
+            type="none"
+            icon
+            class={`${k}-notification-close`}
+            ev-click={this.onCloseClick}
+        >
+            <Icon class={`${k}-icon-close`} hoverable />
+        </Button>
+    </div>
+</div>