snowy-designer/dist/ui/naiveUi/upload-image/uploadImage.js

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { defineComponent as g, ref as h, watch as p, h as a, nextTick as x } from "vue";
/* empty css                                     */
import "radix-vue";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import "../../../ui-kit/base-ui/src/shadch-ui/button/index.js";
import "@vueuse/core";
import "../../../ui-kit/base-ui/src/shadch-ui/toast/index.js";
import "vuedraggable";
import { getUUID as v } from "../../../utils/src/common/string.js";
import "../../../hooks/src/store/index.js";
import "lodash";
import "../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../utils/src/request/index.js";
import { NUpload as U } from "naive-ui";
const q = g({
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(n, { attrs: s, emit: o }) {
    const i = h([]);
    let r = "";
    p(
      () => i.value,
      (t) => {
        r = t.filter((e) => e.status === "finished").map((e) => e.url).join(","), o("update:modelValue", r), o("change", r);
      }
    ), p(
      () => n.modelValue,
      (t) => {
        if (r !== t) {
          if (t === "") {
            i.value = [];
            return;
          }
          t !== null && i.value !== null && (i.value = t.split(",").map((e) => ({
            id: v(),
            name: e,
            status: "finished",
            url: e
          })));
        }
      },
      { immediate: !0 }
    );
    function m(t) {
      x(() => {
        i.value = t;
      });
    }
    const u = ({ event: t, file: e }) => {
      var l;
      const c = t == null ? void 0 : t.target, f = JSON.parse(c.response ?? "{}");
      e.url = (l = f.data) == null ? void 0 : l.url;
    }, d = ({ event: t, file: e }) => {
      console.log("OnError called->", e, t);
    };
    return () => a(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          a(
            U,
            {
              ...s,
              accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
              onError: d,
              onFinish: u,
              "file-list": i.value,
              "list-type": "image-card",
              "onUpdate:file-list": m
            },
            {
              default: () => [
                a(
                  "div",
                  { style: { "text-align": "center" } },
                  {
                    default: () => [
                      a("span", {
                        class: "icon--epic icon--epic--cloud-upload-outlined text-md mr-2px text-lg"
                      }),
                      a(
                        "div",
                        { class: "ant-upload-text" },
                        { default: () => "点击上传" }
                      )
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  }
});
export {
  q as default
};