wok-ui-ext 0.1.0

package/dist/pagination/style.css

@@ -0,0 +1,50 @@
+.wok-ui-ext-pagination {
+  display: inline-flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.wok-ui-ext-pagination .wok-ui-ext-page-total {
+  color: var(--text-secondary);
+}
+.wok-ui-ext-pagination .wok-ui-ext-page-item {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-circle);
+  background: var(--bg-card);
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-speed);
+}
+.wok-ui-ext-pagination .wok-ui-ext-page-item:hover,
+.wok-ui-ext-pagination .wok-ui-ext-page-item.active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
+}
+.wok-ui-ext-pagination .wok-ui-ext-page-item.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.wok-ui-ext-pagination.wok-ui-ext-pagination-simple {
+  gap: 4px;
+}
+.wok-ui-ext-pagination.wok-ui-ext-pagination-simple .wok-ui-ext-page-item {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+}
+.wok-ui-ext-pagination.wok-ui-ext-pagination-simple .wok-ui-ext-page-info {
+  min-width: 60px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}

package/dist/popconfirm/api.d.ts

@@ -0,0 +1,43 @@
+import { PopoverPlacement } from '../popover';
+import './style.less';
+export type { PopoverPlacement } from '../popover';
+export interface ShowPopconfirmOptions {
+    /** 定位目标元素 */
+    target: HTMLElement;
+    /** 确认提示文字 */
+    title: string;
+    /** 详细描述 */
+    description?: string;
+    /** 确认按钮文字，默认「确定」 */
+    confirmText?: string;
+    /** 取消按钮文字，默认「取消」 */
+    cancelText?: string;
+    /** 确认按钮类型，默认 primary */
+    confirmType?: 'primary' | 'danger';
+    /** 弹出位置，默认 top */
+    placement?: PopoverPlacement;
+    /** 宽度（px），默认 260 */
+    width?: number;
+    /** 确认回调 */
+    onConfirm: () => void;
+    /** 取消回调 */
+    onCancel?: () => void;
+}
+export interface AttachPopconfirmOptions extends ShowPopconfirmOptions {
+}
+/**
+ * 显示气泡确认框。
+ * @param opts 配置选项
+ * @returns 关闭控制器 { close }
+ */
+export declare function showPopconfirm(opts: ShowPopconfirmOptions): {
+    close: () => void;
+};
+/**
+ * 给目标元素绑定点击触发气泡确认框。
+ * @param opts 配置选项
+ * @returns 解绑控制器 { destroy }
+ */
+export declare function attachPopconfirm(opts: AttachPopconfirmOptions): {
+    destroy: () => void;
+};

package/dist/popconfirm/api.js

@@ -0,0 +1,77 @@
+import { Button } from '../button';
+import { getWokUiExtI18n } from '../i18n';
+import { showPopover } from '../popover';
+import './style.css';
+/**
+ * 显示气泡确认框。
+ * @param opts 配置选项
+ * @returns 关闭控制器 { close }
+ */
+export function showPopconfirm(opts) {
+    const i18n = getWokUiExtI18n();
+    let confirmed = false;
+    const content = add => {
+        add({
+            tag: 'div',
+            classNames: 'wok-ui-ext-popconfirm-title',
+            children: opts.title
+        });
+        if (opts.description) {
+            add({
+                tag: 'div',
+                classNames: 'wok-ui-ext-popconfirm-desc',
+                children: opts.description
+            });
+        }
+        add({
+            classNames: 'wok-ui-ext-popconfirm-btns',
+            children: [
+                new Button({
+                    text: opts.cancelText || i18n.buildMsg('modal-cancel'),
+                    size: 'small',
+                    type: 'default',
+                    onClick: () => {
+                        close();
+                        opts.onCancel?.();
+                    }
+                }),
+                new Button({
+                    text: opts.confirmText || i18n.buildMsg('modal-confirm'),
+                    size: 'small',
+                    type: opts.confirmType || 'primary',
+                    onClick: () => {
+                        confirmed = true;
+                        close();
+                        opts.onConfirm();
+                    }
+                })
+            ]
+        });
+    };
+    const { close } = showPopover({
+        target: opts.target,
+        content,
+        placement: opts.placement || 'top',
+        width: opts.width || 260,
+        onClose: () => {
+            if (!confirmed) {
+                opts.onCancel?.();
+            }
+        }
+    });
+    return { close };
+}
+/**
+ * 给目标元素绑定点击触发气泡确认框。
+ * @param opts 配置选项
+ * @returns 解绑控制器 { destroy }
+ */
+export function attachPopconfirm(opts) {
+    const clickHandler = () => showPopconfirm(opts);
+    opts.target.addEventListener('click', clickHandler);
+    return {
+        destroy: () => {
+            opts.target.removeEventListener('click', clickHandler);
+        }
+    };
+}

