wok-ui-ext 0.1.0

package/dist/modal/index.js

@@ -0,0 +1,79 @@
+import { getWokUiExtI18n } from '../i18n';
+import { IconExclamationCircle, IconQuestionCircle } from '../icons';
+import { Modal } from './modal';
+import './style.css';
+export * from './modal';
+/**
+ * 显示模态框
+ * @param opts 模态框选项
+ * @returns 模态框句柄
+ */
+export function showModal(opts) {
+    const modal = new Modal(opts);
+    modal.mount(document.body);
+    return {
+        close: () => {
+            modal.destroy();
+        }
+    };
+}
+/**
+ * 显示警告模态框
+ * @param msg 警告内容
+ */
+export function showAlert(opts) {
+    if (typeof opts === 'string') {
+        const msg = opts;
+        return new Promise(resolve => {
+            showAlert({
+                msg,
+                onConfirm: () => {
+                    resolve();
+                }
+            });
+        });
+    }
+    const i18n = getWokUiExtI18n();
+    const modal = showModal({
+        title: i18n.buildMsg('alert-warning'),
+        titleIcon: new IconExclamationCircle(),
+        closeBtn: false,
+        body: opts.msg,
+        buttons: {
+            confirm: i18n.buildMsg('alert-ok')
+        },
+        onConfirm: () => {
+            modal.close();
+            opts.onConfirm?.();
+        }
+    });
+}
+export function showConfirm(opts) {
+    if (typeof opts === 'string') {
+        return new Promise((resolve, reject) => {
+            showConfirm({
+                msg: opts,
+                onConfirm: () => resolve(true),
+                onCancel: () => resolve(false)
+            });
+        });
+    }
+    const i18n = getWokUiExtI18n();
+    const modal = showModal({
+        title: i18n.buildMsg('modal-confirm'),
+        titleIcon: new IconQuestionCircle(),
+        closeBtn: false,
+        body: opts.msg,
+        buttons: {
+            confirm: i18n.buildMsg('modal-confirm'),
+            cancel: i18n.buildMsg('modal-cancel')
+        },
+        onConfirm: () => {
+            modal.close();
+            opts.onConfirm?.();
+        },
+        onClose: () => {
+            opts.onCancel?.();
+        }
+    });
+}

package/dist/modal/modal.d.ts

@@ -0,0 +1,76 @@
+import { ConvertibleModule, DivModule, RemoteSvgIcon, SubModulesOpt, SvgIcon } from 'wok-ui';
+import { Button } from '../button';
+/**
+ * 模态框选项
+ */
+export interface ModalOptions {
+    /**
+     * 标题，无标题不出现头部.
+     */
+    title?: SubModulesOpt;
+    /**
+     * 标题图标，无图标不出现图标.
+     */
+    titleIcon?: SvgIcon | RemoteSvgIcon;
+    /**
+     * 是否出现关闭按钮.只在有标题的情况下有效,如果设置为true会在右上角出现关闭图标.默认为 true.
+     */
+    closeBtn?: boolean;
+    /**
+     * 主体部分.
+     */
+    body: SubModulesOpt;
+    /**
+     * 使用 body 部分替换掉整个内容，且容器不再附加背景、圆角等外观样式，
+     * 外观完全由 body 自定义.
+     */
+    replaceByBody?: boolean;
+    /**
+     * 追加到模态框容器上的自定义 class，可用于覆盖默认样式.
+     */
+    className?: string;
+    /**
+     * 宽度，默认 500px.
+     */
+    width?: number;
+    /**
+     * 关闭回调.
+     */
+    onClose?: () => void;
+    /**
+     * 确认回调，点击确认按钮后触发
+     */
+    onConfirm?: () => void;
+    /**
+     * 自定义脚部，优先级高于按钮.
+     */
+    footer?: ConvertibleModule;
+    /**
+     * 按钮设置，可选，可设置显示按钮或自定义按钮文字，有设置才会显示出来。
+     * 当值是 Button[] 类型时，可自定义多个按钮，需要注意按钮是从右往左排列的。
+     * 当值是 { confirm?: boolean | string, cancel?: boolean | string } 类型时，
+     * 会显示确认按钮和取消按钮，按钮文字可自定义，当值为 true 时，按钮文字为默认值。
+     * 确认按钮为主要按钮，取消按钮为次要按钮。
+     */
+    buttons?: {
+        confirm?: boolean | string;
+        cancel?: boolean | string;
+    } | Button[];
+    /**
+     * 模态框完全显示回调，在模态框入场动画完成后触发
+     * @returns
+     */
+    onShown?: () => void;
+}
+/**
+ * 弹窗组件
+ */
+export declare class Modal extends DivModule {
+    private readonly opts;
+    private docChangeListener?;
+    private keydownListener?;
+    constructor(opts: ModalOptions);
+    mount(parentEl: Element): void;
+    private destroyed;
+    destroy(): void;
+}

