mdui 1.0.2 → 2.0.0

package/components/fab/index.js

@@ -0,0 +1,144 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+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 { delay } from '@mdui/shared/helpers/delay.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { ButtonBase } from '../button/button-base.js';
+import '../icon.js';
+import { style } from './style.js';
+/**
+ * @summary 浮动操作按钮组件
+ *
+ * ```html
+ * <mdui-fab icon="edit"></mdui-fab>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - 文本
+ * @slot icon - 图标
+ *
+ * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart label - 右侧的文本
+ * @csspart icon - 左侧的图标
+ * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
+ *
+ * @cssprop --shape-corner-small - `size="small"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-normal - `size="normal"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-large - `size="large"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let Fab = class Fab extends ButtonBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * FAB 形状，此组件的不同形状之间只有颜色不一样。可选值为：
+         *
+         * * `primary`：使用 Primary container 背景色
+         * * `surface`：使用 Surface container high 背景色
+         * * `secondary`：使用 Secondary container 背景色
+         * * `tertiary`：使用 Tertiary container 背景色
+         */
+        this.variant = 'primary';
+        /**
+         * FAB 大小。可选值为：
+         * * `normal`：普通大小 FAB
+         * * `small`：小型 FAB
+         * * `large`：大型 FAB
+         */
+        this.size = 'normal';
+        /**
+         * 是否为展开状态
+         */
+        this.extended = false;
+        this.rippleRef = createRef();
+        this.hasSlotController = new HasSlotController(this, 'icon');
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    /**
+     * extended 变更时，设置动画
+     */
+    async onExtendedChange() {
+        const hasUpdated = this.hasUpdated;
+        if (!this.extended) {
+            this.style.width = '';
+        }
+        else {
+            this.style.width = `${this.scrollWidth}px`;
+        }
+        await this.updateComplete;
+        if (this.extended && !hasUpdated) {
+            await delay();
+            this.style.width = `${this.scrollWidth}px`;
+        }
+        if (!hasUpdated) {
+            // 延迟设置动画，避免首次渲染时也执行动画
+            await delay();
+            this.style.transitionProperty = 'box-shadow, width, bottom, transform'; // bottom, transform 在 bottom-app-bar 中用到
+        }
+    }
+    render() {
+        const className = cc({
+            button: true,
+            'has-icon': this.icon || this.hasSlotController.test('icon'),
+        });
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
+            ? this.renderButton({
+                className,
+                part: 'button',
+                content: this.renderInner(),
+            })
+            : this.disabled || this.loading
+                ? html `<span part="button" class="_a ${className}">${this.renderInner()}</span>`
+                : this.renderAnchor({
+                    className,
+                    part: 'button',
+                    content: this.renderInner(),
+                })}`;
+    }
+    renderLabel() {
+        return html `<slot part="label" class="label"></slot>`;
+    }
+    renderIcon() {
+        if (this.loading) {
+            return this.renderLoading();
+        }
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot>`;
+    }
+    renderInner() {
+        return [this.renderIcon(), this.renderLabel()];
+    }
+};
+Fab.styles = [ButtonBase.styles, style];
+__decorate([
+    property({ reflect: true })
+], Fab.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Fab.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], Fab.prototype, "icon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Fab.prototype, "extended", void 0);
+__decorate([
+    watch('extended')
+], Fab.prototype, "onExtendedChange", null);
+Fab = __decorate([
+    customElement('mdui-fab')
+], Fab);

package/components/fab/style.d.ts

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

package/components/fab/style.js

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner-small:var(--mdui-shape-corner-small);--shape-corner-normal:var(--mdui-shape-corner-large);--shape-corner-large:var(--mdui-shape-corner-extra-large);position:relative;display:inline-block;overflow:hidden;text-align:center;border-radius:var(--shape-corner-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;transition-property:box-shadow;transition-timing-function:var(--mdui-motion-easing-emphasized);transition-duration:var(--mdui-motion-duration-medium4);width:3.5rem;height:3.5rem;box-shadow:var(--mdui-elevation-level3);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)}.button{padding:0 1rem}:host([size=small]) .button{padding:0 .5rem}:host([size=large]) .button{padding:0 1.875rem}:host([lowered]){box-shadow:var(--mdui-elevation-level1)}:host([focus-visible]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][focus-visible]){box-shadow:var(--mdui-elevation-level1)}:host([pressed]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][pressed]){box-shadow:var(--mdui-elevation-level1)}:host([hover]){box-shadow:var(--mdui-elevation-level4)}:host([lowered][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=primary]){color:rgb(var(--mdui-color-on-primary-container));background-color:rgb(var(--mdui-color-primary-container));--mdui-comp-ripple-state-layer-color:var(
+      --mdui-color-on-primary-container
+    )}:host([variant=surface]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-high));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=surface][lowered]){background-color:rgb(var(--mdui-color-surface-container-low))}:host([variant=secondary]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+      --mdui-color-on-secondary-container
+    )}:host([variant=tertiary]){color:rgb(var(--mdui-color-on-tertiary-container));background-color:rgb(var(--mdui-color-tertiary-container));--mdui-comp-ripple-state-layer-color:var(
+      --mdui-color-on-tertiary-container
+    )}:host([size=small]){border-radius:var(--shape-corner-small);width:2.5rem;height:2.5rem}:host([size=large]){border-radius:var(--shape-corner-large);width:6rem;height:6rem}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),12%);box-shadow:var(--mdui-elevation-level0)}:host([extended]){width:auto}.label{display:inline-flex;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);padding-left:.25rem;padding-right:.25rem}.has-icon .label{margin-left:.5rem}:host([size=small]) .has-icon .label{margin-left:.25rem}:host([size=large]) .has-icon .label{margin-left:1rem}:host(:not([extended])) .label{opacity:0;transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([size=large]) .label{font-size:1.5em}.icon{display:inline-flex;font-size:1.71428571em}:host([size=large]) .icon{font-size:2.57142857em}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.5rem;height:1.5rem}:host([size=large]) mdui-circular-progress{width:2.25rem;height:2.25rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/fab.d.ts

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

package/components/fab.js

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

package/components/icon/index.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import type { TemplateResult, CSSResultGroup } from 'lit';
+/**
+ * @summary 图标组件
+ *
+ * ```html
+ * <mdui-icon name="search"></mdui-icon>
+ * ```
+ *
+ * @slot - `svg` 图标的内容
+ */
+export declare class Icon extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * Material Icons 图标名
+     */
+    name?: string;
+    /**
+     * svg 图标的路径
+     */
+    src?: string;
+    private readonly hasSlotController;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-icon': Icon;
+    }
+}

package/components/icon/index.js

@@ -0,0 +1,57 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { until } from 'lit/directives/until.js';
+import { ajax } from '@mdui/jq/functions/ajax.js';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 图标组件
+ *
+ * ```html
+ * <mdui-icon name="search"></mdui-icon>
+ * ```
+ *
+ * @slot - `svg` 图标的内容
+ */
+export let Icon = class Icon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, '[default]');
+    }
+    render() {
+        const renderDefault = () => {
+            if (this.name) {
+                const [name, variant] = this.name.split('--');
+                const familyMap = new Map([
+                    ['outlined', 'Material Icons Outlined'],
+                    ['filled', 'Material Icons'],
+                    ['rounded', 'Material Icons Round'],
+                    ['sharp', 'Material Icons Sharp'],
+                    ['two-tone', 'Material Icons Two Tone'],
+                ]);
+                return html `<span style="${styleMap({ fontFamily: familyMap.get(variant) })}">${name}</span>`;
+            }
+            if (this.src) {
+                return html `${until(ajax({ url: this.src }).then(unsafeSVG))}`;
+            }
+            return html ``;
+        };
+        return this.hasSlotController.test('[default]')
+            ? html `<slot></slot>`
+            : renderDefault();
+    }
+};
+Icon.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], Icon.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], Icon.prototype, "src", void 0);
+Icon = __decorate([
+    customElement('mdui-icon')
+], Icon);

package/components/icon/style.d.ts

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

package/components/icon/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{display:inline-block;width:1em;height:1em;font-weight:400;font-family:'Material Icons';font-style:normal;line-height:1;direction:ltr;letter-spacing:normal;white-space:nowrap;text-transform:none;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;font-size:1.5rem}::slotted(svg),svg{width:100%;height:100%;fill:currentcolor}`;

package/components/icon.d.ts

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

package/components/icon.js

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

package/components/layout/helper.d.ts

@@ -0,0 +1,67 @@
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/get.js';
+import type { LayoutItemBase } from './layout-item-base.js';
+import type { LayoutMain } from './layout-main.js';
+import type { Layout } from './layout.js';
+export type LayoutPlacement = 'top' | 'left' | 'right' | 'bottom';
+export declare class LayoutManager {
+    private $layout;
+    private $main?;
+    private states;
+    private items?;
+    constructor(element: Layout);
+    /**
+     * 注册 `<mdui-layout-main>`
+     */
+    registerMain(element: LayoutMain): void;
+    /**
+     * 取消注册 `<mdui-layout-main>`
+     */
+    unregisterMain(): void;
+    /**
+     * 注册新的 `<mdui-layout-item>`
+     */
+    registerItem(element: LayoutItemBase): void;
+    /**
+     * 取消注册 `<mdui-layout-item>`
+     */
+    unregisterItem(element: LayoutItemBase): void;
+    /**
+     * 获取所有 `<mdui-layout-item>` 元素（按在 DOM 中的顺序）
+     */
+    getItems(): LayoutItemBase[];
+    /**
+     * 获取 `<mdui-layout-main>` 元素
+     */
+    getMain(): LayoutMain | undefined;
+    /**
+     * 获取 `<mdui-layout-item>` 及 `<mdui-layout-main>` 元素
+     */
+    getItemsAndMain(): (LayoutItemBase | LayoutMain)[];
+    /**
+     * 检查指定 `<mdui-layout-item>` 元素是否已注册
+     */
+    hasItem(element: LayoutItemBase): boolean;
+    /**
+     * 更新 `order` 值，更新完后重新计算布局
+     */
+    updateOrder(): void;
+    /**
+     * 重新计算布局
+     * @param element 从哪一个元素开始更新；若未传入参数，则将更新所有元素
+     * @param size 此次更新中，元素的宽高（仅在此次更新中使用）。若不传则自动计算
+     */
+    updateLayout(element?: LayoutItemBase, size?: {
+        width?: number;
+        height?: number;
+    }): void;
+    /**
+     * 按 order 排序，order 相同时，按在 DOM 中的顺序排序
+     */
+    private resort;
+}
+/**
+ * 获取 layout 实例
+ */
+export declare const getLayout: (element: Layout) => LayoutManager;

package/components/layout/helper.js

@@ -0,0 +1,212 @@
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/get.js';
+import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { observeResize } from '@mdui/shared/helpers/observeResize.js';
+export class LayoutManager {
+    constructor(element) {
+        this.states = [];
+        this.$layout = $(element);
+    }
+    /**
+     * 注册 `<mdui-layout-main>`
+     */
+    registerMain(element) {
+        this.$main = $(element);
+    }
+    /**
+     * 取消注册 `<mdui-layout-main>`
+     */
+    unregisterMain() {
+        this.$main = undefined;
+    }
+    /**
+     * 注册新的 `<mdui-layout-item>`
+     */
+    registerItem(element) {
+        const state = { element };
+        this.states.push(state);
+        // 监听元素尺寸变化
+        state.observeResize = observeResize(state.element, () => {
+            // drawer 较特殊，在为模态化时，占据的宽度为 0
+            if (isNodeName(state.element, 'mdui-navigation-drawer') &&
+                // @ts-ignore
+                state.element.isModal) {
+                this.updateLayout(state.element, { width: 0 });
+            }
+            else {
+                this.updateLayout(state.element);
+            }
+        });
+        this.items = undefined;
+        this.resort();
+        // 从头更新布局
+        this.updateLayout();
+    }
+    /**
+     * 取消注册 `<mdui-layout-item>`
+     */
+    unregisterItem(element) {
+        var _a;
+        const index = this.states.findIndex((item) => item.element === element);
+        if (index < 0) {
+            return;
+        }
+        // 取消监听尺寸变化
+        const item = this.states[index];
+        (_a = item.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        this.items = undefined;
+        // 移除一个元素，并从下一个元素开始更新
+        this.states.splice(index, 1);
+        if (this.states[index]) {
+            this.updateLayout(this.states[index].element);
+        }
+    }
+    /**
+     * 获取所有 `<mdui-layout-item>` 元素（按在 DOM 中的顺序）
+     */
+    getItems() {
+        if (!this.items) {
+            this.items = this.$layout
+                .children([
+                'mdui-navigation-bar',
+                'mdui-navigation-drawer',
+                'mdui-navigation-rail',
+                'mdui-bottom-app-bar',
+                'mdui-top-app-bar',
+                'mdui-layout-item',
+            ].join(','))
+                .get();
+        }
+        return this.items;
+    }
+    /**
+     * 获取 `<mdui-layout-main>` 元素
+     */
+    getMain() {
+        return this.$main ? this.$main[0] : undefined;
+    }
+    /**
+     * 获取 `<mdui-layout-item>` 及 `<mdui-layout-main>` 元素
+     */
+    getItemsAndMain() {
+        return [...this.getItems(), this.getMain()].filter((i) => i);
+    }
+    /**
+     * 检查指定 `<mdui-layout-item>` 元素是否已注册
+     */
+    hasItem(element) {
+        return this.getItems().includes(element);
+    }
+    /**
+     * 更新 `order` 值，更新完后重新计算布局
+     */
+    updateOrder() {
+        this.resort();
+        this.updateLayout();
+    }
+    /**
+     * 重新计算布局
+     * @param element 从哪一个元素开始更新；若未传入参数，则将更新所有元素
+     * @param size 此次更新中，元素的宽高（仅在此次更新中使用）。若不传则自动计算
+     */
+    updateLayout(element, size) {
+        const state = element
+            ? {
+                element,
+                width: size === null || size === void 0 ? void 0 : size.width,
+                height: size === null || size === void 0 ? void 0 : size.height,
+            }
+            : undefined;
+        const index = state
+            ? this.states.findIndex((v) => v.element === state.element)
+            : 0;
+        if (index < 0) {
+            return;
+        }
+        Object.assign(this.states[index], state);
+        this.states.forEach((currState, currIndex) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (currIndex < index) {
+                return;
+            }
+            // @ts-ignore
+            const placement = currState.element.layoutPlacement;
+            // 前一个元素
+            const prevState = currIndex > 0 ? this.states[currIndex - 1] : undefined;
+            const top = (_a = prevState === null || prevState === void 0 ? void 0 : prevState.top) !== null && _a !== void 0 ? _a : 0;
+            const right = (_b = prevState === null || prevState === void 0 ? void 0 : prevState.right) !== null && _b !== void 0 ? _b : 0;
+            const bottom = (_c = prevState === null || prevState === void 0 ? void 0 : prevState.bottom) !== null && _c !== void 0 ? _c : 0;
+            const left = (_d = prevState === null || prevState === void 0 ? void 0 : prevState.left) !== null && _d !== void 0 ? _d : 0;
+            Object.assign(currState, { top, right, bottom, left });
+            switch (placement) {
+                case 'top':
+                    currState.top += (_e = currState.height) !== null && _e !== void 0 ? _e : currState.element.offsetHeight;
+                    break;
+                case 'right':
+                    currState.right += (_f = currState.width) !== null && _f !== void 0 ? _f : currState.element.offsetWidth;
+                    break;
+                case 'bottom':
+                    currState.bottom +=
+                        (_g = currState.height) !== null && _g !== void 0 ? _g : currState.element.offsetHeight;
+                    break;
+                case 'left':
+                    currState.left += (_h = currState.width) !== null && _h !== void 0 ? _h : currState.element.offsetWidth;
+                    break;
+            }
+            currState.height = currState.width = undefined;
+            $(currState.element).css({
+                position: 'absolute',
+                top: placement === 'bottom' ? null : top,
+                right: placement === 'left' ? null : right,
+                bottom: placement === 'top' ? null : bottom,
+                left: placement === 'right' ? null : left,
+            });
+        });
+        // 更新完后，设置 layout-main 的 padding
+        const lastState = this.states[this.states.length - 1];
+        if (this.$main) {
+            this.$main.css({
+                paddingTop: lastState.top,
+                paddingRight: lastState.right,
+                paddingBottom: lastState.bottom,
+                paddingLeft: lastState.left,
+            });
+        }
+    }
+    /**
+     * 按 order 排序，order 相同时，按在 DOM 中的顺序排序
+     */
+    resort() {
+        const items = this.getItems();
+        this.states.sort((a, b) => {
+            var _a, _b;
+            const aOrder = (_a = a.element.order) !== null && _a !== void 0 ? _a : 0;
+            const bOrder = (_b = b.element.order) !== null && _b !== void 0 ? _b : 0;
+            if (aOrder > bOrder) {
+                return 1;
+            }
+            if (aOrder < bOrder) {
+                return -1;
+            }
+            if (items.indexOf(a.element) > items.indexOf(b.element)) {
+                return 1;
+            }
+            if (items.indexOf(a.element) < items.indexOf(b.element)) {
+                return -1;
+            }
+            return 0;
+        });
+    }
+}
+const layoutManagerMap = new WeakMap();
+/**
+ * 获取 layout 实例
+ */
+export const getLayout = (element) => {
+    if (!layoutManagerMap.has(element)) {
+        layoutManagerMap.set(element, new LayoutManager(element));
+    }
+    return layoutManagerMap.get(element);
+};

package/components/layout/layout-item-base.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import type { LayoutManager, LayoutPlacement } from './helper.js';
+export declare class LayoutItemBase extends LitElement {
+    /**
+     * 该组件在 [`<mdui-layout>`](/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`
+     */
+    order?: number;
+    protected layoutManager?: LayoutManager;
+    protected isParentLayout: boolean;
+    /**
+     * 当前布局组件所处的位置，父类必须实现该 getter
+     */
+    protected get layoutPlacement(): LayoutPlacement;
+    private onOrderChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/components/layout/layout-item-base.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { isNodeName } from '@mdui/jq/shared/helper.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { getLayout } from './helper.js';
+export class LayoutItemBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        // 父元素是否是 `mdui-layout`
+        this.isParentLayout = false;
+    }
+    /**
+     * 当前布局组件所处的位置，父类必须实现该 getter
+     */
+    get layoutPlacement() {
+        throw new Error('Must implement placement getter!');
+    }
+    // order 变更时，需要重新调整布局
+    onOrderChange() {
+        var _a;
+        (_a = this.layoutManager) === null || _a === void 0 ? void 0 : _a.updateOrder();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const parentElement = this.parentElement;
+        this.isParentLayout = isNodeName(parentElement, 'mdui-layout');
+        if (this.isParentLayout) {
+            this.layoutManager = getLayout(parentElement);
+            this.layoutManager.registerItem(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.layoutManager) {
+            this.layoutManager.unregisterItem(this);
+        }
+    }
+}
+__decorate([
+    property({ type: Number, reflect: true })
+], LayoutItemBase.prototype, "order", void 0);
+__decorate([
+    watch('order', true)
+], LayoutItemBase.prototype, "onOrderChange", null);

