PhaseWeb3-Vue/assets/FormControl-dmBiWM7h.js

2 lines
3.2 KiB
JavaScript

import{c as k,d as u,C as F,al as m,u as w,r as y,o as b,bM as B,j as i,by as g,f as E,bN as V,q as h,F as q,k as C,t as R,bz as M,bC as N}from"./index-D0hKoGh3.js";const D={__name:"FormControlIcon",props:{icon:{type:String,default:null},h:{type:String,default:null}},setup(e){return(v,n)=>(u(),k(F,{path:e.icon,w:"w-10",h:e.h,class:"absolute top-0 left-0 z-10 pointer-events-none text-gray-500 dark:text-slate-400"},null,8,["path","h"]))}},U={class:"relative"},z=["id","name"],K=["value"],L=["id","name","maxlength","minlength","min","max","placeholder","required"],j=["id","name","maxlength","minlength","min","max","inputmode","autocomplete","required","placeholder","type","pattern"],H={__name:"FormControl",props:{name:{type:String,default:null},id:{type:String,default:null},autocomplete:{type:String,default:null},maxlength:{type:Number,default:null},minlength:{type:Number,default:null},max:{type:String,default:null},min:{type:String,default:null},placeholder:{type:String,default:null},inputmode:{type:String,default:null},icon:{type:String,default:null},options:{type:Array,default:null},type:{type:String,default:"text"},pattern:{type:String,default:null},modelValue:{type:[String,Number,Boolean,Array,Object],default:""},required:Boolean,borderless:Boolean,transparent:Boolean,ctrlKFocus:Boolean},emits:["update:modelValue","setRef"],setup(e,{emit:v}){const n=e,r=v,o=m({get:()=>n.modelValue,set:a=>{r("update:modelValue",a)}}),c=m(()=>{const a=["px-3 py-2 max-w-full focus:ring focus:outline-none border-blue-700 dark:border-blue-900 rounded w-full","dark:placeholder-gray-400",d.value==="textarea"?"h-24":"h-12",n.borderless?"border-0":"border",n.transparent?"bg-transparent":"bg-white dark:bg-slate-800"];return n.icon&&a.push("pl-10"),a}),d=m(()=>n.options?"select":n.type),S=m(()=>n.type==="textarea"?"h-full":"h-12"),f=w(),p=y(null),x=y(null),s=y(null);if(b(()=>{p.value?r("setRef",p.value):x.value?r("setRef",x.value):r("setRef",s.value)}),n.ctrlKFocus){const a=l=>{l.ctrlKey&&l.key==="k"?(l.preventDefault(),s.value.focus()):l.key==="Escape"&&s.value.blur()};b(()=>{f.isFieldFocusRegistered||(window.addEventListener("keydown",a),f.isFieldFocusRegistered=!0)}),B(()=>{window.removeEventListener("keydown",a),f.isFieldFocusRegistered=!1})}return(a,l)=>(u(),i("div",U,[d.value==="select"?g((u(),i("select",{key:0,id:e.id,"onUpdate:modelValue":l[0]||(l[0]=t=>o.value=t),name:e.name,class:h(c.value)},[(u(!0),i(q,null,C(e.options,t=>(u(),i("option",{key:t.id??t,value:t.id??t},R(t.label??t),9,K))),128))],10,z)),[[V,o.value]]):d.value==="textarea"?g((u(),i("textarea",{key:1,id:e.id,"onUpdate:modelValue":l[1]||(l[1]=t=>o.value=t),class:h(c.value),name:e.name,maxlength:e.maxlength,minlength:e.minlength,min:e.min,max:e.max,placeholder:e.placeholder,required:e.required},null,10,L)),[[M,o.value]]):g((u(),i("input",{key:2,id:e.id,ref_key:"inputEl",ref:s,"onUpdate:modelValue":l[2]||(l[2]=t=>o.value=t),name:e.name,maxlength:e.maxlength,minlength:e.minlength,min:e.min,max:e.max,inputmode:e.inputmode,autocomplete:e.autocomplete,required:e.required,placeholder:e.placeholder,type:d.value,class:h(c.value),pattern:e.pattern},null,10,j)),[[N,o.value]]),e.icon?(u(),k(D,{key:3,icon:e.icon,h:S.value},null,8,["icon","h"])):E("",!0)]))}};export{H as _};