wok-ui-ext 0.1.0

package/dist/description-list/index.d.ts

@@ -0,0 +1,37 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+export interface DescriptionItem {
+    label: SubModulesOpt;
+    content: SubModulesOpt;
+    /**
+     * 条目独占一行.
+     */
+    exclusiveRow?: boolean;
+}
+/**
+ * 布局方式.
+ * vertical: 标题在内容上方；horizontal: 标题在内容左侧.
+ */
+export type DescriptionListLayout = 'vertical' | 'horizontal';
+export declare class DescriptionList extends DivModule {
+    constructor(opts: {
+        items: DescriptionItem[] | ((add: (...item: DescriptionItem[]) => void) => void);
+        cols?: number;
+        /**
+         * 间距（px），默认 24，bordered 模式下固定为 0
+         */
+        gap?: number;
+        /**
+         * 布局方式，默认 vertical
+         */
+        layout?: DescriptionListLayout;
+        /**
+         * 标题宽度（px），仅 layout 为 horizontal 时生效，默认 120
+         */
+        labelWidth?: number;
+        /**
+         * 是否带边框，默认 false
+         */
+        bordered?: boolean;
+    });
+}

package/dist/description-list/index.js

@@ -0,0 +1,145 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+export class DescriptionList extends DivModule {
+    constructor(opts) {
+        // 外层容器，bordered 时负责圆角裁剪
+        super('wok-ui-ext-description-list');
+        const { items, cols = 3, gap = 24, layout = 'vertical', labelWidth, bordered = false } = opts;
+        this.el.style.setProperty('--dl-gap', `${gap}px`);
+        if (layout === 'horizontal') {
+            this.el.classList.add('layout-horizontal');
+        }
+        if (bordered) {
+            this.el.classList.add('bordered');
+        }
+        // 构建 items
+        const finalItems = [];
+        if (Array.isArray(items)) {
+            finalItems.push(...items);
+        }
+        else {
+            function add(...items) {
+                finalItems.push(...items);
+            }
+            items(add);
+        }
+        // table：colgroup 控制列宽（horizontal 每列拆为 label 列 + content 列），tbody 动态构建
+        this.addChild({
+            tag: 'table',
+            classNames: 'wok-ui-ext-description-table',
+            children: [
+                {
+                    tag: 'colgroup',
+                    children: Array.from({ length: layout === 'horizontal' ? cols * 2 : cols }, (_, i) => layout === 'horizontal' && i % 2 === 0
+                        ? { tag: 'col', style: { width: `${labelWidth ?? 120}px` } }
+                        : { tag: 'col' })
+                },
+                {
+                    tag: 'tbody',
+                    children: add => {
+                        if (layout === 'horizontal') {
+                            // 标题在左：label/content 为单元格，每行 cols 对
+                            const perRow = cols * 2;
+                            let rowCells = [];
+                            const flushRow = () => {
+                                if (rowCells.length > 0) {
+                                    if (rowCells.length < perRow) {
+                                        // 行尾条目占满剩余列：最后一个 content 合并剩余列
+                                        const last = rowCells[rowCells.length - 1];
+                                        last.attrs = { colspan: String(perRow - rowCells.length + 1) };
+                                    }
+                                    add({ tag: 'tr', children: rowCells });
+                                    rowCells = [];
+                                }
+                            };
+                            for (const item of finalItems) {
+                                if (item.exclusiveRow) {
+                                    flushRow();
+                                    add({
+                                        tag: 'tr',
+                                        children: [
+                                            { tag: 'td', classNames: 'wok-ui-ext-description-label', children: item.label },
+                                            {
+                                                tag: 'td',
+                                                classNames: 'wok-ui-ext-description-content',
+                                                attrs: { colspan: String(perRow - 1) },
+                                                children: item.content
+                                            }
+                                        ]
+                                    });
+                                }
+                                else {
+                                    rowCells.push({ tag: 'td', classNames: 'wok-ui-ext-description-label', children: item.label }, { tag: 'td', classNames: 'wok-ui-ext-description-content', children: item.content });
+                                    if (rowCells.length >= perRow) {
+                                        flushRow();
+                                    }
+                                }
+                            }
+                            flushRow();
+                        }
+                        else {
+                            // 标题在上：每组 cols 个条目，label 一行、content 一行
+                            let group = [];
+                            const flushGroup = () => {
+                                if (group.length > 0) {
+                                    add({
+                                        tag: 'tr',
+                                        children: group.map(item => ({
+                                            tag: 'td',
+                                            classNames: 'wok-ui-ext-description-label',
+                                            children: item.label
+                                        }))
+                                    });
+                                    add({
+                                        tag: 'tr',
+                                        children: group.map(item => ({
+                                            tag: 'td',
+                                            classNames: 'wok-ui-ext-description-content',
+                                            children: item.content
+                                        }))
+                                    });
+                                    group = [];
+                                }
+                            };
+                            for (const item of finalItems) {
+                                if (item.exclusiveRow) {
+                                    // 独占一行：label 单独一行、content 单独一行，均占满整行
+                                    flushGroup();
+                                    add({
+                                        tag: 'tr',
+                                        children: [
+                                            {
+                                                tag: 'td',
+                                                classNames: 'wok-ui-ext-description-label',
+                                                attrs: { colspan: String(cols) },
+                                                children: item.label
+                                            }
+                                        ]
+                                    });
+                                    add({
+                                        tag: 'tr',
+                                        children: [
+                                            {
+                                                tag: 'td',
+                                                classNames: 'wok-ui-ext-description-content',
+                                                attrs: { colspan: String(cols) },
+                                                children: item.content
+                                            }
+                                        ]
+                                    });
+                                }
+                                else {
+                                    group.push(item);
+                                    if (group.length >= cols) {
+                                        flushGroup();
+                                    }
+                                }
+                            }
+                            flushGroup();
+                        }
+                    }
+                }
+            ]
+        });
+    }
+}

