@wsxjs/wsx-base-components 0.0.16 → 0.0.18

package/src/Dropdown.wsx

@@ -0,0 +1,221 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * Dropdown Component
+ * 通用下拉菜单组件，用于构建各种下拉选择器
+ */
+import { WebComponent, autoRegister, state } from "@wsxjs/wsx-core";
+import styles from "./Dropdown.css?inline";
+import type { DropdownOption, DropdownConfig } from "./Dropdown.types";
+export type { DropdownOption, DropdownConfig };
+
+@autoRegister({ tagName: "wsx-dropdown" })
+export default class Dropdown extends WebComponent {
+    /** 选项列表 */
+    private options: DropdownOption[] = [];
+    /** 当前选中的值 */
+    @state private selectedValue = "";
+    /** 下拉菜单是否打开 */
+    @state private isOpen: boolean = false;
+    /** 配置选项 */
+    private config: DropdownConfig = {};
+
+    /** 元素引用 */
+    private buttonElement?: HTMLElement;
+    private dropdownElement?: HTMLElement;
+    private outsideClickHandler?: (event: Event) => void;
+
+    constructor(config: DropdownConfig = {}) {
+        super({
+            styles,
+            styleName: "wsx-dropdown",
+        });
+        this.config = {
+            placeholder: "Select...",
+            align: "left",
+            position: "bottom",
+            trigger: "click",
+            ...config,
+        };
+    }
+
+    /**
+     * 设置选项列表
+     */
+    public setOptions(options: DropdownOption[]): void {
+        this.options = options;
+        this.rerender();
+    }
+
+    /**
+     * 设置选中的值
+     */
+    public setValue(value: string): void {
+        this.selectedValue = value;
+        this.rerender();
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { value },
+                bubbles: true,
+            })
+        );
+    }
+
+    /**
+     * 获取选中的值
+     */
+    public getValue(): string | undefined {
+        return this.selectedValue || undefined;
+    }
+
+    render(): HTMLElement {
+        const selectedOption = this.options.find(
+            (opt) => opt.value === this.selectedValue && this.selectedValue !== ""
+        );
+        const displayText = selectedOption?.label || this.config.placeholder || "Select...";
+
+        return (
+            <div class="dropdown-container">
+                <button
+                    ref={(el) => (this.buttonElement = el)}
+                    class={`dropdown-button ${this.isOpen ? "open" : ""} ${
+                        this.config.disabled ? "disabled" : ""
+                    }`}
+                    onClick={this.config.trigger === "click" ? this.toggleDropdown : undefined}
+                    onMouseEnter={this.config.trigger === "hover" ? this.openDropdown : undefined}
+                    onMouseLeave={this.config.trigger === "hover" ? this.closeDropdown : undefined}
+                    disabled={this.config.disabled}
+                    aria-expanded={this.isOpen}
+                    aria-haspopup="listbox"
+                >
+                    <span class="dropdown-text">{displayText}</span>
+                    <span class="dropdown-arrow">{this.isOpen ? "▲" : "▼"}</span>
+                </button>
+
+                {this.isOpen && (
+                    <div
+                        ref={(el) => (this.dropdownElement = el)}
+                        class={`dropdown-menu dropdown-${this.config.position} dropdown-${this.config.align}`}
+                        role="listbox"
+                        onMouseEnter={
+                            this.config.trigger === "hover" ? this.openDropdown : undefined
+                        }
+                        onMouseLeave={
+                            this.config.trigger === "hover" ? this.closeDropdown : undefined
+                        }
+                    >
+                        {this.options.length === 0 ? (
+                            <div class="dropdown-empty">No options</div>
+                        ) : (
+                            this.options.map((option) => (
+                                <button
+                                    key={option.value}
+                                    class={`dropdown-option ${
+                                        option.value === this.selectedValue &&
+                                        this.selectedValue !== ""
+                                            ? "selected"
+                                            : ""
+                                    } ${option.disabled ? "disabled" : ""}`}
+                                    onClick={() =>
+                                        !option.disabled && this.selectOption(option.value)
+                                    }
+                                    role="option"
+                                    aria-selected={
+                                        option.value === this.selectedValue &&
+                                        this.selectedValue !== ""
+                                    }
+                                    disabled={option.disabled}
+                                >
+                                    {option.render ? option.render() : <span>{option.label}</span>}
+                                </button>
+                            ))
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    /**
+     * 切换下拉菜单
+     */
+    private toggleDropdown = (): void => {
+        if (this.config.disabled) return;
+        this.isOpen = !this.isOpen;
+        this.rerender();
+
+        if (this.isOpen) {
+            setTimeout(() => {
+                this.attachOutsideClickHandler();
+            }, 0);
+        } else {
+            this.detachOutsideClickHandler();
+        }
+    };
+
+    /**
+     * 打开下拉菜单
+     */
+    private openDropdown = (): void => {
+        if (this.config.disabled || this.isOpen) return;
+        this.isOpen = true;
+        this.rerender();
+    };
+
+    /**
+     * 关闭下拉菜单
+     */
+    private closeDropdown = (): void => {
+        if (!this.isOpen) return;
+        this.isOpen = false;
+        this.rerender();
+        this.detachOutsideClickHandler();
+    };
+
+    /**
+     * 选择选项
+     */
+    private selectOption = (value: string): void => {
+        this.setValue(value);
+        if (this.config.trigger === "click") {
+            this.closeDropdown();
+        }
+    };
+
+    /**
+     * 附加外部点击处理器
+     */
+    private attachOutsideClickHandler = (): void => {
+        if (this.config.trigger === "hover") return;
+
+        this.outsideClickHandler = (event: Event) => {
+            const target = event.target as Node;
+            if (
+                this.dropdownElement &&
+                this.buttonElement &&
+                !this.dropdownElement.contains(target) &&
+                !this.buttonElement.contains(target)
+            ) {
+                this.closeDropdown();
+            }
+        };
+
+        document.addEventListener("click", this.outsideClickHandler, true);
+    };
+
+    /**
+     * 移除外部点击处理器
+     */
+    private detachOutsideClickHandler = (): void => {
+        if (this.outsideClickHandler) {
+            document.removeEventListener("click", this.outsideClickHandler, true);
+            this.outsideClickHandler = undefined;
+        }
+    };
+
+    /**
+     * 组件断开连接时清理
+     */
+    protected onDisconnected(): void {
+        this.detachOutsideClickHandler();
+    }
+}

package/src/LanguageSwitcher.css

@@ -0,0 +1,148 @@
+/* LanguageSwitcher Component Styles */
+
+:host {
+    display: block;
+    position: relative;
+}
+
+.language-switcher-container {
+    position: relative;
+    display: inline-block;
+}
+
+.language-switcher-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--language-switcher-bg, rgba(255, 255, 255, 0.1));
+    border: 1px solid var(--language-switcher-border, rgba(255, 255, 255, 0.2));
+    border-radius: var(--language-switcher-border-radius, 0.5rem);
+    color: var(--language-switcher-color, currentColor);
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    min-width: 100px;
+}
+
+.language-switcher-btn:hover {
+    background: var(--language-switcher-hover-bg, rgba(255, 255, 255, 0.15));
+    border-color: var(--language-switcher-hover-border, rgba(255, 255, 255, 0.3));
+}
+
+.language-switcher-btn:focus {
+    outline: 2px solid var(--language-switcher-focus-color, var(--focus-color, #dc2626));
+    outline-offset: 2px;
+}
+
+.language-switcher-icon {
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.language-switcher-text {
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.language-switcher-arrow {
+    font-size: 0.625rem;
+    opacity: 0.7;
+    transition: transform 0.2s ease;
+}
+
+.language-switcher-dropdown {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    right: 0;
+    min-width: 160px;
+    max-height: 300px;
+    overflow-y: auto;
+    background: var(--language-switcher-dropdown-bg, #ffffff);
+    border: 1px solid var(--language-switcher-dropdown-border, #e5e7eb);
+    border-radius: var(--language-switcher-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);
+    z-index: 1000;
+    padding: 0.25rem;
+    margin: 0;
+}
+
+[data-theme="dark"] .language-switcher-dropdown {
+    background: var(--language-switcher-dropdown-bg-dark, #1f2937);
+    border-color: var(--language-switcher-dropdown-border-dark, #374151);
+}
+
+.language-switcher-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    border-radius: 0.375rem;
+    color: var(--language-switcher-option-color, #1f2937);
+    cursor: pointer;
+    font-size: 0.875rem;
+    text-align: left;
+    transition: background-color 0.15s ease;
+}
+
+[data-theme="dark"] .language-switcher-option {
+    color: var(--language-switcher-option-color-dark, #f3f4f6);
+}
+
+.language-switcher-option:hover {
+    background: var(--language-switcher-option-hover-bg, #f3f4f6);
+}
+
+[data-theme="dark"] .language-switcher-option:hover {
+    background: var(--language-switcher-option-hover-bg-dark, #374151);
+}
+
+.language-switcher-option.active {
+    background: var(--language-switcher-option-active-bg, #dc2626);
+    color: var(--language-switcher-option-active-color, #ffffff);
+    font-weight: 600;
+}
+
+.language-switcher-option.active:hover {
+    background: var(--language-switcher-option-active-hover-bg, #b91c1c);
+}
+
+.language-name {
+    flex: 1;
+}
+
+.language-code {
+    font-size: 0.75rem;
+    opacity: 0.7;
+    margin-left: 0.5rem;
+    font-weight: 500;
+}
+
+.language-switcher-option.active .language-code {
+    opacity: 0.9;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .language-switcher-btn {
+        min-width: 80px;
+        padding: 0.375rem 0.5rem;
+        font-size: 0.8125rem;
+    }
+
+    .language-switcher-text {
+        display: none;
+    }
+
+    .language-switcher-dropdown {
+        right: 0;
+        min-width: 140px;
+    }
+}

package/src/LanguageSwitcher.wsx

@@ -0,0 +1,190 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * LanguageSwitcher Component
+ * 语言切换器组件，用于切换 i18next 的语言
+ * 不使用国旗图标，使用语言名称显示
+ */
+import { WebComponent, autoRegister, state } from "@wsxjs/wsx-core";
+import { i18nInstance } from "@wsxjs/wsx-i18next";
+import styles from "./LanguageSwitcher.css?inline";
+
+/**
+ * 语言选项接口
+ */
+export interface LanguageOption {
+    /** 语言代码（如 'en', 'zh'） */
+    code: string;
+    /** 语言显示名称（如 'English', '中文'） */
+    name: string;
+}
+
+@autoRegister({ tagName: "language-switcher" })
+export default class LanguageSwitcher extends WebComponent {
+    /** 支持的语言列表 */
+    private languages: LanguageOption[] = [
+        { code: "en", name: "English" },
+        { code: "zh", name: "中文" },
+        { code: "es", name: "Español" },
+        { code: "fr", name: "Français" },
+        { code: "de", name: "Deutsch" },
+        { code: "ja", name: "日本語" },
+        { code: "ko", name: "한국어" },
+    ];
+
+    /** 当前选中的语言代码 */
+    @state private currentLanguage: string = "en";
+
+    /** 下拉菜单是否打开 */
+    @state private isOpen: boolean = false;
+
+    /** 下拉菜单元素引用 */
+    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();
+
+        return (
+            <div class="language-switcher-container">
+                <button
+                    ref={(el) => (this.buttonElement = el)}
+                    class="language-switcher-btn"
+                    onClick={this.toggleDropdown}
+                    aria-label={`Current language: ${displayName}`}
+                    aria-expanded={this.isOpen}
+                    aria-haspopup="listbox"
+                >
+                    <span class="language-switcher-icon">🌐</span>
+                    <span class="language-switcher-text">{displayName}</span>
+                    <span class="language-switcher-arrow">{this.isOpen ? "▲" : "▼"}</span>
+                </button>
+
+                {this.isOpen && (
+                    <div
+                        ref={(el) => (this.dropdownElement = el)}
+                        class="language-switcher-dropdown"
+                        role="listbox"
+                    >
+                        {this.languages.map((lang) => (
+                            <button
+                                key={lang.code}
+                                class={`language-switcher-option ${
+                                    lang.code === this.currentLanguage ? "active" : ""
+                                }`}
+                                onClick={() => this.selectLanguage(lang.code)}
+                                role="option"
+                                aria-selected={lang.code === this.currentLanguage}
+                            >
+                                <span class="language-name">{lang.name}</span>
+                                <span class="language-code">{lang.code.toUpperCase()}</span>
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    /**
+     * 切换下拉菜单
+     */
+    private toggleDropdown = (): void => {
+        this.isOpen = !this.isOpen;
+        this.rerender();
+
+        if (this.isOpen) {
+            // 点击外部关闭下拉菜单
+            setTimeout(() => {
+                document.addEventListener("click", this.handleOutsideClick, true);
+            }, 0);
+        }
+    };
+
+    /**
+     * 处理点击外部区域
+     */
+    private handleOutsideClick = (event: Event): void => {
+        const target = event.target as Node;
+        if (
+            this.dropdownElement &&
+            this.buttonElement &&
+            !this.dropdownElement.contains(target) &&
+            !this.buttonElement.contains(target)
+        ) {
+            this.isOpen = false;
+            this.rerender();
+            document.removeEventListener("click", this.handleOutsideClick, true);
+        }
+    };
+
+    /**
+     * 选择语言
+     */
+    private selectLanguage = (languageCode: string): void => {
+        if (languageCode === this.currentLanguage) {
+            this.isOpen = false;
+            this.rerender();
+            return;
+        }
+
+        // 更改 i18next 语言
+        i18nInstance.changeLanguage(languageCode).then(() => {
+            this.currentLanguage = languageCode;
+            this.isOpen = false;
+            this.rerender();
+
+            // 保存到 localStorage
+            localStorage.setItem("wsx-language", languageCode);
+        });
+    };
+
+    /**
+     * 组件连接时初始化
+     */
+    protected onConnected(): void {
+        // 从 localStorage 或 i18next 获取当前语言
+        const savedLanguage = localStorage.getItem("wsx-language");
+        const i18nLanguage = i18nInstance.language || i18nInstance.options.fallbackLng || "en";
+
+        // 获取基础语言代码（处理 'en-US' -> 'en' 的情况）
+        const baseLanguage = (savedLanguage || i18nLanguage).split("-")[0];
+
+        if (baseLanguage !== this.currentLanguage) {
+            this.currentLanguage = baseLanguage;
+            // 如果 localStorage 中的语言与 i18next 不一致，更新 i18next
+            if (savedLanguage && savedLanguage !== i18nLanguage) {
+                i18nInstance.changeLanguage(savedLanguage);
+            }
+        }
+
+        // 监听 i18next 语言变化事件
+        i18nInstance.on("languageChanged", this.handleLanguageChanged);
+    }
+
+    /**
+     * 组件断开连接时清理
+     */
+    protected onDisconnected(): void {
+        i18nInstance.off("languageChanged", this.handleLanguageChanged);
+        document.removeEventListener("click", this.handleOutsideClick, true);
+    }
+
+    /**
+     * 处理 i18next 语言变化事件
+     */
+    private handleLanguageChanged = (lng: string): void => {
+        const baseLanguage = lng.split("-")[0];
+        if (baseLanguage !== this.currentLanguage) {
+            this.currentLanguage = baseLanguage;
+            this.rerender();
+        }
+    };
+}