@wsxjs/wsx-base-components 0.0.5

package/src/XyButton.css

@@ -0,0 +1,257 @@
+/* XyButton Component Styles - Migrated from xy-button.js */
+:host {
+    position: relative;
+    display: inline-flex;
+    padding: 0.25em 0.625em;
+    box-sizing: border-box;
+    vertical-align: middle;
+    line-height: 1.8;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--fontColor, #333);
+    border-radius: var(--borderRadius, 0.25em);
+    background: var(--fontColor, #333);
+    transition:
+        background 0.3s,
+        box-shadow 0.3s,
+        border-color 0.3s,
+        color 0.3s;
+}
+
+/* Size variants - 现代设计系统标准 */
+:host([size="xxxs"]) {
+    padding: 0.03125em 0.0625em;
+    font-size: 6px;
+    line-height: 1;
+    min-width: 10px;
+    min-height: 8px; /* 极致微小设计 */
+    border-radius: 1px;
+}
+
+:host([size="xxs"]) {
+    padding: 0.0625em 0.125em;
+    font-size: 8px;
+    line-height: 1.1;
+    min-width: 14px;
+    min-height: 12px; /* 极致紧凑设计 */
+    border-radius: 2px;
+}
+
+:host([size="xs"]) {
+    padding: 0.125em 0.25em;
+    font-size: 10px;
+    line-height: 1.2;
+    min-width: 18px;
+    min-height: 16px; /* 真正的紧凑设计 */
+    border-radius: 3px;
+}
+
+:host([size="sm"]) {
+    padding: 0.25em 0.5em;
+    font-size: 12px;
+    line-height: 1.4;
+    min-width: 24px;
+    min-height: 20px;
+    border-radius: 4px;
+}
+
+:host([size="md"]) {
+    padding: 0.375em 0.75em;
+    font-size: 14px;
+    line-height: 1.5;
+    min-width: 32px;
+    min-height: 28px;
+    border-radius: 6px;
+}
+
+:host([size="lg"]) {
+    padding: 0.5em 1em;
+    font-size: 14px;
+    line-height: 1.6;
+    min-width: 40px;
+    min-height: 32px;
+    border-radius: 6px;
+}
+
+:host([size="xl"]) {
+    padding: 0.625em 1.25em;
+    font-size: 16px;
+    line-height: 1.6;
+    min-width: 48px;
+    min-height: 40px;
+    border-radius: 8px;
+}
+
+:host([shape="circle"]) {
+    border-radius: 50%;
+}
+
+:host([disabled]),
+:host([loading]) {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+:host([block]) {
+    display: flex;
+}
+
+:host([disabled]:not([variant])) {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+:host([disabled]) .btn,
+:host([loading]) .btn {
+    cursor: not-allowed;
+    pointer-events: all;
+}
+
+:host(:not([variant="primary"]):not([variant="danger"]):not([disabled]):hover),
+:host(:not([variant="primary"]):not([variant="danger"]):focus-within),
+:host([variant="flat"][focus]) {
+    color: var(--themeColor, #42b983);
+    border-color: var(--themeColor, #42b983);
+}
+
+:host(:not([variant="primary"]):not([variant="danger"])) .btn::after {
+    background-image: radial-gradient(circle, var(--themeColor, #42b983) 10%, transparent 10.01%);
+}
+
+:host([variant="primary"]) {
+    color: #fff;
+    background: var(--themeBackground, var(--themeColor, #42b983));
+}
+
+:host([variant="danger"]) {
+    color: #fff;
+    background: var(--themeBackground, var(--dangerColor, #ff7875));
+}
+
+:host([variant="dashed"]) {
+    border-style: dashed;
+}
+
+:host([variant="flat"]),
+:host([variant="primary"]),
+:host([variant="danger"]) {
+    border: 0;
+    padding: calc(0.25em + 1px) calc(0.625em + 1px);
+}
+
+:host([variant="flat"]) .btn::before {
+    content: "";
+    position: absolute;
+    background: var(--themeColor, #42b983);
+    pointer-events: none;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: 0.3s;
+}
+
+:host([variant="flat"]:not([disabled]):hover) .btn::before {
+    opacity: 0.1;
+}
+
+:host(:not([disabled]):hover) {
+    z-index: 1;
+}
+
+:host([variant="flat"]:focus-within) .btn:before,
+:host([variant="flat"][focus]) .btn:before {
+    opacity: 0.2;
+}
+
+.btn {
+    background: none;
+    outline: 0;
+    border: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    user-select: none;
+    cursor: unset;
+}
+
+.loading {
+    margin-right: 0.35em;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+.btn::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transition: 0.2s;
+    background: #fff;
+    opacity: 0;
+}
+
+:host(:not([disabled]):active) .btn::before {
+    opacity: 0.2;
+}
+
+.btn::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: var(--x, 0);
+    top: var(--y, 0);
+    pointer-events: none;
+    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: translate(-50%, -50%) scale(10);
+    opacity: 0;
+    transition:
+        transform 0.3s,
+        opacity 0.8s;
+}
+
+.btn:not([disabled]):active::after {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0.3;
+    transition: 0s;
+}
+
+.icon {
+    margin-right: 0.35em;
+    transition: none;
+}
+
+:host(:empty) .icon {
+    margin: auto;
+}
+
+:host(:empty) {
+    padding: 0.65em;
+}
+
+:host([type="flat"]:empty),
+:host([type="primary"]:empty) {
+    padding: calc(0.65em + 1px);
+}
+
+::slotted(.icon) {
+    transition: none;
+}
+
+:host([href]) {
+    cursor: pointer;
+}

package/src/XyButton.wsx

@@ -0,0 +1,356 @@
+/** @jsxImportSource @wsxjs/wsx-core */
+/**
+ * XyButton WSX Component - 迁移自xy-button.js
+ *
+ * 特性：
+ * - 支持多种按钮类型：primary、danger、flat、dashed
+ * - 支持disabled、loading、toggle状态
+ * - 支持icon显示和href链接
+ * - 波纹点击效果
+ * - 完整的样式系统和主题变量
+ */
+
+import { WebComponent, autoRegister } from "@wsxjs/wsx-core";
+import styles from "./XyButton.css?inline";
+
+export interface XyButtonConfig {
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    href?: string;
+    type?: "button" | "submit" | "reset";
+    target?: string;
+    rel?: string;
+    download?: string;
+    toggle?: boolean;
+    checked?: boolean;
+    variant?: "primary" | "danger" | "flat" | "dashed" | "text";
+    shape?: "circle";
+    block?: boolean;
+    size?: "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+}
+
+@autoRegister({ tagName: "xy-button" })
+export default class XyButton extends WebComponent {
+    // 状态属性
+    private disabled: boolean = false;
+    private loading: boolean = false;
+    private toggle: boolean = false;
+    private checked: boolean = false;
+    private icon: string | null = null;
+    private href: string | null = null;
+    private type: "button" | "submit" | "reset" | null = null;
+    private target: string = "_blank";
+    private rel: string | null = null;
+    private download: string | null = null;
+    private variant: string = "flat";
+    private size: string = "md";
+    // DOM引用
+    private btnElement?: HTMLButtonElement | HTMLAnchorElement;
+    private iconElement?: HTMLElement;
+    private loadingElement?: HTMLElement;
+
+    static get observedAttributes(): string[] {
+        return [
+            "disabled",
+            "icon",
+            "loading",
+            "href",
+            "type",
+            "target",
+            "rel",
+            "download",
+            "toggle",
+            "checked",
+            "variant",
+            "shape",
+            "block",
+            "size",
+        ];
+    }
+
+    constructor(config: XyButtonConfig = {}) {
+        super({
+            styles,
+            styleName: "xy-button",
+            ...config,
+        });
+
+        // 初始化配置
+        this.disabled = config.disabled || false;
+        this.loading = config.loading || false;
+        this.toggle = config.toggle || false;
+        this.checked = config.checked || false;
+        this.icon = config.icon || null;
+        this.href = config.href || null;
+        this.type = (config.type as "button" | "submit" | "reset") || null;
+        this.target = config.target || "_blank";
+        this.rel = config.rel || null;
+        this.download = config.download || null;
+        this.variant = config.variant || "flat";
+        this.size = config.size || "md";
+    }
+
+    render(): HTMLElement {
+        const isLink = !!this.href;
+
+        const linkElement = (
+            <a
+                href={this.href}
+                target={this.target}
+                rel={this.rel || undefined}
+                download={this.download || undefined}
+                className="btn"
+                onMouseDown={this.handleMouseDown}
+                onKeyDown={this.handleKeyDown}
+                ref={(el: HTMLAnchorElement) => {
+                    this.btnElement = el;
+                }}
+            >
+                {this.renderContent()}
+            </a>
+        );
+
+        const buttonElement = (
+            <button
+                type={this.type || "button"}
+                disabled={this.disabled}
+                className="btn"
+                onMouseDown={this.handleMouseDown}
+                onKeyDown={this.handleKeyDown}
+                ref={(el: HTMLButtonElement) => {
+                    this.btnElement = el;
+                }}
+            >
+                {this.renderContent()}
+            </button>
+        );
+
+        return <div className="xy-button-container">{isLink ? linkElement : buttonElement}</div>;
+    }
+
+    private renderContent(): (HTMLElement | string)[] {
+        const content: (HTMLElement | string)[] = [];
+
+        // 渲染loading状态
+        if (this.loading) {
+            content.push(
+                <div
+                    className="loading"
+                    ref={(el: HTMLElement) => {
+                        this.loadingElement = el;
+                    }}
+                >
+                    Loading...
+                </div>
+            );
+        }
+
+        // 渲染icon
+        if (!this.loading && this.icon && this.icon !== "null") {
+            content.push(
+                <div
+                    className="icon"
+                    data-icon={this.icon}
+                    ref={(el: HTMLElement) => {
+                        this.iconElement = el;
+                    }}
+                >
+                    {this.icon}
+                </div>
+            );
+        }
+
+        // 渲染slot内容
+        content.push(<slot />);
+
+        return content;
+    }
+
+    /**
+     * 处理鼠标按下事件 - 波纹效果
+     */
+    private handleMouseDown = (event: MouseEvent): void => {
+        if (this.disabled) return;
+
+        const rect = this.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        this.style.setProperty("--x", `${x}px`);
+        this.style.setProperty("--y", `${y}px`);
+    };
+
+    /**
+     * 处理键盘事件
+     */
+    private handleKeyDown = (event: KeyboardEvent): void => {
+        if (event.code === "Enter" || event.code === "Space") {
+            // Enter
+            event.stopPropagation();
+        }
+    };
+
+    /**
+     * 处理点击事件
+     */
+    private handleClick = (): void => {
+        if (this.toggle && !this.disabled) {
+            this.checked = !this.checked;
+            if (this.checked) {
+                this.setAttr("checked", "");
+            } else {
+                this.removeAttr("checked");
+            }
+        }
+    };
+
+    /**
+     * 组件连接到DOM后的初始化
+     */
+    protected onConnected(): void {
+        this.addEventListener("click", this.handleClick);
+    }
+
+    /**
+     * 组件从DOM断开时的清理
+     */
+    protected onDisconnected(): void {
+        this.removeEventListener("click", this.handleClick);
+    }
+
+    /**
+     * 属性变化处理
+     */
+    protected onAttributeChanged(
+        name: string,
+        oldValue: string | null,
+        newValue: string | null
+    ): void {
+        switch (name) {
+            case "disabled":
+                this.disabled = newValue !== null;
+                this.updateButtonState();
+                break;
+            case "loading":
+                this.loading = newValue !== null;
+                this.updateButtonState();
+                this.rerender();
+                break;
+            case "icon":
+                this.icon = newValue;
+                this.rerender();
+                break;
+            case "href":
+                this.href = newValue;
+                this.rerender();
+                break;
+            case "type":
+                this.type = newValue as "button" | "submit" | "reset" | null;
+                this.updateButtonState();
+                break;
+            case "target":
+                this.target = newValue || "_blank";
+                break;
+            case "rel":
+                this.rel = newValue;
+                break;
+            case "download":
+                this.download = newValue;
+                break;
+            case "toggle":
+                this.toggle = newValue !== null;
+                break;
+            case "checked":
+                this.checked = newValue !== null;
+                break;
+            case "variant":
+                this.variant = newValue || "flat";
+                break;
+            case "size":
+                this.size = newValue || "md";
+                break;
+        }
+    }
+
+    /**
+     * 更新按钮状态
+     */
+    private updateButtonState(): void {
+        if (!this.btnElement) return;
+
+        if (this.disabled || this.loading) {
+            this.btnElement.setAttribute("disabled", "disabled");
+            if (this.href && this.btnElement instanceof HTMLAnchorElement) {
+                this.btnElement.removeAttribute("href");
+            }
+        } else {
+            this.btnElement.removeAttribute("disabled");
+            if (this.href && this.btnElement instanceof HTMLAnchorElement) {
+                this.btnElement.href = this.href;
+            }
+        }
+
+        if (this.type && this.btnElement instanceof HTMLButtonElement) {
+            this.btnElement.type = this.type;
+        }
+    }
+
+    /**
+     * 公共API：聚焦按钮
+     */
+    public focus(): void {
+        this.btnElement?.focus();
+    }
+
+    /**
+     * 公共API：获取/设置属性
+     */
+    public get isDisabled(): boolean {
+        return this.disabled;
+    }
+
+    public set isDisabled(value: boolean) {
+        if (value) {
+            this.setAttr("disabled", "");
+        } else {
+            this.removeAttr("disabled");
+        }
+    }
+
+    public get isLoading(): boolean {
+        return this.loading;
+    }
+
+    public set isLoading(value: boolean) {
+        if (value) {
+            this.setAttr("loading", "");
+        } else {
+            this.removeAttr("loading");
+        }
+    }
+
+    public get isChecked(): boolean {
+        return this.checked;
+    }
+
+    public set isChecked(value: boolean) {
+        if (value) {
+            this.setAttr("checked", "");
+        } else {
+            this.removeAttr("checked");
+        }
+    }
+
+    public get buttonIcon(): string | null {
+        return this.icon;
+    }
+
+    public set buttonIcon(value: string | null) {
+        if (value) {
+            this.setAttr("icon", value);
+        } else {
+            this.removeAttr("icon");
+        }
+    }
+}

package/src/XyButtonGroup.css

@@ -0,0 +1,30 @@
+/* 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;
+}