vanjs-ui/dist/van-ui.nomodule.min.js

A collection of grab-n-go reusable UI components for VanJS

{const{button:o,div:e,header:t,input:n,label:s,span:r,style:i}=van.tags,l=o=>Object.entries(o).map(([o,e])=>`${o}: ${e};`).join(""),a=o=>Object.entries(o).map(([o,e])=>`${o} { ${l(e)} }`).join("\n"),c=Object.getPrototypeOf(van.state(null)),d=o=>Object.getPrototypeOf(o??0)===c?o:van.state(o);window.Await=({value:o,container:t=e,Loading:n,Error:s},r)=>{const i=van.state({status:"pending"});return o.then(o=>i.val={status:"fulfilled",value:o}).catch(o=>i.val={status:"rejected",value:o}),t(()=>"pending"===i.val.status?n?.()??"":"rejected"===i.val.status?s?.(i.val.value):r(i.val.value))},window.Modal=({closed:o,backgroundColor:t="rgba(0,0,0,.5)",blurBackground:n=!1,clickBackgroundToClose:s=!1,backgroundClass:r="",backgroundStyleOverrides:i={},modalClass:a="",modalStyleOverrides:c={}},...d)=>{const u={display:"flex","align-items":"center","justify-content":"center",left:0,right:0,top:0,bottom:0,position:"fixed","z-index":1e4,"background-color":t,"backdrop-filter":n?"blur(0.25rem)":"none",...i},p={"border-radius":"0.5rem",padding:"1rem",display:"block","background-color":"white",...c};return document.activeElement instanceof HTMLElement&&document.activeElement.blur(),()=>{if(o.val)return null;const t=e({class:r,style:l(u)},e({class:a,style:l(p)},d));return s&&t.addEventListener("mousedown",e=>e.target===t&&(o.val=!0)),t}};let u=0;window.Tabs=({activeTab:t,activeTabDisplay:n="block",resultClass:s="",style:r="",tabButtonRowColor:i="#f1f1f1",tabButtonBorderStyle:a="1px solid #000",tabButtonHoverColor:c="#ddd",tabButtonActiveColor:d="#ccc",transitionSec:p=.3,tabButtonRowClass:b="",tabButtonRowStyleOverrides:w={},tabButtonClass:v="",tabButtonStyleOverrides:h={},tabContentClass:m="",tabContentStyleOverrides:g={}},f)=>{const y=t??van.state(Object.keys(f)[0]),x=l({overflow:"hidden","background-color":i,...w}),k=l({float:"left",border:"none","border-right":a,outline:"none",cursor:"pointer",padding:"8px 16px",transition:`background-color ${p}s`,...h}),C=l({padding:"6px 12px","border-top":"none",...g}),O="vanui-tabs-"+ ++u;return document.head.appendChild(van.tags.style(`#${O} .vanui-tab-button { background-color: inherit }\n  #${O} .vanui-tab-button:hover { background-color: ${c} }\n  #${O} .vanui-tab-button.active { background-color: ${d} }`)),e({id:O,class:s,style:r},e({class:b,style:x},Object.keys(f).map(e=>o({class:()=>["vanui-tab-button"].concat(v||[],e===y.val?"active":[]).join(" "),style:k,onclick:()=>y.val=e},e))),Object.entries(f).map(([o,t])=>e({class:m,style:()=>`display: ${o===y.val?n:"none"}; ${C};`},t)))},window.Toggle=({on:o=!1,size:e=1,cursor:t="pointer",offColor:i="#ccc",onColor:a="#2196F3",circleColor:c="white",toggleClass:u="",toggleStyleOverrides:p={},sliderClass:b="",sliderStyleOverrides:w={},circleClass:v="",circleStyleOverrides:h={},circleWhenOnStyleOverrides:m={}})=>{const g=d(o),f=l({position:"relative",display:"inline-block",width:1.76*e+"rem",height:e+"rem",cursor:t,...p}),y=l({opacity:0,width:0,height:0,position:"absolute","z-index":1e4}),x=l({position:"absolute",top:0,left:0,right:0,bottom:0,transition:".4s","border-radius":e+"rem",...w}),k=l({position:"absolute",height:.76*e+"rem",width:.76*e+"rem",left:.12*e+"rem",bottom:.12*e+"rem","background-color":c,transition:".4s","border-radius":"50%",...h}),C=l({transform:`translateX(${.76*e}rem)`,...m});return s({class:u,style:f},n({type:"checkbox",style:y,checked:g,oninput:o=>g.val=o.target.checked}),r({class:b,style:()=>`${x}; background-color: ${g.val?a:i};`},r({class:v,style:()=>k+(g.val?C:"")})))},window.MessageBoard=class{o;t;i;l;u;p;constructor({top:o="unset",bottom:t="unset",backgroundColor:n="#333D",fontColor:s="white",fadeOutSec:r=.3,boardClass:i="",boardStyleOverrides:a={},messageClass:c="",messageStyleOverrides:d={},closerClass:u="",closerStyleOverrides:p={}},b=document.body){const w=l({display:"flex","flex-direction":"column","align-items":"center",position:"fixed",top:o,bottom:t,left:"50%",transform:"translateX(-50%)","z-index":1e4,...a});this.o=r,this.t=c,this.i=l({display:"flex","background-color":n,color:s,padding:"15px","margin-bottom":"10px","border-radius":"5px",transition:`opacity ${r}s, transform ${r}s`,...d}),this.l=u,this.u=l({display:"flex","align-items":"center","margin-left":"10px",cursor:"pointer",...p}),b.appendChild(this.p=e({class:i,style:w}))}show({message:o,closer:t,durationSec:n,closed:s=van.state(!1)}){const r=van.state(!1);van.derive(()=>setTimeout(o=>r.val=o,1e3*this.o,s.val));const i=e({class:this.t,style:this.i},e(o),t?e({class:this.l,style:this.u,onclick:()=>s.val=!0},t):null);return van.derive(()=>s.val&&(i.style.opacity="0",i.style.transform="translateY(-20px)")),n&&setTimeout(()=>s.val=!0,1e3*n),van.add(this.p,()=>r.val?null:i),i}remove(){this.p.remove()}},window.Tooltip=({text:o,show:t,width:n="200px",backgroundColor:s="#333D",fontColor:i="white",fadeInSec:a=.3,tooltipClass:c="",tooltipStyleOverrides:d={},triangleClass:u="",triangleStyleOverrides:p={}})=>{const b=l({width:n,visibility:"hidden","background-color":s,color:i,"text-align":"center",padding:"5px","border-radius":"5px",position:"absolute","z-index":1,bottom:"125%",left:"50%",transform:"translateX(-50%)",opacity:0,transition:`opacity ${a}s`,...d}),w=l({width:0,height:0,"margin-left":"-5px","border-left":"5px solid transparent","border-right":"5px solid transparent","border-top":"5px solid #333",position:"absolute",bottom:"-5px",left:"50%",...p}),v=r({class:c,style:b},o,e({class:u,style:w}));return van.derive(()=>t.val?(v.style.opacity="1",v.style.visibility="visible"):(v.style.opacity="0",v.style.visibility="hidden")),v};let p=0;window.OptionGroup=({selected:t,normalColor:n="#e2eef7",hoverColor:s="#c1d4e9",selectedColor:r="#90b6d9",selectedHoverColor:i="#7fa5c8",fontColor:a="black",transitionSec:c=.3,optionGroupClass:d="",optionGroupStyleOverrides:u={},optionClass:b="",optionStyleOverrides:w={}},v)=>{const h=l({display:"flex",...u}),m=l({padding:"10px 20px",border:"none",color:a,cursor:"pointer",outline:"none",transition:`background-color ${c}s`,...w}),g="vanui-option-group-"+ ++p;return document.head.appendChild(van.tags.style(`#${g} .vanui-button { background-color: ${n} }\n  #${g} .vanui-button:hover { background-color: ${s} }\n  #${g} .vanui-button.selected { background-color: ${r} }\n  #${g} .vanui-button.selected:hover { background-color: ${i} }`)),e({id:g,class:d,style:h},v.map(e=>o({class:()=>["vanui-button"].concat(b||[],e===t.val?"selected":[]).join(" "),style:m,onclick:()=>t.val=e},e)))},window.Banner=({backgroundColor:o="#fff1a8",fontColor:e="currentcolor",sticky:n=!1,bannerClass:s="",bannerStyleOverrides:r={}},...i)=>{const a=l({"background-color":o,color:e,top:0,position:n?"sticky":"static","z-index":10,...r});return t({class:s,style:a},i)};let b=0;window.topMostZIndex=()=>++b,window.FloatingWindow=({title:o,closed:n=van.state(!1),x:s=100,y:c=100,width:u=300,height:p=200,closeCross:b="×",customStacking:w=!1,zIndex:v=1,disableMove:h=!1,disableResize:m=!1,headerColor:g="lightgray",windowClass:f="",windowStyleOverrides:y={},headerClass:x="",headerStyleOverrides:k={},childrenContainerClass:C="",childrenContainerStyleOverrides:O={},crossClass:S="",crossStyleOverrides:z={},crossHoverClass:$="",crossHoverStyleOverrides:j={}},...M)=>{const B=d(s),E=d(c),T=d(u),_=d(p),H=d(v);w||(H.val=topMostZIndex());const I=van.state(!1),A=van.state(null),D=van.state(0),F=van.state(0),R=van.state(0),X=van.state(0),Z=van.state(0),G=van.state(0),L=$||Object.keys(j)?van.state(!1):null,P=o=>{o instanceof MouseEvent&&0!==o.button||(I.val=!0,D.val=o instanceof MouseEvent?o.clientX:o.touches[0].clientX,F.val=o instanceof MouseEvent?o.clientY:o.touches[0].clientY,document.body.style.userSelect="none")},N=o=>e=>{A.val=o,D.val=e instanceof MouseEvent?e.clientX:e.touches[0].clientX,F.val=e instanceof MouseEvent?e.clientY:e.touches[0].clientY,R.val=B.val,X.val=E.val,Z.val=T.val,G.val=_.val,document.body.style.userSelect="none"},U=o=>{const e=o instanceof MouseEvent?o.clientX:o.touches[0].clientX,t=o instanceof MouseEvent?o.clientY:o.touches[0].clientY;if(I.val)B.val+=e-D.val,E.val+=t-F.val,D.val=e,F.val=t;else if(A.val){const o=e-D.val,n=t-F.val;A.val.includes("left")&&(B.val=R.val+o,T.val=Z.val-o),A.val.includes("top")&&(E.val=X.val+n,_.val=G.val-n),A.val.includes("right")&&(T.val=Z.val+o),A.val.includes("bottom")&&(_.val=G.val+n)}},W=()=>{I.val=!1,A.val=null,document.body.style.userSelect=""};document.addEventListener("mousemove",U),document.addEventListener("touchmove",U),document.addEventListener("mouseup",W),document.addEventListener("touchend",W);const Y="transparent";if(!document.getElementById("vanui-window-style")){const o=i({type:"text/css",id:"vanui-window-style"},a({".vanui-window":{position:"fixed","background-color":"white",border:"1px solid black","border-radius":"0.5rem",overflow:"hidden"},".vanui-window-dragarea":{cursor:"move",position:"absolute",left:"0",top:"0",width:"100%",height:"1rem"},".vanui-window-resize-left":{cursor:"w-resize",position:"absolute",left:"0",top:"0",width:"10px",height:"100%","background-color":Y},".vanui-window-resize-top":{cursor:"n-resize",position:"absolute",left:"0",top:"0",width:"100%",height:"10px","background-color":Y},".vanui-window-resize-right":{cursor:"e-resize",position:"absolute",right:"0",top:"0",width:"10px",height:"100%","background-color":Y},".vanui-window-resize-bottom":{cursor:"s-resize",position:"absolute",left:"0",bottom:"0",width:"100%",height:"10px","background-color":Y},".vanui-window-resize-lefttop":{cursor:"nw-resize",position:"absolute",left:"0",top:"0",width:"10px",height:"10px","background-color":Y},".vanui-window-resize-leftbottom":{cursor:"sw-resize",position:"absolute",left:"0",bottom:"0",width:"10px",height:"10px","background-color":Y},".vanui-window-resize-righttop":{cursor:"ne-resize",position:"absolute",right:"0",top:"0",width:"10px",height:"10px","background-color":Y},".vanui-window-resize-rightbottom":{cursor:"se-resize",position:"absolute",right:"0",bottom:"0",width:"10px",height:"10px","background-color":Y},".vanui-window-header":{cursor:"move","user-select":"none",display:"flex","justify-content":"space-between","align-items":"center",padding:"0.5rem"},".vanui-window-cross":{cursor:"pointer","font-family":"Arial",transition:"background-color 0.3s, color 0.3s","border-radius":"50%",width:"24px",height:"24px",display:"flex","align-items":"center","justify-content":"center"},".vanui-window-cross:hover":{"background-color":"red",color:"white"},".vanui-window-children":{padding:"0.5rem"}}));document.head.appendChild(o)}return()=>n.val?null:e({class:["vanui-window"].concat(f||[]).join(" "),style:()=>l({left:`${B.val}px`,top:`${E.val}px`,width:`${T.val}px`,height:`${_.val}px`,"z-index":H.val,...y}),...w?{}:{onmousedown:()=>H.val=topMostZIndex(),ontouchstart:()=>H.val=topMostZIndex()}},o?t({class:["vanui-window-header"].concat(x||[]).join(" "),style:l({"background-color":g,...h?{cursor:"auto"}:{},...k}),...h?{}:{onmousedown:P,ontouchstart:P}},o,b?r({class:()=>["vanui-window-cross"].concat(S||[]).concat($&&L.val?$:[]).join(" "),style:()=>l({...z,...Object.keys(j).length&&L.val?j:{}}),onclick:()=>n.val=!0,...L?{onmouseenter:()=>L.val=!0,onmouseleave:()=>L.val=!1}:{}},b):null):h?null:e({class:"vanui-window-dragarea",onmousedown:P,ontouchstart:P}),m?[]:[e({class:"vanui-window-resize-left",onmousedown:N("left"),ontouchstart:N("left")}),e({class:"vanui-window-resize-top",onmousedown:N("top"),ontouchstart:N("top")}),e({class:"vanui-window-resize-right",onmousedown:N("right"),ontouchstart:N("right")}),e({class:"vanui-window-resize-bottom",onmousedown:N("bottom"),ontouchstart:N("bottom")}),e({class:"vanui-window-resize-lefttop",onmousedown:N("lefttop"),ontouchstart:N("lefttop")}),e({class:"vanui-window-resize-leftbottom",onmousedown:N("leftbottom"),ontouchstart:N("leftbottom")}),e({class:"vanui-window-resize-righttop",onmousedown:N("righttop"),ontouchstart:N("righttop")}),e({class:"vanui-window-resize-rightbottom",onmousedown:N("rightbottom"),ontouchstart:N("rightbottom")})],e({class:["vanui-window-children"].concat(C||[]).join(" "),style:l(O)},M))},window.choose=({label:o,options:t,showTextFilter:s=!1,selectedColor:r="#f5f5f5",cyclicalNav:i=!1,customModalProps:a={},textFilterClass:c="",textFilterStyleOverrides:d={},optionsContainerClass:u="",optionsContainerStyleOverrides:p={},optionClass:b="",optionStyleOverrides:w={},selectedClass:v="",selectedStyleOverrides:h={}})=>{const m=van.state(!1),{modalStyleOverrides:g,...f}=a,y={closed:m,modalStyleOverrides:{display:"flex","flex-direction":"column",...g},...f},x=van.state(""),k=van.derive(()=>t.filter(o=>o.toLocaleLowerCase().includes(x.val.toLocaleLowerCase()))),C=van.derive(()=>(x.val,0));let O;const S=new Promise(o=>O=o),z={width:"98%","margin-top":"0.5rem","margin-bottom":"0.5rem",...d},$={"overflow-y":"auto","flex-grow":1,...p},j=s?n({type:"text",class:c,style:l(z),oninput:o=>x.val=o.target.value}):null,M={padding:"0.5rem",...w},B={...M,"background-color":r,...h};van.add(document.body,Modal(y,e(o),s?e(j):null,()=>e({class:u,style:l($)},k.val.map((o,t)=>e({class:()=>(b?[b]:[]).concat(t===C.val?"vanui-choose-selected":[],t===C.val&&v?v:[]).join(" "),style:t===C.val?l(B):l(M),onclick:()=>(O(o),m.val=!0),onmousemove:()=>C.val=t},o))))),j?.focus();const E=()=>setTimeout(()=>document.querySelector(".vanui-choose-selected")?.scrollIntoView(!1),10),T=o=>{"Enter"===o.key&&C.val<k.val.length?(O(k.val[C.val]),m.val=!0):"Escape"===o.key?(O(null),m.val=!0):"ArrowDown"===o.key?(C.val=C.val+1<k.val.length?C.val+1:i?0:C.val,E()):"ArrowUp"===o.key&&(C.val=C.val>0?C.val-1:i?k.val.length-1:C.val,E())};return document.addEventListener("keydown",T),van.derive(()=>m.val&&document.removeEventListener("keydown",T)),S}}