import{_ as t,o as e,p as s,w as a,aq as l,a4 as u,B as d,i,b as n,d as o,f as r,k as c,C as f}from"./index-2PZN6pGH.js";import{_ as m}from"./uni-card.CpdfOoXJ.js";import{_ as p}from"./uni-section.BISPxi99.js";const h=t({name:"uniCol",props:{span:{type:Number,default:24},offset:{type:Number,default:-1},pull:{type:Number,default:-1},push:{type:Number,default:-1},xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object],xl:[Number,Object]},data:()=>({gutter:0,sizeClass:"",parentWidth:0,nvueWidth:0,marginLeft:0,right:0,left:0}),created(){let t=this.$parent;for(;t&&"uniRow"!==t.$options.componentName;)t=t.$parent;this.updateGutter(t.gutter),t.$watch("gutter",(t=>{this.updateGutter(t)}))},computed:{sizeList(){let{span:t,offset:e,pull:s,push:a}=this;return{span:t,offset:e,pull:s,push:a}},pointClassList(){let t=[];return["xs","sm","md","lg","xl"].forEach((e=>{const s=this[e];"number"==typeof s?t.push(`uni-col-${e}-${s}`):"object"==typeof s&&s&&Object.keys(s).forEach((a=>{t.push("span"===a?`uni-col-${e}-${s[a]}`:`uni-col-${e}-${a}-${s[a]}`)}))})),t.join(" ")}},methods:{updateGutter(t){t=Number(t),isNaN(t)||(this.gutter=t/2)}},watch:{sizeList:{immediate:!0,handler(t){let e=[];for(let s in t){const a=t[s];!a&&0!==a||-1===a||e.push("span"===s?`uni-col-${a}`:`uni-col-${s}-${a}`)}this.sizeClass=e.join(" ")}}}},[["render",function(t,n,o,r,c,f){const m=i;return e(),s(m,{class:u(["uni-col",c.sizeClass,f.pointClassList]),style:d({paddingLeft:`${Number(c.gutter)}rpx`,paddingRight:`${Number(c.gutter)}rpx`})},{default:a((()=>[l(t.$slots,"default",{},void 0,!0)])),_:3},8,["class","style"])}],["__scopeId","data-v-84ac5f6d"]]);const g=t({name:"uniRow",componentName:"uniRow",props:{type:String,gutter:Number,justify:{type:String,default:"start"},align:{type:String,default:"top"},width:{type:[String,Number],default:750}},created(){},computed:{marginValue(){return this.gutter?-this.gutter/2:0},typeClass(){return"flex"===this.type?"uni-row--flex":""},justifyClass(){return"start"!==this.justify?`uni-row--flex-justify-${this.justify}`:""},alignClass(){return"top"!==this.align?`uni-row--flex-align-${this.align}`:""}}},[["render",function(t,n,o,r,c,f){const m=i;return e(),s(m,{class:u(["uni-row",f.typeClass,f.justifyClass,f.alignClass]),style:d({marginLeft:`${Number(f.marginValue)}rpx`,marginRight:`${Number(f.marginValue)}rpx`})},{default:a((()=>[l(t.$slots,"default",{},void 0,!0)])),_:3},8,["class","style"])}],["__scopeId","data-v-9ff25b7f"]]);const _=t({data:()=>({gutter:0,nvueWidth:730})},[["render",function(t,l,u,d,_,w){const b=f,y=n(o("uni-card"),m),x=i,$=n(o("uni-col"),h),k=n(o("uni-row"),g),N=n(o("uni-section"),p);return e(),s(x,{class:"container"},{default:a((()=>[r(y,{"is-full":"","is-shadow":!1},{default:a((()=>[r(b,{class:"uni-h6"},{default:a((()=>[c(" 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局")])),_:1})])),_:1}),r(N,{title:"基础布局",subTitle:"使用单一分栏创建基础的栅格布局",type:"line"},{default:a((()=>[r(x,{class:"example-body"},{default:a((()=>[r(k,{class:"demo-uni-row",width:_.nvueWidth},{default:a((()=>[r($,null,{default:a((()=>[r(x,{class:"demo-uni-col dark_deep"})])),_:1})])),_:1},8,["width"]),r(k,{class:"demo-uni-row",width:_.nvueWidth},{default:a((()=>[r($,{span:12},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:12},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["width"]),r(k,{class:"demo-uni-row",width:_.nvueWidth},{default:a((()=>[r($,{span:8},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:8},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{span:8},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1})])),_:1},8,["width"]),r(k,{class:"demo-uni-row",width:_.nvueWidth},{default:a((()=>[r($,{span:6},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:6},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{span:6},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:6},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["width"]),r(k,{class:"demo-uni-row",width:_.nvueWidth},{default:a((()=>[r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["width"])])),_:1})])),_:1}),r(N,{title:"混合布局",subTitle:"通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局",type:"line"},{default:a((()=>[r(x,{class:"example-body"},{default:a((()=>[r(k,{class:"demo-uni-row",gutter:_.gutter,width:_.nvueWidth},{default:a((()=>[r($,{span:8},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:8},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["gutter","width"]),r(k,{class:"demo-uni-row",gutter:_.gutter,width:_.nvueWidth},{default:a((()=>[r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:16},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{span:4},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1})])),_:1},8,["gutter","width"])])),_:1})])),_:1}),r(N,{title:"分栏偏移",subTitle:"支持偏移指定的栏数",type:"line"},{default:a((()=>[r(x,{class:"example-body"},{default:a((()=>[r(k,{class:"demo-uni-row",gutter:_.gutter,width:_.nvueWidth},{default:a((()=>[r($,{span:8},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:8,offset:6},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["gutter","width"]),r(k,{class:"demo-uni-row",gutter:_.gutter,width:_.nvueWidth},{default:a((()=>[r($,{span:6,offset:6},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:6,offset:6},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["gutter","width"]),r(k,{class:"demo-uni-row",gutter:_.gutter,width:_.nvueWidth},{default:a((()=>[r($,{span:12,pull:6},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{span:6,push:6},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["gutter","width"]),r(k,{class:"demo-uni-row",gutter:_.gutter,width:_.nvueWidth},{default:a((()=>[r($,{span:12,offset:6},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1})])),_:1},8,["gutter","width"])])),_:1})])),_:1}),r(N,{title:"响应式布局",subTitle:"共五个响应尺寸：xs、sm、md、lg 和 xl",type:"line"},{default:a((()=>[r(x,{class:"example-body"},{default:a((()=>[r(k,{class:"demo-uni-row",gutter:_.gutter},{default:a((()=>[r($,{xs:8,sm:6,md:4,lg:3,xl:1},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{xs:4,sm:6,md:8,lg:9,xl:11},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1}),r($,{xs:4,sm:6,md:8,lg:9,xl:11},{default:a((()=>[r(x,{class:"demo-uni-col dark"})])),_:1}),r($,{xs:8,sm:6,md:4,lg:3,xl:1},{default:a((()=>[r(x,{class:"demo-uni-col light"})])),_:1})])),_:1},8,["gutter"])])),_:1})])),_:1})])),_:1})}],["__scopeId","data-v-87d3bf2a"]]);export{_ as default};