@wsxjs/wsx-base-components 0.0.16 → 0.0.18

package/dist/style.css

@@ -1 +1 @@
-.todo-list-light{padding:1.5rem;max-width:600px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.todo-header{margin-bottom:1.5rem;text-align:center}.todo-header h2{margin:0 0 .5rem;color:#2196f3;font-size:1.75rem}.subtitle{margin:0;color:#666;font-size:.9rem}.todo-input-section{display:flex;gap:.5rem;margin-bottom:1rem}.todo-input{flex:1;padding:.75rem;border:2px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s}.todo-input:focus{outline:none;border-color:#2196f3}.todo-filters{display:flex;gap:.5rem;margin-bottom:1rem;justify-content:center}.filter-btn{padding:.5rem 1rem;border:2px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.9rem}.filter-btn:hover{background:#f5f5f5}.filter-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.todo-list-container{min-height:200px;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem 1rem;color:#999;font-style:italic}.todo-items{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#f0f7ff;border-radius:4px;transition:background .2s}.todo-item:hover{background:#e3f2fd}.todo-item.completed{opacity:.6}.todo-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.todo-text{flex:1;font-size:1rem}.todo-item.completed .todo-text{text-decoration:line-through;color:#999}.todo-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover:not(:disabled){background:#1976d2}.btn-warning{background:#ff9800;color:#fff}.btn-warning:hover{background:#e68900}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#da190b}.btn-sm{padding:.25rem .5rem;font-size:.8rem}.debug-info{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd}.debug-info summary{cursor:pointer;color:#666;font-size:.9rem}.debug-info pre{background:#f5f5f5;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.85rem;margin-top:.5rem}.user-profile{padding:1.5rem;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.profile-header{margin-bottom:2rem;text-align:center}.profile-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.profile-header .subtitle{color:#666;font-size:.9rem;margin:0}.profile-content{display:flex;flex-direction:column;gap:2rem}.profile-section{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-section h3{margin:0 0 1rem;color:#333;font-size:1.25rem;border-bottom:2px solid #007bff;padding-bottom:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500;font-size:.9rem}.form-group input[type=checkbox]{margin-right:.5rem}.input-field{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.profile-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.btn-warning{background:#ffc107;color:#212529}.btn-warning:hover{background:#e0a800}.profile-display{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-display h3{margin:0 0 1rem;color:#333;font-size:1.25rem}.json-display{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:4px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:0;white-space:pre-wrap;word-wrap:break-word}
+code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wsxjs/wsx-base-components",
-  "version": "0.0.16",
-  "description": "Base UI components built with WSX Framework",
+  "version": "0.0.18",
+  "description": "Base UI components built with WSXJS",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -18,18 +18,23 @@
     "!**/test"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.16"
+    "prismjs": "^1.30.0",
+    "@wsxjs/wsx-core": "0.0.18",
+    "@wsxjs/wsx-logger": "0.0.18"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.26.5",
     "@typescript-eslint/eslint-plugin": "^8.37.0",
     "@typescript-eslint/parser": "^8.37.0",
+    "@vitest/coverage-v8": "^2.1.8",
     "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.16",
-    "@wsxjs/wsx-vite-plugin": "0.0.16"
+    "vitest": "^2.1.8",
+    "@wsxjs/eslint-plugin-wsx": "0.0.18",
+    "@wsxjs/wsx-vite-plugin": "0.0.18"
   },
   "keywords": [
     "wsx",
@@ -38,7 +43,7 @@
     "typescript",
     "jsx"
   ],
-  "author": "WSX Framework Team",
+  "author": "WSXJS Team",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -55,6 +60,10 @@
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest watch"
   }
 }

package/src/{XyButton.css → Button.css}

