wok-ui-ext 0.1.0

package/dist/image/index.d.ts

@@ -0,0 +1,38 @@
+import { DivModule } from 'wok-ui';
+import './style.less';
+export interface ImageOptions {
+    src: string;
+    alt?: string;
+    /** object-fit 属性，默认 cover */
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    width?: number | string;
+    height?: number | string;
+    /** 加载失败时的兜底图片 */
+    fallbackSrc?: string;
+    /** 点击回调 */
+    onClick?: () => void;
+}
+/**
+ * 图片组件
+ *
+ * 支持加载中占位、加载失败兜底、object-fit 控制。
+ *
+ * @example
+ * ```ts
+ * new Image({
+ *   src: 'https://example.com/photo.jpg',
+ *   fit: 'cover',
+ *   width: 200,
+ *   height: 150,
+ *   fallbackSrc: '/assets/fallback.png',
+ *   onClick: () => previewImage([{ src: 'https://...' }])
+ * })
+ * ```
+ */
+export declare class Image extends DivModule {
+    private opts;
+    constructor(opts: ImageOptions);
+    private handleError;
+    /** 更新图片 src */
+    setSrc(src: string): void;
+}

package/dist/image/index.js

@@ -0,0 +1,97 @@
+import { DivModule } from 'wok-ui';
+import './style.css';
+import { IconCircleNotch, IconImage } from '../icons';
+/**
+ * 图片组件
+ *
+ * 支持加载中占位、加载失败兜底、object-fit 控制。
+ *
+ * @example
+ * ```ts
+ * new Image({
+ *   src: 'https://example.com/photo.jpg',
+ *   fit: 'cover',
+ *   width: 200,
+ *   height: 150,
+ *   fallbackSrc: '/assets/fallback.png',
+ *   onClick: () => previewImage([{ src: 'https://...' }])
+ * })
+ * ```
+ */
+export class Image extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-image');
+        this.opts = opts;
+        const { src, alt, fit, width, height, onClick } = opts;
+        // 尺寸
+        if (width) {
+            this.el.style.width = typeof width === 'number' ? `${width}px` : width;
+        }
+        if (height) {
+            this.el.style.height = typeof height === 'number' ? `${height}px` : height;
+        }
+        // 点击
+        if (onClick) {
+            this.el.addEventListener('click', onClick);
+            this.el.style.cursor = 'pointer';
+        }
+        // 加载中占位（默认可见）
+        this.addChild({
+            classNames: ['wok-ui-ext-image-placeholder'],
+            children: new IconCircleNotch()
+        });
+        // 加载失败占位（默认隐藏）
+        this.addChild({
+            classNames: ['wok-ui-ext-image-error'],
+            children: new IconImage()
+        });
+        // 真实图片
+        this.addChild({
+            tag: 'img',
+            classNames: ['wok-ui-ext-image-img'],
+            attrs: {
+                src,
+                alt: alt ?? ''
+            },
+            style: {
+                objectFit: fit || undefined
+            },
+            preHandle: el => {
+                const img = el;
+                img.addEventListener('load', () => {
+                    this.el.classList.add('loaded');
+                });
+                img.addEventListener('error', () => {
+                    this.handleError();
+                });
+            }
+        });
+    }
+    handleError() {
+        if (this.opts.fallbackSrc) {
+            // 有 fallbackSrc，替换 img 的 src 再试一次
+            const imgEl = this.el.querySelector('img');
+            if (imgEl) {
+                imgEl.src = this.opts.fallbackSrc;
+                // fallback 也失败则显示错误状态
+                imgEl.addEventListener('error', () => {
+                    this.el.classList.add('error');
+                });
+                imgEl.addEventListener('load', () => {
+                    this.el.classList.add('loaded');
+                });
+            }
+        }
+        else {
+            this.el.classList.add('error');
+        }
+    }
+    /** 更新图片 src */
+    setSrc(src) {
+        this.el.classList.remove('loaded', 'error');
+        const imgEl = this.el.querySelector('img');
+        if (imgEl) {
+            imgEl.src = src;
+        }
+    }
+}

package/dist/image/style.css

@@ -0,0 +1,72 @@
+.wok-ui-ext-image {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--bg-base);
+  border-radius: var(--radius-sm);
+  min-width: 40px;
+  min-height: 40px;
+}
+.wok-ui-ext-image .wok-ui-ext-image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  font-size: 24px;
+  opacity: 1;
+  transition: opacity 0.2s;
+  z-index: 1;
+}
+.wok-ui-ext-image .wok-ui-ext-image-placeholder svg.spin {
+  animation: image-spin 1s linear infinite;
+}
+.wok-ui-ext-image .wok-ui-ext-image-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-card);
+  color: var(--text-tertiary);
+  font-size: 32px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1;
+}
+.wok-ui-ext-image .wok-ui-ext-image-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 2;
+}
+.wok-ui-ext-image.loaded .wok-ui-ext-image-placeholder {
+  opacity: 0;
+  pointer-events: none;
+}
+.wok-ui-ext-image.loaded .wok-ui-ext-image-img {
+  opacity: 1;
+}
+.wok-ui-ext-image.error .wok-ui-ext-image-placeholder {
+  opacity: 0;
+  pointer-events: none;
+}
+.wok-ui-ext-image.error .wok-ui-ext-image-img {
+  opacity: 0;
+}
+.wok-ui-ext-image.error .wok-ui-ext-image-error {
+  opacity: 1;
+}
+@keyframes image-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/image-preview/index.d.ts

@@ -0,0 +1,26 @@
+import './style.less';
+export interface ImagePreviewItem {
+    src: string;
+    alt?: string;
+}
+/**
+ * 打开图片预览
+ *
+ * 全屏遮罩查看图片，支持单张/多张预览、键盘导航。
+ *
+ * @example
+ * ```ts
+ * // 单张预览
+ * previewImage({ src: 'https://...' })
+ *
+ * // 多张预览
+ * previewImage([
+ *   { src: 'https://...', alt: '图1' },
+ *   { src: 'https://...', alt: '图2' }
+ * ])
+ *
+ * // 指定初始索引
+ * previewImage(images, 2)
+ * ```
+ */
+export declare function previewImage(images: ImagePreviewItem | ImagePreviewItem[], initialIndex?: number): void;

package/dist/image-preview/index.js

@@ -0,0 +1,134 @@
+import { FullRenderingModule } from 'wok-ui';
+import { showModal } from '../modal';
+import { IconChevronLeft, IconChevronRight, IconTimes } from '../icons';
+import './style.css';
+/**
+ * 图片预览模块
+ *
+ * 渲染图片、页码与导航控件，键盘导航和遮罩点击关闭等监听在模块生命周期内管理。
+ */
+class ImagePreview extends FullRenderingModule {
+    constructor(list, initialIndex, onClose) {
+        super('wok-ui-ext-preview');
+        this.list = list;
+        this.onClose = onClose;
+        this.currentIdx = initialIndex;
+        this.render();
+    }
+    buildContent() {
+        // 关闭按钮（右上角 X）
+        this.addChild({
+            tag: 'button',
+            classNames: ['wok-ui-ext-preview-close'],
+            attrs: { 'aria-label': 'Close preview' },
+            children: new IconTimes(),
+            onClick: () => this.onClose()
+        });
+        // 图片容器
+        this.addChild({
+            classNames: ['wok-ui-ext-preview-body'],
+            children: add => {
+                if (this.list.length > 1) {
+                    add({
+                        classNames: ['wok-ui-ext-preview-counter'],
+                        children: `${this.currentIdx + 1} / ${this.list.length}`
+                    });
+                }
+                add({
+                    tag: 'img',
+                    classNames: ['wok-ui-ext-preview-img'],
+                    attrs: {
+                        src: this.list[this.currentIdx].src,
+                        alt: this.list[this.currentIdx].alt ?? ''
+                    }
+                });
+            }
+        });
+        // 左右导航箭头
+        if (this.list.length > 1) {
+            this.addChild({
+                tag: 'button',
+                classNames: ['wok-ui-ext-preview-nav', 'wok-ui-ext-preview-nav-prev'],
+                attrs: { 'aria-label': 'Previous image' },
+                children: new IconChevronLeft(),
+                onClick: () => this.navigate(-1)
+            }, {
+                tag: 'button',
+                classNames: ['wok-ui-ext-preview-nav', 'wok-ui-ext-preview-nav-next'],
+                attrs: { 'aria-label': 'Next image' },
+                children: new IconChevronRight(),
+                onClick: () => this.navigate(1)
+            });
+        }
+    }
+    navigate(dir) {
+        const next = this.currentIdx + dir;
+        if (next < 0 || next >= this.list.length)
+            return;
+        this.currentIdx = next;
+        this.render();
+    }
+    mount(parentEl) {
+        super.mount(parentEl);
+        // 键盘左右方向键导航
+        this.keydownListener = (e) => {
+            if (e.key === 'ArrowLeft') {
+                this.navigate(-1);
+            }
+            else if (e.key === 'ArrowRight') {
+                this.navigate(1);
+            }
+        };
+        document.addEventListener('keydown', this.keydownListener);
+        // 点击遮罩关闭：容器（preview-active）占满全屏，点击容器空白区域即视为点击遮罩
+        const container = this.el.parentElement;
+        if (container) {
+            this.containerClickListener = (e) => {
+                if (e.target === container) {
+                    this.onClose();
+                }
+            };
+            container.addEventListener('click', this.containerClickListener);
+        }
+    }
+    destroy() {
+        if (this.keydownListener) {
+            document.removeEventListener('keydown', this.keydownListener);
+            this.keydownListener = undefined;
+        }
+        if (this.containerClickListener) {
+            const container = this.el.parentElement;
+            container?.removeEventListener('click', this.containerClickListener);
+            this.containerClickListener = undefined;
+        }
+        super.destroy();
+    }
+}
+/**
+ * 打开图片预览
+ *
+ * 全屏遮罩查看图片，支持单张/多张预览、键盘导航。
+ *
+ * @example
+ * ```ts
+ * // 单张预览
+ * previewImage({ src: 'https://...' })
+ *
+ * // 多张预览
+ * previewImage([
+ *   { src: 'https://...', alt: '图1' },
+ *   { src: 'https://...', alt: '图2' }
+ * ])
+ *
+ * // 指定初始索引
+ * previewImage(images, 2)
+ * ```
+ */
+export function previewImage(images, initialIndex) {
+    const list = Array.isArray(images) ? images : [images];
+    const handle = showModal({
+        replaceByBody: true,
+        className: 'wok-ui-ext-preview-active',
+        body: new ImagePreview(list, initialIndex ?? 0, () => handle.close())
+    });
+}

