vexip-ui/lib/components/space/space.cjs

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

"use strict";const i=require("vue"),m=require("@vexip-ui/config"),j=require("@vexip-ui/hooks"),S=require("@vexip-ui/utils"),z=require("./props.cjs");function $(s){return typeof s=="function"||Object.prototype.toString.call(s)==="[object Object]"&&!i.isVNode(s)}const N=Object.freeze(["start","end","center","space-around","space-between","space-evenly"]),q=Object.freeze(["start","end","center","baseline","stretch"]),V=S.supportFlexGap();function h(s){return s==="start"||s==="end"?`flex-${s}`:s}const w=i.defineComponent({name:"Space",props:z.spaceProps,setup(s,{slots:y}){const e=m.useProps("space",s,{vertical:!1,inline:!1,tag:"div",align:{default:"stretch",validator:a=>q.includes(a)},justify:{default:"start",validator:a=>N.includes(a)},noWrap:!1,size:"default",itemStyle:null,gapDisabled:!V}),t=m.useNameHelper("space"),r={h:`var(${t.cv("h-gap")})`,hh:`calc(var(${t.cv("h-gap")}) * 0.5)`,mhh:`calc(var(${t.cv("h-gap")}) * -0.5)`,v:`var(${t.cv("v-gap")})`,hv:`calc(var(${t.cv("v-gap")}) * 0.5)`,mhv:`calc(var(${t.cv("v-gap")}) * -0.5)`},u=i.computed(()=>{const a={[t.b()]:!0,[t.bs("vars")]:!0,[t.bm("inherit")]:e.inherit,[t.bm("inline")]:e.inline,[t.bm("vertical")]:e.vertical,[t.bm("no-wrap")]:e.vertical||e.noWrap,[t.bm("no-gap")]:e.gapDisabled};return typeof e.size=="string"&&e.size!=="default"&&(a[t.bm(e.size)]=!0),a}),d=i.computed(()=>{const{justify:a,align:p,size:n}=e,c={alignItems:h(p),justifyContent:h(a)};if(typeof n!="string"){const o=Array.isArray(n)?n:[n,n];c[t.cv("h-gap")]=`${o[0]}px`,c[t.cv("v-gap")]=`${o[1]}px`}return e.gapDisabled&&!e.vertical&&(c.marginTop=r.mhv,c.marginBottom=r.mhv),c});return()=>{let a;const p=e.tag||"div",n=i.renderSlot(y,"default").children;if(!(n!=null&&n.length))return i.createVNode(p,{class:u.value,style:d.value},null);const c=j.flatVNodes(n),o=c.length-1,v=e.justify,f=v.startsWith("space"),g=v!=="space-between";return i.createVNode(p,{class:u.value,style:d.value},$(a=c.map((b,l)=>i.createVNode("div",{key:l,class:t.be("item"),role:"none",style:[e.itemStyle,e.gapDisabled?e.vertical?{marginBottom:l!==o?r.v:void 0}:{paddingTop:r.hv,paddingBottom:r.hv,marginRight:f?g||l!==o?r.hh:void 0:l!==o?r.h:void 0,marginLeft:f&&(g||l!==0)?r.hh:void 0}:""]},[b])))?a:{default:()=>[a]})}}});module.exports=w;
//# sourceMappingURL=space.cjs.map