@varlet/ui 1.27.20 → 2.0.0-alpha.1663742071515

package/README.en-US.md

@@ -1,93 +0,0 @@
-<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>

package/es/action-sheet/actionSheet.less

@@ -1,68 +0,0 @@
-@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;
-
-:root {
-  --action-sheet-border-radius: @action-sheet-border-radius;
-  --action-sheet-title-color: @action-sheet-title-color;
-  --action-sheet-title-padding: @action-sheet-title-padding;
-  --action-sheet-title-font-size: @action-sheet-title-font-size;
-  --action-sheet-action-item-height: @action-sheet-action-item-height;
-  --action-sheet-action-item-padding: @action-sheet-action-item-padding;
-  --action-sheet-action-item-color: @action-sheet-action-item-color;
-  --action-sheet-action-item-disabled-color: @action-sheet-action-item-disabled-color;
-  --action-sheet-icon-margin: @action-sheet-icon-margin;
-  --action-sheet-icon-size: @action-sheet-icon-size;
-  --action-sheet-background: @action-sheet-background;
-}
-
-.var-action-sheet {
-  padding: 10px 0;
-  max-height: 80%;
-  background: var(--action-sheet-background);
-  transition: background-color 0.25s;
-
-  &__popup-radius {
-    border-radius: var(--action-sheet-border-radius);
-  }
-
-  &__title {
-    padding: var(--action-sheet-title-padding);
-    color: var(--action-sheet-title-color);
-    font-size: var(--action-sheet-title-font-size);
-  }
-
-  &__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;
-  }
-
-  &__action-name {
-    overflow: auto;
-    max-height: var(--action-sheet-action-item-height);
-  }
-
-  &__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);
-  }
-
-  &--disabled {
-    color: var(--action-sheet-action-item-disabled-color) !important;
-    cursor: not-allowed;
-  }
-}

package/es/action-sheet/style/less.js

@@ -1,6 +0,0 @@
-import '../../styles/common.less'
-import '../../icon/icon.less'
-import '../../ripple/ripple.less'
-import '../../popup/popup.less'
-import '../actionSheet.less'
-import '../ActionSheetSfc.less'

package/es/app-bar/appBar.less

@@ -1,57 +0,0 @@
-@app-bar-color: var(--color-primary);
-@app-bar-height: 54px;
-@app-bar-text-color: #fff;
-@app-bar-title-padding: 0 12px;
-@app-bar-left-gap: 6px;
-@app-bar-right-gap: 6px;
-
-:root {
-  --app-bar-color: @app-bar-color;
-  --app-bar-title-padding: @app-bar-title-padding;
-  --app-bar-text-color: #fff;
-  --app-bar-height: @app-bar-height;
-  --app-bar-left-gap: @app-bar-left-gap;
-  --app-bar-right-gap: @app-bar-right-gap;
-}
-
-.var-app-bar {
-  position: relative;
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  height: var(--app-bar-height);
-  background: var(--app-bar-color);
-  color: var(--app-bar-text-color);
-  transition: background-color 0.25s;
-
-  &__title {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding: var(--app-bar-title-padding);
-  }
-
-  &__left,
-  &__right {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    z-index: 2;
-  }
-
-  &__left {
-    position: absolute;
-    top: 0;
-    left: var(--app-bar-left-gap);
-  }
-
-  &__right {
-    position: absolute;
-    top: 0;
-    right: var(--app-bar-right-gap);
-  }
-}

package/es/app-bar/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../styles/elevation.less'
-import '../appBar.less'
-import '../AppBarSfc.less'

package/es/back-top/backTop.less

@@ -1,27 +0,0 @@
-@back-top-right: 40px;
-@back-top-bottom: 40px;
-@back-top-button-size: 40px;
-
-:root {
-  --back-top-right: @back-top-right;
-  --back-top-bottom: @back-top-bottom;
-  --back-top-button-size: @back-top-button-size;
-}
-
-.var-back-top {
-  position: fixed;
-  right: var(--back-top-right);
-  bottom: var(--back-top-bottom);
-  transform: scale(0);
-  transition: 0.3s var(--cubic-bezier);
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  .var-button[var-back-top-cover] {
-    width: var(--back-top-button-size);
-    height: var(--back-top-button-size);
-  }
-
-  &--active {
-    transform: scale(1);
-  }
-}