package/dist/modal/modal.js

@@ -0,0 +1,188 @@
+import { animate, ANIMATION_PROVISION, Animation, DivModule } from 'wok-ui';
+import { Button } from '../button';
+import { getWokUiExtI18n } from '../i18n';
+import { IconTimes } from '../icons';
+/**
+ * 弹窗组件
+ */
+export class Modal extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-modal-overlay');
+        this.opts = opts;
+        this.destroyed = false;
+        const i18n = getWokUiExtI18n();
+        document.body.classList.add('modal-open');
+        const containerClassNames = ['wok-ui-ext-modal-container', ANIMATION_PROVISION];
+        if (opts.replaceByBody) {
+            containerClassNames.push('wok-ui-ext-modal-replace-body');
+        }
+        if (opts.className) {
+            containerClassNames.push(opts.className);
+        }
+        this.addChild({
+            classNames: containerClassNames,
+            preHandle(el) {
+                if (typeof opts.width === 'number' && opts.width > 0) {
+                    el.style.width = `${opts.width}px`;
+                }
+            },
+            children: add => {
+                if (opts.replaceByBody) {
+                    add(opts.body);
+                    return;
+                }
+                // 头部
+                if (opts.title) {
+                    const title = opts.title;
+                    add({
+                        classNames: 'wok-ui-ext-modal-header',
+                        children: add => {
+                            // 标题
+                            add({
+                                tag: 'h3',
+                                children: add => {
+                                    if (opts.titleIcon) {
+                                        add(opts.titleIcon, ' ');
+                                    }
+                                    add(title);
+                                }
+                            });
+                            // 关闭按钮
+                            if (opts.closeBtn !== false) {
+                                add({
+                                    tag: 'button',
+                                    classNames: 'wok-ui-ext-modal-close',
+                                    attrs: {
+                                        'aria-label': i18n.buildMsg('modal-close')
+                                    },
+                                    children: new IconTimes(),
+                                    onClick: () => {
+                                        this.destroy();
+                                        opts.onClose?.();
+                                    }
+                                });
+                            }
+                        }
+                    });
+                }
+                // body
+                add({
+                    classNames: 'wok-ui-ext-modal-body',
+                    children: opts.body
+                });
+                // footer
+                if (opts.footer) {
+                    add({
+                        classNames: 'wok-ui-ext-modal-footer',
+                        children: opts.footer
+                    });
+                    return;
+                }
+                if (!opts.buttons) {
+                    return;
+                }
+                const buttons = opts.buttons;
+                if ((Array.isArray(buttons) && buttons.length) ||
+                    (!Array.isArray(buttons) && (buttons.confirm || buttons.cancel))) {
+                    add({
+                        classNames: 'wok-ui-ext-modal-footer',
+                        children: add => {
+                            if (Array.isArray(buttons)) {
+                                add(...buttons);
+                                return;
+                            }
+                            // 确定和取消
+                            if (buttons.cancel) {
+                                add(new Button({
+                                    type: 'secondary',
+                                    text: buttons.cancel === true ? i18n.buildMsg('modal-cancel') : buttons.cancel,
+                                    onClick: () => {
+                                        this.destroy();
+                                        opts.onClose?.();
+                                    }
+                                }));
+                            }
+                            if (buttons.confirm) {
+                                add(new Button({
+                                    type: 'primary',
+                                    text: buttons.confirm === true ? i18n.buildMsg('modal-confirm') : buttons.confirm,
+                                    onClick: () => opts.onConfirm?.()
+                                }));
+                            }
+                        }
+                    });
+                }
+            }
+        });
+        // 监听文档变化，当路由变化时自动关闭
+        this.docChangeListener = () => this.destroy();
+        window.addEventListener('popstate', this.docChangeListener, { once: true });
+        // Esc 键关闭
+        this.keydownListener = (e) => {
+            if (e.key === 'Escape') {
+                const btns = opts.buttons;
+                const hasCancelBtn = !Array.isArray(btns) && btns && btns.cancel;
+                if (hasCancelBtn) {
+                    // 有取消按钮 → 触发取消行为（showConfirm 的取消回调）
+                    opts.onClose?.();
+                    this.destroy();
+                }
+                else if (!Array.isArray(btns) && btns && btns.confirm) {
+                    // 只有确认按钮 → 触发确认行为（showAlert 的确认回调）
+                    opts.onConfirm?.();
+                    this.destroy();
+                }
+                else {
+                    // 无按钮或自定义按钮数组 → 直接关闭
+                    this.destroy();
+                }
+            }
+        };
+        document.addEventListener('keydown', this.keydownListener);
+    }
+    mount(parentEl) {
+        parentEl.appendChild(this.el);
+        const container = this.el.querySelector('.wok-ui-ext-modal-container');
+        if (container) {
+            animate({
+                el: container,
+                animation: Animation.SCALE_UP,
+                duration: 200
+            }).then(() => {
+                this.opts.onShown?.();
+            });
+        }
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        const container = this.el.querySelector('.wok-ui-ext-modal-container');
+        const doDestroy = () => {
+            // 先清理事件监听，再销毁 DOM
+            if (this.docChangeListener) {
+                document.removeEventListener('popstate', this.docChangeListener);
+            }
+            if (this.keydownListener) {
+                document.removeEventListener('keydown', this.keydownListener);
+            }
+            if (!document.querySelector('.wok-ui-ext-modal-overlay')) {
+                document.body.classList.remove('modal-open');
+            }
+            super.destroy();
+        };
+        if (container) {
+            animate({
+                el: container,
+                animation: Animation.SCALE_UP,
+                reverse: true,
+                duration: 200
+            }).then(() => {
+                doDestroy();
+            });
+        }
+        else {
+            doDestroy();
+        }
+    }
+}

package/dist/modal/style.css

@@ -0,0 +1,90 @@
+.wok-ui-ext-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(8, 20, 40, 0.6);
+  backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container {
+  background: var(--bg-card);
+  width: 440px;
+  max-width: 90%;
+  border-radius: 32px;
+  box-shadow: 0 30px 60px rgba(0, 20, 50, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container.wok-ui-ext-modal-replace-body {
+  background: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;
+  display: block;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-header {
+  padding: 20px 24px 8px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-header h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-header h3 svg {
+  font-size: 20px;
+  color: var(--color-primary);
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-header .wok-ui-ext-modal-close {
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  color: var(--text-placeholder);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  transition: background 0.1s;
+  padding: 0;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-header .wok-ui-ext-modal-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-body {
+  padding: 8px 24px 24px 24px;
+  color: var(--text-secondary);
+  font-size: 16px;
+  line-height: 1.5;
+  flex-grow: 1;
+  overflow: auto;
+}
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container .wok-ui-ext-modal-footer {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  border-top: 1px solid var(--border-light);
+  flex-shrink: 0;
+}
+body.modal-open {
+  overflow: hidden;
+}

package/dist/pagination/index.d.ts

@@ -0,0 +1,31 @@
+import { FullRenderingModule } from 'wok-ui';
+import './style.less';
+/**
+ * 分页组件
+ */
+export declare class Pagination extends FullRenderingModule {
+    private opts;
+    private pn;
+    /**
+     * 分页组件
+     * @param opts
+     * @param opts.total 总条数
+     * @param opts.pz 每页条数
+     * @param opts.pn 当前页码
+     * @param opts.simple 简洁模式，仅显示上下页 + 页码信息（默认 false）
+     * @param opts.onChange 分页回调
+     */
+    constructor(opts: {
+        total: number;
+        pz: number;
+        pn: number;
+        simple?: boolean;
+        onChange: (pn: number, pz: number) => void;
+    });
+    private calcPageNumbers;
+    protected buildContent(): void;
+    /** 简洁模式：仅上下页 + 页码信息 */
+    private buildSimpleContent;
+    /** 完整模式：页码按钮 + 省略号 */
+    private buildFullContent;
+}

package/dist/pagination/index.js

@@ -0,0 +1,215 @@
+import { FullRenderingModule } from 'wok-ui';
+import './style.css';
+import { getWokUiExtI18n } from '../i18n';
+import { IconChevronLeft, IconChevronRight } from '../icons';
+/**
+ * 分页组件
+ */
+export class Pagination extends FullRenderingModule {
+    /**
+     * 分页组件
+     * @param opts
+     * @param opts.total 总条数
+     * @param opts.pz 每页条数
+     * @param opts.pn 当前页码
+     * @param opts.simple 简洁模式，仅显示上下页 + 页码信息（默认 false）
+     * @param opts.onChange 分页回调
+     */
+    constructor(opts) {
+        super();
+        this.opts = opts;
+        this.el.classList.add('wok-ui-ext-pagination');
+        this.el.setAttribute('role', 'navigation');
+        this.el.setAttribute('aria-label', 'Pagination');
+        if (opts.simple) {
+            this.el.classList.add('wok-ui-ext-pagination-simple');
+        }
+        this.pn = opts.pn;
+        this.render();
+    }
+    calcPageNumbers() {
+        const { total, pz } = this.opts;
+        const pn = this.pn;
+        const totalPages = Math.ceil(total / pz);
+        const maxPagesToShow = 5;
+        const halfMaxPagesToShow = Math.floor(maxPagesToShow / 2);
+        const startPage = Math.max(1, pn - halfMaxPagesToShow);
+        const endPage = Math.min(totalPages, pn + halfMaxPagesToShow);
+        const pageNumbers = [];
+        for (let i = startPage; i <= endPage; i++) {
+            pageNumbers.push(i);
+        }
+        if (startPage > 1) {
+            pageNumbers.unshift('...');
+            pageNumbers.unshift(1);
+        }
+        if (endPage < totalPages) {
+            pageNumbers.push('...');
+            pageNumbers.push(totalPages);
+        }
+        if (pn > 1) {
+            pageNumbers.unshift('<');
+        }
+        if (pn < totalPages) {
+            pageNumbers.push('>');
+        }
+        return pageNumbers;
+    }
+    buildContent() {
+        if (this.opts.simple) {
+            this.buildSimpleContent();
+            return;
+        }
+        this.buildFullContent();
+    }
+    /** 简洁模式：仅上下页 + 页码信息 */
+    buildSimpleContent() {
+        const i18n = getWokUiExtI18n();
+        const { total, pz } = this.opts;
+        const totalPages = Math.ceil(total / pz);
+        if (totalPages <= 0) {
+            return;
+        }
+        const isFirst = this.pn <= 1;
+        const isLast = this.pn >= totalPages;
+        this.addChild({
+            tag: 'button',
+            classNames: ['wok-ui-ext-page-item', 'prev'],
+            attrs: {
+                type: 'button',
+                'aria-label': i18n.buildMsg('pagination-prev-page'),
+                disabled: isFirst ? true : undefined
+            },
+            children: new IconChevronLeft(),
+            preHandle: el => {
+                if (isFirst) {
+                    el.classList.add('disabled');
+                }
+            },
+            onClick: () => {
+                if (this.pn > 1) {
+                    this.pn--;
+                    this.render();
+                    this.opts.onChange(this.pn, this.opts.pz);
+                }
+            }
+        });
+        this.addChild({
+            classNames: ['wok-ui-ext-page-info'],
+            attrs: {
+                'aria-current': 'page'
+            },
+            children: i18n.buildMsg('pagination-simple-format', `${this.pn}`, `${totalPages}`)
+        });
+        this.addChild({
+            tag: 'button',
+            classNames: ['wok-ui-ext-page-item', 'next'],
+            attrs: {
+                type: 'button',
+                'aria-label': i18n.buildMsg('pagination-next-page'),
+                disabled: isLast ? true : undefined
+            },
+            children: new IconChevronRight(),
+            preHandle: el => {
+                if (isLast) {
+                    el.classList.add('disabled');
+                }
+            },
+            onClick: () => {
+                if (this.pn < totalPages) {
+                    this.pn++;
+                    this.render();
+                    this.opts.onChange(this.pn, this.opts.pz);
+                }
+            }
+        });
+    }
+    /** 完整模式：页码按钮 + 省略号 */
+    buildFullContent() {
+        const i18n = getWokUiExtI18n();
+        const { total, pz } = this.opts;
+        const totalPages = Math.ceil(total / pz);
+        this.addChild({
+            classNames: ['wok-ui-ext-page-total'],
+            children: i18n.buildMsg('pagination-total', `${total}`)
+        });
+        if (totalPages <= 1) {
+            return;
+        }
+        const pageNumbers = this.calcPageNumbers();
+        for (const page of pageNumbers) {
+            const isPrev = page === '<';
+            const isNext = page === '>';
+            const isEllipsis = page === '...';
+            const pageNumber = typeof page === 'number' ? page : undefined;
+            const isActive = pageNumber === this.pn;
+            let label;
+            if (isPrev) {
+                label = i18n.buildMsg('pagination-prev-page');
+            }
+            else if (isNext) {
+                label = i18n.buildMsg('pagination-next-page');
+            }
+            else if (pageNumber !== undefined) {
+                label = i18n.buildMsg('pagination-page', `${pageNumber}`);
+            }
+            else {
+                label = '';
+            }
+            this.addChild({
+                tag: 'button',
+                classNames: ['wok-ui-ext-page-item'],
+                attrs: {
+                    type: 'button',
+                    'aria-label': label,
+                    'aria-current': isActive ? 'page' : undefined,
+                    disabled: isEllipsis ? true : undefined
+                },
+                children: add => {
+                    if (isPrev) {
+                        add(new IconChevronLeft());
+                    }
+                    else if (isNext) {
+                        add(new IconChevronRight());
+                    }
+                    else if (pageNumber !== undefined) {
+                        add(`${pageNumber}`);
+                    }
+                    else {
+                        add('...');
+                    }
+                },
+                preHandle: el => {
+                    if (isActive) {
+                        el.classList.add('active');
+                    }
+                    if (isEllipsis) {
+                        el.classList.add('disabled');
+                    }
+                },
+                onClick: () => {
+                    if (isEllipsis) {
+                        return;
+                    }
+                    if (isPrev) {
+                        this.pn = this.pn - 1;
+                        if (this.pn < 1) {
+                            return;
+                        }
+                    }
+                    else if (isNext) {
+                        this.pn = this.pn + 1;
+                        if (this.pn > totalPages) {
+                            return;
+                        }
+                    }
+                    else if (pageNumber !== undefined) {
+                        this.pn = pageNumber;
+                    }
+                    this.render();
+                    this.opts.onChange(this.pn, this.opts.pz);
+                }
+            });
+        }
+    }
+}