wok-ui-ext 0.1.0

package/dist/table/column.d.ts

@@ -0,0 +1,78 @@
+import { SubModulesOpt } from 'wok-ui';
+/**
+ * 列设定.
+ */
+export interface TableColumnSetting<T> {
+    /**
+     * 列名称.特殊需要传入模块来处理，比如文字需要变色等.
+     */
+    name: string | (() => SubModulesOpt);
+    /**
+     * 将列固定
+     */
+    fixed?: boolean;
+    /**
+     * 列宽度，默认 80
+     */
+    width?: number;
+    /**
+     * 内容生成.
+     */
+    content: (data: T, rowIdx: number) => SubModulesOpt;
+}
+/**
+ * 列.
+ */
+export declare class TableColumn<T> {
+    readonly setting: TableColumnSetting<T>;
+    constructor(setting: TableColumnSetting<T>);
+}
+/**
+ * 勾选框列.
+ */
+export declare class TableCheckboxColumn<T> extends TableColumn<T> {
+    private opts;
+    private checkAllBox?;
+    private boxes;
+    constructor(opts: {
+        /**
+         * 将列固定
+         */
+        fixed?: boolean;
+        /**
+         * 勾选框绑定的值.
+         */
+        value: (data: T, rowIdx: number) => string;
+        /**
+         * 初始状态，可选.
+         */
+        checked?: (data: T, rowIdx: number) => boolean;
+        /**
+         * 列名称，可选，如果有值，则不会在头部显示全选的勾选框.
+         */
+        name?: string;
+        /**
+         * 是否禁用函数, 适用于一些无权限或不支持批量操作的场景
+         * @param data
+         * @returns
+         */
+        disabled?: (data: T) => boolean;
+        /**
+         * 更改事件.
+         */
+        onChange?: (checkedVals: string[]) => void;
+    });
+    /**
+     * 更新全选勾选框.
+     */
+    private updateCheckAllBox;
+    getCheckedValues(): string[];
+    checkAll(): void;
+    uncheckAll(): void;
+}
+/**
+ * 序号列.
+ */
+export declare class TableIndexColumn<T> extends TableColumn<T> {
+    constructor();
+}

package/dist/table/column.js

@@ -0,0 +1,113 @@
+import { Checkbox, rem } from 'wok-ui';
+/**
+ * 列.
+ */
+export class TableColumn {
+    constructor(setting) {
+        this.setting = setting;
+    }
+}
+/**
+ * 勾选框列.
+ */
+export class TableCheckboxColumn extends TableColumn {
+    constructor(opts) {
+        let name = '';
+        if (opts.name) {
+            name = opts.name;
+        }
+        else {
+            name = () => {
+                const checkbox = new Checkbox({
+                    status: 'unchecked',
+                    onChange: status => {
+                        if (checkbox.isChecked()) {
+                            // 全选
+                            this.boxes.forEach(b => b.setStatus('checked'));
+                        }
+                        else {
+                            // 全不选
+                            this.boxes.forEach(b => b.setStatus('unchecked'));
+                        }
+                        if (opts.onChange) {
+                            opts.onChange(this.getCheckedValues());
+                        }
+                    },
+                    value: ''
+                });
+                this.checkAllBox = checkbox;
+                return checkbox;
+            };
+        }
+        super({
+            name,
+            fixed: opts.fixed,
+            content: (data, idx) => {
+                const disabled = opts.disabled ? opts.disabled(data) : false;
+                const value = opts.value(data, idx);
+                const checked = opts.checked ? opts.checked(data, idx) : false;
+                const box = new Checkbox({
+                    status: checked ? 'checked' : 'unchecked',
+                    value,
+                    disabled,
+                    onChange: () => {
+                        const checkedValues = this.getCheckedValues();
+                        if (opts.onChange) {
+                            opts.onChange(checkedValues);
+                        }
+                        this.updateCheckAllBox();
+                    }
+                });
+                if (!disabled) {
+                    this.boxes.push(box);
+                }
+                this.updateCheckAllBox();
+                return box;
+            },
+            width: rem(2)
+        });
+        this.opts = opts;
+        this.boxes = [];
+    }
+    /**
+     * 更新全选勾选框.
+     */
+    updateCheckAllBox() {
+        if (!this.checkAllBox) {
+            return;
+        }
+        const checkedValues = this.getCheckedValues();
+        if (this.boxes.length > 0 && checkedValues.length === this.boxes.length) {
+            this.checkAllBox.setStatus('checked');
+        }
+        else if (checkedValues.length === 0) {
+            this.checkAllBox.setStatus('unchecked');
+        }
+        else {
+            this.checkAllBox.setStatus('indeterminate');
+        }
+    }
+    getCheckedValues() {
+        return this.boxes.filter(b => b.isChecked()).map(b => b.value);
+    }
+    checkAll() {
+        if (this.checkAllBox) {
+            this.checkAllBox.setStatus('checked');
+        }
+        this.boxes.forEach(b => b.setStatus('checked'));
+    }
+    uncheckAll() {
+        if (this.checkAllBox) {
+            this.checkAllBox.setStatus('unchecked');
+        }
+        this.boxes.forEach(b => b.setStatus('unchecked'));
+    }
+}
+/**
+ * 序号列.
+ */
+export class TableIndexColumn extends TableColumn {
+    constructor() {
+        super({ name: '#', content: (data, idx) => `${idx + 1}`, width: rem(3) });
+    }
+}

