@farris/ui-vue/components/external-container/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as N, createVNode as u, inject as C, ref as y, createTextVNode as M, computed as B, watch as D, onMounted as E, Fragment as U } from "vue";
import { resolveAppearance as $, createPropsResolver as O } from "../dynamic-resolver/index.esm.js";
import { DgControl as J, useDesignerComponent as q, FDesignerItem as z } from "../designer-canvas/index.esm.js";
import { FormSchemaRepositorySymbol as R } from "../common/index.esm.js";
import { BaseControlProperty as A } from "../property-panel/index.esm.js";
import { FSchemaSelector as L } from "../schema-selector/index.esm.js";
import { FNotifyService as H } from "../notify/index.esm.js";
const K = /* @__PURE__ */ new Map([
  ["appearance", $]
]);
function W(a, t, e, n) {
  const o = e.parentComponentInstance;
  return o && n && (o.schema.type === J["list-nav"].type ? t.appearance = {
    class: "position-relative h-100"
  } : t.appearance = {
    class: "position-relative",
    style: "height:300px"
  }), t;
}
const G = "https://json-schema.org/draft/2020-12/schema", Q = "https://farris-design.gitee.io/external-container.schema.json", X = "external-container", Y = "A Farris Visual Component", Z = "object", _ = {
  id: {
    description: "The unique identifier for a external-container",
    type: "string"
  },
  type: {
    description: "The type string of external-container",
    type: "string",
    default: "external-container"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string",
        default: ""
      }
    },
    default: {}
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  url: {
    description: "The url that load the schema from",
    type: "string"
  },
  externalComponent: {
    description: "The unique identifier for component",
    type: "ojbect",
    default: {}
  }
}, V = [
  "id",
  "type",
  "externalComponent"
], ee = {
  $schema: G,
  $id: Q,
  title: X,
  description: Y,
  type: Z,
  properties: _,
  required: V
}, w = {
  customClass: { type: String, default: "" },
  componentType: { type: String, default: "" },
  url: { type: String, default: "" },
  schema: { type: Object },
  useIsolateJs: { type: Boolean, default: !1 },
  externalComponent: { type: Object, default: {} }
}, T = O(w, ee, K, W), I = /* @__PURE__ */ N({
  name: "FExternalContainer",
  props: w,
  emits: [],
  setup(a, t) {
    return () => u("div", {
      class: a.customClass
    }, [t.slots.default && t.slots.default()]);
  }
}), te = {
  convertFrom: (a, t) => {
    var e;
    return (e = a.externalComponent) == null ? void 0 : e.name;
  },
  convertTo: (a, t, e) => {
    e && (a.externalComponent || (a.externalComponent = {}), Object.assign(a.externalComponent, {
      id: e.id,
      nameSpace: e.nameSpace,
      code: e.code,
      name: e.name,
      fileName: e.fileName,
      bizobjectID: e.bizobjectID,
      relativePath: e.relativePath,
      projectName: e.projectName
    }));
  }
};
class ne extends A {
  constructor(t, e) {
    super(t, e);
  }
  getPropertyConfig(t, e) {
    return this.propertyConfig.categories.basic = this.getBasicPropConfig(t), this.propertyConfig.categories.appearance = this.getAppearanceConfig(t), this.propertyConfig.categories.content = this.getContentConfig(), this.propertyConfig.categories.eventsEditor = this.getEventPropConfig(t), this.propertyConfig;
  }
  getContentConfig() {
    const t = this;
    return C("FLoadingService"), {
      description: "外部表单",
      title: "内容",
      properties: {
        externalComponent: {
          description: "引入的外部表单",
          title: "引入表单",
          type: "string",
          editor: {
            type: "schema-selector",
            title: "选择表单",
            requiredTip: "请选择表单",
            modalHeight: 600,
            modalWidth: 950,
            editorParams: {
              formBasicInfo: this.formSchemaUtils.getFormMetadataBasicInfo()
            },
            viewOptions: [
              { id: "recommend", title: "推荐", type: "Card", dataSource: "Recommand", pagination: !1 },
              { id: "total", title: "全部", type: "Card", dataSource: "Total", pagination: !1 }
            ],
            repositoryToken: R,
            validateFunction: (e) => {
              if (e.id)
                return t.checkFormValidtion(e);
            }
          },
          $converter: te
        }
      }
    };
  }
  checkFormValidtion(t) {
    const e = this.designerHostService.formSchemaUtils.getFormMetadataBasicInfo();
    return this.designerHostService.metadataService.getPickMetadata(e.relativePath, t).then((n) => {
      const p = JSON.parse(n == null ? void 0 : n.metadata.content).Contents, { templateId: l, name: g } = p.module;
      if (["list-component", "tree-component"].includes(l))
        return !0;
      const c = `表单【${g}】不属于组件类模板，无法被导入到当前表单。`;
      return this.designerHostService.messagerService.warning(c), !1;
    }, (n) => (this.designerHostService.exception((n == null ? void 0 : n.error) || `查询表单【${t.name}】失败`), !1));
  }
  getEventPropConfig(t) {
    const e = [
      {
        label: "onCommunication",
        name: "通讯事件"
      }
    ], n = this, o = n.eventsEditorUtils.formProperties(t, n.viewModelId, e), p = {};
    return p[n.viewModelId] = {
      type: "events-editor",
      editor: { initialData: o }
    }, {
      title: "事件",
      hideTitle: !0,
      properties: p,
      refreshPanelAfterChanged: !0,
      tabId: "commands",
      tabName: "交互",
      setPropertyRelates(l, g) {
        const c = l.propertyValue;
        delete t[n.viewModelId], c && (c.setPropertyRelates = this.setPropertyRelates, n.eventsEditorUtils.saveRelatedParameters(t, n.viewModelId, c.events, c));
      }
    };
  }
}
function oe(a, t) {
  const e = a.schema;
  function n() {
    return !1;
  }
  function o() {
    return !0;
  }
  function p() {
    return !0;
  }
  function l() {
    return !0;
  }
  function g() {
    return "position:relative;padding:0 !important;border:0;";
  }
  function c(i) {
    return new ne(i, t).getPropertyConfig(e, a.componentInstance.value);
  }
  function S() {
    t != null && t.formSchemaUtils && t.formSchemaUtils.externalFormSchema.delete(a.schema.id);
  }
  return { canAccepts: n, checkCanDeleteComponent: o, checkCanMoveComponent: p, hideNestedPaddingInDesginerView: l, getStyles: g, getPropsConfig: c, onRemoveComponent: S };
}
const ae = /* @__PURE__ */ N({
  name: "FImportExteranlSchema",
  emits: ["close", "submit"],
  setup(a, t) {
    const e = C("designer-host-service");
    let n;
    const o = y(), p = new H();
    p.globalConfig = {
      position: "top-center"
    };
    const l = e.formSchemaUtils.getFormMetadataBasicInfo(), g = y();
    async function c(r) {
      const v = e.formSchemaUtils.getFormMetadataBasicInfo();
      return e.metadataService.getPickMetadata(v.relativePath, r).then((m) => {
        const s = JSON.parse(m == null ? void 0 : m.metadata.content).Contents, {
          templateId: d,
          name: F
        } = s.module;
        if (["list-component", "tree-component"].includes(d))
          return !0;
        const h = `表单【${F}】不属于组件类模板，无法被导入到当前表单。`;
        return e.messagerService.warning(h), !1;
      }, (m) => (e.exception((m == null ? void 0 : m.error) || `查询表单【${r.name}】失败`), !1));
    }
    async function S() {
      if (!o.value) {
        p.warning("请选择表单");
        return;
      }
      if (await c(o.value))
        return !0;
    }
    function i() {
      var v, m;
      const r = {
        id: o.value.id,
        nameSpace: o.value.nameSpace,
        code: o.value.code,
        name: o.value.name,
        fileName: o.value.fileName,
        bizobjectID: o.value.bizobjectID,
        relativePath: o.value.relativePath,
        projectName: o.value.projectName
      };
      t.emit("submit", r), (v = n == null ? void 0 : n.modalRef) != null && v.value.close && ((m = n == null ? void 0 : n.modalRef) == null || m.value.close());
    }
    function f() {
      var r, v;
      (r = n == null ? void 0 : n.modalRef) != null && r.value.close && ((v = n == null ? void 0 : n.modalRef) == null || v.value.close()), t.emit("close");
    }
    function x(r) {
      o.value = r[0];
    }
    function b() {
      const r = {
        formBasicInfo: l
      };
      return () => u(L, {
        ref: g,
        injectSymbolToken: R,
        "view-type": "Tabs",
        "view-options": [{
          id: "recommend",
          title: "推荐",
          type: "Card",
          dataSource: "Recommand",
          pagination: !1
        }, {
          id: "total",
          title: "全部",
          type: "Card",
          dataSource: "Total",
          pagination: !1
        }],
        editorParams: r,
        designerHostService: e,
        "show-footer": !0,
        onSelectionChange: x,
        "validate-function": S,
        onSubmit: i,
        onCancel: f
      }, {
        default: () => [M(" ")]
      });
    }
    function P(r) {
      r.stopPropagation(), o.value = "", n = e.modalService.open({
        title: "选择表单",
        width: 950,
        height: 600,
        fitContent: !1,
        showButtons: !1,
        render: b(),
        enableEsc: !1,
        draggable: !0
      });
    }
    return () => u("div", {
      class: "f-import-exteranl-component-button no-drag"
    }, [u("div", {
      class: "f-import-exteranl-component-button-center",
      onClick: P
    }, [u("div", {
      class: "f-icon f-icon-add mr-2"
    }, null), u("span", null, [M("引入已有表单")])])]);
  }
}), ie = /* @__PURE__ */ N({
  name: "FExternalContainerDesign",
  props: w,
  emits: [],
  setup(a, t) {
    const e = y(), n = C("designer-host-service"), o = C("design-item-context"), p = oe(o, n), l = q(e, o, p), g = C("FMessageBoxService"), c = C("FLoadingService"), S = n.formSchemaUtils, i = y(a.externalComponent), f = y(), x = B(() => {
      var s, d;
      return (d = (s = f.value) == null ? void 0 : s.module) == null ? void 0 : d.components[0];
    }), b = B(() => !f.value);
    function P() {
      const s = {
        id: i.value.id,
        code: i.value.code,
        name: i.value.name,
        fileName: i.value.fileName,
        nameSpace: i.value.nameSpace,
        content: f.value,
        nameLanguage: i.value.nameLanguage
      };
      S.externalFormSchema.set(l.value.schema.id, s);
    }
    async function r() {
      var d;
      const s = n.formSchemaUtils.getFormMetadataBasicInfo();
      if ((d = i.value) != null && d.id) {
        const F = c == null ? void 0 : c.show();
        n.metadataService.getPickMetadata(s.relativePath, i.value).then((h) => {
          const k = JSON.parse(h == null ? void 0 : h.metadata.content);
          f.value = k.Contents, F.value.close(), P();
        }, (h) => {
          g.exception((h == null ? void 0 : h.error) || `查询表单【${i.value.name}】失败`), F.value.close();
        });
      }
    }
    D(() => a.externalComponent, (s) => {
      !i.value || !s || JSON.stringify(i.value) !== JSON.stringify(s) ? (i.value = s, r()) : i.value = s;
    }, {
      deep: !0
    }), E(() => {
      e.value.componentInstance = l, f.value || r();
    }), t.expose(l.value);
    function v() {
      return u(U, null, [u("div", {
        style: "position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 99;"
      }, null), u(z, {
        modelValue: x.value,
        "onUpdate:modelValue": (s) => x.value = s,
        "complete-form-schema": f.value
      }, null)]);
    }
    function m(s) {
      var d;
      l.value.schema.externalComponent = s, i.value = s, r(), (d = o == null ? void 0 : o.setupContext) == null || d.emit("dragEnd");
    }
    function j() {
      return u(ae, {
        onSubmit: m
      }, null);
    }
    return () => u("div", {
      ref: e,
      style: "height: inherit;"
    }, [b.value ? j() : v()]);
  }
}), de = {
  install(a) {
    a.component(I.name, I);
  },
  register(a, t) {
    a["external-container"] = I, t["external-container"] = T;
  },
  registerDesigner(a, t, e) {
    a["external-container"] = ie, t["external-container"] = T;
  }
};
export {
  I as FExternalContainer,
  ie as FExternalContainerDesign,
  de as default,
  w as externalContainerProps,
  T as propsResolver
};