zartui 3.0.2 → 3.0.3

package/lib/uploader/Uploader.d.ts

@@ -0,0 +1,214 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { Interceptor } from '../utils';
+import type { Numeric } from '../utils';
+import type { ImagePreviewOptions } from '../image-preview';
+import type { ImageFit } from '../image';
+import type { UploaderMaxSize, UploaderAfterRead, UploaderBeforeRead, UploaderResultType, UploaderFileListItem } from './types';
+export declare const uploaderProps: {
+    name: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    accept: {
+        type: PropType<string>;
+        default: string;
+    };
+    capture: StringConstructor;
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    lazyLoad: BooleanConstructor;
+    maxCount: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    imageFit: {
+        type: PropType<ImageFit>;
+        default: ImageFit;
+    };
+    resultType: {
+        type: PropType<UploaderResultType>;
+        default: UploaderResultType;
+    };
+    uploadIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    uploadText: StringConstructor;
+    deletable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    afterRead: PropType<UploaderAfterRead>;
+    showUpload: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: {
+        type: PropType<UploaderFileListItem[]>;
+        default: () => UploaderFileListItem[];
+    };
+    beforeRead: PropType<UploaderBeforeRead>;
+    beforeDelete: PropType<Interceptor>;
+    previewSize: PropType<Numeric | [Numeric, Numeric]>;
+    previewImage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    previewOptions: PropType<Partial<ImagePreviewOptions>>;
+    previewFullImage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    maxSize: {
+        type: PropType<UploaderMaxSize>;
+        default: number;
+    };
+};
+export declare type UploaderProps = ExtractPropTypes<typeof uploaderProps>;
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    accept: {
+        type: PropType<string>;
+        default: string;
+    };
+    capture: StringConstructor;
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    lazyLoad: BooleanConstructor;
+    maxCount: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    imageFit: {
+        type: PropType<ImageFit>;
+        default: ImageFit;
+    };
+    resultType: {
+        type: PropType<UploaderResultType>;
+        default: UploaderResultType;
+    };
+    uploadIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    uploadText: StringConstructor;
+    deletable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    afterRead: PropType<UploaderAfterRead>;
+    showUpload: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: {
+        type: PropType<UploaderFileListItem[]>;
+        default: () => UploaderFileListItem[];
+    };
+    beforeRead: PropType<UploaderBeforeRead>;
+    beforeDelete: PropType<Interceptor>;
+    previewSize: PropType<Numeric | [Numeric, Numeric]>;
+    previewImage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    previewOptions: PropType<Partial<ImagePreviewOptions>>;
+    previewFullImage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    maxSize: {
+        type: PropType<UploaderMaxSize>;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    name: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    accept: {
+        type: PropType<string>;
+        default: string;
+    };
+    capture: StringConstructor;
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    lazyLoad: BooleanConstructor;
+    maxCount: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    imageFit: {
+        type: PropType<ImageFit>;
+        default: ImageFit;
+    };
+    resultType: {
+        type: PropType<UploaderResultType>;
+        default: UploaderResultType;
+    };
+    uploadIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    uploadText: StringConstructor;
+    deletable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    afterRead: PropType<UploaderAfterRead>;
+    showUpload: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: {
+        type: PropType<UploaderFileListItem[]>;
+        default: () => UploaderFileListItem[];
+    };
+    beforeRead: PropType<UploaderBeforeRead>;
+    beforeDelete: PropType<Interceptor>;
+    previewSize: PropType<Numeric | [Numeric, Numeric]>;
+    previewImage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    previewOptions: PropType<Partial<ImagePreviewOptions>>;
+    previewFullImage: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    maxSize: {
+        type: PropType<UploaderMaxSize>;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onOversize?: ((...args: any[]) => any) | undefined;
+    onClickUpload?: ((...args: any[]) => any) | undefined;
+    onClosePreview?: ((...args: any[]) => any) | undefined;
+    onClickPreview?: ((...args: any[]) => any) | undefined;
+}, {
+    name: string | number;
+    accept: string;
+    disabled: boolean;
+    modelValue: UploaderFileListItem[];
+    readonly: boolean;
+    multiple: boolean;
+    lazyLoad: boolean;
+    resultType: UploaderResultType;
+    maxCount: string | number;
+    imageFit: ImageFit;
+    uploadIcon: string;
+    deletable: boolean;
+    showUpload: boolean;
+    previewImage: boolean;
+    previewFullImage: boolean;
+    maxSize: UploaderMaxSize;
+}>;
+export default _default;

package/lib/uploader/Uploader.js

@@ -0,0 +1,274 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default,
+  uploaderProps: () => uploaderProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_utils2 = require("./utils");
+var import_use = require("@zartui/use");
+var import_use_expose = require("../composables/use-expose");
+var import_icon = require("../icon");
+var import_image_preview = require("../image-preview");
+var import_UploaderPreviewItem = __toESM(require("./UploaderPreviewItem"));
+const uploaderProps = {
+  name: (0, import_utils.makeNumericProp)(""),
+  accept: (0, import_utils.makeStringProp)("image/*"),
+  capture: String,
+  multiple: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  lazyLoad: Boolean,
+  maxCount: (0, import_utils.makeNumericProp)(Infinity),
+  imageFit: (0, import_utils.makeStringProp)("cover"),
+  resultType: (0, import_utils.makeStringProp)("dataUrl"),
+  uploadIcon: (0, import_utils.makeStringProp)("photograph"),
+  uploadText: String,
+  deletable: import_utils.truthProp,
+  afterRead: Function,
+  showUpload: import_utils.truthProp,
+  modelValue: (0, import_utils.makeArrayProp)(),
+  beforeRead: Function,
+  beforeDelete: Function,
+  previewSize: [Number, String, Array],
+  previewImage: import_utils.truthProp,
+  previewOptions: Object,
+  previewFullImage: import_utils.truthProp,
+  maxSize: {
+    type: [Number, String, Function],
+    default: Infinity
+  }
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name: import_utils2.name,
+  props: uploaderProps,
+  emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const inputRef = (0, import_vue2.ref)();
+    const urls = [];
+    const getDetail = (index = props.modelValue.length) => ({
+      name: props.name,
+      index
+    });
+    const resetInput = () => {
+      if (inputRef.value) {
+        inputRef.value.value = "";
+      }
+    };
+    const onAfterRead = (items) => {
+      resetInput();
+      if ((0, import_utils2.isOversize)(items, props.maxSize)) {
+        if (Array.isArray(items)) {
+          const result = (0, import_utils2.filterFiles)(items, props.maxSize);
+          items = result.valid;
+          emit("oversize", result.invalid, getDetail());
+          if (!items.length) {
+            return;
+          }
+        } else {
+          emit("oversize", items, getDetail());
+          return;
+        }
+      }
+      items = (0, import_vue2.reactive)(items);
+      emit("update:modelValue", [...props.modelValue, ...(0, import_utils.toArray)(items)]);
+      if (props.afterRead) {
+        props.afterRead(items, getDetail());
+      }
+    };
+    const readFile = (files) => {
+      const {
+        maxCount,
+        modelValue,
+        resultType
+      } = props;
+      if (Array.isArray(files)) {
+        const remainCount = +maxCount - modelValue.length;
+        if (files.length > remainCount) {
+          files = files.slice(0, remainCount);
+        }
+        Promise.all(files.map((file) => (0, import_utils2.readFileContent)(file, resultType))).then((contents) => {
+          const fileList = files.map((file, index) => {
+            const result = {
+              file,
+              status: "",
+              message: ""
+            };
+            if (contents[index]) {
+              result.content = contents[index];
+            }
+            return result;
+          });
+          onAfterRead(fileList);
+        });
+      } else {
+        (0, import_utils2.readFileContent)(files, resultType).then((content) => {
+          const result = {
+            file: files,
+            status: "",
+            message: ""
+          };
+          if (content) {
+            result.content = content;
+          }
+          onAfterRead(result);
+        });
+      }
+    };
+    const onChange = (event) => {
+      const {
+        files
+      } = event.target;
+      if (props.disabled || !files || !files.length) {
+        return;
+      }
+      const file = files.length === 1 ? files[0] : [].slice.call(files);
+      if (props.beforeRead) {
+        const response = props.beforeRead(file, getDetail());
+        if (!response) {
+          resetInput();
+          return;
+        }
+        if ((0, import_utils.isPromise)(response)) {
+          response.then((data) => {
+            if (data) {
+              readFile(data);
+            } else {
+              readFile(file);
+            }
+          }).catch(resetInput);
+          return;
+        }
+      }
+      readFile(file);
+    };
+    let imagePreview;
+    const onClosePreview = () => emit("closePreview");
+    const previewImage = (item) => {
+      if (props.previewFullImage) {
+        const imageFiles = props.modelValue.filter(import_utils2.isImageFile);
+        const images = imageFiles.map((item2) => {
+          if (item2.file && !item2.url && item2.status !== "failed") {
+            item2.url = URL.createObjectURL(item2.file);
+            urls.push(item2.url);
+          }
+          return item2.url;
+        }).filter(Boolean);
+        imagePreview = (0, import_image_preview.showImagePreview)((0, import_utils.extend)({
+          images,
+          startPosition: imageFiles.indexOf(item),
+          onClose: onClosePreview
+        }, props.previewOptions));
+      }
+    };
+    const closeImagePreview = () => {
+      if (imagePreview) {
+        imagePreview.close();
+      }
+    };
+    const deleteFile = (item, index) => {
+      const fileList = props.modelValue.slice(0);
+      fileList.splice(index, 1);
+      emit("update:modelValue", fileList);
+      emit("delete", item, getDetail(index));
+    };
+    const renderPreviewItem = (item, index) => {
+      const needPickData = ["imageFit", "deletable", "previewSize", "beforeDelete"];
+      const previewData = (0, import_utils.extend)((0, import_utils.pick)(props, needPickData), (0, import_utils.pick)(item, needPickData, true));
+      return (0, import_vue.createVNode)(import_UploaderPreviewItem.default, (0, import_vue.mergeProps)({
+        "item": item,
+        "index": index,
+        "onClick": () => emit("clickPreview", item, getDetail(index)),
+        "onDelete": () => deleteFile(item, index),
+        "onPreview": () => previewImage(item)
+      }, (0, import_utils.pick)(props, ["name", "lazyLoad"]), previewData), (0, import_utils.pick)(slots, ["preview-cover", "preview-delete"]));
+    };
+    const renderPreviewList = () => {
+      if (props.previewImage) {
+        return props.modelValue.map(renderPreviewItem);
+      }
+    };
+    const onClickUpload = (event) => emit("clickUpload", event);
+    const renderUpload = () => {
+      if (props.modelValue.length >= props.maxCount || !props.showUpload) {
+        return;
+      }
+      const Input = props.readonly ? null : (0, import_vue.createVNode)("input", {
+        "ref": inputRef,
+        "type": "file",
+        "class": (0, import_utils2.bem)("input"),
+        "accept": props.accept,
+        "capture": props.capture,
+        "multiple": props.multiple,
+        "disabled": props.disabled,
+        "onChange": onChange
+      }, null);
+      if (slots.default) {
+        return (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils2.bem)("input-wrapper"),
+          "onClick": onClickUpload
+        }, [slots.default(), Input]);
+      }
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils2.bem)("upload", {
+          readonly: props.readonly
+        }),
+        "style": (0, import_utils.getSizeStyle)(props.previewSize),
+        "onClick": onClickUpload
+      }, [(0, import_vue.createVNode)(import_icon.Icon, {
+        "name": props.uploadIcon,
+        "class": (0, import_utils2.bem)("upload-icon")
+      }, null), props.uploadText && (0, import_vue.createVNode)("span", {
+        "class": (0, import_utils2.bem)("upload-text")
+      }, [props.uploadText]), Input]);
+    };
+    const chooseFile = () => {
+      if (inputRef.value && !props.disabled) {
+        inputRef.value.click();
+      }
+    };
+    (0, import_vue2.onBeforeUnmount)(() => {
+      urls.forEach((url) => URL.revokeObjectURL(url));
+    });
+    (0, import_use_expose.useExpose)({
+      chooseFile,
+      closeImagePreview
+    });
+    (0, import_use.useCustomFieldValue)(() => props.modelValue);
+    return () => (0, import_vue.createVNode)("div", {
+      "class": (0, import_utils2.bem)()
+    }, [(0, import_vue.createVNode)("div", {
+      "class": (0, import_utils2.bem)("wrapper", {
+        disabled: props.disabled
+      })
+    }, [renderPreviewList(), renderUpload()])]);
+  }
+});

