@wsxjs/wsx-base-components 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-base-components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "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.20",
-    "@wsxjs/wsx-logger": "0.0.20"
+    "@wsxjs/wsx-core": "0.0.22",
+    "@wsxjs/wsx-logger": "0.0.22"
   },
   "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.20",
-    "@wsxjs/wsx-vite-plugin": "0.0.20"
+    "@wsxjs/eslint-plugin-wsx": "0.0.22",
+    "@wsxjs/wsx-vite-plugin": "0.0.22"
   },
   "keywords": [
     "wsx",

package/src/Button.wsx

@@ -215,6 +215,7 @@ export default class Button extends WebComponent {
      * 组件连接到DOM后的初始化
      */
     protected onConnected(): void {
+        super.onConnected?.();
         this.addEventListener("click", this.handleClick);
     }
 
@@ -222,6 +223,7 @@ export default class Button extends WebComponent {
      * 组件从DOM断开时的清理
      */
     protected onDisconnected(): void {
+        super.onDisconnected?.();
         this.removeEventListener("click", this.handleClick);
     }
 

package/src/ButtonGroup.wsx

@@ -60,6 +60,7 @@ export default class ButtonGroup extends WebComponent {
      * 组件连接到DOM后的初始化
      */
     protected onConnected(): void {
+        super.onConnected?.();
         // 初始化时设置子按钮的disabled状态
         this.updateChildrenDisabledState();
     }

package/src/CodeBlock.wsx

@@ -52,6 +52,7 @@ export default class CodeBlock extends LightComponent {
     private isHighlighting: boolean = false; // 防止重复高亮
 
     protected onRendered() {
+        super.onRendered?.();
         // 在渲染完成后应用语法高亮（防止重复高亮）
         if (!this.isHighlighting) {
             this.highlightCode();

package/src/ColorPicker.wsx

@@ -347,6 +347,7 @@ export default class ColorPicker extends WebComponent {
      * 组件连接到DOM后的初始化
      */
     protected onConnected(): void {
+        super.onConnected?.();
         // 绑定全局点击事件以关闭面板
         document.addEventListener("click", this.handleDocumentClick);
 
@@ -357,6 +358,7 @@ export default class ColorPicker extends WebComponent {
      * 组件从DOM断开时的清理
      */
     protected onDisconnected(): void {
+        super.onDisconnected?.();
         document.removeEventListener("click", this.handleDocumentClick);
 
         logger.info("ColorPicker disconnected from DOM");

package/src/Combobox.wsx

@@ -347,6 +347,7 @@ export default class Combobox extends WebComponent {
      * 组件断开连接时清理
      */
     protected onDisconnected(): void {
+        super.onDisconnected?.();
         this.detachOutsideClickHandler();
     }
 }

package/src/Dropdown.wsx

@@ -216,6 +216,7 @@ export default class Dropdown extends WebComponent {
      * 组件断开连接时清理
      */
     protected onDisconnected(): void {
+        super.onDisconnected?.();
         this.detachOutsideClickHandler();
     }
 }

package/src/LanguageSwitcher.wsx

@@ -6,8 +6,6 @@
  */
 import { WebComponent, autoRegister, state } from "@wsxjs/wsx-core";
 import { i18nInstance } from "@wsxjs/wsx-i18next";
-import styles from "./LanguageSwitcher.css?inline";
-
 /**
  * 语言选项接口
  */
@@ -18,7 +16,7 @@ export interface LanguageOption {
     name: string;
 }
 
-@autoRegister({ tagName: "language-switcher" })
+@autoRegister({ tagName: "wsx-language-switcher" })
 export default class LanguageSwitcher extends WebComponent {
     /** 支持的语言列表 */
     private languages: LanguageOption[] = [
@@ -41,13 +39,6 @@ export default class LanguageSwitcher extends WebComponent {
     private dropdownElement?: HTMLElement;
     private buttonElement?: HTMLElement;
 
-    constructor() {
-        super({
-            styles,
-            styleName: "language-switcher",
-        });
-    }
-
     render(): HTMLElement {
         const currentLang = this.languages.find((lang) => lang.code === this.currentLanguage);
         const displayName = currentLang?.name || this.currentLanguage.toUpperCase();
@@ -98,13 +89,9 @@ export default class LanguageSwitcher extends WebComponent {
      */
     private toggleDropdown = (): void => {
         this.isOpen = !this.isOpen;
-        this.rerender();
 
         if (this.isOpen) {
-            // 点击外部关闭下拉菜单
-            setTimeout(() => {
-                document.addEventListener("click", this.handleOutsideClick, true);
-            }, 0);
+            document.addEventListener("click", this.handleOutsideClick, true);
         }
     };
 
@@ -120,7 +107,6 @@ export default class LanguageSwitcher extends WebComponent {
             !this.buttonElement.contains(target)
         ) {
             this.isOpen = false;
-            this.rerender();
             document.removeEventListener("click", this.handleOutsideClick, true);
         }
     };
@@ -131,7 +117,6 @@ export default class LanguageSwitcher extends WebComponent {
     private selectLanguage = (languageCode: string): void => {
         if (languageCode === this.currentLanguage) {
             this.isOpen = false;
-            this.rerender();
             return;
         }
 
@@ -139,7 +124,6 @@ export default class LanguageSwitcher extends WebComponent {
         i18nInstance.changeLanguage(languageCode).then(() => {
             this.currentLanguage = languageCode;
             this.isOpen = false;
-            this.rerender();
 
             // 保存到 localStorage
             localStorage.setItem("wsx-language", languageCode);
@@ -149,7 +133,8 @@ export default class LanguageSwitcher extends WebComponent {
     /**
      * 组件连接时初始化
      */
-    protected onConnected(): void {
+    onConnected(): void {
+        super.onConnected?.();
         // 从 localStorage 或 i18next 获取当前语言
         const savedLanguage = localStorage.getItem("wsx-language");
         const i18nLanguage = i18nInstance.language || i18nInstance.options.fallbackLng || "en";
@@ -172,7 +157,8 @@ export default class LanguageSwitcher extends WebComponent {
     /**
      * 组件断开连接时清理
      */
-    protected onDisconnected(): void {
+    onDisconnected(): void {
+        super.onDisconnected?.();
         i18nInstance.off("languageChanged", this.handleLanguageChanged);
         document.removeEventListener("click", this.handleOutsideClick, true);
     }
@@ -184,7 +170,6 @@ export default class LanguageSwitcher extends WebComponent {
         const baseLanguage = lng.split("-")[0];
         if (baseLanguage !== this.currentLanguage) {
             this.currentLanguage = baseLanguage;
-            this.rerender();
         }
     };
 }

package/src/ResponsiveNav.wsx

@@ -82,7 +82,7 @@ export default class ResponsiveNav extends WebComponent {
                                 const isVisible = this.visibleItemIndices.includes(index);
                                 return (
                                     <wsx-link
-                                        key={index}
+                                        key={`nav-${index}`}
                                         ref={(el) => {
                                             if (el) {
                                                 this.navItemsElements[index] = el;
@@ -121,7 +121,7 @@ export default class ResponsiveNav extends WebComponent {
                                                         this.hiddenItemIndices[idx];
                                                     return (
                                                         <wsx-link
-                                                            key={originalIndex}
+                                                            key={`overflow-${originalIndex}`}
                                                             to={item.to}
                                                             class="nav-overflow-link"
                                                             active-class="nav-link-active"
@@ -374,6 +374,7 @@ export default class ResponsiveNav extends WebComponent {
      * 组件连接时初始化
      */
     protected onConnected(): void {
+        super.onConnected?.();
         // 如果配置未初始化，从属性读取
         if (!this.navigation?.items || this.navigation?.items.length === 0) {
             try {
@@ -431,6 +432,7 @@ export default class ResponsiveNav extends WebComponent {
      * 组件断开连接时清理
      */
     protected onDisconnected(): void {
+        super.onDisconnected?.();
         if (this.resizeHandler) {
             window.removeEventListener("resize", this.resizeHandler);
         }