epic-designer/dist/ui-kit/panel-ui/src/rightSidebars/style/style.vue2.js

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

import { defineComponent as k, inject as p, computed as u, createElementBlock as s, openBlock as r, Fragment as S, renderList as C, createCommentVNode as i, normalizeClass as V, createElementVNode as w, toDisplayString as E, createVNode as z, unref as d, nextTick as I } from "vue";
/* empty css                                 */
import N from "../../../../base-ui/src/node/node.vue.js";
import { getValueByPath as B, setValueByPath as f } from "../../../../../utils/src/common/data.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { pluginManager as x } from "../../../../../utils/src/manager/pluginManager.js";
import "vuedraggable";
const F = ["title"], U = { class: "epic-attr-input" }, H = /* @__PURE__ */ k({
  __name: "style",
  setup(j) {
    const y = p("designer"), m = p("pageSchema"), h = p("revoke"), g = x.getComponentConfings(), n = u(() => y.state.selectedNode), v = [
      {
        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: "EInputSize"
      },
      {
        componentProps: {
          style: {
            // width: '60px'
          },
          type: "color"
        },
        field: "componentProps.style.backgroundColor",
        label: "背景色",
        type: "color-picker"
      },
      {
        componentProps: {
          style: {},
          type: "color"
        },
        field: "componentProps.style.color",
        label: "字体颜色",
        type: "color-picker"
      }
    ], a = u(() => {
      var t;
      if (!n.value || !n.value.type)
        return [];
      const o = ((t = g[n.value.type]) == null ? void 0 : t.config.style) ?? [];
      return [...v, ...o];
    });
    function P(o) {
      var t;
      return typeof o.show == "boolean" ? o.show : ((t = o.show) == null ? void 0 : t.call(o, { values: n.value })) ?? !0;
    }
    function _(o, t, l, e = n.value) {
      typeof l.onChange == "function" && l.onChange({ componentStyles: a, value: o, values: e }), l.changeSync ? f(e, t, o) : I(() => {
        f(e, t, o);
      }), h.push(m.schemas, "编辑组件属性");
    }
    return (o, t) => {
      var l;
      return r(), s("div", {
        key: (l = n.value) == null ? void 0 : l.id,
        class: "epic-style-view"
      }, [
        (r(!0), s(S, null, C(a.value, (e) => {
          var c;
          return r(), s("div", {
            key: e.field
          }, [
            P(e) ? (r(), s("div", {
              key: 0,
              class: V(["epic-attr-item", e.layout])
            }, [
              e.label ? (r(), s("div", {
                key: 0,
                class: "epic-attr-label",
                title: e.label
              }, E(e.label), 9, F)) : i("", !0),
              w("div", U, [
                z(d(N), {
                  "component-schema": {
                    ...e,
                    componentProps: {
                      ...e.componentProps,
                      ...e.field === "componentProps.defaultValue" ? (c = n.value) == null ? void 0 : c.componentProps : {},
                      input: !1,
                      field: void 0,
                      hidden: !1
                    },
                    show: !0,
                    noFormItem: !0
                  },
                  "model-value": d(B)(e.editData ?? n.value, e.field),
                  "onUpdate:modelValue": (b) => _(b, e.field, e, e.editData)
                }, null, 8, ["component-schema", "model-value", "onUpdate:modelValue"])
              ])
            ], 2)) : i("", !0)
          ]);
        }), 128))
      ]);
    };
  }
});
export {
  H as default
};