fix: 本地 patch MDUI 以解决 tabindex = 0 导致的一系列玄学问题
This commit is contained in:
CrescentLeaf
1
client/mdui_patched/components/list/list-item-style.d.ts
vendored
Normal file
1
client/mdui_patched/components/list/list-item-style.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const listItemStyle: import("lit").CSSResult;
|
||||
4
client/mdui_patched/components/list/list-item-style.js
Normal file
4
client/mdui_patched/components/list/list-item-style.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import { css } from 'lit';
|
||||
export const listItemStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--shape-corner-rounded:var(--mdui-shape-corner-extra-large);position:relative;display:block;border-radius:var(--shape-corner);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([rounded]:not([rounded=false i])),:host([rounded]:not([rounded=false i])) mdui-ripple{border-radius:var(--shape-corner-rounded)}:host([active]:not([active=false i])){background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
|
||||
--mdui-color-on-secondary-container
|
||||
)}:host([disabled]:not([disabled=false i])){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}:host([disabled]:not([disabled=false i])) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href],[nonclickable=false i])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]:not([active=false i])) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([disabled]:not([disabled=false i])) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]:not([disabled=false i])) .end-icon,:host([disabled]:not([disabled=false i])) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]:not([active=false i])) .end-icon,:host([active]:not([active=false i])) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;
|
||||
115
client/mdui_patched/components/list/list-item.d.ts
vendored
Normal file
115
client/mdui_patched/components/list/list-item.d.ts
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import '../icon.js';
|
||||
import type { Ripple } from '../ripple/index.js';
|
||||
import type { CSSResultGroup, TemplateResult } from 'lit';
|
||||
declare const ListItem_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 列表项组件。需配合 `<mdui-list>` 组件使用
|
||||
*
|
||||
* ```html
|
||||
* <mdui-list>
|
||||
* ..<mdui-list-subheader>Subheader</mdui-list-subheader>
|
||||
* ..<mdui-list-item>Item 1</mdui-list-item>
|
||||
* ..<mdui-list-item>Item 2</mdui-list-item>
|
||||
* </mdui-list>
|
||||
* ```
|
||||
*
|
||||
* @event focus - 获得焦点时触发
|
||||
* @event blur - 失去焦点时触发
|
||||
*
|
||||
* @slot - 主文本
|
||||
* @slot description - 副文本
|
||||
* @slot icon - 列表项左侧的元素
|
||||
* @slot end-icon - 列表项右侧的元素
|
||||
* @slot custom - 任意自定义内容
|
||||
*
|
||||
* @csspart container - 列表项容器
|
||||
* @csspart icon - 左侧图标
|
||||
* @csspart end-icon - 右侧图标
|
||||
* @csspart body - 中间部分
|
||||
* @csspart headline - 主标题
|
||||
* @csspart description - 副标题
|
||||
*
|
||||
* @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
*/
|
||||
export declare class ListItem extends ListItem_base<ListItemEventMap> {
|
||||
static styles: CSSResultGroup;
|
||||
/**
|
||||
* 主文本。也可以通过 default slot 设置
|
||||
*/
|
||||
headline?: string;
|
||||
/**
|
||||
* 主文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：
|
||||
*
|
||||
* * `1`：显示单行，超出后截断
|
||||
* * `2`：显示两行，超出后截断
|
||||
* * `3`：显示三行，超出后截断
|
||||
*/
|
||||
headlineLine?: /*显示单行，超出后截断*/ 1 | /*显示两行，超出后截断*/ 2 | /*显示三行，超出后截断*/ 3;
|
||||
/**
|
||||
* 副文本。也可以通过 `slot="description"` 设置
|
||||
*/
|
||||
description?: string;
|
||||
/**
|
||||
* 副文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：
|
||||
*
|
||||
* * `1`：显示单行，超出后截断
|
||||
* * `2`：显示两行，超出后截断
|
||||
* * `3`：显示三行，超出后截断
|
||||
*/
|
||||
descriptionLine?: /*显示单行，超出后截断*/ 1 | /*显示两行，超出后截断*/ 2 | /*显示三行，超出后截断*/ 3;
|
||||
/**
|
||||
* 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* 右侧的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
|
||||
*/
|
||||
endIcon?: string;
|
||||
/**
|
||||
* 是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
|
||||
*/
|
||||
disabled: boolean;
|
||||
/**
|
||||
* 是否激活该列表项
|
||||
*/
|
||||
active: boolean;
|
||||
/**
|
||||
* 是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
|
||||
*/
|
||||
nonclickable: boolean;
|
||||
/**
|
||||
* 是否使用圆角形状的列表项
|
||||
*/
|
||||
rounded: boolean;
|
||||
/**
|
||||
* 列表项的垂直对齐方式。可选值包括：
|
||||
*
|
||||
* * `start`：顶部对齐
|
||||
* * `center`：居中对齐
|
||||
* * `end`：底部对齐
|
||||
*/
|
||||
alignment: /*顶部对齐*/ 'start' | /*居中对齐*/ 'center' | /*底部对齐*/ 'end';
|
||||
private readonly iconElements;
|
||||
private readonly endIconElements;
|
||||
private readonly rippleRef;
|
||||
private readonly itemRef;
|
||||
private readonly hasSlotController;
|
||||
protected get rippleElement(): Ripple;
|
||||
protected get rippleDisabled(): boolean;
|
||||
protected get focusElement(): HTMLElement;
|
||||
protected get focusDisabled(): boolean;
|
||||
protected render(): TemplateResult;
|
||||
private renderInner;
|
||||
}
|
||||
export interface ListItemEventMap {
|
||||
focus: FocusEvent;
|
||||
blur: FocusEvent;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mdui-list-item': ListItem;
|
||||
}
|
||||
}
|
||||
export {};
|
||||
189
client/mdui_patched/components/list/list-item.js
Normal file
189
client/mdui_patched/components/list/list-item.js
Normal file
@@ -0,0 +1,189 @@
|
||||
import { __decorate } from "tslib";
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
|
||||
import { createRef, ref } from 'lit/directives/ref.js';
|
||||
import cc from 'classcat';
|
||||
import { isNodeName, getNodeName } from '@mdui/jq/shared/helper.js';
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
|
||||
import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
|
||||
import { nothingTemplate } from '@mdui/shared/helpers/template.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 '../icon.js';
|
||||
import { RippleMixin } from '../ripple/ripple-mixin.js';
|
||||
import { listItemStyle } from './list-item-style.js';
|
||||
/**
|
||||
* @summary 列表项组件。需配合 `<mdui-list>` 组件使用
|
||||
*
|
||||
* ```html
|
||||
* <mdui-list>
|
||||
* ..<mdui-list-subheader>Subheader</mdui-list-subheader>
|
||||
* ..<mdui-list-item>Item 1</mdui-list-item>
|
||||
* ..<mdui-list-item>Item 2</mdui-list-item>
|
||||
* </mdui-list>
|
||||
* ```
|
||||
*
|
||||
* @event focus - 获得焦点时触发
|
||||
* @event blur - 失去焦点时触发
|
||||
*
|
||||
* @slot - 主文本
|
||||
* @slot description - 副文本
|
||||
* @slot icon - 列表项左侧的元素
|
||||
* @slot end-icon - 列表项右侧的元素
|
||||
* @slot custom - 任意自定义内容
|
||||
*
|
||||
* @csspart container - 列表项容器
|
||||
* @csspart icon - 左侧图标
|
||||
* @csspart end-icon - 右侧图标
|
||||
* @csspart body - 中间部分
|
||||
* @csspart headline - 主标题
|
||||
* @csspart description - 副标题
|
||||
*
|
||||
* @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
*/
|
||||
let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
/**
|
||||
* 是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
|
||||
*/
|
||||
this.disabled = false;
|
||||
/**
|
||||
* 是否激活该列表项
|
||||
*/
|
||||
this.active = false;
|
||||
/**
|
||||
* 是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
|
||||
*/
|
||||
this.nonclickable = false;
|
||||
/**
|
||||
* 是否使用圆角形状的列表项
|
||||
*/
|
||||
this.rounded = false;
|
||||
/**
|
||||
* 列表项的垂直对齐方式。可选值包括：
|
||||
*
|
||||
* * `start`：顶部对齐
|
||||
* * `center`：居中对齐
|
||||
* * `end`：底部对齐
|
||||
*/
|
||||
this.alignment = 'center';
|
||||
this.rippleRef = createRef();
|
||||
this.itemRef = createRef();
|
||||
this.hasSlotController = new HasSlotController(this, '[default]', 'description', 'icon', 'end-icon', 'custom');
|
||||
}
|
||||
get rippleElement() {
|
||||
return this.rippleRef.value;
|
||||
}
|
||||
get rippleDisabled() {
|
||||
return this.focusDisabled;
|
||||
}
|
||||
get focusElement() {
|
||||
return this.href && !this.disabled ? this.itemRef.value : this;
|
||||
}
|
||||
get focusDisabled() {
|
||||
return this.href ? this.disabled : this.disabled || this.nonclickable;
|
||||
}
|
||||
render() {
|
||||
const preset = !this.hasSlotController.test('custom');
|
||||
const hasIcon = this.icon || this.hasSlotController.test('icon');
|
||||
const hasEndIcon = this.endIcon || this.hasSlotController.test('end-icon');
|
||||
const hasDescription = this.description || this.hasSlotController.test('description');
|
||||
const isIcon = (element) => isNodeName(element, 'mdui-icon') ||
|
||||
getNodeName(element).startsWith('mdui-icon-');
|
||||
const className = cc({
|
||||
container: true,
|
||||
preset,
|
||||
'has-icon': hasIcon,
|
||||
'has-end-icon': hasEndIcon,
|
||||
'has-description': hasDescription,
|
||||
// icon, end-icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件
|
||||
'is-icon': isIcon(this.iconElements[0]),
|
||||
'is-end-icon': isIcon(this.endIconElements[0]),
|
||||
});
|
||||
return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled
|
||||
? this.renderAnchor({
|
||||
className,
|
||||
content: this.renderInner(),
|
||||
part: 'container',
|
||||
refDirective: ref(this.itemRef),
|
||||
})
|
||||
: html `<div part="container" class="${className}" ${ref(this.itemRef)}>${this.renderInner()}</div>`}`;
|
||||
}
|
||||
renderInner() {
|
||||
const hasDefaultSlot = this.hasSlotController.test('[default]');
|
||||
return html `<slot name="custom"><slot name="icon" part="icon" class="icon">${this.icon
|
||||
? html `<mdui-icon name="${this.icon}"></mdui-icon>`
|
||||
: nothingTemplate}</slot><div part="body" class="body">${hasDefaultSlot
|
||||
? html `<slot part="headline" class="headline"></slot>`
|
||||
: html `<div part="headline" class="headline">${this.headline}</div>`}<slot name="description" part="description" class="description">${this.description}</slot></div><slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
|
||||
? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
|
||||
: nothingTemplate}</slot></slot>`;
|
||||
}
|
||||
};
|
||||
ListItem.styles = [
|
||||
componentStyle,
|
||||
listItemStyle,
|
||||
];
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], ListItem.prototype, "headline", void 0);
|
||||
__decorate([
|
||||
property({ type: Number, reflect: true, attribute: 'headline-line' })
|
||||
], ListItem.prototype, "headlineLine", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], ListItem.prototype, "description", void 0);
|
||||
__decorate([
|
||||
property({ type: Number, reflect: true, attribute: 'description-line' })
|
||||
], ListItem.prototype, "descriptionLine", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], ListItem.prototype, "icon", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true, attribute: 'end-icon' })
|
||||
], ListItem.prototype, "endIcon", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], ListItem.prototype, "disabled", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], ListItem.prototype, "active", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], ListItem.prototype, "nonclickable", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], ListItem.prototype, "rounded", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true })
|
||||
], ListItem.prototype, "alignment", void 0);
|
||||
__decorate([
|
||||
queryAssignedElements({ slot: 'icon', flatten: true })
|
||||
], ListItem.prototype, "iconElements", void 0);
|
||||
__decorate([
|
||||
queryAssignedElements({ slot: 'end-icon', flatten: true })
|
||||
], ListItem.prototype, "endIconElements", void 0);
|
||||
ListItem = __decorate([
|
||||
customElement('mdui-list-item')
|
||||
], ListItem);
|
||||
export { ListItem };
|
||||
1
client/mdui_patched/components/list/list-style.d.ts
vendored
Normal file
1
client/mdui_patched/components/list/list-style.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const listStyle: import("lit").CSSResult;
|
||||
2
client/mdui_patched/components/list/list-style.js
Normal file
2
client/mdui_patched/components/list/list-style.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import { css } from 'lit';
|
||||
export const listStyle = css `:host{display:block;padding:.5rem 0}::slotted(mdui-divider[middle]){margin-left:1rem;margin-right:1.5rem}`;
|
||||
1
client/mdui_patched/components/list/list-subheader-style.d.ts
vendored
Normal file
1
client/mdui_patched/components/list/list-subheader-style.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const listSubheaderStyle: import("lit").CSSResult;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { css } from 'lit';
|
||||
export const listSubheaderStyle = css `:host{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);padding-left:1rem;padding-right:1.5rem;height:3.5rem;line-height:3.5rem}`;
|
||||
26
client/mdui_patched/components/list/list-subheader.d.ts
vendored
Normal file
26
client/mdui_patched/components/list/list-subheader.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import type { CSSResultGroup, TemplateResult } from 'lit';
|
||||
/**
|
||||
* @summary 列表标题组件。需配合 `<mdui-list>` 组件使用
|
||||
*
|
||||
* ```html
|
||||
* <mdui-list>
|
||||
* ..<mdui-list-subheader>Subheader</mdui-list-subheader>
|
||||
* ..<mdui-list-item>Item 1</mdui-list-item>
|
||||
* ..<mdui-list-item>Item 2</mdui-list-item>
|
||||
* </mdui-list>
|
||||
* ```
|
||||
*
|
||||
* @slot - 列表标题文本
|
||||
*/
|
||||
export declare class ListSubheader extends MduiElement<ListSubheaderEventMap> {
|
||||
static styles: CSSResultGroup;
|
||||
protected render(): TemplateResult;
|
||||
}
|
||||
export interface ListSubheaderEventMap {
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mdui-list-subheader': ListSubheader;
|
||||
}
|
||||
}
|
||||
32
client/mdui_patched/components/list/list-subheader.js
Normal file
32
client/mdui_patched/components/list/list-subheader.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import { __decorate } from "tslib";
|
||||
import { html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
||||
import { listSubheaderStyle } from './list-subheader-style.js';
|
||||
/**
|
||||
* @summary 列表标题组件。需配合 `<mdui-list>` 组件使用
|
||||
*
|
||||
* ```html
|
||||
* <mdui-list>
|
||||
* ..<mdui-list-subheader>Subheader</mdui-list-subheader>
|
||||
* ..<mdui-list-item>Item 1</mdui-list-item>
|
||||
* ..<mdui-list-item>Item 2</mdui-list-item>
|
||||
* </mdui-list>
|
||||
* ```
|
||||
*
|
||||
* @slot - 列表标题文本
|
||||
*/
|
||||
let ListSubheader = class ListSubheader extends MduiElement {
|
||||
render() {
|
||||
return html `<slot></slot>`;
|
||||
}
|
||||
};
|
||||
ListSubheader.styles = [
|
||||
componentStyle,
|
||||
listSubheaderStyle,
|
||||
];
|
||||
ListSubheader = __decorate([
|
||||
customElement('mdui-list-subheader')
|
||||
], ListSubheader);
|
||||
export { ListSubheader };
|
||||
26
client/mdui_patched/components/list/list.d.ts
vendored
Normal file
26
client/mdui_patched/components/list/list.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import type { CSSResultGroup, TemplateResult } from 'lit';
|
||||
/**
|
||||
* @summary 列表组件。需配合 `<mdui-list-item>` 组件使用
|
||||
*
|
||||
* ```html
|
||||
* <mdui-list>
|
||||
* ..<mdui-list-subheader>Subheader</mdui-list-subheader>
|
||||
* ..<mdui-list-item>Item 1</mdui-list-item>
|
||||
* ..<mdui-list-item>Item 2</mdui-list-item>
|
||||
* </mdui-list>
|
||||
* ```
|
||||
*
|
||||
* @slot - `<mdui-list-item>` 元素
|
||||
*/
|
||||
export declare class List extends MduiElement<ListEventMap> {
|
||||
static styles: CSSResultGroup;
|
||||
protected render(): TemplateResult;
|
||||
}
|
||||
export interface ListEventMap {
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mdui-list': List;
|
||||
}
|
||||
}
|
||||
29
client/mdui_patched/components/list/list.js
Normal file
29
client/mdui_patched/components/list/list.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import { __decorate } from "tslib";
|
||||
import { html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
||||
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
||||
import { listStyle } from './list-style.js';
|
||||
/**
|
||||
* @summary 列表组件。需配合 `<mdui-list-item>` 组件使用
|
||||
*
|
||||
* ```html
|
||||
* <mdui-list>
|
||||
* ..<mdui-list-subheader>Subheader</mdui-list-subheader>
|
||||
* ..<mdui-list-item>Item 1</mdui-list-item>
|
||||
* ..<mdui-list-item>Item 2</mdui-list-item>
|
||||
* </mdui-list>
|
||||
* ```
|
||||
*
|
||||
* @slot - `<mdui-list-item>` 元素
|
||||
*/
|
||||
let List = class List extends MduiElement {
|
||||
render() {
|
||||
return html `<slot></slot>`;
|
||||
}
|
||||
};
|
||||
List.styles = [componentStyle, listStyle];
|
||||
List = __decorate([
|
||||
customElement('mdui-list')
|
||||
], List);
|
||||
export { List };
|
||||
Reference in New Issue
Block a user