@varlet/ui 1.27.20 → 2.0.0-alpha.1663499244572

package/LICENCE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2020 varlet
-
-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) 2020 varlet
+
+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.en-US.md

@@ -1,93 +1,86 @@
-<div align="center">
-  <a href="https://varlet-varletjs.vercel.app/#/en-US/home">
-    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150">
-  </a>
-  <h1>VARLET</h1>
-  <p>Material design mobile component library for Vue3</p>
-  <p>
-    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation(Vercel)</a> 
-    <a href="https://varlet.gitee.io/varlet-ui/#/en-US/home">Documentation(Gitee)</a>
-  </p>
-  <p>
-    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
-    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
-    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
-  </p>
-</div>
-
----
-
-### Intro
-
-Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community.
-
-
-### Features
-- 🚀 Provide 50+ high quality general purpose components
-- 🚀 Components are very lightweight
-- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
-- 🛠️ Support on-demand introduction
-- 🛠️ Support theme customization
-- 🌍 Support internationalization
-- 💡 Support WebStorm, VS Code component syntax highlighting
-- 💪 Support the SSR
-- 💡 Support the Typescript
-- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance
-- 🛠️ Support dark mode
-
-### Install
-
-### CDN
-`varlet.js` contain all the styles and logic of the component library, and you can import them.
-
-```html
-<div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
-<script>
-  const app = Vue.createApp({
-    template: '<var-button>Button</var-button>'
-  })
-  app.use(Varlet).mount('#app')
-</script>
-```
-
-### Webpack / Vite
-```shell
-# Install with npm or yarn or pnpm
-
-# npm
-npm i @varlet/ui -S
-
-# yarn
-yarn add @varlet/ui
-
-# pnpm
-pnpm add @varlet/ui
-```
-
-```js
-import App from './App.vue'
-import Varlet from '@varlet/ui'
-import { createApp } from 'vue'
-import '@varlet/ui/es/style.js'
-
-createApp(App).use(Varlet).mount('#app')
-```
-
-### Sponsorship us
-
-We will use the donations to encourage open source contributors, buy them a cup of coffee and milk tea,
-purchase infrastructure that is helpful to the project, and promote the project to become better.
-
-<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true" />
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>
+<div align="center">
+  <a href="https://varlet.gitee.io/varlet-ui/#/en-US/home">
+    <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
+  </a>
+  <h1>VARLET</h1>
+  <p>Material design mobile component library for Vue3</p>
+  <p>
+    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation(Vercel)</a> |
+    <a href="https://varlet.gitee.io/varlet-ui/#/en-US/home">Documentation(Gitee)</a>
+  </p>
+  <p>
+    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
+    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
+    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
+    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
+    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
+  </p>
+</div>
+
+---
+
+### Intro
+
+Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community.
+
+
+### Features
+- 🚀 &nbsp; Provide 50+ high quality general purpose components
+- 🚀 &nbsp; Components are very lightweight
+- 💪 &nbsp; Developed by Chinese, complete Chinese and English documentation and logistics support
+- 🛠️ &nbsp; Support on-demand introduction
+- 🛠️ &nbsp; Support theme customization
+- 🌍 &nbsp; Support internationalization
+- 💡 &nbsp; Support WebStorm, VS Code component syntax highlighting
+- 💪 &nbsp; Support the SSR
+- 💡 &nbsp; Support the Typescript
+- 💪 &nbsp; Make sure more than 90 percent unit test coverage, providing stability assurance
+- 🛠️ &nbsp; Support dark mode
+
+### Install
+
+### CDN
+`varlet.js` contain all the styles and logic of the component library, and you can import them.
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
+<script>
+  const app = Vue.createApp({
+    template: '<var-button>Button</var-button>'
+  })
+  app.use(Varlet).mount('#app')
+</script>
+```
+
+### Webpack / Vite
+```shell
+# Install with npm or yarn or pnpm
+
+# npm
+npm i @varlet/ui -S
+
+# yarn
+yarn add @varlet/ui
+
+# pnpm
+pnpm add @varlet/ui
+```
+
+```js
+import App from './App.vue'
+import Varlet from '@varlet/ui'
+import { createApp } from 'vue'
+import '@varlet/ui/es/style.js'
+
+createApp(App).use(Varlet).mount('#app')
+```
+
+### Thanks to contributors
+
+<a href="https://github.com/varletjs/varlet/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
+</a>

package/README.md

@@ -1,93 +1,93 @@
-<div align="center">
-  <a href="https://varlet-varletjs.vercel.app">
-    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150" >
-  </a>
-  <h1>VARLET</h1>
-  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
- <p>
-    <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
-    <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> | 
-<a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English Readme</a>
-  </p>
-  <p>
-    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
-    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
-    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
-  </p>
-</div>
-
----
-
-### 介绍
-
-Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
-
-### 特性
-- 🚀 提供50+个高质量通用组件 
-- 🚀 组件十分轻量
-- 💪 由国人开发，完善的中英文文档和后勤保障
-- 🛠️ 支持按需引入
-- 🛠️ 支持主题定制
-- 🌍 支持国际化
-- 💡 支持 webstorm，vscode 组件属性高亮
-- 💪 支持 SSR
-- 💡 支持 Typescript 
-- 💪 确保90%以上单元测试覆盖率，提供稳定性保证
-- 🛠️ 支持暗黑模式
-
-### 安装
-
-### CDN
-`varlet.js` 包含组件库的所有样式和逻辑，引入即可。
-
-```html
-<div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
-<script>
-  const app = Vue.createApp({
-    template: '<var-button>按钮</var-button>'
-  })
-  app.use(Varlet).mount('#app')
-</script>
-```
-
-### Webpack / Vite
-```shell
-# 通过 npm 或 yarn 或 pnpm 安装
-
-# npm
-npm i @varlet/ui -S
-
-# yarn
-yarn add @varlet/ui
-
-# pnpm
-pnpm add @varlet/ui
-```
-
-```js
-import App from './App.vue'
-import Varlet from '@varlet/ui'
-import { createApp } from 'vue'
-import '@varlet/ui/es/style.js'
-
-createApp(App).use(Varlet).mount('#app')
-```
-
-### 捐赠我们
-
-我们将用捐赠所得去鼓励参与开源的贡献者们，给他们买一杯咖啡奶茶，购置对于项目有帮助基础设施，推动项目变得更好。
-
-<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true" />
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
-</a>
-
+
+<div align="center">
+  <a href="https://varlet.gitee.io/varlet-ui">
+    <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
+  </a>
+  <h1>VARLET</h1>
+  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
+  <p>
+    <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
+    <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> | 
+<a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English Readme</a>
+  </p>
+  <p>
+    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
+    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
+    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
+    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
+    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
+  </p>
+</div>
+
+---
+
+### 介绍
+
+Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
+
+### 特性
+- 🚀 &nbsp; 提供50+个高质量通用组件 
+- 🚀 &nbsp; 组件十分轻量
+- 💪 &nbsp; 由国人开发，完善的中英文文档和后勤保障
+- 🛠️ &nbsp; 支持按需引入
+- 🛠️ &nbsp; 支持主题定制
+- 🌍 &nbsp; 支持国际化
+- 💡 &nbsp; 支持 webstorm，vscode 组件属性高亮
+- 💪 &nbsp; 支持 SSR
+- 💡 &nbsp; 支持 Typescript 
+- 💪 &nbsp; 确保90%以上单元测试覆盖率，提供稳定性保证
+- 🛠️ &nbsp; 支持暗黑模式
+
+### 安装
+
+### CDN
+`varlet.js` 包含组件库的所有样式和逻辑，引入即可。
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
+<script>
+  const app = Vue.createApp({
+    template: '<var-button>按钮</var-button>'
+  })
+  app.use(Varlet).mount('#app')
+</script>
+```
+
+### Webpack / Vite
+```shell
+# 通过 npm 或 yarn 或 pnpm 安装
+
+# npm
+npm i @varlet/ui -S
+
+# yarn
+yarn add @varlet/ui
+
+# pnpm
+pnpm add @varlet/ui
+```
+
+```js
+import App from './App.vue'
+import Varlet from '@varlet/ui'
+import { createApp } from 'vue'
+import '@varlet/ui/es/style.js'
+
+createApp(App).use(Varlet).mount('#app')
+```
+
+### 反馈和交流
+
+我们推荐使用`issue`列表进行最直接有效的反馈，也可以通过扫描下方二维码进入微信群进行交流
+
+<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/community.png?raw=true" />
+
+### 感谢贡献者们做出的努力
+
+<a href="https://github.com/varletjs/varlet/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
+</a>

