wok-ui-ext 0.1.0

package/dist/progress/index.js

@@ -0,0 +1,70 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 格式化进度值，保留最多两位小数
+ */
+function formatProgress(progress) {
+    const fixed = progress.toFixed(2);
+    // 去掉多余的末尾 0，如 "75.00" 显示为 "75"
+    return fixed.replace(/\.?0+$/, '');
+}
+/**
+ * 进度条组件
+ *
+ <div class="progress-item">
+    <div class="progress-label"><span>任务进度</span> <span>75%</span></div>
+    <div class="progress-bar-bg">
+        <div class="progress-bar-fill" style="width:75%"></div>
+    </div>
+</div>
+ */
+export class Progress extends DivModule {
+    /**
+     * 进度条组件
+     * @param opts.label 进度条标签，支持字符串或子模块
+     * @param opts.progress 进度条进度，0-100
+     * @param opts.showProgress 是否显示进度数字
+     * @param opts.color 进度条颜色，默认 primary
+     * @param opts.text 自定义进度文本，如 "85/100分"，设置后将替代百分比显示
+     */
+    constructor(opts) {
+        super('wok-ui-ext-progress-item');
+        if (opts.color && opts.color !== 'primary') {
+            this.el.classList.add(`wok-ui-ext-progress-${opts.color}`);
+        }
+        if (opts.label || opts.showProgress || opts.text) {
+            this.addChild({
+                classNames: 'wok-ui-ext-progress-label',
+                children: [
+                    {
+                        tag: 'span',
+                        children: opts.label || ''
+                    },
+                    {
+                        tag: 'span',
+                        classNames: 'wok-ui-ext-progress-percent',
+                        innerText: opts.text ?? (opts.showProgress ? `${formatProgress(opts.progress)}%` : '')
+                    }
+                ]
+            });
+        }
+        this.addChild({
+            classNames: 'wok-ui-ext-progress-bar-bg',
+            children: [
+                {
+                    classNames: 'wok-ui-ext-progress-bar-fill',
+                    style: {
+                        width: `${formatProgress(opts.progress)}%`
+                    }
+                }
+            ]
+        });
+    }
+    setProgress(progress, text) {
+        this.el.querySelector('.wok-ui-ext-progress-bar-fill')?.setAttribute('style', `width: ${formatProgress(progress)}%`);
+        const percent = this.el.querySelector('.wok-ui-ext-progress-percent');
+        if (percent) {
+            percent.textContent = text ?? `${formatProgress(progress)}%`;
+        }
+    }
+}

package/dist/progress/style.css

@@ -0,0 +1,37 @@
+.wok-ui-ext-progress-item {
+  margin: 16px 0;
+  --progress-fill: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
+  --progress-bg: var(--color-primary-soft);
+}
+.wok-ui-ext-progress-item.wok-ui-ext-progress-success {
+  --progress-fill: var(--color-success);
+  --progress-bg: var(--color-success-light);
+}
+.wok-ui-ext-progress-item.wok-ui-ext-progress-warning {
+  --progress-fill: var(--color-warning);
+  --progress-bg: var(--color-warning-light);
+}
+.wok-ui-ext-progress-item.wok-ui-ext-progress-danger {
+  --progress-fill: var(--color-danger);
+  --progress-bg: var(--color-danger-light);
+}
+.wok-ui-ext-progress-item .wok-ui-ext-progress-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+.wok-ui-ext-progress-item .wok-ui-ext-progress-bar-bg {
+  background: var(--progress-bg);
+  border-radius: var(--radius-full);
+  height: 12px;
+  overflow: hidden;
+}
+.wok-ui-ext-progress-item .wok-ui-ext-progress-bar-bg .wok-ui-ext-progress-bar-fill {
+  background: var(--progress-fill);
+  height: 100%;
+  width: 0%;
+  border-radius: var(--radius-full);
+  transition: width 0.2s;
+}

package/dist/quick-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './text';
+export * from './number';

