vant 3.4.0 → 3.4.4

package/es/uploader/Uploader.js

@@ -1,28 +1,24 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
-import { ref, reactive, defineComponent, onBeforeUnmount } from 'vue'; // Utils
-
-import { pick, extend, isPromise, truthProp, numericProp, getSizeStyle, makeArrayProp, makeStringProp, makeNumericProp } from '../utils';
-import { bem, name, toArray, isOversize, filterFiles, isImageFile, readFileContent } from './utils'; // Composables
-
-import { useCustomFieldValue } from '@vant/use';
-import { useExpose } from '../composables/use-expose'; // Components
-
-import { Icon } from '../icon';
-import { ImagePreview } from '../image-preview';
-import UploaderPreviewItem from './UploaderPreviewItem'; // Types
-
-var uploaderProps = {
-  name: makeNumericProp(''),
-  accept: makeStringProp('image/*'),
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, reactive, defineComponent, onBeforeUnmount } from "vue";
+import { pick, extend, isPromise, truthProp, numericProp, getSizeStyle, makeArrayProp, makeStringProp, makeNumericProp } from "../utils";
+import { bem, name, toArray, isOversize, filterFiles, isImageFile, readFileContent } from "./utils";
+import { useCustomFieldValue } from "@vant/use";
+import { useExpose } from "../composables/use-expose";
+import { Icon } from "../icon";
+import { ImagePreview } from "../image-preview";
+import UploaderPreviewItem from "./UploaderPreviewItem";
+const uploaderProps = {
+  name: makeNumericProp(""),
+  accept: makeStringProp("image/*"),
   capture: String,
   multiple: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   lazyLoad: Boolean,
   maxCount: makeNumericProp(Infinity),
-  imageFit: makeStringProp('cover'),
-  resultType: makeStringProp('dataUrl'),
-  uploadIcon: makeStringProp('photograph'),
+  imageFit: makeStringProp("cover"),
+  resultType: makeStringProp("dataUrl"),
+  uploadIcon: makeStringProp("photograph"),
   uploadText: String,
   deletable: truthProp,
   afterRead: Function,
@@ -39,130 +35,101 @@ var uploaderProps = {
     default: Infinity
   }
 };
