mdui 2.0.1 → 2.0.3

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { map } from 'lit/directives/map.js';
@@ -9,11 +9,13 @@ 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 { MduiElement } from '@mdui/shared/base/mdui-element.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';
 import { segmentedButtonGroupStyle } from './segmented-button-group-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 MduiElement {
     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) {
-            emit(this, 'change');
-        }
-        else {
-            this.hasSetDefaultValue = true;
+        const value = this.isMultiple ? values : values[0] || '';
+        this.setValue(value);
+        if (!this.isInitial) {
+            this.emit('change');
         }
     }
     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();
@@ -190,7 +200,7 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -206,13 +216,13 @@ export let SegmentedButtonGroup = class SegmentedButtonGroup extends LitElement
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            const requestInvalid = emit(this, 'invalid', {
+            const eventProceeded = this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
             });
-            // 调用了 preventDefault() 时，隐藏默认的表单错误提示
-            if (requestInvalid.defaultPrevented) {
+            if (!eventProceeded) {
+                // 调用了 preventDefault() 时，隐藏默认的表单错误提示
                 this.inputRef.value.blur();
                 this.inputRef.value.focus();
             }
@@ -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,26 +252,28 @@ 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) {
+        if (!item || item.disabled) {
             return;
         }
         if (this.isSelectable && item.value) {
@@ -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

@@ -30,7 +30,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart label - 文本内容
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  */
-export declare class SegmentedButton extends ButtonBase {
+export declare class SegmentedButton extends ButtonBase<SegmentedButtonEventMap> {
     static styles: CSSResultGroup;
     /**
      * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
@@ -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;
@@ -66,6 +66,11 @@ export declare class SegmentedButton extends ButtonBase {
     private renderEndIcon;
     private renderInner;
 }
+export interface SegmentedButtonEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-segmented-button': SegmentedButton;

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

@@ -1,11 +1,12 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../chip.js';
 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';
-declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 选择框组件。需与 `<mdui-menu-item>` 组件配合使用
  *
@@ -35,8 +36,7 @@ declare const Select_base: import("@open-wc/dedupe-mixin").Constructor<import("@
  * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/docs/2/components/text-field) 元素
  * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
  */
-export declare class Select extends Select_base implements FormControl {
-    static enabledWarnings: WarningKind[];
+export declare class Select extends Select_base<SelectEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 下拉框形状。可选值为：
@@ -147,6 +147,7 @@ export declare class Select extends Select_base implements FormControl {
     private readonly hiddenInputRef;
     private readonly formController;
     private readonly hasSlotController;
+    private readonly definedController;
     /**
      * 表单验证状态对象
      */
@@ -192,6 +193,13 @@ export declare class Select extends Select_base implements FormControl {
      */
     private onTextFieldKeyDown;
 }
+export interface SelectEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+    clear: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-select': Select;

package/components/select/index.js

@@ -1,16 +1,17 @@
 import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+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 { MduiElement } from '@mdui/shared/base/mdui-element.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';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { FocusableMixin } from '@mdui/shared/mixins/focusable.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(MduiElement) {
     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`
@@ -159,7 +164,7 @@ export let Select = class Select extends FocusableMixin(LitElement) {
     checkValidity() {
         const valid = this.hiddenInputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -175,7 +180,7 @@ export let Select = class Select extends FocusableMixin(LitElement) {
     reportValidity() {
         this.invalid = !this.hiddenInputRef.value.reportValidity();
         if (this.invalid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -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.d.ts

@@ -21,7 +21,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart label 提示文本
  * @csspart tickmark - 刻度标记
  */
-export declare class Slider extends SliderBase implements FormControl {
+export declare class Slider extends SliderBase<SliderEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 滑块的值，将于表单数据一起提交
@@ -46,6 +46,13 @@ export declare class Slider extends SliderBase implements FormControl {
     private updateStyle;
     private onInput;
 }
+export interface SliderEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: Event;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-slider': Slider;