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