mdui 2.0.1 → 2.0.3

package/components/checkbox/index.js

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.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 '@mdui/shared/icons/check-box-outline-blank.js';
 import '@mdui/shared/icons/check-box.js';
 import '@mdui/shared/icons/indeterminate-check-box.js';
@@ -41,7 +42,7 @@ import { style } from './style.js';
  * @csspart indeterminate-icon - 不确定状态图标
  * @csspart label - 文本
  */
-export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
+let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -113,11 +114,10 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
         this.invalid = !this.inputRef.value.checkValidity();
     }
     async onCheckedChange() {
-        var _a;
         await this.updateComplete;
         // 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);
         }
@@ -131,7 +131,7 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -147,13 +147,13 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
     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) {
                 this.blur();
                 this.focus();
             }
@@ -170,7 +170,7 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<label><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <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
+        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <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-check-box-outline-blank class="i"></mdui-icon-check-box-outline-blank>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
             ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
@@ -184,7 +184,7 @@ export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitEleme
     onChange() {
         this.checked = this.inputRef.value.checked;
         this.indeterminate = false;
-        emit(this, 'change');
+        this.emit('change');
     }
 };
 Checkbox.styles = [componentStyle, style];
@@ -238,11 +238,7 @@ __decorate([
     property({ reflect: true, attribute: 'indeterminate-icon' })
 ], Checkbox.prototype, "indeterminateIcon", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], Checkbox.prototype, "invalid", void 0);
 __decorate([
     watch('disabled', true),
@@ -255,3 +251,4 @@ __decorate([
 Checkbox = __decorate([
     customElement('mdui-checkbox')
 ], Checkbox);
+export { Checkbox };

package/components/checkbox/style.js

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

package/components/chip/index.d.ts

@@ -33,7 +33,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Chip extends ButtonBase {
+export declare class Chip extends ButtonBase<ChipEventMap> {
     static styles: CSSResultGroup;
     /**
      * 纸片形状。可选值为：
@@ -95,6 +95,13 @@ export declare class Chip extends ButtonBase {
     private renderDeleteIcon;
     private renderInner;
 }
+export interface ChipEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    invalid: CustomEvent<void>;
+    change: CustomEvent<void>;
+    delete: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-chip': Chip;

package/components/chip/index.js

@@ -6,7 +6,6 @@ import cc from 'classcat';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import '@mdui/shared/icons/check.js';
 import '@mdui/shared/icons/clear.js';
@@ -42,7 +41,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Chip = class Chip extends ButtonBase {
+let Chip = class Chip extends ButtonBase {
     constructor() {
         super();
         /**
@@ -79,7 +78,7 @@ export let Chip = class Chip extends ButtonBase {
         return this.rippleRef.value;
     }
     onSelectedChange() {
-        emit(this, 'change');
+        this.emit('change');
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -134,7 +133,7 @@ export let Chip = class Chip extends ButtonBase {
         }
         // 按下 Delete 或 BackSpace 键时，触发 delete 事件
         if (this.deletable && ['Delete', 'Backspace'].includes(event.key)) {
-            emit(this, 'delete');
+            this.emit('delete');
         }
     }
     /**
@@ -142,7 +141,7 @@ export let Chip = class Chip extends ButtonBase {
      */
     onDelete(event) {
         event.stopPropagation();
-        emit(this, 'delete');
+        this.emit('delete');
     }
     renderIcon() {
         if (this.loading) {
@@ -241,3 +240,4 @@ __decorate([
 Chip = __decorate([
     customElement('mdui-chip')
 ], Chip);
+export { Chip };

package/components/circular-progress/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 圆形进度指示器组件
@@ -7,7 +7,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * <mdui-circular-progress></mdui-circular-progress>
  * ```
  */
-export declare class CircularProgress extends LitElement {
+export declare class CircularProgress extends MduiElement<CircularProgressEventMap> {
     static styles: CSSResultGroup;
     /**
      * 进度指示器的最大值，默认为 1
@@ -21,6 +21,8 @@ export declare class CircularProgress extends LitElement {
     private renderDeterminate;
     private renderInDeterminate;
 }
+export interface CircularProgressEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-circular-progress': CircularProgress;

package/components/circular-progress/index.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
 /**
@@ -12,7 +13,7 @@ import { style } from './style.js';
  * <mdui-circular-progress></mdui-circular-progress>
  * ```
  */
-export let CircularProgress = class CircularProgress extends LitElement {
+let CircularProgress = class CircularProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -28,14 +29,13 @@ export let CircularProgress = class CircularProgress extends LitElement {
         })}">${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}</div>`;
     }
     renderDeterminate() {
-        var _a;
         const value = this.value;
         const strokeWidth = 4; // 圆环宽度
         const circleRadius = 18; // 圆环宽度中心点的半径
         const π = 3.1415926;
         const center = circleRadius + strokeWidth / 2;
         const circumference = 2 * π * circleRadius;
-        const determinateStrokeDashOffset = (1 - value / Math.max((_a = this.max) !== null && _a !== void 0 ? _a : value, value)) * circumference;
+        const determinateStrokeDashOffset = (1 - value / Math.max(this.max ?? value, value)) * circumference;
         return html `<svg viewBox="0 0 ${center * 2} ${center * 2}"><circle class="track" cx="${center}" cy="${center}" r="${circleRadius}" stroke-width="${strokeWidth}"></circle><circle class="circle" cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${2 * π * circleRadius}" stroke-dashoffset="${determinateStrokeDashOffset}" stroke-width="${strokeWidth}"></circle></svg>`;
     }
     renderInDeterminate() {
@@ -59,3 +59,4 @@ __decorate([
 CircularProgress = __decorate([
     customElement('mdui-circular-progress')
 ], CircularProgress);
+export { CircularProgress };

package/components/collapse/collapse-item-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const collapseItemStyle = css `:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}:host([active]) .body{transition-duration:var(--mdui-motion-duration-medium4)}`;
+export const collapseItemStyle = css `:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}.body.active{transition-duration:var(--mdui-motion-duration-medium4)}`;

package/components/collapse/collapse-item.d.ts

@@ -1,6 +1,5 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/height.js';
-import '@mdui/jq/methods/on.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { JQ } from '@mdui/jq/shared/core.js';
 import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 /**
@@ -24,7 +23,7 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
  * @csspart header - 折叠面板的头部内容
  * @csspart body - 折叠面板的正文内容
  */
-export declare class CollapseItem extends LitElement {
+export declare class CollapseItem extends MduiElement<CollapseItemEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该折叠面板项的值
@@ -47,10 +46,23 @@ export declare class CollapseItem extends LitElement {
      */
     protected active: boolean;
     private state;
+    protected isInitial: boolean;
     protected readonly key: number;
     private readonly bodyRef;
     private onActiveChange;
     protected firstUpdated(changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
+    private onTransitionEnd;
     private updateBodyHeight;
 }
+export interface CollapseItemEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-collapse-item': CollapseItem;
+    }
+}

package/components/collapse/collapse-item.js

@@ -1,14 +1,13 @@
 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 { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/height.js';
-import '@mdui/jq/methods/on.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 { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { collapseItemStyle } from './collapse-item-style.js';
@@ -33,7 +32,7 @@ import { collapseItemStyle } from './collapse-item-style.js';
  * @csspart header - 折叠面板的头部内容
  * @csspart body - 折叠面板的正文内容
  */
-export let CollapseItem = class CollapseItem extends LitElement {
+let CollapseItem = class CollapseItem extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -45,34 +44,41 @@ export let CollapseItem = class CollapseItem extends LitElement {
          */
         this.active = false;
         this.state = 'closed';
+        // 是否是初始状态，不显示动画
+        this.isInitial = true;
         // 每一个 `collapse-item` 元素都添加一个唯一的 key
         this.key = uniqueId();
         this.bodyRef = createRef();
     }
     onActiveChange() {
-        if (this.hasUpdated) {
-            this.state = this.active ? 'open' : 'close';
-            emit(this, this.state);
-            this.updateBodyHeight();
+        if (this.isInitial) {
+            this.state = this.active ? 'opened' : 'closed';
+            if (this.hasUpdated) {
+                this.updateBodyHeight();
+            }
         }
         else {
-            this.state = this.active ? 'opened' : 'closed';
+            this.state = this.active ? 'open' : 'close';
+            this.emit(this.state);
+            this.updateBodyHeight();
         }
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        $(this.bodyRef.value).on('transitionend', (e) => {
-            const event = e;
-            if (event.target === this.bodyRef.value) {
-                this.state = this.active ? 'opened' : 'closed';
-                emit(this, this.state);
-                this.updateBodyHeight();
-            }
-        });
         this.updateBodyHeight();
     }
     render() {
-        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({ opened: this.state === 'opened' })}" ${ref(this.bodyRef)}></slot>`;
+        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({
+            opened: this.state === 'opened',
+            active: this.active,
+        })}" ${ref(this.bodyRef)} @transitionend="${this.onTransitionEnd}"></slot>`;
+    }
+    onTransitionEnd(event) {
+        if (event.target === this.bodyRef.value) {
+            this.state = this.active ? 'opened' : 'closed';
+            this.emit(this.state);
+            this.updateBodyHeight();
+        }
     }
     updateBodyHeight() {
         const scrollHeight = this.bodyRef.value.scrollHeight;
@@ -109,11 +115,7 @@ __decorate([
     property()
 ], CollapseItem.prototype, "trigger", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], CollapseItem.prototype, "active", void 0);
 __decorate([
     state()
@@ -124,3 +126,4 @@ __decorate([
 CollapseItem = __decorate([
     customElement('mdui-collapse-item')
 ], CollapseItem);
+export { CollapseItem };

package/components/collapse/collapse.d.ts

@@ -1,7 +1,5 @@
-import { LitElement } from 'lit';
-import '@mdui/jq/methods/find.js';
-import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 折叠面板组件。需与 `<mdui-collapse-item>` 组件配合使用
@@ -17,7 +15,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
-export declare class Collapse extends LitElement {
+export declare class Collapse extends MduiElement<CollapseEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否为手风琴模式
@@ -37,13 +35,23 @@ export declare class Collapse extends LitElement {
      */
     disabled: boolean;
     private activeKeys;
-    private items;
+    private readonly items;
+    private isInitial;
+    private definedController;
     private onActiveKeysChange;
     private onValueChange;
-    connectedCallback(): void;
     protected render(): TemplateResult;
-    private syncItems;
+    private setActiveKeys;
+    private setValue;
     private onClick;
     private onSlotChange;
-    private updateActive;
+    private updateItems;
+}
+export interface CollapseEventMap {
+    change: CustomEvent<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-collapse': Collapse;
+    }
 }

package/components/collapse/collapse.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
 import { $ } from '@mdui/jq/$.js';
-import '@mdui/jq/methods/find.js';
-import '@mdui/jq/methods/get.js';
 import '@mdui/jq/methods/is.js';
-import { isElement } from '@mdui/jq/shared/helper.js';
+import { isElement, isUndefined } from '@mdui/jq/shared/helper.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.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 { collapseStyle } from './collapse-style.js';
 /**
@@ -25,7 +25,7 @@ import { collapseStyle } from './collapse-style.js';
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
-export let Collapse = class Collapse extends LitElement {
+let Collapse = class Collapse extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -38,53 +38,67 @@ export let Collapse = class Collapse extends LitElement {
         this.disabled = false;
         // 因为 collapse-item 的 value 可能会重复，所以在每个 collapse-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
         this.activeKeys = [];
-        this.items = [];
+        // 是否是初始状态，初始状态不触发 change 事件，没有动画
+        this.isInitial = true;
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-collapse-item'],
+        });
     }
-    onActiveKeysChange() {
-        var _a;
+    async onActiveKeysChange() {
+        await this.definedController.whenDefined();
         // 根据 activeKeys 读取对应 collapse-item 的值
-        this.value = this.accordion
-            ? (_a = this.items.find((item) => this.activeKeys.includes(item.key))) === null || _a === void 0 ? void 0 : _a.value
+        const value = this.accordion
+            ? this.items.find((item) => this.activeKeys.includes(item.key))?.value
             : this.items
                 .filter((item) => this.activeKeys.includes(item.key))
                 .map((item) => item.value);
-        emit(this, 'change');
+        this.setValue(value);
+        if (!this.isInitial) {
+            this.emit('change');
+        }
     }
-    onValueChange() {
+    async onValueChange() {
+        this.isInitial = !this.hasUpdated;
+        await this.definedController.whenDefined();
         if (this.accordion) {
             const value = this.value;
             if (!value) {
-                this.activeKeys = [];
+                this.setActiveKeys([]);
             }
             else {
                 const item = this.items.find((item) => item.value === value);
-                this.activeKeys = item ? [item.key] : [];
+                this.setActiveKeys(item ? [item.key] : []);
             }
         }
         else {
             const value = this.value;
             if (!value.length) {
-                this.activeKeys = [];
+                this.setActiveKeys([]);
             }
             else {
-                this.activeKeys = this.items
+                const activeKeys = this.items
                     .filter((item) => value.includes(item.value))
                     .map((item) => item.key);
+                this.setActiveKeys(activeKeys);
             }
         }
-        this.updateActive();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.syncItems();
+        this.updateItems();
     }
     render() {
         return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
     }
-    syncItems() {
-        this.items = $(this)
-            .find('mdui-collapse-item')
-            .get();
+    setActiveKeys(activeKeys) {
+        if (!arraysEqualIgnoreOrder(this.activeKeys, activeKeys)) {
+            this.activeKeys = activeKeys;
+        }
+    }
+    setValue(value) {
+        if (this.accordion || isUndefined(this.value) || isUndefined(value)) {
+            this.value = value;
+        }
+        else if (!arraysEqualIgnoreOrder(this.value, value)) {
+            this.value = value;
+        }
     }
     onClick(event) {
         // 全部禁用
@@ -95,10 +109,10 @@ export let Collapse = class Collapse extends LitElement {
         if (event.button) {
             return;
         }
-        // collapse-item 被禁用，忽略
         const target = event.target;
         const item = target.closest('mdui-collapse-item');
-        if (item.disabled) {
+        // collapse-item 被禁用，忽略
+        if (!item || item.disabled) {
             return;
         }
         const path = event.composedPath();
@@ -113,10 +127,10 @@ export let Collapse = class Collapse extends LitElement {
         }
         if (this.accordion) {
             if (this.activeKeys.includes(item.key)) {
-                this.activeKeys = [];
+                this.setActiveKeys([]);
             }
             else {
-                this.activeKeys = [item.key];
+                this.setActiveKeys([item.key]);
             }
         }
         else {
@@ -128,16 +142,21 @@ export let Collapse = class Collapse extends LitElement {
             else {
                 activeKeys.push(item.key);
             }
-            this.activeKeys = activeKeys;
+            this.setActiveKeys(activeKeys);
         }
-        this.updateActive();
+        this.isInitial = false;
+        this.updateItems();
     }
-    onSlotChange() {
-        this.syncItems();
-        this.updateActive();
+    async onSlotChange() {
+        await this.definedController.whenDefined();
+        this.updateItems();
     }
-    updateActive() {
-        this.items.forEach((item) => (item.active = this.activeKeys.includes(item.key)));
+    // 更新 <mdui-collapse-item> 的状态
+    updateItems() {
+        this.items.forEach((item) => {
+            item.active = this.activeKeys.includes(item.key);
+            item.isInitial = this.isInitial;
+        });
     }
 };
 Collapse.styles = [
@@ -164,6 +183,9 @@ __decorate([
 __decorate([
     state()
 ], Collapse.prototype, "activeKeys", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdui-collapse-item', flatten: true })
+], Collapse.prototype, "items", void 0);
 __decorate([
     watch('activeKeys', true)
 ], Collapse.prototype, "onActiveKeysChange", null);
@@ -173,3 +195,4 @@ __decorate([
 Collapse = __decorate([
     customElement('mdui-collapse')
 ], Collapse);
+export { Collapse };