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

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

"use strict";const n=require("vue"),f=require("@vexip-ui/config"),g=require("./props.cjs"),y=require("./symbol.cjs"),o=/^\d+$/,m=Object.freeze(["start","end","center","space-around","space-between","space-evenly"]),b=Object.freeze(["top","middle","bottom","stretch"]),$=n.defineComponent({name:"Grid",props:g.gridProps,setup(p,{slots:u}){const t=f.useProps("grid",p,{tag:"div",gap:0,rows:"none",columns:24,autoRows:"auto",autoColumns:"auto",dense:!1,justify:{default:"start",validator:r=>m.includes(r)},align:{default:"stretch",validator:r=>b.includes(r)},cellFlex:!1}),s=f.useNameHelper("grid"),c=n.computed(()=>({[s.b()]:!0,[s.bm(t.justify)]:!0,[s.bm("inherit")]:t.inherit,[s.bm(t.align)]:t.align!=="stretch",[s.bm("dense")]:t.dense})),l=n.computed(()=>{const r={};return t.gap&&(r.gap=Array.isArray(t.gap)?`${t.gap[0]}px ${t.gap[1]}px`:`${t.gap}px`),r.gridTemplateColumns=i(t.columns),t.rows!=="none"&&(r.gridTemplateRows=i(t.rows)),t.autoRows!=="auto"&&(r.gridAutoRows=a(t.autoRows)),t.autoColumns!=="auto"&&(r.gridAutoColumns=a(t.autoColumns)),r}),d=n.computed(()=>t.cellFlex===!0?{justify:"start",align:"top"}:t.cellFlex?{justify:"start",align:"top",...t.cellFlex}:!1);n.provide(y.GRID_STATE,n.reactive({cellFlex:d,columns:n.toRef(t,"columns")}));function i(r){return typeof r=="number"?`repeat(${r}, 1fr)`:typeof r=="string"?o.test(r.trim())?`repeat(${r}, 1fr)`:r:Array.isArray(r)?r.map(e=>typeof e=="number"?`${e}fr`:typeof e=="string"&&o.test(e.trim())?`${e}fr`:e).join(" "):r}function a(r){return typeof r=="number"?`${r}fr`:typeof r=="string"?o.test(r.trim())?`repeat(${r}, 1fr)`:r:Array.isArray(r)?r.map(e=>typeof e=="number"?`${e}fr`:typeof e=="string"&&o.test(e.trim())?`${e}fr`:e).join(" "):r}return()=>n.h(t.tag||"div",{class:c.value,style:l.value},{default:()=>{var r;return(r=u.default)==null?void 0:r.call(u)}})}});module.exports=$;
//# sourceMappingURL=grid.cjs.map