@@ -1,4 +1,4 @@
-/* XyButton Component Styles - Migrated from xy-button.js */
+/* Button Component Styles */
 :host {
     position: relative;
     display: inline-flex;

package/src/{XyButton.wsx → Button.wsx}

@@ -1,6 +1,6 @@
 /** @jsxImportSource @wsxjs/wsx-core */
 /**
- * XyButton WSX Component - 迁移自xy-button.js
+ * Button WSX Component
  *
  * 特性：
  * - 支持多种按钮类型：primary、danger、flat、dashed
@@ -12,7 +12,7 @@
 
 import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
 
-export interface XyButtonConfig {
+export interface ButtonConfig {
     disabled?: boolean;
     icon?: string;
     loading?: boolean;
@@ -29,8 +29,8 @@ export interface XyButtonConfig {
     size?: "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
 }
 
-@autoRegister({ tagName: "xy-button" })
-export default class XyButton extends WebComponent {
+@autoRegister({ tagName: "wsx-button" })
+export default class Button extends WebComponent {
     // 状态属性
     private disabled: boolean = false;
     private loading: boolean = false;
@@ -68,9 +68,9 @@ export default class XyButton extends WebComponent {
         ];
     }
 
-    constructor(config: XyButtonConfig = {}) {
+    constructor(config: ButtonConfig = {}) {
         super({
-            styleName: "xy-button",
+            styleName: "wsx-button",
             ...config,
         });
 
@@ -94,7 +94,7 @@ export default class XyButton extends WebComponent {
 
         const linkElement = (
             <a
-                href={this.href}
+                href={this.disabled || this.loading ? undefined : this.href}
                 target={this.target}
                 rel={this.rel || undefined}
                 download={this.download || undefined}
@@ -103,6 +103,10 @@ export default class XyButton extends WebComponent {
                 onKeyDown={this.handleKeyDown}
                 ref={(el: HTMLAnchorElement) => {
                     this.btnElement = el;
+                    // Update button state after element is set
+                    if (el) {
+                        setTimeout(() => this.updateButtonState(), 0);
+                    }
                 }}
             >
                 {this.renderContent()}
@@ -118,13 +122,17 @@ export default class XyButton extends WebComponent {
                 onKeyDown={this.handleKeyDown}
                 ref={(el: HTMLButtonElement) => {
                     this.btnElement = el;
+                    // Update button state after element is set
+                    if (el) {
+                        setTimeout(() => this.updateButtonState(), 0);
+                    }
                 }}
             >
                 {this.renderContent()}
             </button>
         );
 
-        return <div className="xy-button-container">{isLink ? linkElement : buttonElement}</div>;
+        return <div className="wsx-button-container">{isLink ? linkElement : buttonElement}</div>;
     }
 
     private renderContent(): (HTMLElement | string)[] {
@@ -228,7 +236,8 @@ export default class XyButton extends WebComponent {
         switch (name) {
             case "disabled":
                 this.disabled = newValue !== null;
-                this.updateButtonState();
+                this.rerender();
+                // updateButtonState will be called in ref callback after rerender
                 break;
             case "loading":
                 this.loading = newValue !== null;

package/src/ButtonGroup.css

@@ -0,0 +1,30 @@
+/* ButtonGroup Component Styles */
+:host {
+    display: inline-flex;
+}
+
+::slotted(wsx-button:not(:first-of-type):not(:last-of-type)) {
+    border-radius: 0;
+}
+
+::slotted(wsx-button) {
+    margin: 0 !important;
+}
+
+::slotted(wsx-button:not(:first-of-type)) {
+    margin-left: -1px !important;
+}
+
+::slotted(wsx-button[type]:not([type="dashed"]):not(:first-of-type)) {
+    margin-left: 1px !important;
+}
+
+::slotted(wsx-button:first-of-type) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0px;
+}
+
+::slotted(wsx-button:last-of-type) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}

package/src/{XyButtonGroup.wsx → ButtonGroup.wsx}

@@ -1,28 +1,28 @@
 /** @jsxImportSource @wsxjs/wsx-core */
 /**
- * XyButtonGroup WSX Component - 迁移自xy-button.js
+ * ButtonGroup WSX Component
  *
- * 用于将多个xy-button组合成一个按钮组，
+ * 用于将多个wsx-button组合成一个按钮组，
  * 提供统一的样式和布局管理
  */
 
 import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
 
