@varlet/ui 2.20.0 → 2.20.1

package/es/uploader/Uploader.mjs

@@ -1,485 +0,0 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
-import VarFormDetails from "../form-details/index.mjs";
-import VarIcon from "../icon/index.mjs";
-import VarPopup from "../popup/index.mjs";
-import ImagePreview from "../image-preview/index.mjs";
-import Ripple from "../ripple/index.mjs";
-import Hover from "../hover/index.mjs";
-import { defineComponent, nextTick, reactive, computed, watch, ref } from "vue";
-import { props } from "./props.mjs";
-import { isNumber, toNumber, normalizeToArray, toDataURL, call } from "@varlet/shared";
-import { isHTMLSupportImage, isHTMLSupportVideo } from "../utils/shared.mjs";
-import { useValidation, createNamespace, formatElevation } from "../utils/components.mjs";
-import { useForm } from "../form/provide.mjs";
-import { toSizeUnit } from "../utils/elements.mjs";
-const { name, n, classes } = createNamespace("uploader");
-let fid = 0;
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = ["src", "alt"];
-const _hoisted_4 = ["multiple", "accept", "capture", "disabled"];
-const _hoisted_5 = ["src"];
-function __render__(_ctx, _cache) {
-  const _component_var_icon = _resolveComponent("var-icon");
-  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
-  const _component_var_form_details = _resolveComponent("var-form-details");
-  const _component_var_popup = _resolveComponent("var-popup");
-  const _directive_ripple = _resolveDirective("ripple");
-  const _directive_hover = _resolveDirective("hover");
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
-    },
-    [
-      _createElementVNode(
-        "div",
-        {
-          class: _normalizeClass(_ctx.n("file-list"))
-        },
-        [
-          (_openBlock(true), _createElementBlock(
-            _Fragment,
-            null,
-            _renderList(_ctx.files, (f) => {
-              return _withDirectives((_openBlock(), _createElementBlock("div", {
-                class: _normalizeClass(_ctx.classes(_ctx.n("file"), _ctx.formatElevation(_ctx.elevation, 2), [f.state === "loading", _ctx.n("--loading")])),
-                key: f.id,
-                onClick: ($event) => _ctx.preview(f)
-              }, [
-                _createElementVNode(
-                  "div",
-                  {
-                    class: _normalizeClass(_ctx.n("file-name"))
-                  },
-                  _toDisplayString(f.name || f.url),
-                  3
-                  /* TEXT, CLASS */
-                ),
-                _ctx.removable ? (_openBlock(), _createElementBlock("div", {
-                  key: 0,
-                  class: _normalizeClass(_ctx.n("file-close")),
-                  onClick: _withModifiers(($event) => _ctx.handleRemove(f), ["stop"])
-                }, [
-                  _createVNode(_component_var_icon, {
-                    class: _normalizeClass(_ctx.n("file-close-icon")),
-                    "var-uploader-cover": "",
-                    name: "delete"
-                  }, null, 8, ["class"])
-                ], 10, _hoisted_2)) : _createCommentVNode("v-if", true),
-                f.cover ? (_openBlock(), _createElementBlock("img", {
-                  key: 1,
-                  class: _normalizeClass(_ctx.n("file-cover")),
-                  style: _normalizeStyle({ objectFit: f.fit }),
-                  src: f.cover,
-                  alt: f.name
-                }, null, 14, _hoisted_3)) : _createCommentVNode("v-if", true),
-                _createElementVNode(
-                  "div",
-                  {
-                    class: _normalizeClass(_ctx.n("file-indicator"))
-                  },
-                  [
-                    _createElementVNode(
-                      "div",
-                      {
-                        class: _normalizeClass(
-                          _ctx.classes(_ctx.n("progress"), [f.state === "success", _ctx.n("--success")], [f.state === "error", _ctx.n("--error")])
-                        ),
-                        style: _normalizeStyle({ width: f.state === "success" || f.state === "error" ? "100%" : `${f.progress}%` })
-                      },
-                      null,
-                      6
-                      /* CLASS, STYLE */
-                    )
-                  ],
-                  2
-                  /* CLASS */
-                )
-              ], 10, _hoisted_1)), [
-                [_directive_ripple, { disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple }]
-              ]);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          )),
-          !_ctx.maxlength || _ctx.modelValue.length < _ctx.toNumber(_ctx.maxlength) ? _withDirectives((_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(
-                _ctx.classes(
-                  [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
-                  [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
-                )
-              ),
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleActionClick && _ctx.handleActionClick(...args))
-            },
-            [
-              _createElementVNode("input", {
-                ref: "input",
-                type: "file",
-                class: _normalizeClass(_ctx.n("action-input")),
-                multiple: _ctx.multiple,
-                accept: _ctx.accept,
-                capture: _ctx.capture,
-                disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
-                onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
-                onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
-                }, ["stop"]))
-              }, null, 42, _hoisted_4),
-              _renderSlot(_ctx.$slots, "default", {}, () => [
-                _createVNode(_component_var_icon, {
-                  class: _normalizeClass(_ctx.n("action-icon")),
-                  "var-uploader-cover": "",
-                  name: "plus"
-                }, null, 8, ["class"]),
-                _createVNode(_component_var_hover_overlay, {
-                  hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled
-                }, null, 8, ["hovering"])
-              ])
-            ],
-            2
-            /* CLASS */
-          )), [
-            [_directive_ripple, {
-              disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple || Boolean(_ctx.$slots.default)
-            }],
-            [_directive_hover, _ctx.handleHovering, "desktop"]
-          ]) : _createCommentVNode("v-if", true)
-        ],
-        2
-        /* CLASS */
-      ),
-      _createVNode(_component_var_form_details, {
-        "error-message": _ctx.errorMessage,
-        "extra-message": _ctx.maxlengthText
-      }, _createSlots({
-        _: 2
-        /* DYNAMIC */
-      }, [
-        _ctx.$slots["extra-message"] ? {
-          name: "extra-message",
-          fn: _withCtx(() => [
-            _renderSlot(_ctx.$slots, "extra-message")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["error-message", "extra-message"]),
-      _createVNode(_component_var_popup, {
-        class: _normalizeClass(_ctx.n("preview")),
-        "var-uploader-cover": "",
-        position: "center",
-        show: _ctx.showPreview,
-        "onUpdate:show": _cache[3] || (_cache[3] = ($event) => _ctx.showPreview = $event),
-        onClosed: _cache[4] || (_cache[4] = ($event) => _ctx.currentPreview = null)
-      }, {
-        default: _withCtx(() => {
-          var _a, _b;
-          return [
-            _ctx.currentPreview && _ctx.isHTMLSupportVideo((_a = _ctx.currentPreview) == null ? void 0 : _a.url) ? (_openBlock(), _createElementBlock("video", {
-              key: 0,
-              class: _normalizeClass(_ctx.n("preview-video")),
-              playsinline: "true",
-              "webkit-playsinline": "true",
-              "x5-playsinline": "true",
-              "x5-video-player-type": "h5",
-              "x5-video-player-fullscreen": "false",
-              controls: "",
-              src: (_b = _ctx.currentPreview) == null ? void 0 : _b.url
-            }, null, 10, _hoisted_5)) : _createCommentVNode("v-if", true)
-          ];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["class", "show"])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const __sfc__ = defineComponent({
-  name,
-  directives: { Ripple, Hover },
-  components: {
-    VarIcon,
-    VarPopup,
-    VarFormDetails,
-    VarHoverOverlay
-  },
-  props,
-  setup(props2) {
-    const input = ref(null);
-    const showPreview = ref(false);
-    const currentPreview = ref(null);
-    const maxlengthText = computed(() => {
-      const {
-        maxlength,
-        modelValue: { length }
-      } = props2;
-      return isNumber(maxlength) ? `${length} / ${maxlength}` : "";
-    });
-    const { form, bindForm } = useForm();
-    const {
-      errorMessage,
-      validateWithTrigger: vt,
-      validate: v,
-      // expose
-      resetValidation
-    } = useValidation();
-    const { hovering, handleHovering } = useHoverOverlay();
-    const files = computed(() => {
-      const { modelValue, hideList } = props2;
-      if (hideList) {
-        return [];
-      }
-      return modelValue;
-    });
-    let callReset = false;
-    const varFileUtils = {
-      getSuccess,
-      getError,
-      getLoading
-    };
-    const uploaderProvider = {
-      validate,
-      resetValidation,
-      reset
-    };
-    call(bindForm, uploaderProvider);
-    watch(
-      () => props2.modelValue,
-      () => {
-        !callReset && validateWithTrigger("onChange");
-        callReset = false;
-      },
-      { deep: true }
-    );
-    function preview(varFile) {
-      const { disabled, previewed, preventDefaultPreview, onPreview } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || disabled || !previewed) {
-        return;
-      }
-      call(onPreview, reactive(varFile));
-      if (preventDefaultPreview) {
-        return;
-      }
-      const { url } = varFile;
-      if (isHTMLSupportImage(url)) {
-        ImagePreview(url);
-        return;
-      }
-      if (isHTMLSupportVideo(url)) {
-        currentPreview.value = varFile;
-        showPreview.value = true;
-      }
-    }
-    function createVarFile(file) {
-      return {
-        id: fid++,
-        url: "",
-        cover: "",
-        name: file.name,
-        file,
-        progress: 0
-      };
-    }
-    function getFiles(event) {
-      const el = event.target;
-      const { files: fileList } = el;
-      return Array.from(fileList);
-    }
-    function resolver(varFile) {
-      return __async(this, null, function* () {
-        const file = varFile.file;
-        const shouldWithDataURL = props2.resolveType === "default" && file.type.startsWith("image") || props2.resolveType === "data-url";
-        if (shouldWithDataURL) {
-          const dataURL = yield toDataURL(file);
-          varFile.cover = dataURL;
-          varFile.url = dataURL;
-        }
-        return varFile;
-      });
-    }
-    function getResolvers(varFiles) {
-      return varFiles.map(resolver);
-    }
-    function getBeforeReaders(varFiles) {
-      const { onBeforeRead } = props2;
-      return varFiles.map(
-        (varFile) => new Promise((resolve) => {
-          if (!onBeforeRead) {
-            resolve({
-              valid: true,
-              varFile
-            });
-          }
-          const results = normalizeToArray(call(onBeforeRead, reactive(varFile)));
-          Promise.all(results).then((values) => {
-            resolve({
-              valid: values.every(Boolean),
-              varFile
-            });
-          });
-        })
-      );
-    }
-    function handleChange(event) {
-      return __async(this, null, function* () {
-        const { maxsize, maxlength, modelValue, onOversize, onAfterRead, onBeforeFilter, readonly, disabled } = props2;
-        if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
-          return;
-        }
-        const getValidSizeVarFile = (varFiles2) => varFiles2.filter((varFile) => {
-          if (varFile.file.size > toNumber(maxsize)) {
-            call(onOversize, reactive(varFile));
-            return false;
-          }
-          return true;
-        });
-        const getValidLengthVarFiles = (varFiles2) => {
-          const limit = Math.min(varFiles2.length, toNumber(maxlength) - modelValue.length);
-          return varFiles2.slice(0, limit);
-        };
-        const getFilterVarFiles = (varFiles2) => __async(this, null, function* () {
-          if (!onBeforeFilter) {
-            return varFiles2;
-          }
-          const events = normalizeToArray(onBeforeFilter);
-          for (const event2 of events) {
-            varFiles2 = yield event2(varFiles2);
-          }
-          return varFiles2;
-        });
-        const files2 = getFiles(event);
-        let varFiles = files2.map(createVarFile);
-        varFiles = yield getFilterVarFiles(varFiles);
-        varFiles = maxsize != null ? getValidSizeVarFile(varFiles) : varFiles;
-        varFiles = maxlength != null ? getValidLengthVarFiles(varFiles) : varFiles;
-        const resolvedVarFiles = yield Promise.all(getResolvers(varFiles));
-        const validationVarFiles = yield Promise.all(getBeforeReaders(resolvedVarFiles));
-        const validVarFiles = validationVarFiles.filter(({ valid }) => valid).map(({ varFile }) => varFile);
-        call(props2["onUpdate:modelValue"], [...modelValue, ...validVarFiles]);
-        event.target.value = "";
-        validVarFiles.forEach((varFile) => call(onAfterRead, reactive(varFile)));
-      });
-    }
-    function handleRemove(removedVarFile) {
-      return __async(this, null, function* () {
-        const { disabled, readonly, modelValue, onBeforeRemove, onRemove } = props2;
-        if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
-          return;
-        }
-        if (onBeforeRemove) {
-          const results = normalizeToArray(call(onBeforeRemove, reactive(removedVarFile)));
-          if ((yield Promise.all(results)).some((result) => !result)) {
-            return;
-          }
-        }
-        const expectedFiles = modelValue.filter((varFile) => varFile !== removedVarFile);
-        call(onRemove, reactive(removedVarFile));
-        validateWithTrigger("onRemove");
-        call(props2["onUpdate:modelValue"], expectedFiles);
-      });
-    }
-    function handleActionClick(event) {
-      if ((form == null ? void 0 : form.disabled.value) || props2.disabled) {
-        return;
-      }
-      if (props2.onClickAction) {
-        call(props2.onClickAction, chooseFile, event);
-        return;
-      }
-      chooseFile();
-    }
-    function getSuccess() {
-      return props2.modelValue.filter((varFile) => varFile.state === "success");
-    }
-    function getError() {
-      return props2.modelValue.filter((varFile) => varFile.state === "error");
-    }
-    function getLoading() {
-      return props2.modelValue.filter((varFile) => varFile.state === "loading");
-    }
-    function chooseFile() {
-      input.value.click();
-    }
-    function closePreview() {
-      currentPreview.value = null;
-      showPreview.value = false;
-      ImagePreview.close();
-    }
-    function validateWithTrigger(trigger) {
-      nextTick(() => {
-        const { validateTrigger, rules, modelValue } = props2;
-        vt(validateTrigger, trigger, rules, modelValue, varFileUtils);
-      });
-    }
-    function validate() {
-      return v(props2.rules, props2.modelValue, varFileUtils);
-    }
-    function reset() {
-      callReset = true;
-      call(props2["onUpdate:modelValue"], []);
-      resetValidation();
-    }
-    return {
-      input,
-      files,
-      showPreview,
-      currentPreview,
-      errorMessage,
-      maxlengthText,
-      hovering,
-      formDisabled: form == null ? void 0 : form.disabled,
-      formReadonly: form == null ? void 0 : form.readonly,
-      n,
-      classes,
-      formatElevation,
-      toNumber,
-      handleHovering,
-      isHTMLSupportVideo,
-      isHTMLSupportImage,
-      preview,
-      handleChange,
-      handleRemove,
-      getSuccess,
-      getError,
-      getLoading,
-      validate,
-      resetValidation,
-      reset,
-      chooseFile,
-      closePreview,
-      handleActionClick,
-      toSizeUnit
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/uploader/index.mjs

@@ -1,12 +0,0 @@
-import Uploader from "./Uploader.mjs";
-import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
-import { props as uploaderProps } from "./props.mjs";
-withInstall(Uploader);
-withPropsDefaultsSetter(Uploader, uploaderProps);
-const _UploaderComponent = Uploader;
-var stdin_default = Uploader;
-export {
-  _UploaderComponent,
-  stdin_default as default,
-  uploaderProps
-};

package/es/uploader/props.mjs

@@ -1,59 +0,0 @@
-import { defineListenerProp } from "../utils/components.mjs";
-const props = {
-  modelValue: {
-    type: Array,
-    default: () => []
-  },
-  accept: {
-    type: String,
-    default: "image/*"
-  },
-  capture: {
-    type: [String, Boolean],
-    default: void 0
-  },
-  multiple: Boolean,
-  readonly: Boolean,
-  disabled: Boolean,
-  elevation: {
-    type: [Boolean, Number, String],
-    default: true
-  },
-  resolveType: {
-    type: String,
-    default: "default"
-  },
-  removable: {
-    type: Boolean,
-    default: true
-  },
-  maxlength: [Number, String],
-  maxsize: [Number, String],
-  previewed: {
-    type: Boolean,
-    default: true
-  },
-  ripple: {
-    type: Boolean,
-    default: true
-  },
-  validateTrigger: {
-    type: Array,
-    default: () => ["onChange", "onRemove"]
-  },
-  rules: Array,
-  hideList: Boolean,
-  preventDefaultPreview: Boolean,
-  onClickAction: defineListenerProp(),
-  onBeforeFilter: defineListenerProp(),
-  onBeforeRead: defineListenerProp(),
-  onAfterRead: defineListenerProp(),
-  onBeforeRemove: defineListenerProp(),
-  onRemove: defineListenerProp(),
-  onOversize: defineListenerProp(),
-  onPreview: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-};
-export {
-  props
-};

package/es/uploader/provide.ts

@@ -1,3 +0,0 @@
-import { Validation } from '../form/provide'
-
-export type UploaderProvider = Validation

package/es/uploader/style/index.mjs

@@ -1,9 +0,0 @@
-import '../../styles/common.css'
-import '../../styles/elevation.css'
-import '../../form-details/formDetails.css'
-import '../../icon/icon.css'
-import '../../popup/popup.css'
-import '../../image-preview/imagePreview.css'
-import '../../hover-overlay/hoverOverlay.css'
-import '../uploader.css'
-import '../UploaderSfc.css'

package/es/uploader/uploader.css

@@ -1 +0,0 @@
-: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-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); 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); 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__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;}