package/dist/quick-input/index.js

@@ -0,0 +1,2 @@
+export * from './text';
+export * from './number';

package/dist/quick-input/number.d.ts

@@ -0,0 +1,35 @@
+export interface QuickInputNumberOpts {
+    /**
+     * 弹窗标题
+     */
+    title: string;
+    /**
+     * 输入框标题，不填就不显示
+     */
+    inputLabel?: string;
+    /**
+     * 输入框占位符，不填就不显示
+     */
+    placeholder?: string;
+    /**
+     * 是否必填，默认false
+     */
+    required?: boolean;
+    /**
+     * 最大长度，不填就不限制
+     */
+    max?: number;
+    /**
+     * 最小长度，不填就不限制
+     */
+    min?: number;
+    /**
+     * 初始值
+     */
+    value?: number;
+}
+export declare function quickInputNumber(opts: QuickInputNumberOpts): Promise<number | undefined>;
+export declare function quickInputNumber(opts: QuickInputNumberOpts & {
+    onSuccess: (value: number) => void;
+    onCancel?: () => void;
+}): void;

package/dist/quick-input/number.js

@@ -0,0 +1,68 @@
+import { NumberInput } from 'wok-ui';
+import { Form, FormItem } from '../form';
+import { showModal } from '../modal';
+/**
+ * 快速输入,返回用户输入的值
+ *
+ * @param opts
+ * @returns
+ */
+export function quickInputNumber(opts) {
+    function doInput(onSuccess, onCancel) {
+        let value = opts.value;
+        let form;
+        let input;
+        input = new NumberInput({
+            placeholder: opts.placeholder,
+            min: opts.min,
+            max: opts.max,
+            required: opts.required,
+            value,
+            onChange: val => {
+                value = val;
+            }
+        });
+        const modal = showModal({
+            title: opts.title,
+            width: 500,
+            body: (form = new Form({
+                labelPosition: 'top',
+                children: opts.inputLabel
+                    ? new FormItem({
+                        label: opts.inputLabel,
+                        required: opts.required,
+                        input
+                    })
+                    : input,
+                onSubmit: () => {
+                    onSuccess(value);
+                    modal.close();
+                }
+            })),
+            buttons: {
+                confirm: true,
+                cancel: true
+            },
+            onShown: () => {
+                input.focus();
+            },
+            onConfirm: () => form.submit(),
+            onClose: () => {
+                modal.close();
+                onCancel();
+            }
+        });
+    }
+    if (opts.onSuccess) {
+        const { onSuccess, onCancel } = opts;
+        doInput(val => {
+            if (typeof val === 'number') {
+                onSuccess(val);
+            }
+        }, onCancel ?? (() => { }));
+        return;
+    }
+    return new Promise(resolve => {
+        doInput(resolve, () => resolve(undefined));
+    });
+}

package/dist/quick-input/text.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 快速输入,返回用户输入的值，取消时返回 undefined
+ *
+ * @param opts
+ * @param opts.title 弹窗标题
+ * @param opts.inputLabel 输入框标题，不填就不显示
+ * @param opts.placeholder 输入框占位符，不填就不显示
+ * @param opts.required 是否必填，默认false
+ * @param opts.maxLength 最大长度，不填就不限制
+ * @param opts.value 初始值
+ * @returns 输入的值，取消时返回 undefined
+ */
+export declare function quickInput(opts: {
+    title: string;
+    inputLabel?: string;
+    placeholder?: string;
+    required?: boolean;
+    maxLength?: number;
+    value?: string;
+}): Promise<string | undefined>;

package/dist/quick-input/text.js