package/es/action-sheet/actionSheet.css

@@ -1 +1 @@
-:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0px 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
+:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; max-height: 80%; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/action-sheet/props.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { pickProps } from '../utils/components';
 import { props as popupProps } from '../popup/props';

package/es/bottom-navigation/BottomNavigation.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import VarButton from '../button';
 import { defineComponent, ref, computed, onMounted, onUpdated, watch } from 'vue';

package/es/button/Button.js

@@ -34,12 +34,13 @@ export function render(_ctx, _cache) {
     key: 0,
     class: _normalizeClass(_ctx.n('loading')),
     "var-button-cover": "",
+    color: _ctx.loadingColor,
     type: _ctx.loadingType,
     size: _ctx.loadingSize,
     radius: _ctx.loadingRadius
   }, null, 8
   /* PROPS */
-  , ["class", "type", "size", "radius"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+  , ["class", "color", "type", "size", "radius"])) : _createCommentVNode("v-if", true), _createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('content'), [_ctx.loading || _ctx.pending, _ctx.n('--hidden')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */

package/es/button/button.css

@@ -1 +1 @@
-:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap; line-height: 1;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
+:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}

package/es/button/props.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import { props as loadingProps } from '../loading/props';
 import { pickProps } from '../utils/components';
 
@@ -64,6 +66,9 @@ export var props = {
   },
   loadingType: pickProps(loadingProps, 'type'),
   loadingSize: pickProps(loadingProps, 'size'),
