vue-layout-system - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/vue-layout-system.common.js

@@ -274,2 +274,78 @@ module.exports =
 
+/***/ "3cfe":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutGrid.vue?vue&type=template&id=36944b93&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-grid",class:[
+		_vm.getGapClass('layout-grid'),
+		_vm.getVerticalAlignClass('layout-grid'),
+		_vm.paddingClass ],style:({
+		'--column-count': _vm.columnCount,
+	})},[_vm._t("default")],2)}
+var staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/LayoutGrid.vue?vue&type=template&id=36944b93&
+
+// EXTERNAL MODULE: ./src/mixins/layoutMixin.js
+var layoutMixin = __webpack_require__("7c9a");
+
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--12!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutGrid.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ var LayoutGridvue_type_script_lang_js_ = ({
+  name: 'LayoutGrid',
+  mixins: [layoutMixin["a" /* default */]],
+  props: {
+    columnCount: {
+      type: [Number, String],
+      "default": 12
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/LayoutGrid.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_LayoutGridvue_type_script_lang_js_ = (LayoutGridvue_type_script_lang_js_); 
+// EXTERNAL MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__("eb61");
+
+// CONCATENATED MODULE: ./src/components/LayoutGrid.vue
+
+
+
+
+
+/* normalize component */
+
+var component = Object(componentNormalizer["a" /* default */])(
+  components_LayoutGridvue_type_script_lang_js_,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var LayoutGrid = __webpack_exports__["a"] = (component.exports);
+
+/***/ }),
+
 /***/ "647d":
@@ -310,3 +386,3 @@ /***/ (function(module, exports) {
 // EXPORTS
-__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ src_0["i" /* install */]; });
+__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ src_0["j" /* install */]; });
 __webpack_require__.d(__webpack_exports__, "LayoutAbsolute", function() { return /* reexport */ src_0["a" /* LayoutAbsolute */]; });
@@ -317,4 +393,5 @@ __webpack_require__.d(__webpack_exports__, "LayoutAlign", function() { return /* reexport */ src_0["b" /* LayoutAlign */]; });
 __webpack_require__.d(__webpack_exports__, "LayoutFlexRow", function() { return /* reexport */ src_0["e" /* LayoutFlexRow */]; });
-__webpack_require__.d(__webpack_exports__, "LayoutList", function() { return /* reexport */ src_0["f" /* LayoutList */]; });
-__webpack_require__.d(__webpack_exports__, "LayoutListInline", function() { return /* reexport */ src_0["g" /* LayoutListInline */]; });
+__webpack_require__.d(__webpack_exports__, "LayoutGrid", function() { return /* reexport */ src_0["f" /* LayoutGrid */]; });
+__webpack_require__.d(__webpack_exports__, "LayoutList", function() { return /* reexport */ src_0["g" /* LayoutList */]; });
+__webpack_require__.d(__webpack_exports__, "LayoutListInline", function() { return /* reexport */ src_0["h" /* LayoutListInline */]; });
 
@@ -351,3 +428,3 @@ // CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 
-/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["h" /* default */]);
+/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["i" /* default */]);
 
