wok-ui-ext 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Peak Tai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,75 @@
+# wok-ui-ext
+
+[中文](README.md) | English
+
+The extension component library of wok-ui, providing an enterprise-level high-frequency component library with a **tech-blue style + multi-theme** design.
+
+Based on the wok-ui framework, wok-ui-ext comes with 6 built-in themes (Tech Blue, Deep Night, Vitality Orange, Mystery Purple, Forest Green, Flame Red) and extends 40+ commonly used components, ready to use out of the box — more suitable for enterprise projects.
+
+## Features
+
+- **Multi-theme**: 6 built-in themes, switch with one line of code, all component styles follow automatically
+- **Common Components**: form, table, modal, drawer, date picker, upload, tree, steps, timeline and 40+ high-frequency components
+- **Customizable**: deep theme customization via CSS variables and `setTheme` to meet brand visual needs
+- **Internationalization**: built-in multi-language support (Chinese, English, etc.), freely extensible
+
+## Getting Started
+
+### Installation
+
+The project is based on wok-ui, please install it first:
+
+```bash
+npm install wok-ui --save
+```
+
+Then install wok-ui-ext:
+
+```bash
+npm install wok-ui-ext --save
+```
+
+### Initialization
+
+Using wok-ui-ext does not change the original wok-ui project flow; you only need to add internationalization and theme initialization:
+
+```ts
+import { initWokUiExtI18n, applyTheme } from 'wok-ui-ext'
+
+// Initialize wok-ui-ext internationalization (the language is applied automatically, no need to call wok-ui's setLang)
+await initWokUiExtI18n('zh-CN')
+
+// Apply theme, default is tech blue, optional: 'dark' | 'orange' | 'purple' | 'green' | 'red'
+applyTheme('default')
+```
+
+### Switching Themes
+
+```ts
+import { applyTheme } from 'wok-ui-ext'
+
+applyTheme('orange')   // switch to vitality orange
+applyTheme('dark')     // switch to deep night
+```
+
+## Documentation
+
+For complete component docs, examples and theme customization, see the [docs site](https://peaktai.github.io/wok-ui-ext/) or run it locally:
+
+```bash
+npm run dev:docs
+```
+
+## Component List
+
+Form, table, button, tag, card, collapse, drawer, modal, popconfirm, dropdown, date picker, timeline, steps, progress, pagination, search box, tree, upload, image preview, skeleton, empty state, result page, text, icon, descriptions, divider, avatar, badge, breadcrumb, menu, switch, segmented, list, tooltip, loading and more — 40+ components.
+
+## Contributing
+
+This project is **personally maintained** by the author. For reasons of effort and design consistency, **Pull Requests are not accepted**.
+
+If you have bug reports or good suggestions, feel free to contact the author via email at peaktai@qq.com.
+
+## License
+
+[ISC](LICENSE)

package/README.md

@@ -0,0 +1,75 @@
+# wok-ui-ext
+
+中文 | [English](README.en.md)
+
+wok-ui 的扩展组件库，提供一套**科技蓝风格 + 多主题**的企业级高频组件库。
+
+在 wok-ui 框架基础上，wok-ui-ext 内置了 6 套主题（科技蓝、深邃夜空、活力橙、神秘紫、森林绿、烈焰红），并扩展了 40+ 常用组件，开箱即用，更适合企业级项目开发。
+
+## 特性
+
+- **多主题**：内置 6 套主题，一行代码切换，所有组件样式自动跟随
+- **覆盖常用组件**：表单、表格、弹窗、抽屉、日期选择、上传、树、步骤条、时间线等 40+ 高频组件
+- **可定制**：支持通过 CSS 变量和 `setTheme` 深度定制主题，满足品牌视觉需求
+- **国际化**：内置中文、英文等多语言支持，可自由扩展
+
+## 快速上手
+
+### 安装
+
+项目需要基于 wok-ui，请先安装：
+
+```bash
+npm install wok-ui --save
+```
+
+再安装 wok-ui-ext：
+
+```bash
+npm install wok-ui-ext --save
+```
+
+### 初始化
+
+使用 wok-ui-ext 无需改变原有 wok-ui 项目的流程，只需增加国际化和主题的初始化：
+
+```ts
+import { initWokUiExtI18n, applyTheme } from 'wok-ui-ext'
+
+// 初始化 wok-ui-ext 国际化（会自动应用语言，无需再调用 wok-ui 的 setLang）
+await initWokUiExtI18n('zh-CN')
+
+// 应用主题，默认是科技蓝，可选：'dark' | 'orange' | 'purple' | 'green' | 'red'
+applyTheme('default')
+```
+
+### 切换主题
+
+```ts
+import { applyTheme } from 'wok-ui-ext'
+
+applyTheme('orange')   // 切换为活力橙
+applyTheme('dark')     // 切换为深邃夜空
+```
+
+## 文档
+
+完整组件文档、示例与主题定制说明，请查看 [文档站](https://peaktai.github.io/wok-ui-ext/) 或在本地运行：
+
+```bash
+npm run dev:docs
+```
+
+## 组件列表
+
+表单、表格、按钮、标签、卡片、折叠面板、抽屉、弹窗、气泡确认框、下拉菜单、日期选择、时间线、步骤条、进度条、分页、搜索框、树、上传、图片预览、骨架屏、空状态、结果页、文字、图标、描述列表、分割线、头像、徽标、面包屑、菜单、开关、分段器、列表、提示、加载等 40+ 组件。
+
+## 参与贡献
+
+本项目由作者**个人维护**，出于精力与设计一致性考虑，**不接受 Pull Request**。
+
+如果你有 Bug 反馈或好的建议，欢迎发送邮件至 peaktai@qq.com 联系作者。
+
+## License
+
+[ISC](LICENSE)

package/dist/alert/index.d.ts

@@ -0,0 +1,10 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+export declare class Alert extends DivModule {
+    constructor(opts: {
+        type: 'info' | 'success' | 'warning' | 'danger';
+        title?: string;
+        content: SubModulesOpt;
+        closeable?: boolean;
+    });
+}

package/dist/alert/index.js

@@ -0,0 +1,48 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+import { IconInfoCircle, IconCheckCircle, IconExclamationCircle, IconTimesCircle, IconTimes } from '../icons';
+export class Alert extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-alert');
+        this.el.classList.add(`wok-ui-ext-alert-${opts.type}`);
+        let icon = new IconInfoCircle();
+        switch (opts.type) {
+            case 'success':
+                icon = new IconCheckCircle();
+                break;
+            case 'warning':
+                icon = new IconExclamationCircle();
+                break;
+            case 'danger':
+                icon = new IconTimesCircle();
+                break;
+        }
+        this.addChild({ classNames: 'wok-ui-ext-alert-icon', children: icon }, {
+            classNames: 'wok-ui-ext-alert-body',
+            children: add => {
+                if (opts.title) {
+                    add({
+                        classNames: 'wok-ui-ext-alert-title',
+                        innerText: opts.title
+                    });
+                }
+                add({
+                    classNames: 'wok-ui-ext-alert-content',
+                    children: opts.content
+                });
+            }
+        });
+        if (opts.closeable) {
+            this.addChild({
+                classNames: 'wok-ui-ext-alert-close',
+                children: new IconTimes(),
+                onClick: () => {
+                    this.el.classList.add('wok-ui-ext-alert-dismissing');
+                    setTimeout(() => {
+                        this.destroy();
+                    }, 150);
+                }
+            });
+        }
+    }
+}