package/es/back-top/style/less.js

@@ -1,5 +0,0 @@
-import '../../styles/common.less'
-import '../../button/button.less'
-import '../../icon/icon.less'
-import '../backTop.less'
-import '../BackTopSfc.less'

package/es/badge/badge.less

@@ -1,119 +0,0 @@
-@badge-content-padding: 2px 6px;
-@badge-default-color: #e0e0e0;
-@badge-primary-color: var(--color-primary);
-@badge-danger-color: var(--color-danger);
-@badge-success-color: var(--color-success);
-@badge-warning-color: var(--color-warning);
-@badge-info-color: var(--color-info);
-
-:root {
-  --badge-content-padding: @badge-content-padding;
-  --badge-default-color: @badge-default-color;
-  --badge-primary-color: @badge-primary-color;
-  --badge-danger-color: @badge-danger-color;
-  --badge-success-color: @badge-success-color;
-  --badge-warning-color: @badge-warning-color;
-  --badge-info-color: @badge-info-color;
-}
-
-.var-badge {
-  display: inline-block;
-  position: relative;
-  transition: background-color 0.25s;
-
-  &__content {
-    color: #fff;
-    border-radius: 100px;
-    font-size: 12px;
-    padding: 2px 6px;
-    vertical-align: middle;
-    text-align: center;
-    display: inline-block;
-  }
-
-  &__icon {
-    padding: 2px 4px;
-  }
-
-  &__position {
-    border: 2px #fff solid;
-  }
-
-  &--default {
-    background: var(--badge-default-color);
-  }
-
-  &--primary {
-    background: var(--badge-primary-color);
-  }
-
-  &--info {
-    background: var(--badge-info-color);
-  }
-
-  &--warning {
-    background: var(--badge-warning-color);
-  }
-
-  &--success {
-    background: var(--badge-success-color);
-  }
-
-  &--danger {
-    background: var(--badge-danger-color);
-  }
-
-  &--right-top {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translateY(-50%) translateX(50%);
-  }
-
-  &--left-top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translateY(-50%) translateX(-50%);
-  }
-
-  &--right-bottom {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    transform: translateY(50%) translateX(50%);
-  }
-
-  &--left-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    transform: translateY(50%) translateX(-50%);
-  }
-
-  &__dot {
-    box-sizing: content-box;
-    width: 8px;
-    height: 8px;
-    border-radius: 8px;
-    padding: 0;
-  }
-
-  &__dot--right {
-    right: 6px;
-  }
-
-  &__dot--left {
-    left: 6px;
-  }
-
-  &-fade-enter-active,
-  &-fade-leave-active {
-    transition: opacity 0.15s var(--cubic-bezier);
-  }
-
-  &-fade-enter-from,
-  &-fade-leave-to {
-    opacity: 0;
-  }
-}

package/es/badge/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../icon/icon.less'
-import '../badge.less'
-import '../BadgeSfc.less'

package/es/bottom-navigation/bottomNavigation.less