+  loadingColor: _extends({}, pickProps(loadingProps, 'color'), {
+    default: 'currentColor'
+  }),
   onClick: {
     type: Function
   },

package/es/card/Card.js

@@ -47,25 +47,21 @@ export function render(_ctx, _cache) {
       left: _ctx.floaterLeft,
       overflow: _ctx.floaterOverflow,
       position: _ctx.floaterPosition,
-      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, color " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
     })
-  }, [_renderSlot(_ctx.$slots, "image", {}, () => {
-    var _ctx$imageHeight;
-
-    return [_ctx.src ? (_openBlock(), _createElementBlock("img", {
-      key: 0,
-      class: _normalizeClass(_ctx.n('image')),
-      style: _normalizeStyle({
-        objectFit: _ctx.fit,
-        height: _ctx.toSizeUnit((_ctx$imageHeight = _ctx.imageHeight) != null ? _ctx$imageHeight : _ctx.height),
-        width: _ctx.toSizeUnit(_ctx.imageWidth)
-      }),
-      src: _ctx.src,
-      alt: _ctx.alt
-    }, null, 14
-    /* CLASS, STYLE, PROPS */
-    , _hoisted_1)) : _createCommentVNode("v-if", true)];
-  }), _createElementVNode("div", {
+  }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createElementBlock("img", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('image')),
+    style: _normalizeStyle({
+      objectFit: _ctx.fit,
+      height: _ctx.toSizeUnit(_ctx.imageHeight),
+      width: _ctx.toSizeUnit(_ctx.imageWidth)
+    }),
+    src: _ctx.src,
+    alt: _ctx.alt
+  }, null, 14
+  /* CLASS, STYLE, PROPS */
+  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _createElementVNode("div", {
     class: _normalizeClass(_ctx.n('container'))
   }, [_renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
     key: 0,
@@ -168,13 +164,13 @@ export default defineComponent({
     var floaterOverflow = ref('hidden');
     var contentHeight = ref('0px');
     var opacity = ref('0');
-    var {
-      zIndex
-    } = useZIndex(() => props.floating, 1);
     var isRow = computed(() => props.layout === 'row');
     var showFloatingButtons = ref(false);
     var floated = ref(false);
-    useLock(() => props.floating, () => isRow);
+    var {
+      zIndex
+    } = useZIndex(() => props.floating, 1);
+    useLock(() => props.floating, () => !isRow.value);
     var dropdownFloaterTop = 'auto';
     var dropdownFloaterLeft = 'auto';
     var dropper = null;

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0px 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}

package/es/card/props.js

@@ -11,13 +11,6 @@ export var props = {
     validator: fitValidator,
     default: 'cover'
   },
-
-  /**
-   * @deprecated use imageHeight instead
-   */
-  height: {
-    type: [String, Number]
-  },
   imageHeight: {
     type: [String, Number]
   },

package/es/cell/Cell.js

@@ -30,10 +30,10 @@ export function render(_ctx, _cache) {
   /* TEXT */
   )])], 2
   /* CLASS */
-  ), _ctx.$slots.desc || _ctx.desc ? (_openBlock(), _createElementBlock("div", {
+  ), _ctx.$slots.description || _ctx.description ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(_ctx.classes(_ctx.n('desc'), [_ctx.descClass, _ctx.descClass]))
-  }, [_renderSlot(_ctx.$slots, "desc", {}, () => [_createTextVNode(_toDisplayString(_ctx.desc), 1
+    class: _normalizeClass(_ctx.classes(_ctx.n('description'), [_ctx.descriptionClass, _ctx.descriptionClass]))
+  }, [_renderSlot(_ctx.$slots, "description", {}, () => [_createTextVNode(_toDisplayString(_ctx.description), 1
   /* TEXT */
   )])], 2
   /* CLASS */

package/es/cell/cell.css

@@ -1 +1 @@
-:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-desc-font-size: var(--font-size-sm); --cell-desc-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__desc { font-size: var(--cell-desc-font-size); color: var(--cell-desc-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}

package/es/cell/props.js

@@ -5,7 +5,7 @@ export var props = {
   icon: {
     type: String
   },
-  desc: {
+  description: {
     type: String
   },
   border: {
@@ -18,7 +18,7 @@ export var props = {
   titleClass: {
     type: String
   },
-  descClass: {
+  descriptionClass: {
     type: String
   },
   extraClass: {