package/dist/alert/style.css

@@ -0,0 +1,116 @@
+.wok-ui-ext-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  font-size: var(--font-size-small);
+  line-height: 1.6;
+  position: relative;
+  transition: opacity var(--transition-speed), transform var(--transition-speed);
+}
+.wok-ui-ext-alert-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+.wok-ui-ext-alert-icon svg {
+  width: 18px;
+  height: 18px;
+}
+.wok-ui-ext-alert-body {
+  flex: 1;
+  min-width: 0;
+}
+.wok-ui-ext-alert-title {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-body);
+  margin-bottom: 4px;
+}
+.wok-ui-ext-alert-content {
+  color: inherit;
+  opacity: 0.85;
+}
+.wok-ui-ext-alert-close {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  opacity: 0.6;
+  transition: opacity var(--transition-speed), background var(--transition-speed);
+  padding: 0;
+  margin-top: -2px;
+}
+.wok-ui-ext-alert-close svg {
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+}
+.wok-ui-ext-alert-close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.08);
+}
+.wok-ui-ext-alert-close:active {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.14);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-success {
+  background-color: var(--color-success-light);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-success .wok-ui-ext-alert-icon svg {
+  stroke: var(--color-success);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-success .wok-ui-ext-alert-close {
+  color: var(--color-success);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-warning {
+  background-color: var(--color-warning-light);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-warning .wok-ui-ext-alert-icon svg {
+  stroke: var(--color-warning);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-warning .wok-ui-ext-alert-close {
+  color: var(--color-warning);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-danger {
+  background-color: var(--color-danger-light);
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-danger .wok-ui-ext-alert-icon svg {
+  stroke: var(--color-danger);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-danger .wok-ui-ext-alert-close {
+  color: var(--color-danger);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-info {
+  background-color: var(--color-info-light);
+  border-color: var(--color-info);
+  color: var(--color-info);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-info .wok-ui-ext-alert-icon svg {
+  stroke: var(--color-info);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-info .wok-ui-ext-alert-close {
+  color: var(--color-info);
+}
+.wok-ui-ext-alert.wok-ui-ext-alert-dismissing {
+  opacity: 0;
+  transform: translateY(-6px);
+  pointer-events: none;
+}

package/dist/avatar/index.d.ts

@@ -0,0 +1,9 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+export declare class Avatar extends DivModule {
+    constructor(opts: {
+        size?: 'sm' | 'lg' | number;
+        src?: string;
+        title?: string;
+    });
+}

package/dist/avatar/index.js

@@ -0,0 +1,30 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+import { IconUser } from '../icons';
+export class Avatar extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-avatar');
+        if (opts.title) {
+            this.el.title = opts.title;
+        }
+        if (opts.size === 'sm' || opts.size === 'lg') {
+            this.el.classList.add(`wok-ui-ext-avatar-${opts.size}`);
+        }
+        else if (typeof opts.size === 'number') {
+            this.el.style.width = `${opts.size}px`;
+            this.el.style.height = `${opts.size}px`;
+            this.el.style.fontSize = `${opts.size / 2}px`;
+        }
+        if (opts.src) {
+            this.addChild({
+                tag: 'img',
+                attrs: {
+                    src: opts.src
+                }
+            });
+        }
+        else {
+            this.addChild(new IconUser());
+        }
+    }
+}

package/dist/avatar/style.css

@@ -0,0 +1,32 @@
+.wok-ui-ext-avatar {
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-primary-soft, #e2edff);
+  color: var(--color-primary, #2d7ee9);
+  border-radius: var(--radius-circle, 50%);
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 2px solid white;
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-speed, 0.15s) ease;
+}
+.wok-ui-ext-avatar > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.wok-ui-ext-avatar.wok-ui-ext-avatar-sm {
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+}
+.wok-ui-ext-avatar.wok-ui-ext-avatar-lg {
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+}

package/dist/badge/index.d.ts

@@ -0,0 +1,32 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+export type BadgeType = 'danger' | 'primary' | 'success' | 'warning' | 'info';
+/**
+ * 徽标组件
+ */
+export declare class Badge extends DivModule {
+    /**
+     * 徽标组件，用于在图标/头像等元素右上角标记数量或红点，也可以独立显示。
+     * @param opts
+     * @param opts.count 显示数量
+     * @param opts.max 数量封顶值，count 超过 max 时显示 `max+`，默认 99
+     * @param opts.dot 纯红点模式，不显示数字，默认 false
+     * @param opts.type 徽标颜色，默认 danger
+     * @param opts.showZero count 为 0 时是否显示，默认 false
+     * @param opts.hidden 是否隐藏徽标，默认 false
+     * @param opts.offset 位置偏移 [水平, 垂直]，默认右上角
+     * @param opts.children 被包裹的内容（图标、头像等），不传时徽标独立显示
+     * @param opts.onClick 点击徽标回调
+     */
+    constructor(opts: {
+        count?: number;
+        max?: number;
+        dot?: boolean;
+        type?: BadgeType;
+        showZero?: boolean;
+        hidden?: boolean;
+        offset?: [number, number];
+        children?: SubModulesOpt;
+        onClick?: (evt: MouseEvent) => void;
+    });
+}

package/dist/badge/index.js

@@ -0,0 +1,61 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 徽标组件
+ */
+export class Badge extends DivModule {
+    /**
+     * 徽标组件，用于在图标/头像等元素右上角标记数量或红点，也可以独立显示。
+     * @param opts
+     * @param opts.count 显示数量
+     * @param opts.max 数量封顶值，count 超过 max 时显示 `max+`，默认 99
+     * @param opts.dot 纯红点模式，不显示数字，默认 false
+     * @param opts.type 徽标颜色，默认 danger
+     * @param opts.showZero count 为 0 时是否显示，默认 false
+     * @param opts.hidden 是否隐藏徽标，默认 false
+     * @param opts.offset 位置偏移 [水平, 垂直]，默认右上角
+     * @param opts.children 被包裹的内容（图标、头像等），不传时徽标独立显示
+     * @param opts.onClick 点击徽标回调
+     */
+    constructor(opts) {
+        super('wok-ui-ext-badge');
+        const type = opts.type ?? 'danger';
+        const max = opts.max ?? 99;
+        const count = opts.count ?? 0;
+        const dot = !!opts.dot;
+        // 显示逻辑：未隐藏，且（红点模式无条件显示，或 showZero，或 count > 0）
+        const visible = !opts.hidden && (dot || opts.showZero || count > 0);
+        const displayText = dot ? '' : count > max ? `${max}+` : `${count}`;
+        if (opts.children) {
+            // 包裹模式：角标绝对定位在子元素右上角
+            this.addChild(opts.children);
+            if (visible) {
+                this.addChild({
+                    tag: 'span',
+                    classNames: ['wok-ui-ext-badge-sup', `wok-ui-ext-badge-${type}`, dot ? 'dot' : ''],
+                    innerText: displayText,
+                    onClick: opts.onClick
+                });
+                if (opts.offset) {
+                    const supEl = this.el.querySelector('.wok-ui-ext-badge-sup');
+                    if (supEl) {
+                        supEl.style.transform = `translate(calc(50% + ${opts.offset[0]}px), calc(-50% + ${opts.offset[1]}px))`;
+                    }
+                }
+            }
+        }
+        else if (visible) {
+            // 独立模式：徽标自身就是角标
+            this.el.classList.add(`wok-ui-ext-badge-${type}`, 'standalone');
+            if (dot) {
+                this.el.classList.add('dot');
+            }
+            if (displayText) {
+                this.el.innerText = displayText;
+            }
+            if (opts.onClick) {
+                this.el.addEventListener('click', opts.onClick);
+            }
+        }
+    }
+}

package/dist/badge/style.css

@@ -0,0 +1,68 @@
+.wok-ui-ext-badge {
+  display: inline-flex;
+  position: relative;
+}
+.wok-ui-ext-badge .wok-ui-ext-badge-sup {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-danger);
+  color: #fff;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  box-sizing: border-box;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+.wok-ui-ext-badge .wok-ui-ext-badge-sup.dot {
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+}
+.wok-ui-ext-badge.standalone {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-full);
+  background-color: var(--color-danger);
+  color: #fff;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  box-sizing: border-box;
+  cursor: default;
+}
+.wok-ui-ext-badge.standalone.dot {
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+}
+.wok-ui-ext-badge.wok-ui-ext-badge-primary .wok-ui-ext-badge-sup,
+.wok-ui-ext-badge.wok-ui-ext-badge-primary.standalone {
+  background-color: var(--color-primary);
+}
+.wok-ui-ext-badge.wok-ui-ext-badge-success .wok-ui-ext-badge-sup,
+.wok-ui-ext-badge.wok-ui-ext-badge-success.standalone {
+  background-color: var(--color-success);
+}
+.wok-ui-ext-badge.wok-ui-ext-badge-warning .wok-ui-ext-badge-sup,
+.wok-ui-ext-badge.wok-ui-ext-badge-warning.standalone {
+  background-color: var(--color-warning);
+}
+.wok-ui-ext-badge.wok-ui-ext-badge-info .wok-ui-ext-badge-sup,
+.wok-ui-ext-badge.wok-ui-ext-badge-info.standalone {
+  background-color: var(--color-info);
+}

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,25 @@
+import { DivModule } from 'wok-ui';
+import { IconInput } from '../icons';
+import './style.less';
+export interface BreadcrumbItem {
+    text: string;
+    onClick?: () => void;
+    icon?: IconInput;
+}
+/**
+ * 面包屑导航组件
+ */
+export declare class Breadcrumb extends DivModule {
+    private readonly opts;
+    constructor(opts: {
+        /**
+         * 面包屑项列表
+         */
+        items: BreadcrumbItem[];
+        /**
+         * 分隔符，默认 '/'
+         */
+        separator?: string;
+    });
+    private render;
+}

package/dist/breadcrumb/index.js

@@ -0,0 +1,47 @@
+import { DivModule } from 'wok-ui';
+import { resolveIcon } from '../icons';
+import './style.css';
+/**
+ * 面包屑导航组件
+ */
+export class Breadcrumb extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-breadcrumb');
+        this.opts = opts;
+        this.render();
+    }
+    render() {
+        const { items, separator = '/' } = this.opts;
+        const lastIndex = items.length - 1;
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const isLast = i === lastIndex;
+            if (isLast) {
+                // 当前页：纯文本，不可点击
+                this.addChild({
+                    classNames: 'wok-ui-ext-breadcrumb-item wok-ui-ext-breadcrumb-item-current',
+                    children: item.icon
+                        ? [resolveIcon(item.icon), { children: item.text }]
+                        : item.text
+                });
+            }
+            else {
+                // 上级页面：可点击链接
+                this.addChild({
+                    tag: 'a',
+                    classNames: 'wok-ui-ext-breadcrumb-item',
+                    attrs: { href: 'javascript:void(0)' },
+                    children: item.icon
+                        ? [resolveIcon(item.icon), { children: item.text }]
+                        : item.text,
+                    onClick: () => item.onClick?.()
+                });
+                // 分隔符
+                this.addChild({
+                    classNames: 'wok-ui-ext-breadcrumb-separator',
+                    children: separator
+                });
+            }
+        }
+    }
+}