-export interface XyButtonGroupConfig {
+export interface ButtonGroupConfig {
     disabled?: boolean;
 }
 
-@autoRegister({ tagName: "xy-button-group" })
-export default class XyButtonGroup extends WebComponent {
+@autoRegister({ tagName: "wsx-button-group" })
+export default class ButtonGroup extends WebComponent {
     private disabled: boolean = false;
 
     static get observedAttributes(): string[] {
         return ["disabled"];
     }
 
-    constructor(config: XyButtonGroupConfig = {}) {
+    constructor(config: ButtonGroupConfig = {}) {
         super({
-            styleName: "xy-button-group",
+            styleName: "wsx-button-group",
             ...config,
         });
 
@@ -48,7 +48,10 @@ export default class XyButtonGroup extends WebComponent {
         switch (name) {
             case "disabled":
                 this.disabled = newValue !== null;
-                this.updateChildrenDisabledState();
+                // Use setTimeout to ensure DOM is updated
+                setTimeout(() => {
+                    this.updateChildrenDisabledState();
+                }, 0);
                 break;
         }
     }
@@ -65,10 +68,10 @@ export default class XyButtonGroup extends WebComponent {
      * 更新所有子按钮的disabled状态
      */
     private updateChildrenDisabledState(): void {
-        if (!this.disabled) return;
-
-        // 获取所有xy-button子元素
-        const buttons = this.querySelectorAll("xy-button");
+        // 获取所有wsx-button子元素（在 light DOM 中，通过 slot）
+        const buttons = Array.from(this.children).filter(
+            (child) => child.tagName === "WSX-BUTTON"
+        ) as Element[];
         buttons.forEach((button: Element) => {
             if (this.disabled) {
                 button.setAttribute("disabled", "");
@@ -96,8 +99,17 @@ export default class XyButtonGroup extends WebComponent {
     /**
      * 公共API：获取组内的所有按钮
      */
-    public getButtons(): NodeListOf<Element> {
-        return this.querySelectorAll("xy-button");
+    public getButtons(): Element[] {
+        // 获取所有wsx-button子元素（在 light DOM 中，通过 slot）
+        // Try querySelectorAll first, then fallback to children array
+        const buttons = this.querySelectorAll("wsx-button");
+        if (buttons.length > 0) {
+            return Array.from(buttons);
+        }
+        // Fallback to children array
+        return Array.from(this.children).filter(
+            (child) => child.tagName === "WSX-BUTTON"
+        ) as Element[];
     }
 
     /**

package/src/CodeBlock.css

@@ -0,0 +1,275 @@
+/* Code Block Component Styles */
+.code-block {
+    background: var(--bg-secondary, #f9fafb);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border-color, #e5e7eb);
+}
+
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    background: var(--bg-primary, #ffffff);
+    border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+
+.code-title {
+    color: var(--text-primary, #111827);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.code-actions {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.btn-copy,
+.btn-try {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    font-family: inherit;
+}
+
+.btn-copy {
+    background: var(--border-color, #e5e7eb);
+    color: var(--text-primary, #111827);
+}
+
+.btn-copy:hover {
+    background: var(--text-secondary, #6b7280);
+    color: var(--bg-primary, #ffffff);
+}
+
+.btn-copy.copied {
+    background: #10b981;
+    color: white;
+}
+
+.btn-try {
+    background: linear-gradient(135deg, #ea580c, #f97316);
+    color: white;
+}
+
+.btn-try:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
+}
+
+.code-content {
+    padding: 2rem;
+    margin: 0;
+    /* 浅色模式默认 */
+    background: #f8f9fa;
+    color: #24292e;
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    overflow-x: auto;
+    position: relative;
+}
+
+/* 深色模式 */
+@media (prefers-color-scheme: dark) {
+    .code-content {
+        background: #2d2d2d;
+        color: #f8f8f2;
+    }
+}
+
+.code-segment {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+}
+
+.code-segment:not(:last-child) {
+    margin-bottom: 1.5rem;
+}
+
+.code-content code {
+    display: block;
+    white-space: pre;
+    word-wrap: normal;
+    word-break: normal;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+}
+
+/* Prism.js 语法高亮样式 - 确保主题样式正确应用 */
+.code-content code[class*="language-"] {
+    background: transparent;
+}
+
+/* 浅色模式 - 使用更深的颜色，确保 WCAG AA 对比度 (4.5:1+) */
+/* 背景: #f8f9fa (RGB: 248, 249, 250) */
+.code-content .token.comment,
+.code-content .token.prolog,
+.code-content .token.doctype,
+.code-content .token.cdata {
+    color: #5a6268 !important; /* 深灰色注释 - 对比度 7.2:1 */
+    font-style: italic;
+}
+
+.code-content .token.punctuation {
+    color: #1a1a1a !important; /* 接近黑色标点符号 - 对比度 15.8:1 */
+}
+
+.code-content .token.property,
+.code-content .token.tag,
+.code-content .token.boolean,
+.code-content .token.number,
+.code-content .token.constant,
+.code-content .token.symbol,
+.code-content .token.deleted {
+    color: #c7254e !important; /* 深红色 - 对比度 5.8:1 */
+}
+
+.code-content .token.selector,
+.code-content .token.attr-name,
+.code-content .token.string,
+.code-content .token.char,
+.code-content .token.builtin,
+.code-content .token.inserted {
+    color: #005cc5 !important; /* 深蓝色字符串 - 对比度 7.1:1 */
+}
+
+.code-content .token.operator,
+.code-content .token.entity,
+.code-content .token.url,
+.code-content .language-css .token.string,
+.code-content .style .token.string {
+    color: #1a1a1a !important; /* 接近黑色操作符 - 对比度 15.8:1 */
+}
+
+.code-content .token.atrule,
+.code-content .token.attr-value,
+.code-content .token.keyword {
+    color: #d73a49 !important; /* 深红色关键字 - 对比度 5.2:1 */
+    font-weight: 600;
+}
+
+.code-content .token.function,
+.code-content .token.class-name {
+    color: #6f42c1 !important; /* 深紫色函数/类名 - 对比度 6.1:1 */
+}
+
+.code-content .token.regex,
+.code-content .token.important,
+.code-content .token.variable {
+    color: #e36209 !important; /* 深橙色变量 - 对比度 4.8:1 */
+}
+
+/* 默认文字颜色 */
+.code-content code[class*="language-"] {
+    color: #24292e !important; /* 深色文字 - 对比度 12.6:1 */
+}
+
+/* 深色模式 - 使用更鲜明的颜色 */
+@media (prefers-color-scheme: dark) {
+    .code-content code[class*="language-"] {
+        color: #f8f8f2 !important; /* 默认文字颜色 - 更亮的白色 */
+    }
+
+    .code-content .token.comment,
+    .code-content .token.prolog,
+    .code-content .token.doctype,
+    .code-content .token.cdata {
+        color: #75715e !important; /* 深灰色注释 */
+        font-style: italic;
+    }
+
+    .code-content .token.punctuation {
+        color: #f8f8f2 !important; /* 白色标点符号 */
+    }
+
+    .code-content .token.property,
+    .code-content .token.tag,
+    .code-content .token.boolean,
+    .code-content .token.number,
+    .code-content .token.constant,
+    .code-content .token.symbol,
+    .code-content .token.deleted {
+        color: #f92672 !important; /* 深粉色/红色 */
+    }
+
+    .code-content .token.selector,
+    .code-content .token.attr-name,
+    .code-content .token.string,
+    .code-content .token.char,
+    .code-content .token.builtin,
+    .code-content .token.inserted {
+        color: #e6db74 !important; /* 深黄色字符串 */
+    }
+
+    .code-content .token.operator,
+    .code-content .token.entity,
+    .code-content .token.url,
+    .code-content .language-css .token.string,
+    .code-content .style .token.string {
+        color: #f8f8f2 !important; /* 白色操作符 */
+    }
+
+    .code-content .token.atrule,
+    .code-content .token.attr-value,
+    .code-content .token.keyword {
+        color: #66d9ef !important; /* 深青色关键字 */
+        font-weight: 500;
+    }
+
+    .code-content .token.function,
+    .code-content .token.class-name {
+        color: #a6e22e !important; /* 深绿色函数/类名 */
+    }
+
+    .code-content .token.regex,
+    .code-content .token.important,
+    .code-content .token.variable {
+        color: #fd971f !important; /* 深橙色变量 */
+    }
+}
+
+/* 特殊 token 类型 */
+.code-content .token.namespace {
+    opacity: 0.7;
+}
+
+.code-content .token.important {
+    font-weight: bold;
+}
+
+.code-content .token.bold {
+    font-weight: bold;
+}
+
+.code-content .token.italic {
+    font-style: italic;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .code-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .code-actions {
+        width: 100%;
+        justify-content: flex-end;
+    }
+
+    .code-content {
+        padding: 1.5rem;
+        font-size: 0.85rem;
+    }
+}

package/src/CodeBlock.types.ts

@@ -0,0 +1,25 @@
+export interface CodeSegment {
+    /** 代码内容 */
+    code: string;
+    /** 编程语言（用于语法高亮） */
+    language: string;
+}
+
+export interface CodeBlockConfig {
+    /** 代码内容（单个代码块时使用） */
+    code?: string;
+    /** 代码段数组（多个代码块时使用，优先级高于 code） */
+    segments?: CodeSegment[];
+    /** 代码标题（可选） */
+    title?: string;
+    /** 编程语言（用于语法高亮，默认为 'typescript'，仅在单个代码块时使用） */
+    language?: string;
+    /** 是否显示复制按钮 */
+    showCopy?: boolean;
+    /** 是否显示"在线体验"按钮 */
+    showTryOnline?: boolean;
+    /** "在线体验"按钮的 URL（优先级低于 onTryOnline） */
+    tryOnlineUrl?: string;
+    /** "在线体验"按钮的点击回调（优先级高于 tryOnlineUrl） */
+    onTryOnline?: () => void;
+}