balm-ui/components/grid/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiGrid",["vue"],t):"object"===typeof exports?exports.UiGrid=t(require("vue")):e.UiGrid=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={744:function(e){var t=function(e){return function(e){return!!e&&"object"===typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===r}(e)}(e)};var r="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function n(e,t){return!1!==t.clone&&t.isMergeableObject(e)?a((r=e,Array.isArray(r)?[]:{}),e,t):e;var r}function o(e,t,r){return e.concat(t).map((function(e){return n(e,r)}))}function s(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function i(e,t){try{return t in e}catch(r){return!1}}function c(e,t,r){var o={};return r.isMergeableObject(e)&&s(e).forEach((function(t){o[t]=n(e[t],r)})),s(t).forEach((function(s){(function(e,t){return i(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,s)||(i(e,s)&&r.isMergeableObject(t[s])?o[s]=function(e,t){if(!t.customMerge)return a;var r=t.customMerge(e);return"function"===typeof r?r:a}(s,r)(e[s],t[s],r):o[s]=n(t[s],r))})),o}function a(e,r,s){(s=s||{}).arrayMerge=s.arrayMerge||o,s.isMergeableObject=s.isMergeableObject||t,s.cloneUnlessOtherwiseSpecified=n;var i=Array.isArray(r);return i===Array.isArray(e)?i?s.arrayMerge(e,r,s):c(e,r,s):n(r,s)}a.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,r){return a(e,r,t)}),{})};var l=a;e.exports=l},262:function(e,t){t.A=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r}},154:function(t){t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var s=r[e]={exports:{}};return t[e](s,s.exports,n),s.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};n.d(o,{default:function(){return $}});var s=n(744),i=n.n(s);const c=/(?:^\[object\s(.*?)\]$)/;var a=e=>Object.prototype.toString.call(e).replace(c,"$1").toLowerCase();const l=e=>{let{componentProps:t,propName:r,props:n}=e,o=n[r];if("object"===a(o)){const e=t[r].default;t[r].default=()=>i()(e,o)}else Array.isArray(o)?t[r].default=()=>o:t[r].default=o},u=e=>{let{componentMixins:t,propName:r,props:n}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[r]){l({componentProps:t[e].props,propName:r,props:n});break}}};var p=(e,t)=>{for(const r of Object.keys(t))e.props?void 0===e.props[r]?u({componentMixins:e.mixins,propName:r,props:t}):l({componentProps:e.props,propName:r,props:t}):u({componentMixins:e.mixins,propName:r,props:t})};var f=(e,t)=>{for(const r of Object.keys(t))if(/^Ui[A-Z]{1}[A-Za-z]+$/.test(r)){const n=e[r],o=t[r];p(n,o)}};var d=e=>{const t={install(t){f(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});for(let r in e){const n=e[r];t.component(n.name,n)}}};return t},m=n(154);const y={class:"mdc-layout-grid__inner"};var b={name:"UiGridInner"};var O=(0,n(262).A)(b,[["render",function(e,t,r,n,o,s){return(0,m.openBlock)(),(0,m.createElementBlock)("div",y,[(0,m.renderSlot)(e.$slots,"default")])}]]);const g="UiGrid",v={POSITIONS:["left","right"]},j={name:g,customOptions:{name:g,UI_GRID:v}};var S=Object.assign(j,{props:{fixedColumnWidth:{type:Boolean,default:!1},position:{type:String,default:""}},setup(e){const t=e,r=(0,m.computed)((()=>{let e=["mdc-layout-grid"];if(t.fixedColumnWidth&&e.push("mdc-layout-grid--fixed-column-width"),t.position){const r=t.position;v.POSITIONS.includes(r)?e.push(`mdc-layout-grid--align-${r}`):console.warn(`[${g}]: Invalid <GRID_POSITION>`)}return e}));return(e,t)=>((0,m.openBlock)(),(0,m.createElementBlock)("div",{class:(0,m.normalizeClass)(r.value)},[(0,m.createVNode)(O,null,{default:(0,m.withCtx)((()=>[(0,m.renderSlot)(e.$slots,"default")])),_:3})],2))}});const h="UiGridCell",I={cssClasses:"mdc-layout-grid__cell",TYPE:{COLUMNS:"span",ORDER:"order",ALIGN:"align"},TYPE_OF_DEVICE:["desktop","tablet","phone"],POSITION:["top","middle","bottom"]},E={name:h,customOptions:{UI_GRID_CELL:I}};var $=d({UiGrid:S,UiGridCell:Object.assign(E,{props:{nested:{type:Boolean,default:!1},columns:{type:[Number,String,Object],default:4},order:{type:[Number,String],default:0},align:{type:String,default:""}},setup(e){const t=e;function r(e,t,r){if("object"===a(r))for(let n in r){let o=r[n];I.TYPE_OF_DEVICE.includes(n)?t.push(`${I.cssClasses}--${e}-${o}-${n}`):"default"===n&&t.push(`${I.cssClasses}--${e}-${o}`)}else{let n=r;t.push(`${I.cssClasses}--${e}-${n}`)}return t}const n=(0,m.computed)((()=>{let e=[I.cssClasses];if(t.columns&&(e=r(I.TYPE.COLUMNS,e,t.columns)),t.order){let n=+t.order;n>=1&&n<=12?e=r(I.TYPE.ORDER,e,n):console.warn(`[${h}]: Order <INDEX> is an integer between 1 and 12`)}if(t.align){let n=t.align.toLowerCase();I.POSITION.includes(n)&&(e=r(I.TYPE.ALIGN,e,n))}return e}));return(t,r)=>((0,m.openBlock)(),(0,m.createElementBlock)("div",{class:(0,m.normalizeClass)(n.value)},[e.nested?((0,m.openBlock)(),(0,m.createBlock)(O,{key:0},{default:(0,m.withCtx)((()=>[(0,m.renderSlot)(t.$slots,"default")])),_:3})):(0,m.renderSlot)(t.$slots,"default",{key:1})],2))}})});return o=o.default}()}));