form-designer-xinyi/dist/attributeView-CRyC2Kaa.js

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

import { defineComponent as _, inject as p, computed as k, ref as w, watch as S, openBlock as s, createElementBlock as c, Fragment as V, renderList as C, normalizeClass as d, createElementVNode as f, toDisplayString as N, createVNode as P, unref as h, createCommentVNode as x, nextTick as D } from "vue";
import { _ as E } from "./index-CixHJfR9.js";
import { p as I, h as z, s as v, r as A } from "./revoke-iScTU0eW.js";
const B = ["title"], M = /* @__PURE__ */ _({
  __name: "attributeView",
  setup(F) {
    const r = p("designer"), u = p("pageSchema"), m = I.getComponentConfings(), n = k(() => r.state.checkedNode);
    function b(t) {
      var a;
      return typeof t.show == "boolean" ? t.show : typeof t.show == "function" ? (a = t.show) == null ? void 0 : a.call(t, { values: n.value }) : !0;
    }
    const l = w([]);
    S(() => {
      var t;
      return (t = r.state.checkedNode) == null ? void 0 : t.type;
    }, () => {
      var o, e;
      const t = (o = r.state.checkedNode) == null ? void 0 : o.type;
      if (!t)
        return [];
      const a = ((e = m[t]) == null ? void 0 : e.config.attribute) ?? [];
      l.value = [
        {
          label: "组件ID",
          type: "input",
          field: "id",
          componentProps: {
            disabled: !0
          }
        },
        {
          label: "标签提示",
          type: "textarea",
          field: "suffix",
          componentProps: {
            disabled: !1
          }
        },
        ...a
      ], t === "page" && l.value.push({
        label: "画布宽度",
        type: "EInputSize",
        field: "canvas.width",
        editData: u
      }, {
        label: "画布高度",
        type: "EInputSize",
        field: "canvas.height",
        editData: u
      });
    }, {
      immediate: !0
    });
    function g(t, a, o, e = n.value) {
      typeof o.onChange == "function" && o.onChange({ value: t, values: e, componentAttributes: l }), o.changeSync ? v(t, a, e) : D(() => {
        v(t, a, e);
      }), A.push(u.schemas, "编辑组件属性");
    }
    return (t, a) => {
      var o;
      return s(), c("div", {
        class: "epic-attribute-view",
        key: (o = n.value) == null ? void 0 : o.id
      }, [
        (s(!0), c(V, null, C(l.value, (e) => {
          var i;
          return s(), c("div", {
            key: e.field
          }, [
            b(e) ? (s(), c("div", {
              key: 0,
              class: d(["epic-attr-item", e.layout])
            }, [
              f("div", {
                class: "epic-attr-label",
                title: e.label
              }, N(e.label), 9, B),
              f("div", {
                class: d(["epic-attr-input", { "block!": e.layout === "vertical" }])
              }, [
                P(h(E), {
                  componentSchema: { ...e, componentProps: { ...e.componentProps, ...e.field === "componentProps.defaultValue" ? (i = n.value) == null ? void 0 : i.componentProps : {}, input: !1, field: void 0, hidden: !1 }, show: !0, noFormItem: !0 },
                  "model-value": h(z)(e.field, e.editData ?? n.value),
                  "onUpdate:modelValue": (y) => g(y, e.field, e, e.editData)
                }, null, 8, ["componentSchema", "model-value", "onUpdate:modelValue"])
              ], 2)
            ], 2)) : x("", !0)
          ]);
        }), 128))
      ]);
    };
  }
});
export {
  M as default
};