mdui 2.0.0 → 2.0.2

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

@@ -9,9 +9,11 @@ import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
 import { isString } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.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 { arraysEqualIgnoreOrder } from '@mdui/shared/helpers/array.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';
@@ -34,7 +36,7 @@ import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement {
+let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -72,10 +74,13 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
          * 是否验证未通过
          */
         this.invalid = false;
-        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
-        this.hasSetDefaultValue = false;
+        // 是否为初始状态，初始状态不触发 change 事件
+        this.isInitial = true;
         this.inputRef = createRef();
         this.formController = new FormController(this);
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-segmented-button'],
+        });
     }
     /**
      * 表单验证状态对象
@@ -89,7 +94,7 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
     get validationMessage() {
         return this.inputRef.value.validationMessage;
     }
-    // 所有的子项元素
+    // 为了使 <mdui-segmented-button> 可以不是该组件的直接子元素，这里不用 @queryAssignedElements()
     get items() {
         return $(this)
             .find('mdui-segmented-button')
@@ -113,39 +118,35 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
     get isSelectable() {
         return this.isSingle || this.isMultiple;
     }
-    onSelectsChange() {
-        if (!this.isSelectable && this.selectedKeys.length) {
-            this.selectedKeys = [];
-            this.onSelectedKeysChange();
-            this.onValueChange();
+    async onSelectsChange() {
+        if (!this.isSelectable) {
+            // 不可选中，清空选中值
+            this.setSelectedKeys([]);
         }
-        if (this.isSingle && this.selectedKeys.length > 1) {
-            this.selectedKeys = this.selectedKeys.slice(0, 1);
-            this.onSelectedKeysChange();
-            this.onValueChange();
+        else if (this.isSingle) {
+            // 单选，只保留第一个选中的值
+            this.setSelectedKeys(this.selectedKeys.slice(0, 1));
         }
+        await this.onSelectedKeysChange();
     }
-    onSelectedKeysChange() {
+    async onSelectedKeysChange() {
+        await this.definedController.whenDefined();
         // 根据 selectedKeys 读取出对应 segmented-button 的 value
         const values = this.itemsEnabled
             .filter((item) => this.selectedKeys.includes(item.key))
             .map((item) => item.value);
-        this.value = this.isMultiple ? values : values[0] || '';
-        if (this.hasSetDefaultValue) {
+        const value = this.isMultiple ? values : values[0] || '';
+        this.setValue(value);
+        if (!this.isInitial) {
             emit(this, 'change');
         }
-        else {
-            this.hasSetDefaultValue = true;
-        }
     }
     async onValueChange() {
-        const hasUpdated = this.hasUpdated;
-        if (!hasUpdated) {
-            await this.updateComplete;
-        }
+        this.isInitial = !this.hasUpdated;
+        await this.definedController.whenDefined();
         // 根据 value 找出对应的 segmented-button，并把这些元素的 key 赋值给 selectedKeys
         if (!this.isSelectable) {
-            this.updateSelected(hasUpdated);
+            this.updateItems();
             return;
         }
         const values = (this.isSingle
@@ -155,24 +156,33 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
                     ? [this.value]
                     : this.value).filter((i) => i);
         if (!values.length) {
-            this.selectedKeys = [];
+            this.setSelectedKeys([]);
         }
         else if (this.isSingle) {
             const firstItem = this.itemsEnabled.find((item) => item.value === values[0]);
-            this.selectedKeys = firstItem ? [firstItem.key] : [];
+            this.setSelectedKeys(firstItem ? [firstItem.key] : []);
         }
         else if (this.isMultiple) {
-            this.selectedKeys = this.itemsEnabled
+            this.setSelectedKeys(this.itemsEnabled
                 .filter((item) => values.includes(item.value))
-                .map((item) => item.key);
+                .map((item) => item.key));
+        }
+        this.updateItems();
+        // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
+        if (!this.isInitial) {
+            const form = this.formController.getForm();
+            if (form && formResets.get(form)?.has(this)) {
+                this.invalid = false;
+                formResets.get(form).delete(this);
+            }
+            else {
+                this.invalid = !this.inputRef.value.checkValidity();
+            }
         }
-        this.updateSelected(hasUpdated);
-    }
-    onInvalidChange() {
-        this.itemsEnabled.forEach((item) => (item.invalid = this.invalid));
     }
-    onDisabledChange() {
-        this.items.forEach((item) => (item.groupDisabled = this.disabled));
+    async onInvalidChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -231,22 +241,6 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
     render() {
         return html `${when(this.isSelectable && this.isSingle, () => html `<input ${ref(this.inputRef)} type="radio" name="${ifDefined(this.name)}" value="1" .disabled="${this.disabled}" .required="${this.required}" .checked="${!!this.value}" tabindex="-1" @keydown="${this.onInputKeyDown}">`)}${when(this.isSelectable && this.isMultiple, () => html `<select ${ref(this.inputRef)} name="${ifDefined(this.name)}" .disabled="${this.disabled}" .required="${this.required}" multiple="multiple" tabindex="-1" @keydown="${this.onInputKeyDown}">${map(this.value, (value) => html `<option selected="selected" value="${value}"></option>`)}</select>`)}<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
     }
-    async updateSelected(hasUpdated) {
-        var _a;
-        this.items.forEach((item) => (item.selected = this.selectedKeys.includes(item.key)));
-        if (hasUpdated) {
-            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();
-            }
-        }
-    }
     // 切换一个元素的选中状态
     selectOne(item) {
         if (this.isMultiple) {
@@ -258,23 +252,25 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
             else {
                 selectedKeys.push(item.key);
             }
-            this.selectedKeys = selectedKeys;
+            this.setSelectedKeys(selectedKeys);
         }
         if (this.isSingle) {
             if (this.selectedKeys.includes(item.key)) {
-                this.selectedKeys = [];
+                this.setSelectedKeys([]);
             }
             else {
-                this.selectedKeys = [item.key];
+                this.setSelectedKeys([item.key]);
             }
         }
-        this.updateSelected(this.hasUpdated);
+        this.isInitial = false;
+        this.updateItems();
     }
-    onClick(event) {
+    async onClick(event) {
         // event.button 为 0 时，为鼠标左键点击。忽略鼠标中间和右键
         if (event.button) {
             return;
         }
+        await this.definedController.whenDefined();
         const target = event.target;
         const item = target.closest('mdui-segmented-button');
         if (item.disabled) {
@@ -286,12 +282,14 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
     }
     /**
      * 在隐藏的 `<input>` 或 `<select>` 上按下按键时，切换选中状态
+     * 通常为验证不通过时，默认聚焦到 `<input>` 或 `<select>` 上，此时按下按键，切换第一个元素的选中状态
      */