package/lib/uploader/UploaderPreviewItem.d.ts

@@ -0,0 +1,36 @@
+import type { PropType } from 'vue';
+import type { Numeric, Interceptor } from '../utils';
+import { ImageFit } from '../image';
+import type { UploaderFileListItem } from './types';
+declare const _default: import("vue").DefineComponent<{
+    name: (NumberConstructor | StringConstructor)[];
+    item: {
+        type: PropType<UploaderFileListItem>;
+        required: true;
+    };
+    index: NumberConstructor;
+    imageFit: PropType<ImageFit>;
+    lazyLoad: BooleanConstructor;
+    deletable: BooleanConstructor;
+    previewSize: PropType<Numeric | [Numeric, Numeric]>;
+    beforeDelete: PropType<Interceptor>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "preview" | "delete", 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: PropType<Numeric | [Numeric, Numeric]>;
+    beforeDelete: PropType<Interceptor>;
+}>> & {
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onPreview?: ((...args: any[]) => any) | undefined;
+}, {
+    lazyLoad: boolean;
+    deletable: boolean;
+}>;
+export default _default;

package/lib/uploader/UploaderPreviewItem.js

@@ -0,0 +1,147 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("./utils");
+var import_utils2 = require("../utils");
+var import_icon = require("../icon");
+var import_image = require("../image");
+var import_loading = require("../loading");
+var stdin_default = (0, import_vue2.defineComponent)({
+  props: {
+    name: import_utils2.numericProp,
+    item: (0, import_utils2.makeRequiredProp)(Object),
+    index: Number,
+    imageFit: String,
+    lazyLoad: Boolean,
+    deletable: Boolean,
+    previewSize: [Number, String, Array],
+    beforeDelete: Function
+  },
+  emits: ["delete", "preview"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const renderMask = () => {
+      const {
+        status,
+        message
+      } = props.item;
+      if (status === "uploading" || status === "failed") {
+        const MaskIcon = status === "failed" ? (0, import_vue.createVNode)(import_icon.Icon, {
+          "name": "close",
+          "class": (0, import_utils.bem)("mask-icon")
+        }, null) : (0, import_vue.createVNode)(import_loading.Loading, {
+          "class": (0, import_utils.bem)("loading")
+        }, null);
+        const showMessage = (0, import_utils2.isDef)(message) && message !== "";
+        return (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils.bem)("mask")
+        }, [MaskIcon, showMessage && (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils.bem)("mask-message")
+        }, [message])]);
+      }
+    };
+    const onDelete = (event) => {
+      const {
+        name,
+        item,
+        index,
+        beforeDelete
+      } = props;
+      event.stopPropagation();
+      (0, import_utils2.callInterceptor)(beforeDelete, {
+        args: [item, {
+          name,
+          index
+        }],
+        done: () => emit("delete")
+      });
+    };
+    const onPreview = () => emit("preview");
+    const renderDeleteIcon = () => {
+      if (props.deletable && props.item.status !== "uploading") {
+        const slot = slots["preview-delete"];
+        return (0, import_vue.createVNode)("div", {
+          "role": "button",
+          "class": (0, import_utils.bem)("preview-delete", {
+            shadow: !slot
+          }),
+          "tabindex": 0,
+          "aria-label": (0, import_utils.t)("delete"),
+          "onClick": onDelete
+        }, [slot ? slot() : (0, import_vue.createVNode)(import_icon.Icon, {
+          "name": "cross",
+          "class": (0, import_utils.bem)("preview-delete-icon")
+        }, null)]);
+      }
+    };
+    const renderCover = () => {
+      if (slots["preview-cover"]) {
+        const {
+          index,
+          item
+        } = props;
+        return (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils.bem)("preview-cover")
+        }, [slots["preview-cover"]((0, import_utils2.extend)({
+          index
+        }, item))]);
+      }
+    };
+    const renderPreview = () => {
+      const {
+        item,
+        lazyLoad,
+        imageFit,
+        previewSize
+      } = props;
+      if ((0, import_utils.isImageFile)(item)) {
+        return (0, import_vue.createVNode)(import_image.Image, {
+          "fit": imageFit,
+          "src": item.content || item.url,
+          "class": (0, import_utils.bem)("preview-image"),
+          "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
+          "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
+          "lazyLoad": lazyLoad,
+          "onClick": onPreview
+        }, {
+          default: renderCover
+        });
+      }
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils.bem)("file"),
+        "style": (0, import_utils2.getSizeStyle)(props.previewSize)
+      }, [(0, import_vue.createVNode)(import_icon.Icon, {
+        "class": (0, import_utils.bem)("file-icon"),
+        "name": "description"
+      }, null), (0, import_vue.createVNode)("div", {
+        "class": [(0, import_utils.bem)("file-name"), "zt-ellipsis"]
+      }, [item.file ? item.file.name : item.url]), renderCover()]);
+    };
+    return () => (0, import_vue.createVNode)("div", {
+      "class": (0, import_utils.bem)("preview")
+    }, [renderPreview(), renderMask(), renderDeleteIcon()]);
+  }
+});

package/lib/uploader/index.css

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