@wsxjs/wsx-base-components 0.0.16 → 0.0.18

package/src/UserProfile.wsx

@@ -1,247 +0,0 @@
-/** @jsxImportSource @wsxjs/wsx-core */
-/**
- * UserProfile Component - WebComponent with @state object support
- *
- * Demonstrates:
- * - Using @state decorator with objects in WebComponent
- * - Object property updates trigger automatic rerender
- * - Object replacement (entire object replacement)
- * - Nested object updates
- * - Shadow DOM styling
- */
-
-import { WebComponent, state, autoRegister, createLogger } from "@wsxjs/wsx-core";
-import "./UserProfile.css";
-
-const logger = createLogger("UserProfile");
-
-interface UserPreferences {
-    theme: "light" | "dark";
-    language: string;
-    notifications: boolean;
-}
-
-interface UserProfileData {
-    name: string;
-    email: string;
-    age: number;
-    preferences: UserPreferences;
-    lastLogin: number;
-}
-
-@autoRegister({ tagName: "user-profile" })
-export default class UserProfile extends WebComponent {
-    // @state decorator with object - automatically reactive
-    @state private profile: UserProfileData = {
-        name: "John Doe",
-        email: "john@example.com",
-        age: 30,
-        preferences: {
-            theme: "light",
-            language: "en",
-            notifications: true,
-        },
-        lastLogin: Date.now(),
-    };
-    constructor() {
-        super();
-        logger.info("UserProfile initialized");
-    }
-
-    render() {
-        return (
-            <div class="user-profile">
-                <div class="profile-header">
-                    <h2>👤 User Profile (WebComponent)</h2>
-                    <p class="subtitle">Demonstrates @state decorator with objects</p>
-                </div>
-
-                <div class="profile-content">
-                    <div class="profile-section">
-                        <h3>Basic Information</h3>
-                        <div class="form-group">
-                            <label>Name:</label>
-                            <input
-                                type="text"
-                                value={this.profile.name}
-                                onInput={this.handleNameChange}
-                                onBlur={this.handleNameBlur}
-                                class="input-field"
-                            />
-                        </div>
-                        <div class="form-group">
-                            <label>Email:</label>
-                            <input
-                                type="email"
-                                value={this.profile.email}
-                                onInput={this.handleEmailChange}
-                                onBlur={this.handleEmailBlur}
-                                class="input-field"
-                            />
-                        </div>
-                        <div class="form-group">
-                            <label>Age:</label>
-                            <input
-                                type="number"
-                                value={this.profile.age.toString()}
-                                onInput={this.handleAgeChange}
-                                onBlur={this.handleAgeBlur}
-                                class="input-field"
-                            />
-                        </div>
-                    </div>
-
-                    <div class="profile-section">
-                        <h3>Preferences</h3>
-                        <div class="form-group">
-                            <label>Theme:</label>
-                            <select
-                                value={this.profile.preferences.theme}
-                                onChange={this.handleThemeChange}
-                                class="input-field"
-                            >
-                                <option value="light">Light</option>
-                                <option value="dark">Dark</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Language:</label>
-                            <select
-                                value={this.profile.preferences.language}
-                                onChange={this.handleLanguageChange}
-                                class="input-field"
-                            >
-                                <option value="en">English</option>
-                                <option value="zh">中文</option>
-                                <option value="es">Español</option>
-                                <option value="fr">Français</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>
-                                <input
-                                    type="checkbox"
-                                    checked={this.profile.preferences.notifications}
-                                    onChange={this.handleNotificationsChange}
-                                />
-                                Enable Notifications
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="profile-actions">
-                        <button class="btn btn-primary" onClick={this.resetProfile}>
-                            Reset to Default
-                        </button>
-                        <button class="btn btn-secondary" onClick={this.updateLastLogin}>
-                            Update Last Login
-                        </button>
-                        <button class="btn btn-warning" onClick={this.replaceEntireProfile}>
-                            Replace Entire Profile
-                        </button>
-                    </div>
-
-                    <div class="profile-display">
-                        <h3>Current Profile Data</h3>
-                        <pre class="json-display">{JSON.stringify(this.profile, null, 2)}</pre>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    private handleNameChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        // Update non-reactive property - no rerender
-        this.profile.name = input.value;
-    };
-
-    private handleNameBlur = () => {
-        // Update reactive profile when input loses focus
-        this.profile = { ...this.profile, name: this.profile.name };
-        logger.debug("Name updated", { name: this.profile.name });
-    };
-
-    private handleEmailChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        // Update non-reactive property - no rerender
-        this.profile.email = input.value;
-    };
-
-    private handleEmailBlur = () => {
-        // Update reactive profile when input loses focus
-        this.profile = { ...this.profile, email: this.profile.email };
-        logger.debug("Email updated", { email: this.profile.email });
-    };
-
-    private handleAgeChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        // Update non-reactive property - no rerender
-        this.profile.age = parseInt(input.value, 10) || 0;
-    };
-
-    private handleAgeBlur = () => {
-        // Update reactive profile when input loses focus
-        this.profile = { ...this.profile, age: this.profile.age };
-        logger.debug("Age updated", { age: this.profile.age });
-    };
-
-    private handleThemeChange = (event: Event) => {
-        const select = event.target as HTMLSelectElement;
-        // Direct nested property update - automatically reactive
-        this.profile.preferences.theme = select.value as "light" | "dark";
-        logger.debug("Theme updated", { theme: select.value });
-    };
-
-    private handleLanguageChange = (event: Event) => {
-        const select = event.target as HTMLSelectElement;
-        // Direct nested property update - automatically reactive
-        this.profile.preferences.language = select.value;
-        logger.debug("Language updated", { language: select.value });
-    };
-
-    private handleNotificationsChange = (event: Event) => {
-        const checkbox = event.target as HTMLInputElement;
-        // Direct nested property update - automatically reactive
-        this.profile.preferences.notifications = checkbox.checked;
-        logger.debug("Notifications updated", { notifications: checkbox.checked });
-    };
-
-    private resetProfile = () => {
-        // Replace entire object - automatically wrapped in reactive
-        this.profile = {
-            name: "John Doe",
-            email: "john@example.com",
-            age: 30,
-            preferences: {
-                theme: "light",
-                language: "en",
-                notifications: true,
-            },
-            lastLogin: Date.now(),
-        };
-        logger.debug("Profile reset to default");
-    };
-
-    private updateLastLogin = () => {
-        // Update object property - automatically reactive
-        this.profile = { ...this.profile, lastLogin: Date.now() };
-        logger.debug("Last login updated", { lastLogin: this.profile.lastLogin });
-    };
-
-    private replaceEntireProfile = () => {
-        // Replace entire object - automatically wrapped in reactive
-        this.profile = {
-            name: "Jane Smith",
-            email: "jane@example.com",
-            age: 25,
-            preferences: {
-                theme: "dark",
-                language: "zh",
-                notifications: false,
-            },
-            lastLogin: Date.now(),
-        };
-        logger.debug("Entire profile replaced");
-    };
-}

package/src/UserProfileLight.css

@@ -1,146 +0,0 @@
-.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 0.5rem 0;
-    color: #333;
-    font-size: 1.75rem;
-}
-
-.profile-header .subtitle {
-    color: #666;
-    font-size: 0.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 0;
-    color: #333;
-    font-size: 1.25rem;
-    border-bottom: 2px solid #007bff;
-    padding-bottom: 0.5rem;
-}
-
-.form-group {
-    margin-bottom: 1rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: #555;
-    font-weight: 500;
-    font-size: 0.9rem;
-}
-
-.form-group input[type="checkbox"] {
-    margin-right: 0.5rem;
-}
-
-.input-field {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 1rem;
-    transition: border-color 0.2s;
-    box-sizing: border-box;
-}
-
-.input-field:focus {
-    outline: none;
-    border-color: #007bff;
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
-}
-
-.profile-actions {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-.btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-weight: 500;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.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 0;
-    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: 0.875rem;
-    line-height: 1.5;
-    margin: 0;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}

package/src/UserProfileLight.wsx

@@ -1,256 +0,0 @@
-/** @jsxImportSource @wsxjs/wsx-core */
-/**
- * UserProfileLight Component - LightComponent with @state object support
- *
- * Demonstrates:
- * - Using @state decorator with objects in LightComponent
- * - Object property updates trigger automatic rerender
- * - Object replacement (entire object replacement)
- * - Nested object updates
- * - Light DOM (no Shadow DOM) - styles can be inherited from parent
- */
-
-import { LightComponent, state, autoRegister, createLogger } from "@wsxjs/wsx-core";
-import "./UserProfileLight.css";
-
-const logger = createLogger("UserProfileLight");
-
-interface UserPreferences {
-    theme: "light" | "dark";
-    language: string;
-    notifications: boolean;
-}
-
-interface UserProfile {
-    name: string;
-    email: string;
-    age: number;
-    preferences: UserPreferences;
-    lastLogin: number;
-}
-
-@autoRegister({ tagName: "user-profile-light" })
-export default class UserProfileLight extends LightComponent {
-    // @state decorator with object - automatically reactive
-    @state private profile: UserProfile = {
-        name: "John Doe",
-        email: "john@example.com",
-        age: 30,
-        preferences: {
-            theme: "light",
-            language: "en",
-            notifications: true,
-        },
-        lastLogin: Date.now(),
-    };
-
-    constructor() {
-        super();
-        logger.info("UserProfileLight initialized");
-    }
-
-    render() {
-        return (
-            <div class="user-profile">
-                <div class="profile-header">
-                    <h2>👤 User Profile (LightComponent)</h2>
-                    <p class="subtitle">Demonstrates @state decorator with objects</p>
-                </div>
-
-                <div class="profile-content">
-                    <div class="profile-section">
-                        <h3>Basic Information</h3>
-                        <div class="form-group">
-                            <label>Name:</label>
-                            <input
-                                type="text"
-                                value={this.profile.name}
-                                onInput={this.handleNameChange}
-                                onBlur={this.handleNameBlur}
-                                class="input-field"
-                            />
-                        </div>
-                        <div class="form-group">
-                            <label>Email:</label>
-                            <input
-                                type="email"
-                                value={this.profile.email}
-                                onInput={this.handleEmailChange}
-                                onBlur={this.handleEmailBlur}
-                                class="input-field"
-                            />
-                        </div>
-                        <div class="form-group">
-                            <label>Age:</label>
-                            <input
-                                type="number"
-                                value={this.profile.age.toString()}
-                                onInput={this.handleAgeChange}
-                                onBlur={this.handleAgeBlur}
-                                class="input-field"
-                            />
-                        </div>
-                    </div>
-
-                    <div class="profile-section">
-                        <h3>Preferences</h3>
-                        <div class="form-group">
-                            <label>Theme:</label>
-                            <select
-                                value={this.profile.preferences.theme}
-                                onChange={this.handleThemeChange}
-                                class="input-field"
-                            >
-                                <option value="light">Light</option>
-                                <option value="dark">Dark</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Language:</label>
-                            <select
-                                value={this.profile.preferences.language}
-                                onChange={this.handleLanguageChange}
-                                class="input-field"
-                            >
-                                <option value="en">English</option>
-                                <option value="zh">中文</option>
-                                <option value="es">Español</option>
-                                <option value="fr">Français</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>
-                                <input
-                                    type="checkbox"
-                                    checked={this.profile.preferences.notifications}
-                                    onChange={this.handleNotificationsChange}
-                                />
-                                Enable Notifications
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="profile-actions">
-                        <button class="btn btn-primary" onClick={this.resetProfile}>
-                            Reset to Default
-                        </button>
-                        <button class="btn btn-secondary" onClick={this.updateLastLogin}>
-                            Update Last Login
-                        </button>
-                        <button class="btn btn-warning" onClick={this.replaceEntireProfile}>
-                            Replace Entire Profile
-                        </button>
-                    </div>
-
-                    <div class="profile-display">
-                        <h3>Current Profile Data</h3>
-                        <pre class="json-display">{JSON.stringify(this.profile, null, 2)}</pre>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    private handleNameChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        // Update non-reactive property - no rerender
-        this.profile.name = input.value;
-    };
-
-    private handleNameBlur = () => {
-        // Update reactive profile when input loses focus
-        this.profile = { ...this.profile, name: this.profile.name };
-        logger.debug("Name updated", { name: this.profile.name });
-    };
-
-    private handleEmailChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        // Update non-reactive property - no rerender
-        this.profile.email = input.value;
-    };
-
-    private handleEmailBlur = () => {
-        // Update reactive profile when input loses focus
-        this.profile = { ...this.profile, email: this.profile.email };
-        logger.debug("Email updated", { email: this.profile.email });
-    };
-
-    private handleAgeChange = (event: Event) => {
-        const input = event.target as HTMLInputElement;
-        // Update non-reactive property - no rerender
-        this.profile.age = parseInt(input.value, 10) || 0;
-    };
-
-    private handleAgeBlur = () => {
-        // Update reactive profile when input loses focus
-        this.profile = { ...this.profile, age: this.profile.age };
-        logger.debug("Age updated", { age: this.profile.age });
-    };
-
-    private handleThemeChange = (event: Event) => {
-        const select = event.target as HTMLSelectElement;
-        // Direct nested property update - automatically reactive
-        this.profile.preferences.theme = select.value as "light" | "dark";
-        logger.debug("Theme updated", { theme: select.value });
-    };
-
-    private handleLanguageChange = (event: Event) => {
-        const select = event.target as HTMLSelectElement;
-        // Direct nested property update - automatically reactive
-        this.profile.preferences.language = select.value;
-        logger.debug("Language updated", { language: select.value });
-    };
-
-    private handleNotificationsChange = (event: Event) => {
-        const checkbox = event.target as HTMLInputElement;
-        // Direct nested property update - automatically reactive
-        this.profile.preferences.notifications = checkbox.checked;
-        logger.debug("Notifications updated", { notifications: checkbox.checked });
-    };
-
-    private resetProfile = () => {
-        // Replace entire object - automatically wrapped in reactive
-        this.profile = {
-            name: "John Doe",
-            email: "john@example.com",
-            age: 30,
-            preferences: {
-                theme: "light",
-                language: "en",
-                notifications: true,
-            },
-            lastLogin: Date.now(),
-        };
-        // Sync non-reactive input values
-        this._name = "John Doe";
-        this._email = "john@example.com";
-        this._age = 30;
-        logger.debug("Profile reset to default");
-    };
-
-    private updateLastLogin = () => {
-        // Update object property - automatically reactive
-        this.profile = { ...this.profile, lastLogin: Date.now() };
-        logger.debug("Last login updated", { lastLogin: this.profile.lastLogin });
-    };
-
-    private replaceEntireProfile = () => {
-        // Replace entire object - automatically wrapped in reactive
-        this.profile = {
-            name: "Jane Smith",
-            email: "jane@example.com",
-            age: 25,
-            preferences: {
-                theme: "dark",
-                language: "zh",
-                notifications: false,
-            },
-            lastLogin: Date.now(),
-        };
-        // Sync non-reactive input values
-        this._name = "Jane Smith";
-        this._email = "jane@example.com";
-        this._age = 25;
-        logger.debug("Entire profile replaced");
-    };
-}

package/src/XyButtonGroup.css

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