vue-admin-core/es/formily/upload/src/index.mjs

A Component Library for Vue 3

import { defineComponent, h } from 'vue';
import { useField, FragmentComponent, connect, mapProps } from '@formily/vue';
import { UploadFilled, Plus, Upload as Upload$1 } from '@element-plus/icons-vue';
import { ElIcon, ElButton, ElUpload } from 'element-plus';

const UploadWrapper = defineComponent({
  name: "FUpload",
  props: {
    textContent: {
      type: String,
      default: ""
    },
    errorAdaptor: {
      type: Function,
      default(error) {
        return (error == null ? void 0 : error.message) || "";
      }
    },
    fileList: {
      type: Array
    }
  },
  emits: ["change"],
  setup(curProps, { slots, attrs, emit }) {
    return () => {
      const fieldRef = useField();
      const setFeedBack = (error) => {
        const message = curProps.errorAdaptor(error);
        fieldRef.value.setFeedback({
          type: "error",
          code: "UploadError",
          messages: message ? [message] : []
        });
      };
      const props = {
        ...attrs,
        onChange(file, fileList) {
          var _a;
          !((_a = attrs.onChange) == null ? void 0 : _a.call(attrs, file, fileList));
          setFeedBack();
          emit("change", fileList);
        },
        onRemove(file, fileList) {
          var _a;
          !((_a = attrs.onRemove) == null ? void 0 : _a.call(attrs, file, fileList));
          setFeedBack();
          emit("change", fileList);
        },
        onError(error, file, fileList) {
          var _a;
          !((_a = attrs.onError) == null ? void 0 : _a.call(attrs, error, file, fileList));
          setTimeout(() => {
            setFeedBack(error);
          }, 0);
        }
      };
      const children = {
        ...slots
      };
      if (!slots.default) {
        children.default = () => {
          const listType = attrs.listType;
          const drag = attrs.drag;
          if (drag) {
            return h(
              FragmentComponent,
              {},
              {
                default: () => [
                  h(
                    ElIcon,
                    { style: { fontSize: "60px", margin: "40px 0 16px" } },
                    { default: () => h(UploadFilled, { color: "gray" }, {}) }
                  ),
                  h(
                    "div",
                    { staticClass: "el-upload__text" },
                    { default: () => [curProps.textContent] }
                  )
                ]
              }
            );
          }
          if (listType === "picture-card") {
            return h(
              Plus,
              {
                style: {
                  width: "28px",
                  height: "28px",
                  marginTop: "60px",
                  color: "gray"
                }
              },
              {}
            );
          }
          return h(
            ElButton,
            {},
            {
              default: () => [
                h(Upload$1, { style: { width: "12px", height: "12px" } }),
                curProps.textContent
              ]
            }
          );
        };
      }
      return h(ElUpload, { ...props, ...attrs }, children);
    };
  }
});
const Upload = connect(UploadWrapper, mapProps({ readOnly: "readonly", value: "fileList" }));

export { Upload, Upload as default };
//# sourceMappingURL=index.mjs.map