epic-designer-gold/dist/styleView-BTfVt0rn.js

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

import { defineComponent as k, inject as a, computed as S, openBlock as p, createElementBlock as s, Fragment as _, renderList as C, createElementVNode as i, normalizeClass as V, toDisplayString as w, createCommentVNode as u, createVNode as E, unref as y, nextTick as N } from "vue";
import { E as z } from "./index-Duk9g_wT.js";
import { b as B, s as f } from "./pluginManager-BNLy8dPz.js";
import { u as I } from "./index-B1s67XDZ.js";
const x = ["title"], F = { class: "epic-attr-input" }, M = /* @__PURE__ */ k({
  __name: "styleView",
  setup(L) {
    const { t: l } = I(), h = a("designer"), m = a("pageSchema"), P = a("revoke"), c = [
      {
        label: l("width"),
        type: "EInputSize",
        field: "componentProps.style.width"
      },
      {
        label: l("height"),
        type: "EInputSize",
        field: "componentProps.style.height"
      },
      // {
      //   label: t("padding"),
      //   type: "EInputSize",
      //   field: "componentProps.style.padding",
      // },
      // {
      //   label: t("margin"),
      //   type: "EInputSize",
      //   field: "componentProps.style.margin",
      // },
      {
        label: "行高",
        type: "EInputSize",
        field: "componentProps.style.lineHeight",
        componentProps: {
          type: "border",
          style: {}
        }
      },
      {
        label: l("backgroundColor"),
        type: "color-picker",
        field: "componentProps.style.backgroundColor",
        componentProps: {
          type: "color",
          style: {
            // width: '60px'
          }
        }
      },
      {
        label: l("fontColor"),
        type: "color-picker",
        field: "componentProps.style.color",
        componentProps: {
          type: "color",
          style: {}
        }
      },
      {
        label: "边框",
        type: "input",
        field: "componentProps.style.border",
        componentProps: {
          type: "border",
          placeholder: "请输入",
          style: {}
        }
      },
      {
        label: "字体粗细",
        type: "input",
        field: "componentProps.style.fontWeight",
        componentProps: {
          type: "border",
          placeholder: "请输入",
          style: {}
        }
      },
      {
        label: "",
        type: "PaddingMarginControl",
        field: "componentProps.style"
      }
    ], r = S(() => h.state.checkedNode);
    function b(o) {
      var t;
      return typeof o.show == "boolean" ? o.show : ((t = o.show) == null ? void 0 : t.call(o, { values: r.value })) ?? !0;
    }
    function g(o, t, n, e = r.value) {
      typeof n.onChange == "function" && n.onChange({ value: o, values: e, componentStyles: c }), n.changeSync ? f(e, t, o) : N(() => {
        f(e, t, o);
      }), P.push(m.schemas, l("editComponentProperties"));
    }
    return (o, t) => {
      var n;
      return p(), s("div", {
        class: "epic-style-view",
        key: (n = r.value) == null ? void 0 : n.id
      }, [
        (p(), s(_, null, C(c, (e) => {
          var d;
          return i("div", {
            key: e.field
          }, [
            b(e) ? (p(), s("div", {
              key: 0,
              class: V(["epic-attr-item", e.layout])
            }, [
              e.label ? (p(), s("div", {
                key: 0,
                class: "epic-attr-label",
                title: e.label
              }, w(e.label), 9, x)) : u("", !0),
              i("div", F, [
                E(y(z), {
                  componentSchema: {
                    ...e,
                    componentProps: {
                      ...e.componentProps,
                      ...e.field === "componentProps.defaultValue" ? (d = r.value) == null ? void 0 : d.componentProps : {},
                      input: !1,
                      field: void 0,
                      hidden: !1
                    },
                    show: !0,
                    noFormItem: !0
                  },
                  "model-value": y(B)(e.editData ?? r.value, e.field),
                  "onUpdate:modelValue": (v) => g(v, e.field, e, e.editData)
                }, null, 8, ["componentSchema", "model-value", "onUpdate:modelValue"])
              ])
            ], 2)) : u("", !0)
          ]);
        }), 64))
      ]);
    };
  }
});
export {
  M as default
};