vue-devui/grid/index.umd.js

DevUI components based on Vite and Vue3

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