epic-designer-gold/dist/index-CdnV7DS4.js

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

import { defineComponent as W, onMounted as z, ref as b, openBlock as S, createElementBlock as j, createElementVNode as e, normalizeStyle as M, createVNode as V, unref as c } from "vue";
import { p as E } from "./pluginManager-BCnrHPYv.js";
import { u as q } from "./index-B1s67XDZ.js";
import { ElMessage as A } from "element-plus";
import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const F = { class: "box-model-container" }, G = { class: "visual-box" }, H = { class: "margin-area" }, J = { class: "margin-btns" }, K = { class: "margin-input top" }, O = { class: "margin-input right" }, Q = { class: "margin-input bottom" }, T = { class: "margin-input left" }, X = { class: "border-area" }, Y = { class: "padding-area" }, Z = { class: "padding-btns" }, y = { class: "padding-input top" }, ll = { class: "padding-input right" }, tl = { class: "padding-input bottom" }, el = { class: "padding-input left" }, nl = /* @__PURE__ */ W({
  __name: "index",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(L, { emit: P }) {
    q();
    const m = E.getComponent("input");
    E.getComponent("select");
    const i = L;
    z(() => {
      var a, l, t, u, p, g, s, d, v, f, x, C;
      (a = i.modelValue) != null && a.padding ? o.value = $((l = i.modelValue) == null ? void 0 : l.padding) : (o.value.top = (t = i.modelValue) == null ? void 0 : t["padding-top"], o.value.right = (u = i.modelValue) == null ? void 0 : u["padding-right"], o.value.bottom = (p = i.modelValue) == null ? void 0 : p["padding-bottom"], o.value.left = (g = i.modelValue) == null ? void 0 : g["padding-left"]), (s = i.modelValue) != null && s.margin ? n.value = $((d = i.modelValue) == null ? void 0 : d.margin) : (n.value.top = (v = i.modelValue) == null ? void 0 : v["margin-top"], n.value.right = (f = i.modelValue) == null ? void 0 : f["margin-right"], n.value.bottom = (x = i.modelValue) == null ? void 0 : x["margin-bottom"], n.value.left = (C = i.modelValue) == null ? void 0 : C["margin-left"]);
    });
    function I() {
      n.value.left = null, n.value.top = null, n.value.right = null, n.value.bottom = null, h("update:modelValue", {
        ...i.modelValue,
        "margin-left": null,
        "margin-top": null,
        "margin-right": null,
        "margin-bottom": null
      });
    }
    const k = b(!1), U = b(!1);
    function N() {
      k.value = !k.value;
    }
    function _() {
      U.value = !U.value;
    }
    function w() {
      o.value.left = null, o.value.top = null, o.value.right = null, o.value.bottom = null, h("update:modelValue", {
        ...i.modelValue,
        "padding-left": null,
        "padding-top": null,
        "padding-right": null,
        "padding-bottom": null
      });
    }
    function r(a, l, t) {
      const u = a.target.value.trim();
      if (!u) return;
      if (["px", "%", "vw", "vh", "rem", "em", "pt"].some((d) => u.endsWith(d))) {
        B(l, t, u, a.target.value);
        return;
      }
      if (/^\d+$/.test(u)) {
        const d = u + "px";
        a.target.value = d, B(l, t, d, a.target.value);
      } else
        R(a, l, t);
    }
    function B(a, l, t, u) {
      const p = a === "padding", g = p ? U.value : k.value, s = p ? o : n;
      if (!g)
        s.value[l] = t, h("update:modelValue", {
          ...i.modelValue,
          [`${a}-${l}`]: u
        });
      else {
        const d = ["left", "right", "top", "bottom"];
        d.forEach((f) => {
          s.value[f] = t;
        });
        const v = d.reduce(
          (f, x) => ({
            ...f,
            [`${a}-${x}`]: u
          }),
          {}
        );
        h("update:modelValue", {
          ...i.modelValue,
          ...v
        });
      }
    }
    function R(a, l, t) {
      a.target.value = "";
      const u = l === "padding", p = u ? U.value : k.value, g = u ? o : n;
      if (!p)
        g.value[t] = "", h("update:modelValue", {
          ...i.modelValue,
          [`${l}-${t}`]: null
        });
      else {
        const s = ["left", "right", "top", "bottom"];
        s.forEach((v) => {
          g.value[v] = null;
        });
        const d = s.reduce(
          (v, f) => ({
            ...v,
            [`${l}-${f}`]: null
          }),
          {}
        );
        h("update:modelValue", {
          ...i.modelValue,
          ...d
        });
      }
      A.info("请输入有效值（数字或带单位的值）");
    }
    function $(a) {
      const l = a.split(/\s+/);
      return l.length === 1 ? {
        top: l[0],
        right: l[0],
        bottom: l[0],
        left: l[0]
      } : l.length === 2 ? {
        top: l[0],
        right: l[1],
        bottom: l[0],
        left: l[1]
      } : l.length === 3 ? {
        top: l[0],
        right: l[1],
        bottom: l[2],
        left: l[1]
      } : l.length === 4 ? {
        top: l[0],
        right: l[1],
        bottom: l[2],
        left: l[3]
      } : null;
    }
    const n = b({
      top: null,
      right: null,
      bottom: null,
      left: null
    });
    b({
      width: null,
      style: "solid",
      color: "#3498db"
    });
    const o = b({
      top: null,
      right: null,
      bottom: null,
      left: null
    }), h = P;
    return b(null), b("px"), (a, l) => (S(), j("div", F, [
      e("div", G, [
        e("div", H, [
          l[18] || (l[18] = e("div", { class: "margin-title" }, "外边距", -1)),
          e("div", J, [
            e("span", {
              title: "同时修改每个方向外边距",
              style: M({
                color: k.value ? "#016bf3" : ""
              }),
              onClick: N,
              class: "icon iconfont icon--epic icon--epic--links-fill"
            }, null, 4),
            e("span", {
              title: "清空外边距",
              onClick: I,
              class: "icon iconfont icon--epic icon--epic--delete-bin-line"
            })
          ]),
          e("div", K, [
            V(c(m), {
              modelValue: n.value.top,
              "onUpdate:modelValue": l[0] || (l[0] = (t) => n.value.top = t),
              min: "0",
              onBlur: l[1] || (l[1] = (t) => r(t, "margin", "top"))
            }, null, 8, ["modelValue"])
          ]),
          e("div", O, [
            V(c(m), {
              modelValue: n.value.right,
              "onUpdate:modelValue": l[2] || (l[2] = (t) => n.value.right = t),
              min: "0",
              onBlur: l[3] || (l[3] = (t) => r(t, "margin", "right"))
            }, null, 8, ["modelValue"])
          ]),
          e("div", Q, [
            V(c(m), {
              modelValue: n.value.bottom,
              "onUpdate:modelValue": l[4] || (l[4] = (t) => n.value.bottom = t),
              min: "0",
              onBlur: l[5] || (l[5] = (t) => r(t, "margin", "bottom"))
            }, null, 8, ["modelValue"])
          ]),
          e("div", T, [
            V(c(m), {
              modelValue: n.value.left,
              "onUpdate:modelValue": l[6] || (l[6] = (t) => n.value.left = t),
              min: "0",
              onBlur: l[7] || (l[7] = (t) => r(t, "margin", "left"))
            }, null, 8, ["modelValue"])
          ]),
          e("div", X, [
            e("div", Y, [
              l[16] || (l[16] = e("div", { class: "padding-title" }, "内边距", -1)),
              e("div", Z, [
                e("span", {
                  onClick: _,
                  title: "同时修改每个方向内边距",
                  style: M({
                    color: U.value ? "#016bf3" : ""
                  }),
                  class: "icon iconfont icon--epic icon--epic--links-fill"
                }, null, 4),
                e("span", {
                  title: "清空内边距",
                  onClick: w,
                  class: "icon iconfont icon--epic icon--epic--delete-bin-line"
                })
              ]),
              e("div", y, [
                V(c(m), {
                  modelValue: o.value.top,
                  "onUpdate:modelValue": l[8] || (l[8] = (t) => o.value.top = t),
                  min: "0",
                  onBlur: l[9] || (l[9] = (t) => r(t, "padding", "top"))
                }, null, 8, ["modelValue"])
              ]),
              e("div", ll, [
                V(c(m), {
                  modelValue: o.value.right,
                  "onUpdate:modelValue": l[10] || (l[10] = (t) => o.value.right = t),
                  min: "0",
                  onBlur: l[11] || (l[11] = (t) => r(t, "padding", "right"))
                }, null, 8, ["modelValue"])
              ]),
              e("div", tl, [
                V(c(m), {
                  modelValue: o.value.bottom,
                  "onUpdate:modelValue": l[12] || (l[12] = (t) => o.value.bottom = t),
                  min: "0",
                  onBlur: l[13] || (l[13] = (t) => r(t, "padding", "bottom"))
                }, null, 8, ["modelValue"])
              ]),
              e("div", el, [
                V(c(m), {
                  modelValue: o.value.left,
                  "onUpdate:modelValue": l[14] || (l[14] = (t) => o.value.left = t),
                  min: "0",
                  onBlur: l[15] || (l[15] = (t) => r(t, "padding", "left"))
                }, null, 8, ["modelValue"])
              ]),
              l[17] || (l[17] = e("div", { class: "content-area" }, [
                e("div", { class: "content-controls" }, " content ")
              ], -1))
            ])
          ])
        ])
      ])
    ]));
  }
}), sl = /* @__PURE__ */ D(nl, [["__scopeId", "data-v-539d5450"]]);
export {
  sl as default
};