package/dist/table/header.d.ts

@@ -0,0 +1,13 @@
+import { Module } from 'wok-ui';
+import { TableColumn } from './column';
+/**
+ * 头部
+ */
+export declare class Header<T> extends Module {
+    constructor(opts: {
+        /**
+         * 列设置.
+         */
+        cols: TableColumn<T>[];
+    });
+}

package/dist/table/header.js

@@ -0,0 +1,15 @@
+import { Module } from 'wok-ui';
+import { Row } from './row';
+/**
+ * 头部
+ */
+export class Header extends Module {
+    constructor(opts) {
+        super(document.createElement('thead'));
+        this.el.classList.add('wok-ui-ext-table-header');
+        this.addChild(new Row({
+            cols: opts.cols,
+            isHeader: true
+        }));
+    }
+}

package/dist/table/index.d.ts

@@ -0,0 +1,41 @@
+import { FullRenderingModule } from 'wok-ui';
+import { TableColumn } from './column';
+import './style.less';
+/**
+ * 表格
+ */
+export declare class Table<T> extends FullRenderingModule {
+    private opts;
+    /**
+     * 展开后的列数组
+     */
+    private cols;
+    constructor(opts: {
+        /**
+         * 数据列表.
+         */
+        list: T[];
+        /**
+         * 列设置，支持数组或动态构建函数。
+         */
+        cols: TableColumn<T>[] | ((add: (col: TableColumn<T>) => void) => void);
+        /**
+         * 固定头部，开启后表头在滚动时保持固定，需配合 height 使用（未指定时默认 300px）
+         */
+        fixedHeader?: boolean;
+        /**
+         * 表格高度，超出后容器内部滚动
+         */
+        height?: number | string;
+        /**
+         * 表格的标题
+         */
+        caption?: string;
+        /**
+         * 空状态的描述
+         */
+        emptyDesc?: string;
+    });
+    protected buildContent(): void;
+}
+export * from './column';

package/dist/table/index.js

