wok-ui-ext 0.1.0

package/dist/toast/index.js

@@ -0,0 +1,131 @@
+import { DivModule } from 'wok-ui';
+import { IconCheckCircle, IconExclamationTriangle, IconTimesCircle, IconInfoCircle, IconTimes } from '../icons';
+import './style.css';
+class Item extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-toast-item');
+        this.timer = 0;
+        this.el.classList.add(opts.type);
+        // 图标
+        switch (opts.type) {
+            case 'success':
+                this.addChild(new IconCheckCircle());
+                break;
+            case 'warning':
+                this.addChild(new IconExclamationTriangle());
+                break;
+            case 'error':
+                this.addChild(new IconTimesCircle());
+                break;
+            case 'info':
+                this.addChild(new IconInfoCircle());
+                break;
+        }
+        this.addChild({
+            tag: 'span',
+            style: {
+                flex: '1'
+            },
+            innerText: opts.text
+        }, {
+            tag: 'span',
+            classNames: 'wok-ui-ext-toast-close',
+            children: new IconTimes(),
+            onClick: () => this.destroy()
+        });
+        const duration = opts.duration ?? 3000;
+        // 自动关闭
+        this.timer = setTimeout(() => this.destroy(), opts.duration ?? 3000);
+        // 实现鼠标悬停不会自动关闭
+        this.el.addEventListener('mouseenter', () => clearTimeout(this.timer));
+        // 鼠标离开后重新开始倒计时
+        this.el.addEventListener('mouseleave', () => {
+            this.timer = setTimeout(() => this.destroy(), duration);
+        });
+    }
+    destroy() {
+        clearTimeout(this.timer);
+        super.destroy();
+    }
+}
+class Container extends DivModule {
+    constructor() {
+        super('wok-ui-ext-toast-container');
+    }
+    addChild(child) {
+        super.addChild(child);
+    }
+}
+let container;
+/**
+ * 获取弹出式消息容器
+ * @returns
+ */
+function getContainer() {
+    if (!container) {
+        container = new Container();
+        container.mount(document.body);
+    }
+    return container;
+}
+/**
+ * 显示弹出式消息
+ * @param opts
+ */
+export function showToast(opts) {
+    getContainer().addChild(new Item(opts));
+}
+/**
+ * 显示信息消息
+ * @param text 消息内容
+ */
+export function showInfo(text) {
+    showToast({
+        type: 'info',
+        text
+    });
+}
+function processErrMsg(errMsg) {
+    let message = '';
+    if (typeof errMsg === 'string') {
+        message = errMsg;
+    }
+    else if (errMsg instanceof Error) {
+        message = errMsg.message;
+        console.error(errMsg);
+    }
+    else {
+        message = JSON.stringify(errMsg);
+    }
+    return message;
+}
+/**
+ * 显示错误消息
+ * @param errMsg 错误消息内容
+ */
+export function showError(errMsg) {
+    showToast({
+        type: 'error',
+        text: processErrMsg(errMsg)
+    });
+}
+/**
+ * 显示警告消息
+ * @param errMsg 警告消息内容
+ */
+export function showWarning(errMsg) {
+    showToast({
+        type: 'warning',
+        text: processErrMsg(errMsg)
+    });
+}
+/**
+ * 显示成功消息
+ * @param text 成功消息内容
+ */
+export function showSuccess(text) {
+    showToast({
+        type: 'success',
+        text
+    });
+}

package/dist/toast/style.css

