fix: 本地 patch MDUI 以解决 tabindex = 0 导致的一系列玄学问题

client/mdui_patched/components/circular-progress/index.d.ts

@@ -0,0 +1,30 @@
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 圆形进度指示器组件
+ *
+ * ```html
+ * <mdui-circular-progress></mdui-circular-progress>
+ * ```
+ */
+export declare class CircularProgress extends MduiElement<CircularProgressEventMap> {
+    static styles: CSSResultGroup;
+    /**
+     * 进度指示器的最大值。默认为 `1`
+     */
+    max: number;
+    /**
+     * 进度指示器的当前值。如果未指定该值，则显示为不确定状态
+     */
+    value?: number;
+    protected render(): TemplateResult;
+    private renderDeterminate;
+    private renderInDeterminate;
+}
+export interface CircularProgressEventMap {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-circular-progress': CircularProgress;
+    }
+}

client/mdui_patched/components/circular-progress/index.js

@@ -0,0 +1,62 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 圆形进度指示器组件
+ *
+ * ```html
+ * <mdui-circular-progress></mdui-circular-progress>
+ * ```
+ */
+let CircularProgress = class CircularProgress extends MduiElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 进度指示器的最大值。默认为 `1`
+         */
+        this.max = 1;
+    }
+    render() {
+        const isDeterminate = !isUndefined(this.value);
+        return html `<div class="progress ${classMap({
+            determinate: isDeterminate,
+            indeterminate: !isDeterminate,
+        })}">${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}</div>`;
+    }
+    renderDeterminate() {
+        const value = this.value;
+        const strokeWidth = 4; // 圆环宽度
+        const circleRadius = 18; // 圆环宽度中心点的半径
+        const π = 3.1415926;
+        const center = circleRadius + strokeWidth / 2;
+        const circumference = 2 * π * circleRadius;
+        const determinateStrokeDashOffset = (1 - value / Math.max(this.max ?? value, value)) * circumference;
+        return html `<svg viewBox="0 0 ${center * 2} ${center * 2}"><circle class="track" cx="${center}" cy="${center}" r="${circleRadius}" stroke-width="${strokeWidth}"></circle><circle class="circle" cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${2 * π * circleRadius}" stroke-dashoffset="${determinateStrokeDashOffset}" stroke-width="${strokeWidth}"></circle></svg>`;
+    }
+    renderInDeterminate() {
+        const strokeWidth = 4; // 圆环宽度
+        const circleRadius = 18; // 圆环宽度中心点的半径
+        const π = 3.1415926;
+        const center = circleRadius + strokeWidth / 2;
+        const circumference = 2 * π * circleRadius;
+        const halfCircumference = 0.5 * circumference;
+        const circle = (thisStrokeWidth) => html `<svg class="circle" viewBox="0 0 ${center * 2} ${center * 2}"><circle cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${circumference}" stroke-dashoffset="${halfCircumference}" stroke-width="${thisStrokeWidth}"></circle></svg>`;
+        return html `<div class="layer"><div class="clipper left">${circle(strokeWidth)}</div><div class="gap-patch">${circle(strokeWidth * 0.8)}</div><div class="clipper right">${circle(strokeWidth)}</div></div>`;
+    }
+};
+CircularProgress.styles = [componentStyle, style];
+__decorate([
+    property({ type: Number, reflect: true })
+], CircularProgress.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], CircularProgress.prototype, "value", void 0);
+CircularProgress = __decorate([
+    customElement('mdui-circular-progress')
+], CircularProgress);
+export { CircularProgress };

client/mdui_patched/components/circular-progress/style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

client/mdui_patched/components/circular-progress/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{position:relative;display:inline-block;flex-shrink:0;width:2.5rem;height:2.5rem;stroke:rgb(var(--mdui-color-primary))}.progress{position:relative;display:inline-block;width:100%;height:100%;text-align:left;transition:opacity var(--mdui-motion-duration-medium1) var(--mdui-motion-easing-linear)}.determinate svg{transform:rotate(-90deg);fill:transparent}.determinate .track{stroke:transparent}.determinate .circle{stroke:inherit;transition:stroke-dashoffset var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate{font-size:0;letter-spacing:0;white-space:nowrap;animation:mdui-comp-circular-progress-rotate 1568ms var(--mdui-motion-easing-linear) infinite}.indeterminate .circle,.indeterminate .layer{position:absolute;width:100%;height:100%}.indeterminate .layer{animation:mdui-comp-circular-progress-layer-rotate 5332ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .circle{fill:transparent;stroke:inherit}.indeterminate .gap-patch{position:absolute;top:0;left:47.5%;width:5%;height:100%;overflow:hidden}.indeterminate .gap-patch .circle{left:-900%;width:2000%;transform:rotate(180deg)}.indeterminate .clipper{position:relative;display:inline-block;width:50%;height:100%;overflow:hidden}.indeterminate .clipper .circle{width:200%}.indeterminate .clipper.left .circle{animation:mdui-comp-circular-progress-left-spin 1333ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .clipper.right .circle{left:-100%;animation:mdui-comp-circular-progress-right-spin 1333ms var(--mdui-motion-easing-standard) infinite both}@keyframes mdui-comp-circular-progress-rotate{to{transform:rotate(360deg)}}@keyframes mdui-comp-circular-progress-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdui-comp-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes mdui-comp-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}100%{transform:rotate(-265deg)}}`;