mdui 1.0.2 → 2.0.1

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 zdhxiong@gmail.com
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2016-present zdhxiong@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,70 +1,49 @@
-# [MDUI](https://mdui.org)
-
-[![GitHub version](https://badge.fury.io/gh/zdhxiong%2Fmdui.svg)](https://badge.fury.io/gh/zdhxiong%2Fmdui)
-[![npm version](https://img.shields.io/npm/v/mdui.svg)](https://www.npmjs.com/package/mdui)
-[![dependencies Status](https://david-dm.org/zdhxiong/mdui/status.svg)](https://david-dm.org/zdhxiong/mdui)
-[![devDependencies Status](https://david-dm.org/zdhxiong/mdui/dev-status.svg)](https://david-dm.org/zdhxiong/mdui?type=dev)
-[![Build Status](https://travis-ci.org/zdhxiong/mdui.svg?branch=master)](https://travis-ci.org/zdhxiong/mdui)
-[![CDNJS](https://img.shields.io/cdnjs/v/mdui.svg)](https://cdnjs.com/libraries/mdui)
-
-MDUI 是一个基于 Material Design 的前端框架。
-
-QQ群：[635509201](https://jq.qq.com/?_wv=1027&k=53jpYKH)
-
-## [中文文档](https://mdui.org/docs)
-
-## 特性
-
-### 轻量级
-
-- CSS 文件仅 **32KB minified + gzip**
-- JavaScript 文件仅 **19KB minified + gzip**
-
-### 多主题
-
-CSS 文件中已经包含了 **19种主色主题**、**16种强调色主题**、**1种夜间主题**，只需添加一个 CSS 类，即可实现主题的切换。
-
-### 响应式
-
-移动优先，可适配所有屏幕。
-
-### 无依赖
-
-MDUI 使用纯 JavaScript 编写，没有任何依赖。
-
-## 获取 MDUI
-
-可以通过下列方式获取 MDUI：
-
-- [下载压缩包](https://github.com/zdhxiong/mdui/releases)
-- 从 CDN 获取
-```html
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
-  integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
-  crossorigin="anonymous"
-/>
-<script
-  src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
-  integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
-  crossorigin="anonymous"
-></script>
-```
-- 通过 npm 安装: `npm install mdui`
-- 从 Github 下载源码: `git clone https://github.com/zdhxiong/mdui.git`
-
-## 兼容性
-
-MDUI 在下列浏览器中经过测试
-
-- IE 11+
-- 最新版的 Firefox、Chrome、Safari、Edge
-
-## 赞助
-
-赞助以帮助 MDUI 持续更新
-
-![通过支付宝赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0jj5n4j206o089dge.jpg)
-![通过微信赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0vkaeaj206o0890ta.jpg)
-[![通过 Paypal 赞助](https://ww1.sinaimg.cn/large/63f511e3gy1fff6937xzbj203w00y3yc.jpg)](https://www.paypal.me/zdhxiong/5)
+# mdui
+
+[![GitHub version](https://badge.fury.io/gh/zdhxiong%2Fmdui.svg)](https://badge.fury.io/gh/zdhxiong%2Fmdui)
+[![npm version](https://img.shields.io/npm/v/mdui.svg)](https://www.npmjs.com/package/mdui)
+[![CDNJS](https://img.shields.io/cdnjs/v/mdui.svg)](https://cdnjs.com/libraries/mdui)
+
+[官网](https://www.mdui.org) | [文档](https://www.mdui.org/docs/2/)
+
+使用 Web Components 实现，遵循 Material You 设计规范的 Web 前端组件库。
+
+* **Web Components**：mdui 组件全部使用 Web Components 开发，使用组件就像使用 `<div>` 标签一样简单。
+* **Material You**：遵循最新的 Material Design 3（Material You）设计规范，使你的产品美观、易用。
+* **动态配色**：支持根据给定颜色值，或给定一张图片，mdui 能自动计算出颜色值，生成整套配色方案，并在所有 mdui 组件中生效。
+* **暗色模式**：所有组件都支持暗色模式、及支持根据操作系统设置自动切换亮色模式和暗色模式。
+* **轻量级**：gzip 后的 CSS + JavaScript 仅 85KB，使用按需导入可进一步减小体积，使加载更迅速。
+* **IDE 支持**：在 VSCode 和 WebStorm 中能获得完美的代码提示。且提供了 VSCode 扩展和 WebStorm 插件，使开发更便捷。
+* **兼容所有框架**：mdui 能兼容 Vue、React、Angular 等框架，只要在浏览器上运行的应用，都能使用 mdui。
+* **TypeScript 支持**：mdui 完全使用 TypeScript 开发，拥有完美的类型提示。
+* **无依赖**：不需要依赖任何第三方库，节约网络流量，使加载更迅速。
+* **组件丰富**：mdui 包含 30 多个组件，及十余个工具函数，常用组件都有。
+* **Material Icons 图标库**：提供了超过 1 万个图标组件，可按需导入所需图标。
+* **低学习成本**：只需懂一点 HTML、CSS、JavaScript 的基础知识，就能使用 mdui。
+
+## 安装
+
+```bash
+npm install mdui --save
+```
+
+### 导入 CSS 及 JS 文件
+
+```js
+import 'mdui/mdui.css';
+import 'mdui';
+```
+
+### 使用组件
+
+```html
+<mdui-button>Button</mdui-button>
+```
+
+## 赞助
+
+赞助以帮助 mdui 持续更新
+
+![通过支付宝赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0jj5n4j206o089dge.jpg)
+![通过微信赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0vkaeaj206o0890ta.jpg)
+[![通过 Paypal 赞助](https://ww1.sinaimg.cn/large/63f511e3gy1fff6937xzbj203w00y3yc.jpg)](https://www.paypal.me/zdhxiong/5)

package/components/avatar/index.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import '../icon.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 头像组件
+ *
+ * ```html
+ * <mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
+ * ```
+ *
+ * @slot - 自定义头像中的内容，可以为字母、汉字、`<img>` 元素、图标等
+ *
+ * @csspart image - 使用图片头像时，组件内部的 `<img>` 元素
+ * @csspart icon - 使用图标头像时，组件内部的 `<mdui-icon>` 元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class Avatar extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 头像的图片地址
+     */
+    src?: string;
+    /**
+     * 图片如何适应容器框，同原生的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit" target="_blank">`object-fit`</a>。可选值为：
+     *
+     * * `contain`：保持原有尺寸比例。内容被缩放
+     * * `cover`：保持原有尺寸比例。但部分内容可能被剪切
+     * * `fill`：默认，不保证保持原有的比例，内容拉伸填充整个内容容器
+     * * `none`：保留原有元素内容的长度和宽度，也就是说内容不会被重置
+     * * `scale-down`：保持原有尺寸比例。内容的尺寸与 `none` 或 `contain` 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些
+     */
+    fit?: /*保持原有尺寸比例。内容被缩放*/ 'contain' | /*保持原有尺寸比例。但部分内容可能被剪切*/ 'cover' | /*默认，不保证保持原有的比例，内容拉伸填充整个内容容器*/ 'fill' | /*保留原有元素内容的长度和宽度，也就是说内容不会被重置*/ 'none' | /*保持原有尺寸比例。内容的尺寸与 `none` 或 `contain` 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些*/ 'scale-down';
+    /**
+     * 头像的 Material Icons 图标名
+     */
+    icon?: string;
+    /**
+     * 描述头像的替换文本
+     */
+    label?: string;
+    private readonly hasSlotController;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-avatar': Avatar;
+    }
+}

package/components/avatar/index.js

@@ -0,0 +1,55 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import '../icon.js';
+import { style } from './style.js';
+/**
+ * @summary 头像组件
+ *
+ * ```html
+ * <mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
+ * ```
+ *
+ * @slot - 自定义头像中的内容，可以为字母、汉字、`<img>` 元素、图标等
+ *
+ * @csspart image - 使用图片头像时，组件内部的 `<img>` 元素
+ * @csspart icon - 使用图标头像时，组件内部的 `<mdui-icon>` 元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let Avatar = class Avatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, '[default]');
+    }
+    render() {
+        return this.hasSlotController.test('[default]')
+            ? html `<slot></slot>`
+            : this.src
+                ? html `<img part="image" alt="${ifDefined(this.label)}" src="${this.src}" style="${styleMap({ objectFit: this.fit })}">`
+                : this.icon
+                    ? html `<mdui-icon part="icon" name="${this.icon}"></mdui-icon>`
+                    : nothingTemplate;
+    }
+};
+Avatar.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], Avatar.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true })
+], Avatar.prototype, "fit", void 0);
+__decorate([
+    property({ reflect: true })
+], Avatar.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], Avatar.prototype, "label", void 0);
+Avatar = __decorate([
+    customElement('mdui-avatar')
+], Avatar);

package/components/avatar/style.d.ts

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

package/components/avatar/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;vertical-align:middle;border-radius:var(--shape-corner);-webkit-user-select:none;user-select:none;width:2.5rem;height:2.5rem;background-color:rgb(var(--mdui-color-primary-container));color:rgb(var(--mdui-color-on-primary-container));font-size:var(--mdui-typescale-title-medium-size);font-weight:var(--mdui-typescale-title-medium-weight);letter-spacing:var(--mdui-typescale-title-medium-tracking);line-height:var(--mdui-typescale-title-medium-line-height)}img{width:100%;height:100%}::slotted(mdui-icon),mdui-icon{font-size:1.5em}`;

package/components/avatar.d.ts

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

package/components/avatar.js

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

package/components/badge/index.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 徽标组件
+ *
+ * ```html
+ * <mdui-badge>12</mdui-badge>
+ * ```
+ *
+ * @slot - 显示的文本
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class Badge extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 徽标形状。可选值为：
+     * * `small`：小型徽标，不显示文字
+     * * `large`：大型徽标，会显示文字
+     */
+    variant: /*小型徽标，不显示文字*/ 'small' | /*大型徽标，会显示文字*/ 'large';
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-badge': Badge;
+    }
+}

package/components/badge/index.js

@@ -0,0 +1,41 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { style } from './style.js';
+/**
+ * @summary 徽标组件
+ *
+ * ```html
+ * <mdui-badge>12</mdui-badge>
+ * ```
+ *
+ * @slot - 显示的文本
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let Badge = class Badge extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 徽标形状。可选值为：
+         * * `small`：小型徽标，不显示文字
+         * * `large`：大型徽标，会显示文字
+         */
+        this.variant = 'large';
+    }
+    render() {
+        if (this.variant === 'small') {
+            return nothingTemplate;
+        }
+        return html `<slot></slot>`;
+    }
+};
+Badge.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], Badge.prototype, "variant", void 0);
+Badge = __decorate([
+    customElement('mdui-badge')
+], Badge);

package/components/badge/style.d.ts

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

package/components/badge/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--shape-corner);padding-left:.25rem;padding-right:.25rem;color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error));height:1rem;min-width:1rem;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height)}:host([variant=small]){min-width:0;padding:0;width:.375rem;height:.375rem}`;

package/components/badge.d.ts

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

package/components/badge.js

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

package/components/bottom-app-bar/index.d.ts

@@ -0,0 +1,60 @@
+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 BottomAppBar_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
+/**
+ * @summary 底部应用栏组件
+ *
+ * ```html
+ * <mdui-bottom-app-bar>
+ * ..<mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
+ * ..<mdui-button-icon icon="edit--outlined"></mdui-button-icon>
+ * ..<mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
+ * ..<mdui-button-icon icon="image--outlined"></mdui-button-icon>
+ * ..<div style="flex-grow: 1"></div>
+ * ..<mdui-fab icon="add"></mdui-fab>
+ * </mdui-bottom-app-bar>
+ * ```
+ *
+ * @event show - 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
+ * @event shown - 显示动画完成时，事件被触发
+ * @event hide - 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
+ * @event hidden - 隐藏动画完成时，事件被触发
+ *
+ * @slot - 底部应用栏内部的元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export declare class BottomAppBar extends BottomAppBar_base {
+    static styles: CSSResultGroup;
+    /**
+     * 是否隐藏
+     */
+    hide: boolean;
+    /**
+     * 是否使底部应用栏中的 [`<mdui-fab>`](/docs/2/components/fab) 组件脱离应用栏。若为 `true`，则在应用栏隐藏后，[`<mdui-fab>`](/docs/2/components/fab) 仍将停留在页面上
+     */
+    fabDetach: boolean;
+    /**
+     * 滚动行为。可选值为：
+     * * `hide`：滚动时隐藏
+     */
+    scrollBehavior?: 'hide';
+    protected get scrollPaddingPosition(): ScrollPaddingPosition;
+    protected get layoutPlacement(): LayoutPlacement;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    /**
+     * 滚动行为
+     * 当前仅支持 hide 这一个行为，所以不做行为类型判断
+     */
+    protected runScrollThreshold(isScrollingUp: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-bottom-app-bar': BottomAppBar;
+    }
+}
+export {};

package/components/bottom-app-bar/index.js

@@ -0,0 +1,105 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.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 { style } from './style.js';
+/**
+ * @summary 底部应用栏组件
+ *
+ * ```html
+ * <mdui-bottom-app-bar>
+ * ..<mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
+ * ..<mdui-button-icon icon="edit--outlined"></mdui-button-icon>
+ * ..<mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
+ * ..<mdui-button-icon icon="image--outlined"></mdui-button-icon>
+ * ..<div style="flex-grow: 1"></div>
+ * ..<mdui-fab icon="add"></mdui-fab>
+ * </mdui-bottom-app-bar>
+ * ```
+ *
+ * @event show - 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
+ * @event shown - 显示动画完成时，事件被触发
+ * @event hide - 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
+ * @event hidden - 隐藏动画完成时，事件被触发
+ *
+ * @slot - 底部应用栏内部的元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ */
+export let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否隐藏
+         */
+        this.hide = false;
+        /**
+         * 是否使底部应用栏中的 [`<mdui-fab>`](/docs/2/components/fab) 组件脱离应用栏。若为 `true`，则在应用栏隐藏后，[`<mdui-fab>`](/docs/2/components/fab) 仍将停留在页面上
+         */
+        this.fabDetach = false;
+    }
+    get scrollPaddingPosition() {
+        return 'bottom';
+    }
+    get layoutPlacement() {
+        return 'bottom';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('transitionend', (event) => {
+            if (event.target === this) {
+                emit(this, this.hide ? 'hidden' : 'shown');
+            }
+        });
+    }
+    render() {
+        return html `<slot></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;
+            }
+        }
+    }
+};
+BottomAppBar.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], BottomAppBar.prototype, "hide", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'fab-detach',
+    })
+], BottomAppBar.prototype, "fabDetach", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'scroll-behavior' })
+], BottomAppBar.prototype, "scrollBehavior", void 0);
+BottomAppBar = __decorate([
+    customElement('mdui-bottom-app-bar')
+], BottomAppBar);

