mdui 1.0.2 → 2.0.0

package/components/snackbar/index.js

@@ -0,0 +1,285 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
+import { breakpoint } from '@mdui/shared/helpers/breakpoint.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import '@mdui/shared/icons/clear.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import '../button-icon.js';
+import '../button.js';
+import '../icon.js';
+import { style } from './style.js';
+/**
+ * @summary 消息条组件
+ *
+ * ```html
+ * <mdui-snackbar>message</mdui-snackbar>
+ * ```
+ *
+ * @event open - Snackbar 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 Snackbar 显示
+ * @event opened - Snackbar 显示动画完成时，事件被触发
+ * @event close - Snackbar 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 Snackbar 关闭
+ * @event closed - Snackbar 隐藏动画完成时，事件被触发
+ * @event action-click - 点击操作按钮时触发
+ *
+ * @slot - Snackbar 中的消息文本内容
+ * @slot action - 右侧的操作按钮
+ * @slot close-button - 右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示该按钮
+ * @slot close-icon - 右侧的关闭按钮中的图标
+ *
+ * @csspart message - 消息文本
+ * @csspart action - 操作按钮
+ * @csspart close-button - 关闭按钮
+ * @csspart close-icon - 关闭按钮中的图标
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export let Snackbar = class Snackbar extends LitElement {
+    constructor() {
+        super();
+        /**
+         * 是否显示 Snackbar
+         */
+        this.open = false;
+        /**
+         * Snackbar 出现的位置。默认为 `bottom`。可选值为：
+         *
+         * * `top`：位于顶部，居中对齐
+         * * `top-start`：位于顶部，左对齐
+         * * `top-end`：位于顶部，右对齐
+         * * `bottom`：位于底部，居中对齐
+         * * `bottom-start`：位于底部，左对齐
+         * * `bottom-end`：位于底部，右对齐
+         */
+        this.placement = 'bottom';
+        /**
+         * 操作按钮是否为 loading 状态
+         */
+        this.actionLoading = false;
+        /**
+         * 是否在右侧显示关闭按钮
+         */
+        this.closeable = false;
+        /**
+         * 在多长时间后自动关闭（单位为毫秒）。设置为 `0` 时，不自动关闭。默认为 5 秒后自动关闭。
+         */
+        this.autoCloseDelay = 5000;
+        /**
+         * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
+         */
+        this.closeOnOutsideClick = false;
+        this.onDocumentClick = this.onDocumentClick.bind(this);
+    }
+    async onOpenChange() {
+        const isMobile = breakpoint().down('sm');
+        const isCenteredHorizontally = ['top', 'bottom'].includes(this.placement);
+        const easingLinear = getEasing(this, 'linear');
+        const easingEmphasizedDecelerate = getEasing(this, 'emphasized-decelerate');
+        const children = Array.from(this.renderRoot.querySelectorAll('.message, .action-group'));
+        // 手机上始终使用全宽的样式，但 @media 选择器中无法使用 CSS 变量，所以使用 js 来设置样式
+        const commonStyle = isMobile
+            ? { left: '1rem', right: '1rem', minWidth: 0 }
+            : isCenteredHorizontally
+                ? { left: '50%' }
+                : {};
+        // 打开
+        // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
+        if (this.open) {
+            const hasUpdated = this.hasUpdated;
+            if (!hasUpdated) {
+                await this.updateComplete;
+            }
+            if (hasUpdated) {
+                const requestOpen = emit(this, 'open', { cancelable: true });
+                if (requestOpen.defaultPrevented) {
+                    return;
+                }
+            }
+            window.clearTimeout(this.closeTimeout);
+            if (this.autoCloseDelay) {
+                this.closeTimeout = window.setTimeout(() => {
+                    this.open = false;
+                }, this.autoCloseDelay);
+            }
+            this.style.display = 'flex';
+            await Promise.all([
+                stopAnimations(this),
+                ...children.map((child) => stopAnimations(child)),
+            ]);
+            const duration = getDuration(this, 'medium4');
+            const getOpenStyle = (ident) => {
+                const scaleY = `scaleY(${ident === 'start' ? 0 : 1})`;
+                if (isMobile) {
+                    return { transform: scaleY };
+                }
+                else {
+                    return {
+                        transform: [
+                            scaleY,
+                            isCenteredHorizontally ? 'translateX(-50%)' : '',
+                        ]
+                            .filter((i) => i)
+                            .join(' '),
+                    };
+                }
+            };
+            await Promise.all([
+                animateTo(this, [
+                    { ...getOpenStyle('start'), ...commonStyle },
+                    { ...getOpenStyle('end'), ...commonStyle },
+                ], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingEmphasizedDecelerate,
+                    fill: 'forwards',
+                }),
+                animateTo(this, [{ opacity: 0 }, { opacity: 1, offset: 0.5 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                    fill: 'forwards',
+                }),
+                ...children.map((child) => animateTo(child, [
+                    { opacity: 0 },
+                    { opacity: 0, offset: 0.2 },
+                    { opacity: 1, offset: 0.8 },
+                    { opacity: 1 },
+                ], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                })),
+            ]);
+            if (hasUpdated) {
+                emit(this, 'opened');
+            }
+            return;
+        }
+        // 关闭
+        if (!this.open && this.hasUpdated) {
+            const requestClose = emit(this, 'close', { cancelable: true });
+            if (requestClose.defaultPrevented) {
+                return;
+            }
+            window.clearTimeout(this.closeTimeout);
+            await Promise.all([
+                stopAnimations(this),
+                ...children.map((child) => stopAnimations(child)),
+            ]);
+            const duration = getDuration(this, 'short4');
+            const getCloseStyle = (ident) => {
+                const opacity = ident === 'start' ? 1 : 0;
+                const styles = { opacity };
+                if (!isMobile && isCenteredHorizontally) {
+                    Object.assign(styles, { transform: 'translateX(-50%)' });
+                }
+                return styles;
+            };
+            await Promise.all([
+                animateTo(this, [
+                    { ...getCloseStyle('start'), ...commonStyle },
+                    { ...getCloseStyle('end'), ...commonStyle },
+                ], {
+                    duration,
+                    easing: easingLinear,
+                    fill: 'forwards',
+                }),
+                ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })),
+            ]);
+            this.style.display = 'none';
+            emit(this, 'closed');
+            return;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('pointerdown', this.onDocumentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointerdown', this.onDocumentClick);
+    }
+    render() {
+        return html `<slot part="message" class="message"></slot><div class="action-group"><slot name="action" part="action" class="action" @click="${this.onActionClick}">${this.action
+            ? html `<mdui-button variant="text" loading="${this.actionLoading}">${this.action}</mdui-button>`
+            : nothingTemplate}</slot>${when(this.closeable, () => html `<slot name="close-button" part="close-button" class="close-button" @click="${this.onCloseClick}"><mdui-button-icon><slot name="close-icon" part="close-icon">${this.closeIcon
+            ? html `<mdui-icon name="${this.closeIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot></mdui-button-icon></slot>`)}</div>`;
+    }
+    /**
+     * 在 document 上点击时，根据条件判断是否要关闭 snackbar
+     */
+    onDocumentClick(e) {
+        if (!this.open || !this.closeOnOutsideClick) {
+            return;
+        }
+        const target = e.target;
+        if (!this.contains(target) && this !== target) {
+            this.open = false;
+        }
+    }
+    onActionClick(event) {
+        event.stopPropagation();
+        emit(this, 'action-click');
+    }
+    onCloseClick() {
+        this.open = false;
+    }
+};
+Snackbar.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Snackbar.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], Snackbar.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'action' })
+], Snackbar.prototype, "action", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'action-loading',
+    })
+], Snackbar.prototype, "actionLoading", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Snackbar.prototype, "closeable", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'close-icon' })
+], Snackbar.prototype, "closeIcon", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'message-line' })
+    // eslint-disable-next-line prettier/prettier
+], Snackbar.prototype, "messageLine", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'auto-close-delay' })
+], Snackbar.prototype, "autoCloseDelay", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'close-on-outside-click',
+        converter: booleanConverter,
+    })
+], Snackbar.prototype, "closeOnOutsideClick", void 0);
+__decorate([
+    watch('open')
+], Snackbar.prototype, "onOpenChange", null);
+Snackbar = __decorate([
+    customElement('mdui-snackbar')
+], Snackbar);

package/components/snackbar/style.d.ts

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

package/components/snackbar/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-extra-small);--z-index:2400;position:fixed;z-index:var(--z-index);display:none;align-items:center;flex-wrap:wrap;border-radius:var(--shape-corner);min-width:20rem;max-width:36rem;padding:.25rem 0;box-shadow:var(--mdui-elevation-level3);background-color:rgb(var(--mdui-color-inverse-surface));color:rgb(var(--mdui-color-inverse-on-surface));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([placement^=top]){transform-origin:top;top:1rem}:host([placement^=bottom]){transform-origin:bottom;bottom:1rem}:host([placement=bottom-start]),:host([placement=top-start]){left:1rem}:host([placement=bottom-end]),:host([placement=top-end]){right:1rem}.message{display:block;margin:.625rem 1rem}:host([message-line='1']) .message{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([message-line='2']) .message{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}.action-group{display:flex;align-items:center;margin-left:auto;padding-right:.5rem}.action,.close-button{display:inline-flex;align-items:center;justify-content:center}.action{color:rgb(var(--mdui-color-inverse-primary));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.action mdui-button,::slotted(mdui-button[slot=action][variant=outlined]),::slotted(mdui-button[slot=action][variant=text]){color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-primary)}.action mdui-button::part(button){padding:0 .5rem}.close-button{margin:0 -.25rem 0 .25rem;font-size:1.5rem;color:rgb(var(--mdui-color-inverse-on-surface))}.close-button mdui-button-icon,::slotted(mdui-button-icon[slot=close-button][variant=outlined]),::slotted(mdui-button-icon[slot=close-button][variant=standard]){font-size:inherit;color:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}.close-button .i,::slotted([slot=close-icon]){font-size:inherit}`;

