mdui 1.0.2 → 2.0.0

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

@@ -0,0 +1,120 @@
+import { __decorate } from "tslib";
+import { html, LitElement } 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 { navigationBarItemStyle } from './navigation-bar-item-style.js';
+/**
+ * @summary 底部导航栏项组件。需与 `<mdui-navigation-bar>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-bar>
+ * ..<mdui-navigation-bar-item icon="place">Item 1</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="commute">Item 2</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="people">Item 3</mdui-navigation-bar-item>
+ * </mdui-navigation-bar>
+ * ```
+ *
+ * @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 NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为激活状态，由 `navigation-bar` 组件控制该参数
+         */
+        this.active = false;
+        // 是否禁用该元素，该组件没有禁用状态
+        this.disabled = false;
+        // 每一个 `navigation-bar-item` 元素都添加一个唯一的 key
+        this.key = uniqueId();
+        this.rippleRef = createRef();
+        this.hasSlotController = new HasSlotController(this, '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 className = cc({
+            container: true,
+            'has-active-icon': this.activeIcon || this.hasSlotController.test('active-icon'),
+        });
+        return html `<mdui-ripple .noRipple="${!this.active || this.noRipple}" ${ref(this.rippleRef)}></mdui-ripple>${this.href
+            ? this.renderAnchor({
+                part: 'container',
+                className,
+                content: this.renderInner(),
+            })
+            : html `<div part="container" class="${className}">${this.renderInner()}</div>`}`;
+    }
+    renderInner() {
+        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><slot part="label" class="label"></slot>`;
+    }
+};
+NavigationBarItem.styles = [
+    componentStyle,
+    navigationBarItemStyle,
+];
+__decorate([
+    property({ reflect: true })
+], NavigationBarItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'active-icon' })
+], NavigationBarItem.prototype, "activeIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationBarItem.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'label-visibility' })
+], NavigationBarItem.prototype, "labelVisibility", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationBarItem.prototype, "active", void 0);
+__decorate([
+    state()
+], NavigationBarItem.prototype, "disabled", void 0);
+NavigationBarItem = __decorate([
+    customElement('mdui-navigation-bar-item')
+], NavigationBarItem);

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

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

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition-property:transform;transition-duration:var(--mdui-motion-duration-long2);transition-timing-function:var(--mdui-motion-easing-emphasized);height:5rem;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transform:translateY(5.625rem);transition-duration:var(--mdui-motion-duration-short4)}`;

package/components/navigation-bar/navigation-bar.d.ts

@@ -0,0 +1,78 @@
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import { LayoutItemBase } from '../layout/layout-item-base.js';
+import type { LayoutPlacement } from '../layout/helper.js';
+import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+declare const NavigationBar_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
+/**
+ * @summary 底部导航栏组件。需与 `<mdui-navigation-bar-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-bar>
+ * ..<mdui-navigation-bar-item icon="place">Item 1</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="commute">Item 2</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="people">Item 3</mdui-navigation-bar-item>
+ * </mdui-navigation-bar>
+ * ```
+ *
+ * @event change - 值变化时触发
+ * @event show - 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
+ * @event shown - 显示动画完成时，事件被触发
+ * @event hide - 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
+ * @event hidden - 隐藏动画完成时，事件被触发
+ *
+ * @slot - `<mdui-navigation-bar-item>` 组件
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export declare class NavigationBar extends NavigationBar_base {
+    static styles: CSSResultGroup;
+    /**
+     * 是否隐藏
+     */
+    hide: boolean;
+    /**
+     * 文本的可视状态。可选值为：
+     *
+     * * `auto`：小于等于3个选项时，始终显示；大于3个选项时，仅显示选中状态的文本
+     * * `selected`：仅选中状态显示文本
+     * * `labeled`：始终显示文本
+     * * `unlabeled`：始终不显示文本
+     */
+    labelVisibility: /*小于等于3个选项时，始终显示；大于3个选项时，仅显示选中状态的文本*/ 'auto' | /*仅选中状态显示文本*/ 'selected' | /*始终显示文本*/ 'labeled' | /*始终不显示文本*/ 'unlabeled';
+    /**
+     * 当前选中的 `<mdui-navigation-bar-item>` 的值
+     */
+    value?: string;
+    /**
+     * 滚动行为。可选值为：
+     * * `hide`：滚动时隐藏
+     */
+    scrollBehavior?: 'hide';
+    private activeKey;
+    private hasSetDefaultValue;
+    protected get scrollPaddingPosition(): ScrollPaddingPosition;
+    protected get layoutPlacement(): LayoutPlacement;
+    private get items();
+    private onActiveKeyChange;
+    private onValueChange;
+    private onLabelVisibilityChange;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    /**
+     * 滚动行为
+     * 当前仅支持 hide 这一个行为，所以不做行为类型判断
+     */
+    protected runScrollThreshold(isScrollingUp: boolean): void;
+    private onClick;
+    private updateActive;
+    private onSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-navigation-bar': NavigationBar;
+    }
+}
+export {};

