@varlet/ui 3.20.2 → 3.20.3

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.2'
+const version = '3.20.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.2'
+const version = '3.20.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/themes/dark/uploader.mjs

@@ -4,6 +4,9 @@ var stdin_default = {
   "--uploader-file-name-background": "#303030",
   "--uploader-file-name-color": "#aaa",
   "--uploader-file-cover-background": "#303030",
+  "--uploader-outlined-background": "transparent",
+  "--uploader-filled-background": "var(--color-surface-container-highest)",
+  "--uploader-outline-color": "var(--color-outline)",
   "--uploader-action-icon-size": "24px",
   "--uploader-action-margin": "0 10px 10px 0",
   "--uploader-file-size": "80px",

package/es/themes/md3-dark/uploader.mjs

@@ -3,6 +3,9 @@ var stdin_default = {
   "--uploader-action-background": "var(--color-surface-container-highest)",
   "--uploader-file-name-background": "var(--color-surface-container-highest)",
   "--uploader-file-cover-background": "var(--color-surface-container-highest)",
+  "--uploader-outlined-background": "transparent",
+  "--uploader-filled-background": "var(--color-surface-container-highest)",
+  "--uploader-outline-color": "var(--color-outline)",
   "--uploader-action-icon-color": "var(--color-on-surface-variant)",
   "--uploader-file-name-color": "var(--color-on-surface-variant)",
   "--uploader-action-icon-size": "24px",

package/es/themes/md3-light/uploader.mjs

@@ -3,6 +3,9 @@ var stdin_default = {
   "--uploader-action-background": "var(--color-surface-container-low)",
   "--uploader-file-name-background": "var(--color-surface-container-low)",
   "--uploader-file-cover-background": "var(--color-surface-container-low)",
+  "--uploader-outlined-background": "transparent",
+  "--uploader-filled-background": "var(--color-surface-container-highest)",
+  "--uploader-outline-color": "var(--color-outline)",
   "--uploader-action-icon-color": "var(--color-on-surface-variant)",
   "--uploader-file-name-color": "var(--color-on-surface-variant)",
   "--uploader-action-icon-size": "24px",

package/es/uploader/Uploader.mjs

@@ -67,7 +67,15 @@ function __render__(_ctx, _cache) {
             _renderList(_ctx.files, (f) => {
               return _withDirectives((_openBlock(), _createElementBlock("div", {
                 key: f.id,
-                class: _normalizeClass(_ctx.classes(_ctx.n("file"), _ctx.formatElevation(_ctx.elevation, 2), [f.state === "loading", _ctx.n("--loading")])),
+                class: _normalizeClass(
+                  _ctx.classes(
+                    _ctx.n("file"),
+                    [_ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)],
+                    [_ctx.variant === "outlined", _ctx.n("--outlined")],
+                    [_ctx.variant === "filled", _ctx.n("--filled")],
+                    [f.state === "loading", _ctx.n("--loading")]
+                  )
+                ),
                 onClick: ($event) => _ctx.preview(f)
               }, [
                 _createElementVNode(
@@ -139,7 +147,10 @@ function __render__(_ctx, _cache) {
             class: _normalizeClass(
               _ctx.classes(
                 _ctx.n("--outline-none"),
-                [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
+                [!_ctx.$slots.default, _ctx.n("action")],
+                [!_ctx.$slots.default && _ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)],
+                [!_ctx.$slots.default && _ctx.variant === "outlined", _ctx.n("--outlined")],
+                [!_ctx.$slots.default && _ctx.variant === "filled", _ctx.n("--filled")],
                 [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
               )
             ),

package/es/uploader/props.mjs

@@ -19,6 +19,10 @@ const props = {
     type: [Boolean, Number, String],
     default: true
   },
+  variant: {
+    type: String,
+    default: "standard"
+  },
   resolveType: {
     type: String,
     default: "default"

package/es/uploader/uploader.css

@@ -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-border-radius: 0; --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-file-progress-color: var(--color-primary); --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); border-radius: var(--uploader-file-border-radius); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;}.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); 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); border-radius: var(--uploader-file-border-radius); 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__progress { width: 0%; height: 100%; background-color: var(--uploader-file-progress-color); transition: all 0.25s ease-in-out;}.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;}.var-uploader--outline-none { outline: none;}
+: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-border-radius: 0; --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-outlined-background: transparent; --uploader-filled-background: hsl(0, 0%, 93%); --uploader-outline-color: var(--color-outline); --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-file-progress-color: var(--color-primary); --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); border-radius: var(--uploader-file-border-radius); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;}.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); 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); border-radius: var(--uploader-file-border-radius); 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__progress { width: 0%; height: 100%; background-color: var(--uploader-file-progress-color); transition: all 0.25s ease-in-out;}.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--outlined { --uploader-action-background: var(--uploader-outlined-background); --uploader-file-name-background: var(--uploader-outlined-background); --uploader-file-cover-background: var(--uploader-outlined-background); border: thin solid var(--uploader-outline-color);}.var-uploader--filled { --uploader-action-background: var(--uploader-filled-background); --uploader-file-name-background: var(--uploader-filled-background); --uploader-file-cover-background: var(--uploader-filled-background);}.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;}.var-uploader--outline-none { outline: none;}