mdui 1.0.2 → 2.0.0

package/components/slider/index.js

@@ -0,0 +1,128 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { live } from 'lit/directives/live.js';
+import { map } from 'lit/directives/map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { FormController, formResets } from '@mdui/shared/controllers/form.js';
+import { defaultValue } from '@mdui/shared/decorators/default-value.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { SliderBase } from './slider-base.js';
+import { style } from './style.js';
+/**
+ * @summary 滑块组件
+ *
+ * ```html
+ * <mdui-slider></mdui-slider>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event input - 值变更时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @csspart track-inactive - 未激活状态的轨道
+ * @csspart track-active - 已激活状态的轨道
+ * @csspart handle - 操作杆
+ * @csspart label 提示文本
+ * @csspart tickmark - 刻度标记
+ */
+export let Slider = class Slider extends SliderBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 滑块的值，将于表单数据一起提交
+         */
+        this.value = 0;
+        /**
+         * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultValue = 0;
+        this.rippleRef = createRef();
+        this.handleRef = createRef();
+        this.formController = new FormController(this);
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    onValueChange() {
+        var _a;
+        // 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();
+        }
+        this.inputRef.value.value = this.value.toString();
+        this.value = parseFloat(this.inputRef.value.value);
+        this.updateStyle();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value < this.min) {
+            this.value = this.min;
+        }
+        if (this.value > this.max) {
+            this.value = this.max;
+        }
+        const onTouchStart = () => {
+            if (!this.disabled) {
+                this.labelVisible = true;
+            }
+        };
+        const onTouchEnd = () => {
+            if (!this.disabled) {
+                this.labelVisible = false;
+            }
+        };
+        this.addEventListener('touchstart', onTouchStart);
+        this.addEventListener('mousedown', onTouchStart);
+        this.addEventListener('touchend', onTouchEnd);
+        this.addEventListener('mouseup', onTouchEnd);
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.updateStyle();
+    }
+    /**
+     * <input /> 用于提供拖拽操作
+     * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
+     */
+    render() {
+        return html `<label><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" .value="${live(this.value.toString())}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${ref(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${ref(this.handleRef)} part="handle" class="handle"><div class="elevation"></div><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value)}</div>${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div part="tickmark" class="tickmark ${classMap({ active: value < this.value })}" style="${styleMap({
+            left: `${((value - this.min) / this.max) * 100}%`,
+            display: value === this.value ? 'none' : 'block',
+        })}"></div>`))}</label>`;
+    }
+    updateStyle() {
+        const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
+        this.trackActiveRef.value.style.width = `${percent}%`;
+        this.handleRef.value.style.left = `${percent}%`;
+    }
+    onInput() {
+        this.value = parseFloat(this.inputRef.value.value);
+        emit(this, 'input');
+        this.updateStyle();
+    }
+};
+Slider.styles = [SliderBase.styles, style];
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "value", void 0);
+__decorate([
+    defaultValue()
+], Slider.prototype, "defaultValue", void 0);
+__decorate([
+    watch('value', true)
+], Slider.prototype, "onValueChange", null);
+Slider = __decorate([
+    customElement('mdui-slider')
+], Slider);

package/components/slider/slider-base-style.d.ts

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

package/components/slider/slider-base-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const sliderBaseStyle = css `:host{position:relative;display:block;width:100%;-webkit-tap-highlight-color:transparent;height:2.5rem;padding:0 1.25rem}label{position:relative;display:block;width:100%;height:100%}input[type=range]{position:absolute;inset:0;z-index:4;height:100%;cursor:pointer;opacity:0;-webkit-appearance:none;appearance:none;margin:0 -1.25rem;padding:0 .75rem}:host([disabled]) input[type=range]{cursor:not-allowed}.track-active,.track-inactive{position:absolute;top:50%;height:.25rem;margin-top:-.125rem}.track-inactive{left:-.125rem;right:-.125rem;border-radius:var(--mdui-shape-corner-full);background-color:rgb(var(--mdui-color-surface-container-highest))}:host([invalid]) .track-inactive{background-color:rgba(var(--mdui-color-error),.12)}:host([disabled]) .track-inactive{background-color:rgba(var(--mdui-color-on-surface),.12)}.track-active{background-color:rgb(var(--mdui-color-primary))}:host([invalid]) .track-active{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .track-active{background-color:rgba(var(--mdui-color-on-surface),.38)}.handle{position:absolute;top:50%;transform:translate(-50%);cursor:pointer;z-index:2;width:2.5rem;height:2.5rem;margin-top:-1.25rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([invalid]) .handle{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.handle .elevation,.handle::before{position:absolute;display:block;content:' ';left:.625rem;top:.625rem;width:1.25rem;height:1.25rem;border-radius:var(--mdui-shape-corner-full)}.handle .elevation{background-color:rgb(var(--mdui-color-primary));box-shadow:var(--mdui-elevation-level1)}:host([invalid]) .handle .elevation{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .handle .elevation{background-color:rgba(var(--mdui-color-on-surface),.38);box-shadow:var(--mdui-elevation-level0)}.handle::before{background-color:rgb(var(--mdui-color-background))}.handle mdui-ripple{border-radius:var(--mdui-shape-corner-full)}.label{position:absolute;left:50%;transform:translateX(-50%) scale(0);transform-origin:center bottom;display:flex;align-items:center;justify-content:center;cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform var(--mdui-motion-duration-short2) var(--mdui-motion-easing-standard);bottom:2.5rem;min-width:1.75rem;height:1.75rem;padding:.375rem .5rem;border-radius:var(--mdui-shape-corner-full);color:rgb(var(--mdui-color-on-primary));font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height);background-color:rgb(var(--mdui-color-primary))}:host([invalid]) .label{color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error))}.label::after{content:' ';position:absolute;z-index:-1;transform:rotate(45deg);width:.875rem;height:.875rem;bottom:-.125rem;background-color:rgb(var(--mdui-color-primary))}:host([invalid]) .label::after{background-color:rgb(var(--mdui-color-error))}.label-visible{transform:translateX(-50%) scale(1);transition:transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.tickmark{position:absolute;top:50%;transform:translate(-50%);width:.125rem;height:.125rem;margin-top:-.0625rem;border-radius:var(--mdui-shape-corner-full);background-color:rgba(var(--mdui-color-on-surface-variant),.38)}:host([invalid]) .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}:host([invalid]) .tickmark.active{background-color:rgba(var(--mdui-color-on-error),.38)}:host([disabled]) .tickmark{background-color:rgba(var(--mdui-color-on-surface),.38)}`;

package/components/slider/slider-base.d.ts

@@ -0,0 +1,92 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { Ref } from 'lit/directives/ref.js';
+declare const SliderBase_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;
+export declare class SliderBase extends SliderBase_base {
+    static styles: CSSResultGroup;
+    /**
+     * 最小允许值，默认为 `0`
+     */
+    min: number;
+    /**
+     * 最大允许值，默认为 `100`
+     */
+    max: number;
+    /**
+     * 步进间隔，默认为 `1`
+     */
+    step: number;
+    /**
+     * 是否添加刻度标记
+     */
+    tickmarks: boolean;
+    /**
+     * 是否不显示文本提示
+     */
+    nolabel: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled: boolean;
+    /**
+     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     *
+     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     */
+    form?: string;
+    /**
+     * 滑块名称，将与表单数据一起提交
+     */
+    name: string;
+    /**
+     * 是否验证未通过
+     *
+     * 该验证为根据是否通过 `setCustomValidity` 方法设置了值，来判断是否验证通过
+     */
+    protected invalid: boolean;
+    protected labelVisible: boolean;
+    protected readonly inputRef: Ref<HTMLInputElement>;
+    protected readonly trackActiveRef: Ref<HTMLElement>;
+    /**
+     * 表单验证状态对象
+     */
+    get validity(): ValidityState;
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage(): string;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement;
+    protected get focusDisabled(): boolean;
+    /**
+     * 用于自定义标签的显示格式
+     */
+    labelFormatter: (value: number) => string;
+    private onDisabledChange;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity(): boolean;
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity(): boolean;
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * 获取候选值组成的数组
+     */
+    protected getCandidateValues(): number[];
+    /**
+     * 渲染浮动标签
+     */
+    protected renderLabel(value: number): TemplateResult;
+    protected onChange(): void;
+}
+export {};

package/components/slider/slider-base.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { sliderBaseStyle } from './slider-base-style.js';
+export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 最小允许值，默认为 `0`
+         */
+        this.min = 0;
+        /**
+         * 最大允许值，默认为 `100`
+         */
+        this.max = 100;
+        /**
+         * 步进间隔，默认为 `1`
+         */
+        this.step = 1;
+        /**
+         * 是否添加刻度标记
+         */
+        this.tickmarks = false;
+        /**
+         * 是否不显示文本提示
+         */
+        this.nolabel = false;
+        /**
+         * 是否禁用
+         */
+        this.disabled = false;
+        /**
+         * 滑块名称，将与表单数据一起提交
+         */
+        this.name = '';
+        /**
+         * 是否验证未通过
+         *
+         * 该验证为根据是否通过 `setCustomValidity` 方法设置了值，来判断是否验证通过
+         */
+        this.invalid = false;
+        // 按下时，label 可见
+        this.labelVisible = false;
+        this.inputRef = createRef();
+        this.trackActiveRef = createRef();
+        /**
+         * 用于自定义标签的显示格式
+         */
+        this.labelFormatter = (value) => value.toString();
+    }
+    /**
+     * 表单验证状态对象
+     */
+    get validity() {
+        return this.inputRef.value.validity;
+    }
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage() {
+        return this.inputRef.value.validationMessage;
+    }
+    get rippleDisabled() {
+        return this.disabled;
+    }
+    get focusElement() {
+        return this.inputRef.value;
+    }
+    get focusDisabled() {
+        return this.disabled;
+    }
+    onDisabledChange() {
+        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();
+    }
+    /**
+     * 获取候选值组成的数组
+     */
+    getCandidateValues() {
+        return Array.from({ length: this.max - this.min + 1 }, (_, index) => index + this.min).filter((value) => !((value - this.min) % this.step));
+    }
+    /**
+     * 渲染浮动标签
+     */
+    renderLabel(value) {
+        return when(!this.nolabel, () => html `<div part="label" class="label ${classMap({ 'label-visible': this.labelVisible })}">${this.labelFormatter(value)}</div>`);
+    }
+    onChange() {
+        emit(this, 'change');
+    }
+}
+SliderBase.styles = [
+    componentStyle,
+    sliderBaseStyle,
+];
+__decorate([
+    property({ type: Number, reflect: true })
+], SliderBase.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SliderBase.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SliderBase.prototype, "step", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SliderBase.prototype, "tickmarks", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SliderBase.prototype, "nolabel", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SliderBase.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], SliderBase.prototype, "form", void 0);
+__decorate([
+    property({ reflect: true })
+], SliderBase.prototype, "name", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], SliderBase.prototype, "invalid", void 0);
+__decorate([
+    state()
+], SliderBase.prototype, "labelVisible", void 0);
+__decorate([
+    property({ attribute: false })
+], SliderBase.prototype, "labelFormatter", void 0);
+__decorate([
+    watch('disabled', true)
+], SliderBase.prototype, "onDisabledChange", null);

package/components/slider/style.d.ts

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

package/components/slider/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `.track-active{left:-.125rem;border-radius:var(--mdui-shape-corner-full) 0 0 var(--mdui-shape-corner-full)}`;

package/components/slider.d.ts

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

package/components/slider.js

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

package/components/snackbar/index.d.ts

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+import '@mdui/shared/icons/clear.js';
+import '../button-icon.js';
+import '../button.js';
+import '../icon.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @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 declare class Snackbar extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 是否显示 Snackbar
+     */
+    open: boolean;
+    /**
+     * Snackbar 出现的位置。默认为 `bottom`。可选值为：
+     *
+     * * `top`：位于顶部，居中对齐
+     * * `top-start`：位于顶部，左对齐
+     * * `top-end`：位于顶部，右对齐
+     * * `bottom`：位于底部，居中对齐
+     * * `bottom-start`：位于底部，左对齐
+     * * `bottom-end`：位于底部，右对齐
+     */
+    placement: /*位于顶部，居中对齐*/ 'top' | /*位于顶部，左对齐*/ 'top-start' | /*位于顶部，右对齐*/ 'top-end' | /*位于底部，居中对齐*/ 'bottom' | /*位于底部，左对齐*/ 'bottom-start' | /*位于底部，右对齐*/ 'bottom-end';
+    /**
+     * 操作按钮的文本。也可以通过 `slot="action"` 设置操作按钮
+     */
+    action?: string;
+    /**
+     * 操作按钮是否为 loading 状态
+     */
+    actionLoading: boolean;
+    /**
+     * 是否在右侧显示关闭按钮
+     */
+    closeable: boolean;
+    /**
+     * 关闭按钮中的 Material Icons 图标名。也可以通过 `slot="close-icon"` 设置
+     */
+    closeIcon?: string;
+    /**
+     * 消息文本最多显示几行。默认不限制行数。可选值为：
+     *
+     * * `1`：消息文本最多显示一行
+     * * `2`：消息文本最多显示两行
+     */
+    messageLine?: /*消息文本最多显示一行*/ 1 | /*消息文本最多显示两行*/ 2;
+    /**
+     * 在多长时间后自动关闭（单位为毫秒）。设置为 `0` 时，不自动关闭。默认为 5 秒后自动关闭。
+     */
+    autoCloseDelay: number;
+    /**
+     * 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
+     */
+    closeOnOutsideClick: boolean;
+    private closeTimeout;
+    constructor();
+    private onOpenChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    /**
+     * 在 document 上点击时，根据条件判断是否要关闭 snackbar
+     */
+    private onDocumentClick;
+    private onActionClick;
+    private onCloseClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-snackbar': Snackbar;
+    }
+}