@@ -0,0 +1,84 @@
+import { FullRenderingModule } from 'wok-ui';
+import { Body } from './body';
+import { Header } from './header';
+import './style.css';
+/**
+ * 表格
+ */
+export class Table extends FullRenderingModule {
+    constructor(opts) {
+        // 外层为滚动容器，内部是原生 table 布局
+        super(document.createElement('div'));
+        this.opts = opts;
+        this.el.classList.add('wok-ui-ext-table');
+        // 高度控制
+        const { height } = opts;
+        if (typeof height === 'number') {
+            this.el.style.height = `${height}px`;
+        }
+        else if (typeof height === 'string') {
+            this.el.style.height = height;
+        }
+        else if (opts?.fixedHeader) {
+            this.el.style.height = '300px';
+        }
+        if (opts?.fixedHeader) {
+            this.el.classList.add('wok-ui-ext-fixed-header');
+        }
+        // 展开列
+        if (typeof opts.cols === 'function') {
+            const cols = [];
+            opts.cols(col => cols.push(col));
+            this.cols = cols;
+        }
+        else {
+            this.cols = opts.cols;
+        }
+        // 校验
+        if (!this.cols.length) {
+            throw new Error('必须设置列');
+        }
+        // 检查列名称是否有重复
+        const colNames = [];
+        let fixedColCount = 0;
+        for (const col of this.cols) {
+            if (fixedColCount > 4) {
+                throw new Error('被固定的列不能超过4个');
+            }
+            if (col.setting.fixed) {
+                fixedColCount++;
+            }
+            const { name } = col.setting;
+            if (typeof name !== 'string') {
+                continue;
+            }
+            if (colNames.includes(name)) {
+                throw new Error(`列名称“${name}”重复`);
+            }
+            colNames.push(name);
+        }
+        // 立即渲染， render() 无参是异步的，当表格内容过长时，会丢失滚动位置
+        this.render();
+    }
+    buildContent() {
+        this.addChild({
+            tag: 'table',
+            classNames: 'wok-ui-ext-table-inner',
+            children: add => {
+                if (this.opts.caption) {
+                    add({
+                        tag: 'caption',
+                        innerText: this.opts.caption
+                    });
+                }
+                add(new Header({ cols: this.cols }));
+                add(new Body({
+                    emptyDesc: this.opts.emptyDesc,
+                    list: this.opts.list,
+                    cols: this.cols
+                }));
+            }
+        });
+    }
+}
+export * from './column';

package/dist/table/row.d.ts

@@ -0,0 +1,25 @@
+import { Module } from 'wok-ui';
+import { TableColumn } from './column';
+/**
+ * 行
+ */
+export declare class Row<T> extends Module {
+    constructor(opts: {
+        /**
+         * 列设置.
+         */
+        cols: TableColumn<T>[];
+        /**
+         * 数据，如果没有数据就表示是头部
+         */
+        data?: T;
+        /**
+         * 行索引，如果没有则表示是头部
+         */
+        rowIdx?: number;
+        /**
+         * 是否为表头行
+         */
+        isHeader?: boolean;
+    });
+}

package/dist/table/row.js

@@ -0,0 +1,74 @@
+import { Module } from 'wok-ui';
+/**
+ * 行
+ */
+export class Row extends Module {
+    constructor(opts) {
+        super(document.createElement('tr'));
+        this.el.classList.add('wok-ui-ext-table-row');
+        // 计算左右连续固定列的数量
+        let leftFixedCount = 0;
+        for (const col of opts.cols) {
+            if (col.setting.fixed) {
+                leftFixedCount++;
+            }
+            else {
+                break;
+            }
+        }
+        let rightFixedCount = 0;
+        for (let i = opts.cols.length - 1; i >= 0; i--) {
+            if (opts.cols[i].setting.fixed) {
+                rightFixedCount++;
+            }
+            else {
+                break;
+            }
+        }
+        for (let idx = 0; idx < opts.cols.length; idx++) {
+            const col = opts.cols[idx];
+            const { name } = col.setting;
+            this.addChild({
+                tag: opts.isHeader ? 'th' : 'td',
+                classNames: 'table-cell',
+                preHandle: el => {
+                    // 宽度
+                    const width = col.setting.width && col.setting.width > 0 ? col.setting.width : 80;
+                    el.style.width = `${width}px`;
+                    // 列固定处理
+                    if (col.setting.fixed) {
+                        const isLeft = idx < leftFixedCount;
+                        const isRight = idx >= opts.cols.length - rightFixedCount;
+                        if (isLeft) {
+                            el.classList.add('wok-ui-ext-fixed-left');
+                            let left = 0;
+                            for (let i = 0; i < idx; i++) {
+                                if (opts.cols[i].setting.fixed) {
+                                    left += opts.cols[i].setting.width || 80;
+                                }
+                            }
+                            if (left > 0) {
+                                el.style.left = `${left}px`;
+                            }
+                        }
+                        else if (isRight) {
+                            el.classList.add('wok-ui-ext-fixed-right');
+                            let right = 0;
+                            for (let i = idx + 1; i < opts.cols.length; i++) {
+                                if (opts.cols[i].setting.fixed) {
+                                    right += opts.cols[i].setting.width || 80;
+                                }
+                            }
+                            if (right > 0) {
+                                el.style.right = `${right}px`;
+                            }
+                        }
+                    }
+                },
+                children: opts.data && typeof opts.rowIdx === 'number'
+                    ? col.setting.content(opts.data, opts.rowIdx)
+                    : name
+            });
+        }
+    }
+}

package/dist/table/style.css

@@ -0,0 +1,98 @@
+.wok-ui-ext-table {
+  overflow: auto;
+  font-size: 15px;
+  box-sizing: border-box;
+  width: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-medium) var(--bg-hover);
+}
+.wok-ui-ext-table::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.wok-ui-ext-table::-webkit-scrollbar-track {
+  background: var(--bg-hover);
+}
+.wok-ui-ext-table::-webkit-scrollbar-thumb {
+  background: var(--border-medium);
+  border-radius: var(--radius-full);
+}
+.wok-ui-ext-table .wok-ui-ext-table-inner {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+.wok-ui-ext-table caption {
+  padding: 12px 8px;
+  font-weight: 600;
+  text-align: left;
+  caption-side: top;
+}
+.wok-ui-ext-table thead {
+  font-weight: 600;
+  color: var(--text-tertiary);
+}
+.wok-ui-ext-table thead th {
+  background-color: var(--bg-card);
+  border-bottom: 2px solid var(--border-medium);
+  text-align: left;
+  padding: 16px 8px;
+  font-weight: 600;
+}
+.wok-ui-ext-table tbody {
+  color: var(--text-secondary);
+}
+.wok-ui-ext-table tbody tr {
+  background-color: var(--bg-card);
+}
+.wok-ui-ext-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.wok-ui-ext-table tbody tr:hover td {
+  background-color: var(--bg-hover);
+}
+.wok-ui-ext-table tbody tr:hover td.wok-ui-ext-fixed-left,
+.wok-ui-ext-table tbody tr:hover td.wok-ui-ext-fixed-right {
+  background-color: var(--bg-hover);
+}
+.wok-ui-ext-table tbody td {
+  padding: 16px 8px;
+  text-align: left;
+  background-color: var(--bg-card);
+  vertical-align: middle;
+  border-bottom: 1px solid var(--border-light);
+}
+.wok-ui-ext-table tbody td.wok-ui-ext-fixed-left {
+  border-right: 1px solid var(--border-light);
+  box-shadow: 4px 0 8px -4px rgba(0, 20, 40, 0.12);
+}
+.wok-ui-ext-table tbody td.wok-ui-ext-fixed-right {
+  border-left: 1px solid var(--border-light);
+  box-shadow: -4px 0 8px -4px rgba(0, 20, 40, 0.12);
+}
+.wok-ui-ext-table .wok-ui-ext-fixed-left,
+.wok-ui-ext-table .wok-ui-ext-fixed-right {
+  position: sticky;
+  background-color: var(--bg-card);
+}
+.wok-ui-ext-table .wok-ui-ext-fixed-left {
+  left: 0;
+}
+.wok-ui-ext-table .wok-ui-ext-fixed-right {
+  right: 0;
+}
+.wok-ui-ext-table .empty-state {
+  padding: 70px 20px;
+  background-color: var(--bg-body);
+  border-radius: 0;
+}
+.wok-ui-ext-table.wok-ui-ext-fixed-header thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.wok-ui-ext-table.wok-ui-ext-fixed-header thead th.wok-ui-ext-fixed-left,
+.wok-ui-ext-table.wok-ui-ext-fixed-header thead th.wok-ui-ext-fixed-right {
+  z-index: 3;
+}

package/dist/tabs/index.d.ts

@@ -0,0 +1,49 @@
+import './style.less';
+import { ConvertibleModule, FullRenderingModule, SubModulesOpt } from 'wok-ui';
+/**
+ * 标签页项
+ */
+export interface TabsItem {
+    /**
+     * 唯一标识
+     */
+    key: string;
+    /**
+     * 标签页标题
+     */
+    label: SubModulesOpt;
+    /**
+     * 标签页内容
+     */
+    content: ConvertibleModule | (() => ConvertibleModule);
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+}
+/**
+ * 标签页组件
+ */
+export declare class Tabs extends FullRenderingModule {
+    private readonly opts;
+    private activeKey;
+    constructor(opts: {
+        /**
+         * 标签页项
+         */
+        items: TabsItem[];
+        /**
+         * 当前激活的标签页 key
+         */
+        activeKey?: string;
+        /**
+         * 标签切换回调
+         */
+        onChange?: (key: string) => void;
+    });
+    protected buildContent(): void;
+    /**
+     * 设置当前激活的标签页
+     */
+    setActiveKey(key: string): void;
+}

package/dist/tabs/index.js

@@ -0,0 +1,76 @@
+import './style.css';
+import { convertToModule, FullRenderingModule } from 'wok-ui';
+/**
+ * 标签页组件
+ */
+export class Tabs extends FullRenderingModule {
+    constructor(opts) {
+        const firstEnabled = opts.items.find(item => !item.disabled);
+        const activeKey = opts.activeKey ?? firstEnabled?.key ?? opts.items[0]?.key ?? '';
+        super('wok-ui-ext-tabs');
+        this.opts = opts;
+        this.activeKey = activeKey;
+        this.render();
+    }
+    buildContent() {
+        // 标签导航
+        this.addChild({
+            classNames: 'wok-ui-ext-tabs-nav',
+            attrs: { role: 'tablist' },
+            children: add => {
+                for (const item of this.opts.items) {
+                    const active = item.key === this.activeKey;
+                    add({
+                        tag: 'button',
+                        classNames: ['wok-ui-ext-tabs-tab', active ? 'active' : '', item.disabled ? 'disabled' : ''],
+                        attrs: {
+                            role: 'tab',
+                            'aria-selected': String(active),
+                            tabindex: active ? '0' : '-1',
+                            disabled: item.disabled ? 'true' : undefined
+                        },
+                        children: item.label,
+                        onClick: () => {
+                            if (item.disabled || item.key === this.activeKey) {
+                                return;
+                            }
+                            this.setActiveKey(item.key);
+                            if (this.opts.onChange) {
+                                this.opts.onChange(item.key);
+                            }
+                        }
+                    });
+                }
+            }
+        });
+        // 标签内容
+        const activeItem = this.opts.items.find(item => item.key === this.activeKey);
+        if (activeItem) {
+            this.addChild({
+                classNames: 'wok-ui-ext-tabs-content',
+                attrs: { role: 'tabpanel' },
+                children: this.cacheModule({
+                    key: `tabs-content-${activeItem.key}`,
+                    module: () => {
+                        const content = activeItem.content;
+                        return convertToModule(typeof content === 'function' ? content() : content);
+                    }
+                })
+            });
+        }
+    }
+    /**
+     * 设置当前激活的标签页
+     */
+    setActiveKey(key) {
+        if (this.activeKey === key) {
+            return;
+        }
+        const target = this.opts.items.find(item => item.key === key);
+        if (!target || target.disabled) {
+            return;
+        }
+        this.activeKey = key;
+        this.render();
+    }
+}