@wsxjs/wsx-base-components 0.0.5

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@wsxjs/wsx-base-components",
+  "version": "0.0.5",
+  "description": "Base UI components built with WSX Framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "dependencies": {
+    "@wsxjs/wsx-core": "0.0.5"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "eslint": "^9.31.0",
+    "http-server": "^14.1.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.19",
+    "@wsxjs/eslint-plugin-wsx": "0.0.5",
+    "@wsxjs/wsx-vite-plugin": "0.0.5"
+  },
+  "keywords": [
+    "wsx",
+    "web-components",
+    "ui-components",
+    "typescript",
+    "jsx"
+  ],
+  "author": "WSX Framework Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wsxjs/wsxjs.git",
+    "directory": "packages/base-components"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}

package/src/ColorPicker.css

@@ -0,0 +1,188 @@
+/* 通用颜色选择器样式 - 分离版本 */
+
+/* 主容器 */
+.color-section {
+    display: inline-block;
+    position: relative;
+}
+
+/* 弹出容器 */
+.color-popover {
+    display: inline-block;
+    position: relative;
+    overflow: visible;
+}
+
+/* 颜色按钮 */
+.color-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #e1e5e9;
+    border-radius: 3px;
+    background: var(--theme-color, #000);
+    color: transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+}
+
+.color-btn:hover:not(.disabled) {
+    border-color: #3f51b5;
+    box-shadow: 0 2px 8px rgba(63, 81, 181, 0.3);
+}
+
+.color-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.color-indicator {
+    font-size: 12px;
+    line-height: 1;
+    user-select: none;
+}
+
+/* 颜色面板 */
+.color-panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10000;
+    background: #fff;
+    border: 1px solid #e1e5e9;
+    border-radius: 6px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    padding: 8px;
+    margin-top: 4px;
+    box-sizing: border-box;
+    transform-origin: top left;
+    animation: colorPanelShow 0.2s ease-out;
+}
+
+@keyframes colorPanelShow {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+/* 颜色网格 */
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 4px;
+    min-width: 160px;
+}
+
+/* 颜色立方体 */
+.color-cube {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #e1e5e9;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+    background-color: var(--cube-color, #000);
+}
+
+.color-cube:hover {
+    border-color: #3f51b5;
+    transform: scale(1.1);
+    box-shadow: 0 2px 8px rgba(63, 81, 181, 0.4);
+    z-index: 1;
+}
+
+.color-cube:active {
+    transform: scale(0.95);
+}
+
+/* 自定义颜色选择器 */
+.color-cube.custom-picker {
+    background: linear-gradient(
+        45deg,
+        #ff0000 0%,
+        #ff8000 14%,
+        #ffff00 28%,
+        #80ff00 42%,
+        #00ff00 57%,
+        #00ff80 71%,
+        #00ffff 85%,
+        #0080ff 100%
+    );
+    position: relative;
+}
+
+.color-cube.custom-picker::after {
+    content: "+";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+}
+
+/* 主机元素状态 */
+:host([disabled]) .color-btn {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+:host([open]) .color-panel {
+    display: block;
+}
+
+:host(:not([open])) .color-panel {
+    display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .color-panel {
+        position: fixed;
+        top: auto;
+        left: 50%;
+        bottom: 10px;
+        transform: translateX(-50%);
+        width: 90vw;
+        max-width: 300px;
+    }
+
+    .color-grid {
+        grid-template-columns: repeat(8, 1fr);
+        gap: 6px;
+    }
+
+    .color-cube {
+        width: 24px;
+        height: 24px;
+    }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+    .color-panel {
+        background: #2d2d2d;
+        border-color: #404040;
+        color: #fff;
+    }
+
+    .color-btn {
+        border-color: #404040;
+    }
+
+    .color-cube {
+        border-color: #404040;
+    }
+}

package/src/ColorPicker.wsx

@@ -0,0 +1,416 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * 通用WSX颜色选择器 - Web Component示例
+ *
+ * 使用 .wsx 扩展名享受真正的TSX语法：
+ * - 继承EditorJSToolComponent
+ * - 真正的JSX语法支持
+ * - 支持外部CSS文件
+ * - 完全通用，不依赖特定UI库
+ */
+
+import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import styles from "./ColorPicker.css?inline";
+import {
+    handleCSSVariables,
+    setDefaultColorCache,
+    getCustomColorCache,
+    setCustomColorCache,
+    throttle,
+} from "./ColorPickerUtils";
+import type { PluginType } from "./ColorPickerUtils";
+
+const logger = createLogger("ColorPicker");
+
+// 导出ColorPickerUtils方法 用于外部调用
+export * from "./ColorPickerUtils";
+
+/**
+ * 颜色选择器配置接口
+ */
+export interface ColorPickerConfig {
+    colorCollections?: string[];
+    onColorPicked?: (color: string) => void;
+    hasCustomPicker?: boolean;
+    defaultColor?: string;
+    pluginType?: PluginType;
+    disabled?: boolean;
+    api?: unknown; // EditorJS API
+}
+
+/**
+ * 默认颜色集合
+ */
+const DEFAULT_COLORS = [
+    "#ff1300",
+    "#EC7878",
+    "#9C27B0",
+    "#673AB7",
+    "#3F51B5",
+    "#0070FF",
+    "#03A9F4",
+    "#00BCD4",
+    "#4CAF50",
+    "#8BC34A",
+    "#CDDC39",
+    "#FFE500",
+    "#FFBF00",
+    "#FF9800",
+    "#795548",
+    "#9E9E9E",
+    "#5A5A5A",
+    "#FFF",
+];
+
+/**
+ *  颜色选择器组件 Web Component with JSX aka WSX
+ */
+@autoRegister({ tagName: "color-picker" })
+export default class ColorPicker extends WebComponent {
+    private colorCollections: string[];
+    private onColorPicked?: (color: string) => void;
+    private hasCustomPicker: boolean;
+    private defaultColor: string;
+    private pluginType: PluginType;
+    private disabled: boolean;
+
+    // 状态
+    private selectedColor: string;
+    private customColor: string;
+    private isOpen: boolean;
+
+    // DOM引用
+    private colorBtn?: HTMLElement;
+    private colorPanel?: HTMLElement;
+
+    static get observedAttributes(): string[] {
+        return ["disabled", "selected-color", "open"];
+    }
+
+    constructor(config: ColorPickerConfig = {}) {
+        super({
+            styles,
+            styleName: "base-color-picker",
+            ...config,
+        });
+
+        // 初始化配置
+        this.colorCollections = config.colorCollections || DEFAULT_COLORS;
+        this.onColorPicked = config.onColorPicked;
+        this.hasCustomPicker = config.hasCustomPicker || false;
+        this.pluginType = config.pluginType || "text";
+        this.disabled = config.disabled || false;
+
+        // 初始化状态
+        this.defaultColor = handleCSSVariables(config.defaultColor || this.colorCollections[0]);
+        this.selectedColor = this.defaultColor;
+        this.customColor = getCustomColorCache(this.pluginType) || "";
+        this.isOpen = false;
+
+        logger.debug("ColorPicker initialized", {
+            colorCollections: this.colorCollections.length,
+            hasCustomPicker: this.hasCustomPicker,
+            pluginType: this.pluginType,
+        });
+    }
+
+    /**
+     * 实现抽象方法：真正的JSX渲染！🎉
+     */
+    render(): HTMLElement {
+        const colorButton = this.renderColorButton();
+        const colorPanel = this.isOpen ? this.renderColorPanel() : null;
+
+        return (
+            <section class="color-section">
+                <div class="color-popover">
+                    {colorButton}
+                    {colorPanel}
+                </div>
+            </section>
+        );
+    }
+
+    /**
+     * 渲染颜色按钮 - 真正的JSX！
+     */
+    private renderColorButton(): HTMLElement {
+        return (
+            <xy-button
+                type="button"
+                class={`color-btn ${this.disabled ? "disabled" : ""}`}
+                style={`--theme-color: ${this.selectedColor}`}
+                disabled={this.disabled}
+                onClick={this.handleButtonClick}
+                ref={(el: HTMLButtonElement) => {
+                    this.colorBtn = el;
+                }}
+            >
+                <span class="color-indicator">_</span>
+            </xy-button>
+        );
+    }
+
+    /**
+     * 渲染颜色面板 - 真正的JSX！
+     */
+    private renderColorPanel(): HTMLElement {
+        return (
+            <div
+                class="color-panel"
+                onClick={this.handlePanelClick}
+                ref={(el: HTMLDivElement) => {
+                    this.colorPanel = el;
+                }}
+            >
+                <div class="color-grid">
+                    {this.hasCustomPicker ? this.renderCustomPicker() : null}
+                    {this.renderColorButtons()}
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * 渲染自定义颜色选择器 - 真正的JSX！
+     */
+    private renderCustomPicker(): HTMLElement {
+        return (
+            <xy-button
+                type="button"
+                class="color-cube custom-picker"
+                style={{ backgroundColor: this.customColor }}
+                onClick={this.handleCustomPickerClick}
+                title="自定义颜色"
+            />
+        );
+    }
+
+    /**
+     * 渲染颜色按钮组 - 真正的JSX！
+     */
+    private renderColorButtons(): HTMLElement[] {
+        return this.colorCollections.map((color) => (
+            <xy-button
+                key={color}
+                type="button"
+                class="color-cube"
+                style={`background-color: ${color}`}
+                data-color={color}
+                title={color}
+                onClick={() => this.handleColorSelect(color)}
+            />
+        ));
+    }
+
+    /**
+     * 处理主按钮点击
+     */
+    private handleButtonClick = (event: Event): void => {
+        event.stopPropagation();
+        this.togglePanel();
+    };
+
+    /**
+     * 处理面板点击
+     */
+    private handlePanelClick = (event: Event): void => {
+        event.stopPropagation();
+    };
+
+    /**
+     * 处理颜色选择
+     */
+    private handleColorSelect = (color: string): void => {
+        const processedColor = handleCSSVariables(color);
+        this.setSelectedColor(processedColor);
+        this.closePanel();
+
+        // 缓存选择的颜色
+        setDefaultColorCache(processedColor, this.pluginType);
+
+        // 触发回调和事件
+        this.onColorPicked?.(processedColor);
+        this.dispatchEvent(
+            new CustomEvent("colorchange", {
+                detail: { color: processedColor },
+                bubbles: true,
+                composed: true,
+            })
+        );
+
+        logger.debug("Color selected", { color: processedColor });
+    };
+
+    /**
+     * 处理自定义颜色选择器点击
+     */
+    private handleCustomPickerClick = (): void => {
+        const input = document.createElement("input");
+        input.type = "color";
+        input.value = this.customColor;
+        input.style.cssText = `
+            position: fixed;
+            left: -9999px;
+            opacity: 0;
+            pointer-events: none;
+        `;
+
+        const handleInput = throttle((e: Event) => {
+            const target = e.target as HTMLInputElement;
+            const color = handleCSSVariables(target.value);
+
+            this.setSelectedColor(color);
+            this.setCustomColor(color);
+
+            // 清理输入元素
+            document.body.removeChild(input);
+
+            // 触发回调
+            this.onColorPicked?.(color);
+            this.dispatchEvent(
+                new CustomEvent("colorchange", {
+                    detail: { color },
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+
+            logger.debug("Custom color selected", { color });
+        }, 30);
+
+        input.addEventListener("input", handleInput);
+        document.body.appendChild(input);
+
+        // 触发颜色选择器
+        requestAnimationFrame(() => {
+            input.focus();
+            input.click();
+        });
+    };
+
+    /**
+     * 切换面板显示状态
+     */
+    private togglePanel(): void {
+        this.setOpen(!this.isOpen);
+    }
+
+    /**
+     * 关闭面板
+     */
+    private closePanel(): void {
+        this.setOpen(false);
+    }
+
+    /**
+     * 设置选中的颜色
+     */
+    private setSelectedColor(color: string): void {
+        this.selectedColor = color;
+        this.setAttr("selected-color", color);
+        this.updateColorButton();
+    }
+
+    /**
+     * 设置自定义颜色
+     */
+    private setCustomColor(color: string): void {
+        this.customColor = color;
+        setCustomColorCache(color, this.pluginType);
+    }
+
+    /**
+     * 设置面板开关状态
+     */
+    private setOpen(open: boolean): void {
+        this.isOpen = open;
+
+        if (open) {
+            this.setAttr("open", "");
+        } else {
+            this.removeAttr("open");
+        }
+
+        this.rerender();
+    }
+
+    /**
+     * 更新颜色按钮样式
+     */
+    private updateColorButton(): void {
+        if (this.colorBtn) {
+            this.colorBtn.style.setProperty("--theme-color", this.selectedColor);
+        }
+    }
+
+    /**
+     * 组件连接到DOM后的初始化
+     */
+    protected onConnected(): void {
+        // 绑定全局点击事件以关闭面板
+        document.addEventListener("click", this.handleDocumentClick);
+
+        logger.info("ColorPicker connected to DOM");
+    }
+
+    /**
+     * 组件从DOM断开时的清理
+     */
+    protected onDisconnected(): void {
+        document.removeEventListener("click", this.handleDocumentClick);
+
+        logger.info("ColorPicker disconnected from DOM");
+    }
+
+    /**
+     * 属性变化处理
+     */
+    protected onAttributeChanged(name: string, _oldValue: string, newValue: string): void {
+        switch (name) {
+            case "disabled":
+                this.disabled = newValue !== null;
+                this.rerender();
+                break;
+            case "selected-color":
+                if (newValue && newValue !== this.selectedColor) {
+                    this.selectedColor = newValue;
+                    this.updateColorButton();
+                }
+                break;
+            case "open":
+                this.isOpen = newValue !== null;
+                break;
+        }
+    }
+
+    /**
+     * 处理文档点击以关闭面板
+     */
+    private handleDocumentClick = (event: Event): void => {
+        if (this.isOpen && !this.contains(event.target as Node)) {
+            this.closePanel();
+        }
+    };
+
+    /**
+     * 公共API：获取当前选中的颜色
+     */
+    public getSelectedColor(): string {
+        return this.selectedColor;
+    }
+
+    /**
+     * 公共API：设置颜色
+     */
+    public setColor(color: string): void {
+        this.setSelectedColor(handleCSSVariables(color));
+    }
+
+    /**
+     * 公共API：聚焦组件
+     */
+    public focus(): void {
+        this.colorBtn?.focus();
+    }
+}