UNPKG

epic-designer-cjh

Version:

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

439 lines (438 loc) 13.7 kB
import { inject as I, computed as p, getCurrentInstance as W, watch as j, nextTick as H, ref as z, toRaw as O, defineComponent as L, useSlots as J, openBlock as C, createBlock as Q, resolveDynamicComponent as X, unref as n, normalizeClass as x, withCtx as Y, createElementVNode as U, withDirectives as $, createElementBlock as y, isRef as V, vModelCheckbox as w, renderSlot as P, Fragment as re, createTextVNode as Z, toDisplayString as _, createCommentVNode as G, normalizeStyle as de, provide as ce, toRefs as be } from "vue"; import { z as ve, bD as me, A as fe, a8 as ee, at as F, aB as A, aK as M, aw as D, am as N, aD as ke, aa as le, a4 as E, bw as he, ad as q, a9 as T, ag as R, a5 as pe, a6 as ge, aF as xe, bC as ae } from "./index-97ce4605.js"; import { u as K, a as ne } from "./use-form-item-5dfea179.js"; import { i as Ce } from "./isEqual-eac09a18.js"; import { h as ye } from "./hasIn-b4ac620c.js"; import { f as Se } from "./_flatRest-fa7c8eb8.js"; function Le(e, u, i) { for (var a = -1, k = u.length, c = {}; ++a < k; ) { var b = u[a], t = ve(e, b); i(t, b) && me(c, fe(b, e), t); } return c; } function Be(e, u) { return Le(e, u, function(i, a) { return ye(e, a); }); } var Ee = Se(function(e, u) { return e == null ? {} : Be(e, u); }); const Ie = Ee, te = { modelValue: { type: [Number, String, Boolean], default: void 0 }, label: { type: [String, Boolean, Number, Object] }, indeterminate: Boolean, disabled: Boolean, checked: Boolean, name: { type: String, default: void 0 }, trueLabel: { type: [String, Number], default: void 0 }, falseLabel: { type: [String, Number], default: void 0 }, id: { type: String, default: void 0 }, controls: { type: String, default: void 0 }, border: Boolean, size: ee, tabindex: [String, Number], validateEvent: { type: Boolean, default: !0 } }, oe = { [F]: (e) => A(e) || M(e) || D(e), change: (e) => A(e) || M(e) || D(e) }, B = Symbol("checkboxGroupContextKey"), $e = ({ model: e, isChecked: u }) => { const i = I(B, void 0), a = p(() => { var c, b; const t = (c = i == null ? void 0 : i.max) == null ? void 0 : c.value, v = (b = i == null ? void 0 : i.min) == null ? void 0 : b.value; return !N(t) && e.value.length >= t && !u.value || !N(v) && e.value.length <= v && u.value; }); return { isDisabled: ke(p(() => (i == null ? void 0 : i.disabled.value) || a.value)), isLimitDisabled: a }; }, Ve = (e, { model: u, isLimitExceeded: i, hasOwnLabel: a, isDisabled: k, isLabeledByFormItem: c }) => { const b = I(B, void 0), { formItem: t } = K(), { emit: v } = W(); function l(s) { var r, d; return s === e.trueLabel || s === !0 ? (r = e.trueLabel) != null ? r : !0 : (d = e.falseLabel) != null ? d : !1; } function m(s, r) { v("change", l(s), r); } function h(s) { if (i.value) return; const r = s.target; v("change", l(r.checked), s); } async function S(s) { i.value || !a.value && !k.value && c.value && (s.composedPath().some((f) => f.tagName === "LABEL") || (u.value = l([!1, e.falseLabel].includes(u.value)), await H(), m(u.value, s))); } const o = p(() => (b == null ? void 0 : b.validateEvent) || e.validateEvent); return j(() => e.modelValue, () => { o.value && (t == null || t.validate("change").catch((s) => le(s))); }), { handleChange: h, onClickRoot: S }; }, we = (e) => { const u = z(!1), { emit: i } = W(), a = I(B, void 0), k = p(() => N(a) === !1), c = z(!1); return { model: p({ get() { var t, v; return k.value ? (t = a == null ? void 0 : a.modelValue) == null ? void 0 : t.value : (v = e.modelValue) != null ? v : u.value; }, set(t) { var v, l; k.value && E(t) ? (c.value = ((v = a == null ? void 0 : a.max) == null ? void 0 : v.value) !== void 0 && t.length > (a == null ? void 0 : a.max.value), c.value === !1 && ((l = a == null ? void 0 : a.changeEvent) == null || l.call(a, t))) : (i(F, t), u.value = t); } }), isGroup: k, isLimitExceeded: c }; }, Fe = (e, u, { model: i }) => { const a = I(B, void 0), k = z(!1), c = p(() => { const l = i.value; return D(l) ? l : E(l) ? he(e.label) ? l.map(O).some((m) => Ce(m, e.label)) : l.map(O).includes(e.label) : l != null ? l === e.trueLabel : !!l; }), b = q(p(() => { var l; return (l = a == null ? void 0 : a.size) == null ? void 0 : l.value; }), { prop: !0 }), t = q(p(() => { var l; return (l = a == null ? void 0 : a.size) == null ? void 0 : l.value; })), v = p(() => !!(u.default || e.label)); return { checkboxButtonSize: b, isChecked: c, isFocused: k, checkboxSize: t, hasOwnLabel: v }; }, ze = (e, { model: u }) => { function i() { E(u.value) && !u.value.includes(e.label) ? u.value.push(e.label) : u.value = e.trueLabel || !0; } e.checked && i(); }, se = (e, u) => { const { formItem: i } = K(), { model: a, isGroup: k, isLimitExceeded: c } = we(e), { isFocused: b, isChecked: t, checkboxButtonSize: v, checkboxSize: l, hasOwnLabel: m } = Fe(e, u, { model: a }), { isDisabled: h } = $e({ model: a, isChecked: t }), { inputId: S, isLabeledByFormItem: o } = ne(e, { formItemContext: i, disableIdGeneration: m, disableIdManagement: k }), { handleChange: s, onClickRoot: r } = Ve(e, { model: a, isLimitExceeded: c, hasOwnLabel: m, isDisabled: h, isLabeledByFormItem: o }); return ze(e, { model: a }), { inputId: S, isLabeledByFormItem: o, isChecked: t, isDisabled: h, isFocused: b, checkboxButtonSize: v, checkboxSize: l, hasOwnLabel: m, model: a, handleChange: s, onClickRoot: r }; }, Ge = ["tabindex", "role", "aria-checked"], De = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"], Ne = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"], Pe = L({ name: "ElCheckbox" }), Te = /* @__PURE__ */ L({ ...Pe, props: te, emits: oe, setup(e) { const u = e, i = J(), { inputId: a, isLabeledByFormItem: k, isChecked: c, isDisabled: b, isFocused: t, checkboxSize: v, hasOwnLabel: l, model: m, handleChange: h, onClickRoot: S } = se(u, i), o = T("checkbox"), s = p(() => [ o.b(), o.m(v.value), o.is("disabled", b.value), o.is("bordered", u.border), o.is("checked", c.value) ]), r = p(() => [ o.e("input"), o.is("disabled", b.value), o.is("checked", c.value), o.is("indeterminate", u.indeterminate), o.is("focus", t.value) ]); return (d, f) => (C(), Q(X(!n(l) && n(k) ? "span" : "label"), { class: x(n(s)), "aria-controls": d.indeterminate ? d.controls : null, onClick: n(S) }, { default: Y(() => [ U("span", { class: x(n(r)), tabindex: d.indeterminate ? 0 : void 0, role: d.indeterminate ? "checkbox" : void 0, "aria-checked": d.indeterminate ? "mixed" : void 0 }, [ d.trueLabel || d.falseLabel ? $((C(), y("input", { key: 0, id: n(a), "onUpdate:modelValue": f[0] || (f[0] = (g) => V(m) ? m.value = g : null), class: x(n(o).e("original")), type: "checkbox", "aria-hidden": d.indeterminate ? "true" : "false", name: d.name, tabindex: d.tabindex, disabled: n(b), "true-value": d.trueLabel, "false-value": d.falseLabel, onChange: f[1] || (f[1] = (...g) => n(h) && n(h)(...g)), onFocus: f[2] || (f[2] = (g) => t.value = !0), onBlur: f[3] || (f[3] = (g) => t.value = !1) }, null, 42, De)), [ [w, n(m)] ]) : $((C(), y("input", { key: 1, id: n(a), "onUpdate:modelValue": f[4] || (f[4] = (g) => V(m) ? m.value = g : null), class: x(n(o).e("original")), type: "checkbox", "aria-hidden": d.indeterminate ? "true" : "false", disabled: n(b), value: d.label, name: d.name, tabindex: d.tabindex, onChange: f[5] || (f[5] = (...g) => n(h) && n(h)(...g)), onFocus: f[6] || (f[6] = (g) => t.value = !0), onBlur: f[7] || (f[7] = (g) => t.value = !1) }, null, 42, Ne)), [ [w, n(m)] ]), U("span", { class: x(n(o).e("inner")) }, null, 2) ], 10, Ge), n(l) ? (C(), y("span", { key: 0, class: x(n(o).e("label")) }, [ P(d.$slots, "default"), d.$slots.default ? G("v-if", !0) : (C(), y(re, { key: 0 }, [ Z(_(d.label), 1) ], 64)) ], 2)) : G("v-if", !0) ]), _: 3 }, 8, ["class", "aria-controls", "onClick"])); } }); var Re = /* @__PURE__ */ R(Te, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/checkbox/src/checkbox.vue"]]); const Ke = ["name", "tabindex", "disabled", "true-value", "false-value"], Oe = ["name", "tabindex", "disabled", "value"], Ue = L({ name: "ElCheckboxButton" }), Ae = /* @__PURE__ */ L({ ...Ue, props: te, emits: oe, setup(e) { const u = e, i = J(), { isFocused: a, isChecked: k, isDisabled: c, checkboxButtonSize: b, model: t, handleChange: v } = se(u, i), l = I(B, void 0), m = T("checkbox"), h = p(() => { var o, s, r, d; const f = (s = (o = l == null ? void 0 : l.fill) == null ? void 0 : o.value) != null ? s : ""; return { backgroundColor: f, borderColor: f, color: (d = (r = l == null ? void 0 : l.textColor) == null ? void 0 : r.value) != null ? d : "", boxShadow: f ? `-1px 0 0 0 ${f}` : void 0 }; }), S = p(() => [ m.b("button"), m.bm("button", b.value), m.is("disabled", c.value), m.is("checked", k.value), m.is("focus", a.value) ]); return (o, s) => (C(), y("label", { class: x(n(S)) }, [ o.trueLabel || o.falseLabel ? $((C(), y("input", { key: 0, "onUpdate:modelValue": s[0] || (s[0] = (r) => V(t) ? t.value = r : null), class: x(n(m).be("button", "original")), type: "checkbox", name: o.name, tabindex: o.tabindex, disabled: n(c), "true-value": o.trueLabel, "false-value": o.falseLabel, onChange: s[1] || (s[1] = (...r) => n(v) && n(v)(...r)), onFocus: s[2] || (s[2] = (r) => a.value = !0), onBlur: s[3] || (s[3] = (r) => a.value = !1) }, null, 42, Ke)), [ [w, n(t)] ]) : $((C(), y("input", { key: 1, "onUpdate:modelValue": s[4] || (s[4] = (r) => V(t) ? t.value = r : null), class: x(n(m).be("button", "original")), type: "checkbox", name: o.name, tabindex: o.tabindex, disabled: n(c), value: o.label, onChange: s[5] || (s[5] = (...r) => n(v) && n(v)(...r)), onFocus: s[6] || (s[6] = (r) => a.value = !0), onBlur: s[7] || (s[7] = (r) => a.value = !1) }, null, 42, Oe)), [ [w, n(t)] ]), o.$slots.default || o.label ? (C(), y("span", { key: 2, class: x(n(m).be("button", "inner")), style: de(n(k) ? n(h) : void 0) }, [ P(o.$slots, "default", {}, () => [ Z(_(o.label), 1) ]) ], 6)) : G("v-if", !0) ], 2)); } }); var ue = /* @__PURE__ */ R(Ae, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/checkbox/src/checkbox-button.vue"]]); const Me = pe({ modelValue: { type: ge(Array), default: () => [] }, disabled: Boolean, min: Number, max: Number, size: ee, label: String, fill: String, textColor: String, tag: { type: String, default: "div" }, validateEvent: { type: Boolean, default: !0 } }), qe = { [F]: (e) => E(e), change: (e) => E(e) }, We = L({ name: "ElCheckboxGroup" }), je = /* @__PURE__ */ L({ ...We, props: Me, emits: qe, setup(e, { emit: u }) { const i = e, a = T("checkbox"), { formItem: k } = K(), { inputId: c, isLabeledByFormItem: b } = ne(i, { formItemContext: k }), t = async (l) => { u(F, l), await H(), u("change", l); }, v = p({ get() { return i.modelValue; }, set(l) { t(l); } }); return ce(B, { ...Ie(be(i), [ "size", "min", "max", "disabled", "validateEvent", "fill", "textColor" ]), modelValue: v, changeEvent: t }), j(() => i.modelValue, () => { i.validateEvent && (k == null || k.validate("change").catch((l) => le(l))); }), (l, m) => { var h; return C(), Q(X(l.tag), { id: n(c), class: x(n(a).b("group")), role: "group", "aria-label": n(b) ? void 0 : l.label || "checkbox-group", "aria-labelledby": n(b) ? (h = n(k)) == null ? void 0 : h.labelId : void 0 }, { default: Y(() => [ P(l.$slots, "default") ]), _: 3 }, 8, ["id", "class", "aria-label", "aria-labelledby"]); }; } }); var ie = /* @__PURE__ */ R(je, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/checkbox/src/checkbox-group.vue"]]); const _e = xe(Re, { CheckboxButton: ue, CheckboxGroup: ie }), el = ae(ue), ll = ae(ie); export { _e as E, Me as a, oe as b, qe as c, te as d, B as e, el as f, ll as g };