ai-form-designer/dist/styleView-mMWvXZ8h.js

vue3+adv的设计器,可视化开发页面表单

import { defineComponent as S, inject as c, computed as u, createElementBlock as a, openBlock as s, Fragment as b, renderList as V, createCommentVNode as d, normalizeClass as C, createElementVNode as w, toDisplayString as E, createVNode as z, unref as i, nextTick as I } from "vue";
import { p as N, _ as B, q as x, s as y } from "./index-DwcJO-0a.js";
const F = ["title"], U = { class: "epic-attr-input" }, L = /* @__PURE__ */ S({
  __name: "styleView",
  setup(j) {
    const f = c("designer"), h = c("pageSchema"), m = c("revoke"), g = N.getComponentConfings(), t = u(() => f.state.checkedNode), v = [
      {
        label: "宽度",
        type: "EInputSize",
        field: "componentProps.style.width"
      },
      {
        label: "高度",
        type: "EInputSize",
        field: "componentProps.style.height"
      },
      {
        label: "内边距",
        type: "EInputSize",
        field: "componentProps.style.padding"
      },
      {
        label: "外边距",
        type: "EInputSize",
        field: "componentProps.style.margin"
      },
      {
        label: "背景色",
        type: "color-picker",
        field: "componentProps.style.backgroundColor",
        componentProps: {
          type: "color",
          style: {
            // width: '60px'
          }
        }
      },
      {
        label: "字体颜色",
        type: "color-picker",
        field: "componentProps.style.color",
        componentProps: {
          type: "color",
          style: {}
        }
      }
    ], p = u(() => {
      var n;
      if (!t.value || !t.value.type)
        return [];
      const o = ((n = g[t.value.type]) == null ? void 0 : n.config.style) ?? [];
      return [
        ...v,
        ...o
      ];
    });
    function _(o) {
      var n;
      return typeof o.show == "boolean" ? o.show : ((n = o.show) == null ? void 0 : n.call(o, { values: t.value })) ?? !0;
    }
    function k(o, n, l, e = t.value) {
      typeof l.onChange == "function" && l.onChange({ value: o, values: e, componentStyles: p }), l.changeSync ? y(e, n, o) : I(() => {
        y(e, n, o);
      }), m.push(h.schemas, "编辑组件属性");
    }
    return (o, n) => {
      var l;
      return s(), a("div", {
        class: "epic-style-view",
        key: (l = t.value) == null ? void 0 : l.id
      }, [
        (s(!0), a(b, null, V(p.value, (e) => {
          var r;
          return s(), a("div", {
            key: e.field
          }, [
            _(e) ? (s(), a("div", {
              key: 0,
              class: C(["epic-attr-item", e.layout])
            }, [
              e.label ? (s(), a("div", {
                key: 0,
                class: "epic-attr-label",
                title: e.label
              }, E(e.label), 9, F)) : d("", !0),
              w("div", U, [
                z(i(B), {
                  componentSchema: {
                    ...e,
                    componentProps: {
                      ...e.componentProps,
                      ...e.field === "componentProps.defaultValue" ? (r = t.value) == null ? void 0 : r.componentProps : {},
                      input: !1,
                      field: void 0,
                      hidden: !1
                    },
                    show: !0,
                    noFormItem: !0
                  },
                  "model-value": i(x)(e.editData ?? t.value, e.field),
                  "onUpdate:modelValue": (P) => k(P, e.field, e, e.editData)
                }, null, 8, ["componentSchema", "model-value", "onUpdate:modelValue"])
              ])
            ], 2)) : d("", !0)
          ]);
        }), 128))
      ]);
    };
  }
});
export {
  L as default
};