package/dist/popconfirm/component.d.ts

@@ -0,0 +1,47 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import { PopoverPlacement } from './api';
+interface LegacyPopconfirmOptions {
+    trigger: HTMLElement | {
+        el: HTMLElement;
+    };
+    title: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmType?: 'primary' | 'danger';
+    onConfirm: () => void;
+    onCancel?: () => void;
+}
+/**
+ * 气泡确认框组件
+ *
+ * 可以作为容器使用：children 是触发元素。
+ * 也兼容旧版 trigger 参数。
+ *
+ * @example
+ * ```ts
+ * new Popconfirm({
+ *   children: new Button({ text: 'Delete', type: 'danger' }),
+ *   title: '确认删除？',
+ *   confirmType: 'danger',
+ *   onConfirm: () => deleteItem()
+ * })
+ * ```
+ */
+export declare class Popconfirm extends DivModule {
+    private binding?;
+    constructor(opts: {
+        children: SubModulesOpt;
+        title: string;
+        description?: string;
+        confirmText?: string;
+        cancelText?: string;
+        confirmType?: 'primary' | 'danger';
+        placement?: PopoverPlacement;
+        width?: number;
+        onConfirm: () => void;
+        onCancel?: () => void;
+    } | LegacyPopconfirmOptions);
+    destroy(): void;
+}
+export {};

package/dist/popconfirm/component.js

@@ -0,0 +1,48 @@
+import { DivModule } from 'wok-ui';
+import { attachPopconfirm } from './api';
+/**
+ * 气泡确认框组件
+ *
+ * 可以作为容器使用：children 是触发元素。
+ * 也兼容旧版 trigger 参数。
+ *
+ * @example
+ * ```ts
+ * new Popconfirm({
+ *   children: new Button({ text: 'Delete', type: 'danger' }),
+ *   title: '确认删除？',
+ *   confirmType: 'danger',
+ *   onConfirm: () => deleteItem()
+ * })
+ * ```
+ */
+export class Popconfirm extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-popconfirm-trigger');
+        const options = {
+            target: null,
+            title: opts.title,
+            description: opts.description,
+            confirmText: opts.confirmText,
+            cancelText: opts.cancelText,
+            confirmType: opts.confirmType,
+            placement: opts.placement,
+            width: opts.width,
+            onConfirm: opts.onConfirm,
+            onCancel: opts.onCancel
+        };
+        if ('trigger' in opts) {
+            options.target = 'el' in opts.trigger ? opts.trigger.el : opts.trigger;
+        }
+        else {
+            this.addChild(opts.children);
+            options.target = this.el;
+        }
+        this.binding = attachPopconfirm(options);
+    }
+    destroy() {
+        this.binding?.destroy();
+        this.binding = undefined;
+        super.destroy();
+    }
+}

package/dist/popconfirm/index.d.ts

@@ -0,0 +1,3 @@
+import './style.less';
+export * from './api';
+export * from './component';

package/dist/popconfirm/index.js

@@ -0,0 +1,3 @@
+import './style.css';
+export * from './api';
+export * from './component';

package/dist/popconfirm/style.css

