@wsxjs/wsx-base-components 0.0.5

package/src/SvgDemo.wsx

@@ -0,0 +1,241 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+
+const logger = createLogger("SvgDemo");
+
+@autoRegister({ tagName: "svg-demo" })
+export default class SvgDemo extends WebComponent {
+    private animationId: number | null = null;
+    private rotationAngle = 0;
+
+    constructor() {
+        super();
+        logger.info("SvgDemo component initialized");
+    }
+
+    render() {
+        return (
+            <div style="padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;">
+                <h3 style="margin-top: 0; color: #333;">SVG Showcase</h3>
+
+                {/* Basic SVG shapes */}
+                <div style="margin-bottom: 20px;">
+                    <h4 style="margin: 10px 0; color: #666;">Basic Shapes</h4>
+                    <svg
+                        width="300"
+                        height="100"
+                        style="border: 1px solid #ddd; background: white;"
+                    >
+                        <circle
+                            cx="50"
+                            cy="50"
+                            r="30"
+                            fill="#e74c3c"
+                            stroke="#c0392b"
+                            strokeWidth="2"
+                        />
+                        <rect
+                            x="100"
+                            y="20"
+                            width="60"
+                            height="60"
+                            fill="#3498db"
+                            stroke="#2980b9"
+                            strokeWidth="2"
+                            rx="5"
+                        />
+                        <polygon
+                            points="200,20 230,80 170,80"
+                            fill="#2ecc71"
+                            stroke="#27ae60"
+                            strokeWidth="2"
+                        />
+                        <line
+                            x1="250"
+                            y1="20"
+                            x2="290"
+                            y2="80"
+                            stroke="#9b59b6"
+                            strokeWidth="3"
+                            strokeLinecap="round"
+                        />
+                    </svg>
+                </div>
+
+                {/* SVG with gradients */}
+                <div style="margin-bottom: 20px;">
+                    <h4 style="margin: 10px 0; color: #666;">Gradients & Effects</h4>
+                    <svg
+                        width="300"
+                        height="100"
+                        style="border: 1px solid #ddd; background: white;"
+                    >
+                        <defs>
+                            <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" stopColor="#3498db" />
+                                <stop offset="100%" stopColor="#9b59b6" />
+                            </linearGradient>
+                            <radialGradient id="redGradient" cx="50%" cy="50%" r="50%">
+                                <stop offset="0%" stopColor="#e74c3c" />
+                                <stop offset="100%" stopColor="#c0392b" />
+                            </radialGradient>
+                        </defs>
+                        <rect
+                            x="20"
+                            y="20"
+                            width="120"
+                            height="60"
+                            fill="url(#blueGradient)"
+                            rx="10"
+                        />
+                        <circle cx="200" cy="50" r="35" fill="url(#redGradient)" />
+                    </svg>
+                </div>
+
+                {/* Animated SVG */}
+                <div style="margin-bottom: 20px;">
+                    <h4 style="margin: 10px 0; color: #666;">Animation</h4>
+                    <svg
+                        width="300"
+                        height="100"
+                        style="border: 1px solid #ddd; background: white;"
+                    >
+                        <g transform={`translate(150, 50) rotate(${this.rotationAngle})`}>
+                            <polygon
+                                points="-30,0 0,-40 30,0 0,40"
+                                fill="#f39c12"
+                                stroke="#e67e22"
+                                strokeWidth="2"
+                            />
+                            <circle cx="0" cy="0" r="8" fill="#2c3e50" />
+                        </g>
+                    </svg>
+                    <div style="margin-top: 10px;">
+                        <button
+                            onClick={this.startAnimation}
+                            style="margin-right: 10px; padding: 5px 10px;"
+                        >
+                            Start Animation
+                        </button>
+                        <button onClick={this.stopAnimation} style="padding: 5px 10px;">
+                            Stop Animation
+                        </button>
+                    </div>
+                </div>
+
+                {/* Interactive SVG chart */}
+                <div style="margin-bottom: 20px;">
+                    <h4 style="margin: 10px 0; color: #666;">Interactive Chart</h4>
+                    {this.renderChart()}
+                </div>
+
+                {/* SVG Icons */}
+                <div>
+                    <h4 style="margin: 10px 0; color: #666;">Icon Components</h4>
+                    <div style="display: flex; gap: 15px; align-items: center;">
+                        <svg-icon name="star" size="32" color="#f39c12"></svg-icon>
+                        <svg-icon name="heart" size="32" color="#e74c3c"></svg-icon>
+                        <svg-icon name="check" size="32" color="#27ae60"></svg-icon>
+                        <svg-icon name="github" size="32" color="#333"></svg-icon>
+                        <svg-icon name="play" size="32" color="#3498db"></svg-icon>
+                        <svg-icon name="settings" size="32" color="#9b59b6"></svg-icon>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    private renderChart() {
+        const data = [30, 80, 45, 60, 20, 90, 55];
+        const maxValue = Math.max(...data);
+        const barWidth = 30;
+        const barSpacing = 40;
+        const chartHeight = 120;
+        const chartWidth = data.length * barSpacing + 40;
+
+        return (
+            <svg
+                width={chartWidth}
+                height={chartHeight + 40}
+                style="border: 1px solid #ddd; background: white;"
+            >
+                {/* Chart bars */}
+                {data.map((value, index) => {
+                    const barHeight = (value / maxValue) * chartHeight;
+                    const x = index * barSpacing + 20;
+                    const y = chartHeight - barHeight + 20;
+
+                    return (
+                        <g key={index}>
+                            <rect
+                                x={x}
+                                y={y}
+                                width={barWidth}
+                                height={barHeight}
+                                fill="#3498db"
+                                stroke="#2980b9"
+                                strokeWidth="1"
+                                onMouseEnter={(e) => this.showTooltip(e, value)}
+                                onMouseLeave={this.hideTooltip}
+                                style="cursor: pointer; transition: fill 0.2s;"
+                            />
+                            <text
+                                x={x + barWidth / 2}
+                                y={chartHeight + 35}
+                                textAnchor="middle"
+                                fontSize="12"
+                                fill="#666"
+                            >
+                                {index + 1}
+                            </text>
+                        </g>
+                    );
+                })}
+            </svg>
+        );
+    }
+
+    private showTooltip = (event: Event, value: number) => {
+        const rect = event.target as SVGRectElement;
+        rect.setAttribute("fill", "#e74c3c");
+
+        // You could create a proper tooltip here
+        logger.debug(`Tooltip value: ${value}`);
+    };
+
+    private hideTooltip = (event: Event) => {
+        const rect = event.target as SVGRectElement;
+        rect.setAttribute("fill", "#3498db");
+    };
+
+    private startAnimation = () => {
+        if (this.animationId) return;
+
+        const animate = () => {
+            this.rotationAngle += 2;
+            if (this.rotationAngle >= 360) {
+                this.rotationAngle = 0;
+            }
+            this.rerender();
+            this.animationId = requestAnimationFrame(animate);
+        };
+
+        this.animationId = requestAnimationFrame(animate);
+    };
+
+    private stopAnimation = () => {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    };
+
+    protected onConnected(): void {
+        logger.info("SvgDemo connected to DOM");
+    }
+
+    protected onDisconnected(): void {
+        logger.info("SvgDemo disconnected from DOM");
+        this.stopAnimation();
+    }
+}

package/src/SvgIcon.wsx

@@ -0,0 +1,88 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+
+const logger = createLogger("SvgIcon");
+
+@autoRegister({ tagName: "svg-icon" })
+export default class SvgIcon extends WebComponent {
+    constructor() {
+        super();
+        logger.info("SvgIcon component initialized");
+    }
+
+    render() {
+        const size = this.getAttribute("size") || "24";
+        const color = this.getAttribute("color") || "currentColor";
+        const name = this.getAttribute("name") || "star";
+
+        // Different icon paths based on name
+        const iconPaths = {
+            star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+            heart: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
+            check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+            close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+            github: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22",
+            play: "M8 5v14l11-7z",
+            settings:
+                "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z",
+        };
+
+        const path = iconPaths[name as keyof typeof iconPaths] || iconPaths.star;
+
+        return (
+            <svg
+                width={size}
+                height={size}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke={color}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="svg-icon"
+                onClick={this.handleClick}
+                style="cursor: pointer; transition: transform 0.2s ease; display: inline-block;"
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+            >
+                <path d={path} fill={color} />
+            </svg>
+        );
+    }
+
+    private handleClick = (event: Event) => {
+        logger.debug("SVG icon clicked", { name: this.getAttribute("name") });
+
+        // Dispatch custom event
+        this.dispatchEvent(
+            new CustomEvent("icon-click", {
+                detail: {
+                    name: this.getAttribute("name"),
+                    originalEvent: event,
+                },
+                bubbles: true,
+            })
+        );
+    };
+
+    private handleMouseEnter = (event: Event) => {
+        const svg = event.target as SVGElement;
+        svg.style.transform = "scale(1.1)";
+    };
+
+    private handleMouseLeave = (event: Event) => {
+        const svg = event.target as SVGElement;
+        svg.style.transform = "scale(1)";
+    };
+
+    static get observedAttributes() {
+        return ["name", "size", "color"];
+    }
+
+    protected onAttributeChanged(name: string, oldValue: string, newValue: string): void {
+        logger.debug(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
+        if (this.connected) {
+            this.rerender();
+        }
+    }
+}

package/src/ThemeSwitcher.css

@@ -0,0 +1,91 @@
+/* ThemeSwitcher Component Styles */
+
+:host {
+    display: block;
+}
+
+.theme-switcher-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.theme-switcher-btn {
+    width: var(--theme-switcher-width, 2.5rem);
+    height: var(--theme-switcher-height, 2.5rem);
+    padding: var(--theme-switcher-padding, 0.5rem);
+    border-radius: var(--theme-switcher-border-radius, 8px);
+    background: var(--theme-switcher-bg, #dc2626);
+    border: var(--theme-switcher-border, none);
+    color: var(--theme-switcher-color, white);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--theme-switcher-transition, 0.3s ease);
+    box-shadow: var(--theme-switcher-shadow, 0 4px 15px rgba(220, 38, 38, 0.4));
+    font-weight: var(--theme-switcher-font-weight, 600);
+    font-family: var(--theme-switcher-font-family, inherit);
+}
+
+.theme-switcher-btn:hover {
+    background: var(--theme-switcher-hover-bg, #b91c1c);
+    transform: var(--theme-switcher-hover-transform, translateY(-2px));
+    box-shadow: var(--theme-switcher-hover-shadow, 0 8px 25px rgba(220, 38, 38, 0.5));
+}
+
+.theme-switcher-btn:active {
+    transform: var(--theme-switcher-active-transform, translateY(0));
+}
+
+.theme-switcher-icon {
+    font-size: var(--theme-switcher-icon-size, 1rem);
+    line-height: 1;
+    transition: transform var(--theme-switcher-icon-transition, 0.3s ease);
+}
+
+.theme-switcher-btn:hover .theme-switcher-icon {
+    transform: var(--theme-switcher-icon-hover-transform, rotate(360deg));
+}
+
+/* Light theme specific styles */
+.theme-switcher-btn[data-theme="light"] {
+    background: var(--theme-switcher-light-bg, #dc2626);
+    color: var(--theme-switcher-light-color, white);
+}
+
+.theme-switcher-btn[data-theme="light"]:hover {
+    background: var(--theme-switcher-light-hover-bg, #b91c1c);
+}
+
+/* Dark theme specific styles */
+.theme-switcher-btn[data-theme="dark"] {
+    background: var(--theme-switcher-dark-bg, #dc2626);
+    color: var(--theme-switcher-dark-color, white);
+}
+
+.theme-switcher-btn[data-theme="dark"]:hover {
+    background: var(--theme-switcher-dark-hover-bg, #b91c1c);
+}
+
+/* Auto theme specific styles */
+.theme-switcher-btn[data-theme="auto"] {
+    background: var(--theme-switcher-auto-bg, linear-gradient(135deg, #dc2626, #b91c1c));
+    color: var(--theme-switcher-auto-color, white);
+}
+
+.theme-switcher-btn[data-theme="auto"]:hover {
+    background: var(--theme-switcher-auto-hover-bg, linear-gradient(135deg, #b91c1c, #991b1b));
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .theme-switcher-btn {
+        width: var(--theme-switcher-mobile-width, 2rem);
+        height: var(--theme-switcher-mobile-height, 2rem);
+    }
+
+    .theme-switcher-icon {
+        font-size: var(--theme-switcher-mobile-icon-size, 0.9rem);
+    }
+}

package/src/ThemeSwitcher.wsx

@@ -0,0 +1,97 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+
+import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./ThemeSwitcher.css?inline";
+
+@autoRegister({ tagName: "theme-switcher" })
+export default class ThemeSwitcher extends WebComponent {
+    private currentTheme: "light" | "dark" | "auto" = "auto";
+
+    constructor() {
+        super({
+            styles,
+            styleName: "theme-switcher",
+        });
+
+        this.initTheme();
+    }
+
+    render(): HTMLElement {
+        return (
+            <div class="theme-switcher-container">
+                <button
+                    class="theme-switcher-btn"
+                    data-theme={this.currentTheme}
+                    onClick={this.toggleTheme}
+                    title={`当前主题: ${this.getThemeLabel()}`}
+                >
+                    <span class="theme-switcher-icon">{this.getThemeIcon()}</span>
+                </button>
+            </div>
+        );
+    }
+
+    private getThemeIcon(): string {
+        // 根据当前实际应用的主题显示图标，而不是设置的主题
+        const html = document.documentElement;
+        const isDark = html.classList.contains("dark");
+
+        if (this.currentTheme === "auto") {
+            // 自动模式：根据系统主题显示对应图标
+            return isDark ? "🌙" : "☀️";
+        } else if (this.currentTheme === "light") {
+            return "☀️";
+        } else {
+            return "🌙";
+        }
+    }
+
+    private getThemeLabel(): string {
+        const labels = {
+            light: "浅色",
+            dark: "深色",
+            auto: "自动",
+        };
+
+        return labels[this.currentTheme];
+    }
+
+    private toggleTheme = (): void => {
+        const themes: ("light" | "dark" | "auto")[] = ["auto", "light", "dark"];
+        const currentIndex = themes.indexOf(this.currentTheme);
+        const nextIndex = (currentIndex + 1) % themes.length;
+        this.setTheme(themes[nextIndex]);
+    };
+
+    private setTheme(theme: "light" | "dark" | "auto"): void {
+        this.currentTheme = theme;
+        const html = document.documentElement;
+
+        if (theme === "auto") {
+            html.removeAttribute("class");
+            this.checkSystemTheme();
+        } else {
+            html.className = theme;
+        }
+
+        localStorage.setItem("wsx-theme", theme);
+        this.rerender();
+    }
+
+    private checkSystemTheme(): void {
+        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.className = isDark ? "dark" : "";
+    }
+
+    private initTheme(): void {
+        const savedTheme =
+            (localStorage.getItem("wsx-theme") as "light" | "dark" | "auto") || "auto";
+        this.setTheme(savedTheme);
+
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+            if (this.currentTheme === "auto") {
+                document.documentElement.className = e.matches ? "dark" : "";
+            }
+        });
+    }
+}