UNPKG

epic-designer-cjh

Version:

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

486 lines (485 loc) 14 kB
import { i as B } from "./interopRequireDefault-40f894e3.js"; import { r as H } from "./_vue_commonjs-external-eb7fec7f.js"; import { r as k, a as te } from "./public_api-1267ff2a.js"; import { r as re, d as ne, e as se, f as ue } from "./useConfigInject-d85d8c62.js"; import { r as ie } from "./useFlexGapSupport-f3b1c137.js"; var P = {}, X = {}, J; function le() { if (J) return X; J = 1; var l = B; Object.defineProperty(X, "__esModule", { value: !0 }), X.default = G, X.responsiveArray = void 0; var o = l(k()), v = H, w = re(); const q = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs"]; X.responsiveArray = q; const x = (f) => ({ xs: `(max-width: ${f.screenXSMax}px)`, sm: `(min-width: ${f.screenSM}px)`, md: `(min-width: ${f.screenMD}px)`, lg: `(min-width: ${f.screenLG}px)`, xl: `(min-width: ${f.screenXL}px)`, xxl: `(min-width: ${f.screenXXL}px)`, xxxl: `{min-width: ${f.screenXXXL}px}` }); function G() { const [, f] = (0, w.useToken)(); return (0, v.computed)(() => { const S = x(f.value), m = /* @__PURE__ */ new Map(); let a = -1, t = {}; return { matchHandlers: {}, dispatch(e) { return t = e, m.forEach((u) => u(t)), m.size >= 1; }, subscribe(e) { return m.size || this.register(), a += 1, m.set(a, e), e(t), a; }, unsubscribe(e) { m.delete(e), m.size || this.unregister(); }, unregister() { Object.keys(S).forEach((e) => { const u = S[e], s = this.matchHandlers[u]; s == null || s.mql.removeListener(s == null ? void 0 : s.listener); }), m.clear(); }, register() { Object.keys(S).forEach((e) => { const u = S[e], s = (n) => { let { matches: j } = n; this.dispatch((0, o.default)((0, o.default)({}, t), { [e]: j })); }, r = window.matchMedia(u); r.addListener(s), this.matchHandlers[u] = { mql: r, listener: s }, s(r); }); }, responsiveMap: S }; }); } return X; } var O = {}, Y; function oe() { if (Y) return O; Y = 1, Object.defineProperty(O, "__esModule", { value: !0 }), O.useProvideRow = O.useInjectRow = O.default = O.RowContextKey = void 0; var l = H; const o = Symbol("rowContextKey"); O.RowContextKey = o; const v = (x) => { (0, l.provide)(o, x); }; O.useProvideRow = v; const w = () => (0, l.inject)(o, { gutter: (0, l.computed)(() => { }), wrap: (0, l.computed)(() => { }), supportFlexGap: (0, l.computed)(() => { }) }); O.useInjectRow = w; var q = v; return O.default = q, O; } var D = {}, Z; function ae() { if (Z) return D; Z = 1; var l = B; Object.defineProperty(D, "__esModule", { value: !0 }), D.useRowStyle = D.useColStyle = void 0; var o = l(k()), v = re(); const w = (a) => { const { componentCls: t } = a; return { // Grid system [t]: { display: "flex", flexFlow: "row wrap", minWidth: 0, "&::before, &::after": { display: "flex" }, "&-no-wrap": { flexWrap: "nowrap" }, // The origin of the X-axis "&-start": { justifyContent: "flex-start" }, // The center of the X-axis "&-center": { justifyContent: "center" }, // The opposite of the X-axis "&-end": { justifyContent: "flex-end" }, "&-space-between": { justifyContent: "space-between" }, "&-space-around ": { justifyContent: "space-around" }, // Align at the top "&-top": { alignItems: "flex-start" }, // Align at the center "&-middle": { alignItems: "center" }, "&-bottom": { alignItems: "flex-end" } } }; }, q = (a) => { const { componentCls: t } = a; return { // Grid system [t]: { position: "relative", maxWidth: "100%", // Prevent columns from collapsing when empty minHeight: 1 } }; }, x = (a, t) => { const { componentCls: e, gridColumns: u } = a, s = {}; for (let r = u; r >= 0; r--) r === 0 ? (s[`${e}${t}-${r}`] = { display: "none" }, s[`${e}-push-${r}`] = { insetInlineStart: "auto" }, s[`${e}-pull-${r}`] = { insetInlineEnd: "auto" }, s[`${e}${t}-push-${r}`] = { insetInlineStart: "auto" }, s[`${e}${t}-pull-${r}`] = { insetInlineEnd: "auto" }, s[`${e}${t}-offset-${r}`] = { marginInlineEnd: 0 }, s[`${e}${t}-order-${r}`] = { order: 0 }) : (s[`${e}${t}-${r}`] = { display: "block", flex: `0 0 ${r / u * 100}%`, maxWidth: `${r / u * 100}%` }, s[`${e}${t}-push-${r}`] = { insetInlineStart: `${r / u * 100}%` }, s[`${e}${t}-pull-${r}`] = { insetInlineEnd: `${r / u * 100}%` }, s[`${e}${t}-offset-${r}`] = { marginInlineStart: `${r / u * 100}%` }, s[`${e}${t}-order-${r}`] = { order: r }); return s; }, G = (a, t) => x(a, t), f = (a, t, e) => ({ [`@media (min-width: ${t}px)`]: (0, o.default)({}, G(a, e)) }), S = (0, v.genComponentStyleHook)("Grid", (a) => [w(a)]); D.useRowStyle = S; const m = (0, v.genComponentStyleHook)("Grid", (a) => { const t = (0, v.mergeToken)(a, { gridColumns: 24 // Row is divided into 24 parts in Grid }), e = { "-sm": t.screenSMMin, "-md": t.screenMDMin, "-lg": t.screenLGMin, "-xl": t.screenXLMin, "-xxl": t.screenXXLMin }; return [q(t), G(t, ""), G(t, "-xs"), Object.keys(e).map((u) => f(t, e[u], u)).reduce((u, s) => (0, o.default)((0, o.default)({}, u), s), {})]; }); return D.useColStyle = m, D; } var z; function me() { if (z) return P; z = 1; var l = B; Object.defineProperty(P, "__esModule", { value: !0 }), P.rowProps = P.default = void 0; var o = H, v = l(te()), w = l(k()), q = l(ne()), x = e(le()), G = l(se()), f = l(ie()), S = l(oe()), m = ae(), a = ue(); function t(n) { if (typeof WeakMap != "function") return null; var j = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(); return (t = function(y) { return y ? g : j; })(n); } function e(n, j) { if (!j && n && n.__esModule) return n; if (n === null || typeof n != "object" && typeof n != "function") return { default: n }; var g = t(j); if (g && g.has(n)) return g.get(n); var y = {}, C = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var M in n) if (M !== "default" && Object.prototype.hasOwnProperty.call(n, M)) { var A = C ? Object.getOwnPropertyDescriptor(n, M) : null; A && (A.get || A.set) ? Object.defineProperty(y, M, A) : y[M] = n[M]; } return y.default = n, g && g.set(n, y), y; } const u = () => ({ align: (0, a.someType)([String, Object]), justify: (0, a.someType)([String, Object]), prefixCls: String, gutter: (0, a.someType)([Number, Array, Object], 0), wrap: { type: Boolean, default: void 0 } }); P.rowProps = u; var r = (0, o.defineComponent)({ compatConfig: { MODE: 3 }, name: "ARow", inheritAttrs: !1, props: u(), setup(n, j) { let { slots: g, attrs: y } = j; const { prefixCls: C, direction: M } = (0, G.default)("row", n), [A, K] = (0, m.useRowStyle)(C); let F; const h = (0, x.default)(), b = (0, o.ref)({ xs: !0, sm: !0, md: !0, lg: !0, xl: !0, xxl: !0 }), $ = (0, o.ref)({ xs: !1, sm: !1, md: !1, lg: !1, xl: !1, xxl: !1 }), _ = (i) => (0, o.computed)(() => { if (typeof n[i] == "string") return n[i]; if (typeof n[i] != "object") return ""; for (let d = 0; d < x.responsiveArray.length; d++) { const N = x.responsiveArray[d]; if (!$.value[N]) continue; const R = n[i][N]; if (R !== void 0) return R; } return ""; }), T = _("align"), p = _("justify"), L = (0, f.default)(); (0, o.onMounted)(() => { F = h.value.subscribe((i) => { $.value = i; const d = n.gutter || 0; (!Array.isArray(d) && typeof d == "object" || Array.isArray(d) && (typeof d[0] == "object" || typeof d[1] == "object")) && (b.value = i); }); }), (0, o.onBeforeUnmount)(() => { h.value.unsubscribe(F); }); const I = (0, o.computed)(() => { const i = [void 0, void 0], { gutter: d = 0 } = n; return (Array.isArray(d) ? d : [d, void 0]).forEach((R, Q) => { if (typeof R == "object") for (let U = 0; U < x.responsiveArray.length; U++) { const V = x.responsiveArray[U]; if (b.value[V] && R[V] !== void 0) { i[Q] = R[V]; break; } } else i[Q] = R; }), i; }); (0, S.default)({ gutter: I, supportFlexGap: L, wrap: (0, o.computed)(() => n.wrap) }); const c = (0, o.computed)(() => (0, q.default)(C.value, { [`${C.value}-no-wrap`]: n.wrap === !1, [`${C.value}-${p.value}`]: p.value, [`${C.value}-${T.value}`]: T.value, [`${C.value}-rtl`]: M.value === "rtl" }, y.class, K.value)), W = (0, o.computed)(() => { const i = I.value, d = {}, N = i[0] != null && i[0] > 0 ? `${i[0] / -2}px` : void 0, R = i[1] != null && i[1] > 0 ? `${i[1] / -2}px` : void 0; return N && (d.marginLeft = N, d.marginRight = N), L.value ? d.rowGap = `${i[1]}px` : R && (d.marginTop = R, d.marginBottom = R), d; }); return () => { var i; return A((0, o.createVNode)("div", (0, v.default)((0, v.default)({}, y), {}, { class: c.value, style: (0, w.default)((0, w.default)({}, W.value), y.style) }), [(i = g.default) === null || i === void 0 ? void 0 : i.call(g)])); }; } }); return P.default = r, P; } var E = {}, ee; function ye() { if (ee) return E; ee = 1; var l = B; Object.defineProperty(E, "__esModule", { value: !0 }), E.default = E.colProps = void 0; var o = H, v = l(te()), w = l(k()), q = l(ne()), x = l(se()), G = oe(), f = ae(); function S(e) { return typeof e == "number" ? `${e} ${e} auto` : /^\d+(\.\d+)?(px|em|rem|%)$/.test(e) ? `0 0 ${e}` : e; } const m = () => ({ span: [String, Number], order: [String, Number], offset: [String, Number], push: [String, Number], pull: [String, Number], xs: { type: [String, Number, Object], default: void 0 }, sm: { type: [String, Number, Object], default: void 0 }, md: { type: [String, Number, Object], default: void 0 }, lg: { type: [String, Number, Object], default: void 0 }, xl: { type: [String, Number, Object], default: void 0 }, xxl: { type: [String, Number, Object], default: void 0 }, prefixCls: String, flex: [String, Number] }); E.colProps = m; const a = ["xs", "sm", "md", "lg", "xl", "xxl"]; var t = (0, o.defineComponent)({ compatConfig: { MODE: 3 }, name: "ACol", inheritAttrs: !1, props: m(), setup(e, u) { let { slots: s, attrs: r } = u; const { gutter: n, supportFlexGap: j, wrap: g } = (0, G.useInjectRow)(), { prefixCls: y, direction: C } = (0, x.default)("col", e), [M, A] = (0, f.useColStyle)(y), K = (0, o.computed)(() => { const { span: h, order: b, offset: $, push: _, pull: T } = e, p = y.value; let L = {}; return a.forEach((I) => { let c = {}; const W = e[I]; typeof W == "number" ? c.span = W : typeof W == "object" && (c = W || {}), L = (0, w.default)((0, w.default)({}, L), { [`${p}-${I}-${c.span}`]: c.span !== void 0, [`${p}-${I}-order-${c.order}`]: c.order || c.order === 0, [`${p}-${I}-offset-${c.offset}`]: c.offset || c.offset === 0, [`${p}-${I}-push-${c.push}`]: c.push || c.push === 0, [`${p}-${I}-pull-${c.pull}`]: c.pull || c.pull === 0, [`${p}-rtl`]: C.value === "rtl" }); }), (0, q.default)(p, { [`${p}-${h}`]: h !== void 0, [`${p}-order-${b}`]: b, [`${p}-offset-${$}`]: $, [`${p}-push-${_}`]: _, [`${p}-pull-${T}`]: T }, L, r.class, A.value); }), F = (0, o.computed)(() => { const { flex: h } = e, b = n.value, $ = {}; if (b && b[0] > 0) { const _ = `${b[0] / 2}px`; $.paddingLeft = _, $.paddingRight = _; } if (b && b[1] > 0 && !j.value) { const _ = `${b[1] / 2}px`; $.paddingTop = _, $.paddingBottom = _; } return h && ($.flex = S(h), g.value === !1 && !$.minWidth && ($.minWidth = 0)), $; }); return () => { var h; return M((0, o.createVNode)("div", (0, v.default)((0, v.default)({}, r), {}, { class: K.value, style: [F.value, r.style] }), [(h = s.default) === null || h === void 0 ? void 0 : h.call(s)])); }; } }); return E.default = t, E; } export { me as a, le as b, ye as r };