wok-ui-ext 0.1.0

package/dist/breadcrumb/style.css

@@ -0,0 +1,35 @@
+.wok-ui-ext-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: var(--font-size-small);
+  line-height: 1.5;
+}
+.wok-ui-ext-breadcrumb .wok-ui-ext-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  transition: color var(--transition-speed);
+  cursor: pointer;
+}
+.wok-ui-ext-breadcrumb .wok-ui-ext-breadcrumb-item:hover {
+  color: var(--color-primary);
+}
+.wok-ui-ext-breadcrumb .wok-ui-ext-breadcrumb-item .wok-ui-svg-icon {
+  font-size: var(--font-size-body);
+}
+.wok-ui-ext-breadcrumb .wok-ui-ext-breadcrumb-item-current {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+  cursor: default;
+}
+.wok-ui-ext-breadcrumb .wok-ui-ext-breadcrumb-item-current:hover {
+  color: var(--text-primary);
+}
+.wok-ui-ext-breadcrumb .wok-ui-ext-breadcrumb-separator {
+  color: var(--text-muted);
+  user-select: none;
+}

package/dist/button/index.d.ts

@@ -0,0 +1,34 @@
+import { Module } from 'wok-ui';
+import { IconInput } from '../icons';
+import './style.less';
+/**
+ * 按钮
+ */
+export declare class Button extends Module {
+    /**
+     * 按钮组件
+     * @param opts
+     * @param opts.size 按钮大小
+     * @param opts.type 按钮类型：
+     * primary 主要按钮，作用是触发主要操作；
+     * success 成功按钮，作用是表示成功操作；
+     * warning 警告按钮，作用是表示警告操作；
+     * danger 危险按钮，作用是表示危险操作；
+     * default 默认按钮，作用是表示普通操作；
+     * secondary 次要按钮，作用是表示次要操作。
+     * @param opts.disabled 是否禁用
+     * @param opts.formType 表单类型
+     * @param opts.icon 按钮图标
+     * @param opts.text 按钮文本
+     */
+    constructor(opts: {
+        size?: 'small' | 'default' | 'large';
+        type?: 'primary' | 'success' | 'warning' | 'danger' | 'default' | 'secondary' | 'dashed' | 'ghost';
+        icon?: IconInput;
+        text: string;
+        disabled?: boolean;
+        formType?: 'submit' | 'reset';
+        onClick?: (evt: MouseEvent) => void;
+        block?: boolean;
+    });
+}

package/dist/button/index.js

@@ -0,0 +1,57 @@
+import { Module } from 'wok-ui';
+import { resolveIcon } from '../icons';
+import './style.css';
+/**
+ * 按钮
+ */
+export class Button extends Module {
+    /**
+     * 按钮组件
+     * @param opts
+     * @param opts.size 按钮大小
+     * @param opts.type 按钮类型：
+     * primary 主要按钮，作用是触发主要操作；
+     * success 成功按钮，作用是表示成功操作；
+     * warning 警告按钮，作用是表示警告操作；
+     * danger 危险按钮，作用是表示危险操作；
+     * default 默认按钮，作用是表示普通操作；
+     * secondary 次要按钮，作用是表示次要操作。
+     * @param opts.disabled 是否禁用
+     * @param opts.formType 表单类型
+     * @param opts.icon 按钮图标
+     * @param opts.text 按钮文本
+     */
+    constructor(opts) {
+        const el = document.createElement('button');
+        super(el);
+        this.el.classList.add('wok-ui-ext-btn');
+        if (opts.block) {
+            this.el.classList.add('wok-ui-ext-block');
+        }
+        if (opts.size) {
+            this.el.classList.add(`wok-ui-ext-${opts.size}`);
+        }
+        if (opts.type) {
+            this.el.classList.add(`wok-ui-ext-${opts.type}`);
+        }
+        if (opts.icon) {
+            this.addChild(resolveIcon(opts.icon));
+        }
+        this.addChild(opts.text);
+        if (opts.onClick) {
+            this.el.addEventListener('click', opts.onClick);
+        }
+        if (opts.formType === 'submit') {
+            el.type = 'submit';
+        }
+        else if (opts.formType === 'reset') {
+            el.type = 'reset';
+        }
+        else {
+            el.type = 'button';
+        }
+        if (opts.disabled) {
+            el.disabled = true;
+        }
+    }
+}

package/dist/button/style.css

