fix: 本地 patch MDUI 以解决 tabindex = 0 导致的一系列玄学问题
This commit is contained in:
CrescentLeaf
53
client/mdui_patched/components/card/index.d.ts
vendored
Normal file
53
client/mdui_patched/components/card/index.d.ts
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import type { Ripple } from '../ripple/index.js';
|
||||
import type { TemplateResult, CSSResultGroup } from 'lit';
|
||||
declare const Card_base: import("@lit/reactive-element/decorators/base.js").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@lit/reactive-element/decorators/base.js").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@lit/reactive-element/decorators/base.js").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
|
||||
/**
|
||||
* @summary 卡片组件
|
||||
*
|
||||
* ```html
|
||||
* <mdui-card>card content</mdui-card>
|
||||
* ```
|
||||
*
|
||||
* @event focus - 获得焦点时触发
|
||||
* @event blur - 失去焦点时触发
|
||||
*
|
||||
* @slot - 卡片的内容
|
||||
*
|
||||
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
*/
|
||||
export declare class Card extends Card_base<CardEventMap> {
|
||||
static styles: CSSResultGroup;
|
||||
/**
|
||||
* 卡片的形状。可选值包括：
|
||||
*
|
||||
* * `elevated`：带阴影的卡片，与背景的视觉分离度较高
|
||||
* * `filled`：带填充色的卡片，与背景的视觉分离度较低
|
||||
* * `outlined`：带边框的卡片，与背景的视觉分离度最高
|
||||
*/
|
||||
variant: /*带阴影的卡片，与背景的视觉分离度较高*/ 'elevated' | /*带填充色的卡片，与背景的视觉分离度较低*/ 'filled' | /*带边框的卡片，与背景的视觉分离度最高*/ 'outlined';
|
||||
/**
|
||||
* 是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果
|
||||
*/
|
||||
clickable: boolean;
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
disabled: boolean;
|
||||
private readonly rippleRef;
|
||||
protected get rippleElement(): Ripple;
|
||||
protected get rippleDisabled(): boolean;
|
||||
protected get focusElement(): HTMLElement | null;
|
||||
protected get focusDisabled(): boolean;
|
||||
protected render(): TemplateResult;
|
||||
}
|
||||
export interface CardEventMap {
|
||||
focus: FocusEvent;
|
||||
blur: FocusEvent;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mdui-card': Card;
|
||||
}
|
||||
}
|
||||
export {};
|
||||
91
client/mdui_patched/components/card/index.js
Normal file
91
client/mdui_patched/components/card/index.js
Normal file
@@ -0,0 +1,91 @@
|
||||
import { __decorate } from "tslib";
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { createRef, ref } from 'lit/directives/ref.js';
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
|
||||
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
||||
import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
|
||||
import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
|
||||
import { RippleMixin } from '../ripple/ripple-mixin.js';
|
||||
import { style } from './style.js';
|
||||
/**
|
||||
* @summary 卡片组件
|
||||
*
|
||||
* ```html
|
||||
* <mdui-card>card content</mdui-card>
|
||||
* ```
|
||||
*
|
||||
* @event focus - 获得焦点时触发
|
||||
* @event blur - 失去焦点时触发
|
||||
*
|
||||
* @slot - 卡片的内容
|
||||
*
|
||||
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
*/
|
||||
let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
/**
|
||||
* 卡片的形状。可选值包括：
|
||||
*
|
||||
* * `elevated`：带阴影的卡片，与背景的视觉分离度较高
|
||||
* * `filled`：带填充色的卡片，与背景的视觉分离度较低
|
||||
* * `outlined`：带边框的卡片，与背景的视觉分离度最高
|
||||
*/
|
||||
this.variant = 'elevated';
|
||||
/**
|
||||
* 是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果
|
||||
*/
|
||||
this.clickable = false;
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
this.disabled = false;
|
||||
this.rippleRef = createRef();
|
||||
}
|
||||
get rippleElement() {
|
||||
return this.rippleRef.value;
|
||||
}
|
||||
get rippleDisabled() {
|
||||
return this.disabled || (!this.href && !this.clickable);
|
||||
}
|
||||
get focusElement() {
|
||||
return this.href && !this.disabled
|
||||
? this.renderRoot.querySelector('._a')
|
||||
: this;
|
||||
}
|
||||
get focusDisabled() {
|
||||
return this.rippleDisabled;
|
||||
}
|
||||
render() {
|
||||
return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled
|
||||
? this.renderAnchor({
|
||||
className: 'link',
|
||||
content: html `<slot></slot>`,
|
||||
})
|
||||
: html `<slot></slot>`}`;
|
||||
}
|
||||
};
|
||||
Card.styles = [componentStyle, style];
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], Card.prototype, "variant", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], Card.prototype, "clickable", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], Card.prototype, "disabled", void 0);
|
||||
Card = __decorate([
|
||||
customElement('mdui-card')
|
||||
], Card);
|
||||
export { Card };
|
||||
1
client/mdui_patched/components/card/style.d.ts
vendored
Normal file
1
client/mdui_patched/components/card/style.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const style: import("lit").CSSResult;
|
||||
2
client/mdui_patched/components/card/style.js
Normal file
2
client/mdui_patched/components/card/style.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import { css } from 'lit';
|
||||
export const style = css `:host{--shape-corner:var(--mdui-shape-corner-medium);position:relative;display:inline-block;overflow:hidden;border-radius:var(--shape-corner);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([clickable]:not([clickable=false i])){cursor:pointer}:host([variant=elevated]){background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([variant=filled]){background-color:rgb(var(--mdui-color-surface-container-highest))}:host([variant=outlined]){background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=outlined][hover]){box-shadow:var(--mdui-elevation-level1)}:host([variant=elevated][dragged]),:host([variant=filled][dragged]),:host([variant=outlined][dragged]){box-shadow:var(--mdui-elevation-level3)}:host([disabled]:not([disabled=false i])){opacity:.38;cursor:default;-webkit-user-select:none;user-select:none}:host([variant=elevated][disabled]:not([disabled=false i])){background-color:rgb(var(--mdui-color-surface-variant));box-shadow:var(--mdui-elevation-level0)}:host([variant=filled][disabled]:not([disabled=false i])){background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level1)}:host([variant=outlined][disabled]:not([disabled=false i])){box-shadow:var(--mdui-elevation-level0);border-color:rgba(var(--mdui-color-outline),.32)}.link{position:relative;display:inline-block;width:100%;height:100%;color:inherit;font-size:inherit;letter-spacing:inherit;text-decoration:none;touch-action:manipulation;-webkit-user-drag:none}`;
|
||||
Reference in New Issue
Block a user