@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
297 lines (296 loc) • 10.3 kB
JavaScript
import { defineComponent as ge, useSlots as ke, inject as q, toRef as Se, ref as p, shallowReadonly as Ve, reactive as Fe, computed as a, provide as Re, watch as We, onMounted as Le, onBeforeUnmount as _e, renderSlot as f, createBlock as w, unref as l, normalizeProps as Y, mergeProps as k, openBlock as c, withCtx as S, createElementBlock as V, createCommentVNode as m, createElementVNode as Z, normalizeClass as b, createTextVNode as z, toDisplayString as F, normalizeStyle as ee, createVNode as le, guardReactiveProps as $e, Transition as Ie } from "vue";
import "../column/index.mjs";
import "../icon/index.mjs";
import "../tooltip/index.mjs";
import { useNameHelper as Ne, useProps as Pe, useLocale as Ee, useIcons as Oe, useWordSpace as Te, useId as qe, makeSentence as we } from "@vexip-ui/config";
import { useDisplay as ze } from "@vexip-ui/hooks";
import { createEventEmitter as Ce, isNull as te, isObject as Be, isFunction as je } from "@vexip-ui/utils";
import { formItemProps as De } from "./props.mjs";
import { validate as Me } from "./validator.mjs";
import { getValueByPath as re, setValueByPath as C } from "./helper.mjs";
import { FORM_PROPS as He, FORM_ACTIONS as Je, FORM_FIELDS as Ue, FIELD_OPTIONS as Ge } from "./symbol.mjs";
import Ke from "../row/column.mjs";
import ae from "../icon/icon.mjs";
import Qe from "../tooltip/tooltip.mjs";
const Xe = ["name", "value"], Ye = ["id", "for"], ml = /* @__PURE__ */ ge({
name: "FormItem",
inheritAttrs: !0,
__name: "form-item",
props: De,
setup(oe, { expose: ue }) {
const o = Ne("form"), e = Pe("formItem", oe, {
locale: null,
label: {
default: "",
static: !0
},
prop: {
default: "",
static: !0
},
name: {
default: "",
static: !0
},
rules: () => [],
labelWidth: null,
required: !1,
htmlFor: {
default: null,
static: !0
},
errorTransition: () => o.ns("fade"),
defaultValue: {
default: null,
static: !0
},
hideErrorTip: !1,
validateAll: null,
hideAsterisk: null,
hideLabel: null,
action: !1,
help: "",
pure: !1,
manual: !1,
span: 24,
offset: null,
push: null,
pull: null,
order: null,
xs: null,
sm: null,
md: null,
lg: null,
xl: null,
xxl: null,
flex: null
}), R = ke(), r = q(He, {}), W = q(Je, null), v = q(Ue, null), B = Ce(), j = Ee("form", Se(e, "locale")), D = Oe(), ne = Te(), n = p(e.defaultValue), i = p(!1), y = p(""), L = p(!1), M = p(!1), H = p(0), J = Ve(
Fe({
isError: i
})
), _ = ze(() => {
_.value && (H.value = _.value.offsetWidth);
}), U = qe(), $ = a(() => r.allRequired || e.required), se = a(() => we(`${e.label || e.prop} ${j.value.notNullable}`, ne.value)), G = a(() => {
if (!e.prop) return [];
const t = $.value ? [{ required: $.value, message: se.value }] : [], u = Array.isArray(e.rules) ? e.rules : [e.rules];
let s = [];
return r.rules && (s = re(r.rules, e.prop) ?? []), s = Array.isArray(s) ? s : [s], t.concat(s, u);
}), A = a(X), ie = a(() => te(e.validateAll) ? r.validateAll ?? !1 : e.validateAll), de = a(() => {
if (e.hideAsterisk === !0 || r.hideAsterisk)
return !1;
for (const t of G.value)
if (t.required) return !0;
return $.value;
}), I = a(() => e.action || e.hideLabel === !0 || r.hideLabel), h = a(() => !(I.value || !(e.label || R.label))), d = a(() => r.labelAlign), x = a(() => d.value ? Q(
d.value === "top" || I.value ? 0 : e.labelWidth || r.labelWidth || 80
) : Q(I.value ? 0 : e.labelWidth || 80)), ce = a(() => ({
[o.be("item")]: !0,
[o.bs("vars")]: !0,
[o.bem("item", "inherit")]: v || e.inherit,
[o.bem("item", "required")]: !r.hideAsterisk && de.value,
[o.bem("item", "error")]: i.value,
[o.bem("item", "action")]: e.action,
[o.bem("item", "padding")]: r.inline && d.value === "top" && !h.value
})), pe = a(() => ({
width: d.value === "top" ? void 0 : `calc(100% - ${x.value}px)`,
marginLeft: h.value || d.value === "top" ? void 0 : `${x.value}px`
})), K = a(() => {
const t = A.value;
return Array.isArray(t) || Be(t) ? JSON.stringify(t) : t;
}), fe = a(() => ({ justify: e.action ? "center" : "start", align: "middle" })), me = a(
() => !!(r.labelWidth && r.labelWidth !== "auto") || e.labelWidth > 0
), N = /* @__PURE__ */ new Set(), P = Object.freeze({
prop: a(() => e.prop),
idFor: a(() => e.prop),
labelId: U,
state: a(() => i.value ? "error" : "default"),
disabled: a(() => !!r.disabled),
loading: a(() => !!r.loading),
size: a(() => r.size || "default"),
emitter: B,
labelWidth: H,
validate: he,
clearError: O,
reset: be,
getValue: X,
setValue: ve,
sync: (t) => {
N.size && console.warn("[vexip-ui:Form]: must only be one control component under FormItem."), N.add(t);
},
unSync: (t) => {
N.delete(t);
}
});
Re(Ge, e.manual ? null : P), We(
() => e.defaultValue,
(t) => {
n.value = t;
}
), Le(() => {
const t = A.value;
te(n.value) && (n.value = Array.isArray(t) ? Array.from(t) : t), v && v.add(P);
}), _e(() => {
v && v.delete(P);
}), ue({ isError: i, inputValue: K, computedLabelWidth: x });
function Q(t) {
return t === "auto" ? (W == null ? void 0 : W.getLabelWidth()) || 80 : t;
}
let E = !1;
function X(t = n.value) {
if (!r.model || !e.prop) return t;
try {
const u = re(r.model, e.prop, !0);
return E = !0, u;
} catch {
return E || (C(r.model, e.prop, t, !1), E = !0), t;
}
}
function ve(t, u = !1) {
if (!(!r.model || !e.prop))
try {
return C(r.model, e.prop, t, u);
} catch {
}
}
function he() {
return ye();
}
function O() {
i.value = !1, y.value = "";
}
function be() {
if (O(), !r.model || !e.prop) return !1;
const t = A.value;
let u;
return Array.isArray(t) ? u = Array.isArray(n.value) ? Array.from(n.value) : [] : u = je(n.value) ? n.value() : n.value, C(r.model, e.prop, u, !0);
}
async function ye() {
if (M.value)
return M.value = !1, T(null);
if (!e.prop || !r.model || L.value)
return T(null);
L.value = !0;
const t = A.value, u = G.value, s = r.model;
let g = await Me(
u,
t,
s,
ie.value,
j.value.validateFail
);
return g = g.length ? g : null, T(g);
}
function T(t) {
return L.value = !1, t ? (i.value = !0, y.value = Array.isArray(t) ? t[0] : t) : O(), t;
}
function Ae() {
B.emit("focus");
}
const xe = a(() => !!(r.action && r.method));
return (t, u) => l(e).pure ? f(t.$slots, "default", Y(k({ key: 0 }, l(J)))) : (c(), w(l(Ke), k({ key: 1 }, t.$attrs, {
class: ce.value,
inherit: l(e).inherit,
role: "group",
tag: "div",
span: l(e).span,
offset: l(e).offset,
push: l(e).push,
pull: l(e).pull,
order: l(e).order,
xs: l(e).xs,
sm: l(e).sm,
md: l(e).md,
lg: l(e).lg,
xl: l(e).xl,
xxl: l(e).xxl,
flex: l(e).flex,
"use-flex": fe.value
}), {
default: S(() => [
xe.value ? (c(), V("input", {
key: 0,
type: "hidden",
name: l(e).name || l(e).prop,
value: K.value,
style: { display: "none" }
}, null, 8, Xe)) : m("", !0),
h.value && d.value !== "top" && !me.value ? (c(), V("span", {
key: 1,
ref_key: "placeholder",
ref: _,
class: b(l(o).be("placeholder")),
role: "none"
}, [
l(e).help || R.help ? (c(), w(l(ae), k({ key: 0 }, l(D).help, {
class: l(o).be("help")
}), null, 16, ["class"])) : m("", !0),
f(t.$slots, "label", {}, () => [
z(F(l(e).label + (l(r).labelSuffix || "")), 1)
])
], 2)) : m("", !0),
h.value ? (c(), V("label", {
key: 2,
id: l(U),
class: b(l(o).be("label")),
style: ee({ width: d.value !== "top" ? `${x.value}px` : void 0 }),
for: l(e).htmlFor || l(e).prop,
onClick: Ae
}, [
l(e).help || R.help ? (c(), w(l(Qe), {
key: 0,
transfer: ""
}, {
trigger: S(() => [
le(l(ae), k(l(D).help, {
class: l(o).be("help")
}), null, 16, ["class"])
]),
default: S(() => [
f(t.$slots, "help", {}, () => [
Z("div", {
class: b(l(o).be("help-tip"))
}, F(l(e).help), 3)
])
]),
_: 3
})) : m("", !0),
f(t.$slots, "label", {}, () => [
z(F(l(e).label + (l(r).labelSuffix || "")), 1)
])
], 14, Ye)) : m("", !0),
Z("div", {
class: b({
[l(o).be("control")]: !0,
[l(o).bem("control", "no-label")]: !h.value,
[l(o).bem("control", "action")]: l(e).action
}),
role: "alert",
"aria-relevant": "all",
style: ee(pe.value)
}, [
f(t.$slots, "default", Y($e(l(J)))),
le(Ie, {
name: l(e).errorTransition
}, {
default: S(() => [
!l(e).hideErrorTip && i.value ? (c(), V("div", {
key: 0,
class: b(l(o).be("error-tip"))
}, [
f(t.$slots, "error", { tip: y.value }, () => [
z(F(y.value), 1)
])
], 2)) : m("", !0)
]),
_: 3
}, 8, ["name"])
], 6)
]),
_: 3
}, 16, ["class", "inherit", "span", "offset", "push", "pull", "order", "xs", "sm", "md", "lg", "xl", "xxl", "flex", "use-flex"]));
}
});
export {
ml as default
};
//# sourceMappingURL=form-item.vue2.mjs.map