fix: 本地 patch MDUI 以解决 tabindex = 0 导致的一系列玄学问题
This commit is contained in:
CrescentLeaf
76
client/mdui_patched/components/fab/index.d.ts
vendored
Normal file
76
client/mdui_patched/components/fab/index.d.ts
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
import { ButtonBase } from '../button/button-base.js';
|
||||
import '../icon.js';
|
||||
import type { Ripple } from '../ripple/index.js';
|
||||
import type { TemplateResult, CSSResultGroup } from 'lit';
|
||||
/**
|
||||
* @summary 浮动操作按钮组件
|
||||
*
|
||||
* ```html
|
||||
* <mdui-fab icon="edit"></mdui-fab>
|
||||
* ```
|
||||
*
|
||||
* @event focus - 获得焦点时触发
|
||||
* @event blur - 失去焦点时触发
|
||||
* @event invalid - 表单字段验证未通过时触发
|
||||
*
|
||||
* @slot - 文本
|
||||
* @slot icon - 图标
|
||||
*
|
||||
* @csspart button - 内部的 `<button>` 或 `<a>` 元素
|
||||
* @csspart label - 右侧的文本
|
||||
* @csspart icon - 左侧的图标
|
||||
* @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
|
||||
*
|
||||
* @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
*/
|
||||
export declare class Fab extends ButtonBase<FabEventMap> {
|
||||
static styles: CSSResultGroup;
|
||||
/**
|
||||
* FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：
|
||||
*
|
||||
* * `primary`：使用 Primary container 背景色
|
||||
* * `surface`：使用 Surface container high 背景色
|
||||
* * `secondary`：使用 Secondary container 背景色
|
||||
* * `tertiary`：使用 Tertiary container 背景色
|
||||
*/
|
||||
variant: /*使用 Primary container 背景色*/ 'primary' | /*使用 Surface container high 背景色*/ 'surface' | /*使用 Secondary container 背景色*/ 'secondary' | /*使用 Tertiary container 背景色*/ 'tertiary';
|
||||
/**
|
||||
* FAB 的大小。可选值包括：
|
||||
* * `normal`：普通大小 FAB
|
||||
* * `small`：小型 FAB
|
||||
* * `large`：大型 FAB
|
||||
*/
|
||||
size: /*普通大小 FAB*/ 'normal' | /*小型 FAB*/ 'small' | /*大型 FAB*/ 'large';
|
||||
/**
|
||||
* Material Icons 图标名。也可以通过 `slot="icon"` 设置
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* 是否为展开状态
|
||||
*/
|
||||
extended: boolean;
|
||||
private readonly rippleRef;
|
||||
private readonly hasSlotController;
|
||||
private readonly definedController;
|
||||
protected get rippleElement(): Ripple;
|
||||
/**
|
||||
* extended 变更时，设置动画
|
||||
*/
|
||||
private onExtendedChange;
|
||||
protected render(): TemplateResult;
|
||||
private renderLabel;
|
||||
private renderIcon;
|
||||
private renderInner;
|
||||
}
|
||||
export interface FabEventMap {
|
||||
focus: FocusEvent;
|
||||
blur: FocusEvent;
|
||||
invalid: CustomEvent<void>;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mdui-fab': Fab;
|
||||
}
|
||||
}
|
||||
149
client/mdui_patched/components/fab/index.js
Normal file
149
client/mdui_patched/components/fab/index.js
Normal file
@@ -0,0 +1,149 @@
|
||||
import { __decorate } from "tslib";
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { createRef, ref } from 'lit/directives/ref.js';
|
||||
import cc from 'classcat';
|
||||
import { DefinedController } from '@mdui/shared/controllers/defined.js';
|
||||
import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
|
||||
import { watch } from '@mdui/shared/decorators/watch.js';
|
||||
import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
|
||||
import { delay } from '@mdui/shared/helpers/delay.js';
|
||||
import { nothingTemplate } from '@mdui/shared/helpers/template.js';
|
||||
import { ButtonBase } from '../button/button-base.js';
|
||||
import '../icon.js';
|
||||
import { style } from './style.js';
|
||||
/**
|
||||
* @summary 浮动操作按钮组件
|
||||
*
|
||||
* ```html
|
||||
* <mdui-fab icon="edit"></mdui-fab>
|
||||
* ```
|
||||
*
|
||||
* @event focus - 获得焦点时触发
|
||||
* @event blur - 失去焦点时触发
|
||||
* @event invalid - 表单字段验证未通过时触发
|
||||
*
|
||||
* @slot - 文本
|
||||
* @slot icon - 图标
|
||||
*
|
||||
* @csspart button - 内部的 `<button>` 或 `<a>` 元素
|
||||
* @csspart label - 右侧的文本
|
||||
* @csspart icon - 左侧的图标
|
||||
* @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
|
||||
*
|
||||
* @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
*/
|
||||
let Fab = class Fab extends ButtonBase {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
/**
|
||||
* FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：
|
||||
*
|
||||
* * `primary`：使用 Primary container 背景色
|
||||
* * `surface`：使用 Surface container high 背景色
|
||||
* * `secondary`：使用 Secondary container 背景色
|
||||
* * `tertiary`：使用 Tertiary container 背景色
|
||||
*/
|
||||
this.variant = 'primary';
|
||||
/**
|
||||
* FAB 的大小。可选值包括：
|
||||
* * `normal`：普通大小 FAB
|
||||
* * `small`：小型 FAB
|
||||
* * `large`：大型 FAB
|
||||
*/
|
||||
this.size = 'normal';
|
||||
/**
|
||||
* 是否为展开状态
|
||||
*/
|
||||
this.extended = false;
|
||||
this.rippleRef = createRef();
|
||||
this.hasSlotController = new HasSlotController(this, 'icon');
|
||||
this.definedController = new DefinedController(this, {
|
||||
relatedElements: [''],
|
||||
});
|
||||
}
|
||||
get rippleElement() {
|
||||
return this.rippleRef.value;
|
||||
}
|
||||
/**
|
||||
* extended 变更时，设置动画
|
||||
*/
|
||||
async onExtendedChange() {
|
||||
const hasUpdated = this.hasUpdated;
|
||||
if (this.extended) {
|
||||
this.style.width = `${this.scrollWidth}px`;
|
||||
}
|
||||
else {
|
||||
this.style.width = '';
|
||||
}
|
||||
await this.definedController.whenDefined();
|
||||
await this.updateComplete;
|
||||
if (this.extended && !hasUpdated) {
|
||||
this.style.width = `${this.scrollWidth}px`;
|
||||
}
|
||||
if (!hasUpdated) {
|
||||
// 延迟设置动画，避免首次渲染时也执行动画
|
||||
await delay();
|
||||
this.style.transitionProperty = 'box-shadow, width, bottom, transform'; // bottom, transform 在 bottom-app-bar 中用到
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const className = cc({
|
||||
button: true,
|
||||
'has-icon': this.icon || this.hasSlotController.test('icon'),
|
||||
});
|
||||
return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
|
||||
? this.renderButton({
|
||||
className,
|
||||
part: 'button',
|
||||
content: this.renderInner(),
|
||||
})
|
||||
: this.disabled || this.loading
|
||||
? html `<span part="button" class="_a ${className}">${this.renderInner()}</span>`
|
||||
: this.renderAnchor({
|
||||
className,
|
||||
part: 'button',
|
||||
content: this.renderInner(),
|
||||
})}`;
|
||||
}
|
||||
renderLabel() {
|
||||
return html `<slot part="label" class="label"></slot>`;
|
||||
}
|
||||
renderIcon() {
|
||||
if (this.loading) {
|
||||
return this.renderLoading();
|
||||
}
|
||||
return html `<slot name="icon" part="icon" class="icon">${this.icon
|
||||
? html `<mdui-icon name="${this.icon}"></mdui-icon>`
|
||||
: nothingTemplate}</slot>`;
|
||||
}
|
||||
renderInner() {
|
||||
return [this.renderIcon(), this.renderLabel()];
|
||||
}
|
||||
};
|
||||
Fab.styles = [ButtonBase.styles, style];
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], Fab.prototype, "variant", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], Fab.prototype, "size", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], Fab.prototype, "icon", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], Fab.prototype, "extended", void 0);
|
||||
__decorate([
|
||||
watch('extended')
|
||||
], Fab.prototype, "onExtendedChange", null);
|
||||
Fab = __decorate([
|
||||
customElement('mdui-fab')
|
||||
], Fab);
|
||||
export { Fab };
|
||||
1
client/mdui_patched/components/fab/style.d.ts
vendored
Normal file
1
client/mdui_patched/components/fab/style.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const style: import("lit").CSSResult;
|
||||
8
client/mdui_patched/components/fab/style.js
Normal file
8
client/mdui_patched/components/fab/style.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { css } from 'lit';
|
||||
export const style = css `:host{--shape-corner-small:var(--mdui-shape-corner-small);--shape-corner-normal:var(--mdui-shape-corner-large);--shape-corner-large:var(--mdui-shape-corner-extra-large);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;transition-property:box-shadow;transition-timing-function:var(--mdui-motion-easing-emphasized);transition-duration:var(--mdui-motion-duration-medium4);width:3.5rem;height:3.5rem;box-shadow:var(--mdui-elevation-level3);font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{padding:0 1rem}:host([size=small]) .button{padding:0 .5rem}:host([size=large]) .button{padding:0 1.875rem}:host([lowered]){box-shadow:var(--mdui-elevation-level1)}:host([focus-visible]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][focus-visible]){box-shadow:var(--mdui-elevation-level1)}:host([pressed]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][pressed]){box-shadow:var(--mdui-elevation-level1)}:host([hover]){box-shadow:var(--mdui-elevation-level4)}:host([lowered][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=primary]){color:rgb(var(--mdui-color-on-primary-container));background-color:rgb(var(--mdui-color-primary-container));--mdui-comp-ripple-state-layer-color:var(
|
||||
--mdui-color-on-primary-container
|
||||
)}:host([variant=surface]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-high));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=surface][lowered]){background-color:rgb(var(--mdui-color-surface-container-low))}:host([variant=secondary]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
|
||||
--mdui-color-on-secondary-container
|
||||
)}:host([variant=tertiary]){color:rgb(var(--mdui-color-on-tertiary-container));background-color:rgb(var(--mdui-color-tertiary-container));--mdui-comp-ripple-state-layer-color:var(
|
||||
--mdui-color-on-tertiary-container
|
||||
)}:host([size=small]){border-radius:var(--shape-corner-small);width:2.5rem;height:2.5rem}:host([size=large]){border-radius:var(--shape-corner-large);width:6rem;height:6rem}:host([disabled]:not([disabled=false i])),:host([loading]:not([loading=false i])){cursor:default;pointer-events:none}:host([disabled]:not([disabled=false i])){color:rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),12%);box-shadow:var(--mdui-elevation-level0)}:host([extended]:not([extended=false i])){width:auto}.label{display:inline-flex;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);padding-left:.25rem;padding-right:.25rem}.has-icon .label{margin-left:.5rem}:host([size=small]) .has-icon .label{margin-left:.25rem}:host([size=large]) .has-icon .label{margin-left:1rem}:host(:not([extended])) .label,:host([extended=false i]) .label{opacity:0;transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([size=large]) .label{font-size:1.5em}.icon{display:inline-flex;font-size:1.71428571em}:host([size=large]) .icon{font-size:2.57142857em}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.5rem;height:1.5rem}:host([size=large]) mdui-circular-progress{width:2.25rem;height:2.25rem}:host([disabled]:not([disabled=false i])) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
|
||||
Reference in New Issue
Block a user