epic-designer-cjh/dist/attributeView-df81a326.js

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

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