mdui 1.0.2 → 2.0.0

package/components/navigation-drawer/index.js

@@ -0,0 +1,365 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/innerWidth.js';
+import { isNull } from '@mdui/jq/shared/helper.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
+import { breakpoint } from '@mdui/shared/helpers/breakpoint.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { Modal } from '@mdui/shared/helpers/modal.js';
+import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
+import { observeResize } from '@mdui/shared/helpers/observeResize.js';
+import { lockScreen, unlockScreen } from '@mdui/shared/helpers/scroll.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { LayoutItemBase } from '../layout/layout-item-base.js';
+import { style } from './style.js';
+/**
+ * 在手机端，`modal` 始终为 `true`；大于手机端时，`modal` 属性才开始生效
+ *
+ * @summary 侧边抽屉栏组件
+ *
+ * ```html
+ * <mdui-navigation-drawer>content</mdui-navigation-drawer>
+ * ```
+ *
+ * @event open - 在抽屉导航打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航打开
+ * @event opened - 在抽屉导航打开之后触发
+ * @event close - 在抽屉导航关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航关闭
+ * @event closed - 在抽屉导航关闭之后触发
+ * @event overlay-click - 点击遮罩层时触发
+ *
+ * @slot - 抽屉导航中的内容
+ *
+ * @csspart overlay - 遮罩层
+ * @csspart panel - 抽屉导航容器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否打开抽屉导航
+         */
+        this.open = false;
+        /**
+         * 打开时，是否显示遮罩层
+         *
+         * 较窄的设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint) 时），会无视该参数，始终显示遮罩层
+         */
+        this.modal = false;
+        /**
+         * 在含遮罩层时，是否在按下 ESC 键时，关闭抽屉导航
+         */
+        this.closeOnEsc = false;
+        /**
+         * 是否在点击遮罩时，关闭抽屉导航
+         */
+        this.closeOnOverlayClick = false;
+        /**
+         * 抽屉导航的显示位置。可选值为：
+         *
+         * * `left`：显示在左侧
+         * * `right`：显示在右侧
+         */
+        this.placement = 'left';
+        /**
+         * 默认抽屉导航相对于 `body` 元素显示，该参数设置为 `true` 时，抽屉导航将相对于它的父元素显示
+         *
+         * Note:
+         * 设置了该属性时，必须手动在父元素上设置样式 `position: relative; overflow: hidden;`
+         */
+        this.contained = false;
+        // 断点为 mobile 时为 `true` 时，强制使用遮罩层
+        this.mobile = false;
+        this.overlayRef = createRef();
+        this.panelRef = createRef();
+    }
+    get layoutPlacement() {
+        return this.placement;
+    }
+    get lockTarget() {
+        return this.contained || this.isParentLayout
+            ? this.parentElement
+            : document.body;
+    }
+    get isModal() {
+        return this.mobile || this.modal;
+    }
+    // contained 变更后，修改监听尺寸变化的元素。为 true 时，监听父元素；为 false 时，监听 body
+    onContainedChange() {
+        var _a;
+        if (this.hasUpdated) {
+            (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        }
+        this.observeResize = observeResize(this.contained ? this.parentElement : document.body, () => {
+            const target = this.contained ? this.parentElement : undefined;
+            this.mobile = breakpoint(target).down('md');
+            // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
+            if (this.isParentLayout) {
+                this.layoutManager.updateLayout(this, {
+                    width: this.isModal ? 0 : undefined,
+                });
+            }
+        });
+    }
+    onPlacementChange() {
+        if (this.isParentLayout) {
+            this.layoutManager.updateLayout(this);
+        }
+    }
+    async onOpenChange() {
+        let panel = this.panelRef.value;
+        let overlay = this.overlayRef.value;
+        const isRight = this.placement === 'right';
+        const paddingPropName = isRight ? 'paddingRight' : 'paddingLeft';
+        const easingLinear = getEasing(this, 'linear');
+        const easingEmphasized = getEasing(this, 'emphasized');
+        // 在当前 drawer 位于 layout 中时，设置所有 layout-item 和 layout-main 元素的 transition 样式
+        const setLayoutTransition = (duration, easing) => {
+            $(this.layoutManager.getItemsAndMain()).css('transition', isNull(duration) ? null : `all ${duration}ms ${easing}`);
+        };
+        // 停止原有动画
+        const stopOldAnimations = async () => {
+            await Promise.all([
+                this.isModal
+                    ? stopAnimations(overlay)
+                    : !this.isParentLayout
+                        ? stopAnimations(this.lockTarget)
+                        : Promise.resolve(),
+                this.isModal ? stopAnimations(panel) : stopAnimations(this),
+            ]);
+        };
+        // 打开
+        // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
+        if (this.open) {
+            const hasUpdated = this.hasUpdated;
+            if (!hasUpdated) {
+                await this.updateComplete;
+                panel = this.panelRef.value;
+                overlay = this.overlayRef.value;
+            }
+            if (hasUpdated) {
+                const requestOpen = emit(this, 'open', { cancelable: true });
+                if (requestOpen.defaultPrevented) {
+                    return;
+                }
+            }
+            this.style.display = 'block';
+            this.originalTrigger = document.activeElement;
+            if (this.isModal) {
+                this.modalHelper.activate();
+                lockScreen(this, this.lockTarget);
+            }
+            await stopOldAnimations();
+            // 设置聚焦
+            requestAnimationFrame(() => {
+                const autoFocusTarget = this.querySelector('[autofocus]');
+                if (autoFocusTarget) {
+                    autoFocusTarget.focus({ preventScroll: true });
+                }
+                else {
+                    panel.focus({ preventScroll: true });
+                }
+            });
+            const duration = getDuration(this, 'long2');
+            const animations = [];
+            // 模态框 drawer，显示 overlay 动画
+            if (this.isModal) {
+                animations.push(animateTo(overlay, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                }));
+            }
+            // 不位于 layout 中，父元素 padding 变化的动画
+            else if (!this.isParentLayout) {
+                animations.push(animateTo(this.lockTarget, [
+                    { [paddingPropName]: 0 },
+                    { [paddingPropName]: $(panel).innerWidth() + 'px' },
+                ], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingEmphasized,
+                    fill: 'forwards',
+                }));
+            }
+            // 若位于 layout 中，则 layout-main 的 padding 变化需要有和 drawer 相同的动画
+            // 但首次渲染不执行动画
+            if (this.isParentLayout && hasUpdated) {
+                setLayoutTransition(duration, easingEmphasized);
+            }
+            // drawer 显示动画
+            animations.push(animateTo(this.isModal ? panel : this, [
+                { transform: `translateX(${isRight ? '' : '-'}100%)` },
+                { transform: 'translateX(0)' },
+            ], {
+                duration: hasUpdated ? duration : 0,
+                easing: easingEmphasized,
+            }));
+            await Promise.all(animations);
+            // 若位于 layout 中，则 drawer 动画完成后，移除 layout-main 的动画
+            if (this.isParentLayout && hasUpdated) {
+                setLayoutTransition(null);
+            }
+            if (hasUpdated) {
+                emit(this, 'opened');
+            }
+            return;
+        }
+        // 关闭
+        if (!this.open && this.hasUpdated) {
+            const requestClose = emit(this, 'close', { cancelable: true });
+            if (requestClose.defaultPrevented) {
+                return;
+            }
+            if (this.isModal) {
+                this.modalHelper.deactivate();
+            }
+            await stopOldAnimations();
+            const duration = getDuration(this, 'short4');
+            const animations = [];
+            // 模态框 drawer，显示 overlay 动画
+            if (this.isModal) {
+                animations.push(animateTo(overlay, [{ opacity: 1 }, { opacity: 0 }], {
+                    duration,
+                    easing: easingLinear,
+                }));
+            }
+            // 不位于 layout 中，父元素 padding 变化的动画
+            else if (!this.isParentLayout) {
+                animations.push(animateTo(this.lockTarget, [
+                    { [paddingPropName]: $(panel).innerWidth() + 'px' },
+                    { [paddingPropName]: 0 },
+                ], {
+                    duration,
+                    easing: easingEmphasized,
+                    fill: 'forwards',
+                }));
+            }
+            // 若位于 layout 中，则 layout-main 的 padding 变化需要有和 drawer 相同的动画
+            if (this.isParentLayout) {
+                setLayoutTransition(duration, easingEmphasized);
+                // 关闭动画开始时，drawer 的宽度不变。等到关闭动画结束，drawer 的宽度才变为 0
+                // 为了 layout-main 的动画能在关闭动画开始时就执行，强制调用 updateLayout 更新布局
+                this.layoutManager.updateLayout(this, { width: 0 });
+            }
+            // drawer 显示动画
+            animations.push(animateTo(this.isModal ? panel : this, [
+                { transform: 'translateX(0)' },
+                { transform: `translateX(${isRight ? '' : '-'}100%)` },
+            ], { duration, easing: easingEmphasized }));
+            await Promise.all(animations);
+            // 若位于 layout 中，则 drawer 动画结束后，移除 layout-main 的动画
+            if (this.isParentLayout) {
+                setLayoutTransition(null);
+            }
+            this.style.display = 'none';
+            if (this.isModal) {
+                unlockScreen(this, this.lockTarget);
+            }
+            // 抽屉导航关闭后，恢复焦点到原有的元素上
+            const trigger = this.originalTrigger;
+            if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.focus) === 'function') {
+                setTimeout(() => trigger.focus());
+            }
+            emit(this, 'closed');
+            return;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.modalHelper = new Modal(this);
+        this.addEventListener('keydown', (event) => {
+            if (this.open &&
+                this.closeOnEsc &&
+                event.key === 'Escape' &&
+                this.isModal) {
+                event.stopPropagation();
+                this.open = false;
+            }
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        unlockScreen(this, this.lockTarget);
+        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+    }
+    render() {
+        return html `${when(this.isModal, () => html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${ref(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`;
+    }
+    onOverlayClick() {
+        emit(this, 'overlay-click');
+        if (!this.closeOnOverlayClick) {
+            return;
+        }
+        this.open = false;
+    }
+};
+NavigationDrawer.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationDrawer.prototype, "open", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationDrawer.prototype, "modal", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'close-on-esc',
+    })
+], NavigationDrawer.prototype, "closeOnEsc", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'close-on-overlay-click',
+    })
+], NavigationDrawer.prototype, "closeOnOverlayClick", void 0);
+__decorate([
+    property({ reflect: true })
+    // eslint-disable-next-line prettier/prettier
+], NavigationDrawer.prototype, "placement", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationDrawer.prototype, "contained", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationDrawer.prototype, "mobile", void 0);
+__decorate([
+    watch('contained')
+], NavigationDrawer.prototype, "onContainedChange", null);
+__decorate([
+    watch('placement')
+], NavigationDrawer.prototype, "onPlacementChange", null);
+__decorate([
+    watch('open')
+], NavigationDrawer.prototype, "onOpenChange", null);
+NavigationDrawer = __decorate([
+    customElement('mdui-navigation-drawer')
+], NavigationDrawer);

