@varlet/ui 2.0.0-alpha.1664036886956 → 2.0.0-alpha.1664332032539
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -4
- package/README.zh-CN.md +9 -4
- package/es/card/Card.js +3 -3
- package/es/card/card.css +1 -1
- package/es/snackbar/style/index.js +1 -1
- package/es/style.css +1 -1
- package/es/varlet.esm.js +3 -3
- package/highlight/attributes.json +5 -9
- package/highlight/tags.json +2 -3
- package/highlight/web-types.json +8 -17
- package/lib/card/Card.js +3 -3
- package/lib/card/card.css +1 -1
- package/lib/style.css +1 -1
- package/lib/styles/elevation.less +128 -0
- package/package.json +5 -5
- package/umd/varlet.js +2 -2
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -204
- package/lib/style.js +0 -65
- package/lib/styles/elevation.css +0 -1
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<a href="https://varlet.gitee.io/varlet-ui/#/en-US/
|
|
2
|
+
<a href="https://varlet.gitee.io/varlet-ui/#/en-US/index">
|
|
3
3
|
<img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
|
|
4
4
|
</a>
|
|
5
5
|
<h1>VARLET</h1>
|
|
6
6
|
<p>Material design mobile component library for Vue3</p>
|
|
7
7
|
<p>
|
|
8
|
-
<a href="https://varlet-varletjs.vercel.app/#/en-US/
|
|
9
|
-
<a href="https://varlet.gitee.io/varlet-ui/#/en-US/
|
|
10
|
-
<a href="https://github.com/varletjs/varlet/blob/dev/README.zh-CN.md"
|
|
8
|
+
<a href="https://varlet-varletjs.vercel.app/#/en-US/index">Documentation(Vercel)</a> |
|
|
9
|
+
<a href="https://varlet.gitee.io/varlet-ui/#/en-US/index">Documentation(Gitee)</a> |
|
|
10
|
+
<a href="https://github.com/varletjs/varlet/blob/dev/README.zh-CN.md">中文README</a>
|
|
11
11
|
</p>
|
|
12
12
|
<p>
|
|
13
13
|
<img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
|
|
@@ -80,6 +80,16 @@ import '@varlet/ui/es/style.js'
|
|
|
80
80
|
createApp(App).use(Varlet).mount('#app')
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
+
### Community
|
|
84
|
+
|
|
85
|
+
We recommend that [issue](https://github.com/varletjs/varlet/issues) be used for problem feedback, or others:
|
|
86
|
+
|
|
87
|
+
* Wechat group
|
|
88
|
+
|
|
89
|
+
<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/community.png?raw=true" />
|
|
90
|
+
|
|
91
|
+
* Join the [Discord](https://discord.gg/Dmb8ydBHkw)
|
|
92
|
+
|
|
83
93
|
### Thanks to contributors
|
|
84
94
|
|
|
85
95
|
<a href="https://github.com/varletjs/varlet/graphs/contributors">
|
package/README.zh-CN.md
CHANGED
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
<p>基于 Vue3 的 Material design 风格移动端组件库</p>
|
|
8
8
|
<p>
|
|
9
9
|
<a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> |
|
|
10
|
-
<a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a>
|
|
10
|
+
<a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> |
|
|
11
|
+
<a href="https://github.com/varletjs/varlet/blob/dev/README.md">ENGLISH README</a>
|
|
11
12
|
</p>
|
|
12
13
|
<p>
|
|
13
14
|
<img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
|
|
@@ -27,7 +28,7 @@
|
|
|
27
28
|
Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库,全面拥抱 `Vue3` 生态,由社区建立起来的组件库团队进行维护。
|
|
28
29
|
|
|
29
30
|
### 特性
|
|
30
|
-
- 🚀 提供50+个高质量通用组件
|
|
31
|
+
- 🚀 提供50+个高质量通用组件
|
|
31
32
|
- 🚀 组件十分轻量
|
|
32
33
|
- 💪 由国人开发,完善的中英文文档和后勤保障
|
|
33
34
|
- 🛠️ 支持按需引入
|
|
@@ -35,7 +36,7 @@ Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库,全
|
|
|
35
36
|
- 🌍 支持国际化
|
|
36
37
|
- 💡 支持 webstorm,vscode 组件属性高亮
|
|
37
38
|
- 💪 支持 SSR
|
|
38
|
-
- 💡 支持 Typescript
|
|
39
|
+
- 💡 支持 Typescript
|
|
39
40
|
- 💪 确保90%以上单元测试覆盖率,提供稳定性保证
|
|
40
41
|
- 🛠️ 支持暗黑模式
|
|
41
42
|
|
|
@@ -81,10 +82,14 @@ createApp(App).use(Varlet).mount('#app')
|
|
|
81
82
|
|
|
82
83
|
### 反馈和交流
|
|
83
84
|
|
|
84
|
-
我们推荐使用`issue
|
|
85
|
+
我们推荐使用`issue`列表进行最直接有效的反馈,也可以下面的方式
|
|
86
|
+
|
|
87
|
+
* 微信
|
|
85
88
|
|
|
86
89
|
<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/community.png?raw=true" />
|
|
87
90
|
|
|
91
|
+
* 加入 [Discord](https://discord.gg/Dmb8ydBHkw) 社区交流
|
|
92
|
+
|
|
88
93
|
### 感谢贡献者们做出的努力
|
|
89
94
|
|
|
90
95
|
<a href="https://github.com/varletjs/varlet/graphs/contributors">
|
package/es/card/Card.js
CHANGED
|
@@ -83,15 +83,15 @@ export function render(_ctx, _cache) {
|
|
|
83
83
|
class: _normalizeClass(_ctx.n('footer'))
|
|
84
84
|
}, [_renderSlot(_ctx.$slots, "extra")], 2
|
|
85
85
|
/* CLASS */
|
|
86
|
-
)) : _createCommentVNode("v-if", true), _ctx.$slots
|
|
86
|
+
)) : _createCommentVNode("v-if", true), _ctx.$slots['floating-content'] && !_ctx.isRow ? (_openBlock(), _createElementBlock("div", {
|
|
87
87
|
key: 1,
|
|
88
|
-
class: _normalizeClass(_ctx.n('content')),
|
|
88
|
+
class: _normalizeClass(_ctx.n('floating-content')),
|
|
89
89
|
style: _normalizeStyle({
|
|
90
90
|
height: _ctx.contentHeight,
|
|
91
91
|
opacity: _ctx.opacity,
|
|
92
92
|
transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
|
|
93
93
|
})
|
|
94
|
-
}, [_renderSlot(_ctx.$slots, "content")], 6
|
|
94
|
+
}, [_renderSlot(_ctx.$slots, "floating-content")], 6
|
|
95
95
|
/* CLASS, STYLE */
|
|
96
96
|
)) : _createCommentVNode("v-if", true)], 2
|
|
97
97
|
/* CLASS */
|
package/es/card/card.css
CHANGED
|
@@ -1 +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 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-
|
|
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 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__floating-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);}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '../../styles/common.css'
|
|
2
|
+
import '../SnackbarSfc.css'
|
|
2
3
|
import '../../styles/elevation.css'
|
|
3
4
|
import '../../loading/loading.css'
|
|
4
5
|
import '../../button/button.css'
|
|
5
6
|
import '../../icon/icon.css'
|
|
6
7
|
import '../snackbar.css'
|
|
7
8
|
import '../coreSfc.css'
|
|
8
|
-
import '../SnackbarSfc.css'
|