epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
321 lines (320 loc) • 10.1 kB
JavaScript
import { inject as N, onBeforeMount as U, computed as X, ref as Y, watchEffect as Z } from "vue";
import { u as M, m as w } from "./index-e2a664aa.js";
import { h as _, i as T, j, c as z, d as k } from "./use-rtl-d05cb593.js";
import { Q as A, t as ee, a1 as re, G as F, c1 as oe, C as ae, c2 as $, I as B, K as le, N as ne, c3 as se, c4 as ie, c5 as te, W as R, c6 as pe, c7 as de, L as fe, c8 as ce } from "./index-97ce4605.js";
import { b as ue, i as me, a as ge } from "./isArrayLikeObject-e5e231b4.js";
import { r as L, s as S, a as he } from "./index-4562f02c.js";
function be(r, o, a) {
if (!A(a))
return !1;
var d = typeof o;
return (d == "number" ? ee(a) && re(o, a.length) : d == "string" && o in a) ? F(a[o], r) : !1;
}
function ve(r) {
return ue(function(o, a) {
var d = -1, t = a.length, n = t > 1 ? a[t - 1] : void 0, i = t > 2 ? a[2] : void 0;
for (n = r.length > 3 && typeof n == "function" ? (t--, n) : void 0, i && be(a[0], a[1], i) && (n = t < 3 ? void 0 : n, t = 1), o = Object(o); ++d < t; ) {
var l = a[d];
l && r(o, l, d, n);
}
return o;
});
}
function Ce(r) {
return function(o, a, d) {
for (var t = -1, n = Object(o), i = d(o), l = i.length; l--; ) {
var s = i[r ? l : ++t];
if (a(n[s], s, n) === !1)
break;
}
return o;
};
}
var xe = Ce();
const Se = xe;
function O(r, o, a) {
(a !== void 0 && !F(r[o], a) || a === void 0 && !(o in r)) && oe(r, o, a);
}
function H(r, o) {
if (!(o === "constructor" && typeof r[o] == "function") && o != "__proto__")
return r[o];
}
function ye(r) {
return ae(r, $(r));
}
function Oe(r, o, a, d, t, n, i) {
var l = H(r, a), s = H(o, a), u = i.get(s);
if (u) {
O(r, a, u);
return;
}
var p = n ? n(l, s, a + "", r, o, i) : void 0, c = p === void 0;
if (c) {
var g = B(s), m = !g && le(s), h = !g && !m && ne(s);
p = s, g || m || h ? B(l) ? p = l : me(l) ? p = se(l) : m ? (c = !1, p = ie(s, !0)) : h ? (c = !1, p = te(s, !0)) : p = [] : ge(s) || R(s) ? (p = l, R(l) ? p = ye(l) : (!A(l) || pe(l)) && (p = de(s))) : c = !1;
}
c && (i.set(s, p), t(p, s, d, n, i), i.delete(s)), O(r, a, p);
}
function V(r, o, a, d, t) {
r !== o && Se(o, function(n, i) {
if (t || (t = new fe()), A(n))
Oe(r, o, i, a, V, d, t);
else {
var l = d ? d(H(r, i), n, i + "", r, o, t) : void 0;
l === void 0 && (l = n), O(r, i, l);
}
}, $);
}
var He = ve(function(r, o, a) {
V(r, o, a);
});
const y = He;
function Ae(r, ...o) {
if (Array.isArray(r))
r.forEach((a) => Ae(a, ...o));
else
return r(...o);
}
function Fe(r) {
return r;
}
function Pe(r, o, a, d, t, n) {
const i = M(), l = N(_, null);
if (a) {
const u = () => {
const p = n == null ? void 0 : n.value;
a.mount({
id: p === void 0 ? o : p + o,
head: !0,
props: {
bPrefix: p ? `.${p}-` : void 0
},
anchorMetaName: T,
ssr: i
}), l != null && l.preflightStyleDisabled || j.mount({
id: "n-global",
head: !0,
anchorMetaName: T,
ssr: i
});
};
i ? u() : U(u);
}
return X(() => {
var u;
const { theme: { common: p, self: c, peers: g = {} } = {}, themeOverrides: m = {}, builtinThemeOverrides: h = {} } = t, { common: b, peers: v } = m, { common: C = void 0, [r]: { common: x = void 0, self: G = void 0, peers: J = {} } = {} } = (l == null ? void 0 : l.mergedThemeRef.value) || {}, { common: K = void 0, [r]: P = {} } = (l == null ? void 0 : l.mergedThemeOverridesRef.value) || {}, { common: W, peers: q = {} } = P, D = y({}, p || x || C || d.common, K, W, b), Q = y(
// {}, executed every time, no need for empty obj
(u = c || G || d.self) === null || u === void 0 ? void 0 : u(D),
h,
P,
m
);
return {
common: D,
self: Q,
peers: y({}, d.peers, J, g),
peerOverrides: y({}, h.peers, q, v)
};
});
}
Pe.props = {
theme: Object,
themeOverrides: Object,
builtinThemeOverrides: Object
};
function $e(r, o, a, d) {
var t;
a || ce("useThemeClass", "cssVarsRef is not passed");
const n = (t = N(_, null)) === null || t === void 0 ? void 0 : t.mergedThemeHashRef, i = Y(""), l = M();
let s;
const u = `__${r}`, p = () => {
let c = u;
const g = o ? o.value : void 0, m = n == null ? void 0 : n.value;
m && (c += "-" + m), g && (c += "-" + g);
const { themeOverrides: h, builtinThemeOverrides: b } = d;
h && (c += "-" + w(JSON.stringify(h))), b && (c += "-" + w(JSON.stringify(b))), i.value = c, s = () => {
const v = a.value;
let C = "";
for (const x in v)
C += `${x}: ${v[x]};`;
z(`.${c}`, C).mount({
id: c,
ssr: l
}), s = void 0;
};
};
return Z(() => {
p();
}), {
themeClass: i,
onRender: () => {
s == null || s();
}
};
}
const e = {
neutralBase: "#FFF",
neutralInvertBase: "#000",
neutralTextBase: "#000",
neutralPopover: "#fff",
neutralCard: "#fff",
neutralModal: "#fff",
neutralBody: "#fff",
alpha1: "0.82",
alpha2: "0.72",
alpha3: "0.38",
alpha4: "0.24",
alpha5: "0.18",
alphaClose: "0.6",
alphaDisabled: "0.5",
alphaDisabledInput: "0.02",
alphaPending: "0.05",
alphaTablePending: "0.02",
alphaPressed: "0.07",
alphaAvatar: "0.2",
alphaRail: "0.14",
alphaProgressRail: ".08",
alphaBorder: "0.12",
alphaDivider: "0.06",
alphaInput: "0",
alphaAction: "0.02",
alphaTab: "0.04",
alphaScrollbar: "0.25",
alphaScrollbarHover: "0.4",
alphaCode: "0.05",
alphaTag: "0.02",
// primary
primaryHover: "#36ad6a",
primaryDefault: "#18a058",
primaryActive: "#0c7a43",
primarySuppl: "#36ad6a",
// info
infoHover: "#4098fc",
infoDefault: "#2080f0",
infoActive: "#1060c9",
infoSuppl: "#4098fc",
// error
errorHover: "#de576d",
errorDefault: "#d03050",
errorActive: "#ab1f3f",
errorSuppl: "#de576d",
// warning
warningHover: "#fcb040",
warningDefault: "#f0a020",
warningActive: "#c97c10",
warningSuppl: "#fcb040",
// success
successHover: "#36ad6a",
successDefault: "#18a058",
successActive: "#0c7a43",
successSuppl: "#36ad6a"
}, De = L(e.neutralBase), E = L(e.neutralInvertBase), we = "rgba(" + E.slice(0, 3).join(", ") + ", ";
function I(r) {
return we + String(r) + ")";
}
function f(r) {
const o = Array.from(E);
return o[3] = Number(r), he(De, o);
}
const Te = Object.assign(Object.assign({ name: "common" }, k), {
baseColor: e.neutralBase,
// primary color
primaryColor: e.primaryDefault,
primaryColorHover: e.primaryHover,
primaryColorPressed: e.primaryActive,
primaryColorSuppl: e.primarySuppl,
// info color
infoColor: e.infoDefault,
infoColorHover: e.infoHover,
infoColorPressed: e.infoActive,
infoColorSuppl: e.infoSuppl,
// success color
successColor: e.successDefault,
successColorHover: e.successHover,
successColorPressed: e.successActive,
successColorSuppl: e.successSuppl,
// warning color
warningColor: e.warningDefault,
warningColorHover: e.warningHover,
warningColorPressed: e.warningActive,
warningColorSuppl: e.warningSuppl,
// error color
errorColor: e.errorDefault,
errorColorHover: e.errorHover,
errorColorPressed: e.errorActive,
errorColorSuppl: e.errorSuppl,
// text color
textColorBase: e.neutralTextBase,
textColor1: "rgb(31, 34, 37)",
textColor2: "rgb(51, 54, 57)",
textColor3: "rgb(118, 124, 130)",
// textColor4: neutral(base.alpha4), // disabled, placeholder, icon
// textColor5: neutral(base.alpha5),
textColorDisabled: f(e.alpha4),
placeholderColor: f(e.alpha4),
placeholderColorDisabled: f(e.alpha5),
iconColor: f(e.alpha4),
iconColorHover: S(f(e.alpha4), { lightness: 0.75 }),
iconColorPressed: S(f(e.alpha4), { lightness: 0.9 }),
iconColorDisabled: f(e.alpha5),
opacity1: e.alpha1,
opacity2: e.alpha2,
opacity3: e.alpha3,
opacity4: e.alpha4,
opacity5: e.alpha5,
dividerColor: "rgb(239, 239, 245)",
borderColor: "rgb(224, 224, 230)",
// close
closeIconColor: f(Number(e.alphaClose)),
closeIconColorHover: f(Number(e.alphaClose)),
closeIconColorPressed: f(Number(e.alphaClose)),
closeColorHover: "rgba(0, 0, 0, .09)",
closeColorPressed: "rgba(0, 0, 0, .13)",
// clear
clearColor: f(e.alpha4),
clearColorHover: S(f(e.alpha4), { lightness: 0.75 }),
clearColorPressed: S(f(e.alpha4), { lightness: 0.9 }),
scrollbarColor: I(e.alphaScrollbar),
scrollbarColorHover: I(e.alphaScrollbarHover),
scrollbarWidth: "5px",
scrollbarHeight: "5px",
scrollbarBorderRadius: "5px",
progressRailColor: f(e.alphaProgressRail),
railColor: "rgb(219, 219, 223)",
popoverColor: e.neutralPopover,
tableColor: e.neutralCard,
cardColor: e.neutralCard,
modalColor: e.neutralModal,
bodyColor: e.neutralBody,
tagColor: "#eee",
avatarColor: f(e.alphaAvatar),
invertedColor: "rgb(0, 20, 40)",
inputColor: f(e.alphaInput),
codeColor: "rgb(244, 244, 248)",
tabColor: "rgb(247, 247, 250)",
actionColor: "rgb(250, 250, 252)",
tableHeaderColor: "rgb(250, 250, 252)",
hoverColor: "rgb(243, 243, 245)",
// use color with alpha since it can be nested with header filter & sorter effect
tableColorHover: "rgba(0, 0, 100, 0.03)",
tableColorStriped: "rgba(0, 0, 100, 0.02)",
pressedColor: "rgb(237, 237, 239)",
opacityDisabled: e.alphaDisabled,
inputColorDisabled: "rgb(250, 250, 252)",
// secondary button color
// can also be used in tertiary button & quaternary button
buttonColor2: "rgba(46, 51, 56, .05)",
buttonColor2Hover: "rgba(46, 51, 56, .09)",
buttonColor2Pressed: "rgba(46, 51, 56, .13)",
boxShadow1: "0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)",
boxShadow2: "0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)",
boxShadow3: "0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)"
}), Le = Te;
export {
$e as a,
Ae as b,
Le as c,
Se as d,
Fe as e,
Pe as u
};