@@ -556,3 +633,3 @@
     getHorizontalAlignClass: function getHorizontalAlignClass(componentClass) {
-      if (['default', 'left', 'center', 'right'].indexOf(this.horizontalAlign) !== -1) {
+      if (['default', 'stretch', 'left', 'center', 'right'].indexOf(this.horizontalAlign) !== -1) {
         return "".concat(componentClass, "--horizontal-align-").concat(this.horizontalAlign);
@@ -564,3 +641,3 @@ }
     getVerticalAlignClass: function getVerticalAlignClass(componentClass) {
-      if (['default', 'top', 'center', 'bottom'].indexOf(this.verticalAlign) !== -1) {
+      if (['default', 'stretch', 'top', 'center', 'bottom'].indexOf(this.verticalAlign) !== -1) {
         return "".concat(componentClass, "--vertical-align-").concat(this.verticalAlign);
@@ -590,3 +667,3 @@ }
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexColumn.vue?vue&type=template&id=d262a53e&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexColumn.vue?vue&type=template&id=1a44b2fe&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-flex-column",class:[
@@ -596,7 +673,8 @@ _vm.getHorizontalAlignClass('layout-flex-column'),
 		_vm.paddingClass,
-		_vm.noRemainClass ]},[(_vm.$slots.top)?_c('div',{staticClass:"layout-flex-column__top"},[_vm._t("top")],2):_vm._e(),_c('div',{staticClass:"layout-flex-column__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.bottom)?_c('div',{staticClass:"layout-flex-column__bottom"},[_vm._t("bottom")],2):_vm._e()])}
+		_vm.noRemainClass,
+		_vm.isRemainScrollable ? 'layout-flex-column--remain-overflow-scroll' : null ]},[(_vm.$slots.top)?_c('div',{staticClass:"layout-flex-column__top"},[_vm._t("top")],2):_vm._e(),_c('div',{staticClass:"layout-flex-column__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.bottom)?_c('div',{staticClass:"layout-flex-column__bottom"},[_vm._t("bottom")],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/LayoutFlexColumn.vue?vue&type=template&id=d262a53e&
+// CONCATENATED MODULE: ./src/components/LayoutFlexColumn.vue?vue&type=template&id=1a44b2fe&
 
@@ -629,2 +707,3 @@ // EXTERNAL MODULE: ./src/mixins/layoutMixin.js
 //
+//
 
@@ -634,2 +713,8 @@ /* harmony default export */ var LayoutFlexColumnvue_type_script_lang_js_ = ({
   mixins: [layoutMixin["a" /* default */]],
+  props: {
+    isRemainScrollable: {
+      type: Boolean,
+      "default": false
+    }
+  },
   computed: {
@@ -674,3 +759,3 @@ noRemainClass: function noRemainClass() {
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexRow.vue?vue&type=template&id=706aaa67&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexRow.vue?vue&type=template&id=1add4644&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-flex-row",class:[
@@ -680,7 +765,8 @@ _vm.getVerticalAlignClass('layout-flex-row'),
 		_vm.paddingClass,
-		_vm.noRemainClass ]},[(_vm.$slots.left)?_c('div',{staticClass:"layout-flex-row__left"},[_vm._t("left")],2):_vm._e(),_c('div',{staticClass:"layout-flex-row__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.right)?_c('div',{staticClass:"layout-flex-row__right"},[_vm._t("right")],2):_vm._e()])}
+		_vm.noRemainClass,
+		_vm.isRemainScrollable ? 'layout-flex-row--remain-overflow-scroll' : null ]},[(_vm.$slots.left)?_c('div',{staticClass:"layout-flex-row__left"},[_vm._t("left")],2):_vm._e(),_c('div',{staticClass:"layout-flex-row__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.right)?_c('div',{staticClass:"layout-flex-row__right"},[_vm._t("right")],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/LayoutFlexRow.vue?vue&type=template&id=706aaa67&
+// CONCATENATED MODULE: ./src/components/LayoutFlexRow.vue?vue&type=template&id=1add4644&
 
@@ -721,2 +807,3 @@ // EXTERNAL MODULE: ./src/mixins/layoutMixin.js
 //
+//
 
@@ -726,2 +813,8 @@ /* harmony default export */ var LayoutFlexRowvue_type_script_lang_js_ = ({
   mixins: [layoutMixin["a" /* default */]],
+  props: {
+    isRemainScrollable: {
+      type: Boolean,
+      "default": false
+    }
+  },
   computed: {
@@ -840,3 +933,3 @@ noRemainClass: function noRemainClass() {
 "use strict";
-/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return install; });
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return install; });
 /* harmony import */ var _components_LayoutAbsolute_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("efce");
@@ -857,11 +950,13 @@ /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _components_LayoutAbsolute_vue__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("d5e6");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "f", function() { return _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+/* harmony import */ var _components_LayoutGrid_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("3cfe");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "f", function() { return _components_LayoutGrid_vue__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("a3f1");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "g", function() { return _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+/* harmony import */ var _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("d5e6");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "g", function() { return _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("b107");
-/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_scss_main_scss__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("a3f1");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "h", function() { return _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_7__["a"]; });
 
+/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("b107");
+/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_scss_main_scss__WEBPACK_IMPORTED_MODULE_8__);
 
@@ -874,2 +969,4 @@
 
+
+
 var VueLayoutSystem = {
@@ -881,4 +978,5 @@ LayoutAbsolute: _components_LayoutAbsolute_vue__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"],
   LayoutFlexRow: _components_LayoutFlexRow_vue__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"],
-  LayoutList: _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"],
-  LayoutListInline: _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"]
+  LayoutGrid: _components_LayoutGrid_vue__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"],
+  LayoutList: _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"],
+  LayoutListInline: _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"]
 };
@@ -907,3 +1005,3 @@ function install(Vue) {
 
-/* harmony default export */ __webpack_exports__["h"] = (VueLayoutSystem);
+/* harmony default export */ __webpack_exports__["i"] = (VueLayoutSystem);
 
@@ -919,3 +1017,3 @@ /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("647d")))
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAlign.vue?vue&type=template&id=4be2c860&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAlign.vue?vue&type=template&id=4be2c860&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-align",class:[
@@ -987,3 +1085,3 @@ _vm.getVerticalAlignClass('layout-align'),
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutList.vue?vue&type=template&id=32221486&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutList.vue?vue&type=template&id=32221486&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-list",class:[
@@ -1160,3 +1258,3 @@ _vm.getGapClass('layout-list'),
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAbsolute.vue?vue&type=template&id=044aa3e7&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAbsolute.vue?vue&type=template&id=044aa3e7&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-absolute",class:[_vm.paddingClass]},[_c('div',{staticClass:"layout-absolute__wrapper"},[(_vm.$slots.topLeft)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--top-left"},[_vm._t("topLeft")],2):_vm._e(),(_vm.$slots.top)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--top"},[_vm._t("top")],2):_vm._e(),(_vm.$slots.topRight)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--top-right"},[_vm._t("topRight")],2):_vm._e(),(_vm.$slots.right)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--right"},[_vm._t("right")],2):_vm._e(),(_vm.$slots.bottomRight)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-right"},[_vm._t("bottomRight")],2):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--bottom"},[_vm._t("bottom")],2):_vm._e(),(_vm.$slots.bottomLeft)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-left"},[_vm._t("bottomLeft")],2):_vm._e(),(_vm.$slots.left)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--left"},[_vm._t("left")],2):_vm._e(),(_vm.$slots.center)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--center"},[_vm._t("center")],2):_vm._e()])])}
@@ -1163,0 +1261,0 @@ var staticRenderFns = []

dist/vue-layout-system.umd.js

@@ -283,2 +283,78 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+/***/ "3cfe":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutGrid.vue?vue&type=template&id=36944b93&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-grid",class:[
+		_vm.getGapClass('layout-grid'),
+		_vm.getVerticalAlignClass('layout-grid'),
+		_vm.paddingClass ],style:({
+		'--column-count': _vm.columnCount,
+	})},[_vm._t("default")],2)}
+var staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/LayoutGrid.vue?vue&type=template&id=36944b93&
+
+// EXTERNAL MODULE: ./src/mixins/layoutMixin.js
+var layoutMixin = __webpack_require__("7c9a");
+
+// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--12!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutGrid.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ var LayoutGridvue_type_script_lang_js_ = ({
+  name: 'LayoutGrid',
+  mixins: [layoutMixin["a" /* default */]],
+  props: {
+    columnCount: {
+      type: [Number, String],
+      "default": 12
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/LayoutGrid.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_LayoutGridvue_type_script_lang_js_ = (LayoutGridvue_type_script_lang_js_); 
+// EXTERNAL MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
+var componentNormalizer = __webpack_require__("eb61");
+
+// CONCATENATED MODULE: ./src/components/LayoutGrid.vue
+
+
+
+
+
+/* normalize component */
+
+var component = Object(componentNormalizer["a" /* default */])(
+  components_LayoutGridvue_type_script_lang_js_,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var LayoutGrid = __webpack_exports__["a"] = (component.exports);
+
+/***/ }),
+
 /***/ "647d":
@@ -319,3 +395,3 @@ /***/ (function(module, exports) {
 // EXPORTS
-__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ src_0["i" /* install */]; });
+__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ src_0["j" /* install */]; });
 __webpack_require__.d(__webpack_exports__, "LayoutAbsolute", function() { return /* reexport */ src_0["a" /* LayoutAbsolute */]; });
@@ -326,4 +402,5 @@ __webpack_require__.d(__webpack_exports__, "LayoutAlign", function() { return /* reexport */ src_0["b" /* LayoutAlign */]; });
 __webpack_require__.d(__webpack_exports__, "LayoutFlexRow", function() { return /* reexport */ src_0["e" /* LayoutFlexRow */]; });
