vue-devui/grid/index.umd.js

DevUI components based on Vite and Vue3

(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(o.index={},o.Vue))})(this,function(o,a){"use strict";const B={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1},noOuter:{type:Boolean,default:!0}},p=Number,P={flex:[String,Number],order:p},$={offset:p,pull:p,push:p,span:p},l=[Number,Object],S={xs:l,sm:l,md:l,lg:l,xl:l,xxl:l},R={...P,...$,...S},z=["xxl","xl","lg","md","sm","xs"],w={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},d=new Map;let v=-1;const g={},E={};function O(){d.forEach(e=>{e({...g})})}function M(){Object.keys(w).forEach(e=>{const r=window.matchMedia(w[e]);r.matches&&(g[e]=!0,O());const n=s=>{g[e]=s.matches,O()};r.addEventListener("change",n),E[e]={res:r,listener:n}})}function _(e){return d.size||M(),v+=1,d.set(v,e),e({...g}),v}function I(){Object.keys(w).forEach(e=>{const r=E[e];r.res.removeEventListener("change",r.listener)}),d.clear()}function A(e){d.delete(e),d.size===0&&I()}function b(e,r,n){let s=e;return r&&(s+=`__${r}`),n&&(s+=`--${n}`),s}function x(e,r=!1){const n=r?`.devui-${e}`:`devui-${e}`;return{b:()=>b(n),e:u=>u?b(n,u):"",m:u=>u?b(n,"",u):"",em:(u,t)=>u&&t?b(n,u,t):""}}var q="",C=a.defineComponent({name:"DRow",props:B,emits:[],setup(e,{slots:r}){const n=a.ref({}),s=x("row"),c=a.computed(()=>({[s.em("align",e.align)]:!0,[s.em("justify",e.justify)]:!0,[s.e("wrap")]:e.wrap}));let m;a.onMounted(()=>{m=_(t=>{n.value=t})}),a.onUnmounted(()=>{A(m)});const i=a.computed(()=>{if(!e.gutter)return{};let t=[0,0];Array.isArray(e.gutter)?t=e.gutter:typeof e.gutter=="number"?t=[e.gutter,0]:z.some(L=>{const h=e.gutter[L];return n.value[L]&&h?(typeof h=="number"?t=[h,0]:t=h,!0):!1});const T=`${(t[0]||0)/2}px`,y=`${(t[0]||0)/2}px`,G=`${(t[1]||0)/2}px`,K=`${(t[1]||0)/2}px`;return{paddingLeft:T,paddingRight:y,paddingTop:G,paddingBottom:K}});a.provide("gutterStyle",i);const u=a.computed(()=>{const t={};return e.noOuter&&(parseInt(i.value.paddingLeft)!==0&&(t.marginLeft=`-${i.value.paddingLeft}`),parseInt(i.value.paddingRight)!==0&&(t.marginRight=`-${i.value.paddingRight}`),parseInt(i.value.paddingTop)!==0&&(t.marginTop=`-${i.value.paddingTop}`),parseInt(i.value.paddingBottom)!==0&&(t.marginBottom=`-${i.value.paddingBottom}`)),t});return()=>{var t;return a.createVNode("div",{class:[s.b(),c.value],style:u.value},[(t=r.default)==null?void 0:t.call(r)])}}});const f=x("col");function U(e){return a.computed(()=>({[f.em("span",e.span?String(e.span):"")]:!0,[f.em("offset",e.offset?String(e.offset):"")]:!0,[f.em("pull",e.pull?String(e.pull):"")]:!0,[f.em("push",e.push?String(e.push):"")]:!0}))}function j(e){return` ${e.trim()}${e&&" "}`}function V(e){const r=Object.keys(e).filter(n=>n in S);return a.computed(()=>r.reduce((n,s)=>{const c=typeof e[s];if(c==="number")n=`${j(n)}${f.em(s,`span-${e[s]}`)}`;else if(c==="object"){const i=Object.keys(e[s]).filter(u=>u in $).reduce((u,t)=>{const y=e[s][t];return typeof y!="number"?"":(u=`${j(u)}${f.em(s,`${t}-${y}`)}`,u)},"");n=`${j(n)}${i}`}return n},""))}var F="",N=a.defineComponent({name:"DCol",props:R,setup(e,{slots:r}){const n=x("col"),s=t=>typeof t=="number"?`${t} ${t} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(t)?`0 0 ${t}`:t,c=U(e),m=V(e),i=a.computed(()=>({flex:s(e.flex),order:e.order})),u=a.inject("gutterStyle");return()=>{var t;return a.createVNode("div",{class:[n.b(),c.value,m.value],style:{...i.value,...u==null?void 0:u.value}},[(t=r.default)==null?void 0:t.call(r)])}}}),D={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(C.name,C),e.component(N.name,N)}};o.Col=N,o.Row=C,o.colProps=R,o.colPropsBaseClass=$,o.colPropsBaseStyle=P,o.default=D,o.rowProps=B,o.screenSizes=S,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});