epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
240 lines (239 loc) • 7.35 kB
JavaScript
import { i as E } from "./interopRequireDefault-40f894e3.js";
import { r as B } from "./_vue_commonjs-external-eb7fec7f.js";
import { r as re, f as ae, b as V, e as oe, d as ne } from "./useConfigInject-d85d8c62.js";
import { r as ie } from "./isVisible-f22c1e3a.js";
import { r as se } from "./useState-f730f903.js";
import { r as ue } from "./raf-dd6c1047.js";
var y = {}, _ = {}, j;
function le() {
if (j)
return _;
j = 1, Object.defineProperty(_, "__esModule", {
value: !0
}), _.default = void 0;
var i = re();
const e = (t) => {
const {
componentCls: r,
colorPrimary: u
} = t;
return {
[r]: {
position: "absolute",
background: "transparent",
pointerEvents: "none",
boxSizing: "border-box",
color: `var(--wave-color, ${u})`,
boxShadow: "0 0 0 0 currentcolor",
opacity: 0.2,
// =================== Motion ===================
"&.wave-motion-appear": {
transition: [`box-shadow 0.4s ${t.motionEaseOutCirc}`, `opacity 2s ${t.motionEaseOutCirc}`].join(","),
"&-active": {
boxShadow: "0 0 0 6px currentcolor",
opacity: 0
}
}
}
};
};
var s = (0, i.genComponentStyleHook)("Wave", (t) => [e(t)]);
return _.default = s, _;
}
var R = {}, C = {}, p = {}, D;
function de() {
if (D)
return p;
D = 1, Object.defineProperty(p, "__esModule", {
value: !0
}), p.getTargetWaveColor = s, p.isNotGrey = i, p.isValidWaveColor = e;
function i(t) {
const r = (t || "").match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
return r && r[1] && r[2] && r[3] ? !(r[1] === r[2] && r[2] === r[3]) : !0;
}
function e(t) {
return t && t !== "#fff" && t !== "#ffffff" && t !== "rgb(255, 255, 255)" && t !== "rgba(255, 255, 255, 1)" && i(t) && !/rgba\((?:\d*, ){3}0\)/.test(t) && // any transparent rgba color
t !== "transparent";
}
function s(t) {
const {
borderTopColor: r,
borderColor: u,
backgroundColor: f
} = getComputedStyle(t);
return e(r) ? r : e(u) ? u : e(f) ? f : null;
}
return p;
}
var I;
function fe() {
if (I)
return C;
I = 1;
var i = E;
Object.defineProperty(C, "__esModule", {
value: !0
}), C.default = void 0;
var e = B, s = i(se()), t = ae(), r = de(), u = i(ue());
function f(n) {
return Number.isNaN(n) ? 0 : n;
}
const m = (0, e.defineComponent)({
props: {
target: (0, t.objectType)(),
className: String
},
setup(n) {
const v = (0, e.shallowRef)(null), [l, W] = (0, s.default)(null), [N, T] = (0, s.default)([]), [c, q] = (0, s.default)(0), [a, h] = (0, s.default)(0), [k, z] = (0, s.default)(0), [F, A] = (0, s.default)(0), [H, G] = (0, s.default)(!1);
function x() {
const {
target: o
} = n, d = getComputedStyle(o);
W((0, r.getTargetWaveColor)(o));
const M = d.position === "static", {
borderLeftWidth: K,
borderTopWidth: Q
} = d;
q(M ? o.offsetLeft : f(-parseFloat(K))), h(M ? o.offsetTop : f(-parseFloat(Q))), z(o.offsetWidth), A(o.offsetHeight);
const {
borderTopLeftRadius: X,
borderTopRightRadius: Y,
borderBottomLeftRadius: Z,
borderBottomRightRadius: ee
} = d;
T([X, Y, ee, Z].map((te) => f(parseFloat(te))));
}
let g, S, O;
const U = () => {
clearTimeout(O), u.default.cancel(S), g == null || g.disconnect();
}, $ = () => {
var o;
const d = (o = v.value) === null || o === void 0 ? void 0 : o.parentElement;
d && ((0, e.render)(null, d), d.parentElement && d.parentElement.removeChild(d));
};
(0, e.onMounted)(() => {
U(), O = setTimeout(() => {
$();
}, 5e3);
const {
target: o
} = n;
o && (S = (0, u.default)(() => {
x(), G(!0);
}), typeof ResizeObserver < "u" && (g = new ResizeObserver(x), g.observe(o)));
}), (0, e.onBeforeUnmount)(() => {
U();
});
const J = (o) => {
o.propertyName === "opacity" && $();
};
return () => {
if (!H.value)
return null;
const o = {
left: `${c.value}px`,
top: `${a.value}px`,
width: `${k.value}px`,
height: `${F.value}px`,
borderRadius: N.value.map((d) => `${d}px`).join(" ")
};
return l && (o["--wave-color"] = l.value), (0, e.createVNode)(e.Transition, {
appear: !0,
name: "wave-motion",
appearFromClass: "wave-motion-appear",
appearActiveClass: "wave-motion-appear",
appearToClass: "wave-motion-appear wave-motion-appear-active"
}, {
default: () => [(0, e.createVNode)("div", {
ref: v,
class: n.className,
style: o,
onTransitionend: J
}, null)]
});
};
}
});
function w(n, v) {
const l = document.createElement("div");
l.style.position = "absolute", l.style.left = "0px", l.style.top = "0px", n == null || n.insertBefore(l, n == null ? void 0 : n.firstChild), (0, e.render)((0, e.createVNode)(m, {
target: n,
className: v
}, null), l);
}
var b = w;
return C.default = b, C;
}
var P;
function ve() {
if (P)
return R;
P = 1;
var i = E;
Object.defineProperty(R, "__esModule", {
value: !0
}), R.default = t;
var e = V(), s = i(fe());
function t(r, u) {
function f() {
const m = (0, e.findDOMNode)(r);
(0, s.default)(m, u.value);
}
return f;
}
return R;
}
var L;
function ye() {
if (L)
return y;
L = 1;
var i = E;
Object.defineProperty(y, "__esModule", {
value: !0
}), y.default = void 0;
var e = B, s = i(oe()), t = i(ie()), r = i(ne()), u = V(), f = i(le()), m = i(ve()), w = (0, e.defineComponent)({
compatConfig: {
MODE: 3
},
name: "Wave",
props: {
disabled: Boolean
},
setup(b, n) {
let {
slots: v
} = n;
const l = (0, e.getCurrentInstance)(), {
prefixCls: W
} = (0, s.default)("wave", b), [, N] = (0, f.default)(W), T = (0, m.default)(l, (0, e.computed)(() => (0, r.default)(W.value, N.value)));
let c;
const q = () => {
(0, u.findDOMNode)(l).removeEventListener("click", c, !0);
};
return (0, e.onMounted)(() => {
(0, e.watch)(() => b.disabled, () => {
q(), (0, e.nextTick)(() => {
const a = (0, u.findDOMNode)(l);
a == null || a.removeEventListener("click", c, !0), !(!a || a.nodeType !== 1 || b.disabled) && (c = (h) => {
h.target.tagName === "INPUT" || !(0, t.default)(h.target) || // No need wave
!a.getAttribute || a.getAttribute("disabled") || a.disabled || a.className.includes("disabled") || a.className.includes("-leave") || T();
}, a.addEventListener("click", c, !0));
});
}, {
immediate: !0,
flush: "post"
});
}), (0, e.onBeforeUnmount)(() => {
q();
}), () => {
var a;
return (a = v.default) === null || a === void 0 ? void 0 : a.call(v)[0];
};
}
});
return y.default = w, y;
}
export {
ye as r
};