@varlet/ui 1.27.2 → 1.27.5
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.en-US.md +3 -3
- package/README.md +3 -3
- package/es/rate/Rate.js +1 -1
- package/es/rate/rate.css +1 -1
- package/es/rate/rate.less +8 -6
- package/es/snackbar/style/index.js +1 -1
- package/es/snackbar/style/less.js +1 -1
- package/es/style.css +1 -1
- package/es/uploader/Uploader.js +3 -3
- package/es/uploader/uploader.css +1 -1
- package/es/uploader/uploader.less +1 -2
- package/es/varlet.esm.js +5 -5
- package/highlight/attributes.json +1 -1
- package/highlight/web-types.json +2 -2
- package/lib/rate/Rate.js +1 -1
- package/lib/rate/rate.css +1 -1
- package/lib/rate/rate.less +8 -6
- package/lib/style.css +1 -1
- package/lib/uploader/Uploader.js +3 -3
- package/lib/uploader/uploader.css +1 -1
- package/lib/uploader/uploader.less +1 -2
- package/package.json +5 -5
- package/umd/varlet.js +2 -2
package/lib/uploader/Uploader.js
CHANGED
|
@@ -106,8 +106,8 @@ function render(_ctx, _cache) {
|
|
|
106
106
|
return _ctx.triggerAction && _ctx.triggerAction(...arguments);
|
|
107
107
|
})
|
|
108
108
|
}, [(0, _vue.createElementVNode)("input", {
|
|
109
|
-
class: (0, _vue.normalizeClass)(_ctx.n('action-input')),
|
|
110
109
|
ref: "input",
|
|
110
|
+
class: (0, _vue.normalizeClass)(_ctx.n('action-input')),
|
|
111
111
|
type: "file",
|
|
112
112
|
multiple: _ctx.multiple,
|
|
113
113
|
accept: _ctx.accept,
|
|
@@ -184,7 +184,7 @@ var _default = (0, _vue.defineComponent)({
|
|
|
184
184
|
props: _props.props,
|
|
185
185
|
|
|
186
186
|
setup(props) {
|
|
187
|
-
var input = (0, _vue.ref)();
|
|
187
|
+
var input = (0, _vue.ref)(null);
|
|
188
188
|
var showPreview = (0, _vue.ref)(false);
|
|
189
189
|
var currentPreview = (0, _vue.ref)(null);
|
|
190
190
|
var maxlengthText = (0, _vue.computed)(() => {
|
|
@@ -452,8 +452,8 @@ var _default = (0, _vue.defineComponent)({
|
|
|
452
452
|
isHTMLSupportImage: _shared.isHTMLSupportImage,
|
|
453
453
|
formDisabled: form == null ? void 0 : form.disabled,
|
|
454
454
|
formReadonly: form == null ? void 0 : form.readonly,
|
|
455
|
-
triggerAction,
|
|
456
455
|
preview,
|
|
456
|
+
triggerAction,
|
|
457
457
|
handleChange,
|
|
458
458
|
handleRemove,
|
|
459
459
|
getSuccess,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); transition: all 0.25s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block;
|
|
1
|
+
:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); transition: all 0.25s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; width: 0; height: 0; visibility: hidden;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varlet/ui",
|
|
3
|
-
"version": "1.27.
|
|
3
|
+
"version": "1.27.5",
|
|
4
4
|
"description": "A material like components library",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
},
|
|
40
40
|
"gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@varlet/icons": "1.27.
|
|
42
|
+
"@varlet/icons": "1.27.5",
|
|
43
43
|
"dayjs": "^1.10.4",
|
|
44
44
|
"decimal.js": "^10.2.1"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@varlet/cli": "1.27.
|
|
48
|
-
"@varlet/touch-emulator": "1.27.
|
|
47
|
+
"@varlet/cli": "1.27.5",
|
|
48
|
+
"@varlet/touch-emulator": "1.27.5",
|
|
49
49
|
"@vue/test-utils": "2.0.0-rc.6",
|
|
50
50
|
"@vue/runtime-core": "3.2.25",
|
|
51
51
|
"typescript": "^4.4.4",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"test:watch": "varlet-cli jest -w",
|
|
70
70
|
"test:watchAll": "varlet-cli jest -wa"
|
|
71
71
|
},
|
|
72
|
-
"readme": "<div align=\"center\">\n <a href=\"https://varlet.
|
|
72
|
+
"readme": "<div align=\"center\">\n <a href=\"https://varlet-varletjs.vercel.app\">\n <img src=\"https://varlet-varletjs.vercel.app/logo.svg\" width=\"150\" >\n </a>\n <h1>VARLET</h1>\n <p>基于 Vue3 的 Material design 风格移动端组件库</p>\n <p>\n <a href=\"https://varlet-varletjs.vercel.app\">开发文档</a> | <a href=\"https://github.com/varletjs/varlet/blob/dev/README.en-US.md\">English</a>\n </p>\n <p>\n <img src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\">\n <img src=\"https://img.shields.io/github/stars/varletjs/varlet\" alt=\"stars\">\n <img src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n <img src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"licence\">\n <img src=\"https://img.shields.io/codecov/c/github/varletjs/varlet\" alt=\"coverage\">\n <img src=\"https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip\" alt=\"gzip\" />\n <img src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\">\n </p>\n</div>\n\n---\n\n### 介绍\n\nVarlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。\n\n### 特性\n- 🚀 提供50+个高质量通用组件 \n- 🚀 组件十分轻量\n- 💪 由国人开发，完善的中英文文档和后勤保障\n- 🛠️ 支持按需引入\n- 🛠️ 支持主题定制\n- 🌍 支持国际化\n- 💡 支持 webstorm，vscode 组件属性高亮\n- 💪 支持 SSR\n- 💡 支持 Typescript \n- 💪 确保90%以上单元测试覆盖率，提供稳定性保证\n- 🛠️ 支持暗黑模式\n\n### 安装\n\n### CDN\n`varlet.js` 包含组件库的所有样式和逻辑，引入即可。\n\n```html\n<div id=\"app\"></div>\n<script src=\"https://cdn.jsdelivr.net/npm/vue@next\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"></script>\n<script>\n const app = Vue.createApp({\n template: '<var-button>按钮</var-button>'\n })\n app.use(Varlet).mount('#app')\n</script>\n```\n\n### Webpack / Vite\n```shell\n# 通过 npm 或 yarn 或 pnpm 安装\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style.js'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### 捐赠我们\n\n我们将用捐赠所得去鼓励参与开源的贡献者们，给他们买一杯咖啡奶茶，购置对于项目有帮助基础设施，推动项目变得更好。\n\n<img style=\"width: 25%\" src=\"https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true\" />\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n <img src=\"https://contrib.rocks/image?repo=varletjs/varlet\" />\n</a>\n\n"
|
|
73
73
|
}
|