@@ -0,0 +1,61 @@
+import { TextInput } from 'wok-ui';
+import { Form, FormItem } from '../form';
+import { showModal } from '../modal';
+/**
+ * 快速输入,返回用户输入的值，取消时返回 undefined
+ *
+ * @param opts
+ * @param opts.title 弹窗标题
+ * @param opts.inputLabel 输入框标题，不填就不显示
+ * @param opts.placeholder 输入框占位符，不填就不显示
+ * @param opts.required 是否必填，默认false
+ * @param opts.maxLength 最大长度，不填就不限制
+ * @param opts.value 初始值
+ * @returns 输入的值，取消时返回 undefined
+ */
+export function quickInput(opts) {
+    let value = opts.value || '';
+    let form;
+    let input;
+    return new Promise(resolve => {
+        input = new TextInput({
+            placeholder: opts.placeholder,
+            maxLength: opts.maxLength,
+            required: opts.required,
+            value,
+            onChange: val => {
+                value = val;
+            }
+        });
+        const modal = showModal({
+            title: opts.title,
+            width: 500,
+            body: (form = new Form({
+                labelPosition: 'top',
+                children: opts.inputLabel
+                    ? new FormItem({
+                        label: opts.inputLabel,
+                        required: opts.required,
+                        input
+                    })
+                    : input,
+                onSubmit: () => {
+                    resolve(value);
+                    modal.close();
+                }
+            })),
+            buttons: {
+                confirm: true,
+                cancel: true
+            },
+            onShown: () => {
+                input.focus();
+            },
+            onConfirm: () => form.submit(),
+            onClose: () => {
+                modal.close();
+                resolve(undefined);
+            }
+        });
+    });
+}

package/dist/result/index.d.ts

@@ -0,0 +1,39 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+export interface ResultOptions {
+    /** 结果状态 */
+    status: 'success' | 'error' | 'info' | 'warning';
+    /** 主标题 */
+    title: string;
+    /** 副标题（可选） */
+    subTitle?: string;
+    /** 操作区（通常放按钮） */
+    extra?: SubModulesOpt;
+}
+/**
+ * 结果页组件
+ *
+ * 用于操作反馈的结果展示，支持成功/失败/信息/警告四种状态。
+ *
+ * @example
+ * ```ts
+ * // 成功结果
+ * new Result({
+ *   status: 'success',
+ *   title: '操作成功',
+ *   subTitle: '数据已保存',
+ *   extra: new Button({ text: '返回列表', onClick: () => router.back() })
+ * })
+ *
+ * // 错误结果
+ * new Result({
+ *   status: 'error',
+ *   title: '提交失败',
+ *   subTitle: '请检查网络后重试'
+ * })
+ * ```
+ */
+export declare class Result extends DivModule {
+    private opts;
+    constructor(opts: ResultOptions);
+}

package/dist/result/index.js

@@ -0,0 +1,71 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+import { IconCheckCircle, IconTimesCircle, IconInfoCircle } from '../icons';
+function getStatusIcon(status) {
+    switch (status) {
+        case 'success':
+            return new IconCheckCircle();
+        case 'error':
+            return new IconTimesCircle();
+        case 'warning':
+            return new IconInfoCircle();
+        case 'info':
+        default:
+            return new IconInfoCircle();
+    }
+}
+/**
+ * 结果页组件
+ *
+ * 用于操作反馈的结果展示，支持成功/失败/信息/警告四种状态。
+ *
+ * @example
+ * ```ts
+ * // 成功结果
+ * new Result({
+ *   status: 'success',
+ *   title: '操作成功',
+ *   subTitle: '数据已保存',
+ *   extra: new Button({ text: '返回列表', onClick: () => router.back() })
+ * })
+ *
+ * // 错误结果
+ * new Result({
+ *   status: 'error',
+ *   title: '提交失败',
+ *   subTitle: '请检查网络后重试'
+ * })
+ * ```
+ */
+export class Result extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-result');
+        this.opts = opts;
+        // 图标
+        this.addChild({
+            classNames: ['wok-ui-ext-result-icon', opts.status],
+            children: getStatusIcon(opts.status)
+        });
+        // 标题
+        this.addChild({
+            tag: 'div',
+            classNames: 'wok-ui-ext-result-title',
+            innerText: opts.title
+        });
+        // 副标题
+        if (opts.subTitle) {
+            this.addChild({
+                tag: 'div',
+                classNames: 'wok-ui-ext-result-subtitle',
+                innerText: opts.subTitle
+            });
+        }
+        // 操作区
+        if (opts.extra) {
+            this.addChild({
+                classNames: 'wok-ui-ext-result-extra',
+                children: opts.extra
+            });
+        }
+    }
+}