package/dist/image-preview/style.css

@@ -0,0 +1,96 @@
+.wok-ui-ext-modal-overlay .wok-ui-ext-modal-container.wok-ui-ext-preview-active {
+  max-width: none;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.wok-ui-ext-preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 10;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  transition: background 0.15s;
+  font-size: 20px;
+}
+.wok-ui-ext-preview-close:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+.wok-ui-ext-preview-close svg {
+  width: 20px;
+  height: 20px;
+}
+.wok-ui-ext-preview-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.wok-ui-ext-preview-counter {
+  margin-bottom: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  user-select: none;
+}
+.wok-ui-ext-preview-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  animation: wok-ui-ext-preview-zoom-in 0.25s ease;
+  user-select: none;
+}
+.wok-ui-ext-preview-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  transition: background 0.15s;
+  font-size: 24px;
+}
+.wok-ui-ext-preview-nav:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+.wok-ui-ext-preview-nav svg {
+  width: 24px;
+  height: 24px;
+}
+.wok-ui-ext-preview-nav-prev {
+  left: 20px;
+}
+.wok-ui-ext-preview-nav-next {
+  right: 20px;
+}
+@keyframes wok-ui-ext-preview-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+export * from './card';
+export * from './pagination';
+export * from './dropdown';
+export * from './tag';
+export * from './badge';
+export * from './button';
+export * from './switch';
+export * from './empty';
+export * from './tooltip';
+export * from './avatar';
+export * from './skeleton';
+export * from './progress';
+export * from './segmented';
+export * from './toast';
+export * from './form';
+export * from './upload';
+export * from './table';
+export * from './tabs';
+export * from './quick-input';
+export * from './modal';
+export * from './description-list';
+export * from './tree';
+export * from './context-menu';
+export * from './divider';
+export * from './date-picker';
+export * from './image';
+export * from './image-preview';
+export * from './loading';
+export * from './search-box';
+export * from './steps';
+export * from './text';
+export * from './alert';
+export * from './breadcrumb';
+export * from './timeline';
+export * from './drawer';
+export * from './menu';
+export * from './floating-layer';
+export * from './popover';
+export * from './popconfirm';
+export * from './collapse';
+export * from './list';
+export * from './result';
+export * from './icons';
+export * from './theme';
+export { getWokUiExtI18n } from './i18n';
+export type { WokUiExtI18nMessages } from './i18n';

