element-plus-readonly-form-item
Version:
基于 ElementPlus 的表单只读态控件，完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入。
540 lines (539 loc) • 21.5 kB
JavaScript
var be = Object.defineProperty, Me = Object.defineProperties;
var we = Object.getOwnPropertyDescriptors;
var te = Object.getOwnPropertySymbols;
var le = Object.prototype.hasOwnProperty, ce = Object.prototype.propertyIsEnumerable;
var ue = (s, o, l) => o in s ? be(s, o, { enumerable: !0, configurable: !0, writable: !0, value: l }) : s[o] = l, re = (s, o) => {
for (var l in o || (o = {}))
le.call(o, l) && ue(s, l, o[l]);
if (te)
for (var l of te(o))
ce.call(o, l) && ue(s, l, o[l]);
return s;
}, ne = (s, o) => Me(s, we(o));
var de = (s, o) => {
var l = {};
for (var p in s)
le.call(s, p) && o.indexOf(p) < 0 && (l[p] = s[p]);
if (s != null && te)
for (var p of te(s))
o.indexOf(p) < 0 && ce.call(s, p) && (l[p] = s[p]);
return l;
};
import { defineComponent as Se, getCurrentInstance as De, inject as Ee, useSlots as Te, useAttrs as _e, ref as fe, computed as J, watch as ae, onMounted as ke, onBeforeUnmount as Oe, resolveComponent as xe, openBlock as pe, createBlock as Ae, normalizeProps as Ye, guardReactiveProps as Ce, createSlots as je, withCtx as me, createElementBlock as Fe, normalizeStyle as Pe, toDisplayString as Ie, renderSlot as he, renderList as Le, nextTick as Re } from "vue";
const He = Symbol("formContextKey"), We = Symbol("formItemContextKey");
var Ve = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : {};
function Ue(s) {
return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
}
var ye = { exports: {} };
(function(s, o) {
(function(l, p) {
s.exports = p();
})(Ve, function() {
var l = 1e3, p = 6e4, j = 36e5, S = "millisecond", g = "second", D = "minute", Y = "hour", E = "day", P = "week", T = "month", I = "quarter", O = "year", F = "date", q = "Invalid Date", Q = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, G = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, X = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(e) {
var t = ["th", "st", "nd", "rd"], r = e % 100;
return "[" + e + (t[(r - 20) % 10] || t[r] || t[0]) + "]";
} }, V = function(e, t, r) {
var a = String(e);
return !a || a.length >= t ? e : "" + Array(t + 1 - a.length).join(r) + e;
}, N = { s: V, z: function(e) {
var t = -e.utcOffset(), r = Math.abs(t), a = Math.floor(r / 60), n = r % 60;
return (t <= 0 ? "+" : "-") + V(a, 2, "0") + ":" + V(n, 2, "0");
}, m: function e(t, r) {
if (t.date() < r.date())
return -e(r, t);
var a = 12 * (r.year() - t.year()) + (r.month() - t.month()), n = t.clone().add(a, T), i = r - n < 0, u = t.clone().add(a + (i ? -1 : 1), T);
return +(-(a + (r - n) / (i ? n - u : u - n)) || 0);
}, a: function(e) {
return e < 0 ? Math.ceil(e) || 0 : Math.floor(e);
}, p: function(e) {
return { M: T, y: O, w: P, d: E, D: F, h: Y, m: D, s: g, ms: S, Q: I }[e] || String(e || "").toLowerCase().replace(/s$/, "");
}, u: function(e) {
return e === void 0;
} }, L = "en", _ = {};
_[L] = X;
var U = "$isDayjsObject", z = function(e) {
return e instanceof R || !(!e || !e[U]);
}, B = function e(t, r, a) {
var n;
if (!t)
return L;
if (typeof t == "string") {
var i = t.toLowerCase();
_[i] && (n = i), r && (_[i] = r, n = i);
var u = t.split("-");
if (!n && u.length > 1)
return e(u[0]);
} else {
var f = t.name;
_[f] = t, n = f;
}
return !a && n && (L = n), n || !a && L;
}, h = function(e, t) {
if (z(e))
return e.clone();
var r = typeof t == "object" ? t : {};
return r.date = e, r.args = arguments, new R(r);
}, d = N;
d.l = B, d.i = z, d.w = function(e, t) {
return h(e, { locale: t.$L, utc: t.$u, x: t.$x, $offset: t.$offset });
};
var R = function() {
function e(r) {
this.$L = B(r.locale, null, !0), this.parse(r), this.$x = this.$x || r.x || {}, this[U] = !0;
}
var t = e.prototype;
return t.parse = function(r) {
this.$d = function(a) {
var n = a.date, i = a.utc;
if (n === null)
return /* @__PURE__ */ new Date(NaN);
if (d.u(n))
return /* @__PURE__ */ new Date();
if (n instanceof Date)
return new Date(n);
if (typeof n == "string" && !/Z$/i.test(n)) {
var u = n.match(Q);
if (u) {
var f = u[2] - 1 || 0, m = (u[7] || "0").substring(0, 3);
return i ? new Date(Date.UTC(u[1], f, u[3] || 1, u[4] || 0, u[5] || 0, u[6] || 0, m)) : new Date(u[1], f, u[3] || 1, u[4] || 0, u[5] || 0, u[6] || 0, m);
}
}
return new Date(n);
}(r), this.init();
}, t.init = function() {
var r = this.$d;
this.$y = r.getFullYear(), this.$M = r.getMonth(), this.$D = r.getDate(), this.$W = r.getDay(), this.$H = r.getHours(), this.$m = r.getMinutes(), this.$s = r.getSeconds(), this.$ms = r.getMilliseconds();
}, t.$utils = function() {
return d;
}, t.isValid = function() {
return this.$d.toString() !== q;
}, t.isSame = function(r, a) {
var n = h(r);
return this.startOf(a) <= n && n <= this.endOf(a);
}, t.isAfter = function(r, a) {
return h(r) < this.startOf(a);
}, t.isBefore = function(r, a) {
return this.endOf(a) < h(r);
}, t.$g = function(r, a, n) {
return d.u(r) ? this[a] : this.set(n, r);
}, t.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, t.valueOf = function() {
return this.$d.getTime();
}, t.startOf = function(r, a) {
var n = this, i = !!d.u(a) || a, u = d.p(r), f = function(k, b) {
var w = d.w(n.$u ? Date.UTC(n.$y, b, k) : new Date(n.$y, b, k), n);
return i ? w : w.endOf(E);
}, m = function(k, b) {
return d.w(n.toDate()[k].apply(n.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(b)), n);
}, $ = this.$W, v = this.$M, M = this.$D, C = "set" + (this.$u ? "UTC" : "");
switch (u) {
case O:
return i ? f(1, 0) : f(31, 11);
case T:
return i ? f(1, v) : f(0, v + 1);
case P:
var c = this.$locale().weekStart || 0, y = ($ < c ? $ + 7 : $) - c;
return f(i ? M - y : M + (6 - y), v);
case E:
case F:
return m(C + "Hours", 0);
case Y:
return m(C + "Minutes", 1);
case D:
return m(C + "Seconds", 2);
case g:
return m(C + "Milliseconds", 3);
default:
return this.clone();
}
}, t.endOf = function(r) {
return this.startOf(r, !1);
}, t.$set = function(r, a) {
var n, i = d.p(r), u = "set" + (this.$u ? "UTC" : ""), f = (n = {}, n[E] = u + "Date", n[F] = u + "Date", n[T] = u + "Month", n[O] = u + "FullYear", n[Y] = u + "Hours", n[D] = u + "Minutes", n[g] = u + "Seconds", n[S] = u + "Milliseconds", n)[i], m = i === E ? this.$D + (a - this.$W) : a;
if (i === T || i === O) {
var $ = this.clone().set(F, 1);
$.$d[f](m), $.init(), this.$d = $.set(F, Math.min(this.$D, $.daysInMonth())).$d;
} else
f && this.$d[f](m);
return this.init(), this;
}, t.set = function(r, a) {
return this.clone().$set(r, a);
}, t.get = function(r) {
return this[d.p(r)]();
}, t.add = function(r, a) {
var n, i = this;
r = Number(r);
var u = d.p(a), f = function(v) {
var M = h(i);
return d.w(M.date(M.date() + Math.round(v * r)), i);
};
if (u === T)
return this.set(T, this.$M + r);
if (u === O)
return this.set(O, this.$y + r);
if (u === E)
return f(1);
if (u === P)
return f(7);
var m = (n = {}, n[D] = p, n[Y] = j, n[g] = l, n)[u] || 1, $ = this.$d.getTime() + r * m;
return d.w($, this);
}, t.subtract = function(r, a) {
return this.add(-1 * r, a);
}, t.format = function(r) {
var a = this, n = this.$locale();
if (!this.isValid())
return n.invalidDate || q;
var i = r || "YYYY-MM-DDTHH:mm:ssZ", u = d.z(this), f = this.$H, m = this.$m, $ = this.$M, v = n.weekdays, M = n.months, C = n.meridiem, c = function(b, w, x, H) {
return b && (b[w] || b(a, i)) || x[w].slice(0, H);
}, y = function(b) {
return d.s(f % 12 || 12, b, "0");
}, k = C || function(b, w, x) {
var H = b < 12 ? "AM" : "PM";
return x ? H.toLowerCase() : H;
};
return i.replace(G, function(b, w) {
return w || function(x) {
switch (x) {
case "YY":
return String(a.$y).slice(-2);
case "YYYY":
return d.s(a.$y, 4, "0");
case "M":
return $ + 1;
case "MM":
return d.s($ + 1, 2, "0");
case "MMM":
return c(n.monthsShort, $, M, 3);
case "MMMM":
return c(M, $);
case "D":
return a.$D;
case "DD":
return d.s(a.$D, 2, "0");
case "d":
return String(a.$W);
case "dd":
return c(n.weekdaysMin, a.$W, v, 2);
case "ddd":
return c(n.weekdaysShort, a.$W, v, 3);
case "dddd":
return v[a.$W];
case "H":
return String(f);
case "HH":
return d.s(f, 2, "0");
case "h":
return y(1);
case "hh":
return y(2);
case "a":
return k(f, m, !0);
case "A":
return k(f, m, !1);
case "m":
return String(m);
case "mm":
return d.s(m, 2, "0");
case "s":
return String(a.$s);
case "ss":
return d.s(a.$s, 2, "0");
case "SSS":
return d.s(a.$ms, 3, "0");
case "Z":
return u;
}
return null;
}(b) || u.replace(":", "");
});
}, t.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, t.diff = function(r, a, n) {
var i, u = this, f = d.p(a), m = h(r), $ = (m.utcOffset() - this.utcOffset()) * p, v = this - m, M = function() {
return d.m(u, m);
};
switch (f) {
case O:
i = M() / 12;
break;
case T:
i = M();
break;
case I:
i = M() / 3;
break;
case P:
i = (v - $) / 6048e5;
break;
case E:
i = (v - $) / 864e5;
break;
case Y:
i = v / j;
break;
case D:
i = v / p;
break;
case g:
i = v / l;
break;
default:
i = v;
}
return n ? i : d.a(i);
}, t.daysInMonth = function() {
return this.endOf(T).$D;
}, t.$locale = function() {
return _[this.$L];
}, t.locale = function(r, a) {
if (!r)
return this.$L;
var n = this.clone(), i = B(r, a, !0);
return i && (n.$L = i), n;
}, t.clone = function() {
return d.w(this.$d, this);
}, t.toDate = function() {
return new Date(this.valueOf());
}, t.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, t.toISOString = function() {
return this.$d.toISOString();
}, t.toString = function() {
return this.$d.toUTCString();
}, e;
}(), ee = R.prototype;
return h.prototype = ee, [["$ms", S], ["$s", g], ["$m", D], ["$H", Y], ["$W", E], ["$M", T], ["$y", O], ["$D", F]].forEach(function(e) {
ee[e[1]] = function(t) {
return this.$g(t, e[0], e[1]);
};
}), h.extend = function(e, t) {
return e.$i || (e(t, R, h), e.$i = !0), h;
}, h.locale = B, h.isDayjs = z, h.unix = function(e) {
return h(1e3 * e);
}, h.en = _[L], h.Ls = _, h.p = {}, h;
});
})(ye);
var Be = ye.exports;
const oe = /* @__PURE__ */ Ue(Be), Ke = [
"ElInput",
"ElInputNumber",
"ElRadioGroup",
"ElCheckboxGroup",
"ElSelect",
"ElCascader",
"ElSwitch",
"ElSlider",
"ElTimeSelect",
"ElTimePicker",
"ElDatePicker",
"ElRate",
"ElColorPicker",
"ElTransfer"
], ie = "HH:mm:ss", Z = "YYYY-MM-DD", Ge = {
date: Z,
dates: Z,
week: "gggg[w]ww",
year: "YYYY",
month: "YYYY-MM",
datetime: `${Z} ${ie}`,
monthrange: "YYYY-MM",
daterange: Z,
datetimerange: `${Z} ${ie}`
}, ze = (s) => Array.isArray(s) && s.every((o) => Array.isArray(o)), $e = (s) => {
const o = "ElForm";
return s.type.name === o ? s : $e(s.parent);
}, ve = (s) => {
if (!s)
return;
let o;
for (let l = 0; l < s.length; l++)
if (o = s[l], typeof o.type == "object" && Ke.includes(o.type.name) || (o = ve(o.children), o))
return o;
return o;
}, K = /* @__PURE__ */ Se({
name: "ReadonlyFormItem",
__name: "readonly-form-item",
props: {
value: {},
readonly: { type: Boolean, default: void 0 },
emptyText: {},
separator: {},
rangeSeparator: {},
dateFormat: {}
},
setup(s) {
const o = De(), l = $e(o), p = Ee(He), j = Te(), S = _e(), g = s, D = fe(l.proxy.model), Y = fe(""), E = J(() => g.readonly !== void 0 ? g.readonly : l.proxy.$attrs.readonly), P = J(() => {
var e;
return ["ElTableRow", "ElTableBody"].includes((e = o == null ? void 0 : o.parent) == null ? void 0 : e.type.name);
}), T = J(() => ne(re({}, S), {
labelWidth: S.label ? S.labelWidth || l.props.labelWidth : "auto",
style: ne(re({}, S.style), {
marginBottom: P.value && "0"
})
})), I = J(() => (o == null ? void 0 : o.appContext.config.globalProperties.$ReadonlyFormItem) || {}), O = J(
() => P.value ? {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
display: "inline-block",
width: "100%",
verticalAlign: "bottom"
} : { wordBreak: "break-all" }
), F = () => {
const r = j, { default: e } = r;
return de(r, ["default"]);
}, q = () => ve(j.default()), Q = (e) => e == null ? void 0 : e.type.name, G = (e) => {
var t;
return (t = e == null ? void 0 : e.children.default()) == null ? void 0 : t[0];
}, X = (e) => {
var t;
return (t = e == null ? void 0 : e.props.type) != null ? t : "date";
}, V = (e) => {
var r;
const t = {
ElTimePicker: ie,
ElDatePicker: Ge[X(e)]
};
return g.dateFormat || I.value.dateFormat || ((r = e == null ? void 0 : e.props) == null ? void 0 : r.format) || t[Q(e)];
}, N = (e) => {
var t, r;
return (r = (t = G(e)) == null ? void 0 : t.children) == null ? void 0 : r.map((a) => ({
label: G(a).children,
value: a.props.label
}));
}, L = () => g.emptyText || I.value.emptyText || "-", _ = () => g.separator || I.value.separator || ",", U = () => g.rangeSeparator || I.value.rangeSeparator || "~", z = () => {
var e, t;
return (t = (e = S.prop) == null ? void 0 : e.split(".")) == null ? void 0 : t.reduce((r, a) => r == null ? void 0 : r[a], D.value);
}, B = () => {
var r, a, n, i, u, f, m, $, v, M, C;
if ("value" in (o == null ? void 0 : o.vnode.props))
return g.value;
const e = z(), t = q();
switch (Q(t)) {
case "ElSelect": {
const c = (r = G(t).children) == null ? void 0 : r.map((y) => y.props);
return Array.isArray(e) ? (n = (a = c == null ? void 0 : c.filter((y) => e == null ? void 0 : e.includes(y.value))) == null ? void 0 : a.map((y) => y.label)) == null ? void 0 : n.join(_()) : (i = c == null ? void 0 : c.find((y) => y.value === e)) == null ? void 0 : i.label;
}
case "ElRadioGroup":
return (f = (u = N(t)) == null ? void 0 : u.find((c) => c.value === e)) == null ? void 0 : f.label;
case "ElCheckboxGroup":
return (v = ($ = (m = N(t)) == null ? void 0 : m.filter((c) => e == null ? void 0 : e.includes(c.value))) == null ? void 0 : $.map((c) => c.label)) == null ? void 0 : v.join(_());
case "ElCascader": {
const { options: c, separator: y = "/", props: { label: k = "label", value: b = "value", children: w = "children" } = {} } = t == null ? void 0 : t.props, x = (W, A) => (W.push(A), A[w] && A[w].length && A[w].reduce(x, W), W), H = (W) => {
var A;
return (A = c == null ? void 0 : c.reduce(x, []).find((ge) => ge[b] === W)) == null ? void 0 : A[k];
};
return ze(e) ? (M = e.map((W) => {
var A;
return (A = W.map(H)) == null ? void 0 : A.join(y);
})) == null ? void 0 : M.join(_()) : e.map(H).join(y);
}
case "ElTransfer": {
const { data: c, props: { key: y = "key", label: k = "label" } = {} } = t == null ? void 0 : t.props;
return (C = e.map((b) => {
var w;
return (w = c.find((x) => x[y] === b)) == null ? void 0 : w[k];
})) == null ? void 0 : C.join(_());
}
case "ElTimePicker":
return Array.isArray(e) && e.length ? e.map((c) => oe(c).format(V(t))).join(U()) : e;
case "ElDatePicker": {
if (!e)
return e;
const c = V(t), y = ["monthrange", "daterange", "datetimerange"].includes(X(t)) ? U() : _();
return Array.isArray(e) ? e.map((k) => oe(k).format(c)).join(y) : oe(e).format(c);
}
case "ElSwitch": {
const { activeText: c, inactiveText: y } = t == null ? void 0 : t.props;
return e ? c || (t == null ? void 0 : t.props["active-text"]) || "开" : y || (t == null ? void 0 : t.props["inactive-text"]) || "关";
}
case "ElSlider":
return Array.isArray(e) ? e.join(U()) : e;
default:
return e;
}
}, h = () => {
try {
const e = B();
Y.value = typeof e == "number" ? e : e || L();
} catch (e) {
}
}, d = (e) => {
Re(() => {
var r, a, n, i, u;
const t = (u = (i = (n = (a = (r = o == null ? void 0 : o.proxy) == null ? void 0 : r.$el) == null ? void 0 : a.__vnode) == null ? void 0 : n.ctx) == null ? void 0 : i.provides) == null ? void 0 : u[We];
t && (e ? p == null || p.removeField(t) : p == null || p.addField(t));
});
};
ae(
() => l.proxy.model,
(e) => {
D.value = e, h();
},
{ deep: !0, immediate: !0 }
), ae(() => S, h, { deep: !0 }), ae(E, d), ke(() => {
E.value && d(!0);
}), Oe(() => {
var e, t;
E.value && ((t = (e = o == null ? void 0 : o.vnode) == null ? void 0 : e.props) == null || delete t.prop);
});
let R = 0, ee = setInterval(() => {
R === 10 && clearInterval(ee), R++, h();
}, 1e3);
return (e, t) => {
const r = xe("el-form-item");
return pe(), Ae(r, Ye(Ce(T.value)), je({
default: me(() => [
E.value ? (pe(), Fe("span", {
key: 0,
style: Pe(O.value)
}, Ie(Y.value), 5)) : he(e.$slots, "default", { key: 1 })
]),
_: 2
}, [
Le(F(), (a, n) => ({
name: n,
fn: me(() => [
he(e.$slots, n)
])
}))
]), 1040);
};
}
});
var se, Je = ["scroll", "wheel", "touchstart", "touchmove", "touchenter", "touchend", "touchleave", "mouseout", "mouseleave", "mouseup", "mousedown", "mousemove", "mouseenter", "mousewheel", "mouseover"];
if (function() {
var s = !1;
try {
var o = Object.defineProperty({}, "passive", { get: function() {
s = !0;
} });
window.addEventListener("test", null, o), window.removeEventListener("test", null, o);
} catch (l) {
}
return s;
}()) {
var Ze = EventTarget.prototype.addEventListener;
se = Ze, EventTarget.prototype.addEventListener = function(s, o, l) {
var p, j = typeof l == "object" && l !== null, S = j ? l.capture : l;
(l = j ? function(g) {
var D = Object.getOwnPropertyDescriptor(g, "passive");
return D && D.writable !== !0 && D.set === void 0 ? Object.assign({}, g) : g;
}(l) : {}).passive = (p = l.passive) !== void 0 ? p : Je.indexOf(s) !== -1 && !0, l.capture = S !== void 0 && S, se.call(this, s, o, l);
}, EventTarget.prototype.addEventListener._original = se;
}
const qe = (s, o = {}) => {
s.config.globalProperties.$ReadonlyFormItem = o, s.component(K.name, K);
};
K.install = (s) => {
s.component(K.name, K);
};
const Ne = {
install: qe,
ReadonlyFormItem: K
};
export {
Ne as default
};