form-designer-xinyi/dist/styleView-lyCzwsGF.js

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

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