@@ -0,0 +1,76 @@
+/* Toast */
+.wok-ui-ext-toast-container {
+  position: fixed;
+  top: 30px;
+  right: 30px;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 320px;
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item {
+  background: var(--bg-card);
+  border-radius: var(--radius-full);
+  padding: 14px 22px;
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-left: 4px solid;
+  animation: toastSlideInRight 0.2s ease;
+  border: 1px solid #eef3fc;
+  backdrop-filter: blur(4px);
+  word-break: break-all;
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item i {
+  font-size: 20px;
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.success {
+  border-left-color: var(--color-success);
+  background: #f0faf4;
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.success i {
+  color: var(--color-success);
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.warning {
+  border-left-color: var(--color-warning);
+  background: #fff7e8;
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.warning i {
+  color: var(--color-warning);
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.error {
+  border-left-color: var(--color-danger);
+  background: var(--color-danger-light);
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.error i {
+  color: var(--color-danger);
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.info {
+  border-left-color: var(--color-primary);
+  background: var(--color-primary-light);
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item.info i {
+  color: var(--color-primary);
+}
+.wok-ui-ext-toast-container .wok-ui-ext-toast-item .wok-ui-ext-toast-close {
+  margin-left: auto;
+  cursor: pointer;
+  color: var(--text-placeholder);
+  font-size: 18px;
+  padding: 0 4px;
+}
+@keyframes toastSlideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/dist/tooltip/api.d.ts

@@ -0,0 +1,44 @@
+import { SubModulesOpt } from 'wok-ui';
+import './style.less';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface AttachTooltipOptions {
+    /** 要绑定的目标元素 */
+    target: HTMLElement;
+    /** 提示内容 */
+    content: SubModulesOpt;
+    /** 提示位置，默认 top */
+    placement?: TooltipPlacement;
+    /** 显示延迟，默认 0ms */
+    delay?: number;
+    /** 隐藏延迟，默认 0ms */
+    leaveDelay?: number;
+    /** 是否禁用，默认 false */
+    disabled?: boolean;
+}
+export declare class TooltipBinding {
+    private tooltip?;
+    private target;
+    private content;
+    private placement;
+    private delay;
+    private leaveDelay;
+    private disabled;
+    private showTimer?;
+    private hideTimer?;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    constructor(opts: AttachTooltipOptions);
+    private show;
+    private hide;
+    private clearShowTimer;
+    private clearHideTimer;
+    update(opts: Partial<AttachTooltipOptions>): void;
+    destroy(): void;
+}
+/**
+ * 给 DOM 元素附加 tooltip。
+ * 鼠标进入时创建 tooltip 浮层并挂载到 body，鼠标离开时销毁。
+ * @param opts 配置选项
+ * @returns 绑定实例，调用 destroy 可解绑
+ */
+export declare function attachTooltip(opts: AttachTooltipOptions): TooltipBinding;

package/dist/tooltip/api.js

@@ -0,0 +1,103 @@
+import { FloatingLayer } from '../floating-layer';
+import './style.css';
+/**
+ * 提示浮层。挂载到 body，由 FloatingLayer 提供定位、滚动跟随、自动关闭。
+ */
+class TooltipLayer extends FloatingLayer {
+    constructor(opts) {
+        super({ target: opts.target, placement: opts.placement, offset: 10, onClose: opts.onClose });
+        this.el.classList.add('wok-ui-ext-tooltip-layer');
+        this.el.classList.add(opts.placement);
+        this.content = opts.content;
+    }
+    buildContent() {
+        this.addChild(this.content);
+    }
+}
+export class TooltipBinding {
+    constructor(opts) {
+        this.handleMouseEnter = () => {
+            if (this.disabled)
+                return;
+            this.clearHideTimer();
+            this.showTimer = window.setTimeout(() => {
+                this.show();
+            }, this.delay);
+        };
+        this.handleMouseLeave = () => {
+            this.clearShowTimer();
+            this.hideTimer = window.setTimeout(() => {
+                this.hide();
+            }, this.leaveDelay);
+        };
+        this.target = opts.target;
+        this.content = opts.content;
+        this.placement = opts.placement || 'top';
+        this.delay = opts.delay ?? 0;
+        this.leaveDelay = opts.leaveDelay ?? 0;
+        this.disabled = opts.disabled ?? false;
+        this.target.addEventListener('mouseenter', this.handleMouseEnter);
+        this.target.addEventListener('mouseleave', this.handleMouseLeave);
+    }
+    show() {
+        if (this.tooltip)
+            return;
+        const layer = new TooltipLayer({
+            target: this.target,
+            placement: this.placement,
+            content: this.content,
+            onClose: () => {
+                // 浮层可能被外部点击/Esc/目标滚出视口自动销毁，这里同步清理引用
+                if (this.tooltip === layer) {
+                    this.tooltip = undefined;
+                }
+            }
+        });
+        this.tooltip = layer;
+        layer.mount(document.body);
+    }
+    hide() {
+        this.tooltip?.destroy();
+        this.tooltip = undefined;
+    }
+    clearShowTimer() {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = undefined;
+        }
+    }
+    clearHideTimer() {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = undefined;
+        }
+    }
+    update(opts) {
+        if (opts.content !== undefined)
+            this.content = opts.content;
+        if (opts.placement !== undefined)
+            this.placement = opts.placement;
+        if (opts.delay !== undefined)
+            this.delay = opts.delay;
+        if (opts.leaveDelay !== undefined)
+            this.leaveDelay = opts.leaveDelay;
+        if (opts.disabled !== undefined)
+            this.disabled = opts.disabled;
+    }
+    destroy() {
+        this.clearShowTimer();
+        this.clearHideTimer();
+        this.target.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.target.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.hide();
+    }
+}
+/**
+ * 给 DOM 元素附加 tooltip。
+ * 鼠标进入时创建 tooltip 浮层并挂载到 body，鼠标离开时销毁。
+ * @param opts 配置选项
+ * @returns 绑定实例，调用 destroy 可解绑
+ */
+export function attachTooltip(opts) {
+    return new TooltipBinding(opts);
+}

package/dist/tooltip/component.d.ts

@@ -0,0 +1,28 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import { TooltipPlacement } from './api';
+import './style.less';
+/**
+ * 提示框组件
+ */
+export declare class Tooltip extends DivModule {
+    private binding?;
+    /**
+     * 提示框组件，鼠标悬停时显示提示信息。
+     * @param opts
+     * @param opts.children 触发元素
+     * @param opts.content 提示内容
+     * @param opts.placement 提示位置，默认 top
+     * @param opts.delay 显示延迟，默认 0ms
+     * @param opts.leaveDelay 隐藏延迟，默认 0ms
+     * @param opts.disabled 是否禁用，默认 false
+     */
+    constructor(opts: {
+        children: SubModulesOpt;
+        content: SubModulesOpt;
+        placement?: TooltipPlacement;
+        delay?: number;
+        leaveDelay?: number;
+        disabled?: boolean;
+    });
+    destroy(): void;
+}

package/dist/tooltip/component.js

@@ -0,0 +1,35 @@
+import { DivModule } from 'wok-ui';
+import { attachTooltip } from './api';
+import './style.css';
+/**
+ * 提示框组件
+ */
+export class Tooltip extends DivModule {
+    /**
+     * 提示框组件，鼠标悬停时显示提示信息。
+     * @param opts
+     * @param opts.children 触发元素
+     * @param opts.content 提示内容
+     * @param opts.placement 提示位置，默认 top
+     * @param opts.delay 显示延迟，默认 0ms
+     * @param opts.leaveDelay 隐藏延迟，默认 0ms
+     * @param opts.disabled 是否禁用，默认 false
+     */
+    constructor(opts) {
+        super('wok-ui-ext-tooltip-trigger');
+        this.addChild(opts.children);
+        this.binding = attachTooltip({
+            target: this.el,
+            content: opts.content,
+            placement: opts.placement,
+            delay: opts.delay,
+            leaveDelay: opts.leaveDelay,
+            disabled: opts.disabled
+        });
+    }
+    destroy() {
+        this.binding?.destroy();
+        this.binding = undefined;
+        super.destroy();
+    }
+}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import './style.less';
+export * from './component';
+export * from './api';

package/dist/tooltip/index.js

@@ -0,0 +1,3 @@
+import './style.css';
+export * from './component';
+export * from './api';

package/dist/tooltip/style.css

@@ -0,0 +1,46 @@
+.wok-ui-ext-tooltip-trigger {
+  display: inline-block;
+}
+.wok-ui-ext-tooltip-layer {
+  max-width: 280px;
+  padding: 8px 14px;
+  border-radius: var(--radius-md);
+  background-color: var(--color-primary-dark);
+  color: #fff;
+  font-size: var(--font-size-small);
+  line-height: 1.4;
+  word-break: break-word;
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
+}
+.wok-ui-ext-tooltip-layer::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+}
+.wok-ui-ext-tooltip-layer.top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--color-primary-dark);
+}
+.wok-ui-ext-tooltip-layer.bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--color-primary-dark);
+}
+.wok-ui-ext-tooltip-layer.left::after {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+  border-left-color: var(--color-primary-dark);
+}
+.wok-ui-ext-tooltip-layer.right::after {
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  border-right-color: var(--color-primary-dark);
+}

package/dist/tree/dragging-img.d.ts

@@ -0,0 +1,13 @@
+import { DivModule } from 'wok-ui';
+import { TreeNodeData } from '.';
+/**
+ * 拖动图标
+ */
+export declare class DraggingImg extends DivModule {
+    /**
+     *
+     * @param title 标题
+     */
+    constructor(title: TreeNodeData['title']);
+    updateCoord(x: number, y: number): void;
+}

package/dist/tree/dragging-img.js

@@ -0,0 +1,23 @@
+import { DivModule } from 'wok-ui';
+/**
+ * 拖动图标
+ */
+export class DraggingImg extends DivModule {
+    /**
+     *
+     * @param title 标题
+     */
+    constructor(title) {
+        super('wok-ui-ext-tree-node-dragging-img');
+        if (typeof title === 'string') {
+            this.el.innerText = title;
+        }
+        else {
+            this.addChild(title);
+        }
+    }
+    updateCoord(x, y) {
+        this.el.style.top = y + 'px';
+        this.el.style.left = x + 'px';
+    }
+}

package/dist/tree/index.d.ts

@@ -0,0 +1,180 @@
+import { ConvertibleModule, FullRenderingModule } from 'wok-ui';
+import { ShowContextMenuOpts } from '../context-menu';
+import './style.less';
+/**
+ * 树节点数据
+ */
+export interface TreeNodeData {
+    /**
+     * id，唯一标识
+     */
+    id: string;
+    /**
+     * 节点名称
+     */
+    title: string;
+    /**
+     * 子节点信息
+     */
+    children?: this[];
+    /**
+     * 是否展开
+     */
+    unfolded?: boolean;
+    /**
+     * 不可移动的，设置为 true 的节点不能被拖动调整顺序
+     * self 仅仅对当前节点有效
+     * all-descendants 所有的后代节点都不能移动
+     */
+    unmoveable?: 'self' | 'all-descendants';
+    /**
+     * 不能被选择的，默认可以被选择
+     */
+    unselectable?: boolean;
+}
+export /**
+ * 移动位置
+ */ type MovePlacement = 'before' | 'after' | 'in';
+/**
+ * 树
+ */
+export declare class Tree<T extends TreeNodeData> extends FullRenderingModule {
+    private opts;
+    /**
+     * 已选id列表
+     */
+    private selectedIds;
+    /**
+     * 事件处理器
+     */
+    private eventHandler;
+    /**
+     * 拖动的目标
+     */
+    private dragTarget?;
+    /**
+     * 拖动图标
+     */
+    private draggingImg?;
+    /**
+     * 数据
+     */
+    private data;
+    constructor(opts: {
+        /**
+         * 数据
+         */
+        data: T[];
+        /**
+         * 最大可选中数量，默认为 1，节点被选中后会有高亮显示，并且触发回调 onSelect
+         */
+        maxSelected?: number;
+        /**
+         * 最大层级，默认 10
+         */
+        maxLevel?: number;
+        /**
+         * 节点选中变化回调，每当选中节点发生变化时触发
+         * @param nodes 选中的节点的数据，带有层级信息
+         * @returns
+         */
+        onSelectChange?: (nodes: Array<T & {
+            level: number;
+        }>) => void;
+        /**
+         * 默认已选节点的 id 列表
+         */
+        selectedIds?: string[];
+        /**
+         * 启动移动功能，启动后支持拖动节点来改变节点的位置
+         */
+        enableMove?: boolean;
+        /**
+         * 移动钩子，当钩子调用成功，节点的位置才会发生变化
+         * @param sourceNode 被移动的节点
+         * @param targetNode 目标节点
+         * @param placement 相对目标节点的位置
+         * @returns
+         */
+        moveHook?: (sourceNode: T, targetNode: T, placement: MovePlacement) => Promise<void>;
+        /**
+         * 变化回调，每当数据发生变化时触发
+         * @param data 最新数据
+         * @returns
+         */
+        onChange?: (data: T[]) => void;
+        /**
+         * 构造节点的操作项，如果未定义，或返回的空数组，都不会显示出菜单项
+         */
+        buildActions?: (data: T, level: number) => ShowContextMenuOpts['menu'];
+        /**
+         * 构造节点的标题模块，默认显示 title 属性文本
+         * @returns
+         */
+        buildTitleModule?: (data: T) => ConvertibleModule;
+    });
+    protected buildContent(): void;
+    private triggerChange;
+    private triggerSelectChange;
+    private handleSelect;
+    /**
+     * 对节点取消选择
+     * @param id 节点数据的 id
+     * @returns
+     */
+    unselectNode(id: string): void;
+    /**
+     * 处理拖动开始事件，生成拖动图标
+     * @param sourceNode  被拖动的原始节点
+     * @param coord  事件坐标
+     */
+    private handleDragStart;
+    /**
+     * 获取所有当前可见的节点
+     */
+    private getVisibleNodes;
+    /**
+     * 移动节点
+     * @param sourceNodeId
+     * @param targetNodeId
+     * @param placement
+     */
+    moveNode(sourceNodeId: string, targetNodeId: string, placement: MovePlacement): void;
+    /**
+     * 删除一个节点
+     * @param id
+     */
+    deleteNode(id: string): void;
+    /**
+     * 内部的删除方法，仅删除节点数据，不触发任何行为
+     */
+    private internalDeleteNode;
+    /**
+     * 更新节点
+     * @param data
+     */
+    updateNode(data: {
+        id: string;
+        title: TreeNodeData['title'];
+    }): void;
+    /**
+     * 添加一个节点
+     */
+    addNode(data: T, parentId?: string): void;
+    private getNodeModule;
+    /**
+     * 获取节点信息
+     * @param id 节点id
+     */
+    getNode(id: string): T | undefined;
+    /**
+     * 获取一个节点的父节点信息，如果找不到节点，或者节点是根节点不存在父节点，则返回 undefined
+     * @param id
+     */
+    getParentNode(id: string): T | undefined;
+    /**
+     * 解绑事件
+     */
+    private unbindEvents;
+    destroy(): void;
+}