{"version":3,"sources":["webpack:///./src/components/dev/Grid.vue?6dc6","webpack:///./src/components/dev/Grid.vue?88ed","webpack:///src/components/dev/Grid.vue","webpack:///./src/components/dev/Grid.vue?6396","webpack:///./src/components/dev/Grid.vue?6cac"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_l","row","key","col","cIndex","attrs","ref","refInFor","_s","staticRenderFns","name","data","scss","$root","computed","gridRows","methods","gridSetPixelWidth","$refs","mounted","$nextTick","window","addEventListener","beforeDestroy","removeEventListener","component"],"mappings":"sHAAA,W,2CCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,aAAa,CAACF,EAAG,KAAK,CAACE,YAAY,eAAe,CAACN,EAAIO,GAAG,UAAUP,EAAIQ,GAAIR,EAAY,UAAE,SAASS,GAAK,OAAOL,EAAG,QAAQ,CAACM,IAAID,EAAIC,IAAIJ,YAAY,YAAYN,EAAIQ,GAAIC,EAAW,SAAE,SAASE,EAAIC,GAAQ,OAAOR,EAAG,QAAQ,CAACM,IAAIE,EAAOC,MAAM,CAAC,KAAOF,IAAM,CAACP,EAAG,MAAM,CAACU,IAAI,MAAMC,UAAS,GAAM,CAACX,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,OAAO,CAACJ,EAAIO,GAAGP,EAAIgB,GAAI,OAASL,QAAWP,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,iBAAgB,OAAM,IACzhBa,EAAkB,GCetB,G,kDAAA,CACEC,KAAM,UACNC,KAFF,WAGI,MAAO,CACLC,KAAMnB,KAAKoB,MAAMD,OAGrBE,SAAU,CACRC,SADJ,WAEM,IAAN,+BACA,+DAEM,OAAOA,EACb,sBACQ,IAAR,mBACA,UACA,MACA,cAAU,OAAV,oBAAU,OAAV,KAOQ,OALA,EAAR,IACU,IAAV,EACU,QAAV,mBAGA,IACA,MAGEC,QAAS,CACPC,kBADJ,WAEMxB,KAAKyB,MAAMf,IACjB,qBACQ,IAAR,mCACQ,EAAR,6CAIEgB,QArCF,WAqCA,WACI1B,KAAK2B,WAAU,WACb,EAAN,oBACMC,OAAOC,iBAAiB,SAAU,EAAxC,uBAGEC,cA3CF,WA4CIF,OAAOG,oBAAoB,SAAU/B,KAAKwB,sBC5D+S,I,wBCQzVQ,EAAY,eACd,EACAlC,EACAkB,GACA,EACA,KACA,KACA,MAIa,aAAAgB,E","file":"js/component-dev-grid.da460624.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Grid.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"dev-group\"},[_c('h2',{staticClass:\"group-title\"},[_vm._v(\"Grid\")]),_vm._l((_vm.gridRows),function(row){return _c('b-row',{key:row.key,staticClass:\"dev-grid\"},_vm._l((row.columns),function(col,cIndex){return _c('b-col',{key:cIndex,attrs:{\"cols\":col}},[_c('div',{ref:\"col\",refInFor:true},[_c('div',{staticClass:\"class\"},[_c('span',[_vm._v(_vm._s((\"col-\" + col)))])]),_c('div',{staticClass:\"width\"},[_c('span')])])])}),1)})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"dev-group\">\r\n    <h2 class=\"group-title\">Grid</h2>\r\n\r\n    <b-row v-for=\"row in gridRows\" :key=\"row.key\" class=\"dev-grid\">\r\n      <b-col v-for=\"(col, cIndex) in row.columns\" :key=\"cIndex\" :cols=\"col\">\r\n        <div ref=\"col\">\r\n          <div class=\"class\"><span>{{ `col-${col}` }}</span></div>\r\n          <div class=\"width\"><span></span></div>\r\n        </div>\r\n      </b-col>\r\n    </b-row>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'DevGrid',\r\n  data () {\r\n    return {\r\n      scss: this.$root.scss\r\n    }\r\n  },\r\n  computed: {\r\n    gridRows () {\r\n      const totalColumns = this.scss.grid.columns.value\r\n      const gridRows = Array.from({ length: totalColumns }, (arr, i) => i + 1).reverse()\r\n\r\n      return gridRows\r\n        .reduce((rows, r) => {\r\n          const key = `row-${r}`\r\n          const fillRest = totalColumns % r !== 0\r\n          const rest = totalColumns - r\r\n          const same = Array.from({ length: totalColumns / r - 1 }, arr => r)\r\n\r\n          rows[key] = {\r\n            key,\r\n            columns: [r].concat(fillRest ? rest : same)\r\n          }\r\n\r\n          return rows\r\n        }, {})\r\n    }\r\n  },\r\n  methods: {\r\n    gridSetPixelWidth () {\r\n      this.$refs.col\r\n        .forEach(col => {\r\n          const pixel = col.querySelector('.width > span')\r\n          pixel.innerHTML = `${col.scrollWidth}px`\r\n        })\r\n    }\r\n  },\r\n  mounted () {\r\n    this.$nextTick(() => {\r\n      this.gridSetPixelWidth()\r\n      window.addEventListener('resize', this.gridSetPixelWidth)\r\n    })\r\n  },\r\n  beforeDestroy () {\r\n    window.removeEventListener('resize', this.gridSetPixelWidth)\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.dev-grid {\r\n  align-items: stretch;\r\n\r\n  .col,\r\n  [class*=\"col-\"] {\r\n    min-height: $spacer * 3;\r\n\r\n    > div {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      justify-content: center;\r\n      align-content: center;\r\n      height: 100%;\r\n      background-color: $gray-200;\r\n      text-align: center;\r\n\r\n      .class,\r\n      .width {\r\n        width: 100%;\r\n        font-family: $font-family-monospace;\r\n        font-size: $font-size-sm * 0.75;\r\n        color: $gray-600;\r\n\r\n        > span {\r\n          font-size: $font-size-sm;\r\n          color: $body-color;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  + .dev-grid {\r\n    margin-top: $spacer;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Grid.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Grid.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Grid.vue?vue&type=template&id=36d90e6e&\"\nimport script from \"./Grid.vue?vue&type=script&lang=js&\"\nexport * from \"./Grid.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Grid.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}