-    onInputKeyDown(event) {
+    async onInputKeyDown(event) {
         if (!['Enter', ' '].includes(event.key)) {
             return;
         }
         event.preventDefault();
+        await this.definedController.whenDefined();
         if (this.isSingle) {
             const input = event.target;
             input.checked = !input.checked;
@@ -303,11 +301,33 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
             this.itemsEnabled[0].focus();
         }
     }
-    onSlotChange() {
+    async onSlotChange() {
+        await this.definedController.whenDefined();
+        this.updateItems(true);
+    }
+    setSelectedKeys(selectedKeys) {
+        if (!arraysEqualIgnoreOrder(this.selectedKeys, selectedKeys)) {
+            this.selectedKeys = selectedKeys;
+        }
+    }
+    setValue(value) {
+        if (this.isSingle) {
+            this.value = value;
+        }
+        else if (!arraysEqualIgnoreOrder(this.value, value)) {
+            this.value = value;
+        }
+    }
+    updateItems(slotChange = false) {
         const items = this.items;
         items.forEach((item, index) => {
-            item.classList.toggle('mdui-segmented-button-first', index === 0);
-            item.classList.toggle('mdui-segmented-button-last', index === items.length - 1);
+            item.invalid = this.invalid;
+            item.groupDisabled = this.disabled;
+            item.selected = this.selectedKeys.includes(item.key);
+            if (slotChange) {
+                item.classList.toggle('mdui-segmented-button-first', index === 0);
+                item.classList.toggle('mdui-segmented-button-last', index === items.length - 1);
+            }
         });
     }
 };
@@ -357,14 +377,10 @@ __decorate([
     state()
 ], SegmentedButtonGroup.prototype, "selectedKeys", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], SegmentedButtonGroup.prototype, "invalid", void 0);
 __decorate([
-    watch('selects')
+    watch('selects', true)
 ], SegmentedButtonGroup.prototype, "onSelectsChange", null);
 __decorate([
     watch('selectedKeys', true)
@@ -373,11 +389,10 @@ __decorate([
     watch('value')
 ], SegmentedButtonGroup.prototype, "onValueChange", null);
 __decorate([
-    watch('invalid')
-], SegmentedButtonGroup.prototype, "onInvalidChange", null);
-__decorate([
+    watch('invalid', true),
     watch('disabled')
-], SegmentedButtonGroup.prototype, "onDisabledChange", null);
+], SegmentedButtonGroup.prototype, "onInvalidChange", null);
 SegmentedButtonGroup = __decorate([
     customElement('mdui-segmented-button-group')
 ], SegmentedButtonGroup);