package/components/navigation-drawer/style.d.ts

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

package/components/navigation-drawer/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;

package/components/navigation-drawer.d.ts

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

package/components/navigation-drawer.js

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

package/components/navigation-rail/navigation-rail-item-style.d.ts

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

package/components/navigation-rail/navigation-rail-item-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationRailItemStyle = css `:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;width:100%;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);height:3.5rem}mdui-ripple{z-index:1;width:3.5rem;height:2rem;border-radius:var(--mdui-shape-corner-full)}.container:not(.has-label)+mdui-ripple{height:3.5rem}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);height:2rem;width:2rem}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}:host([placement=right]) ::slotted([slot=badge]){transform:translate(-50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}:host([placement=right]) ::slotted([slot=badge][variant=small]){transform:translate(-.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active-icon]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;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)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:3.5rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) :not(.has-label) .indicator{height:3.5rem}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;

package/components/navigation-rail/navigation-rail-item.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import '../icon.js';
+import type { Ripple } from '../ripple/index.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare const NavigationRailItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+/**
+ * @summary 侧边导航栏项组件。需与 `<mdui-navigation-rail>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-rail>
+ * ..<mdui-navigation-rail-item icon="watch_later">Recent</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="image">Images</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="library_music">Library</mdui-navigation-rail-item>
+ * </mdui-navigation-rail>
+ * ```
+ *
+ * @slot - 文本
+ * @slot icon - 图标
+ * @slot active-icon - 激活状态的图标
+ * @slot badge - 徽标
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @csspart container - 导航项容器
+ * @csspart indicator - 指示器
+ * @csspart badge - 徽标
+ * @csspart icon - 图标
+ * @csspart active-icon - 激活状态的图标
+ * @csspart label - 文本
+ *
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class NavigationRailItem extends NavigationRailItem_base {
+    static styles: CSSResultGroup;
+    /**
+     * 未激活状态的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 激活状态的 Material Icons 图标名。也可以通过 `slot="active-icon"` 设置
+     */
+    activeIcon?: string;
+    /**
+     * 导航项的值
+     */
+    value?: string;
+    /**
+     * 是否为激活状态，由 `navigation-rail` 组件控制该参数
+     */
+    protected active: boolean;
+    /**
+     * 导航栏的位置，由 `navigation-rail` 组件控制该参数
+     */
+    protected placement: 'left' | 'right';
+    private disabled;
+    protected readonly key: number;
+    private readonly rippleRef;
+    private readonly hasSlotController;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement | null;
+    protected get focusDisabled(): boolean;
+    protected render(): TemplateResult;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-navigation-rail-item': NavigationRailItem;
+    }
+}
+export {};

package/components/navigation-rail/navigation-rail-item.js

@@ -0,0 +1,128 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } 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 { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../icon.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { navigationRailItemStyle } from './navigation-rail-item-style.js';
+/**
+ * @summary 侧边导航栏项组件。需与 `<mdui-navigation-rail>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-rail>
+ * ..<mdui-navigation-rail-item icon="watch_later">Recent</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="image">Images</mdui-navigation-rail-item>
+ * ..<mdui-navigation-rail-item icon="library_music">Library</mdui-navigation-rail-item>
+ * </mdui-navigation-rail>
+ * ```
+ *
+ * @slot - 文本
+ * @slot icon - 图标
+ * @slot active-icon - 激活状态的图标
+ * @slot badge - 徽标
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @csspart container - 导航项容器
+ * @csspart indicator - 指示器
+ * @csspart badge - 徽标
+ * @csspart icon - 图标
+ * @csspart active-icon - 激活状态的图标
+ * @csspart label - 文本
+ *
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为激活状态，由 `navigation-rail` 组件控制该参数
+         */
+        this.active = false;
+        /**
+         * 导航栏的位置，由 `navigation-rail` 组件控制该参数
+         */
+        this.placement = 'left';
+        // 是否禁用该元素，该组件没有禁用状态
+        this.disabled = false;
+        // 每一个 `navigation-rail-item` 元素都添加一个唯一的 key
+        this.key = uniqueId();
+        this.rippleRef = createRef();
+        this.hasSlotController = new HasSlotController(this, '[default]', 'active-icon');
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.disabled;
+    }
+    get focusElement() {
+        var _a;
+        return this.href ? (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('._a') : this;
+    }
+    get focusDisabled() {
+        return this.disabled;
+    }
+    render() {
+        const hasDefaultSlot = this.hasSlotController.test('[default]');
+        const className = cc({
+            container: true,
+            'has-label': hasDefaultSlot,
+            'has-active-icon': this.activeIcon || this.hasSlotController.test('active-icon'),
+        });
+        return html `${this.href
+            ? this.renderAnchor({
+                part: 'container',
+                className,
+                content: this.renderInner(hasDefaultSlot),
+            })
+            : html `<div part="container" class="${className}">${this.renderInner(hasDefaultSlot)}</div>`}<mdui-ripple .noRipple="${!this.active || this.noRipple}" ${ref(this.rippleRef)}></mdui-ripple>`;
+    }
+    renderInner(hasDefaultSlot) {
+        return html `<div part="indicator" class="indicator"><slot name="badge" part="badge" class="badge"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon
+            ? html `<mdui-icon name="${this.activeIcon}"></mdui-icon>`
+            : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot></div>${hasDefaultSlot
+            ? html `<slot part="label" class="label"></slot>`
+            : nothing}`;
+    }
+};
+NavigationRailItem.styles = [
+    componentStyle,
+    navigationRailItemStyle,
+];
+__decorate([
+    property({ reflect: true })
+], NavigationRailItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'active-icon' })
+], NavigationRailItem.prototype, "activeIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationRailItem.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationRailItem.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationRailItem.prototype, "placement", void 0);
+__decorate([
+    state()
+], NavigationRailItem.prototype, "disabled", void 0);
+NavigationRailItem = __decorate([
+    customElement('mdui-navigation-rail-item')
+], NavigationRailItem);

package/components/navigation-rail/navigation-rail-style.d.ts

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

package/components/navigation-rail/navigation-rail-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationRailStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;border-radius:0 var(--shape-corner) var(--shape-corner) 0;z-index:var(--z-index);width:5rem;background-color:rgb(var(--mdui-color-surface));padding:.375rem .75rem}:host([contained]){position:absolute}:host([divider]){border-right:.0625rem solid rgb(var(--mdui-color-surface-variant));width:5.0625rem}:host([placement=right]){left:initial;right:0;border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host([placement=right][divider]){border-right:none;border-left:.0625rem solid rgb(var(--mdui-color-surface-variant))}.bottom,.items,.top{display:flex;flex-direction:column;align-items:center;width:100%}.top{margin-bottom:1.75rem}.bottom{margin-top:1.75rem}::slotted([slot=bottom]),::slotted([slot=top]),::slotted(mdui-navigation-rail-item){margin-top:.375rem;margin-bottom:.375rem}:host([alignment=start]) .top-spacer{flex-grow:0}:host([alignment=start]) .bottom-spacer{flex-grow:1}:host([alignment=end]) .top-spacer{flex-grow:1}:host([alignment=end]) .bottom-spacer{flex-grow:0}:host([alignment=center]){justify-content:center}:host([alignment=center]) .bottom,:host([alignment=center]) .top{position:absolute}:host([alignment=center]) .top{top:.375rem}:host([alignment=center]) .bottom{bottom:.375rem}`;