mdui 2.0.1 → 2.0.3

package/components/radio/radio.js

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.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';
@@ -35,7 +36,7 @@ import { radioStyle } from './radio-style.js';
  * @csspart checked-icon 选中状态的图标
  * @csspart label - 文本
  */
-export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
+let Radio = class Radio extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -50,12 +51,16 @@ export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
          * 当前单选项是否已选中
          */
         this.checked = false;
-        // 是否验证未通过。由 mdui-radio-group 控制该参数
+        // 是否验证未通过。由 <mdui-radio-group> 控制该参数
         this.invalid = false;
-        // 父组件中是否设置了禁用。由 mdui-radio-group 控制该参数
+        // 父组件中是否设置了禁用。由 <mdui-radio-group> 控制该参数
         this.groupDisabled = false;
-        // 是否可聚焦。由 mdui-radio-group 控制该参数
-        this.focusable = false;
+        // 是否可聚焦。
+        // 单独使用该组件时，默认可聚焦。
+        // 如果放在 <mdui-radio-group> 组件中使用，则由 <mdui-radio-group> 控制该参数
+        this.focusable = true;
+        // 是否是初始状态，不显示动画。由 <mdui-radio-group> 组件控制该参数
+        this.isInitial = true;
         this.rippleRef = createRef();
     }
     get rippleElement() {
@@ -71,12 +76,10 @@ export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
         return this.isDisabled() || !this.focusable;
     }
     onCheckedChange() {
-        if (this.checked) {
-            emit(this, 'change');
-        }
+        this.emit('change');
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.addEventListener('click', () => {
             if (!this.isDisabled()) {
                 this.checked = true;
@@ -84,11 +87,15 @@ export let Radio = class Radio extends RippleMixin(FocusableMixin(LitElement)) {
         });
     }
     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
+        const className = classMap({
+            invalid: this.invalid,
+            initial: this.isInitial,
+        });
+        return html `<i part="control" class="${className}"><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>`;
+            : html `<mdui-icon-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label ${className}"></slot>`;
     }
     isDisabled() {
         return this.disabled || this.groupDisabled;
@@ -119,11 +126,7 @@ __decorate([
     property({ reflect: true, attribute: 'checked-icon' })
 ], Radio.prototype, "checkedIcon", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], Radio.prototype, "invalid", void 0);
 __decorate([
     property({
@@ -136,9 +139,13 @@ __decorate([
 __decorate([
     state()
 ], Radio.prototype, "focusable", void 0);
+__decorate([
+    state()
+], Radio.prototype, "isInitial", void 0);
 __decorate([
     watch('checked', true)
 ], Radio.prototype, "onCheckedChange", null);
 Radio = __decorate([
     customElement('mdui-radio')
 ], Radio);
+export { Radio };

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

@@ -1,9 +1,8 @@
-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';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 范围滑块组件
  *
@@ -23,7 +22,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart label - 提示文本
  * @csspart tickmark - 刻度标记
  */
-export declare class RangeSlider extends SliderBase implements FormControl {
+export declare class RangeSlider extends SliderBase<RangeSliderEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
@@ -60,6 +59,13 @@ export declare class RangeSlider extends SliderBase implements FormControl {
     private updateStyle;
     private onInput;
 }
+export interface RangeSliderEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: Event;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-range-slider': RangeSlider;

package/components/range-slider/index.js

@@ -10,7 +10,6 @@ import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { SliderBase } from '../slider/slider-base.js';
 /**
  * @summary 范围滑块组件
@@ -31,7 +30,7 @@ import { SliderBase } from '../slider/slider-base.js';
  * @csspart label - 提示文本
  * @csspart tickmark - 刻度标记
  */
-export let RangeSlider = class RangeSlider extends SliderBase {
+let RangeSlider = class RangeSlider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
@@ -66,14 +65,13 @@ export let RangeSlider = class RangeSlider extends SliderBase {
     }
     set value(_value) {
         const oldValue = [...this._value];
-        this._value = _value;
+        this._value = [this.fixValue(_value[0]), this.fixValue(_value[1])];
         this.requestUpdate('value', oldValue);
         this.updateComplete.then(() => {
-            var _a;
             this.updateStyle();
             // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
             const form = this.formController.getForm();
-            if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+            if (form && formResets.get(form)?.has(this)) {
                 this.invalid = false;
                 formResets.get(form).delete(this);
             }
@@ -87,10 +85,17 @@ export let RangeSlider = class RangeSlider extends SliderBase {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.value = [this.min, this.max];
+        if (!this.value.length) {
+            this.value = [this.min, this.max];
+        }
+        this.value[0] = this.fixValue(this.value[0]);
+        this.value[1] = this.fixValue(this.value[1]);
         if (!this.defaultValue.length) {
             this.defaultValue = [...this.value];
         }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         // 在轨道上点击时，计算出点击位置在 <input type="range"> 元素上的值
         // 若该值在 this.value 的两个值中间位置的左侧，则表示操作的是左侧的值，否则操作的是右侧的值
         const getCurrentHandle = (event) => {
@@ -132,9 +137,6 @@ export let RangeSlider = class RangeSlider extends SliderBase {
                 this.startHover(event);
             }
         });
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
         this.updateStyle();
     }
     /**
@@ -142,7 +144,7 @@ export let RangeSlider = class RangeSlider extends SliderBase {
      * <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}" @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.handleStartRef)} part="handle" class="handle start" style="${styleMap({
+        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" @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.handleStartRef)} part="handle" class="handle start" style="${styleMap({
             'z-index': this.currentHandle === 'start' ? '2' : '1',
         })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleStartRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[0])}</div><div ${ref(this.handleEndRef)} part="handle" class="handle end" style="${styleMap({
             'z-index': this.currentHandle === 'end' ? '2' : '1',
@@ -170,7 +172,6 @@ export let RangeSlider = class RangeSlider extends SliderBase {
         const startValue = this.value[0];
         const endValue = this.value[1];
         const doInput = () => {
-            emit(this, 'input');
             this.updateStyle();
         };
         if (isStart) {
@@ -208,3 +209,4 @@ __decorate([
 RangeSlider = __decorate([
     customElement('mdui-range-slider')
 ], RangeSlider);
+export { RangeSlider };

package/components/ripple/index.d.ts

@@ -1,4 +1,3 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/addClass.js';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
@@ -11,13 +10,14 @@ import '@mdui/jq/methods/offset.js';
 import '@mdui/jq/methods/on.js';
 import '@mdui/jq/methods/prependTo.js';
 import '@mdui/jq/methods/remove.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { TemplateResult, CSSResultGroup } from 'lit';
 /**
  * 处理点击时的涟漪动画；及添加 hover、focused、dragged 的背景色
  * 背景色通过在 .surface 元素上添加对应的 class 实现
  * 阴影在 ripple-mixin 中处理，通过在 :host 元素上添加 attribute 供 CSS 选择器添加样式
  */
-export declare class Ripple extends LitElement {
+export declare class Ripple extends MduiElement<RippleEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否禁用涟漪动画
@@ -37,6 +37,8 @@ export declare class Ripple extends LitElement {
     endDrag(): void;
     protected render(): TemplateResult;
 }
+export interface RippleEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-ripple': Ripple;

package/components/ripple/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
@@ -16,6 +16,7 @@ import '@mdui/jq/methods/offset.js';
 import '@mdui/jq/methods/on.js';
 import '@mdui/jq/methods/prependTo.js';
 import '@mdui/jq/methods/remove.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -24,7 +25,7 @@ import { style } from './style.js';
  * 背景色通过在 .surface 元素上添加对应的 class 实现
  * 阴影在 ripple-mixin 中处理，通过在 :host 元素上添加 attribute 供 CSS 选择器添加样式
  */
-export let Ripple = class Ripple extends LitElement {
+let Ripple = class Ripple extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -171,3 +172,4 @@ __decorate([
 Ripple = __decorate([
     customElement('mdui-ripple')
 ], Ripple);
+export { Ripple };

package/components/ripple/ripple-mixin.d.ts

@@ -3,7 +3,7 @@ import './index.js';
 import type { Ripple } from './index.js';
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { LitElement } from 'lit';
-export declare class RippleMixinInterface extends LitElement {
+export declare class RippleMixinInterface {
     noRipple: boolean;
     protected getRippleIndex: () => number | undefined;
     protected get rippleElement(): Ripple | Ripple[] | NodeListOf<Ripple>;

package/components/ripple/ripple-mixin.js

@@ -253,6 +253,5 @@ export const RippleMixin = (superclass) => {
             attribute: 'no-ripple',
         })
     ], Mixin.prototype, "noRipple", void 0);
-    // @ts-ignore
     return Mixin;
 };

package/components/segmented-button/segmented-button-group-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const segmentedButtonGroupStyle = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;height:2.5rem;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);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`;
+export const segmentedButtonGroupStyle = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;vertical-align:middle;height:2.5rem;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);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`;

package/components/segmented-button/segmented-button-group.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
@@ -21,7 +21,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class SegmentedButtonGroup extends LitElement implements FormControl {
+export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGroupEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 是否填满父元素宽度
@@ -70,9 +70,10 @@ export declare class SegmentedButtonGroup extends LitElement implements FormCont
      * 是否验证未通过
      */
     private invalid;
-    private hasSetDefaultValue;
+    private isInitial;
     private readonly inputRef;
     private readonly formController;
+    private readonly definedController;
     /**
      * 表单验证状态对象
      */
@@ -90,7 +91,6 @@ export declare class SegmentedButtonGroup extends LitElement implements FormCont
     private onSelectedKeysChange;
     private onValueChange;
     private onInvalidChange;
-    private onDisabledChange;
     connectedCallback(): void;
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
@@ -109,14 +109,21 @@ export declare class SegmentedButtonGroup extends LitElement implements FormCont
      */
     setCustomValidity(message: string): void;
     protected render(): TemplateResult;
-    private updateSelected;
     private selectOne;
     private onClick;
     /**
      * 在隐藏的 `<input>` 或 `<select>` 上按下按键时，切换选中状态
+     * 通常为验证不通过时，默认聚焦到 `<input>` 或 `<select>` 上，此时按下按键，切换第一个元素的选中状态
      */
     private onInputKeyDown;
     private onSlotChange;
+    private setSelectedKeys;
+    private setValue;
+    private updateItems;
+}
+export interface SegmentedButtonGroupEventMap {
+    change: CustomEvent<void>;
+    invalid: CustomEvent<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {