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

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

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