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