vexip-ui/lib/components/form/form-item.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

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