package/components/layout/layout-item-style.d.ts

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

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const layoutItemStyle = css `:host{display:flex;z-index:1}`;

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

@@ -0,0 +1,37 @@
+import { CSSResultGroup } from 'lit';
+import { LayoutItemBase } from './layout-item-base.js';
+import type { LayoutPlacement } from './helper.js';
+import type { TemplateResult } from 'lit';
+/**
+ * @summary 布局项组件
+ *
+ * ```html
+ * <mdui-layout>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-item></mdui-layout-item>
+ * ..<mdui-layout-main></mdui-layout-main>
+ * </mdui-layout>
+ * ```
+ *
+ * @slot - 可以是任意内容
+ */
+export declare class LayoutItem extends LayoutItemBase {
+    static styles: CSSResultGroup;
+    /**
+     * 该组件所处位置。可选值为：
+     *
+     * * `top`：位于上方
+     * * `bottom`：位于下方
+     * * `left`：位于左侧
+     * * `right`：位于右侧
+     */
+    placement: /*位于上方*/ 'top' | /*位于下方*/ 'bottom' | /*位于左侧*/ 'left' | /*位于右侧*/ 'right';
+    protected get layoutPlacement(): LayoutPlacement;
+    private onPlacementChange;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-layout-item': LayoutItem;
+    }
+}