@@ -1,56 +0,0 @@
-@bottom-navigation-height: 50px;
-@bottom-navigation-z-index: 1;
-@bottom-navigation-background-color: #fff;
-@bottom-navigation-border-color: #e3e3e3;
-@bottom-navigation-fab-offset: 4px;
-
-:root {
-  --bottom-navigation-height: @bottom-navigation-height;
-  --bottom-navigation-z-index: @bottom-navigation-z-index;
-  --bottom-navigation-background-color: @bottom-navigation-background-color;
-  --bottom-navigation-border-color: @bottom-navigation-border-color;
-  --bottom-navigation-fab-offset: @bottom-navigation-fab-offset;
-}
-
-.var-bottom-navigation {
-  width: 100%;
-  height: var(--bottom-navigation-height);
-  display: flex;
-  position: relative;
-  background-color: var(--bottom-navigation-background-color);
-  transition: background-color 250ms, border-color 250ms;
-  -webkit-tap-highlight-color: transparent;
-
-  &--safe-area {
-    padding-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
-    padding-bottom: env(safe-area-inset-bottom); // iOS >= 11.2
-  }
-
-  &--fixed {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-  }
-
-  &--border {
-    border-top: 1px solid var(--bottom-navigation-border-color);
-  }
-
-  &__fab[var-bottom-navigation__fab] {
-    width: var(--bottom-navigation-height);
-    height: var(--bottom-navigation-height);
-    position: absolute;
-    z-index: 2;
-    transform: translateY(-50%);
-    overflow: hidden;
-    transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  }
-
-  &--fab-center {
-    right: calc(50% - var(--bottom-navigation-height) / 2);
-  }
-
-  &--fab-right {
-    right: var(--bottom-navigation-fab-offset);
-  }
-}

package/es/bottom-navigation/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../button/button.less'
-import '../bottomNavigation.less'
-import '../BottomNavigationSfc.less'

package/es/bottom-navigation-item/bottomNavigationItem.less

@@ -1,78 +0,0 @@
-@bottom-navigation-item-font-size: var(--font-size-sm);
-@bottom-navigation-item-inactive-color: #646566;
-@bottom-navigation-item-active-color: var(--color-primary);
-@bottom-navigation-item-active-background-color: #fff;
-@bottom-navigation-item-line-height: 1;
-@bottom-navigation-item-icon-size: 22px;
-@bottom-navigation-item-icon-margin-bottom: 5px;
-
-:root {
-  --bottom-navigation-item-font-size: @bottom-navigation-item-font-size;
-  --bottom-navigation-item-inactive-color: @bottom-navigation-item-inactive-color;
-  --bottom-navigation-item-active-color: @bottom-navigation-item-active-color;
-  --bottom-navigation-item-active-background-color: @bottom-navigation-item-active-background-color;
-  --bottom-navigation-item-line-height: @bottom-navigation-item-line-height;
-  --bottom-navigation-item-icon-size: @bottom-navigation-item-icon-size;
-  --bottom-navigation-item-icon-margin-bottom: @bottom-navigation-item-icon-margin-bottom;
-}
-
-.var-bottom-navigation-item {
-  height: 100%;
-  padding: 6px 12px 8px;
-  position: relative;
-  display: inline-flex;
-  flex: 1 1 0%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  line-height: var(--bottom-navigation-item-line-height);
-  color: var(--bottom-navigation-item-inactive-color);
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  appearance: none;
-  text-decoration: none;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  transition: color 250ms, margin 250ms;
-
-  &--active {
-    color: var(--bottom-navigation-item-active-color);
-    background-color: var(--bottom-navigation-item-active-background-color);
-    transition: background-color 250ms;
-
-    .var-bottom-navigation-item__label {
-      font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
-    }
-  }
-
-  &--right-half-space {
-    margin-right: calc(var(--bottom-navigation-height) / 2);
-  }
-
-  &--left-half-space {
-    margin-left: calc(var(--bottom-navigation-height) / 2);
-  }
-
-  &--right-space {
-    margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));
-  }
-
-  &__icon[var-bottom-navigation-item-cover] {
-    font-size: var(--bottom-navigation-item-icon-size);
-  }
-
-  &__badge[var-bottom-navigation-item-cover] {
-    position: absolute;
-    left: 4px;
-    transform: translateY(-22px);
-  }
-
-  &__label {
-    margin-top: var(--bottom-navigation-item-icon-margin-bottom);
-    font-size: var(--bottom-navigation-item-font-size);
-    transition: font-size 0.2s ease 0.1s;
-    white-space: nowrap;
-  }
-}

package/es/bottom-navigation-item/style/less.js

@@ -1,6 +0,0 @@
-import '../../styles/common.less'
-import '../../ripple/ripple.less'
-import '../../badge/badge.less'
-import '../../icon/icon.less'
-import '../bottomNavigationItem.less'
-import '../BottomNavigationItemSfc.less'