-__webpack_require__.d(__webpack_exports__, "LayoutList", function() { return /* reexport */ src_0["f" /* LayoutList */]; });
-__webpack_require__.d(__webpack_exports__, "LayoutListInline", function() { return /* reexport */ src_0["g" /* LayoutListInline */]; });
+__webpack_require__.d(__webpack_exports__, "LayoutGrid", function() { return /* reexport */ src_0["f" /* LayoutGrid */]; });
+__webpack_require__.d(__webpack_exports__, "LayoutList", function() { return /* reexport */ src_0["g" /* LayoutList */]; });
+__webpack_require__.d(__webpack_exports__, "LayoutListInline", function() { return /* reexport */ src_0["h" /* LayoutListInline */]; });
 
@@ -360,3 +437,3 @@ // CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 
-/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["h" /* default */]);
+/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["i" /* default */]);
 
@@ -565,3 +642,3 @@
     getHorizontalAlignClass: function getHorizontalAlignClass(componentClass) {
-      if (['default', 'left', 'center', 'right'].indexOf(this.horizontalAlign) !== -1) {
+      if (['default', 'stretch', 'left', 'center', 'right'].indexOf(this.horizontalAlign) !== -1) {
         return "".concat(componentClass, "--horizontal-align-").concat(this.horizontalAlign);
@@ -573,3 +650,3 @@ }
     getVerticalAlignClass: function getVerticalAlignClass(componentClass) {
-      if (['default', 'top', 'center', 'bottom'].indexOf(this.verticalAlign) !== -1) {
+      if (['default', 'stretch', 'top', 'center', 'bottom'].indexOf(this.verticalAlign) !== -1) {
         return "".concat(componentClass, "--vertical-align-").concat(this.verticalAlign);
@@ -599,3 +676,3 @@ }
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexColumn.vue?vue&type=template&id=d262a53e&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexColumn.vue?vue&type=template&id=1a44b2fe&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-flex-column",class:[
@@ -605,7 +682,8 @@ _vm.getHorizontalAlignClass('layout-flex-column'),
 		_vm.paddingClass,
-		_vm.noRemainClass ]},[(_vm.$slots.top)?_c('div',{staticClass:"layout-flex-column__top"},[_vm._t("top")],2):_vm._e(),_c('div',{staticClass:"layout-flex-column__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.bottom)?_c('div',{staticClass:"layout-flex-column__bottom"},[_vm._t("bottom")],2):_vm._e()])}
+		_vm.noRemainClass,
+		_vm.isRemainScrollable ? 'layout-flex-column--remain-overflow-scroll' : null ]},[(_vm.$slots.top)?_c('div',{staticClass:"layout-flex-column__top"},[_vm._t("top")],2):_vm._e(),_c('div',{staticClass:"layout-flex-column__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.bottom)?_c('div',{staticClass:"layout-flex-column__bottom"},[_vm._t("bottom")],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/LayoutFlexColumn.vue?vue&type=template&id=d262a53e&
+// CONCATENATED MODULE: ./src/components/LayoutFlexColumn.vue?vue&type=template&id=1a44b2fe&
 
@@ -638,2 +716,3 @@ // EXTERNAL MODULE: ./src/mixins/layoutMixin.js
 //
+//
 
@@ -643,2 +722,8 @@ /* harmony default export */ var LayoutFlexColumnvue_type_script_lang_js_ = ({
   mixins: [layoutMixin["a" /* default */]],
+  props: {
+    isRemainScrollable: {
+      type: Boolean,
+      "default": false
+    }
+  },
   computed: {
@@ -683,3 +768,3 @@ noRemainClass: function noRemainClass() {
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexRow.vue?vue&type=template&id=706aaa67&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutFlexRow.vue?vue&type=template&id=1add4644&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-flex-row",class:[
@@ -689,7 +774,8 @@ _vm.getVerticalAlignClass('layout-flex-row'),
 		_vm.paddingClass,
-		_vm.noRemainClass ]},[(_vm.$slots.left)?_c('div',{staticClass:"layout-flex-row__left"},[_vm._t("left")],2):_vm._e(),_c('div',{staticClass:"layout-flex-row__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.right)?_c('div',{staticClass:"layout-flex-row__right"},[_vm._t("right")],2):_vm._e()])}
+		_vm.noRemainClass,
+		_vm.isRemainScrollable ? 'layout-flex-row--remain-overflow-scroll' : null ]},[(_vm.$slots.left)?_c('div',{staticClass:"layout-flex-row__left"},[_vm._t("left")],2):_vm._e(),_c('div',{staticClass:"layout-flex-row__remain"},[_vm._t("remain",[_vm._t("default")])],2),(_vm.$slots.right)?_c('div',{staticClass:"layout-flex-row__right"},[_vm._t("right")],2):_vm._e()])}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/LayoutFlexRow.vue?vue&type=template&id=706aaa67&
+// CONCATENATED MODULE: ./src/components/LayoutFlexRow.vue?vue&type=template&id=1add4644&
 
@@ -730,2 +816,3 @@ // EXTERNAL MODULE: ./src/mixins/layoutMixin.js
 //
+//
 
@@ -735,2 +822,8 @@ /* harmony default export */ var LayoutFlexRowvue_type_script_lang_js_ = ({
   mixins: [layoutMixin["a" /* default */]],
+  props: {
+    isRemainScrollable: {
+      type: Boolean,
+      "default": false
+    }
+  },
   computed: {
@@ -849,3 +942,3 @@ noRemainClass: function noRemainClass() {
 "use strict";
-/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return install; });
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return install; });
 /* harmony import */ var _components_LayoutAbsolute_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("efce");
@@ -866,11 +959,13 @@ /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _components_LayoutAbsolute_vue__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("d5e6");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "f", function() { return _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+/* harmony import */ var _components_LayoutGrid_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("3cfe");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "f", function() { return _components_LayoutGrid_vue__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
-/* harmony import */ var _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("a3f1");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "g", function() { return _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+/* harmony import */ var _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("d5e6");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "g", function() { return _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_6__["a"]; });
 
-/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("b107");
-/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_scss_main_scss__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("a3f1");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "h", function() { return _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_7__["a"]; });
 
+/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("b107");
+/* harmony import */ var _scss_main_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_scss_main_scss__WEBPACK_IMPORTED_MODULE_8__);
 
@@ -883,2 +978,4 @@
 
+
+
 var VueLayoutSystem = {
@@ -890,4 +987,5 @@ LayoutAbsolute: _components_LayoutAbsolute_vue__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"],
   LayoutFlexRow: _components_LayoutFlexRow_vue__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"],
-  LayoutList: _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"],
-  LayoutListInline: _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"]
+  LayoutGrid: _components_LayoutGrid_vue__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"],
+  LayoutList: _components_LayoutList_vue__WEBPACK_IMPORTED_MODULE_6__[/* default */ "a"],
+  LayoutListInline: _components_LayoutListInline_vue__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"]
 };
@@ -916,3 +1014,3 @@ function install(Vue) {
 
-/* harmony default export */ __webpack_exports__["h"] = (VueLayoutSystem);
+/* harmony default export */ __webpack_exports__["i"] = (VueLayoutSystem);
 
@@ -928,3 +1026,3 @@ /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("647d")))
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAlign.vue?vue&type=template&id=4be2c860&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAlign.vue?vue&type=template&id=4be2c860&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-align",class:[
@@ -996,3 +1094,3 @@ _vm.getVerticalAlignClass('layout-align'),
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutList.vue?vue&type=template&id=32221486&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutList.vue?vue&type=template&id=32221486&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-list",class:[
@@ -1169,3 +1267,3 @@ _vm.getGapClass('layout-list'),
 
-// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6aabb5b2-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAbsolute.vue?vue&type=template&id=044aa3e7&
+// CONCATENATED MODULE: /usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"4bb9b8aa-vue-loader-template"}!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/usr/local/lib/node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/LayoutAbsolute.vue?vue&type=template&id=044aa3e7&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"layout-absolute",class:[_vm.paddingClass]},[_c('div',{staticClass:"layout-absolute__wrapper"},[(_vm.$slots.topLeft)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--top-left"},[_vm._t("topLeft")],2):_vm._e(),(_vm.$slots.top)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--top"},[_vm._t("top")],2):_vm._e(),(_vm.$slots.topRight)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--top-right"},[_vm._t("topRight")],2):_vm._e(),(_vm.$slots.right)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--right"},[_vm._t("right")],2):_vm._e(),(_vm.$slots.bottomRight)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-right"},[_vm._t("bottomRight")],2):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--bottom"},[_vm._t("bottom")],2):_vm._e(),(_vm.$slots.bottomLeft)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-left"},[_vm._t("bottomLeft")],2):_vm._e(),(_vm.$slots.left)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--left"},[_vm._t("left")],2):_vm._e(),(_vm.$slots.center)?_c('div',{staticClass:"layout-absolute__cell layout-absolute__cell--center"},[_vm._t("center")],2):_vm._e()])])}
@@ -1172,0 +1270,0 @@ var staticRenderFns = []

dist/vue-layout-system.umd.min.js

@@ -1,2 +0,2 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-layout-system"]=e():t["vue-layout-system"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var l=e[o]={i:o,l:!1,exports:{}};return t[o].call(l.exports,l,l.exports,n),l.l=!0,l.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var l in t)n.d(o,l,function(e){return t[e]}.bind(null,l));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="6774")}({"178d":function(t,e,n){var o,l,a;(function(n,i){l=[],o=i,a="function"===typeof o?o.apply(e,l):o,void 0===a||(t.exports=a)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,o,l,a=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,i=/@([^@]*):(\d+):(\d+)\s*$/gi,r=a.exec(p.stack)||i.exec(p.stack),u=r&&r[1]||!1,s=r&&r[2]||!1,c=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");u===c&&(n=document.documentElement.outerHTML,o=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),l=n.replace(o,"$1").trim());for(var f=0;f<d.length;f++){if("interactive"===d[f].readyState)return d[f];if(d[f].src===u)return d[f];if(u===c&&d[f].innerHTML&&d[f].innerHTML.trim()===l)return d[f]}return null}}return t}))},"236d":function(t,e,n){"use strict";var o=n("7c9a");function l(t){return u(t)||r(t)||i(t)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function i(t,e){if(t){if("string"===typeof t)return s(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(t,e):void 0}}function r(t){if("undefined"!==typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function u(t){if(Array.isArray(t))return s(t)}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}var c,d,f={name:"LayoutColumns",props:{contentMinWidth:{type:[Number,String],default:null},columnCount:{type:[Number,String],default:null},flowDirection:{type:String,default:"row"}},mixins:[o["a"]],computed:{flowDirectionClass:function(){return"column"===this.flowDirection?"layout-columns--flow-direction-column":"layout-columns--flow-direction-row"},cssVar:function(){return{"--layout-columns-content-min-width":this.columnCount?0:this.contentMinWidth&&Number.isInteger(+this.contentMinWidth)?this.contentMinWidth+"px":this.contentMinWidth,"--layout-columns-column-count":this.columnCount}}},render:function(t){var e="layout-columns";return t("div",{class:[e,this.getGapClass(e),this.getHorizontalAlignClass(e),this.getVerticalAlignClass(e),this.flowDirectionClass,this.paddingClass],style:[this.cssVar]},"row"===this.flowDirection?this.$slots["default"]:[t("div",{class:"".concat(e,"__wrapper")},l(this.$slots["default"].filter((function(t){return t.tag})).map((function(n){return t("div",{class:"".concat(e,"__item")},[n])}))))])}},p=f,m=n("eb61"),y=Object(m["a"])(p,c,d,!1,null,null,null);e["a"]=y.exports},"647d":function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(o){"object"===typeof window&&(n=window)}t.exports=n},6774:function(t,e,n){"use strict";if(n.r(e),n.d(e,"install",(function(){return i["i"]})),n.d(e,"LayoutAbsolute",(function(){return i["a"]})),n.d(e,"LayoutAlign",(function(){return i["b"]})),n.d(e,"LayoutColumns",(function(){return i["c"]})),n.d(e,"LayoutFlexColumn",(function(){return i["d"]})),n.d(e,"LayoutFlexRow",(function(){return i["e"]})),n.d(e,"LayoutList",(function(){return i["f"]})),n.d(e,"LayoutListInline",(function(){return i["g"]})),"undefined"!==typeof window){var o=window.document.currentScript,l=n("178d");o=l(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:l});var a=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(n.p=a[1])}var i=n("b635");e["default"]=i["h"]},"7c9a":function(t,e,n){"use strict";var o="layout--debug",l=null,a=function(t){var e;null!==(e=l)&&void 0!==e&&e.isSameNode(t)||(l&&l.classList.remove(o),t.classList.add(o),l=t)},i=function(t){var e;null!==(e=l)&&void 0!==e&&e.isSameNode(t)&&(l.classList.remove(o),l=null)};e["a"]={props:{padding:{type:[Number,String],default:null},paddingX:{type:[Number,String],default:null},paddingY:{type:[Number,String],default:null},paddingTop:{type:[Number,String],default:null},paddingBottom:{type:[Number,String],default:null},paddingLeft:{type:[Number,String],default:null},paddingRight:{type:[Number,String],default:null},gap:{type:[Number,String],default:0},gapX:{type:[Number,String],default:0},gapY:{type:[Number,String],default:0},horizontalAlign:{type:String,default:"default"},verticalAlign:{type:String,default:"default"}},computed:{paddingClass:function(){var t=this.padding,e=this.paddingX,n=this.paddingY,o=this.paddingTop,l=this.paddingBottom,a=this.paddingLeft,i=this.paddingRight;if("string"===typeof this.padding){var r=this.padding.split(" ").filter((function(t){return t.length}));switch(r.length>=2&&r.length<=4&&(t=e=n=o=l=a=i=null),r.length){case 2:n=r[0],e=r[1];break;case 3:o=r[0],e=r[1],l=r[2];break;case 4:o=r[0],i=r[1],l=r[2],a=r[3];break}}var u=[];return null!==t&&u.push("layout-u-p-".concat(t)),null!==e&&u.push("layout-u-px-".concat(e)),null!==n&&u.push("layout-u-py-".concat(n)),null!==o&&u.push("layout-u-pt-".concat(o)),null!==l&&u.push("layout-u-pb-".concat(l)),null!==a&&u.push("layout-u-pl-".concat(a)),null!==i&&u.push("layout-u-pr-".concat(i)),u}},mounted:function(){this.$el.addEventListener("mouseleave",this.onMouseLeave),this.$el.addEventListener("mousemove",this.onMouseMove)},beforeDestroy:function(){this.$el.removeEventListener("mouseleave",this.onMouseLeave),this.$el.removeEventListener("mousemove",this.onMouseMove)},methods:{getGapClass:function(t){var e=this.gap,n=this.gapX,o=this.gapY;if("string"===typeof this.gap){var l=this.gap.split(" ").filter((function(t){return t.length}));2===l.length&&(e=null,o=l[0],n=l[1])}var a=[];return 0!==e&&a.push("".concat(t,"--gap-").concat(e)),0!==n&&a.push("".concat(t,"--gap-x-").concat(n)),0!==o&&a.push("".concat(t,"--gap-y-").concat(o)),a},getHorizontalAlignClass:function(t){return-1!==["default","left","center","right"].indexOf(this.horizontalAlign)?"".concat(t,"--horizontal-align-").concat(this.horizontalAlign):null},getVerticalAlignClass:function(t){return-1!==["default","top","center","bottom"].indexOf(this.verticalAlign)?"".concat(t,"--vertical-align-").concat(this.verticalAlign):null},onMouseMove:function(t){this.$el.matches(".layout-u-debug div")&&(t.stopPropagation(),a(this.$el))},onMouseLeave:function(){i(this.$el)}}}},"908f":function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-flex-column",class:[t.getHorizontalAlignClass("layout-flex-column"),t.getGapClass("layout-flex-column"),t.paddingClass,t.noRemainClass]},[t.$slots.top?n("div",{staticClass:"layout-flex-column__top"},[t._t("top")],2):t._e(),n("div",{staticClass:"layout-flex-column__remain"},[t._t("remain",[t._t("default")])],2),t.$slots.bottom?n("div",{staticClass:"layout-flex-column__bottom"},[t._t("bottom")],2):t._e()])},l=[],a=n("7c9a"),i={name:"LayoutFlexColumn",mixins:[a["a"]],computed:{noRemainClass:function(){return this.$slots.remain?null:"layout-flex-column--no-remain"}}},r=i,u=n("eb61"),s=Object(u["a"])(r,o,l,!1,null,null,null);e["a"]=s.exports},9655:function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-flex-row",class:[t.getVerticalAlignClass("layout-flex-row"),t.getGapClass("layout-flex-row"),t.paddingClass,t.noRemainClass]},[t.$slots.left?n("div",{staticClass:"layout-flex-row__left"},[t._t("left")],2):t._e(),n("div",{staticClass:"layout-flex-row__remain"},[t._t("remain",[t._t("default")])],2),t.$slots.right?n("div",{staticClass:"layout-flex-row__right"},[t._t("right")],2):t._e()])},l=[],a=n("7c9a"),i={name:"LayoutFlexRow",mixins:[a["a"]],computed:{noRemainClass:function(){return this.$slots.remain?null:"layout-flex-row--no-remain"}}},r=i,u=n("eb61"),s=Object(u["a"])(r,o,l,!1,null,null,null);e["a"]=s.exports},a3f1:function(t,e,n){"use strict";var o,l,a=n("7c9a"),i={name:"LayoutListInline",mixins:[a["a"]],props:{wrap:{type:Boolean,default:!0}},methods:{getNowrapClass:function(t){return this.wrap?null:"".concat(t,"--nowrap")}},render:function(t){var e="layout-list-inline";return t("div",{class:[e,this.getGapClass(e),this.getHorizontalAlignClass(e),this.getVerticalAlignClass(e),this.getNowrapClass(e),this.paddingClass]},[t("div",{class:"".concat(e,"__wrapper")},this.$slots["default"].filter((function(t){return t.tag})).map((function(n){return t("div",{class:"".concat(e,"__item")},[n])})))])}},r=i,u=n("eb61"),s=Object(u["a"])(r,o,l,!1,null,null,null);e["a"]=s.exports},b107:function(t,e,n){},b635:function(t,e,n){"use strict";(function(t){n.d(e,"i",(function(){return d}));var o=n("efce");n.d(e,"a",(function(){return o["a"]}));var l=n("caf1");n.d(e,"b",(function(){return l["a"]}));var a=n("236d");n.d(e,"c",(function(){return a["a"]}));var i=n("908f");n.d(e,"d",(function(){return i["a"]}));var r=n("9655");n.d(e,"e",(function(){return r["a"]}));var u=n("d5e6");n.d(e,"f",(function(){return u["a"]}));var s=n("a3f1");n.d(e,"g",(function(){return s["a"]}));n("b107");var c={LayoutAbsolute:o["a"],LayoutAlign:l["a"],LayoutColumns:a["a"],LayoutFlexColumn:i["a"],LayoutFlexRow:r["a"],LayoutList:u["a"],LayoutListInline:s["a"]};function d(t){d.installed||(d.installed=!0,Object.keys(c).forEach((function(e){t.component(e,c[e])})))}var f={install:d},p=null;"undefined"!==typeof window?p=window.Vue:"undefined"!==typeof t&&(p=t.Vue),p&&p.use(f),e["h"]=c}).call(this,n("647d"))},caf1:function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-align",class:[t.getVerticalAlignClass("layout-align"),t.getHorizontalAlignClass("layout-align"),t.paddingClass]},[n("div",{staticClass:"layout-align__content"},[t._t("default")],2)])},l=[],a=n("7c9a"),i={name:"LayoutAlign",mixins:[a["a"]]},r=i,u=n("eb61"),s=Object(u["a"])(r,o,l,!1,null,null,null);e["a"]=s.exports},d5e6:function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-list",class:[t.getGapClass("layout-list"),t.getHorizontalAlignClass("layout-list"),t.paddingClass]},[t._t("default")],2)},l=[],a=n("7c9a"),i={name:"LayoutList",mixins:[a["a"]]},r=i,u=n("eb61"),s=Object(u["a"])(r,o,l,!1,null,null,null);e["a"]=s.exports},eb61:function(t,e,n){"use strict";function o(t,e,n,o,l,a,i,r){var u,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),o&&(s.functional=!0),a&&(s._scopeId="data-v-"+a),i?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),l&&l.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},s._ssrRegister=u):l&&(u=r?function(){l.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:l),u)if(s.functional){s._injectStyles=u;var c=s.render;s.render=function(t,e){return u.call(e),c(t,e)}}else{var d=s.beforeCreate;s.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:s}}n.d(e,"a",(function(){return o}))},efce:function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-absolute",class:[t.paddingClass]},[n("div",{staticClass:"layout-absolute__wrapper"},[t.$slots.topLeft?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--top-left"},[t._t("topLeft")],2):t._e(),t.$slots.top?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--top"},[t._t("top")],2):t._e(),t.$slots.topRight?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--top-right"},[t._t("topRight")],2):t._e(),t.$slots.right?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--right"},[t._t("right")],2):t._e(),t.$slots.bottomRight?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-right"},[t._t("bottomRight")],2):t._e(),t.$slots.bottom?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--bottom"},[t._t("bottom")],2):t._e(),t.$slots.bottomLeft?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-left"},[t._t("bottomLeft")],2):t._e(),t.$slots.left?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--left"},[t._t("left")],2):t._e(),t.$slots.center?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--center"},[t._t("center")],2):t._e()])])},l=[],a=n("7c9a"),i={name:"LayoutAbsolute",mixins:[a["a"]]},r=i,u=n("eb61"),s=Object(u["a"])(r,o,l,!1,null,null,null);e["a"]=s.exports}})["default"]}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-layout-system"]=e():t["vue-layout-system"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(l){if(e[l])return e[l].exports;var o=e[l]={i:l,l:!1,exports:{}};return t[l].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,l){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:l})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var l=Object.create(null);if(n.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(l,o,function(e){return t[e]}.bind(null,o));return l},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="6774")}({"178d":function(t,e,n){var l,o,a;(function(n,i){o=[],l=i,a="function"===typeof l?l.apply(e,o):l,void 0===a||(t.exports=a)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,l,o,a=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,i=/@([^@]*):(\d+):(\d+)\s*$/gi,r=a.exec(p.stack)||i.exec(p.stack),u=r&&r[1]||!1,s=r&&r[2]||!1,c=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");u===c&&(n=document.documentElement.outerHTML,l=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=n.replace(l,"$1").trim());for(var f=0;f<d.length;f++){if("interactive"===d[f].readyState)return d[f];if(d[f].src===u)return d[f];if(u===c&&d[f].innerHTML&&d[f].innerHTML.trim()===o)return d[f]}return null}}return t}))},"236d":function(t,e,n){"use strict";var l=n("7c9a");function o(t){return u(t)||r(t)||i(t)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function i(t,e){if(t){if("string"===typeof t)return s(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(t,e):void 0}}function r(t){if("undefined"!==typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function u(t){if(Array.isArray(t))return s(t)}function s(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,l=new Array(e);n<e;n++)l[n]=t[n];return l}var c,d,f={name:"LayoutColumns",props:{contentMinWidth:{type:[Number,String],default:null},columnCount:{type:[Number,String],default:null},flowDirection:{type:String,default:"row"}},mixins:[l["a"]],computed:{flowDirectionClass:function(){return"column"===this.flowDirection?"layout-columns--flow-direction-column":"layout-columns--flow-direction-row"},cssVar:function(){return{"--layout-columns-content-min-width":this.columnCount?0:this.contentMinWidth&&Number.isInteger(+this.contentMinWidth)?this.contentMinWidth+"px":this.contentMinWidth,"--layout-columns-column-count":this.columnCount}}},render:function(t){var e="layout-columns";return t("div",{class:[e,this.getGapClass(e),this.getHorizontalAlignClass(e),this.getVerticalAlignClass(e),this.flowDirectionClass,this.paddingClass],style:[this.cssVar]},"row"===this.flowDirection?this.$slots["default"]:[t("div",{class:"".concat(e,"__wrapper")},o(this.$slots["default"].filter((function(t){return t.tag})).map((function(n){return t("div",{class:"".concat(e,"__item")},[n])}))))])}},p=f,m=n("eb61"),y=Object(m["a"])(p,c,d,!1,null,null,null);e["a"]=y.exports},"3cfe":function(t,e,n){"use strict";var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-grid",class:[t.getGapClass("layout-grid"),t.getVerticalAlignClass("layout-grid"),t.paddingClass],style:{"--column-count":t.columnCount}},[t._t("default")],2)},o=[],a=n("7c9a"),i={name:"LayoutGrid",mixins:[a["a"]],props:{columnCount:{type:[Number,String],default:12}}},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports},"647d":function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(l){"object"===typeof window&&(n=window)}t.exports=n},6774:function(t,e,n){"use strict";if(n.r(e),n.d(e,"install",(function(){return i["j"]})),n.d(e,"LayoutAbsolute",(function(){return i["a"]})),n.d(e,"LayoutAlign",(function(){return i["b"]})),n.d(e,"LayoutColumns",(function(){return i["c"]})),n.d(e,"LayoutFlexColumn",(function(){return i["d"]})),n.d(e,"LayoutFlexRow",(function(){return i["e"]})),n.d(e,"LayoutGrid",(function(){return i["f"]})),n.d(e,"LayoutList",(function(){return i["g"]})),n.d(e,"LayoutListInline",(function(){return i["h"]})),"undefined"!==typeof window){var l=window.document.currentScript,o=n("178d");l=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var a=l&&l.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);a&&(n.p=a[1])}var i=n("b635");e["default"]=i["i"]},"7c9a":function(t,e,n){"use strict";var l="layout--debug",o=null,a=function(t){var e;null!==(e=o)&&void 0!==e&&e.isSameNode(t)||(o&&o.classList.remove(l),t.classList.add(l),o=t)},i=function(t){var e;null!==(e=o)&&void 0!==e&&e.isSameNode(t)&&(o.classList.remove(l),o=null)};e["a"]={props:{padding:{type:[Number,String],default:null},paddingX:{type:[Number,String],default:null},paddingY:{type:[Number,String],default:null},paddingTop:{type:[Number,String],default:null},paddingBottom:{type:[Number,String],default:null},paddingLeft:{type:[Number,String],default:null},paddingRight:{type:[Number,String],default:null},gap:{type:[Number,String],default:0},gapX:{type:[Number,String],default:0},gapY:{type:[Number,String],default:0},horizontalAlign:{type:String,default:"default"},verticalAlign:{type:String,default:"default"}},computed:{paddingClass:function(){var t=this.padding,e=this.paddingX,n=this.paddingY,l=this.paddingTop,o=this.paddingBottom,a=this.paddingLeft,i=this.paddingRight;if("string"===typeof this.padding){var r=this.padding.split(" ").filter((function(t){return t.length}));switch(r.length>=2&&r.length<=4&&(t=e=n=l=o=a=i=null),r.length){case 2:n=r[0],e=r[1];break;case 3:l=r[0],e=r[1],o=r[2];break;case 4:l=r[0],i=r[1],o=r[2],a=r[3];break}}var u=[];return null!==t&&u.push("layout-u-p-".concat(t)),null!==e&&u.push("layout-u-px-".concat(e)),null!==n&&u.push("layout-u-py-".concat(n)),null!==l&&u.push("layout-u-pt-".concat(l)),null!==o&&u.push("layout-u-pb-".concat(o)),null!==a&&u.push("layout-u-pl-".concat(a)),null!==i&&u.push("layout-u-pr-".concat(i)),u}},mounted:function(){this.$el.addEventListener("mouseleave",this.onMouseLeave),this.$el.addEventListener("mousemove",this.onMouseMove)},beforeDestroy:function(){this.$el.removeEventListener("mouseleave",this.onMouseLeave),this.$el.removeEventListener("mousemove",this.onMouseMove)},methods:{getGapClass:function(t){var e=this.gap,n=this.gapX,l=this.gapY;if("string"===typeof this.gap){var o=this.gap.split(" ").filter((function(t){return t.length}));2===o.length&&(e=null,l=o[0],n=o[1])}var a=[];return 0!==e&&a.push("".concat(t,"--gap-").concat(e)),0!==n&&a.push("".concat(t,"--gap-x-").concat(n)),0!==l&&a.push("".concat(t,"--gap-y-").concat(l)),a},getHorizontalAlignClass:function(t){return-1!==["default","stretch","left","center","right"].indexOf(this.horizontalAlign)?"".concat(t,"--horizontal-align-").concat(this.horizontalAlign):null},getVerticalAlignClass:function(t){return-1!==["default","stretch","top","center","bottom"].indexOf(this.verticalAlign)?"".concat(t,"--vertical-align-").concat(this.verticalAlign):null},onMouseMove:function(t){this.$el.matches(".layout-u-debug div")&&(t.stopPropagation(),a(this.$el))},onMouseLeave:function(){i(this.$el)}}}},"908f":function(t,e,n){"use strict";var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-flex-column",class:[t.getHorizontalAlignClass("layout-flex-column"),t.getGapClass("layout-flex-column"),t.paddingClass,t.noRemainClass,t.isRemainScrollable?"layout-flex-column--remain-overflow-scroll":null]},[t.$slots.top?n("div",{staticClass:"layout-flex-column__top"},[t._t("top")],2):t._e(),n("div",{staticClass:"layout-flex-column__remain"},[t._t("remain",[t._t("default")])],2),t.$slots.bottom?n("div",{staticClass:"layout-flex-column__bottom"},[t._t("bottom")],2):t._e()])},o=[],a=n("7c9a"),i={name:"LayoutFlexColumn",mixins:[a["a"]],props:{isRemainScrollable:{type:Boolean,default:!1}},computed:{noRemainClass:function(){return this.$slots.remain?null:"layout-flex-column--no-remain"}}},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports},9655:function(t,e,n){"use strict";var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-flex-row",class:[t.getVerticalAlignClass("layout-flex-row"),t.getGapClass("layout-flex-row"),t.paddingClass,t.noRemainClass,t.isRemainScrollable?"layout-flex-row--remain-overflow-scroll":null]},[t.$slots.left?n("div",{staticClass:"layout-flex-row__left"},[t._t("left")],2):t._e(),n("div",{staticClass:"layout-flex-row__remain"},[t._t("remain",[t._t("default")])],2),t.$slots.right?n("div",{staticClass:"layout-flex-row__right"},[t._t("right")],2):t._e()])},o=[],a=n("7c9a"),i={name:"LayoutFlexRow",mixins:[a["a"]],props:{isRemainScrollable:{type:Boolean,default:!1}},computed:{noRemainClass:function(){return this.$slots.remain?null:"layout-flex-row--no-remain"}}},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports},a3f1:function(t,e,n){"use strict";var l,o,a=n("7c9a"),i={name:"LayoutListInline",mixins:[a["a"]],props:{wrap:{type:Boolean,default:!0}},methods:{getNowrapClass:function(t){return this.wrap?null:"".concat(t,"--nowrap")}},render:function(t){var e="layout-list-inline";return t("div",{class:[e,this.getGapClass(e),this.getHorizontalAlignClass(e),this.getVerticalAlignClass(e),this.getNowrapClass(e),this.paddingClass]},[t("div",{class:"".concat(e,"__wrapper")},this.$slots["default"].filter((function(t){return t.tag})).map((function(n){return t("div",{class:"".concat(e,"__item")},[n])})))])}},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports},b107:function(t,e,n){},b635:function(t,e,n){"use strict";(function(t){n.d(e,"j",(function(){return f}));var l=n("efce");n.d(e,"a",(function(){return l["a"]}));var o=n("caf1");n.d(e,"b",(function(){return o["a"]}));var a=n("236d");n.d(e,"c",(function(){return a["a"]}));var i=n("908f");n.d(e,"d",(function(){return i["a"]}));var r=n("9655");n.d(e,"e",(function(){return r["a"]}));var u=n("3cfe");n.d(e,"f",(function(){return u["a"]}));var s=n("d5e6");n.d(e,"g",(function(){return s["a"]}));var c=n("a3f1");n.d(e,"h",(function(){return c["a"]}));n("b107");var d={LayoutAbsolute:l["a"],LayoutAlign:o["a"],LayoutColumns:a["a"],LayoutFlexColumn:i["a"],LayoutFlexRow:r["a"],LayoutGrid:u["a"],LayoutList:s["a"],LayoutListInline:c["a"]};function f(t){f.installed||(f.installed=!0,Object.keys(d).forEach((function(e){t.component(e,d[e])})))}var p={install:f},m=null;"undefined"!==typeof window?m=window.Vue:"undefined"!==typeof t&&(m=t.Vue),m&&m.use(p),e["i"]=d}).call(this,n("647d"))},caf1:function(t,e,n){"use strict";var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-align",class:[t.getVerticalAlignClass("layout-align"),t.getHorizontalAlignClass("layout-align"),t.paddingClass]},[n("div",{staticClass:"layout-align__content"},[t._t("default")],2)])},o=[],a=n("7c9a"),i={name:"LayoutAlign",mixins:[a["a"]]},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports},d5e6:function(t,e,n){"use strict";var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-list",class:[t.getGapClass("layout-list"),t.getHorizontalAlignClass("layout-list"),t.paddingClass]},[t._t("default")],2)},o=[],a=n("7c9a"),i={name:"LayoutList",mixins:[a["a"]]},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports},eb61:function(t,e,n){"use strict";function l(t,e,n,l,o,a,i,r){var u,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),l&&(s.functional=!0),a&&(s._scopeId="data-v-"+a),i?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},s._ssrRegister=u):o&&(u=r?function(){o.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:o),u)if(s.functional){s._injectStyles=u;var c=s.render;s.render=function(t,e){return u.call(e),c(t,e)}}else{var d=s.beforeCreate;s.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:s}}n.d(e,"a",(function(){return l}))},efce:function(t,e,n){"use strict";var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"layout-absolute",class:[t.paddingClass]},[n("div",{staticClass:"layout-absolute__wrapper"},[t.$slots.topLeft?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--top-left"},[t._t("topLeft")],2):t._e(),t.$slots.top?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--top"},[t._t("top")],2):t._e(),t.$slots.topRight?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--top-right"},[t._t("topRight")],2):t._e(),t.$slots.right?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--right"},[t._t("right")],2):t._e(),t.$slots.bottomRight?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-right"},[t._t("bottomRight")],2):t._e(),t.$slots.bottom?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--bottom"},[t._t("bottom")],2):t._e(),t.$slots.bottomLeft?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--bottom-left"},[t._t("bottomLeft")],2):t._e(),t.$slots.left?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--left"},[t._t("left")],2):t._e(),t.$slots.center?n("div",{staticClass:"layout-absolute__cell layout-absolute__cell--center"},[t._t("center")],2):t._e()])])},o=[],a=n("7c9a"),i={name:"LayoutAbsolute",mixins:[a["a"]]},r=i,u=n("eb61"),s=Object(u["a"])(r,l,o,!1,null,null,null);e["a"]=s.exports}})["default"]}));
 //# sourceMappingURL=vue-layout-system.umd.min.js.map

