snowy-designer
Version:
基于Epic-Designer-Pro版本的设计器,可视化开发页面表单
116 lines (115 loc) • 4.01 kB
JavaScript
import { defineComponent as w, ref as s, watch as f, createElementBlock as h, openBlock as b, createVNode as x, createCommentVNode as y, createElementVNode as z, unref as E, nextTick as N } 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 S from "../../../../base-ui/src/shadch-ui/input/Input.vue2.js";
import "@vueuse/core";
import $ from "../../../../base-ui/src/shadch-ui/select/EpSelect.vue2.js";
import "../../../../base-ui/src/shadch-ui/toast/index.js";
import "../../../../../hooks/src/store/index.js";
import "lodash";
import "../../../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../../../utils/src/request/index.js";
import "vuedraggable";
const C = { class: "epic-input-size relative" }, I = { class: "top--1px text-muted-foreground absolute right-0 size-4 w-9" }, Y = /* @__PURE__ */ w({
__name: "index",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(_, { emit: V }) {
const L = _, X = V, m = s(null), o = s(), l = s("px"), n = s(!1), g = [
{ 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" }
];
f(
() => L.modelValue,
(t) => {
if (!t) {
v();
return;
}
if (typeof t == "number") {
o.value = String(t), l.value = "px";
return;
}
const e = t.trim().match(/^(-?\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt)?$/);
if (!e) {
v();
return;
}
o.value = Number(e[1]) < 999999999999 ? e[1] : "999999999999", l.value = e[3] ?? "px";
},
{ immediate: !0 }
), f(
[o, l],
() => X("update:modelValue", o.value ? o.value + l.value : void 0)
);
let r = !1;
function k() {
var t;
r || (n.value = !0, N(() => {
var e;
return (e = m.value) == null ? void 0 : e.$el.select();
}), (t = m.value) == null || t.$el.addEventListener("blur", () => n.value = !1, {
once: !0
}));
}
function d(t) {
r = !1;
const e = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, u = Number(o.value) || 0;
n.value = !1;
const a = (c) => {
const p = (c instanceof MouseEvent ? c.clientX : c.touches[0].clientX) - e;
p !== 0 && (o.value = String(u + p), r = !0);
}, i = () => {
document.removeEventListener("mousemove", a), document.removeEventListener("touchmove", a), document.removeEventListener("mouseup", i), document.removeEventListener("touchend", i), n.value = !1, setTimeout(() => {
r = !1;
}, 1);
};
document.addEventListener("mousemove", a), document.addEventListener("touchmove", a), document.addEventListener("mouseup", i), document.addEventListener("touchend", i);
}
function v() {
o.value = void 0, l.value = "px";
}
return (t, e) => (b(), h("div", C, [
x(E(S), {
ref_key: "inputRef",
ref: m,
modelValue: o.value,
"onUpdate:modelValue": e[0] || (e[0] = (u) => o.value = u),
type: "number",
placeholder: "...",
class: "pr-9"
}, null, 8, ["modelValue"]),
n.value ? y("", !0) : (b(), h("div", {
key: 0,
class: "absolute left-0 top-0 h-full w-full cursor-ew-resize",
onMousedown: d,
onTouchstart: d,
onClick: k
}, null, 32)),
z("div", I, [
x(E($), {
modelValue: l.value,
"onUpdate:modelValue": e[1] || (e[1] = (u) => l.value = u),
options: g,
"hide-select-icon": "",
bordered: !1
}, null, 8, ["modelValue"])
])
]));
}
});
export {
Y as default
};