@epic-designer/antd 1.0.5

package/dist/chunks/uploadImage.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+const vue = require('vue');
+const epicDesigner = require('epic-designer');
+const antDesignVue = require('ant-design-vue');
+
+const _hoisted_1 = { class: "epic-upload-image" };
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "uploadImage",
+  props: {
+    maxCount: { type: Number, required: false, default: 99 },
+    modelValue: { type: String, required: false, default: "" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const formItemContext = antDesignVue.Form.useInjectFormItemContext();
+    const attrs = vue.useAttrs();
+    const fileList = vue.ref([]);
+    let urlString = "";
+    const imgUrl = vue.ref("");
+    const visible = vue.ref(false);
+    const setVisible = (value) => {
+      visible.value = value;
+    };
+    vue.watch(
+      () => fileList.value,
+      (list) => {
+        urlString = list.filter((file) => file.status === "done").map((file) => file.url).join(",");
+        emits("update:modelValue", urlString);
+        emits("change", urlString);
+        formItemContext.onFieldChange();
+      }
+    );
+    vue.watch(
+      () => props.modelValue,
+      (modelValue) => {
+        if (urlString === modelValue) return;
+        if (modelValue === "") {
+          fileList.value = [];
+          return;
+        }
+        if (modelValue && fileList.value) {
+          fileList.value = modelValue.split(",").map((url) => ({
+            name: url,
+            status: "done",
+            uid: epicDesigner.getUUID(),
+            url
+          }));
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    function handleUpdate(e) {
+      vue.nextTick(() => {
+        fileList.value = e;
+      });
+    }
+    const handleChange = (info) => {
+      var _a, _b;
+      if (info.file.status === "uploading") {
+        return;
+      }
+      if (info.file.status === "done") {
+        const url = (_b = (_a = info.file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url;
+        if (!info.file.url && !url) {
+          info.file.status = "error";
+          antDesignVue.message.error("\u4E0A\u4F20\u5931\u8D25");
+          return;
+        }
+        info.file.url = url;
+        info.file.thumbUrl = url;
+      }
+      if (info.file.status === "error") {
+        antDesignVue.message.error("upload error");
+      }
+    };
+    const beforeUpload = () => {
+    };
+    const getUploadProps = vue.computed(() => {
+      var _a;
+      return {
+        ...attrs,
+        accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
+        headers: (_a = epicDesigner.pluginManager.global.axiosConfig) == null ? void 0 : _a.headers,
+        "onBefore-upload": beforeUpload,
+        onChange: handleChange,
+        onPreview: handlePreview,
+        "file-list": fileList.value,
+        "list-type": "picture-card",
+        "onUpdate:file-list": handleUpdate
+      };
+    });
+    function handlePreview(e) {
+      if (!e.url) return;
+      imgUrl.value = e.url;
+      setVisible(true);
+    }
+    function previewError() {
+      if (!imgUrl.value) return;
+      antDesignVue.message.error("\u56FE\u7247\u5730\u5740\u65E0\u6CD5\u8BBF\u95EE!");
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(
+          vue.unref(antDesignVue.Upload),
+          vue.normalizeProps(vue.guardReactiveProps(getUploadProps.value)),
+          {
+            default: vue.withCtx(() => {
+              var _a, _b;
+              return [
+                ((_b = (_a = fileList.value) == null ? void 0 : _a.length) != null ? _b : 0) < props.maxCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [..._cache[0] || (_cache[0] = [
+                  vue.createElementVNode(
+                    "span",
+                    { class: "icon--epic icon--epic--cloud-upload-outlined mr-2px text-$epic-text-main text-lg" },
+                    null,
+                    -1
+                    /* CACHED */
+                  ),
+                  vue.createElementVNode(
+                    "div",
+                    { class: "ant-upload-text" },
+                    "\u70B9\u51FB\u4E0A\u4F20",
+                    -1
+                    /* CACHED */
+                  )
+                ])])) : vue.createCommentVNode("v-if", true)
+              ];
+            }),
+            _: 1
+            /* STABLE */
+          },
+          16
+          /* FULL_PROPS */
+        ),
+        vue.createVNode(vue.unref(antDesignVue.Image), {
+          style: { "display": "none" },
+          src: imgUrl.value,
+          preview: {
+            visible: visible.value,
+            onVisibleChange: setVisible
+          },
+          onError: previewError
+        }, null, 8, ["src", "preview"])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/chunks/uploadImage.mjs

@@ -0,0 +1,150 @@
+import { defineComponent, useAttrs, ref, watch, computed, createElementBlock, openBlock, createVNode, unref, normalizeProps, guardReactiveProps, withCtx, createCommentVNode, createElementVNode, nextTick } from 'vue';
+import { getUUID, pluginManager } from 'epic-designer';
+import { Form, Upload, Image, message } from 'ant-design-vue';
+
+const _hoisted_1 = { class: "epic-upload-image" };
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "uploadImage",
+  props: {
+    maxCount: { type: Number, required: false, default: 99 },
+    modelValue: { type: String, required: false, default: "" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const formItemContext = Form.useInjectFormItemContext();
+    const attrs = useAttrs();
+    const fileList = ref([]);
+    let urlString = "";
+    const imgUrl = ref("");
+    const visible = ref(false);
+    const setVisible = (value) => {
+      visible.value = value;
+    };
+    watch(
+      () => fileList.value,
+      (list) => {
+        urlString = list.filter((file) => file.status === "done").map((file) => file.url).join(",");
+        emits("update:modelValue", urlString);
+        emits("change", urlString);
+        formItemContext.onFieldChange();
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (modelValue) => {
+        if (urlString === modelValue) return;
+        if (modelValue === "") {
+          fileList.value = [];
+          return;
+        }
+        if (modelValue && fileList.value) {
+          fileList.value = modelValue.split(",").map((url) => ({
+            name: url,
+            status: "done",
+            uid: getUUID(),
+            url
+          }));
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    function handleUpdate(e) {
+      nextTick(() => {
+        fileList.value = e;
+      });
+    }
+    const handleChange = (info) => {
+      var _a, _b;
+      if (info.file.status === "uploading") {
+        return;
+      }
+      if (info.file.status === "done") {
+        const url = (_b = (_a = info.file.response) == null ? void 0 : _a.data) == null ? void 0 : _b.url;
+        if (!info.file.url && !url) {
+          info.file.status = "error";
+          message.error("\u4E0A\u4F20\u5931\u8D25");
+          return;
+        }
+        info.file.url = url;
+        info.file.thumbUrl = url;
+      }
+      if (info.file.status === "error") {
+        message.error("upload error");
+      }
+    };
+    const beforeUpload = () => {
+    };
+    const getUploadProps = computed(() => {
+      var _a;
+      return {
+        ...attrs,
+        accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
+        headers: (_a = pluginManager.global.axiosConfig) == null ? void 0 : _a.headers,
+        "onBefore-upload": beforeUpload,
+        onChange: handleChange,
+        onPreview: handlePreview,
+        "file-list": fileList.value,
+        "list-type": "picture-card",
+        "onUpdate:file-list": handleUpdate
+      };
+    });
+    function handlePreview(e) {
+      if (!e.url) return;
+      imgUrl.value = e.url;
+      setVisible(true);
+    }
+    function previewError() {
+      if (!imgUrl.value) return;
+      message.error("\u56FE\u7247\u5730\u5740\u65E0\u6CD5\u8BBF\u95EE!");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(
+          unref(Upload),
+          normalizeProps(guardReactiveProps(getUploadProps.value)),
+          {
+            default: withCtx(() => {
+              var _a, _b;
+              return [
+                ((_b = (_a = fileList.value) == null ? void 0 : _a.length) != null ? _b : 0) < props.maxCount ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[0] || (_cache[0] = [
+                  createElementVNode(
+                    "span",
+                    { class: "icon--epic icon--epic--cloud-upload-outlined mr-2px text-$epic-text-main text-lg" },
+                    null,
+                    -1
+                    /* CACHED */
+                  ),
+                  createElementVNode(
+                    "div",
+                    { class: "ant-upload-text" },
+                    "\u70B9\u51FB\u4E0A\u4F20",
+                    -1
+                    /* CACHED */
+                  )
+                ])])) : createCommentVNode("v-if", true)
+              ];
+            }),
+            _: 1
+            /* STABLE */
+          },
+          16
+          /* FULL_PROPS */
+        ),
+        createVNode(unref(Image), {
+          style: { "display": "none" },
+          src: imgUrl.value,
+          preview: {
+            visible: visible.value,
+            onVisibleChange: setVisible
+          },
+          onError: previewError
+        }, null, 8, ["src", "preview"])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };