wok-ui-ext 0.1.0

package/dist/segmented/style.css

@@ -0,0 +1,28 @@
+.wok-ui-ext-segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  background: var(--color-primary-soft);
+  border-radius: 40px;
+  padding: 6px 10px;
+  border: 1px solid var(--border-medium);
+}
+.wok-ui-ext-segmented .wok-ui-ext-segmented-item {
+  padding: 6px 16px;
+  border-radius: 30px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: default;
+  background: transparent;
+  color: var(--text-tertiary);
+  transition: all 0.1s;
+  border: none;
+  white-space: nowrap;
+  user-select: none;
+}
+.wok-ui-ext-segmented .wok-ui-ext-segmented-item.active {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
+  pointer-events: none;
+}

package/dist/skeleton/index.d.ts

@@ -0,0 +1,22 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+/**
+ * 骨架屏
+ */
+export declare class Skeleton extends DivModule {
+    private readonly opts;
+    /**
+     * 骨架屏
+     * @param opts
+     * @param opts.rows 骨架屏行数，默认 3
+     * @param opts.showAvatar 骨架屏是否显示头像，默认 false，设置为 true 时会显示头像在左侧
+     */
+    constructor(opts: {
+        rows?: number;
+        showAvatar?: boolean;
+    });
+    /**
+     * 根据 rows 参数构建线条（line），尽可能让最后两个稍微短一些，倒数第二个 80% 长，最后一个 70% 长
+     */
+    private buildLines;
+}

package/dist/skeleton/index.js

@@ -0,0 +1,68 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 骨架屏
+ */
+export class Skeleton extends DivModule {
+    /**
+     * 骨架屏
+     * @param opts
+     * @param opts.rows 骨架屏行数，默认 3
+     * @param opts.showAvatar 骨架屏是否显示头像，默认 false，设置为 true 时会显示头像在左侧
+     */
+    constructor(opts) {
+        super('wok-ui-ext-skeleton');
+        this.opts = opts;
+        if (!this.opts.showAvatar) {
+            this.addChild(this.buildLines());
+            return;
+        }
+        // 有头像的情况
+        /**
+         * <div class="wok-ui-ext-skeleton-row">
+              <div class="wok-ui-ext-skeleton-avatar"></div>
+              <div style="flex:1">
+                  <div class="wok-ui-ext-skeleton-line" style="width:90%"></div>
+                  <div class="wok-ui-ext-skeleton-line" style="width:60%"></div>
+              </div>
+          </div>
+         */
+        this.addChild({
+            classNames: 'wok-ui-ext-skeleton-row',
+            children: [
+                {
+                    classNames: 'wok-ui-ext-skeleton-avatar'
+                },
+                {
+                    style: {
+                        flex: '1'
+                    },
+                    children: this.buildLines()
+                }
+            ]
+        });
+    }
+    /**
+     * 根据 rows 参数构建线条（line），尽可能让最后两个稍微短一些，倒数第二个 80% 长，最后一个 70% 长
+     */
+    buildLines() {
+        const res = [];
+        const rows = this.opts.rows ?? 3;
+        for (let i = 0; i < rows; i++) {
+            // 判断是否要缩短
+            if (rows >= 3 && i >= rows - 2) {
+                res.push({
+                    classNames: 'wok-ui-ext-skeleton-line',
+                    style: {
+                        width: i === rows - 1 ? '70%' : '80%'
+                    }
+                });
+                continue;
+            }
+            res.push({
+                classNames: 'wok-ui-ext-skeleton-line'
+            });
+        }
+        return res;
+    }
+}

package/dist/skeleton/style.css

@@ -0,0 +1,31 @@
+.wok-ui-ext-skeleton {
+  width: 100%;
+}
+.wok-ui-ext-skeleton .wok-ui-ext-skeleton-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: var(--radius-circle);
+  background: var(--color-primary-soft, #e2edff);
+  margin-right: 16px;
+}
+.wok-ui-ext-skeleton .wok-ui-ext-skeleton-line {
+  height: 18px;
+  background: linear-gradient(90deg, var(--color-primary-soft) 25%, var(--bg-content) 50%, var(--color-primary-soft) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: var(--radius-full);
+  margin: 12px 0;
+}
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.wok-ui-ext-skeleton .wok-ui-ext-skeleton-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}

package/dist/steps/index.d.ts