package/dist/result/style.css

@@ -0,0 +1,41 @@
+.wok-ui-ext-result {
+  text-align: center;
+  padding: 48px 24px;
+}
+.wok-ui-ext-result .wok-ui-ext-result-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+  line-height: 1;
+}
+.wok-ui-ext-result .wok-ui-ext-result-icon svg {
+  width: 64px;
+  height: 64px;
+}
+.wok-ui-ext-result .wok-ui-ext-result-icon.success {
+  color: var(--color-success, #52c41a);
+}
+.wok-ui-ext-result .wok-ui-ext-result-icon.error {
+  color: var(--color-danger, #ff4d4f);
+}
+.wok-ui-ext-result .wok-ui-ext-result-icon.info {
+  color: var(--color-primary, var(--brand));
+}
+.wok-ui-ext-result .wok-ui-ext-result-icon.warning {
+  color: var(--color-warning, #faad14);
+}
+.wok-ui-ext-result .wok-ui-ext-result-title {
+  font-size: var(--font-size-large);
+  color: var(--text-primary);
+  font-weight: 600;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+.wok-ui-ext-result .wok-ui-ext-result-subtitle {
+  font-size: var(--font-size-normal);
+  color: var(--text-tertiary);
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+.wok-ui-ext-result .wok-ui-ext-result-extra {
+  margin-top: 8px;
+}

package/dist/search-box/index.d.ts

@@ -0,0 +1,26 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+/**
+ * 搜索框
+ */
+export declare class SearchBox extends DivModule {
+    /**
+     * 搜索框
+     * @param opts
+     * @param opts.placeholder 搜索框占位符
+     * @param opts.maxLength 搜索框最大长度
+     * @param opts.value 搜索框默认值
+     * @param opts.onSearch 触发搜索回调
+     */
+    constructor(opts: {
+        placeholder?: string;
+        maxLength?: number;
+        value?: string;
+        /**
+         * 触发搜索
+         * @param value
+         * @returns
+         */
+        onSearch?: (value: string) => void;
+    });
+}

package/dist/search-box/index.js

@@ -0,0 +1,60 @@
+import { DivModule } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { IconSearch } from '../icons';
+import './style.css';
+/**
+ * 搜索框
+ */
+export class SearchBox extends DivModule {
+    /**
+     * 搜索框
+     * @param opts
+     * @param opts.placeholder 搜索框占位符
+     * @param opts.maxLength 搜索框最大长度
+     * @param opts.value 搜索框默认值
+     * @param opts.onSearch 触发搜索回调
+     */
+    constructor(opts) {
+        super('wok-ui-ext-search-box');
+        let value = opts.value || '';
+        this.addChild({
+            tag: 'form',
+            events: {
+                submit: (e) => {
+                    e.preventDefault();
+                    if (!opts.onSearch)
+                        return;
+                    const fValue = value.trim();
+                    opts.onSearch(fValue);
+                }
+            },
+            children: {
+                classNames: 'wok-ui-input',
+                children: [
+                    new IconSearch(),
+                    {
+                        tag: 'input',
+                        attrs: {
+                            type: 'search',
+                            placeholder: opts.placeholder || getWokUiExtI18n().buildMsg('search-box-placeholder'),
+                            maxLength: typeof opts.maxLength === 'number' ? `${opts.maxLength}` : '',
+                            value
+                        },
+                        preHandle(el) {
+                            const input = el;
+                            input.addEventListener('input', () => {
+                                value = input.value;
+                            });
+                            // input[type="search"]在部分浏览器中还会支持 search事件。当用户点击清除图标时，也会触发这个事件
+                            input.addEventListener('search', evt => {
+                                if (input.value === '') {
+                                    opts.onSearch?.('');
+                                }
+                            });
+                        }
+                    }
+                ]
+            }
+        });
+    }
+}

package/dist/search-box/style.css

@@ -0,0 +1,22 @@
+.wok-ui-ext-search-box .wok-ui-input {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.wok-ui-ext-search-box .wok-ui-input > .wok-ui-svg-icon {
+  color: var(--text-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.wok-ui-ext-search-box .wok-ui-input > input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  appearance: none;
+  line-height: 1.5;
+  font-size: var(--font-size-body) !important;
+}
+.wok-ui-ext-search-box .wok-ui-input > input::placeholder {
+  color: var(--text-placeholder);
+}

package/dist/segmented/index.d.ts

@@ -0,0 +1,42 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+export interface SegmentedItem {
+    label: string;
+    value: string;
+}
+/**
+ * 分段控件
+ *
+ * 用于筛选条件切换，支持字符串数组或 { label, value } 对象数组。
+ *
+ * @example
+ * ```ts
+ * // 简单字符串数组
+ * new Segmented({
+ *   items: ['全部', '启用', '禁用'],
+ *   activeValue: '启用',
+ *   onChange: v => console.log(v)
+ * })
+ *
+ * // 指定 label/value
+ * new Segmented({
+ *   items: [{ label: '全部', value: '' }, { label: '启用', value: '1' }],
+ *   activeValue: '',
+ *   onChange: v => console.log(v)
+ * })
+ * ```
+ */
+export declare class Segmented extends DivModule {
+    private opts;
+    private activeValue;
+    private items;
+    constructor(opts: {
+        items: Array<SegmentedItem | string>;
+        activeValue: string;
+        onChange: (activeValue: string) => void;
+    });
+    /** 获取当前选中值 */
+    getValue(): string;
+    /** 设置当前选中值 */
+    setValue(value: string): void;
+}

package/dist/segmented/index.js

@@ -0,0 +1,61 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 分段控件
+ *
+ * 用于筛选条件切换，支持字符串数组或 { label, value } 对象数组。
+ *
+ * @example
+ * ```ts
+ * // 简单字符串数组
+ * new Segmented({
+ *   items: ['全部', '启用', '禁用'],
+ *   activeValue: '启用',
+ *   onChange: v => console.log(v)
+ * })
+ *
+ * // 指定 label/value
+ * new Segmented({
+ *   items: [{ label: '全部', value: '' }, { label: '启用', value: '1' }],
+ *   activeValue: '',
+ *   onChange: v => console.log(v)
+ * })
+ * ```
+ */
+export class Segmented extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-segmented');
+        this.opts = opts;
+        this.items = opts.items.map(item => typeof item === 'string' ? { label: item, value: item } : item);
+        this.activeValue = opts.activeValue;
+        for (const item of this.items) {
+            const isActive = item.value === this.activeValue;
+            this.addChild({
+                tag: 'span',
+                classNames: ['wok-ui-ext-segmented-item', isActive ? 'active' : ''],
+                innerText: item.label,
+                onClick: () => {
+                    if (item.value === this.activeValue)
+                        return;
+                    this.activeValue = item.value;
+                    // 更新 active 样式
+                    this.el.querySelectorAll('.wok-ui-ext-segmented-item').forEach((el, i) => {
+                        el.classList.toggle('active', this.items[i].value === this.activeValue);
+                    });
+                    this.opts.onChange(item.value);
+                }
+            });
+        }
+    }
+    /** 获取当前选中值 */
+    getValue() {
+        return this.activeValue;
+    }
+    /** 设置当前选中值 */
+    setValue(value) {
+        this.activeValue = value;
+        this.el.querySelectorAll('.wok-ui-ext-segmented-item').forEach((el, i) => {
+            el.classList.toggle('active', this.items[i].value === value);
+        });
+    }
+}