@@ -0,0 +1,133 @@
+/* 科技蓝按钮 */
+.wok-ui-ext-btn {
+  background: var(--bg-card);
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+  font-weight: 500;
+  padding: 11px 22px;
+  border-radius: var(--radius-full);
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: all var(--transition-speed);
+  justify-content: center;
+}
+.wok-ui-ext-btn i {
+  color: var(--color-primary);
+  font-size: 15px;
+}
+.wok-ui-ext-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--color-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-primary);
+}
+.wok-ui-ext-btn.wok-ui-ext-primary {
+  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
+  border-color: var(--color-primary);
+  color: white;
+}
+.wok-ui-ext-btn.wok-ui-ext-primary i {
+  color: white;
+}
+.wok-ui-ext-btn.wok-ui-ext-secondary {
+  background: var(--bg-hover);
+  border-color: var(--border-medium);
+  color: var(--text-secondary);
+}
+.wok-ui-ext-btn.wok-ui-ext-secondary i {
+  color: var(--text-secondary);
+}
+.wok-ui-ext-btn.wok-ui-ext-success {
+  background: var(--color-success-light);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+.wok-ui-ext-btn.wok-ui-ext-success i {
+  color: var(--color-success);
+}
+.wok-ui-ext-btn.wok-ui-ext-warning {
+  background: var(--color-warning-light);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+.wok-ui-ext-btn.wok-ui-ext-warning i {
+  color: var(--color-warning);
+}
+.wok-ui-ext-btn.wok-ui-ext-danger {
+  background: var(--color-danger-light);
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+.wok-ui-ext-btn.wok-ui-ext-danger i {
+  color: var(--color-danger);
+}
+.wok-ui-ext-btn.wok-ui-ext-danger:hover {
+  background: var(--color-danger-light);
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+  box-shadow: var(--shadow-danger);
+  opacity: 0.9;
+}
+.wok-ui-ext-btn.wok-ui-ext-dashed {
+  background: transparent;
+  border-style: dashed;
+  border-color: var(--border-dark);
+  color: var(--color-primary);
+  box-shadow: none;
+}
+.wok-ui-ext-btn.wok-ui-ext-dashed i {
+  color: var(--color-primary);
+}
+.wok-ui-ext-btn.wok-ui-ext-dashed:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-dark);
+  transform: none;
+  box-shadow: none;
+}
+.wok-ui-ext-btn.wok-ui-ext-dashed:hover i {
+  color: var(--color-primary-dark);
+}
+.wok-ui-ext-btn.wok-ui-ext-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text-primary);
+  box-shadow: none;
+}
+.wok-ui-ext-btn.wok-ui-ext-ghost i {
+  color: var(--text-primary);
+}
+.wok-ui-ext-btn.wok-ui-ext-ghost:hover {
+  background: var(--bg-hover);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  transform: none;
+  box-shadow: none;
+}
+.wok-ui-ext-btn.wok-ui-ext-ghost:hover i {
+  color: var(--color-primary);
+}
+.wok-ui-ext-btn.wok-ui-ext-small {
+  padding: 6px 16px;
+  font-size: 12px;
+}
+.wok-ui-ext-btn.wok-ui-ext-large {
+  padding: 14px 30px;
+  font-size: 16px;
+}
+.wok-ui-ext-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.wok-ui-ext-btn:disabled:hover {
+  transform: none;
+  box-shadow: none;
+}
+.wok-ui-ext-btn.wok-ui-ext-block {
+  display: flex;
+  width: 100%;
+}

package/dist/card/index.d.ts

@@ -0,0 +1,25 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+/**
+ * 通用卡片组件
+ */
+export declare class Card extends DivModule {
+    constructor(opts: {
+        /**
+         * 卡片头部内容
+         */
+        header?: SubModulesOpt;
+        /**
+         * 卡片主体内容
+         */
+        content: SubModulesOpt;
+        /**
+         * 卡片脚部内容
+         */
+        footer?: SubModulesOpt;
+        /**
+         * 额外的 CSS 类名
+         */
+        classNames?: string[];
+    });
+}

package/dist/card/index.js

@@ -0,0 +1,29 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 通用卡片组件
+ */
+export class Card extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-card');
+        if (opts.classNames) {
+            this.el.classList.add(...opts.classNames);
+        }
+        if (opts.header) {
+            this.addChild({
+                classNames: 'wok-ui-ext-card-header',
+                children: opts.header
+            });
+        }
+        this.addChild({
+            classNames: 'wok-ui-ext-card-content',
+            children: opts.content
+        });
+        if (opts.footer) {
+            this.addChild({
+                classNames: 'wok-ui-ext-card-footer',
+                children: opts.footer
+            });
+        }
+    }
+}

package/dist/card/style.css