-export default defineComponent({
+var stdin_default = defineComponent({
   name,
   props: uploaderProps,
-  emits: ['delete', 'oversize', 'click-upload', 'close-preview', 'click-preview', 'update:modelValue'],
-
-  setup(props, _ref) {
-    var {
-      emit,
-      slots
-    } = _ref;
-    var inputRef = ref();
-    var urls = [];
-
-    var getDetail = function (index) {
-      if (index === void 0) {
-        index = props.modelValue.length;
-      }
-
-      return {
-        name: props.name,
-        index
-      };
-    };
-
-    var resetInput = () => {
+  emits: ["delete", "oversize", "click-upload", "close-preview", "click-preview", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const inputRef = ref();
+    const urls = [];
+    const getDetail = (index = props.modelValue.length) => ({
+      name: props.name,
+      index
+    });
+    const resetInput = () => {
       if (inputRef.value) {
-        inputRef.value.value = '';
+        inputRef.value.value = "";
       }
     };
-
-    var onAfterRead = items => {
+    const onAfterRead = (items) => {
       resetInput();
-
       if (isOversize(items, props.maxSize)) {
         if (Array.isArray(items)) {
-          var result = filterFiles(items, props.maxSize);
+          const result = filterFiles(items, props.maxSize);
           items = result.valid;
-          emit('oversize', result.invalid, getDetail());
-
+          emit("oversize", result.invalid, getDetail());
           if (!items.length) {
             return;
           }
         } else {
-          emit('oversize', items, getDetail());
+          emit("oversize", items, getDetail());
           return;
         }
       }
-
       items = reactive(items);
-      emit('update:modelValue', [...props.modelValue, ...toArray(items)]);
-
+      emit("update:modelValue", [...props.modelValue, ...toArray(items)]);
       if (props.afterRead) {
         props.afterRead(items, getDetail());
       }
     };
-
-    var readFile = files => {
-      var {
+    const readFile = (files) => {
+      const {
         maxCount,
         modelValue,
         resultType
       } = props;
-
       if (Array.isArray(files)) {
-        var remainCount = +maxCount - modelValue.length;
-
+        const remainCount = +maxCount - modelValue.length;
         if (files.length > remainCount) {
           files = files.slice(0, remainCount);
         }
-
-        Promise.all(files.map(file => readFileContent(file, resultType))).then(contents => {
-          var fileList = files.map((file, index) => {
-            var result = {
+        Promise.all(files.map((file) => readFileContent(file, resultType))).then((contents) => {
+          const fileList = files.map((file, index) => {
+            const result = {
               file,
-              status: '',
-              message: ''
+              status: "",
+              message: ""
             };
-
             if (contents[index]) {
               result.content = contents[index];
             }
-
             return result;
           });
           onAfterRead(fileList);
         });
       } else {
-        readFileContent(files, resultType).then(content => {
-          var result = {
+        readFileContent(files, resultType).then((content) => {
+          const result = {
             file: files,
-            status: '',
-            message: ''
+            status: "",
+            message: ""
           };
-
           if (content) {
             result.content = content;
           }
-
           onAfterRead(result);
         });
       }
     };
-
-    var onChange = event => {
-      var {
+    const onChange = (event) => {
+      const {
         files
       } = event.target;
-
       if (props.disabled || !files || !files.length) {
         return;
       }
-
-      var file = files.length === 1 ? files[0] : [].slice.call(files);
-
+      const file = files.length === 1 ? files[0] : [].slice.call(files);
       if (props.beforeRead) {
-        var response = props.beforeRead(file, getDetail());
-
+        const response = props.beforeRead(file, getDetail());
         if (!response) {
           resetInput();
           return;
         }
-
         if (isPromise(response)) {
-          response.then(data => {
+          response.then((data) => {
             if (data) {
               readFile(data);
             } else {
@@ -172,24 +139,19 @@ export default defineComponent({
           return;
         }
       }
-
       readFile(file);
     };
-
-    var imagePreview;
-
-    var onClosePreview = () => emit('close-preview');
-
-    var previewImage = item => {
+    let imagePreview;
+    const onClosePreview = () => emit("close-preview");
+    const previewImage = (item) => {
       if (props.previewFullImage) {
-        var imageFiles = props.modelValue.filter(isImageFile);
-        var images = imageFiles.map(item => {
-          if (item.file && !item.url) {
-            item.url = URL.createObjectURL(item.file);
-            urls.push(item.url);
+        const imageFiles = props.modelValue.filter(isImageFile);
+        const images = imageFiles.map((item2) => {
+          if (item2.file && !item2.url) {
+            item2.url = URL.createObjectURL(item2.file);
+            urls.push(item2.url);
           }
-
-          return item.url;
+          return item2.url;
         }).filter(Boolean);
         imagePreview = ImagePreview(extend({
           images,
@@ -198,87 +160,76 @@ export default defineComponent({
         }, props.previewOptions));
       }
     };
-
-    var closeImagePreview = () => {
+    const closeImagePreview = () => {
       if (imagePreview) {
         imagePreview.close();
       }
     };
-
-    var deleteFile = (item, index) => {
-      var fileList = props.modelValue.slice(0);
+    const deleteFile = (item, index) => {
+      const fileList = props.modelValue.slice(0);
       fileList.splice(index, 1);
-      emit('update:modelValue', fileList);
-      emit('delete', item, getDetail(index));
+      emit("update:modelValue", fileList);
+      emit("delete", item, getDetail(index));
     };
-
-    var renderPreviewItem = (item, index) => {
-      var needPickData = ['imageFit', 'deletable', 'previewSize', 'beforeDelete'];
-      var previewData = extend(pick(props, needPickData), pick(item, needPickData, true));
+    const renderPreviewItem = (item, index) => {
+      const needPickData = ["imageFit", "deletable", "previewSize", "beforeDelete"];
+      const previewData = extend(pick(props, needPickData), pick(item, needPickData, true));
       return _createVNode(UploaderPreviewItem, _mergeProps({
         "item": item,
         "index": index,
-        "onClick": () => emit('click-preview', item, getDetail(index)),
+        "onClick": () => emit("click-preview", item, getDetail(index)),
         "onDelete": () => deleteFile(item, index),
         "onPreview": () => previewImage(item)
-      }, pick(props, ['name', 'lazyLoad']), previewData), {
-        'preview-cover': slots['preview-cover']
+      }, pick(props, ["name", "lazyLoad"]), previewData), {
+        "preview-cover": slots["preview-cover"]
       });
     };
-
-    var renderPreviewList = () => {
+    const renderPreviewList = () => {
       if (props.previewImage) {
         return props.modelValue.map(renderPreviewItem);
       }
     };
-
-    var onClickUpload = event => emit('click-upload', event);
-
-    var renderUpload = () => {
+    const onClickUpload = (event) => emit("click-upload", event);
+    const renderUpload = () => {
       if (props.modelValue.length >= props.maxCount || !props.showUpload) {
         return;
       }
-
-      var Input = props.readonly ? null : _createVNode("input", {
+      const Input = props.readonly ? null : _createVNode("input", {
         "ref": inputRef,
         "type": "file",
-        "class": bem('input'),
+        "class": bem("input"),
         "accept": props.accept,
         "capture": props.capture,
         "multiple": props.multiple,
         "disabled": props.disabled,
         "onChange": onChange
       }, null);
-
       if (slots.default) {
         return _createVNode("div", {
-          "class": bem('input-wrapper'),
+          "class": bem("input-wrapper"),
           "onClick": onClickUpload
         }, [slots.default(), Input]);
       }
-
       return _createVNode("div", {
-        "class": bem('upload', {
+        "class": bem("upload", {
           readonly: props.readonly
         }),
         "style": getSizeStyle(props.previewSize),
         "onClick": onClickUpload
       }, [_createVNode(Icon, {
         "name": props.uploadIcon,
-        "class": bem('upload-icon')
+        "class": bem("upload-icon")
       }, null), props.uploadText && _createVNode("span", {
-        "class": bem('upload-text')
+        "class": bem("upload-text")
       }, [props.uploadText]), Input]);
     };
-
-    var chooseFile = () => {
+    const chooseFile = () => {
       if (inputRef.value && !props.disabled) {
         inputRef.value.click();
       }
     };
-
     onBeforeUnmount(() => {
-      urls.forEach(url => URL.revokeObjectURL(url));
+      urls.forEach((url) => URL.revokeObjectURL(url));
     });
     useExpose({
       chooseFile,
@@ -288,10 +239,12 @@ export default defineComponent({
     return () => _createVNode("div", {
       "class": bem()
     }, [_createVNode("div", {
-      "class": bem('wrapper', {
+      "class": bem("wrapper", {
         disabled: props.disabled
       })
     }, [renderPreviewList(), renderUpload()])]);
   }
-
-});
+});
+export {
+  stdin_default as default
+};

package/es/uploader/UploaderPreviewItem.d.ts

@@ -14,26 +14,19 @@ declare const _default: import("vue").DefineComponent<{
     deletable: BooleanConstructor;
     previewSize: (NumberConstructor | StringConstructor)[];
     beforeDelete: PropType<Interceptor>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name?: unknown;
-    item?: unknown;
-    index?: unknown;
-    imageFit?: unknown;
-    lazyLoad?: unknown;
-    deletable?: unknown;
-    previewSize?: unknown;
-    beforeDelete?: unknown;
-} & {
-    item: UploaderFileListItem;
-    lazyLoad: boolean;
-    deletable: boolean;
-} & {
-    name?: string | number | undefined;
-    index?: number | undefined;
-    imageFit?: ImageFit | undefined;
-    beforeDelete?: Interceptor | undefined;
-    previewSize?: string | number | undefined;
-}> & {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: (NumberConstructor | StringConstructor)[];
+    item: {
+        type: PropType<UploaderFileListItem>;
+        required: true;
+    };
+    index: NumberConstructor;
+    imageFit: PropType<ImageFit>;
+    lazyLoad: BooleanConstructor;
+    deletable: BooleanConstructor;
+    previewSize: (NumberConstructor | StringConstructor)[];
+    beforeDelete: PropType<Interceptor>;
+}>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
     onPreview?: ((...args: any[]) => any) | undefined;
 }, {

package/es/uploader/UploaderPreviewItem.js

@@ -1,14 +1,11 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
-import { defineComponent } from 'vue'; // Utils
-
-import { t, bem, isImageFile } from './utils';
-import { isDef, extend, numericProp, getSizeStyle, callInterceptor, makeRequiredProp } from '../utils'; // Components
-
-import { Icon } from '../icon';
-import { Image } from '../image';
-import { Loading } from '../loading'; // Types
-
-export default defineComponent({
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { t, bem, isImageFile } from "./utils";
+import { isDef, extend, numericProp, getSizeStyle, callInterceptor, makeRequiredProp } from "../utils";
+import { Icon } from "../icon";
+import { Image } from "../image";
+import { Loading } from "../loading";
+var stdin_default = defineComponent({
   props: {
     name: numericProp,
     item: makeRequiredProp(Object),
@@ -19,38 +16,33 @@ export default defineComponent({
     previewSize: numericProp,
     beforeDelete: Function
   },
-  emits: ['delete', 'preview'],
-
-  setup(props, _ref) {
-    var {
-      emit,
-      slots
-    } = _ref;
-
-    var renderMask = () => {
-      var {
+  emits: ["delete", "preview"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const renderMask = () => {
+      const {
         status,
         message
       } = props.item;
-
-      if (status === 'uploading' || status === 'failed') {
-        var MaskIcon = status === 'failed' ? _createVNode(Icon, {
+      if (status === "uploading" || status === "failed") {
+        const MaskIcon = status === "failed" ? _createVNode(Icon, {
           "name": "close",
-          "class": bem('mask-icon')
+          "class": bem("mask-icon")
         }, null) : _createVNode(Loading, {
-          "class": bem('loading')
+          "class": bem("loading")
         }, null);
-        var showMessage = isDef(message) && message !== '';
+        const showMessage = isDef(message) && message !== "";
         return _createVNode("div", {
-          "class": bem('mask')
+          "class": bem("mask")
         }, [MaskIcon, showMessage && _createVNode("div", {
-          "class": bem('mask-message')
+          "class": bem("mask-message")
         }, [message])]);
       }
     };
-
-    var onDelete = event => {
-      var {
+    const onDelete = (event) => {
+      const {
         name,
         item,
         index,
@@ -62,51 +54,46 @@ export default defineComponent({
           name,
           index
         }],
-        done: () => emit('delete')
+        done: () => emit("delete")
       });
     };
-
-    var onPreview = () => emit('preview');
-
-    var renderDeleteIcon = () => {
-      if (props.deletable && props.item.status !== 'uploading') {
+    const onPreview = () => emit("preview");
+    const renderDeleteIcon = () => {
+      if (props.deletable && props.item.status !== "uploading") {
         return _createVNode("div", {
           "role": "button",
-          "class": bem('preview-delete'),
+          "class": bem("preview-delete"),
           "tabindex": 0,
-          "aria-label": t('delete'),
+          "aria-label": t("delete"),
           "onClick": onDelete
         }, [_createVNode(Icon, {
           "name": "cross",
-          "class": bem('preview-delete-icon')
+          "class": bem("preview-delete-icon")
         }, null)]);
       }
     };
-
-    var renderCover = () => {
-      if (slots['preview-cover']) {
-        var {
+    const renderCover = () => {
+      if (slots["preview-cover"]) {
+        const {
           index,
           item
         } = props;
         return _createVNode("div", {
-          "class": bem('preview-cover')
-        }, [slots['preview-cover'](extend({
+          "class": bem("preview-cover")
+        }, [slots["preview-cover"](extend({
           index
         }, item))]);
       }
     };
-
-    var renderPreview = () => {
-      var {
+    const renderPreview = () => {
+      const {
         item
       } = props;
-
       if (isImageFile(item)) {
         return _createVNode(Image, {
           "fit": props.imageFit,
           "src": item.content || item.url,
-          "class": bem('preview-image'),
+          "class": bem("preview-image"),
           "width": props.previewSize,
           "height": props.previewSize,
           "lazyLoad": props.lazyLoad,
@@ -115,21 +102,21 @@ export default defineComponent({
           default: renderCover
         });
       }
-
       return _createVNode("div", {
-        "class": bem('file'),
+        "class": bem("file"),
         "style": getSizeStyle(props.previewSize)
       }, [_createVNode(Icon, {
-        "class": bem('file-icon'),
+        "class": bem("file-icon"),
         "name": "description"
       }, null), _createVNode("div", {
-        "class": [bem('file-name'), 'van-ellipsis']
+        "class": [bem("file-name"), "van-ellipsis"]
       }, [item.file ? item.file.name : item.url]), renderCover()]);
     };
-
     return () => _createVNode("div", {
-      "class": bem('preview')
+      "class": bem("preview")
     }, [renderPreview(), renderMask(), renderDeleteIcon()]);
   }
-
-});
+});
+export {
+  stdin_default as default
+};

package/es/uploader/index.css

@@ -1 +1 @@
-:root{--van-uploader-size:80px;--van-uploader-icon-size:24px;--van-uploader-icon-color:var(--van-gray-4);--van-uploader-text-color:var(--van-text-color-2);--van-uploader-text-font-size:var(--van-font-size-sm);--van-uploader-upload-background-color:var(--van-gray-1);--van-uploader-upload-active-color:var(--van-active-color);--van-uploader-delete-color:var(--van-white);--van-uploader-delete-icon-size:14px;--van-uploader-delete-background-color:rgba(0, 0, 0, 0.7);--van-uploader-file-background-color:var(--van-background-color);--van-uploader-file-icon-size:20px;--van-uploader-file-icon-color:var(--van-gray-7);--van-uploader-file-name-padding:0 var(--van-padding-base);--van-uploader-file-name-margin-top:var(--van-padding-xs);--van-uploader-file-name-font-size:var(--van-font-size-sm);--van-uploader-file-name-text-color:var(--van-gray-7);--van-uploader-mask-text-color:var(--van-white);--van-uploader-mask-background-color:rgba(50, 50, 51, 0.88);--van-uploader-mask-icon-size:22px;--van-uploader-mask-message-font-size:var(--van-font-size-sm);--van-uploader-mask-message-line-height:var(--van-line-height-xs);--van-uploader-loading-icon-size:22px;--van-uploader-loading-icon-color:var(--van-white);--van-uploader-disabled-opacity:var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background-color)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}
+:root{--van-uploader-size: 80px;--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background-color: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background-color: rgba(0, 0, 0, .7);--van-uploader-file-background-color: var(--van-background-color);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background-color: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background-color)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}