epic-designer-gold/dist/attributeView-BqtDAlQn.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as S, inject as f, computed as V, ref as C, watchEffect as N, openBlock as s, createElementBlock as l, Fragment as E, renderList as U, normalizeClass as v, toDisplayString as B, createCommentVNode as y, createElementVNode as D, createVNode as x, unref as h, nextTick as g } from "vue";
import { _ as z } from "./index-kTMEQOpq.js";
import { p as F, i as b, s as m } from "./pluginManager-BCnrHPYv.js";
import { u as L } from "./index-B1s67XDZ.js";
const T = ["title"], $ = /* @__PURE__ */ S({
  __name: "attributeView",
  setup(j) {
    const { t: d } = L(), r = f("designer"), i = f("pageSchema"), k = f("revoke"), _ = F.getComponentConfings(), a = V(() => r.state.checkedNode);
    function w(t) {
      var o;
      return typeof t.show == "boolean" ? t.show : typeof t.show == "function" ? (o = t.show) == null ? void 0 : o.call(t, { values: a.value }) : !0;
    }
    const p = C([]);
    N(() => {
      var n, e, c;
      const t = (n = r.state.checkedNode) == null ? void 0 : n.type;
      if (!r.state.checkedNode || !t)
        return [];
      const o = ((e = _[t]) == null ? void 0 : e.config.attribute) ?? [];
      p.value = [
        {
          label: d("componentId"),
          type: "input",
          field: "id",
          componentProps: {
            disabled: !0
          }
        },
        ...o
      ], r.state.checkedNode.id === ((c = i.schemas[0]) == null ? void 0 : c.id) && p.value.push(
        {
          label: d("canvasWidth"),
          type: "EInputSize",
          field: "canvas.width",
          editData: i
        },
        {
          label: d("canvasHeight"),
          type: "EInputSize",
          field: "canvas.height",
          editData: i
        }
      );
    });
    function I(t, o, n, e = a.value) {
      typeof n.onChange == "function" && n.onChange({ value: t, values: e, componentAttributes: p }), n.changeSync ? m(e, o, t) : g(() => {
        m(e, o, t);
      }), k.push(i.schemas, d("editComponentProperties"));
    }
    function P(t, o, n = a.value) {
      g(() => {
        m(n, "componentProps.dynamicId", t);
      });
    }
    return (t, o) => {
      var n;
      return s(), l("div", {
        class: "epic-attribute-view",
        key: (n = a.value) == null ? void 0 : n.id
      }, [
        (s(!0), l(E, null, U(p.value, (e) => {
          var c;
          return s(), l("div", {
            key: e.field
          }, [
            w(e) ? (s(), l("div", {
              key: 0,
              class: v(["epic-attr-item", e.layout])
            }, [
              e.label ? (s(), l("div", {
                key: 0,
                class: "epic-attr-label",
                title: e.label
              }, B(e.label), 9, T)) : y("", !0),
              D("div", {
                class: v(["epic-attr-input", { "block!": e.layout === "vertical" }])
              }, [
                x(h(z), {
                  componentSchema: {
                    ...e,
                    componentProps: {
                      ...e.componentProps,
                      ...e.field === "componentProps.defaultValue" ? (c = a.value) == null ? void 0 : c.componentProps : {},
                      input: !1,
                      field: void 0,
                      hidden: !1
                    },
                    show: !0,
                    noFormItem: !0
                  },
                  dynamicId: h(b)(e.editData ?? a.value, "componentProps.dynamicId"),
                  "model-value": h(b)(e.editData ?? a.value, e.field),
                  "onUpdate:modelValue": (u) => I(u, e.field, e, e.editData),
                  "onUpdate:dynamicId": (u) => P(u)
                }, null, 8, ["componentSchema", "dynamicId", "model-value", "onUpdate:modelValue", "onUpdate:dynamicId"])
              ], 2)
            ], 2)) : y("", !0)
          ]);
        }), 128))
      ]);
    };
  }
});
export {
  $ as default
};