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

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

import { defineComponent as g, ref as p, watch as r, nextTick as w, openBlock as U, createBlock as y, unref as o, withCtx as C, createVNode as k } from "vue";
import { p as v } from "./pluginManager-BNLy8dPz.js";
import { u as N } from "./index-B1s67XDZ.js";
const A = /* @__PURE__ */ g({
  __name: "index",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(m, { emit: i }) {
    const { t: s } = N(), d = v.getComponent("input"), f = v.getComponent("select"), x = m, c = i, e = p(null), u = p("px"), V = [
      { label: "px", value: "px" },
      { label: "%", value: "%" },
      { label: "vw", value: "vw" },
      { label: "vh", value: "vh" },
      { label: "rem", value: "rem" },
      { label: "em", value: "em" },
      { label: "pt", value: "pt" }
    ];
    r(
      () => x.modelValue,
      (t) => {
        if (!t) return;
        if (typeof t == "number") {
          e.value = String(t), u.value = "px";
          return;
        }
        const l = parseFloat(t);
        if (isNaN(l))
          return e.value = null, !1;
        const a = /^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt){1}$/, n = t.trim().match(a);
        e.value = (n == null ? void 0 : n[1]) ?? null, u.value = (n == null ? void 0 : n[3]) ?? "";
      },
      {
        immediate: !0
      }
    ), r(
      () => u.value + e.value,
      () => {
        b();
      }
    );
    function b() {
      w(() => c("update:modelValue", e.value ? e.value + u.value : void 0));
    }
    return (t, l) => (U(), y(o(d), {
      class: "epic-input-size",
      modelValue: e.value,
      "onUpdate:modelValue": l[2] || (l[2] = (a) => e.value = a),
      value: e.value,
      "onUpdate:value": l[3] || (l[3] = (a) => e.value = a),
      type: "number",
      min: "0",
      placeholder: o(s)("pleaseEnter")
    }, {
      suffix: C(() => [
        k(o(f), {
          value: u.value,
          "onUpdate:value": l[0] || (l[0] = (a) => u.value = a),
          modelValue: u.value,
          "onUpdate:modelValue": l[1] || (l[1] = (a) => u.value = a),
          style: { width: "68px" },
          options: V
        }, null, 8, ["value", "modelValue"])
      ]),
      _: 1
    }, 8, ["modelValue", "value", "placeholder"]));
  }
});
export {
  A as default
};