package/components/snackbar.d.ts

@@ -0,0 +1 @@
+export * from './snackbar/index.js';

package/components/snackbar.js

@@ -0,0 +1 @@
+export * from './snackbar/index.js';

package/components/switch/index.d.ts

@@ -0,0 +1,123 @@
+import { LitElement } from 'lit';
+import '@mdui/shared/icons/check.js';
+import '../icon.js';
+import type { Ripple } from '../ripple/index.js';
+import type { FormControl } from '@mdui/jq/shared/form.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare const Switch_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+/**
+ * @summary 开关切换组件
+ *
+ * ```html
+ * <mdui-switch></mdui-switch>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 选中状态变更时触发
+ * @event input - 选中状态变更时触发
+ * @event invalid - 表单字段验证不通过时触发
+ *
+ * @slot unchecked-icon - 未选中状态的元素
+ * @slot checked-icon - 选中状态的元素
+ *
+ * @csspart track - 轨道
+ * @csspart thumb - 图标容器
+ * @csspart unchecked-icon - 未选中状态的图标
+ * @csspart checked-icon 选中状态的图标
+ *
+ * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class Switch extends Switch_base implements FormControl {
+    static styles: CSSResultGroup;
+    /**
+     * 是否为禁用状态
+     */
+    disabled: boolean;
+    /**
+     * 是否为选中状态
+     */
+    checked: boolean;
+    /**
+     * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+     */
+    defaultChecked: boolean;
+    /**
+     * 未选中状态的 Material Icons 图标名。也可以通过 `slot="unchecked-icon"` 设置
+     */
+    uncheckedIcon?: string;
+    /**
+     * 选中状态的 Material Icons 图标名。也可以通过 `slot="checked-icon"` 设置
+     *
+     * 默认为 check 图标，可传入空字符串移除默认图标
+     */
+    checkedIcon?: string;
+    /**
+     * 提交表单时，是否必须选中该开关
+     */
+    required: boolean;
+    /**
+     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     *
+     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     */
+    form?: string;
+    /**
+     * 开关的名称，将与表单数据一起提交
+     */
+    name: string;
+    /**
+     * 开关的值，将于表单数据一起提交
+     */
+    value: string;
+    /**
+     * 是否验证未通过
+     */
+    private invalid;
+    private readonly rippleRef;
+    private readonly inputRef;
+    private readonly formController;
+    private readonly hasSlotController;
+    /**
+     * 表单验证状态对象
+     */
+    get validity(): ValidityState;
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage(): string;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement;
+    protected get focusDisabled(): boolean;
+    private onDisabledChange;
+    private onCheckedChange;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity(): boolean;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity(): boolean;
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message: string): void;
+    protected render(): TemplateResult;
+    /**
+     * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom
+     */
+    private onChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-switch': Switch;
+    }
+}
+export {};

package/components/switch/index.js

@@ -0,0 +1,245 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { FormController, formResets } from '@mdui/shared/controllers/form.js';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { defaultValue } from '@mdui/shared/decorators/default-value.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import '@mdui/shared/icons/check.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../icon.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { style } from './style.js';
+/**
+ * @summary 开关切换组件
+ *
+ * ```html
+ * <mdui-switch></mdui-switch>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 选中状态变更时触发
+ * @event input - 选中状态变更时触发
+ * @event invalid - 表单字段验证不通过时触发
+ *
+ * @slot unchecked-icon - 未选中状态的元素
+ * @slot checked-icon - 选中状态的元素
+ *
+ * @csspart track - 轨道
+ * @csspart thumb - 图标容器
+ * @csspart unchecked-icon - 未选中状态的图标
+ * @csspart checked-icon 选中状态的图标
+ *
+ * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为禁用状态
+         */
+        this.disabled = false;
+        /**
+         * 是否为选中状态
+         */
+        this.checked = false;
+        /**
+         * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultChecked = false;
+        /**
+         * 提交表单时，是否必须选中该开关
+         */
+        this.required = false;
+        /**
+         * 开关的名称，将与表单数据一起提交
+         */
+        this.name = '';
+        /**
+         * 开关的值，将于表单数据一起提交
+         */
+        this.value = 'on';
+        /**
+         * 是否验证未通过
+         */
+        this.invalid = false;
+        this.rippleRef = createRef();
+        this.inputRef = createRef();
+        this.formController = new FormController(this, {
+            value: (control) => (control.checked ? control.value : undefined),
+            defaultValue: (control) => control.defaultChecked,
+            setValue: (control, checked) => (control.checked = checked),
+        });
+        this.hasSlotController = new HasSlotController(this, 'unchecked-icon');
+    }
+    /**
+     * 表单验证状态对象
+     */
+    get validity() {
+        return this.inputRef.value.validity;
+    }
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage() {
+        return this.inputRef.value.validationMessage;
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.disabled;
+    }
+    get focusElement() {
+        return this.inputRef.value;
+    }
+    get focusDisabled() {
+        return this.disabled;
+    }
+    async onDisabledChange() {
+        await this.updateComplete;
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    async onCheckedChange() {
+        var _a;
+        await this.updateComplete;
+        // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
+        const form = this.formController.getForm();
+        if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+            this.invalid = false;
+            formResets.get(form).delete(this);
+        }
+        else {
+            this.invalid = !this.inputRef.value.checkValidity();
+        }
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity() {
+        const valid = this.inputRef.value.checkValidity();
+        if (!valid) {
+            emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+        }
+        return valid;
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity() {
+        this.invalid = !this.inputRef.value.reportValidity();
+        if (this.invalid) {
+            const requestInvalid = emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+            // 调用了 preventDefault() 时，隐藏默认的表单错误提示
+            if (requestInvalid.defaultPrevented) {
+                this.blur();
+                this.focus();
+            }
+        }
+        return !this.invalid;
+    }
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message) {
+        this.inputRef.value.setCustomValidity(message);
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    render() {
+        return html `<label class="${classMap({
+            'has-unchecked-icon': this.uncheckedIcon || this.hasSlotController.test('unchecked-icon'),
+        })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"><div part="track" class="track"><div part="thumb" class="thumb"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="checked-icon" part="checked-icon" class="checked-icon">${this.checkedIcon
+            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+            : this.checkedIcon === ''
+                ? nothingTemplate
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot><slot name="unchecked-icon" part="unchecked-icon" class="unchecked-icon">${this.uncheckedIcon
+            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot></div></div></label>`;
+    }
+    /**
+     * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom
+     */
+    onChange() {
+        this.checked = this.inputRef.value.checked;
+        emit(this, 'change');
+    }
+};
+Switch.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Switch.prototype, "checked", void 0);
+__decorate([
+    defaultValue('checked')
+], Switch.prototype, "defaultChecked", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'unchecked-icon' })
+], Switch.prototype, "uncheckedIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'checked-icon' })
+], Switch.prototype, "checkedIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Switch.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], Switch.prototype, "form", void 0);
+__decorate([
+    property({ reflect: true })
+], Switch.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], Switch.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Switch.prototype, "invalid", void 0);
+__decorate([
+    watch('disabled', true),
+    watch('required', true)
+], Switch.prototype, "onDisabledChange", null);
+__decorate([
+    watch('checked', true)
+], Switch.prototype, "onCheckedChange", null);
+Switch = __decorate([
+    customElement('mdui-switch')
+], Switch);

