mdui 1.0.2 → 2.0.0

package/components/radio/radio-group.js

@@ -0,0 +1,268 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/closest.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import { isNodeName } from '@mdui/jq/shared/helper.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 { 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 { radioGroupStyle } from './radio-group-style.js';
+/**
+ * @summary 单选框组组件。需与 `<mdui-radio>` 组件配合使用
+ *
+ * ```html
+ * <mdui-radio-group value="chinese">
+ * ..<mdui-radio value="chinese">Chinese</mdui-radio>
+ * ..<mdui-radio value="english">English</mdui-radio>
+ * </mdui-radio-group>
+ * ```
+ *
+ * @event change - 选中值变化时触发
+ * @event input - 选中值变化时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - `<mdui-radio>` 元素
+ */
+export let RadioGroup = class RadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为禁用状态
+         */
+        this.disabled = false;
+        /**
+         * 单选框名称，将与表单数据一起提交
+         */
+        this.name = '';
+        /**
+         * 单选框的值，将于表单数据一起提交
+         */
+        this.value = '';
+        /**
+         * 默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultValue = '';
+        /**
+         * 提交表单时，是否必须选中其中一个单选框
+         */
+        this.required = false;
+        /**
+         * 是否验证未通过
+         */
+        this.invalid = false;
+        this.inputRef = createRef();
+        this.formController = new FormController(this);
+    }
+    /**
+     * 表单验证状态对象
+     */
+    get validity() {
+        return this.inputRef.value.validity;
+    }
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage() {
+        return this.inputRef.value.validationMessage;
+    }
+    get radios() {
+        return $(this).find('mdui-radio').get();
+    }
+    get radiosEnabled() {
+        return $(this)
+            .find('mdui-radio:not([disabled])')
+            .get();
+    }
+    async onValueChange() {
+        var _a;
+        emit(this, 'input');
+        emit(this, 'change');
+        this.radios.forEach((radio) => (radio.checked = radio.value === this.value));
+        this.updateRadioFocusable();
+        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();
+        }
+    }
+    onInvalidChange() {
+        this.radiosEnabled.forEach((radio) => (radio.invalid = this.invalid));
+    }
+    onDisabledChange() {
+        this.radios.forEach((radio) => (radio.groupDisabled = this.disabled));
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `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.inputRef.value.blur();
+                this.inputRef.value.focus();
+            }
+        }
+        return !this.invalid;
+    }
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message) {
+        this.inputRef.value.setCustomValidity(message);
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    render() {
+        return html `<fieldset><input ${ref(this.inputRef)} type="radio" class="input" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .checked="${!!this.value}" .required="${this.required}" tabindex="-1" @keydown="${this.onKeyDown}"><slot @click="${this.onRadioClick}" @keydown="${this.onKeyDown}" @slotchange="${this.onSlotChange}" @change="${this.onCheckedChange}"></slot></fieldset>`;
+    }
+    // 更新 mdui-radio 的 checked 后，需要更新可聚焦状态
+    // 同一个 mdui-radio-group 中的多个 mdui-radio，仅有一个可聚焦
+    // 若有已选中的，则已选中的可聚焦；若没有已选中的，则第一个可聚焦
+    updateRadioFocusable() {
+        const radios = this.radios;
+        const radioChecked = radios.find((radio) => radio.checked);
+        if (radioChecked) {
+            radios.forEach((radio) => (radio.focusable = radio === radioChecked));
+        }
+        else {
+            this.radiosEnabled.forEach((radio, index) => (radio.focusable = !index));
+        }
+    }
+    async onRadioClick(event) {
+        const target = event.target;
+        const radio = isNodeName(target, 'mdui-radio')
+            ? target
+            : $(target).closest('mdui-radio')[0];
+        if (radio.disabled) {
+            return;
+        }
+        this.value = radio.value;
+        await this.updateComplete;
+        radio.focus();
+    }
+    /**
+     * 在内部的 `<mdui-radio>` 上按下按键时，在 `<mdui-radio>` 之间切换焦点
+     */
+    onKeyDown(event) {
+        var _a;
+        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
+            return;
+        }
+        const radios = this.radiosEnabled;
+        const radioChecked = (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0];
+        const incr = event.key === ' '
+            ? 0
+            : ['ArrowUp', 'ArrowLeft'].includes(event.key)
+                ? -1
+                : 1;
+        let index = radios.indexOf(radioChecked) + incr;
+        if (index < 0) {
+            index = radios.length - 1;
+        }
+        if (index > radios.length - 1) {
+            index = 0;
+        }
+        this.value = radios[index].value;
+        this.updateComplete.then(() => {
+            radios[index].focus();
+        });
+        event.preventDefault();
+    }
+    onSlotChange() {
+        this.radios.forEach((radio) => (radio.checked = radio.value === this.value));
+        this.updateRadioFocusable();
+    }
+    /**
+     * slot 中的 mdui-radio 的 checked 变更时触发的事件
+     */
+    onCheckedChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        this.value = target.value;
+    }
+};
+RadioGroup.styles = [
+    componentStyle,
+    radioGroupStyle,
+];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], RadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], RadioGroup.prototype, "form", void 0);
+__decorate([
+    property({ reflect: true })
+], RadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], RadioGroup.prototype, "value", void 0);
+__decorate([
+    defaultValue()
+], RadioGroup.prototype, "defaultValue", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], RadioGroup.prototype, "required", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], RadioGroup.prototype, "invalid", void 0);
+__decorate([
+    watch('value', true)
+], RadioGroup.prototype, "onValueChange", null);
+__decorate([
+    watch('invalid')
+], RadioGroup.prototype, "onInvalidChange", null);
+__decorate([
+    watch('disabled')
+], RadioGroup.prototype, "onDisabledChange", null);
+RadioGroup = __decorate([
+    customElement('mdui-radio-group')
+], RadioGroup);

package/components/radio/radio-style.d.ts

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

package/components/radio/radio-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const radioStyle = css `:host{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none;border-radius:.125rem;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)}.icon{display:flex;position:absolute;font-size:1.5rem;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.unchecked-icon{transition-property:color;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .unchecked-icon,:host([hover]) .unchecked-icon,:host([pressed]) .unchecked-icon{color:rgb(var(--mdui-color-on-surface))}.checked-icon{opacity:0;transform:scale(.2);transition-property:color,opacity,transform;color:rgb(var(--mdui-color-primary))}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:2.5rem;min-width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface));transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .checked-icon{opacity:1;transform:scale(.5)}:host([invalid]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([invalid]) .icon{color:rgb(var(--mdui-color-error))}:host([invalid]) .label{color:rgb(var(--mdui-color-error))}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon,:host([group-disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label,:host([group-disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/radio/radio.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+import '@mdui/shared/icons/circle.js';
+import '@mdui/shared/icons/radio-button-unchecked.js';
+import '../icon.js';
+import type { Ripple } from '../ripple/index.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare const Radio_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 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
+ *
+ * ```html
+ * <mdui-radio-group value="chinese">
+ * ..<mdui-radio value="chinese">Chinese</mdui-radio>
+ * ..<mdui-radio value="english">English</mdui-radio>
+ * </mdui-radio-group>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 选中该单选项时触发
+ *
+ * @slot - 文本
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ *
+ * @csspart control - 左侧图标容器
+ * @csspart unchecked-icon 未选中状态的图标
+ * @csspart checked-icon 选中状态的图标
+ * @csspart label - 文本
+ */
+export declare class Radio extends Radio_base {
+    static styles: CSSResultGroup;
+    /**
+     * 当前单选项的值
+     */
+    value: string;
+    /**
+     * 是否禁用当前单选项
+     */
+    disabled: boolean;
+    /**
+     * 当前单选项是否已选中
+     */
+    checked: boolean;
+    /**
+     * 未选中状态的 Material Icons 图标名。也可以通过 `slot="unchecked-icon"` 设置
+     */
+    uncheckedIcon?: string;
+    /**
+     * 选中状态的 Material Icons 图标名。也可以通过 `slot="checked-icon"` 设置
+     */
+    checkedIcon?: string;
+    protected invalid: boolean;
+    protected groupDisabled: boolean;
+    protected focusable: boolean;
+    private readonly rippleRef;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement;
+    protected get focusDisabled(): boolean;
+    private onCheckedChange;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    private isDisabled;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-radio': Radio;
+    }
+}
+export {};

package/components/radio/radio.js

@@ -0,0 +1,144 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.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 '@mdui/shared/icons/circle.js';
+import '@mdui/shared/icons/radio-button-unchecked.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 { radioStyle } from './radio-style.js';
+/**
+ * @summary 单选框组件。需与 `<mdui-radio-group>` 组件配合使用
+ *
+ * ```html
+ * <mdui-radio-group value="chinese">
+ * ..<mdui-radio value="chinese">Chinese</mdui-radio>
+ * ..<mdui-radio value="english">English</mdui-radio>
+ * </mdui-radio-group>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 选中该单选项时触发
+ *
+ * @slot - 文本
+ * @slot unchecked-icon - 未选中状态的图标
+ * @slot checked-icon - 选中状态的图标
+ *
+ * @csspart control - 左侧图标容器
+ * @csspart unchecked-icon 未选中状态的图标
+ * @csspart checked-icon 选中状态的图标
+ * @csspart label - 文本
+ */
+export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 当前单选项的值
+         */
+        this.value = '';
+        /**
+         * 是否禁用当前单选项
+         */
+        this.disabled = false;
+        /**
+         * 当前单选项是否已选中
+         */
+        this.checked = false;
+        // 是否验证未通过。由 mdui-radio-group 控制该参数
+        this.invalid = false;
+        // 父组件中是否设置了禁用。由 mdui-radio-group 控制该参数
+        this.groupDisabled = false;
+        // 是否可聚焦。由 mdui-radio-group 控制该参数
+        this.focusable = false;
+        this.rippleRef = createRef();
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.isDisabled();
+    }
+    get focusElement() {
+        return this;
+    }
+    get focusDisabled() {
+        return this.isDisabled() || !this.focusable;
+    }
+    onCheckedChange() {
+        if (this.checked) {
+            emit(this, 'change');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', () => {
+            if (!this.isDisabled()) {
+                this.checked = true;
+            }
+        });
+    }
+    render() {
+        return html `<i part="control"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
+            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-radio-button-unchecked class="i"></mdui-icon-radio-button-unchecked>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
+            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label"></slot>`;
+    }
+    isDisabled() {
+        return this.disabled || this.groupDisabled;
+    }
+};
+Radio.styles = [componentStyle, radioStyle];
+__decorate([
+    property({ reflect: true })
+], Radio.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Radio.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Radio.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'unchecked-icon' })
+], Radio.prototype, "uncheckedIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'checked-icon' })
+], Radio.prototype, "checkedIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Radio.prototype, "invalid", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'group-disabled',
+    })
+], Radio.prototype, "groupDisabled", void 0);
+__decorate([
+    state()
+], Radio.prototype, "focusable", void 0);
+__decorate([
+    watch('checked', true)
+], Radio.prototype, "onCheckedChange", null);
+Radio = __decorate([
+    customElement('mdui-radio')
+], Radio);

