@wsxjs/wsx-base-components 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-base-components",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Base UI components built with WSXJS",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "prismjs": "^1.30.0",
-    "@wsxjs/wsx-core": "0.0.18",
-    "@wsxjs/wsx-logger": "0.0.18"
+    "@wsxjs/wsx-core": "0.0.20",
+    "@wsxjs/wsx-logger": "0.0.20"
   },
   "devDependencies": {
     "@types/prismjs": "^1.26.5",
@@ -33,8 +33,8 @@
     "typescript": "^5.0.0",
     "vite": "^5.4.19",
     "vitest": "^2.1.8",
-    "@wsxjs/eslint-plugin-wsx": "0.0.18",
-    "@wsxjs/wsx-vite-plugin": "0.0.18"
+    "@wsxjs/eslint-plugin-wsx": "0.0.20",
+    "@wsxjs/wsx-vite-plugin": "0.0.20"
   },
   "keywords": [
     "wsx",

package/src/CodeBlock.wsx

@@ -5,7 +5,7 @@
  */
 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 核心
@@ -32,7 +32,7 @@ import "prismjs/components/prism-cpp"; // 依赖 c
 // 依赖其他语言的语言（必须在依赖之后）
 import "prismjs/components/prism-tsx"; // 依赖 typescript 和 jsx
 
-@autoRegister({ tagName: "code-block" })
+@autoRegister({ tagName: "wsx-code-block" })
 export default class CodeBlock extends LightComponent {
     static get observedAttributes(): string[] {
         return ["code", "title", "language", "show-copy", "show-try-online", "try-online-url"];
@@ -51,20 +51,6 @@ export default class CodeBlock extends LightComponent {
     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) {
@@ -72,40 +58,6 @@ export default class CodeBlock extends LightComponent {
         }
     }
 
-    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;
-        }
-    }
-
     /**
      * 通过方法设置配置（用于编程式使用）
      */

package/src/ResponsiveNav.wsx

@@ -16,7 +16,7 @@ export type { NavItem, ResponsiveNavConfig };
 
 @autoRegister({ tagName: "wsx-responsive-nav" })
 export default class ResponsiveNav extends WebComponent {
-    private navConfig: ResponsiveNavConfig = { items: [] };
+    @state private navigation: ResponsiveNavConfig = { items: [] };
     /** 移动端菜单是否打开 */
     @state private isMobileMenuOpen: boolean = false;
     /** 可见的导航项索引 */
@@ -41,7 +41,7 @@ export default class ResponsiveNav extends WebComponent {
         });
         // 如果通过构造函数传递配置，使用它；否则在 onConnected 时从属性读取
         if (config) {
-            this.navConfig = {
+            this.navigation = {
                 mobileBreakpoint: 768,
                 autoOverflow: true,
                 ...config,
@@ -52,11 +52,11 @@ export default class ResponsiveNav extends WebComponent {
 
     render(): HTMLElement {
         // 确保配置已初始化
-        if (!this.navConfig.items || this.navConfig.items.length === 0) {
+        if (!this.navigation?.items || this.navigation?.items.length === 0) {
             return <nav class="responsive-nav"></nav>;
         }
 
-        const hiddenItems = this.hiddenItemIndices.map((index) => this.navConfig.items[index]);
+        const hiddenItems = this.hiddenItemIndices.map((index) => this.navigation.items[index]);
 
         return (
             <nav class="responsive-nav">
@@ -64,13 +64,13 @@ export default class ResponsiveNav extends WebComponent {
                     {/* 品牌 */}
                     <div class="nav-brand">
                         <slot name="brand-icon">
-                            {this.navConfig.brandIcon &&
-                                typeof this.navConfig.brandIcon === "string" && (
-                                    <span class="nav-brand-icon">{this.navConfig.brandIcon}</span>
+                            {this.navigation.brandIcon &&
+                                typeof this.navigation.brandIcon === "string" && (
+                                    <span class="nav-brand-icon">{this.navigation.brandIcon}</span>
                                 )}
                         </slot>
-                        {this.navConfig.brand && (
-                            <span class="nav-brand-text">{this.navConfig.brand}</span>
+                        {this.navigation.brand && (
+                            <span class="nav-brand-text">{this.navigation.brand}</span>
                         )}
                     </div>
 
@@ -78,7 +78,7 @@ export default class ResponsiveNav extends WebComponent {
                     {!this.isMobile && (
                         <div ref={(el) => (this.navMenuElement = el)} class="nav-menu">
                             {/* 渲染所有项，但隐藏不在 visibleItemIndices 中的项 */}
-                            {this.navConfig.items.map((item, index) => {
+                            {this.navigation.items.map((item, index) => {
                                 const isVisible = this.visibleItemIndices.includes(index);
                                 return (
                                     <wsx-link
@@ -104,7 +104,7 @@ export default class ResponsiveNav extends WebComponent {
                             })}
 
                             {/* Overflow 菜单 */}
-                            {this.navConfig.autoOverflow &&
+                            {this.navigation.autoOverflow &&
                                 hiddenItems.length > 0 &&
                                 !this.isMobile && (
                                     <div class="nav-overflow">
@@ -140,9 +140,9 @@ export default class ResponsiveNav extends WebComponent {
                     )}
 
                     {/* 右侧操作项（始终显示，包括移动端） */}
-                    {this.navConfig.actionTags && (
+                    {this.navigation.actionTags && (
                         <div class="nav-actions">
-                            {this.navConfig.actionTags.map((tag, index) => {
+                            {this.navigation.actionTags.map((tag, index) => {
                                 // 使用动态标签名创建元素
                                 const TagName = tag as keyof HTMLElementTagNameMap;
                                 return (
@@ -173,7 +173,7 @@ export default class ResponsiveNav extends WebComponent {
                 {/* 移动端菜单 */}
                 {this.isMobile && (
                     <div class={`nav-mobile-menu ${this.isMobileMenuOpen ? "open" : ""}`}>
-                        {this.navConfig.items
+                        {this.navigation.items
                             .filter((item) => !item.hideOnMobile)
                             .map((item, index) => (
                                 <wsx-link
@@ -258,10 +258,10 @@ export default class ResponsiveNav extends WebComponent {
      * 使用 OverflowDetector 来最大化可见项数量
      */
     private updateVisibleItems = (): void => {
-        if (!this.navConfig.autoOverflow || this.isMobile || !this.navMenuElement) {
+        if (!this.navigation.autoOverflow || this.isMobile || !this.navMenuElement) {
             // 如果不是移动端且 autoOverflow 关闭，显示所有项
             if (!this.isMobile) {
-                const allIndices = this.navConfig.items.map((_, index) => index);
+                const allIndices = this.navigation.items.map((_, index) => index);
                 if (
                     JSON.stringify(allIndices.sort()) !==
                     JSON.stringify(this.visibleItemIndices.sort())
@@ -277,7 +277,7 @@ export default class ResponsiveNav extends WebComponent {
         // 确保所有导航项元素都已获取
         // 先渲染所有项（隐藏的项也需要渲染以获取宽度）
         const allItems: HTMLElement[] = [];
-        for (let i = 0; i < this.navConfig.items.length; i++) {
+        for (let i = 0; i < this.navigation.items.length; i++) {
             // 尝试从已渲染的元素中获取
             let itemElement = this.navItemsElements[i];
             if (!itemElement) {
@@ -296,7 +296,7 @@ export default class ResponsiveNav extends WebComponent {
                 // 如果元素还不存在，创建一个临时元素来测量宽度
                 // 这通常发生在首次渲染时
                 const tempElement = document.createElement("wsx-link");
-                tempElement.textContent = this.navConfig.items[i].label;
+                tempElement.textContent = this.navigation.items[i].label;
                 tempElement.style.visibility = "hidden";
                 tempElement.style.position = "absolute";
                 document.body.appendChild(tempElement);
@@ -363,7 +363,7 @@ export default class ResponsiveNav extends WebComponent {
      * 检查是否为移动端
      */
     private checkMobile = (): void => {
-        const isMobile = window.innerWidth <= (this.navConfig.mobileBreakpoint || 768);
+        const isMobile = window.innerWidth <= (this.navigation?.mobileBreakpoint || 768);
         if (isMobile !== this.isMobile) {
             this.isMobile = isMobile;
             this.rerender();
@@ -375,21 +375,12 @@ export default class ResponsiveNav extends WebComponent {
      */
     protected onConnected(): void {
         // 如果配置未初始化，从属性读取
-        if (!this.navConfig.items || this.navConfig.items.length === 0) {
-            const configAttr = this.getAttribute("config");
-            if (configAttr) {
-                try {
-                    const parsedConfig = JSON.parse(configAttr) as ResponsiveNavConfig;
-                    this.navConfig = {
-                        mobileBreakpoint: 768,
-                        autoOverflow: true,
-                        ...parsedConfig,
-                    };
-                    this.visibleItemIndices = parsedConfig.items.map((_, index) => index);
-                    this.rerender();
-                } catch (error) {
-                    console.error("Failed to parse ResponsiveNav config:", error);
-                }
+        if (!this.navigation?.items || this.navigation?.items.length === 0) {
+            try {
+                this.visibleItemIndices = this.navigation.items.map((_, index) => index);
+                this.rerender();
+            } catch (error) {
+                console.error("Failed to parse ResponsiveNav config:", error);
             }
         }
 
@@ -401,7 +392,7 @@ export default class ResponsiveNav extends WebComponent {
             if (attempts > 10) return; // 最多尝试10次
             setTimeout(() => {
                 if (this.navMenuElement) {
-                    const hasAllElements = this.navConfig.items.every(
+                    const hasAllElements = this.navigation.items.every(
                         (_, index) => this.navItemsElements[index]
                     );
                     if (hasAllElements || attempts > 5) {

package/src/SvgIcon.wsx

@@ -1,19 +1,19 @@
 /** @jsxImportSource @wsxjs/wsx-core */
-import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
+import { WebComponent, state, autoRegister } from "@wsxjs/wsx-core";
 import { createLogger } from "@wsxjs/wsx-logger";
 
 const logger = createLogger("SvgIcon");
 
 @autoRegister({ tagName: "svg-icon" })
 export default class SvgIcon extends WebComponent {
-    constructor() {
-        super();
-    }
+    @state private size: number = 24;
+    @state private color: string = "currentColor";
+    @state private name: string = "star";
 
     render() {
-        const size = this.getAttribute("size") || "24";
-        const color = this.getAttribute("color") || "currentColor";
-        const name = this.getAttribute("name") || "star";
+        const size = this.size || "24";
+        const color = this.color || "currentColor";
+        const name = this.name || "star";
 
         // Different icon paths based on name
         const iconPaths = {
@@ -51,13 +51,13 @@ export default class SvgIcon extends WebComponent {
     }
 
     private handleClick = (event: Event) => {
-        logger.debug("SVG icon clicked", { name: this.getAttribute("name") });
+        logger.debug("SVG icon clicked", { name: this.name });
 
         // Dispatch custom event
         this.dispatchEvent(
             new CustomEvent("icon-click", {
                 detail: {
-                    name: this.getAttribute("name"),
+                    name: this.name,
                     originalEvent: event,
                 },
                 bubbles: true,