@@ -0,0 +1,46 @@
+import { FullRenderingModule } from 'wok-ui';
+import { IconInput } from '../icons';
+import './style.less';
+export interface StepItem {
+    title: string;
+    description?: string;
+    icon?: IconInput;
+}
+/**
+ * 步骤条组件
+ */
+export declare class Steps extends FullRenderingModule {
+    private readonly opts;
+    /**
+     * 当前步骤索引（从 0 开始）
+     */
+    private current;
+    private readonly status;
+    private readonly direction;
+    private readonly onChange?;
+    constructor(opts: {
+        /**
+         * 步骤项列表
+         */
+        items: StepItem[];
+        /**
+         * 当前步骤索引（从 0 开始），默认 0
+         */
+        current?: number;
+        /**
+         * 步骤状态：'process' 表示正在处理中，'error' 表示出错
+         * 默认会自动根据 current 推断
+         */
+        status?: 'process' | 'error';
+        /**
+         * 方向，默认 'horizontal'
+         */
+        direction?: 'horizontal' | 'vertical';
+        /**
+         * 点击步骤时触发，参数为步骤索引
+         */
+        onChange?: (index: number) => void;
+    });
+    protected buildContent(): void;
+    private buildHeadContent;
+}

package/dist/steps/index.js

@@ -0,0 +1,95 @@
+import { FullRenderingModule } from 'wok-ui';
+import { resolveIcon } from '../icons';
+import './style.css';
+/**
+ * 步骤条组件
+ */
+export class Steps extends FullRenderingModule {
+    constructor(opts) {
+        super('wok-ui-ext-steps');
+        this.opts = opts;
+        const { current = 0, status = 'process', direction = 'horizontal', onChange } = opts;
+        this.current = current;
+        this.status = status;
+        this.direction = direction;
+        this.onChange = onChange;
+        this.el.classList.add(direction === 'vertical' ? 'wok-ui-ext-steps-vertical' : 'wok-ui-ext-steps-horizontal');
+        this.render();
+    }
+    buildContent() {
+        const { items } = this.opts;
+        const lastIndex = items.length - 1;
+        const hasCallback = !!this.onChange;
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            // 推断步骤状态
+            let stepStatus;
+            if (i < this.current) {
+                stepStatus = this.status === 'error' && i === this.current - 1 ? 'error' : 'finish';
+            }
+            else if (i === this.current) {
+                stepStatus = this.status;
+            }
+            else {
+                stepStatus = 'wait';
+            }
+            // 构建步骤 body 子元素
+            const bodyChildren = [
+                { classNames: 'wok-ui-ext-step-title', children: item.title }
+            ];
+            if (item.description) {
+                bodyChildren.push({ classNames: 'wok-ui-ext-step-description', children: item.description });
+            }
+            this.addChild({
+                classNames: ['wok-ui-ext-step-item', `wok-ui-ext-step-${stepStatus}`, hasCallback ? 'wok-ui-ext-step-clickable' : ''],
+                style: this.direction === 'horizontal' ? { width: `${100 / items.length}%` } : undefined,
+                onClick: hasCallback
+                    ? () => {
+                        this.current = i;
+                        this.render();
+                        this.onChange?.(i);
+                    }
+                    : undefined,
+                children: add => {
+                    // 步骤头：包含连接线与图标
+                    add({
+                        classNames: 'wok-ui-ext-step-head',
+                        children: addHead => {
+                            // 连接线
+                            if (i < lastIndex) {
+                                const isErrorTail = this.status === 'error' && i === this.current - 1;
+                                addHead({
+                                    classNames: [
+                                        'wok-ui-ext-step-tail',
+                                        i < this.current ? 'wok-ui-ext-step-tail-active' : '',
+                                        isErrorTail ? 'wok-ui-ext-step-tail-error' : ''
+                                    ]
+                                });
+                            }
+                            // 图标/序号
+                            addHead({
+                                classNames: 'wok-ui-ext-step-icon',
+                                children: this.buildHeadContent(stepStatus, i, item)
+                            });
+                        }
+                    });
+                    // 步骤主体
+                    add({
+                        classNames: 'wok-ui-ext-step-body',
+                        children: addBody => {
+                            for (const child of bodyChildren) {
+                                addBody(child);
+                            }
+                        }
+                    });
+                }
+            });
+        }
+    }
+    buildHeadContent(status, index, item) {
+        if (item.icon && (status === 'finish' || status === 'error')) {
+            return resolveIcon(item.icon);
+        }
+        return String(index + 1);
+    }
+}

package/dist/steps/style.css

