@wsxjs/wsx-base-components 0.0.17 → 0.0.19

package/src/CodeBlock.wsx

@@ -0,0 +1,296 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * Code Block Component
+ * 通用的代码展示组件，支持复制功能和自定义操作按钮
+ */
+import { LightComponent, autoRegister, state } from "@wsxjs/wsx-core";
+import type { CodeSegment, CodeBlockConfig } from "./CodeBlock.types";
+import styles from "./CodeBlock.css?inline";
+// 导入 Prism.js 主题 CSS
+import "prismjs/themes/prism-tomorrow.css";
+// 静态导入 Prism.js 核心
+import Prism from "prismjs";
+// 静态导入所有支持的语言（按依赖顺序）
+// 基础语言（无依赖）
+import "prismjs/components/prism-markup";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-c"; // C 语言是基础语言
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-rust";
+import "prismjs/components/prism-go";
+// 依赖基础语言的语言
+import "prismjs/components/prism-typescript"; // 依赖 javascript
+import "prismjs/components/prism-jsx"; // 依赖 javascript
+import "prismjs/components/prism-cpp"; // 依赖 c
+// 依赖其他语言的语言（必须在依赖之后）
+import "prismjs/components/prism-tsx"; // 依赖 typescript 和 jsx
+
+@autoRegister({ tagName: "code-block" })
+export default class CodeBlock extends LightComponent {
+    static get observedAttributes(): string[] {
+        return ["code", "title", "language", "show-copy", "show-try-online", "try-online-url"];
+    }
+
+    @state private copied: boolean = false;
+    @state private highlighted: boolean = false;
+    @state private code: string = "";
+    @state private segments: CodeSegment[] = [];
+    @state private codeTitle: string = "";
+    @state private language: string = "typescript";
+    @state private showCopy: boolean = true;
+    @state private showTryOnline: boolean = false;
+    @state private tryOnlineUrl: string = "";
+    private onTryOnlineCallback?: () => void;
+    private codeElements: HTMLElement[] = [];
+    private isHighlighting: boolean = false; // 防止重复高亮
+
+    constructor() {
+        super({ styles });
+    }
+
+    protected onConnected() {
+        // 从属性初始化（使用 @state 会自动触发重渲染）
+        this.code = this.getAttribute("code") || "";
+        this.codeTitle = this.getAttribute("title") || "";
+        this.language = this.getAttribute("language") || "typescript";
+        this.showCopy = this.getAttribute("show-copy") !== "false";
+        this.showTryOnline = this.getAttribute("show-try-online") === "true";
+        this.tryOnlineUrl = this.getAttribute("try-online-url") || "";
+    }
+
+    protected onRendered() {
+        // 在渲染完成后应用语法高亮（防止重复高亮）
+        if (!this.isHighlighting) {
+            this.highlightCode();
+        }
+    }
+
+    protected onAttributeChanged(name: string, _oldValue: string, newValue: string) {
+        // 只在组件已连接时处理属性变化，避免在 render() 阶段触发重渲染
+        if (!this.connected) {
+            return;
+        }
+
+        switch (name) {
+            case "code":
+                this.code = newValue || "";
+                // @state 会自动触发重渲染，onRendered 会在渲染完成后调用 highlightCode()
+                break;
+            case "title":
+                this.codeTitle = newValue || "";
+                // @state 会自动触发重渲染
+                break;
+            case "language":
+                this.language = newValue || "typescript";
+                // @state 会自动触发重渲染，onRendered 会在渲染完成后调用 highlightCode()
+                break;
+            case "show-copy":
+                this.showCopy = newValue !== "false";
+                // @state 会自动触发重渲染
+                break;
+            case "show-try-online":
+                this.showTryOnline = newValue === "true";
+                // @state 会自动触发重渲染
+                break;
+            case "try-online-url":
+                this.tryOnlineUrl = newValue || "";
+                // @state 会自动触发重渲染
+                break;
+        }
+    }
+
+    /**
+     * 通过方法设置配置（用于编程式使用）
+     */
+    public updateConfig(config: CodeBlockConfig): void {
+        // 批量更新所有属性，减少重渲染次数
+        // 由于 @state 使用 scheduleRerender()，多个属性更新会被批量处理
+        if (config.segments && config.segments.length > 0) {
+            this.segments = config.segments;
+            this.code = ""; // 清空单个代码块
+        } else if (config.code) {
+            this.code = config.code;
+            this.segments = []; // 清空代码段
+        }
+
+        // 清除高亮标记和元素引用，允许重新高亮
+        this.highlighted = false;
+        this.codeElements = []; // 清空元素引用，让 onRendered 重新收集
+
+        // 清除已高亮的标记（如果元素还在 DOM 中）
+        if (this.connected) {
+            this.querySelectorAll("code[data-prism-highlighted]").forEach((el) => {
+                el.removeAttribute("data-prism-highlighted");
+            });
+        }
+
+        this.codeTitle = config.title || "";
+        this.language = config.language || "typescript";
+        this.showCopy = config.showCopy !== false;
+        this.showTryOnline = config.showTryOnline === true;
+        this.tryOnlineUrl = config.tryOnlineUrl || "";
+        this.onTryOnlineCallback = config.onTryOnline;
+        // @state 会自动触发重渲染，onRendered 会在渲染完成后调用 highlightCode()
+    }
+
+    render() {
+        // 确定要显示的代码段
+        const displaySegments =
+            this.segments.length > 0
+                ? this.segments
+                : this.code
+                  ? [{ code: this.code, language: this.language }]
+                  : [];
+
+        // 始终返回有效的 DOM 节点，不能返回 null
+        if (displaySegments.length === 0) {
+            return <div class="code-block"></div>;
+        }
+
+        // 合并所有代码用于复制功能
+        const allCode = displaySegments.map((seg) => seg.code).join("\n\n");
+
+        return (
+            <div class="code-block">
+                {(this.codeTitle || this.showCopy || this.showTryOnline) && (
+                    <div class="code-header">
+                        {this.codeTitle && <span class="code-title">{this.codeTitle}</span>}
+                        <div class="code-actions">
+                            {this.showCopy && (
+                                <button
+                                    onClick={() => this.copyCode(allCode)}
+                                    class={`btn-copy ${this.copied ? "copied" : ""}`}
+                                >
+                                    {this.copied ? "✓ Copied!" : "Copy"}
+                                </button>
+                            )}
+                            {this.showTryOnline && (
+                                <button onClick={this.openPlayground} class="btn-try">
+                                    Try Online
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                )}
+                <div class="code-content">
+                    {displaySegments.map((segment, index) => (
+                        <pre key={index} class="code-segment">
+                            <code
+                                class={`language-${segment.language}`}
+                                ref={(element) => {
+                                    if (element) {
+                                        // 只保存引用，高亮在 onRendered() 中统一处理
+                                        this.codeElements[index] = element as HTMLElement;
+                                    }
+                                }}
+                            >
+                                {segment.code}
+                            </code>
+                        </pre>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    private copyCode = async (codeToCopy?: string): Promise<void> => {
+        const code = codeToCopy || this.code || this.segments.map((s) => s.code).join("\n\n");
+        try {
+            await navigator.clipboard.writeText(code);
+            this.copied = true;
+            setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        } catch (error) {
+            console.error("Failed to copy code:", error);
+            // Fallback for older browsers
+            const textArea = document.createElement("textarea");
+            textArea.value = code;
+            textArea.style.position = "fixed";
+            textArea.style.opacity = "0";
+            document.body.appendChild(textArea);
+            textArea.select();
+            try {
+                document.execCommand("copy");
+                this.copied = true;
+                setTimeout(() => {
+                    this.copied = false;
+                }, 2000);
+            } catch (err) {
+                console.error("Fallback copy failed:", err);
+            }
+            document.body.removeChild(textArea);
+        }
+    };
+
+    private openPlayground = (): void => {
+        if (this.onTryOnlineCallback) {
+            this.onTryOnlineCallback();
+        } else if (this.tryOnlineUrl) {
+            window.location.href = this.tryOnlineUrl;
+        } else {
+            window.location.href = "/playground";
+        }
+    };
+
+    /**
+     * 应用语法高亮
+     */
+    private highlightCode(): void {
+        // 防止重复高亮
+        if (this.isHighlighting) {
+            return;
+        }
+
+        this.isHighlighting = true;
+
+        try {
+            // 使用 requestAnimationFrame 确保 DOM 已完全更新
+            requestAnimationFrame(() => {
+                try {
+                    // 如果有代码段，高亮所有代码段
+                    if (this.segments.length > 0) {
+                        this.segments.forEach((segment, index) => {
+                            const codeEl =
+                                this.codeElements[index] ||
+                                (this.querySelectorAll("code")[index] as HTMLElement | null);
+                            if (codeEl && !codeEl.hasAttribute("data-prism-highlighted")) {
+                                const lang = segment.language.toLowerCase();
+                                codeEl.className = `language-${lang}`;
+                                Prism.highlightElement(codeEl);
+                                codeEl.setAttribute("data-prism-highlighted", "true");
+                            }
+                        });
+                    } else if (this.code) {
+                        // 单个代码块
+                        const codeEl =
+                            this.codeElements[0] ||
+                            (this.querySelector("code") as HTMLElement | null);
+                        if (codeEl && !codeEl.hasAttribute("data-prism-highlighted")) {
+                            const lang = this.language.toLowerCase();
+                            codeEl.className = `language-${lang}`;
+                            Prism.highlightElement(codeEl);
+                            codeEl.setAttribute("data-prism-highlighted", "true");
+                        }
+                    }
+                    this.highlighted = true;
+                } catch (error) {
+                    console.error("Failed to highlight code:", error);
+                    // 如果高亮失败，仍然显示原始代码
+                } finally {
+                    this.isHighlighting = false;
+                }
+            });
+        } catch (error) {
+            console.error("Failed to schedule highlight:", error);
+            this.isHighlighting = false;
+        }
+    }
+}

package/src/ColorPicker.wsx

@@ -9,7 +9,8 @@
  * - 完全通用，不依赖特定UI库
  */
 
-import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
+import { createLogger } from "@wsxjs/wsx-logger";
 import {
     handleCSSVariables,
     setDefaultColorCache,
@@ -134,7 +135,7 @@ export default class ColorPicker extends WebComponent {
      */
     private renderColorButton(): HTMLElement {
         return (
-            <xy-button
+            <wsx-button
                 type="button"
                 class={`color-btn ${this.disabled ? "disabled" : ""}`}
                 style={`--theme-color: ${this.selectedColor}`}
@@ -145,7 +146,7 @@ export default class ColorPicker extends WebComponent {
                 }}
             >
                 <span class="color-indicator">_</span>
-            </xy-button>
+            </wsx-button>
         );
     }
 
@@ -174,7 +175,7 @@ export default class ColorPicker extends WebComponent {
      */
     private renderCustomPicker(): HTMLElement {
         return (
-            <xy-button
+            <wsx-button
                 type="button"
                 class="color-cube custom-picker"
                 style={{ backgroundColor: this.customColor }}
@@ -189,7 +190,7 @@ export default class ColorPicker extends WebComponent {
      */
     private renderColorButtons(): HTMLElement[] {
         return this.colorCollections.map((color) => (
-            <xy-button
+            <wsx-button
                 key={color}
                 type="button"
                 class="color-cube"

package/src/Combobox.css

@@ -0,0 +1,254 @@
+/* Combobox Component Styles */
+
+:host {
+    display: inline-block;
+    position: relative;
+}
+
+.combobox-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.combobox-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    min-width: 200px;
+    background: var(--combobox-bg, rgba(255, 255, 255, 0.1));
+    border: 1px solid var(--combobox-border, rgba(255, 255, 255, 0.2));
+    border-radius: var(--combobox-border-radius, 0.5rem);
+    transition: all 0.2s ease;
+}
+
+.combobox-input-wrapper:focus-within {
+    background: var(--combobox-focus-bg, rgba(255, 255, 255, 0.15));
+    border-color: var(--combobox-focus-border, var(--focus-color, #dc2626));
+    outline: 2px solid var(--combobox-focus-outline, rgba(220, 38, 38, 0.2));
+    outline-offset: 2px;
+}
+
+.combobox-tags {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    flex: 1;
+}
+
+.combobox-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--combobox-tag-bg, #dc2626);
+    color: var(--combobox-tag-color, #ffffff);
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.combobox-tag-remove {
+    background: none;
+    border: none;
+    color: var(--combobox-tag-color, #ffffff);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.15s ease;
+}
+
+.combobox-tag-remove:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.combobox-tag-more {
+    padding: 0.25rem 0.5rem;
+    color: var(--combobox-tag-color, #ffffff);
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.combobox-input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    color: var(--combobox-color, currentColor);
+    font-size: 0.875rem;
+    font-weight: 500;
+    outline: none;
+    min-width: 0;
+}
+
+.combobox-input::placeholder {
+    color: var(--combobox-placeholder-color, rgba(255, 255, 255, 0.5));
+}
+
+.combobox-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.combobox-arrow {
+    background: none;
+    border: none;
+    color: var(--combobox-arrow-color, currentColor);
+    cursor: pointer;
+    font-size: 0.625rem;
+    opacity: 0.7;
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+    padding: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.combobox-arrow:hover {
+    opacity: 1;
+}
+
+.combobox-arrow.open {
+    transform: rotate(180deg);
+}
+
+.combobox-arrow:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.combobox-menu {
+    position: absolute;
+    z-index: 1000;
+    min-width: 100%;
+    max-width: 300px;
+    max-height: 300px;
+    overflow-y: auto;
+    background: var(--combobox-menu-bg, #ffffff);
+    border: 1px solid var(--combobox-menu-border, #e5e7eb);
+    border-radius: var(--combobox-border-radius, 0.5rem);
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    padding: 0.25rem;
+    margin: 0.25rem 0 0 0;
+}
+
+[data-theme="dark"] .combobox-menu {
+    background: var(--combobox-menu-bg-dark, #1f2937);
+    border-color: var(--combobox-menu-border-dark, #374151);
+}
+
+.combobox-menu.combobox-top {
+    bottom: 100%;
+    margin: 0 0 0.25rem 0;
+}
+
+.combobox-menu.combobox-bottom {
+    top: 100%;
+    margin: 0.25rem 0 0 0;
+}
+
+.combobox-menu.combobox-left {
+    left: 0;
+}
+
+.combobox-menu.combobox-right {
+    right: 0;
+}
+
+.combobox-menu.combobox-center {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.combobox-menu.combobox-top.combobox-center {
+    transform: translateX(-50%) translateY(-100%);
+}
+
+.combobox-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    border-radius: 0.375rem;
+    color: var(--combobox-option-color, #1f2937);
+    cursor: pointer;
+    font-size: 0.875rem;
+    text-align: left;
+    transition: background-color 0.15s ease;
+}
+
+[data-theme="dark"] .combobox-option {
+    color: var(--combobox-option-color-dark, #f3f4f6);
+}
+
+.combobox-option:hover:not(.disabled) {
+    background: var(--combobox-option-hover-bg, #f3f4f6);
+}
+
+[data-theme="dark"] .combobox-option:hover:not(.disabled) {
+    background: var(--combobox-option-hover-bg-dark, #374151);
+}
+
+.combobox-option.selected {
+    background: var(--combobox-option-selected-bg, #dc2626);
+    color: var(--combobox-option-selected-color, #ffffff);
+    font-weight: 600;
+}
+
+.combobox-option.selected:hover {
+    background: var(--combobox-option-selected-hover-bg, #b91c1c);
+}
+
+.combobox-option.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.combobox-checkbox {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    font-weight: bold;
+}
+
+.combobox-empty {
+    padding: 0.5rem 0.75rem;
+    color: var(--combobox-empty-color, #9ca3af);
+    font-size: 0.875rem;
+    text-align: center;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .combobox-input-wrapper {
+        min-width: 150px;
+        padding: 0.375rem 0.5rem;
+    }
+
+    .combobox-input {
+        font-size: 0.8125rem;
+    }
+
+    .combobox-menu {
+        max-width: 200px;
+    }
+}

package/src/Combobox.types.ts

@@ -0,0 +1,32 @@
+/**
+ * Combobox Types
+ * 组合框组件的类型定义
+ */
+
+export interface ComboboxOption {
+    /** 选项值 */
+    value: string;
+    /** 选项标签 */
+    label: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义渲染函数 */
+    render?: () => HTMLElement;
+}
+
+export interface ComboboxConfig {
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否可搜索 */
+    searchable?: boolean;
+    /** 下拉菜单位置（top/bottom） */
+    position?: "top" | "bottom";
+    /** 下拉菜单对齐方式（left/right/center） */
+    align?: "left" | "right" | "center";
+    /** 触发方式（click/hover） */
+    trigger?: "click" | "hover";
+}