package/components/navigation-bar/navigation-bar.js

@@ -0,0 +1,180 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { ScrollBehaviorMixin } from '@mdui/shared/mixins/scrollBehavior.js';
+import { LayoutItemBase } from '../layout/layout-item-base.js';
+import { navigationBarStyle } from './navigation-bar-style.js';
+/**
+ * @summary 底部导航栏组件。需与 `<mdui-navigation-bar-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-bar>
+ * ..<mdui-navigation-bar-item icon="place">Item 1</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="commute">Item 2</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="people">Item 3</mdui-navigation-bar-item>
+ * </mdui-navigation-bar>
+ * ```
+ *
+ * @event change - 值变化时触发
+ * @event show - 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
+ * @event shown - 显示动画完成时，事件被触发
+ * @event hide - 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
+ * @event hidden - 隐藏动画完成时，事件被触发
+ *
+ * @slot - `<mdui-navigation-bar-item>` 组件
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBase) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否隐藏
+         */
+        this.hide = false;
+        /**
+         * 文本的可视状态。可选值为：
+         *
+         * * `auto`：小于等于3个选项时，始终显示；大于3个选项时，仅显示选中状态的文本
+         * * `selected`：仅选中状态显示文本
+         * * `labeled`：始终显示文本
+         * * `unlabeled`：始终不显示文本
+         */
+        this.labelVisibility = 'auto';
+        // 因为 navigation-bar-item 的 value 可能会重复，所以在每个 navigation-bar-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
+        this.activeKey = 0;
+        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
+        this.hasSetDefaultValue = false;
+    }
+    get scrollPaddingPosition() {
+        return 'bottom';
+    }
+    get layoutPlacement() {
+        return 'bottom';
+    }
+    // 所有的子项元素
+    get items() {
+        return $(this)
+            .find('mdui-navigation-bar-item')
+            .get();
+    }
+    onActiveKeyChange() {
+        // 根据 activeKey 读取对应 navigation-bar-item 的值
+        const item = this.items.find((item) => item.key === this.activeKey);
+        this.value = item === null || item === void 0 ? void 0 : item.value;
+        if (this.hasSetDefaultValue) {
+            emit(this, 'change');
+        }
+        else {
+            this.hasSetDefaultValue = true;
+        }
+    }
+    onValueChange() {
+        var _a;
+        const item = this.items.find((item) => item.value === this.value);
+        this.activeKey = (_a = item === null || item === void 0 ? void 0 : item.key) !== null && _a !== void 0 ? _a : 0;
+        this.updateActive();
+    }
+    onLabelVisibilityChange() {
+        const items = this.items;
+        // 为 navigation-bar-item 设置 labelVisibility 属性
+        const labelVisibility = this.labelVisibility === 'auto'
+            ? items.length <= 3
+                ? 'labeled'
+                : 'selected'
+            : this.labelVisibility;
+        items.forEach((item) => {
+            item.labelVisibility = labelVisibility;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('transitionend', (event) => {
+            if (event.target === this) {
+                emit(this, this.hide ? 'hidden' : 'shown');
+            }
+        });
+    }
+    render() {
+        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+    }
+    /**
+     * 滚动行为
+     * 当前仅支持 hide 这一个行为，所以不做行为类型判断
+     */
+    runScrollThreshold(isScrollingUp) {
+        // 向下滚动
+        if (!isScrollingUp && !this.hide) {
+            const requestHide = emit(this, 'hide');
+            if (!requestHide.defaultPrevented) {
+                this.hide = true;
+            }
+        }
+        // 向上滚动
+        if (isScrollingUp && this.hide) {
+            const requestShow = emit(this, 'show');
+            if (!requestShow.defaultPrevented) {
+                this.hide = false;
+            }
+        }
+    }
+    onClick(event) {
+        // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键
+        if (event.button) {
+            return;
+        }
+        const target = event.target;
+        const item = target.closest('mdui-navigation-bar-item');
+        this.activeKey = item.key;
+        this.updateActive();
+    }
+    updateActive() {
+        this.items.forEach((item) => (item.active = this.activeKey === item.key));
+    }
+    onSlotChange() {
+        this.onLabelVisibilityChange();
+    }
+};
+NavigationBar.styles = [
+    componentStyle,
+    navigationBarStyle,
+];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], NavigationBar.prototype, "hide", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'label-visibility' })
+], NavigationBar.prototype, "labelVisibility", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationBar.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'scroll-behavior' })
+], NavigationBar.prototype, "scrollBehavior", void 0);
+__decorate([
+    state()
+], NavigationBar.prototype, "activeKey", void 0);
+__decorate([
+    watch('activeKey')
+], NavigationBar.prototype, "onActiveKeyChange", null);
+__decorate([
+    watch('value')
+], NavigationBar.prototype, "onValueChange", null);
+__decorate([
+    watch('labelVisibility', true)
+], NavigationBar.prototype, "onLabelVisibilityChange", null);
+NavigationBar = __decorate([
+    customElement('mdui-navigation-bar')
+], NavigationBar);

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