package/components/radio-group.d.ts

@@ -0,0 +1 @@
+export * from './radio/radio-group.js';

package/components/radio-group.js

@@ -0,0 +1 @@
+export * from './radio/radio-group.js';

package/components/radio.d.ts

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

package/components/radio.js

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

package/components/range-slider/index.d.ts

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import '@mdui/jq/methods/css.js';
+import { SliderBase } from '../slider/slider-base.js';
+import type { Ripple } from '../ripple/index.js';
+import type { FormControl } from '@mdui/jq/shared/form.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 范围滑块组件
+ *
+ * ```html
+ * <mdui-range-slider></mdui-range-slider>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 在值发生了变更，且失去了焦点时，将触发该事件
+ * @event input - 值变更时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @csspart track-inactive - 未激活状态的轨道
+ * @csspart track-active - 已激活状态的轨道
+ * @csspart handle - 操作杆
+ * @csspart label - 提示文本
+ * @csspart tickmark - 刻度标记
+ */
+export declare class RangeSlider extends SliderBase implements FormControl {
+    static styles: CSSResultGroup;
+    /**
+     * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+     */
+    defaultValue: number[];
+    /**
+     * 当前操作的是哪一个 handle
+     */
+    private currentHandle;
+    private hoverHandle?;
+    private readonly rippleStartRef;
+    private readonly rippleEndRef;
+    private readonly handleStartRef;
+    private readonly handleEndRef;
+    private readonly formController;
+    private _value;
+    /**
+     * 滑块的值，为数组格式；将于表单数据一起提交
+     *
+     * NOTE:
+     * 该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     */
+    get value(): number[];
+    set value(_value: number[]);
+    protected get rippleElement(): Ripple[];
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * <input /> 用于提供拖拽操作
+     * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
+     */
+    protected render(): TemplateResult;
+    protected getRippleIndex: () => 0 | 1;
+    private updateStyle;
+    private onInput;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-range-slider': RangeSlider;
+    }
+}