package/components/switch/style.d.ts

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

package/components/switch/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);--shape-corner-thumb:var(--mdui-shape-corner-full);position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;height:2.5rem}:host([disabled]){cursor:default;pointer-events:none}label{display:inline-flex;align-items:center;width:100%;height:100%;white-space:nowrap;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}.track{position:relative;display:flex;align-items:center;border-radius:var(--shape-corner);transition-property:background-color,border-width;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:2rem;width:3.25rem;border:.125rem solid rgb(var(--mdui-color-outline));background-color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .track{background-color:rgb(var(--mdui-color-primary));border-width:0}:host([invalid]) .track{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error))}:host([disabled]) .track{background-color:rgba(var(--mdui-color-surface-container-highest),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled][checked]) .track{background-color:rgba(var(--mdui-color-on-surface),.12)}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}mdui-ripple{border-radius:50%;transition-property:left,top;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);width:2.5rem;height:2.5rem}.thumb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-thumb);transition-property:width,height,left,background-color;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:1rem;width:1rem;left:.375rem;background-color:rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.thumb mdui-ripple{left:-.75rem;top:-.75rem}.has-unchecked-icon .thumb{height:1.5rem;width:1.5rem;left:.125rem}.has-unchecked-icon .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([focus-visible]) .thumb,:host([hover]) .thumb,:host([pressed]) .thumb{background-color:rgb(var(--mdui-color-on-surface-variant))}:host([checked]) .thumb{height:1.5rem;width:1.5rem;left:1.5rem;background-color:rgb(var(--mdui-color-on-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([pressed]) .thumb{height:1.75rem;width:1.75rem;left:0}:host([pressed]) .thumb mdui-ripple{left:-.375rem;top:-.375rem}:host([pressed][checked]) .thumb{left:1.375rem}:host([focus-visible][checked]) .thumb,:host([hover][checked]) .thumb,:host([pressed][checked]) .thumb{background-color:rgb(var(--mdui-color-primary-container))}:host([invalid]) .thumb{background-color:rgb(var(--mdui-color-error));--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([focus-visible][invalid]) .thumb,:host([hover][invalid]) .thumb,:host([pressed][invalid]) .thumb{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .thumb{background-color:rgba(var(--mdui-color-on-surface),.38)}:host([disabled][checked]) .thumb{background-color:rgb(var(--mdui-color-surface))}.checked-icon,.unchecked-icon{display:flex;position:absolute;transition-property:opacity,transform;font-size:1rem}.unchecked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .unchecked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([disabled]) .unchecked-icon{color:rgba(var(--mdui-color-surface-container-highest),.38)}.checked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-on-primary-container))}:host([checked]) .checked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3)}:host([invalid]) .checked-icon{color:rgb(var(--mdui-color-error-container))}:host([disabled]) .checked-icon{color:rgba(var(--mdui-color-on-surface),.38)}.checked-icon .i,.unchecked-icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){font-size:inherit;color:inherit}`;