@@ -0,0 +1,23 @@
+.wok-ui-ext-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+}
+.wok-ui-ext-card:hover {
+  box-shadow: var(--shadow-lg);
+}
+.wok-ui-ext-card .wok-ui-ext-card-header {
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid var(--border-light);
+}
+.wok-ui-ext-card .wok-ui-ext-card-content {
+  flex: 1;
+  padding: 16px;
+}
+.wok-ui-ext-card .wok-ui-ext-card-footer {
+  padding: 12px 16px 16px;
+  border-top: 1px solid var(--border-light);
+}

package/dist/collapse/index.d.ts

@@ -0,0 +1,89 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+export interface PanelOptions {
+    /** 面板标题（字符串或自定义内容） */
+    title: string | SubModulesOpt;
+    /** 面板内容 */
+    content: SubModulesOpt;
+    /** 默认展开 */
+    defaultOpen?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+}
+export interface CollapseOptions {
+    /** 面板列表 */
+    items: PanelOptions[];
+    /** 手风琴模式（只展开一个） */
+    accordion?: boolean;
+    /** 允许全部折叠（手风琴模式时，点击已展开的可关闭它） */
+    collapsible?: boolean;
+    /** 无边框模式 */
+    ghost?: boolean;
+    /** 展开/折叠回调（参数为当前展开的面板列表） */
+    onChange?: (activePanels: Panel[]) => void;
+}
+/**
+ * 面板（可单独使用，也可作为 Collapse 的子项）
+ *
+ * @example
+ * ```ts
+ * // 单独使用
+ * new Panel({ title: '基本信息', content: '内容...', defaultOpen: true })
+ *
+ * // 在 Collapse 中使用
+ * new Collapse({
+ *   items: [
+ *     { title: '面板1', content: '内容1' },
+ *     { title: '面板2', content: '内容2', defaultOpen: true }
+ *   ],
+ *   accordion: true
+ * })
+ * ```
+ */
+export declare class Panel extends DivModule {
+    private opts;
+    private _isOpen;
+    private bodyWrapperEl;
+    onToggle?: (panel: Panel, nextOpen: boolean) => void;
+    constructor(opts: PanelOptions);
+    private render;
+    /** 展开 */
+    open(): void;
+    /** 折叠 */
+    close(): void;
+    /** 切换（由点击触发） */
+    toggle(): void;
+    /** 当前是否展开 */
+    isOpen(): boolean;
+    /** 由 Collapse 直接设置状态（不触发回调） */
+    setOpen(open: boolean): void;
+    private syncBodyHeight;
+}
+/**
+ * 折叠面板组
+ *
+ * @example
+ * ```ts
+ * // 普通多开模式
+ * new Collapse({
+ *   items: [
+ *     { title: '基本信息', content: new Form(...), defaultOpen: true },
+ *     { title: '高级设置', content: '...' }
+ *   ]
+ * })
+ *
+ * // 手风琴模式
+ * new Collapse({
+ *   items: [...],
+ *   accordion: true,
+ *   collapsible: true // 允许全部折叠
+ * })
+ * ```
+ */
+export declare class Collapse extends DivModule {
+    private opts;
+    readonly panels: Panel[];
+    private activePanels;
+    constructor(opts: CollapseOptions);
+    private handleToggle;
+}

package/dist/collapse/index.js