@@ -0,0 +1,22 @@
+.wok-ui-ext-popconfirm-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.wok-ui-ext-popconfirm-title {
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+.wok-ui-ext-popconfirm-desc {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  line-height: 1.5;
+}
+.wok-ui-ext-popconfirm-btns {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}

package/dist/popover/api.d.ts

@@ -0,0 +1,36 @@
+import { SubModulesOpt } from 'wok-ui';
+import { FloatingPlacement } from '../floating-layer';
+import './style.less';
+/** 弹出位置，与 FloatingLayer 的定位方向一致 */
+export type PopoverPlacement = FloatingPlacement;
+export interface ShowPopoverOptions {
+    /** 定位目标元素 */
+    target: HTMLElement;
+    /** 弹出内容 */
+    content: SubModulesOpt;
+    /** 弹出位置，默认 bottom */
+    placement?: PopoverPlacement;
+    /** 宽度（px） */
+    width?: number;
+    /** 关闭回调 */
+    onClose?: () => void;
+}
+export interface AttachPopoverOptions extends ShowPopoverOptions {
+}
+/**
+ * 显示气泡卡片浮层，挂载到 body。
+ * 点击浮层外部或按 Esc 关闭，目标元素滚动/窗口变化时自动跟随。
+ * @param opts 配置选项
+ * @returns 关闭控制器 { close }
+ */
+export declare function showPopover(opts: ShowPopoverOptions): {
+    close: () => void;
+};
+/**
+ * 给目标元素绑定点击触发气泡卡片。
+ * @param opts 配置选项
+ * @returns 解绑控制器 { destroy }
+ */
+export declare function attachPopover(opts: AttachPopoverOptions): {
+    destroy: () => void;
+};

package/dist/popover/api.js

@@ -0,0 +1,61 @@
+import { FloatingLayer } from '../floating-layer';
+import './style.css';
+/** 当前打开的气泡卡片，全局同时只存在一个 */
+let activePopover = null;
+/**
+ * 气泡卡片浮层。挂载到 body，由 FloatingLayer 提供定位、滚动跟随、自动关闭。
+ */
+class PopoverLayer extends FloatingLayer {
+    constructor(opts) {
+        super({ target: opts.target, placement: opts.placement, offset: 10, onClose: opts.onClose });
+        this.el.classList.add('wok-ui-ext-popover');
+        this.el.dataset.placement = opts.placement;
+        if (opts.width) {
+            this.el.style.width = `${opts.width}px`;
+        }
+        this.content = opts.content;
+    }
+    buildContent() {
+        this.addChild(this.content);
+    }
+    destroy() {
+        if (activePopover === this) {
+            activePopover = null;
+        }
+        super.destroy();
+    }
+}
+/**
+ * 显示气泡卡片浮层，挂载到 body。
+ * 点击浮层外部或按 Esc 关闭，目标元素滚动/窗口变化时自动跟随。
+ * @param opts 配置选项
+ * @returns 关闭控制器 { close }
+ */
+export function showPopover(opts) {
+    // 先关闭已有的
+    activePopover?.destroy();
+    const layer = new PopoverLayer({
+        target: opts.target,
+        placement: opts.placement || 'bottom',
+        content: opts.content,
+        width: opts.width,
+        onClose: opts.onClose
+    });
+    activePopover = layer;
+    layer.mount(document.body);
+    return { close: () => layer.destroy() };
+}
+/**
+ * 给目标元素绑定点击触发气泡卡片。
+ * @param opts 配置选项
+ * @returns 解绑控制器 { destroy }
+ */
+export function attachPopover(opts) {
+    const clickHandler = () => showPopover(opts);
+    opts.target.addEventListener('click', clickHandler);
+    return {
+        destroy: () => {
+            opts.target.removeEventListener('click', clickHandler);
+        }
+    };
+}

package/dist/popover/component.d.ts

@@ -0,0 +1,38 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import { PopoverPlacement } from './api';
+interface LegacyPopoverOptions {
+    trigger: HTMLElement | {
+        el: HTMLElement;
+    };
+    content: SubModulesOpt;
+    placement?: PopoverPlacement;
+    width?: number;
+    onClose?: () => void;
+}
+/**
+ * 气泡卡片组件
+ *
+ * 可以作为容器使用：children 是触发元素，content 是浮层内容。
+ * 也兼容旧版 trigger 参数。
+ *
+ * @example
+ * ```ts
+ * new Popover({
+ *   children: new Button({ text: 'Click me' }),
+ *   placement: 'bottom',
+ *   content: new MyPanel()
+ * })
+ * ```
+ */
+export declare class Popover extends DivModule {
+    private binding?;
+    constructor(opts: {
+        children: SubModulesOpt;
+        content: SubModulesOpt;
+        placement?: PopoverPlacement;
+        width?: number;
+        onClose?: () => void;
+    } | LegacyPopoverOptions);
+    destroy(): void;
+}
+export {};

package/dist/popover/component.js

@@ -0,0 +1,51 @@
+import { DivModule } from 'wok-ui';
+import { attachPopover } from './api';
+/**
+ * 气泡卡片组件
+ *
+ * 可以作为容器使用：children 是触发元素，content 是浮层内容。
+ * 也兼容旧版 trigger 参数。
+ *
+ * @example
+ * ```ts
+ * new Popover({
+ *   children: new Button({ text: 'Click me' }),
+ *   placement: 'bottom',
+ *   content: new MyPanel()
+ * })
+ * ```
+ */
+export class Popover extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-popover-trigger');
+        const content = opts.content;
+        const placement = opts.placement || 'bottom';
+        const width = opts.width;
+        const onClose = opts.onClose;
+        if ('trigger' in opts) {
+            const target = 'el' in opts.trigger ? opts.trigger.el : opts.trigger;
+            this.binding = attachPopover({
+                target,
+                content,
+                placement,
+                width,
+                onClose
+            });
+        }
+        else {
+            this.addChild(opts.children);
+            this.binding = attachPopover({
+                target: this.el,
+                content,
+                placement,
+                width,
+                onClose
+            });
+        }
+    }
+    destroy() {
+        this.binding?.destroy();
+        this.binding = undefined;
+        super.destroy();
+    }
+}