package/components/bottom-app-bar/style.d.ts

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

package/components/bottom-app-bar/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = 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;align-items:center;justify-content:flex-start;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-emphasized);padding:0 1rem;height:5rem;background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transition-duration:var(--mdui-motion-duration-short4);bottom:-5.625rem}::slotted(:not(:first-child)){margin-left:.5rem}::slotted(mdui-fab){box-shadow:var(--mdui-elevation-level0)}:host([fab-detach]) ::slotted(mdui-fab){position:absolute;transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard);right:1rem;bottom:.75rem}:host([fab-detach][hide][scroll-behavior~=hide]) ::slotted(mdui-fab){transition-duration:var(--mdui-motion-duration-short4);bottom:1rem;box-shadow:var(--mdui-elevation-level2)}:host([fab-detach][hide][scroll-behavior~=hide][scroll-target]:not([scroll-target=''])) ::slotted(mdui-fab){bottom:6.625rem}:host([hide]) ::slotted(:not(mdui-fab)),:host([hide]:not([fab-detach])) ::slotted(mdui-fab){transform:translateY(8.75rem);transition:transform var(--mdui-motion-duration-0) var(--mdui-motion-easing-emphasized-accelerate) var(--mdui-motion-duration-short4)}::slotted(:first-child){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short1)}::slotted(:nth-child(2)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short3)}::slotted(:nth-child(3)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short4)}::slotted(:nth-child(4)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium1)}::slotted(:nth-child(5)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium2)}::slotted(:nth-child(6)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium3)}`;

package/components/bottom-app-bar.d.ts

@@ -0,0 +1 @@
+export * from './bottom-app-bar/index.js';

package/components/bottom-app-bar.js

@@ -0,0 +1 @@
+export * from './bottom-app-bar/index.js';

package/components/button/button-base-style.d.ts

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

package/components/button/button-base-style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const buttonBaseStyle = css `.button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;overflow:hidden;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;text-align:center;text-decoration:none;vertical-align:middle;background:0 0;border:none;outline:0;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}`;