epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
249 lines (248 loc) • 7.31 kB
JavaScript
import { ref as S, inject as O, computed as v, defineComponent as y, openBlock as B, createElementBlock as k, normalizeClass as b, unref as e, createElementVNode as g, withDirectives as C, isRef as N, vModelRadio as z, withModifiers as F, renderSlot as I, createTextVNode as P, toDisplayString as D, nextTick as K, normalizeStyle as W, onMounted as J, provide as Q, reactive as X, toRefs as Y, watch as Z } from "vue";
import { a5 as E, a8 as T, at as V, aB as $, aK as h, aw as w, au as x, ad as ee, aD as oe, a9 as _, ag as G, bi as ae, aa as le, aF as se, bC as A } from "./index-97ce4605.js";
import { u as ne, a as te } from "./use-form-item-5dfea179.js";
const M = E({
size: T,
disabled: Boolean,
label: {
type: [String, Number, Boolean],
default: ""
}
}), re = E({
...M,
modelValue: {
type: [String, Number, Boolean],
default: ""
},
name: {
type: String,
default: ""
},
border: Boolean
}), L = {
[V]: (s) => $(s) || h(s) || w(s),
[x]: (s) => $(s) || h(s) || w(s)
}, U = Symbol("radioGroupKey"), j = (s, m) => {
const n = S(), a = O(U, void 0), d = v(() => !!a), c = v({
get() {
return d.value ? a.modelValue : s.modelValue;
},
set(i) {
d.value ? a.changeEvent(i) : m && m(V, i), n.value.checked = s.modelValue === s.label;
}
}), r = ee(v(() => a == null ? void 0 : a.size)), u = oe(v(() => a == null ? void 0 : a.disabled)), l = S(!1), p = v(() => u.value || d.value && c.value !== s.label ? -1 : 0);
return {
radioRef: n,
isGroup: d,
radioGroup: a,
focus: l,
size: r,
disabled: u,
tabIndex: p,
modelValue: c
};
}, ie = ["value", "name", "disabled"], de = y({
name: "ElRadio"
}), ue = /* @__PURE__ */ y({
...de,
props: re,
emits: L,
setup(s, { emit: m }) {
const n = s, a = _("radio"), { radioRef: d, radioGroup: c, focus: r, size: u, disabled: l, modelValue: p } = j(n, m);
function i() {
K(() => m("change", p.value));
}
return (o, t) => {
var f;
return B(), k("label", {
class: b([
e(a).b(),
e(a).is("disabled", e(l)),
e(a).is("focus", e(r)),
e(a).is("bordered", o.border),
e(a).is("checked", e(p) === o.label),
e(a).m(e(u))
])
}, [
g("span", {
class: b([
e(a).e("input"),
e(a).is("disabled", e(l)),
e(a).is("checked", e(p) === o.label)
])
}, [
C(g("input", {
ref_key: "radioRef",
ref: d,
"onUpdate:modelValue": t[0] || (t[0] = (R) => N(p) ? p.value = R : null),
class: b(e(a).e("original")),
value: o.label,
name: o.name || ((f = e(c)) == null ? void 0 : f.name),
disabled: e(l),
type: "radio",
onFocus: t[1] || (t[1] = (R) => r.value = !0),
onBlur: t[2] || (t[2] = (R) => r.value = !1),
onChange: i
}, null, 42, ie), [
[z, e(p)]
]),
g("span", {
class: b(e(a).e("inner"))
}, null, 2)
], 2),
g("span", {
class: b(e(a).e("label")),
onKeydown: t[3] || (t[3] = F(() => {
}, ["stop"]))
}, [
I(o.$slots, "default", {}, () => [
P(D(o.label), 1)
])
], 34)
], 2);
};
}
});
var pe = /* @__PURE__ */ G(ue, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/radio/src/radio.vue"]]);
const me = E({
...M,
name: {
type: String,
default: ""
}
}), ce = ["value", "name", "disabled"], be = y({
name: "ElRadioButton"
}), fe = /* @__PURE__ */ y({
...be,
props: me,
setup(s) {
const m = s, n = _("radio"), { radioRef: a, focus: d, size: c, disabled: r, modelValue: u, radioGroup: l } = j(m), p = v(() => ({
backgroundColor: (l == null ? void 0 : l.fill) || "",
borderColor: (l == null ? void 0 : l.fill) || "",
boxShadow: l != null && l.fill ? `-1px 0 0 0 ${l.fill}` : "",
color: (l == null ? void 0 : l.textColor) || ""
}));
return (i, o) => {
var t;
return B(), k("label", {
class: b([
e(n).b("button"),
e(n).is("active", e(u) === i.label),
e(n).is("disabled", e(r)),
e(n).is("focus", e(d)),
e(n).bm("button", e(c))
])
}, [
C(g("input", {
ref_key: "radioRef",
ref: a,
"onUpdate:modelValue": o[0] || (o[0] = (f) => N(u) ? u.value = f : null),
class: b(e(n).be("button", "original-radio")),
value: i.label,
type: "radio",
name: i.name || ((t = e(l)) == null ? void 0 : t.name),
disabled: e(r),
onFocus: o[1] || (o[1] = (f) => d.value = !0),
onBlur: o[2] || (o[2] = (f) => d.value = !1)
}, null, 42, ce), [
[z, e(u)]
]),
g("span", {
class: b(e(n).be("button", "inner")),
style: W(e(u) === i.label ? e(p) : {}),
onKeydown: o[3] || (o[3] = F(() => {
}, ["stop"]))
}, [
I(i.$slots, "default", {}, () => [
P(D(i.label), 1)
])
], 38)
], 2);
};
}
});
var q = /* @__PURE__ */ G(fe, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/radio/src/radio-button.vue"]]);
const ve = E({
id: {
type: String,
default: void 0
},
size: T,
disabled: Boolean,
modelValue: {
type: [String, Number, Boolean],
default: ""
},
fill: {
type: String,
default: ""
},
label: {
type: String,
default: void 0
},
textColor: {
type: String,
default: ""
},
name: {
type: String,
default: void 0
},
validateEvent: {
type: Boolean,
default: !0
}
}), ge = L, ye = ["id", "aria-label", "aria-labelledby"], Ee = y({
name: "ElRadioGroup"
}), Re = /* @__PURE__ */ y({
...Ee,
props: ve,
emits: ge,
setup(s, { emit: m }) {
const n = s, a = _("radio"), d = ae(), c = S(), { formItem: r } = ne(), { inputId: u, isLabeledByFormItem: l } = te(n, {
formItemContext: r
}), p = (o) => {
m(V, o), K(() => m("change", o));
};
J(() => {
const o = c.value.querySelectorAll("[type=radio]"), t = o[0];
!Array.from(o).some((f) => f.checked) && t && (t.tabIndex = 0);
});
const i = v(() => n.name || d.value);
return Q(U, X({
...Y(n),
changeEvent: p,
name: i
})), Z(() => n.modelValue, () => {
n.validateEvent && (r == null || r.validate("change").catch((o) => le(o)));
}), (o, t) => (B(), k("div", {
id: e(u),
ref_key: "radioGroupRef",
ref: c,
class: b(e(a).b("group")),
role: "radiogroup",
"aria-label": e(l) ? void 0 : o.label || "radio-group",
"aria-labelledby": e(l) ? e(r).labelId : void 0
}, [
I(o.$slots, "default")
], 10, ye));
}
});
var H = /* @__PURE__ */ G(Re, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/radio/src/radio-group.vue"]]);
const Ie = se(pe, {
RadioButton: q,
RadioGroup: H
}), Ve = A(H), _e = A(q);
export {
Ie as E,
re as a,
M as b,
ge as c,
ve as d,
me as e,
U as f,
_e as g,
Ve as h,
L as r
};