package/dist/description-list/style.css

@@ -0,0 +1,63 @@
+.wok-ui-ext-description-list {
+  width: 100%;
+}
+.wok-ui-ext-description-list.bordered {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.wok-ui-ext-description-list .wok-ui-ext-description-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+.wok-ui-ext-description-list .wok-ui-ext-description-table td {
+  vertical-align: top;
+}
+.wok-ui-ext-description-list .wok-ui-ext-description-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.wok-ui-ext-description-list .wok-ui-ext-description-content {
+  font-size: var(--font-size-small);
+  color: var(--text-primary);
+  word-break: break-word;
+  line-height: 1.5;
+}
+.wok-ui-ext-description-list:not(.bordered).layout-horizontal td.wok-ui-ext-description-label,
+.wok-ui-ext-description-list:not(.bordered).layout-horizontal td.wok-ui-ext-description-content {
+  padding: 6px 0;
+}
+.wok-ui-ext-description-list:not(.bordered).layout-horizontal td.wok-ui-ext-description-label {
+  padding-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wok-ui-ext-description-list:not(.bordered).layout-horizontal td.wok-ui-ext-description-content {
+  padding-right: var(--dl-gap, 24px);
+}
+.wok-ui-ext-description-list:not(.bordered):not(.layout-horizontal) td.wok-ui-ext-description-label {
+  padding: 6px calc(var(--dl-gap, 24px) / 2) 0;
+}
+.wok-ui-ext-description-list:not(.bordered):not(.layout-horizontal) td.wok-ui-ext-description-content {
+  padding: 6px calc(var(--dl-gap, 24px) / 2) var(--dl-gap, 24px);
+}
+.wok-ui-ext-description-list.bordered td {
+  padding: 12px 16px;
+  border-right: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+}
+.wok-ui-ext-description-list.bordered td:last-child {
+  border-right: none;
+}
+.wok-ui-ext-description-list.bordered tr:last-child td {
+  border-bottom: none;
+}
+.wok-ui-ext-description-list.bordered td.wok-ui-ext-description-label {
+  vertical-align: middle;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}

package/dist/divider/index.d.ts

@@ -0,0 +1,29 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+export interface DividerOpts {
+    /**
+     * 文字（水平模式时显示在中间）
+     */
+    text?: string;
+    /**
+     * 水平还是垂直，默认水平
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 虚线
+     */
+    dashed?: boolean;
+    /**
+     * 自定义文字颜色
+     */
+    color?: string;
+}
+/**
+ * 分割线
+ *
+ * 水平模式（默认）：带文字或不带文字，用于区块分隔
+ * 垂直模式：用于行内元素之间的分隔
+ */
+export declare class Divider extends DivModule {
+    constructor(opts?: DividerOpts);
+}

package/dist/divider/index.js

@@ -0,0 +1,29 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 分割线
+ *
+ * 水平模式（默认）：带文字或不带文字，用于区块分隔
+ * 垂直模式：用于行内元素之间的分隔
+ */
+export class Divider extends DivModule {
+    constructor(opts = {}) {
+        const { direction = 'horizontal', dashed, color, text } = opts;
+        const classNames = `wok-ui-ext-divider wok-ui-ext-divider-${direction}`;
+        super(classNames);
+        if (dashed) {
+            this.el.classList.add('wok-ui-ext-divider-dashed');
+        }
+        if (text) {
+            this.el.classList.add('wok-ui-ext-divider-with-text');
+            this.addChild({
+                tag: 'span',
+                classNames: 'wok-ui-ext-divider-text',
+                innerText: text
+            });
+        }
+        if (color) {
+            this.el.style.setProperty('--divider-color', color);
+        }
+    }
+}

package/dist/divider/style.css

@@ -0,0 +1,50 @@
+.wok-ui-ext-divider {
+  --divider-color: var(--border-light);
+  --divider-text-color: var(--text-tertiary);
+  --divider-text-bg: transparent;
+  --divider-text-padding: 16px;
+  border: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.wok-ui-ext-divider-horizontal {
+  width: 100%;
+  border-top: 1px solid var(--divider-color);
+}
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-with-text {
+  border-top: none;
+}
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-with-text::before,
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-with-text::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid var(--divider-color);
+}
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-dashed {
+  border-top-style: dashed;
+}
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-dashed.wok-ui-ext-divider-with-text {
+  border-top: none;
+}
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-dashed.wok-ui-ext-divider-with-text::before,
+.wok-ui-ext-divider-horizontal.wok-ui-ext-divider-dashed.wok-ui-ext-divider-with-text::after {
+  border-top-style: dashed;
+}
+.wok-ui-ext-divider-horizontal .wok-ui-ext-divider-text {
+  padding: 0 var(--divider-text-padding);
+  font-size: var(--font-size-small);
+  color: var(--divider-text-color);
+  white-space: nowrap;
+  background: var(--divider-text-bg);
+}
+.wok-ui-ext-divider-vertical {
+  display: inline-flex;
+  height: 1em;
+  border-left: 1px solid var(--divider-color);
+  vertical-align: middle;
+  align-self: center;
+}
+.wok-ui-ext-divider-vertical.wok-ui-ext-divider-dashed {
+  border-left-style: dashed;
+}

package/dist/drawer/index.d.ts

@@ -0,0 +1,51 @@
+import { SubModulesOpt } from 'wok-ui';
+import './style.less';
+export interface DrawerOptions {
+    /**
+     * 从哪个方向滑出，默认 right
+     */
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 宽度（仅 left/right 有效），默认 400px
+     */
+    width?: number;
+    /**
+     * 主体内容
+     */
+    body: SubModulesOpt;
+    /**
+     * 用 body 完全替换整个内容面板，
+     * 适用于完全自定义内容的场景。设为 true 时 title 不生效。
+     */
+    replaceByBody?: boolean;
+    /**
+     * 关闭回调
+     */
+    onClose?: () => void;
+    /**
+     * 入场动画完成后触发
+     */
+    onShown?: () => void;
+}
+export interface DrawerHandle {
+    close: () => void;
+}
+/**
+ * 打开抽屉
+ *
+ * @example
+ * ```ts
+ * const drawer = showDrawer({
+ *   title: '详情',
+ *   body: new MyForm()
+ * })
+ *
+ * // 手动关闭
+ * drawer.close()
+ * ```
+ */
+export declare function showDrawer(opts: DrawerOptions): DrawerHandle;

package/dist/drawer/index.js

@@ -0,0 +1,183 @@
+import { DivModule } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { IconTimes } from '../icons';
+import './style.css';
+// ─── 内容面板 ──────────────────────────────────────
+class Content extends DivModule {
+    constructor(opts, onDestroy) {
+        const placement = opts.placement || 'right';
+        super('wok-ui-ext-drawer-content');
+        this.opts = opts;
+        this.onDestroy = onDestroy;
+        this.called = false;
+        this.animating = false;
+        this.el.classList.add(placement);
+        if (typeof opts.width === 'number' && (placement === 'left' || placement === 'right')) {
+            this.el.style.width = `${opts.width}px`;
+        }
+        const i18n = getWokUiExtI18n();
+        if (opts.replaceByBody) {
+            this.addChild(opts.body);
+        }
+        else {
+            // 头部
+            if (opts.title) {
+                this.addChild({
+                    classNames: 'wok-ui-ext-drawer-header',
+                    children: add => {
+                        add({
+                            tag: 'h3',
+                            classNames: 'wok-ui-ext-drawer-title',
+                            children: opts.title
+                        });
+                        add({
+                            tag: 'button',
+                            classNames: 'wok-ui-ext-drawer-close',
+                            attrs: {
+                                'aria-label': i18n.buildMsg('modal-close')
+                            },
+                            children: new IconTimes(),
+                            onClick: () => this.destroy()
+                        });
+                    }
+                });
+            }
+            // 主体
+            this.addChild({
+                classNames: 'wok-ui-ext-drawer-body',
+                children: opts.body
+            });
+        }
+        // 入口动画
+        this.animateIn(placement);
+    }
+    animateIn(placement) {
+        this.el.style.transition = 'transform 0.25s ease, opacity 0.25s ease';
+        // 从对应方向移入
+        const offsetMap = {
+            left: 'translateX(-100%)',
+            right: 'translateX(100%)',
+            top: 'translateY(-100%)',
+            bottom: 'translateY(100%)'
+        };
+        this.el.style.transform = offsetMap[placement] || offsetMap.right;
+        this.el.style.opacity = '0';
+        // 触发 reflow 后恢复原位
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.el.style.transform = 'translate(0, 0)';
+                this.el.style.opacity = '1';
+                setTimeout(() => this.opts.onShown?.(), 250);
+            });
+        });
+    }
+    animateOut() {
+        this.animating = true;
+        return new Promise(resolve => {
+            const placement = this.opts.placement || 'right';
+            const offsetMap = {
+                left: 'translateX(-100%)',
+                right: 'translateX(100%)',
+                top: 'translateY(-100%)',
+                bottom: 'translateY(100%)'
+            };
+            this.el.style.transform = offsetMap[placement] || offsetMap.right;
+            this.el.style.opacity = '0';
+            setTimeout(resolve, 250);
+        });
+    }
+    destroy() {
+        if (this.animating)
+            return;
+        if (this.called)
+            return;
+        this.called = true;
+        this.animating = true;
+        this.animateOut().then(() => {
+            super.destroy();
+            this.onDestroy();
+            this.opts.onClose?.();
+        });
+    }
+}
+// ─── 遮罩层 ──────────────────────────────────────────
+class Backdrop extends DivModule {
+    constructor() {
+        super('wok-ui-ext-drawer-backdrop');
+        this.contents = [];
+        this.destroyed = false;
+        document.body.classList.add('wok-ui-ext-drawer-lock-scroll');
+        // 点击遮罩关闭最上层
+        this.el.addEventListener('click', () => {
+            if (this.contents.length === 0)
+                return;
+            this.contents[this.contents.length - 1].destroy();
+        });
+        // Escape 关闭
+        this.escHandler = (e) => {
+            if (e.key === 'Escape' && this.contents.length > 0) {
+                this.contents[this.contents.length - 1].destroy();
+            }
+        };
+        document.addEventListener('keydown', this.escHandler);
+    }
+    addContent(content) {
+        this.contents.push(content);
+        this.addChild(content);
+    }
+    removeContent(content) {
+        this.contents = this.contents.filter(c => c !== content);
+        if (this.contents.length === 0) {
+            this.destroy();
+        }
+    }
+    destroy() {
+        document.removeEventListener('keydown', this.escHandler);
+        // 清空所有 content
+        this.contents.forEach(c => {
+            try {
+                c.destroy();
+            }
+            catch {
+                // ignore
+            }
+        });
+        this.contents = [];
+        document.body.classList.remove('wok-ui-ext-drawer-lock-scroll');
+        this.destroyed = true;
+        super.destroy();
+    }
+}
+// ─── 全局 backdrop ──────────────────────────────────
+let backdrop;
+function getBackdrop() {
+    if (!backdrop || backdrop.destroyed) {
+        backdrop = new Backdrop();
+        backdrop.mount(document.body);
+    }
+    return backdrop;
+}
+/**
+ * 打开抽屉
+ *
+ * @example
+ * ```ts
+ * const drawer = showDrawer({
+ *   title: '详情',
+ *   body: new MyForm()
+ * })
+ *
+ * // 手动关闭
+ * drawer.close()
+ * ```
+ */
+export function showDrawer(opts) {
+    const bd = getBackdrop();
+    const content = new Content(opts, () => {
+        bd.removeContent(content);
+    });
+    bd.addContent(content);
+    return {
+        close: () => content.destroy()
+    };
+}

