@form-create/component-elm-frame/dist/index.es.js

@form-create/element-ui 内置组件

/*!
 * FormCreate 低代码表单渲染器
 * @form-create/component-elm-frame v2.6.3
 * (c) 2018-2024 xaboy
 * Github https://github.com/xaboy/form-create
 * Site https://form-create.com/
 * Released under the MIT License.
 */
(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("._fc-frame .fc-files img{width:100%;height:100%;display:inline-block;vertical-align:top}._fc-frame .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame .fc-upload-cover{opacity:0;position:absolute;inset:0;background:#0009;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame .fc-upload-cover i{color:#fff;font-size:20px;cursor:pointer;margin:0 2px}._fc-frame .fc-files:hover .fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame .fc-upload-btn,.fc-files{display:inline-block;width:58px;height:58px;text-align:center;line-height:58px;border:1px solid #c0ccda;border-radius:4px;overflow:hidden;background:#fff;position:relative;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px #0000001a;margin-right:4px;-webkit-box-sizing:border-box;box-sizing:border-box}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
var k = Object.defineProperty, g = Object.defineProperties;
var v = Object.getOwnPropertyDescriptors;
var u = Object.getOwnPropertySymbols;
var $ = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
var f = (e, t, i) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, d = (e, t) => {
  for (var i in t || (t = {}))
    $.call(t, i) && f(e, i, t[i]);
  if (u)
    for (var i of u(t))
      I.call(t, i) && f(e, i, t[i]);
  return e;
}, p = (e, t) => g(e, v(t));
function w(e) {
  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
function c() {
  return c = Object.assign ? Object.assign.bind() : function(e) {
    for (var t, i = 1; i < arguments.length; i++) for (var s in t = arguments[i], t) Object.prototype.hasOwnProperty.call(t, s) && (e[s] = t[s]);
    return e;
  }, c.apply(this, arguments);
}
var B = ["attrs", "props", "domProps"], O = ["class", "style", "directives"], L = ["on", "nativeOn"], S = function(e) {
  return e.reduce(function(t, i) {
    for (var s in i) if (!t[s]) t[s] = i[s];
    else if (B.indexOf(s) !== -1) t[s] = c({}, t[s], i[s]);
    else if (O.indexOf(s) !== -1) {
      var o = t[s] instanceof Array ? t[s] : [t[s]], r = i[s] instanceof Array ? i[s] : [i[s]];
      t[s] = [].concat(o, r);
    } else if (L.indexOf(s) !== -1)
      for (var n in i[s]) if (t[s][n]) {
        var h = t[s][n] instanceof Array ? t[s][n] : [t[s][n]], y = i[s][n] instanceof Array ? i[s][n] : [i[s][n]];
        t[s][n] = [].concat(h, y);
      } else t[s][n] = i[s][n];
    else if (s === "hook") for (var l in i[s]) t[s][l] = t[s][l] ? E(t[s][l], i[s][l]) : i[s][l];
    else t[s] = i[s];
    return t;
  }, {});
}, E = function(e, t) {
  return function() {
    e && e.apply(this, arguments), t && t.apply(this, arguments);
  };
}, M = S;
const a = /* @__PURE__ */ w(M);
function m(e) {
  return Array.isArray(e) ? e : [null, void 0, ""].indexOf(e) > -1 ? [] : [e];
}
const x = "fcFrame", C = {
  name: x,
  props: {
    formCreateInject: {
      type: Object,
      required: !0
    },
    type: {
      type: String,
      default: "input"
    },
    field: String,
    helper: {
      type: Boolean,
      default: !0
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    src: {
      type: String,
      required: !0
    },
    icon: {
      type: String,
      default: "el-icon-upload2"
    },
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "370px"
    },
    maxLength: {
      type: Number,
      default: 0
    },
    okBtnText: {
      type: String,
      default: "确定"
    },
    closeBtnText: {
      type: String,
      default: "关闭"
    },
    modalTitle: String,
    handleIcon: {
      type: [String, Boolean],
      default: void 0
    },
    title: String,
    allowRemove: {
      type: Boolean,
      default: !0
    },
    onOpen: {
      type: Function,
      default: () => {
      }
    },
    onOk: {
      type: Function,
      default: () => {
      }
    },
    onCancel: {
      type: Function,
      default: () => {
      }
    },
    onLoad: {
      type: Function,
      default: () => {
      }
    },
    onBeforeRemove: {
      type: Function,
      default: () => {
      }
    },
    onRemove: {
      type: Function,
      default: () => {
      }
    },
    onHandle: {
      type: Function,
      default(e) {
        this.previewImage = this.getSrc(e), this.previewVisible = !0;
      }
    },
    modal: {
      type: Object,
      default: () => ({})
    },
    srcKey: {
      type: [String, Number]
    },
    value: [Array, String, Number, Object],
    previewMask: void 0,
    footer: {
      type: Boolean,
      default: !0
    },
    reload: {
      type: Boolean,
      default: !0
    },
    closeBtn: {
      type: Boolean,
      default: !0
    },
    okBtn: {
      type: Boolean,
      default: !0
    }
  },
  data() {
    return {
      fileList: m(this.value),
      previewVisible: !1,
      frameVisible: !1,
      previewImage: ""
    };
  },
  watch: {
    value(e) {
      this.fileList = m(e);
    },
    fileList(e) {
      const t = this.maxLength === 1 ? e[0] || "" : e;
      this.$emit("input", t), this.$emit("change", t);
    },
    src(e) {
      this.modalVm && (this.modalVm.src = e);
    }
  },
  methods: {
    key(e) {
      return e;
    },
    closeModel(e) {
      this.$emit(e ? "$close" : "$ok"), this.reload && (this.$off("$ok"), this.$off("$close")), this.frameVisible = !1;
    },
    handleCancel() {
      this.previewVisible = !1;
    },
    showModel() {
      this.disabled || this.onOpen() === !1 || (this.frameVisible = !0);
    },
    makeInput() {
      const e = this.$createElement, t = {
        type: "text",
        value: this.fileList.map((i) => this.getSrc(i)).toString(),
        readonly: !0
      };
      return e("ElInput", a([{}, {
        props: t
      }, {
        key: this.key("input")
      }]), [this.fileList.length ? e("i", {
        slot: "suffix",
        class: "el-input__icon el-icon-circle-close",
        on: {
          click: () => this.fileList = []
        }
      }) : null, e("ElButton", a([{
        attrs: {
          icon: this.icon
        }
      }, {
        on: {
          click: () => this.showModel()
        }
      }, {
        slot: "append"
      }]))]);
    },
    makeGroup(e) {
      const t = this.$createElement;
      return (!this.maxLength || this.fileList.length < this.maxLength) && e.push(this.makeBtn()), t("div", {
        key: this.key("group")
      }, [...e]);
    },
    makeItem(e, t) {
      const i = this.$createElement;
      return i("div", {
        class: "fc-files",
        key: this.key("file" + e)
      }, [...t]);
    },
    valid(e) {
      const t = this.formCreateInject.field || this.field;
      if (t && e !== t)
        throw new Error("[frame]无效的字段值");
    },
    makeIcons(e, t) {
      const i = this.$createElement;
      if (this.handleIcon !== !1 || this.allowRemove === !0) {
        const s = [];
        return (this.type !== "file" && this.handleIcon !== !1 || this.type === "file" && this.handleIcon) && s.push(this.makeHandleIcon(e, t)), this.allowRemove && s.push(this.makeRemoveIcon(e, t)), i("div", {
          class: "fc-upload-cover",
          key: this.key("uc")
        }, [s]);
      }
    },
    makeHandleIcon(e, t) {
      const i = this.$createElement;
      return i("i", {
        class: this.handleIcon === !0 || this.handleIcon === void 0 ? "el-icon-view" : this.handleIcon,
        on: {
          click: () => this.handleClick(e)
        },
        key: this.key("hi" + t)
      });
    },
    makeRemoveIcon(e, t) {
      const i = this.$createElement;
      return i("i", {
        class: "el-icon-delete",
        on: {
          click: () => this.handleRemove(e)
        },
        key: this.key("ri" + t)
      });
    },
    makeFiles() {
      const e = this.$createElement;
      return this.makeGroup(this.fileList.map((t, i) => this.makeItem(i, [e("i", {
        class: "el-icon-tickets",
        on: {
          click: () => this.handleClick(t)
        }
      }), this.makeIcons(t, i)])));
    },
    makeImages() {
      const e = this.$createElement;
      return this.makeGroup(this.fileList.map((t, i) => this.makeItem(i, [e("img", {
        attrs: {
          src: this.getSrc(t)
        }
      }), this.makeIcons(t, i)])));
    },
    makeBtn() {
      const e = this.$createElement;
      return e("div", {
        class: "fc-upload-btn",
        on: {
          click: () => this.showModel()
        },
        key: this.key("btn")
      }, [e("i", {
        class: this.icon
      })]);
    },
    handleClick(e) {
      return this.onHandle(e);
    },
    handleRemove(e) {
      this.disabled || this.onBeforeRemove(e) !== !1 && (this.fileList.splice(this.fileList.indexOf(e), 1), this.onRemove(e));
    },
    getSrc(e) {
      return this.srcKey ? e[this.srcKey] : e;
    },
    frameLoad(e) {
      this.onLoad(e);
      try {
        this.helper === !0 && (e.form_create_helper = {
          api: this.formCreateInject.api,
          close: (t) => {
            this.valid(t), this.closeModel();
          },
          set: (t, i) => {
            this.valid(t), this.disabled || this.$emit("input", i);
          },
          get: (t) => (this.valid(t), this.value),
          onOk: (t) => this.$on("$ok", t),
          onClose: (t) => this.$on("$close", t)
        });
      } catch (t) {
        console.log(t);
      }
    },
    makeFooter() {
      const e = this.$createElement, {
        okBtnText: t,
        closeBtnText: i,
        closeBtn: s,
        okBtn: o,
        footer: r
      } = this.$props;
      if (r)
        return e("div", {
          slot: "footer"
        }, [s ? e("ElButton", {
          on: {
            click: () => this.onCancel() !== !1 && (this.frameVisible = !1)
          }
        }, [i]) : null, o ? e("ElButton", {
          attrs: {
            type: "primary"
          },
          on: {
            click: () => this.onOk() !== !1 && this.closeModel()
          }
        }, [t]) : null]);
    }
  },
  render() {
    const e = arguments[0], t = this.type;
    let i;
    t === "input" ? i = this.makeInput() : t === "image" ? i = this.makeImages() : i = this.makeFiles();
    const {
      width: s = "30%",
      height: o,
      src: r,
      title: n,
      modalTitle: h
    } = this.$props;
    return this.$nextTick(() => {
      this.$refs.frame && this.frameLoad(this.$refs.frame.contentWindow || {});
    }), e("div", {
      class: "_fc-frame"
    }, [i, e("el-dialog", a([{}, {
      props: {
        appendToBody: !0,
        modal: this.previewMask,
        title: h,
        visible: this.previewVisible
      }
    }, {
      on: {
        close: this.handleCancel
      }
    }]), [e("img", {
      style: "width: 100%",
      attrs: {
        src: this.previewImage
      }
    })]), e("el-dialog", a([{}, {
      props: p(d({
        width: s,
        title: n,
        appendToBody: !0
      }, this.modal), {
        visible: this.frameVisible
      })
    }, {
      on: {
        close: () => this.closeModel(!0)
      }
    }]), [this.frameVisible || !this.reload ? e("iframe", {
      ref: "frame",
      attrs: {
        src: r,
        frameBorder: "0"
      },
      style: {
        height: o,
        border: "0 none",
        width: "100%"
      }
    }) : null, this.makeFooter()])]);
  },
  mounted() {
    this.$on("fc.closeModal", this.closeModal);
  }
};
export {
  C as default
};