@wsxjs/wsx-base-components 0.0.5

package/src/XyButtonGroup.wsx

@@ -0,0 +1,124 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * XyButtonGroup WSX Component - 迁移自xy-button.js
+ *
+ * 用于将多个xy-button组合成一个按钮组，
+ * 提供统一的样式和布局管理
+ */
+
+import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./XyButtonGroup.css?inline";
+
+export interface XyButtonGroupConfig {
+    disabled?: boolean;
+}
+
+@autoRegister({ tagName: "xy-button-group" })
+export default class XyButtonGroup extends WebComponent {
+    private disabled: boolean = false;
+
+    static get observedAttributes(): string[] {
+        return ["disabled"];
+    }
+
+    constructor(config: XyButtonGroupConfig = {}) {
+        super({
+            styles,
+            styleName: "xy-button-group",
+            ...config,
+        });
+
+        this.disabled = config.disabled || false;
+    }
+
+    render(): HTMLElement {
+        return (
+            <div class="button-group-container">
+                <slot />
+            </div>
+        );
+    }
+
+    /**
+     * 属性变化处理
+     */
+    protected onAttributeChanged(
+        name: string,
+        oldValue: string | null,
+        newValue: string | null
+    ): void {
+        switch (name) {
+            case "disabled":
+                this.disabled = newValue !== null;
+                this.updateChildrenDisabledState();
+                break;
+        }
+    }
+
+    /**
+     * 组件连接到DOM后的初始化
+     */
+    protected onConnected(): void {
+        // 初始化时设置子按钮的disabled状态
+        this.updateChildrenDisabledState();
+    }
+
+    /**
+     * 更新所有子按钮的disabled状态
+     */
+    private updateChildrenDisabledState(): void {
+        if (!this.disabled) return;
+
+        // 获取所有xy-button子元素
+        const buttons = this.querySelectorAll("xy-button");
+        buttons.forEach((button: Element) => {
+            if (this.disabled) {
+                button.setAttribute("disabled", "");
+            } else {
+                button.removeAttribute("disabled");
+            }
+        });
+    }
+
+    /**
+     * 公共API：获取/设置disabled状态
+     */
+    public get isDisabled(): boolean {
+        return this.disabled;
+    }
+
+    public set isDisabled(value: boolean) {
+        if (value) {
+            this.setAttr("disabled", "");
+        } else {
+            this.removeAttr("disabled");
+        }
+    }
+
+    /**
+     * 公共API：获取组内的所有按钮
+     */
+    public getButtons(): NodeListOf<Element> {
+        return this.querySelectorAll("xy-button");
+    }
+
+    /**
+     * 公共API：启用所有按钮
+     */
+    public enableAll(): void {
+        const buttons = this.getButtons();
+        buttons.forEach((button: Element) => {
+            button.removeAttribute("disabled");
+        });
+    }
+
+    /**
+     * 公共API：禁用所有按钮
+     */
+    public disableAll(): void {
+        const buttons = this.getButtons();
+        buttons.forEach((button: Element) => {
+            button.setAttribute("disabled", "");
+        });
+    }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+
+// Export all base components (using default imports since they're default exports)
+export { default as XyButton } from "./XyButton.wsx";
+export { default as XyButtonGroup } from "./XyButtonGroup.wsx";
+export { default as ColorPicker } from "./ColorPicker.wsx";
+export { default as ReactiveCounter } from "./ReactiveCounter.wsx";
+export { default as ThemeSwitcher } from "./ThemeSwitcher.wsx";
+export { default as SvgIcon } from "./SvgIcon.wsx";
+export { default as SvgDemo } from "./SvgDemo.wsx";
+export { default as SimpleReactiveDemo } from "./SimpleReactiveDemo.wsx";
+
+// Export utilities
+export * from "./ColorPickerUtils";
+
+// Note: Re-exports from core are causing TypeScript rootDir issues
+// Users can import directly from @wsxjs/wsx-core if needed

package/src/jsx-inject.ts

@@ -0,0 +1,2 @@
+// JSX inject file for tsup build
+export { jsx, Fragment } from "@wsxjs/wsx-core";

package/src/types/wsx.d.ts

@@ -0,0 +1,6 @@
+// Type declaration for .wsx files
+declare module "*.wsx" {
+    import { WebComponent } from "@wsxjs/wsx-core";
+    const component: typeof WebComponent;
+    export default component;
+}