@@ -0,0 +1,213 @@
+import { DivModule } from 'wok-ui';
+import { IconChevronDown } from '../icons';
+import './style.css';
+/**
+ * 面板（可单独使用，也可作为 Collapse 的子项）
+ *
+ * @example
+ * ```ts
+ * // 单独使用
+ * new Panel({ title: '基本信息', content: '内容...', defaultOpen: true })
+ *
+ * // 在 Collapse 中使用
+ * new Collapse({
+ *   items: [
+ *     { title: '面板1', content: '内容1' },
+ *     { title: '面板2', content: '内容2', defaultOpen: true }
+ *   ],
+ *   accordion: true
+ * })
+ * ```
+ */
+export class Panel extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-panel');
+        this.opts = opts;
+        this._isOpen = opts.defaultOpen ?? false;
+        this.render();
+    }
+    render() {
+        // 头部
+        this.addChild({
+            classNames: ['wok-ui-ext-panel-header'],
+            ...(this.opts.disabled ? {} : {}),
+            preHandle: el => {
+                el.addEventListener('click', () => this.toggle());
+                if (this.opts.disabled) {
+                    el.classList.add('disabled');
+                }
+            },
+            children: add => {
+                // 标题
+                if (typeof this.opts.title === 'string') {
+                    add({
+                        tag: 'div',
+                        classNames: 'wok-ui-ext-panel-header-title',
+                        innerText: this.opts.title
+                    });
+                }
+                else {
+                    add({
+                        tag: 'div',
+                        classNames: 'panel-header-title',
+                        children: this.opts.title
+                    });
+                }
+                // 箭头
+                add({
+                    tag: 'div',
+                    classNames: 'wok-ui-ext-panel-header-arrow',
+                    children: new IconChevronDown()
+                });
+            }
+        });
+        // body 容器（用于 max-height 动画）
+        this.addChild({
+            classNames: 'wok-ui-ext-panel-body-wrapper',
+            preHandle: el => {
+                this.bodyWrapperEl = el;
+            },
+            children: {
+                classNames: 'wok-ui-ext-panel-body',
+                children: this.opts.content
+            }
+        });
+        // 初始状态
+        if (this._isOpen) {
+            this.el.classList.add('open');
+        }
+    }
+    /** 展开 */
+    open() {
+        if (this.opts.disabled || this._isOpen)
+            return;
+        this._isOpen = true;
+        this.el.classList.add('open');
+        this.syncBodyHeight();
+    }
+    /** 折叠 */
+    close() {
+        if (!this._isOpen)
+            return;
+        this._isOpen = false;
+        this.el.classList.remove('open');
+        this.bodyWrapperEl.style.maxHeight = '0';
+    }
+    /** 切换（由点击触发） */
+    toggle() {
+        if (this.opts.disabled)
+            return;
+        const nextOpen = !this._isOpen;
+        if (this.onToggle) {
+            // 由 Collapse 处理
+            this.onToggle(this, nextOpen);
+        }
+        else {
+            // 独立使用时直接切换
+            if (nextOpen)
+                this.open();
+            else
+                this.close();
+        }
+    }
+    /** 当前是否展开 */
+    isOpen() {
+        return this._isOpen;
+    }
+    /** 由 Collapse 直接设置状态（不触发回调） */
+    setOpen(open) {
+        if (this.opts.disabled)
+            return;
+        this._isOpen = open;
+        if (open) {
+            this.el.classList.add('open');
+            this.syncBodyHeight();
+        }
+        else {
+            this.el.classList.remove('open');
+            this.bodyWrapperEl.style.maxHeight = '0';
+        }
+    }
+    syncBodyHeight() {
+        const body = this.bodyWrapperEl.querySelector('.wok-ui-ext-panel-body');
+        if (body) {
+            this.bodyWrapperEl.style.maxHeight = `${body.scrollHeight}px`;
+        }
+    }
+}
+/**
+ * 折叠面板组
+ *
+ * @example
+ * ```ts
+ * // 普通多开模式
+ * new Collapse({
+ *   items: [
+ *     { title: '基本信息', content: new Form(...), defaultOpen: true },
+ *     { title: '高级设置', content: '...' }
+ *   ]
+ * })
+ *
+ * // 手风琴模式
+ * new Collapse({
+ *   items: [...],
+ *   accordion: true,
+ *   collapsible: true // 允许全部折叠
+ * })
+ * ```
+ */
+export class Collapse extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-collapse');
+        this.opts = opts;
+        if (opts.ghost) {
+            this.el.classList.add('ghost');
+        }
+        this.activePanels = new Set();
+        this.panels = [];
+        opts.items.forEach(item => {
+            const panel = new Panel(item);
+            this.panels.push(panel);
+            this.addChild(panel);
+            // 记录初始展开项
+            if (item.defaultOpen) {
+                this.activePanels.add(panel);
+            }
+            // 注册切换回调
+            panel.onToggle = (p, nextOpen) => this.handleToggle(p, nextOpen);
+        });
+    }
+    handleToggle(panel, nextOpen) {
+        if (this.opts.accordion) {
+            if (nextOpen) {
+                // 关闭其他全部
+                this.panels.forEach(p => {
+                    if (p !== panel)
+                        p.setOpen(false);
+                });
+                this.activePanels.clear();
+                this.activePanels.add(panel);
+                panel.setOpen(true);
+            }
+            else {
+                // 关闭当前（仅允许全部折叠时才可关闭）
+                if (this.opts.collapsible) {
+                    this.activePanels.delete(panel);
+                    panel.setOpen(false);
+                }
+            }
+        }
+        else {
+            // 普通模式，自由切换
+            if (nextOpen) {
+                panel.open();
+                this.activePanels.add(panel);
+            }
+            else {
+                panel.close();
+                this.activePanels.delete(panel);
+            }
+        }
+        this.opts.onChange?.(Array.from(this.activePanels));
+    }
+}