+export { SegmentedButtonGroup };

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

@@ -45,11 +45,11 @@ export declare class SegmentedButton extends ButtonBase {
      */
     selectedIcon?: string;
     /**
-     * 是否选中该分段按钮项，由 mdui-segmented-button-group 组件控制该参数
+     * 是否选中该分段按钮项，由 <mdui-segmented-button-group> 组件控制该参数
      */
     protected selected: boolean;
     /**
-     * 是否验证未通过。由 mdui-segmented-button-group 控制该参数
+     * 是否验证未通过。由 <mdui-segmented-button-group> 控制该参数
      */
     protected invalid: boolean;
     protected groupDisabled: boolean;

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

@@ -38,18 +38,18 @@ import { segmentedButtonStyle } from './segmented-button-style.js';
  * @csspart label - 文本内容
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  */
-export let SegmentedButton = class SegmentedButton extends ButtonBase {
+let SegmentedButton = class SegmentedButton extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
-         * 是否选中该分段按钮项，由 mdui-segmented-button-group 组件控制该参数
+         * 是否选中该分段按钮项，由 <mdui-segmented-button-group> 组件控制该参数
          */
         this.selected = false;
         /**
-         * 是否验证未通过。由 mdui-segmented-button-group 控制该参数
+         * 是否验证未通过。由 <mdui-segmented-button-group> 控制该参数
          */
         this.invalid = false;
-        // 父组件中是否设置了禁用。由 mdui-radio-group 控制该参数
+        // 父组件中是否设置了禁用。由 <mdui-segmented-button-group> 控制该参数
         this.groupDisabled = false;
         // 每一个 segmented-button 元素都添加一个唯一的 key
         this.key = uniqueId();
@@ -158,3 +158,4 @@ __decorate([
 SegmentedButton = __decorate([
     customElement('mdui-segmented-button')
 ], SegmentedButton);
+export { SegmentedButton };

package/components/select/index.d.ts

@@ -4,7 +4,7 @@ import '../dropdown.js';
 import '../menu.js';
 import '../text-field.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
-import type { CSSResultGroup, TemplateResult, WarningKind } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
 /**
  * @summary 选择框组件。需与 `<mdui-menu-item>` 组件配合使用
@@ -36,7 +36,6 @@ declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@
  * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
  */
 export declare class Select extends Select_base implements FormControl {
-    static enabledWarnings: WarningKind[];
     static styles: CSSResultGroup;
     /**
      * 下拉框形状。可选值为：
@@ -147,6 +146,7 @@ export declare class Select extends Select_base implements FormControl {
     private readonly hiddenInputRef;
     private readonly formController;
     private readonly hasSlotController;
+    private readonly definedController;
     /**
      * 表单验证状态对象
      */

package/components/select/index.js

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
+import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { map } from 'lit/directives/map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 import { isString } from '@mdui/jq/shared/helper.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.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';
@@ -48,7 +49,7 @@ import { style } from './style.js';
  * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/docs/2/components/text-field) 元素
  * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
  */
-export let Select = class Select extends FocusableMixin(LitElement) {
+let Select = class Select extends FocusableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -116,6 +117,9 @@ export let Select = class Select extends FocusableMixin(LitElement) {
         this.hiddenInputRef = createRef();
         this.formController = new FormController(this);
         this.hasSlotController = new HasSlotController(this, 'icon', 'end-icon', 'error-icon', 'prefix', 'suffix', 'clear-button', 'clear-icon', 'helper');
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-menu-item'],
+        });
     }
     /**
      * 表单验证状态对象
@@ -144,14 +148,15 @@ export let Select = class Select extends FocusableMixin(LitElement) {
                     : []
                 : this.value;
         this.defaultValue = this.multiple ? [] : '';
-        this.updateComplete.then(() => {
-            this.observeResize = observeResize(this.textFieldRef.value, () => this.resizeMenu());
+        // 首次渲染时，slot 中的 mdui-menu-item 还未渲染完成，无法读取到其中的文本值
+        // 所以需要在首次更新后，再次重新渲染，此时 mdui-menu-item 已渲染完成，可以读取到文本值
+        this.definedController.whenDefined().then(() => {
+            this.requestUpdate();
         });
     }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
-        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        this.observeResize?.unobserve();
     }
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
@@ -195,12 +200,9 @@ export let Select = class Select extends FocusableMixin(LitElement) {
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        // 首次渲染时，slot 中的 mdui-menu-item 还未渲染完成，无法读取到其中的文本值
-        // 所以需要在首次更新后，再次重新渲染，此时 mdui-menu-item 已渲染完成，可以读取到文本值
-        this.requestUpdate();
+        this.observeResize = observeResize(this.textFieldRef.value, () => this.resizeMenu());
     }
     render() {
-        var _a;
         const hasSelection = this.multiple ? !!this.value.length : !!this.value;
         return html `${this.multiple
             ? html `<select ${ref(this.hiddenInputRef)} class="hidden-input" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .required="${this.required}" .disabled="${this.disabled}" multiple="multiple" tabindex="-1">${map(this.value, (value) => html `<option selected="selected" value="${value}"></option>`)}</select>`
@@ -212,7 +214,7 @@ export let Select = class Select extends FocusableMixin(LitElement) {
             ? this.value.length
                 ? ' '
                 : ''
-            : this.getMenuItemLabelByValue(this.value)}" .label="${this.label}" .placeholder="${this.placeholder}" .helper="${this.helper}" .error="${(_a = this.hiddenInputRef.value) === null || _a === void 0 ? void 0 : _a.validationMessage}" .clearable="${this.clearable}" .clearIcon="${this.clearIcon}" .endAligned="${this.endAligned}" .prefix="${this.prefix}" .suffix="${this.suffix}" .icon="${this.icon}" .endIcon="${this.endIcon}" .errorIcon="${this.errorIcon}" .form="${this.form}" .disabled="${this.disabled}" .required="${this.required}" .invalidStyle="${this.invalid}" @clear="${this.onClear}" @change="${(e) => e.stopPropagation()}" @keydown="${this.onTextFieldKeyDown}">${map([
+            : this.getMenuItemLabelByValue(this.value)}" .label="${this.label}" .placeholder="${this.placeholder}" .helper="${this.helper}" .error="${this.hiddenInputRef.value?.validationMessage}" .clearable="${this.clearable}" .clearIcon="${this.clearIcon}" .endAligned="${this.endAligned}" .prefix="${this.prefix}" .suffix="${this.suffix}" .icon="${this.icon}" .endIcon="${this.endIcon}" .errorIcon="${this.errorIcon}" .form="${this.form}" .disabled="${this.disabled}" .required="${this.required}" .invalidStyle="${this.invalid}" @clear="${this.onClear}" @change="${(e) => e.stopPropagation()}" @keydown="${this.onTextFieldKeyDown}">${map([
             'icon',
             'end-icon',
             'error-icon',
@@ -226,11 +228,10 @@ export let Select = class Select extends FocusableMixin(LitElement) {
             : nothing)} ${when(this.multiple && this.value.length, () => html `<div slot="input" class="chips">${map(this.value, (valueItem) => html `<mdui-chip class="chip" variant="input" deletable tabindex="-1" @delete="${() => this.onDeleteOneValue(valueItem)}">${this.getMenuItemLabelByValue(valueItem)}</mdui-chip>`)}</div>`)}</mdui-text-field><mdui-menu ${ref(this.menuRef)} part="menu" .selects="${this.multiple ? 'multiple' : 'single'}" .value="${this.value}" @change="${this.onValueChange}"><slot></slot></mdui-menu></mdui-dropdown>`;
     }
     getMenuItemLabelByValue(valueItem) {
-        var _a;
         if (!this.menuItems.length) {
             return valueItem;
         }
-        return (((_a = this.menuItems.find((item) => item.value === valueItem)) === null || _a === void 0 ? void 0 : _a.textContent) ||
+        return (this.menuItems.find((item) => item.value === valueItem)?.textContent ||
             valueItem);
     }
     resizeMenu() {
@@ -243,17 +244,23 @@ export let Select = class Select extends FocusableMixin(LitElement) {
     onDropdownClose() {
         // @ts-ignore
         this.textFieldRef.value.focusedStyle = false;
+        // 如果焦点在 <mdui-select> 组件内的元素上，则焦点回到 <mdui-select> 上
+        if (this.contains(document.activeElement) ||
+            this.contains(document.activeElement?.assignedSlot ?? null)) {
+            setTimeout(() => {
+                this.focus();
+            });
+        }
     }
     async onValueChange(e) {
-        var _a, _b;
         const menu = e.target;
         this.value = this.multiple
-            ? menu.value.map((v) => v !== null && v !== void 0 ? v : '')
-            : (_a = menu.value) !== null && _a !== void 0 ? _a : '';
+            ? menu.value.map((v) => v ?? '')
+            : menu.value ?? '';
         await this.updateComplete;
         // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
         const form = this.formController.getForm();
-        if (form && ((_b = formResets.get(form)) === null || _b === void 0 ? void 0 : _b.has(this))) {
+        if (form && formResets.get(form)?.has(this)) {
             this.invalid = false;
             formResets.get(form).delete(this);
         }
@@ -284,8 +291,6 @@ export let Select = class Select extends FocusableMixin(LitElement) {
         }
     }
 };
-// firstUpdated 中调用了 requestUpdate，会产生控制台警告，所以这里关闭 change-in-update 警告
-Select.enabledWarnings = ['migration'];
 Select.styles = [componentStyle, style];
 __decorate([
     property({ reflect: true })
@@ -376,11 +381,7 @@ __decorate([
     })
 ], Select.prototype, "required", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], Select.prototype, "invalid", void 0);
 __decorate([
     queryAssignedElements({ flatten: true, selector: 'mdui-menu-item' })
@@ -388,3 +389,4 @@ __decorate([
 Select = __decorate([
     customElement('mdui-select')
 ], Select);
+export { Select };

package/components/slider/index.js

@@ -10,7 +10,6 @@ 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';
 /**
@@ -32,7 +31,7 @@ import { style } from './style.js';
  * @csspart label 提示文本
  * @csspart tickmark - 刻度标记
  */
-export let Slider = class Slider extends SliderBase {
+let Slider = class Slider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
@@ -51,10 +50,9 @@ export let Slider = class Slider extends SliderBase {
         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))) {
+        if (form && formResets.get(form)?.has(this)) {
             this.invalid = false;
             formResets.get(form).delete(this);
         }
@@ -73,6 +71,9 @@ export let Slider = class Slider extends SliderBase {
         if (this.value > this.max) {
             this.value = this.max;
         }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         const onTouchStart = () => {
             if (!this.disabled) {
                 this.labelVisible = true;
@@ -87,9 +88,6 @@ export let Slider = class Slider extends SliderBase {
         this.addEventListener('mousedown', onTouchStart);
         this.addEventListener('touchend', onTouchEnd);
         this.addEventListener('mouseup', onTouchEnd);
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
         this.updateStyle();
     }
     /**
@@ -97,7 +95,7 @@ export let Slider = class Slider 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}" .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({
+        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}" .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>`;
@@ -109,7 +107,6 @@ export let Slider = class Slider extends SliderBase {
     }
     onInput() {
         this.value = parseFloat(this.inputRef.value.value);
-        emit(this, 'input');
         this.updateStyle();
     }
 };
@@ -126,3 +123,4 @@ __decorate([
 Slider = __decorate([
     customElement('mdui-slider')
 ], Slider);
+export { Slider };

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

@@ -1,2 +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)}`;
+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;width:calc(100% + 20rem * 2 / 16);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))}.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))}.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)}.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)}.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))}.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))}.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)}.invalid .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}.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.js

@@ -182,11 +182,7 @@ __decorate([
     property({ reflect: true })
 ], SliderBase.prototype, "name", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], SliderBase.prototype, "invalid", void 0);
 __decorate([
     state()

package/components/snackbar/index.js

@@ -41,7 +41,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Snackbar = class Snackbar extends LitElement {
+let Snackbar = class Snackbar extends LitElement {
     constructor() {
         super();
         /**
@@ -283,3 +283,4 @@ __decorate([
 Snackbar = __decorate([
     customElement('mdui-snackbar')
 ], Snackbar);
+export { Snackbar };