package/dist/drawer/style.css

@@ -0,0 +1,100 @@
+.wok-ui-ext-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  justify-content: flex-end;
+  animation: wok-ui-ext-drawer-fade-in 0.2s ease;
+}
+.wok-ui-ext-drawer-content {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-card);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
+  position: absolute;
+  overflow: hidden;
+}
+.wok-ui-ext-drawer-content.right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 400px;
+  max-width: 100vw;
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+}
+.wok-ui-ext-drawer-content.left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 400px;
+  max-width: 100vw;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
+}
+.wok-ui-ext-drawer-content.top {
+  top: 0;
+  left: 0;
+  right: 0;
+  max-height: 90vh;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+.wok-ui-ext-drawer-content.bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 90vh;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.wok-ui-ext-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-light);
+  flex-shrink: 0;
+}
+.wok-ui-ext-drawer-title {
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0;
+}
+.wok-ui-ext-drawer-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: background var(--transition-speed), color var(--transition-speed);
+  font-size: 18px;
+}
+.wok-ui-ext-drawer-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.wok-ui-ext-drawer-close svg {
+  width: 18px;
+  height: 18px;
+}
+.wok-ui-ext-drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+body.wok-ui-ext-drawer-lock-scroll {
+  overflow: hidden;
+}
+@keyframes wok-ui-ext-drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}