package/dist/index.js

@@ -0,0 +1,45 @@
+export * from './card';
+export * from './pagination';
+export * from './dropdown';
+export * from './tag';
+export * from './badge';
+export * from './button';
+export * from './switch';
+export * from './empty';
+export * from './tooltip';
+export * from './avatar';
+export * from './skeleton';
+export * from './progress';
+export * from './segmented';
+export * from './toast';
+export * from './form';
+export * from './upload';
+export * from './table';
+export * from './tabs';
+export * from './quick-input';
+export * from './modal';
+export * from './description-list';
+export * from './tree';
+export * from './context-menu';
+export * from './divider';
+export * from './date-picker';
+export * from './image';
+export * from './image-preview';
+export * from './loading';
+export * from './search-box';
+export * from './steps';
+export * from './text';
+export * from './alert';
+export * from './breadcrumb';
+export * from './timeline';
+export * from './drawer';
+export * from './menu';
+export * from './floating-layer';
+export * from './popover';
+export * from './popconfirm';
+export * from './collapse';
+export * from './list';
+export * from './result';
+export * from './icons';
+export * from './theme';
+export { getWokUiExtI18n } from './i18n';

package/dist/list/index.d.ts

@@ -0,0 +1,32 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+import './style.less';
+export interface ListOptions {
+    /** 列表项 */
+    items: SubModulesOpt[];
+    /** 空状态文案 */
+    emptyText?: string;
+    /** 是否带边框，默认为 true，传 false 关闭边框 */
+    bordered?: boolean;
+    /** 尺寸 */
+    size?: 'default' | 'small' | 'large';
+}
+/**
+ * 通用数据列表
+ *
+ * 轻量级的数据展示列表，适合作为 Table 的替代方案。
+ *
+ * @example
+ * ```ts
+ * new List({
+ *   items: users.map(user => new ListItem({
+ *     title: user.name,
+ *     description: user.email
+ *   })),
+ *   bordered: true,
+ *   size: 'small'
+ * })
+ * ```
+ */
+export declare class List extends DivModule {
+    constructor(opts: ListOptions);
+}

package/dist/list/index.js

@@ -0,0 +1,42 @@
+import { DivModule } from 'wok-ui';
+import { Empty } from '../empty';
+import './style.css';
+/**
+ * 通用数据列表
+ *
+ * 轻量级的数据展示列表，适合作为 Table 的替代方案。
+ *
+ * @example
+ * ```ts
+ * new List({
+ *   items: users.map(user => new ListItem({
+ *     title: user.name,
+ *     description: user.email
+ *   })),
+ *   bordered: true,
+ *   size: 'small'
+ * })
+ * ```
+ */
+export class List extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-list');
+        // 默认带边框，传 bordered: false 关闭边框
+        if (opts.bordered !== false) {
+            this.el.classList.add('bordered');
+        }
+        if (opts.size && opts.size !== 'default') {
+            this.el.classList.add(opts.size);
+        }
+        if (!opts.items || opts.items.length === 0) {
+            this.addChild(new Empty({ text: opts.emptyText, noBorder: true }));
+            return;
+        }
+        opts.items.forEach(item => {
+            this.addChild({
+                classNames: 'wok-ui-ext-list-item',
+                children: item
+            });
+        });
+    }
+}

package/dist/list/list-item.d.ts

@@ -0,0 +1,27 @@
+import { DivModule, SubModulesOpt } from 'wok-ui';
+export interface ListItemOptions {
+    /** 标题 */
+    title: string | SubModulesOpt;
+    /** 描述（可选） */
+    description?: string | SubModulesOpt;
+    /** 右侧额外内容 */
+    extra?: SubModulesOpt;
+}
+/**
+ * 列表项
+ *
+ * 配合 List 使用的标准列表项，包含标题、描述和额外操作区。
+ *
+ * @example
+ * ```ts
+ * new ListItem({
+ *   title: '用户名称',
+ *   description: 'user@example.com',
+ *   extra: new Tag({ text: '管理员' })
+ * })
+ * ```
+ */
+export declare class ListItem extends DivModule {
+    private opts;
+    constructor(opts: ListItemOptions);
+}