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

基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器

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