@@ -0,0 +1,181 @@
+.wok-ui-ext-steps {
+  display: flex;
+  width: 100%;
+  line-height: normal;
+  box-sizing: border-box;
+}
+.wok-ui-ext-steps.wok-ui-ext-steps-horizontal {
+  flex-direction: row;
+}
+.wok-ui-ext-steps.wok-ui-ext-steps-vertical {
+  flex-direction: column;
+}
+.wok-ui-ext-step-item {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.wok-ui-ext-step-item:last-child {
+  flex: none;
+}
+.wok-ui-ext-step-item.wok-ui-ext-step-clickable {
+  cursor: pointer;
+}
+.wok-ui-ext-step-item.wok-ui-ext-step-clickable:hover .wok-ui-ext-step-title {
+  color: var(--color-primary);
+}
+.wok-ui-ext-step-head {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+.wok-ui-ext-step-icon {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: var(--bg-content);
+  border: 1px solid var(--border-medium);
+  color: var(--text-placeholder);
+  transition: all var(--transition-speed);
+}
+.wok-ui-ext-step-icon .wok-ui-svg-icon {
+  font-size: 16px;
+}
+.wok-ui-ext-step-tail {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: -50%;
+  height: 1px;
+  margin-top: -0.5px;
+  background: var(--border-medium);
+  z-index: 1;
+  transition: background var(--transition-speed);
+}
+.wok-ui-ext-step-tail.wok-ui-ext-step-tail-active {
+  background: var(--color-primary);
+}
+.wok-ui-ext-step-tail.wok-ui-ext-step-tail-error {
+  background: var(--color-danger);
+}
+.wok-ui-ext-step-body {
+  margin-top: 8px;
+  padding: 0 8px;
+  text-align: center;
+  box-sizing: border-box;
+}
+.wok-ui-ext-step-title {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+.wok-ui-ext-step-description {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+.wok-ui-ext-step-wait .wok-ui-ext-step-icon {
+  border-color: var(--text-placeholder);
+  color: var(--text-placeholder);
+  background: var(--bg-content);
+}
+.wok-ui-ext-step-wait .wok-ui-ext-step-title {
+  color: var(--text-placeholder);
+}
+.wok-ui-ext-step-wait .wok-ui-ext-step-description {
+  color: var(--text-placeholder);
+}
+.wok-ui-ext-step-process .wok-ui-ext-step-icon,
+.wok-ui-ext-step-finish .wok-ui-ext-step-icon {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: #fff;
+}
+.wok-ui-ext-step-process .wok-ui-ext-step-title,
+.wok-ui-ext-step-finish .wok-ui-ext-step-title {
+  color: var(--text-primary);
+}
+.wok-ui-ext-step-process .wok-ui-ext-step-description,
+.wok-ui-ext-step-finish .wok-ui-ext-step-description {
+  color: var(--text-secondary);
+}
+.wok-ui-ext-step-process .wok-ui-ext-step-title {
+  font-weight: var(--font-weight-semibold);
+}
+.wok-ui-ext-step-finish .wok-ui-ext-step-tail {
+  background: var(--color-primary);
+}
+.wok-ui-ext-step-error .wok-ui-ext-step-icon {
+  border-color: var(--color-danger);
+  background: var(--color-danger);
+  color: #fff;
+}
+.wok-ui-ext-step-error .wok-ui-ext-step-title,
+.wok-ui-ext-step-error .wok-ui-ext-step-description {
+  color: var(--color-danger);
+}
+.wok-ui-ext-steps-horizontal .wok-ui-ext-step-item {
+  text-align: center;
+}
+.wok-ui-ext-steps-horizontal .wok-ui-ext-step-item:last-child .wok-ui-ext-step-head {
+  width: auto;
+}
+.wok-ui-ext-steps-horizontal .wok-ui-ext-step-item:last-child .wok-ui-ext-step-tail {
+  display: none;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-item {
+  display: flex;
+  flex: none;
+  min-height: 80px;
+  text-align: left;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-item:last-child {
+  min-height: auto;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-item:last-child .wok-ui-ext-step-tail {
+  display: none;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-head {
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 32px;
+  min-width: 32px;
+  padding: 0;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-icon {
+  flex: none;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-tail {
+  top: 32px;
+  left: 50%;
+  right: auto;
+  bottom: 0;
+  width: 1px;
+  height: auto;
+  margin-top: 0;
+  transform: translateX(-50%);
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-body {
+  flex: 1;
+  margin-top: 0;
+  margin-left: 12px;
+  padding: 0;
+  text-align: left;
+}
+.wok-ui-ext-steps-vertical .wok-ui-ext-step-title {
+  line-height: 32px;
+}

package/dist/switch/index.d.ts

@@ -0,0 +1,32 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+/**
+ * 开关组件
+ */
+export declare class Switch extends DivModule {
+    private opts;
+    private checked;
+    private disabled;
+    constructor(opts: {
+        /**
+         * 开关标签
+         */
+        label?: string;
+        /**
+         * 是否默认选中
+         */
+        checked?: boolean;
+        /**
+         * 切换回调
+         */
+        onChange?: (checked: boolean) => void;
+        /**
+         * 是否禁用
+         */
+        disabled?: boolean;
+    });
+    private toggle;
+    private update;
+    setChecked(checked: boolean): void;
+    isChecked(): boolean;
+}

package/dist/switch/index.js

@@ -0,0 +1,74 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+/**
+ * 开关组件
+ */
+export class Switch extends DivModule {
+    constructor(opts) {
+        super();
+        this.opts = opts;
+        this.checked = false;
+        this.disabled = !!opts.disabled;
+        this.checked = !!opts.checked;
+        this.el.classList.add('wok-ui-ext-switch');
+        if (this.checked) {
+            this.el.classList.add('checked');
+        }
+        if (this.disabled) {
+            this.el.classList.add('disabled');
+        }
+        const switchBtn = document.createElement('button');
+        switchBtn.className = 'wok-ui-ext-switch-button';
+        switchBtn.type = 'button';
+        switchBtn.setAttribute('role', 'switch');
+        switchBtn.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        if (this.disabled) {
+            switchBtn.disabled = true;
+            switchBtn.setAttribute('aria-disabled', 'true');
+        }
+        switchBtn.appendChild(document.createElement('span'));
+        switchBtn.addEventListener('click', () => this.toggle());
+        switchBtn.addEventListener('keydown', (ev) => {
+            if (ev.key === ' ' || ev.key === 'Enter') {
+                ev.preventDefault();
+                this.toggle();
+            }
+        });
+        this.addChild(switchBtn);
+        if (opts.label) {
+            this.addChild({
+                tag: 'label',
+                classNames: 'wok-ui-ext-switch-label',
+                attrs: {
+                    for: undefined
+                },
+                children: opts.label
+            });
+        }
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = !this.checked;
+        this.update();
+        this.opts.onChange?.(this.checked);
+    }
+    update() {
+        this.el.classList.toggle('checked', this.checked);
+        const btn = this.el.querySelector('.wok-ui-ext-switch-button');
+        if (btn) {
+            btn.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+    }
+    setChecked(checked) {
+        if (this.checked === checked) {
+            return;
+        }
+        this.checked = checked;
+        this.update();
+    }
+    isChecked() {
+        return this.checked;
+    }
+}

package/dist/switch/style.css

@@ -0,0 +1,52 @@
+.wok-ui-ext-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+}
+.wok-ui-ext-switch .wok-ui-ext-switch-button {
+  position: relative;
+  display: inline-flex;
+  width: 52px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border-medium);
+  border-radius: 34px;
+  background-color: var(--border-dark);
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+  outline: none;
+}
+.wok-ui-ext-switch .wok-ui-ext-switch-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+.wok-ui-ext-switch .wok-ui-ext-switch-button span {
+  position: absolute;
+  top: 2px;
+  left: 3px;
+  width: 22px;
+  height: 22px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.wok-ui-ext-switch .wok-ui-ext-switch-label {
+  color: var(--text-primary);
+  cursor: pointer;
+}
+.wok-ui-ext-switch.checked .wok-ui-ext-switch-button {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary-dark);
+}
+.wok-ui-ext-switch.checked .wok-ui-ext-switch-button span {
+  transform: translateX(24px);
+}
+.wok-ui-ext-switch.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.wok-ui-ext-switch.disabled .wok-ui-ext-switch-button,
+.wok-ui-ext-switch.disabled .wok-ui-ext-switch-label {
+  cursor: not-allowed;
+}

package/dist/table/body.d.ts

@@ -0,0 +1,21 @@
+import { Module } from 'wok-ui';
+import { TableColumn } from './column';
+/**
+ * 躯干
+ */
+export declare class Body<T> extends Module {
+    constructor(opts: {
+        /**
+         * 数据列表.
+         */
+        list: T[];
+        /**
+         * 列设置.
+         */
+        cols: TableColumn<T>[];
+        /**
+         * 空状态的描述
+         */
+        emptyDesc?: string;
+    });
+}

package/dist/table/body.js

@@ -0,0 +1,35 @@
+import { Module } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { Row } from './row';
+import { Empty } from '../empty';
+/**
+ * 躯干
+ */
+export class Body extends Module {
+    constructor(opts) {
+        super(document.createElement('tbody'));
+        this.el.classList.add('wok-ui-ext-table-body');
+        if (opts.list.length) {
+            opts.list.forEach((data, idx) => {
+                this.addChild(new Row({
+                    cols: opts.cols,
+                    data,
+                    rowIdx: idx
+                }));
+            });
+        }
+        else {
+            // 空状态
+            const visibleCount = opts.cols.length;
+            const emptyText = opts.emptyDesc || getWokUiExtI18n().buildMsg('table-empty');
+            this.addChild({
+                tag: 'tr',
+                children: {
+                    tag: 'td',
+                    attrs: { colspan: String(visibleCount || 1) },
+                    children: new Empty({ text: emptyText, noBorder: true })
+                }
+            });
+        }
+    }
+}