@@ -0,0 +1 @@
+export * from './navigation-bar/navigation-bar-item.js';

package/components/navigation-bar-item.js

@@ -0,0 +1 @@
+export * from './navigation-bar/navigation-bar-item.js';

package/components/navigation-bar.d.ts

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

package/components/navigation-bar.js

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

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

@@ -0,0 +1,84 @@
+import '@mdui/jq/methods/css.js';
+import '@mdui/jq/methods/innerWidth.js';
+import { LayoutItemBase } from '../layout/layout-item-base.js';
+import type { LayoutPlacement } from '../layout/helper.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * 在手机端，`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 declare class NavigationDrawer extends LayoutItemBase {
+    static styles: CSSResultGroup;
+    /**
+     * 是否打开抽屉导航
+     */
+    open: boolean;
+    /**
+     * 打开时，是否显示遮罩层
+     *
+     * 较窄的设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint) 时），会无视该参数，始终显示遮罩层
+     */
+    modal: boolean;
+    /**
+     * 在含遮罩层时，是否在按下 ESC 键时，关闭抽屉导航
+     */
+    closeOnEsc: boolean;
+    /**
+     * 是否在点击遮罩时，关闭抽屉导航
+     */
+    closeOnOverlayClick: boolean;
+    /**
+     * 抽屉导航的显示位置。可选值为：
+     *
+     * * `left`：显示在左侧
+     * * `right`：显示在右侧
+     */
+    placement: /*显示在左侧*/ 'left' | /*显示在右侧*/ 'right';
+    /**
+     * 默认抽屉导航相对于 `body` 元素显示，该参数设置为 `true` 时，抽屉导航将相对于它的父元素显示
+     *
+     * Note:
+     * 设置了该属性时，必须手动在父元素上设置样式 `position: relative; overflow: hidden;`
+     */
+    contained: boolean;
+    private mobile;
+    private originalTrigger;
+    private observeResize?;
+    private modalHelper;
+    private readonly overlayRef;
+    private readonly panelRef;
+    protected get layoutPlacement(): LayoutPlacement;
+    private get lockTarget();
+    private get isModal();
+    private onContainedChange;
+    private onPlacementChange;
+    private onOpenChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    private onOverlayClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-navigation-drawer': NavigationDrawer;
+    }
+}