package.json

 {
   "name": "vue-layout-system",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Vue components that solve daily layout problems",
@@ -5,0 +5,0 @@ "main": "dist/vue-layout-system.common.js",

README.md

@@ -34,2 +34,3 @@ # Vue Layout System
 - [LayoutFlexRow](https://leeboyin.github.io/vue-layout-system/components/LayoutFlexRow) divides a horizontal space into 3 sections, where you can place contents at left, right and the remaining space.
+- [LayoutGrid](https://leeboyin.github.io/vue-layout-system/components/LayoutGrid) divides a horizontal space into a number of columns evenly, helps align elements based on sequenced columns and rows.
 - [LayoutList](https://leeboyin.github.io/vue-layout-system/components/LayoutList) arranges contents vertically.
@@ -36,0 +37,0 @@ - [LayoutListInline](https://leeboyin.github.io/vue-layout-system/components/LayoutListInline) arranges contents horizontally.

src/index.js

@@ -6,2 +6,3 @@ import LayoutAbsolute from './components/LayoutAbsolute.vue';
 import LayoutFlexRow from './components/LayoutFlexRow.vue';
+import LayoutGrid from './components/LayoutGrid.vue';
 import LayoutList from './components/LayoutList.vue';
@@ -17,2 +18,3 @@ import LayoutListInline from './components/LayoutListInline.vue';
     LayoutFlexRow,
+    LayoutGrid,
     LayoutList,
@@ -51,4 +53,5 @@ LayoutListInline,
     LayoutFlexRow,
+    LayoutGrid,
     LayoutList,
     LayoutListInline,
 };

src/mixins/layoutMixin.js

@@ -171,3 +171,3 @@ const debugComponentClass = 'layout--debug';
 		getHorizontalAlignClass(componentClass) {
-			if(['default', 'left', 'center', 'right'].indexOf(this.horizontalAlign) !== -1) {
+			if(['default', 'stretch', 'left', 'center', 'right'].indexOf(this.horizontalAlign) !== -1) {
 				return `${ componentClass }--horizontal-align-${ this.horizontalAlign }`;
@@ -178,3 +178,3 @@ }
 		getVerticalAlignClass(componentClass) {
-			if(['default', 'top', 'center', 'bottom'].indexOf(this.verticalAlign) !== -1) {
+			if(['default', 'stretch', 'top', 'center', 'bottom'].indexOf(this.verticalAlign) !== -1) {
 				return `${ componentClass }--vertical-align-${ this.verticalAlign }`;
@@ -181,0 +181,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346072

increased by8.85%

Number of package files

33

increased by13.79%

Lines of code

2541

increased by7.12%

Number of lines in readme file

87

increased by1.16%

No dependency changes