package/dist/popover/index.d.ts

@@ -0,0 +1,3 @@
+import './style.less';
+export * from './api';
+export * from './component';

package/dist/popover/index.js

@@ -0,0 +1,3 @@
+import './style.css';
+export * from './api';
+export * from './component';

package/dist/popover/style.css

@@ -0,0 +1,102 @@
+.wok-ui-ext-popover {
+  background: var(--bg-card);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 12px;
+  animation: wok-ui-ext-popover-in 0.15s ease;
+  min-width: 60px;
+}
+.wok-ui-ext-popover::before,
+.wok-ui-ext-popover::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  pointer-events: none;
+}
+.wok-ui-ext-popover::before {
+  z-index: -1;
+}
+.wok-ui-ext-popover::after {
+  z-index: 1;
+}
+.wok-ui-ext-popover[data-placement^='bottom']::before {
+  top: -17px;
+  border-bottom-color: var(--border-medium);
+}
+.wok-ui-ext-popover[data-placement^='bottom']::after {
+  top: -15px;
+  border-bottom-color: var(--bg-card);
+}
+.wok-ui-ext-popover[data-placement='bottom']::before,
+.wok-ui-ext-popover[data-placement='bottom']::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wok-ui-ext-popover[data-placement='bottomLeft']::before,
+.wok-ui-ext-popover[data-placement='bottomLeft']::after {
+  left: 16px;
+}
+.wok-ui-ext-popover[data-placement='bottomRight']::before,
+.wok-ui-ext-popover[data-placement='bottomRight']::after {
+  right: 16px;
+}
+.wok-ui-ext-popover[data-placement^='top']::before {
+  bottom: -17px;
+  border-top-color: var(--border-medium);
+}
+.wok-ui-ext-popover[data-placement^='top']::after {
+  bottom: -15px;
+  border-top-color: var(--bg-card);
+}
+.wok-ui-ext-popover[data-placement='top']::before,
+.wok-ui-ext-popover[data-placement='top']::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wok-ui-ext-popover[data-placement='topLeft']::before,
+.wok-ui-ext-popover[data-placement='topLeft']::after {
+  left: 16px;
+}
+.wok-ui-ext-popover[data-placement='topRight']::before,
+.wok-ui-ext-popover[data-placement='topRight']::after {
+  right: 16px;
+}
+.wok-ui-ext-popover[data-placement='left']::before {
+  right: -17px;
+  border-left-color: var(--border-medium);
+}
+.wok-ui-ext-popover[data-placement='left']::after {
+  right: -15px;
+  border-left-color: var(--bg-card);
+}
+.wok-ui-ext-popover[data-placement='left']::before,
+.wok-ui-ext-popover[data-placement='left']::after {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.wok-ui-ext-popover[data-placement='right']::before {
+  left: -17px;
+  border-right-color: var(--border-medium);
+}
+.wok-ui-ext-popover[data-placement='right']::after {
+  left: -15px;
+  border-right-color: var(--bg-card);
+}
+.wok-ui-ext-popover[data-placement='right']::before,
+.wok-ui-ext-popover[data-placement='right']::after {
+  top: 50%;
+  transform: translateY(-50%);
+}
+@keyframes wok-ui-ext-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/progress/index.d.ts

@@ -0,0 +1,34 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+/**
+ * 进度条支持的状态颜色
+ */
+export type ProgressColor = 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * 进度条组件
+ *
+ <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 declare 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: {
+        label?: SubModulesOpt;
+        progress: number;
+        showProgress?: boolean;
+        color?: ProgressColor;
+        text?: string;
+    });
+    setProgress(progress: number, text?: string): void;
+}