epic-designer-cjh/dist/styleView-2bc8a30d.js

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

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