@varlet/ui 2.18.1 → 2.18.2-alpha.1698939289602
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 +24 -0
- package/README.zh-CN.md +24 -0
- package/es/countdown/countdown.css +1 -1
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/loading/loading.css +1 -1
- package/es/option/option.css +1 -1
- package/es/style.css +1 -1
- package/es/swipe/swipe.css +1 -1
- package/es/utils/components.mjs +6 -67
- package/es/varlet.esm.js +2817 -2812
- package/highlight/web-types.en-US.json +11 -11
- package/highlight/web-types.zh-CN.json +13 -13
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +67 -63
- package/package.json +7 -7
- package/umd/varlet.js +6 -6
package/README.md
CHANGED
|
@@ -84,6 +84,30 @@ import '@varlet/ui/es/style'
|
|
|
84
84
|
createApp(App).use(Varlet).mount('#app')
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
+
### Official Ecosystem
|
|
88
|
+
|
|
89
|
+
The following projects are maintained by the official team for a long time.
|
|
90
|
+
|
|
91
|
+
| Name | Description |
|
|
92
|
+
|------------------------------------------------------------------------------------------------------|--------------------------------------|
|
|
93
|
+
| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |
|
|
94
|
+
| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |
|
|
95
|
+
| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |
|
|
96
|
+
| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |
|
|
97
|
+
| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |
|
|
98
|
+
| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |
|
|
99
|
+
| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |
|
|
100
|
+
|
|
101
|
+
### Community Ecosystem
|
|
102
|
+
|
|
103
|
+
The following projects are maintained by community personnel, welcome to add.
|
|
104
|
+
|
|
105
|
+
| Name | Description |
|
|
106
|
+
|----------------------------------------------------------------|-----------------------------------------|
|
|
107
|
+
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |
|
|
108
|
+
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |
|
|
109
|
+
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |
|
|
110
|
+
|
|
87
111
|
### Playground
|
|
88
112
|
|
|
89
113
|
See [Varlet UI Playground](https://varlet.gitee.io/varlet-ui-playground).
|
package/README.zh-CN.md
CHANGED
|
@@ -84,6 +84,30 @@ import '@varlet/ui/es/style'
|
|
|
84
84
|
createApp(App).use(Varlet).mount('#app')
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
+
### 官方生态
|
|
88
|
+
|
|
89
|
+
以下项目由官方团队长期维护。
|
|
90
|
+
|
|
91
|
+
| 名称 | 描述 |
|
|
92
|
+
|------------------------------------------------------------------------------------------------------|--------------------------|
|
|
93
|
+
| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 组件库快速成型工具` |
|
|
94
|
+
| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `桌面端适配器，让移动端组件库可以在桌面端运行` |
|
|
95
|
+
| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet 组件库在线编辑工具` |
|
|
96
|
+
| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet 组件库 VSCode 插件` |
|
|
97
|
+
| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode 主题` |
|
|
98
|
+
| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet 组件库移动端模板` |
|
|
99
|
+
| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Varlet 组件库与各种生态集成的案例集合` |
|
|
100
|
+
|
|
101
|
+
### 社区生态
|
|
102
|
+
|
|
103
|
+
以下项目由社区人员维护，欢迎补充。
|
|
104
|
+
|
|
105
|
+
| 名称 | 描述 |
|
|
106
|
+
|----------------------------------------------------------------|-------------------------------------------|
|
|
107
|
+
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `基于 Vue 的移动端模板脚手架，提供了 Varlet 组件库的移动端预设` |
|
|
108
|
+
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `基于 Vue3 的桌面端模板脚手架，提供了 Varlet 组件库的桌面端预设` |
|
|
109
|
+
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `为 Varlet 开发人员提供更好的智能感知的 VSCode 扩展` |
|
|
110
|
+
|
|
87
111
|
### 演练场
|
|
88
112
|
|
|
89
113
|
在 [Varlet UI Playground](https://varlet.gitee.io/varlet-ui-playground) 对组件进行在线编辑。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --countdown-text-color: #555;}.var-countdown { color: var(--countdown-text-color);}
|
|
1
|
+
:root { --countdown-text-color: #555; --countdown-text-font-size: var(--font-size-lg);}.var-countdown { color: var(--countdown-text-color); font-size: var(--countdown-text-font-size);}
|
package/es/index.bundle.mjs
CHANGED
|
@@ -259,7 +259,7 @@ import './tooltip/style/index.mjs'
|
|
|
259
259
|
import './uploader/style/index.mjs'
|
|
260
260
|
import './watermark/style/index.mjs'
|
|
261
261
|
|
|
262
|
-
const version = '2.18.
|
|
262
|
+
const version = '2.18.2-alpha.1698939289602'
|
|
263
263
|
|
|
264
264
|
function install(app) {
|
|
265
265
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/index.mjs
CHANGED
|
@@ -172,7 +172,7 @@ export * from './tooltip/index.mjs'
|
|
|
172
172
|
export * from './uploader/index.mjs'
|
|
173
173
|
export * from './watermark/index.mjs'
|
|
174
174
|
|
|
175
|
-
const version = '2.18.
|
|
175
|
+
const version = '2.18.2-alpha.1698939289602'
|
|
176
176
|
|
|
177
177
|
function install(app) {
|
|
178
178
|
ActionSheet.install && app.use(ActionSheet)
|
package/es/loading/loading.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { --loading-normal-width: 50px; --loading-normal-height: calc(var(--font-size-md) + 2px); --loading-large-width: 64px; --loading-large-height: calc(var(--font-size-lg) + 2px); --loading-small-width: 36px; --loading-small-height: calc(var(--font-size-sm) + 2px); --loading-mini-width: 22px; --loading-mini-height: calc(var(--font-size-xs) + 2px); position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-height: 50vh; z-index: 1;}.var-loading__description { color: var(--color
|
|
1
|
+
:root { --loading-color: var(--color-primary); --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0; --loading-desc-color: var(--color-primary);}.var-loading { --loading-normal-width: 50px; --loading-normal-height: calc(var(--font-size-md) + 2px); --loading-large-width: 64px; --loading-large-height: calc(var(--font-size-lg) + 2px); --loading-small-width: 36px; --loading-small-height: calc(var(--font-size-sm) + 2px); --loading-mini-width: 22px; --loading-mini-height: calc(var(--font-size-xs) + 2px); position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-height: 50vh; z-index: 1;}.var-loading__description { color: var(--loading-desc-color); margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: var(--font-size-lg);}.var-loading__description--normal { font-size: var(--font-size-md);}.var-loading__description--small { font-size: var(--font-size-sm);}.var-loading__description--mini { font-size: var(--font-size-xs);}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; color: var(--loading-color); animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { --loading-wave-size-item-width: 5px; --loading-wave-size-item-margin: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.var-loading__wave--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__wave--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__wave--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__wave--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave; background-color: var(--loading-color);}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: var(--loading-wave-size-item-width); margin-left: var(--loading-wave-size-item-margin);}.var-loading__wave-item--normal { width: calc(var(--loading-wave-size-item-width) - 1px); margin-left: calc(var(--loading-wave-size-item-margin) - 1px);}.var-loading__wave-item--small { width: calc(var(--loading-wave-size-item-width) - 2px); margin-left: calc(var(--loading-wave-size-item-margin) - 2px);}.var-loading__wave-item--mini { width: calc(var(--loading-wave-size-item-width) - 3px); margin-left: calc(var(--loading-wave-size-item-margin) - 3px);}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { --loading-cube-size-item-width: 10px; --loading-cube-size-item-height: 10px; --loading-cube-size-item-margin: 5px; display: flex; align-items: center; flex-shrink: 0;}.var-loading__cube--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__cube--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__cube--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__cube--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube; background-color: var(--loading-color);}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: var(--loading-cube-size-item-height); width: var(--loading-cube-size-item-width); margin-left: var(--loading-cube-size-item-margin);}.var-loading__cube-item--normal { height: calc(var(--loading-cube-size-item-height) - 2px); width: calc(var(--loading-cube-size-item-width) - 2px); margin-left: calc(var(--loading-cube-size-item-margin) - 1px);}.var-loading__cube-item--small { height: calc(var(--loading-cube-size-item-height) - 4px); width: calc(var(--loading-cube-size-item-width) - 4px); margin-left: calc(var(--loading-cube-size-item-margin) - 2px);}.var-loading__cube-item--mini { height: calc(var(--loading-cube-size-item-height) - 6px); width: calc(var(--loading-cube-size-item-width) - 6px); margin-left: calc(var(--loading-cube-size-item-margin) - 3px);}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { --loading-rect-size-item-width: 8px; --loading-rect-size-item-height: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; flex-shrink: 0;}.var-loading__rect--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__rect--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__rect--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__rect--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__rect-item { animation: 2s ease-in-out infinite rect; background-color: var(--loading-color);}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: var(--loading-rect-size-item-height); width: var(--loading-rect-size-item-width);}.var-loading__rect-item--normal { height: calc(var(--loading-rect-size-item-height) * 0.9); width: calc(var(--loading-rect-size-item-width) * 0.8);}.var-loading__rect-item--small { height: calc(var(--loading-rect-size-item-height) * 0.8); width: calc(var(--loading-rect-size-item-width) * 0.6);}.var-loading__rect-item--mini { height: calc(var(--loading-rect-size-item-height) * 0.7); width: calc(var(--loading-rect-size-item-width) * 0.4);}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { --loading-disappear-size-item-width: 15px; --loading-disappear-size-item-height: 15px; display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap; flex-shrink: 0;}.var-loading__disappear--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__disappear--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__disappear--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__disappear--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear; background-color: var(--loading-color);}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: var(--loading-disappear-size-item-height); width: var(--loading-disappear-size-item-width);}.var-loading__disappear-item--normal { height: calc(var(--loading-disappear-size-item-height) * 0.8); width: calc(var(--loading-disappear-size-item-width) * 0.8);}.var-loading__disappear-item--small { height: calc(var(--loading-disappear-size-item-height) * 0.6); width: calc(var(--loading-disappear-size-item-width) * 0.6);}.var-loading__disappear-item--mini { height: calc(var(--loading-disappear-size-item-height) * 0.4); width: calc(var(--loading-disappear-size-item-width) * 0.4);}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}
|
package/es/option/option.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text {
|
|
1
|
+
:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}
|