vue-laravel-crud 1.6.0 → 1.6.2

package/dist/vue-laravel-crud.ssr.js

@@ -1,4 +1,4 @@
-'use strict';function _iterableToArrayLimit(r, l) {
+'use strict';require('vue');function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
     var e,
@@ -12296,7 +12296,243 @@ vueInfiniteLoading.exports;
 } (vueInfiniteLoading, vueInfiniteLoading.exports));
 
 var vueInfiniteLoadingExports = vueInfiniteLoading.exports;
-var InfiniteLoading = /*@__PURE__*/getDefaultExportFromCjs(vueInfiniteLoadingExports);var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}var css = "tr td[data-v-3e65ccf8]:last-child,\ntr td[data-v-3e65ccf8]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-3e65ccf8] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-3e65ccf8] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-3e65ccf8] .crud-title[data-v-3e65ccf8] {\n    margin: 0; }\n  .crud-header[data-v-3e65ccf8] .crud-search[data-v-3e65ccf8] {\n    max-width: 15rem; }\n    .crud-header[data-v-3e65ccf8] .crud-search[data-v-3e65ccf8] .btn[data-v-3e65ccf8] {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 0.375rem;\n      border-bottom-right-radius: 0.375rem; }\n      .crud-header[data-v-3e65ccf8] .crud-search[data-v-3e65ccf8] .btn[data-v-3e65ccf8].open[data-v-3e65ccf8] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-3e65ccf8] .table-options[data-v-3e65ccf8] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-3e65ccf8] {\n  position: relative;\n  top: -15px; }\n\n@media (min-width: 992px) {\n  .table[data-v-3e65ccf8] {\n    table-layout: auto; }\n    .table[data-v-3e65ccf8] tbody[data-v-3e65ccf8] td[data-v-3e65ccf8] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-3e65ccf8] tbody[data-v-3e65ccf8] td[data-v-3e65ccf8]::-webkit-scrollbar {\n      display: none; } }\n";
+var InfiniteLoading = /*@__PURE__*/getDefaultExportFromCjs(vueInfiniteLoadingExports);/*!
+ * vue-masonry-css v1.0.3
+ * https://github.com/paulcollett/vue-masonry-css
+ * Released under the MIT License.
+ */
+
+// the component name `<masonry />`
+// can be overridden with `Vue.use(Masonry, { name: 'the-masonry' });`
+var componentName = 'masonry';
+
+var props = {
+  tag: {
+    type: [String],
+    default: 'div'
+  },
+  cols: {
+    type: [Object, Number, String],
+    default: 2
+  },
+  gutter: {
+    type: [Object, Number, String],
+    default: 0
+  },
+  css: {
+    type: [Boolean],
+    default: true
+  },
+  columnTag: {
+    type: [String],
+    default: 'div'
+  },
+  columnClass: {
+    type: [String, Array, Object],
+    default: function () { return []; }
+  },
+  columnAttr: {
+    type: [Object],
+    default: function () { return ({}); }
+  }
+};
+
+// Get the resulting value from  `:col=` prop
+// based on the window width
+var breakpointValue = function (mixed, windowWidth) {
+  var valueAsNum = parseInt(mixed);
+
+  if(valueAsNum > -1) {
+    return mixed;
+  }else if(typeof mixed !== 'object') {
+    return 0;
+  }
+
+  var matchedBreakpoint = Infinity;
+  var matchedValue = mixed.default || 0;
+
+  for(var k in mixed) {
+    var breakpoint = parseInt(k);
+    var breakpointValRaw = mixed[breakpoint];
+    var breakpointVal = parseInt(breakpointValRaw);
+
+    if(isNaN(breakpoint) || isNaN(breakpointVal)) {
+      continue;
+    }
+
+    var isNewBreakpoint = windowWidth <= breakpoint && breakpoint < matchedBreakpoint;
+
+    if(isNewBreakpoint) {
+      matchedBreakpoint = breakpoint;
+      matchedValue = breakpointValRaw;
+    }
+  }
+
+  return matchedValue;
+};
+
+var component$2 = {
+  props: props,
+
+  data: function data() {
+    return {
+      displayColumns: 2,
+      displayGutter: 0
+    }
+  },
+
+  mounted: function mounted() {
+    var this$1$1 = this;
+
+    this.$nextTick(function () {
+      this$1$1.reCalculate();
+    });
+
+    // Bind resize handler to page
+    if(window) {
+      window.addEventListener('resize', this.reCalculate);
+    }
+  },
+
+  updated: function updated() {
+    var this$1$1 = this;
+
+    this.$nextTick(function () {
+      this$1$1.reCalculate();
+    });
+  },
+
+  beforeDestroy: function beforeDestroy() {
+    if(window) {
+      window.removeEventListener('resize', this.reCalculate);
+    }
+  },
+
+  methods: {
+    // Recalculate how many columns to display based on window width
+    // and the value of the passed `:cols=` prop
+    reCalculate: function reCalculate() {
+      var previousWindowWidth = this.windowWidth;
+
+      this.windowWidth = (window ? window.innerWidth : null) || Infinity;
+
+      // Window resize events get triggered on page height
+      // change which when loading the page can result in multiple
+      // needless calculations. We prevent this here.
+      if(previousWindowWidth === this.windowWidth) {
+        return;
+      }
+
+      this._reCalculateColumnCount(this.windowWidth);
+
+      this._reCalculateGutterSize(this.windowWidth);
+    },
+
+    _reCalculateGutterSize: function _reCalculateGutterSize(windowWidth) {
+      this.displayGutter = breakpointValue(this.gutter, windowWidth);
+    },
+
+    _reCalculateColumnCount: function _reCalculateColumnCount(windowWidth) {
+      var newColumns = breakpointValue(this.cols, windowWidth);
+
+      // Make sure we can return a valid value
+      newColumns = Math.max(1, Number(newColumns) || 0);
+
+      this.displayColumns = newColumns;
+    },
+
+    _getChildItemsInColumnsArray: function _getChildItemsInColumnsArray() {
+      var this$1$1 = this;
+
+      var columns = [];
+      var childItems = this.$slots.default || [];
+
+      // This component does not work with a child <transition-group /> ..yet,
+      // so for now we think it may be helpful to ignore until we can find a way for support
+      if(childItems.length === 1 && childItems[0].componentOptions && childItems[0].componentOptions.tag == 'transition-group') {
+        childItems = childItems[0].componentOptions.children;
+      }
+
+      // Loop through child elements
+      for (var i = 0, visibleItemI = 0; i < childItems.length; i++, visibleItemI++) {
+        // skip Vue elements without tags, which includes
+        // whitespace elements and also plain text
+        if(!childItems[i].tag) {
+          visibleItemI--;
+
+          continue;
+        }
+
+        // Get the column index the child item will end up in
+        var columnIndex = visibleItemI % this$1$1.displayColumns;
+
+        if(!columns[columnIndex]) {
+          columns[columnIndex] = [];
+        }
+
+        columns[columnIndex].push(childItems[i]);
+      }
+
+      return columns;
+    }
+  },
+
+  render: function render(createElement) {
+    var this$1$1 = this;
+
+    var columnsContainingChildren = this._getChildItemsInColumnsArray();
+    var isGutterSizeUnitless = parseInt(this.displayGutter) === this.displayGutter * 1;
+    var gutterSizeWithUnit =  isGutterSizeUnitless ? ((this.displayGutter) + "px") : this.displayGutter;
+
+    var columnStyle = {
+      boxSizing: 'border-box',
+      backgroundClip: 'padding-box',
+      width: ((100 / this.displayColumns) + "%"),
+      border: '0 solid transparent',
+      borderLeftWidth: gutterSizeWithUnit
+    };
+
+    var columns = columnsContainingChildren.map(function (children, index) {
+      /// Create column element and inject the children
+      return createElement(this$1$1.columnTag, {
+        key: index + '-' + columnsContainingChildren.length,
+        style: this$1$1.css ? columnStyle : null,
+        class: this$1$1.columnClass,
+        attrs: this$1$1.columnAttr
+      }, children); // specify child items here
+    });
+
+    var containerStyle = {
+      display: ['-webkit-box', '-ms-flexbox', 'flex'],
+      marginLeft: ("-" + gutterSizeWithUnit)
+    };
+
+    // Return wrapper with columns
+    return createElement(
+      this.tag, // tag name
+      this.css ? { style: containerStyle } : null, // element options
+      columns // column vue elements
+    );
+  }
+};
+
+var Plugin = function () {};
+
+Plugin.install = function (Vue, options) {
+  if (Plugin.installed) {
+    return;
+  }
+
+  if(options && options.name) {
+    Vue.component(options.name, component$2);
+  } else {
+    Vue.component(componentName, component$2);
+  }
+};
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(Plugin);
+}var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}var css = "tr td[data-v-658ae951]:last-child,\ntr td[data-v-658ae951]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-658ae951] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-658ae951] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-658ae951] .crud-title[data-v-658ae951] {\n    margin: 0; }\n  .crud-header[data-v-658ae951] .crud-search[data-v-658ae951] {\n    max-width: 15rem; }\n    .crud-header[data-v-658ae951] .crud-search[data-v-658ae951] .btn[data-v-658ae951] {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 0.375rem;\n      border-bottom-right-radius: 0.375rem; }\n      .crud-header[data-v-658ae951] .crud-search[data-v-658ae951] .btn[data-v-658ae951].open[data-v-658ae951] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-658ae951] .table-options[data-v-658ae951] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-658ae951] {\n  position: relative;\n  top: -15px; }\n\n@media (min-width: 992px) {\n  .table[data-v-658ae951] {\n    table-layout: auto; }\n    .table[data-v-658ae951] tbody[data-v-658ae951] td[data-v-658ae951] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-658ae951] tbody[data-v-658ae951] td[data-v-658ae951]::-webkit-scrollbar {\n      display: none; } }\n";
 n(css, {});function normalizeComponent (
     scriptExports,
     render,
@@ -12392,7 +12628,8 @@ n(css, {});function normalizeComponent (
   name: "VueLaravelCrud",
   components: {
     draggable: draggable,
-    InfiniteLoading: InfiniteLoading
+    InfiniteLoading: InfiniteLoading,
+    VueMasonry: Plugin
   },
   data: function data() {
     return {
@@ -14309,7 +14546,6 @@ var _sfc_render = function render() {
   }), 0)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
   }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]) : _vm._e(), _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('div', [_c('draggable', {
-    staticClass: "row",
     attrs: {
       "group": _vm.draggableGroup,
       "draggable": _vm.orderable ? '.item' : '.none',
@@ -14353,16 +14589,9 @@ var _sfc_render = function render() {
       }
     }
   }, _vm._l(_vm.itemsList, function (item, index) {
-    return _c('b-col', {
+    return _c('div', {
       key: index,
-      staticClass: "item",
-      attrs: {
-        "cols": _vm.colXs,
-        "sm": _vm.colSm,
-        "md": _vm.colMd,
-        "lg": _vm.colLg,
-        "xl": _vm.colXl
-      }
+      staticClass: "item"
     }, [_c('b-card', {
       staticClass: "mb-2 card-crud",
       class: _vm.cardClass,
@@ -14437,7 +14666,7 @@ var _sfc_render = function render() {
     }, {
       "item": item
     })], 2)], 1);
-  }), 1)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
+  }), 0)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
   }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()], 1) : _vm._e(), _vm.displayMode == _vm.displayModes.MODE_CUSTOM ? _c('div', [_c('div', {
     class: _vm.listContainerClass
@@ -14623,7 +14852,7 @@ var _sfc_render = function render() {
   }) : _vm._e()], 2)], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "3e65ccf8", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "658ae951", null, null);
 var component$1 = __component__.exports;// Import vue component
 
 // Default export is installable instance of component.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "1.6.0",
+    "version": "1.6.2",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",
@@ -23,6 +23,7 @@
         "axios": "^1.3.5",
         "bootstrap-vue": "^2.21.2",
         "moment": "^2.29.1",
+        "sass-loader": "^14.1.1",
         "vue-infinite-loading": "^2.4.5",
         "vue-masonry-css": "^1.0.3",
         "vuedraggable": "^2.24.3"

package/src/vue-laravel-crud.vue

@@ -2,12 +2,17 @@
 import draggable from "vuedraggable";
 import moment from "moment";
 import InfiniteLoading from 'vue-infinite-loading';
+import Vue from 'vue'
+import VueMasonry from 'vue-masonry-css'
+
+
 
 export default /*#__PURE__*/ {
   name: "VueLaravelCrud",
   components: {
     draggable,
-    InfiniteLoading
+    InfiniteLoading,
+    VueMasonry
   },
   data() {
     return {
@@ -1554,7 +1559,7 @@ export default /*#__PURE__*/ {
     </div>
 
     <div v-if="displayMode == displayModes.MODE_CARDS">
-      <draggable v-model="items" :group="draggableGroup" class="row" :draggable="orderable ? '.item' : '.none'"
+      <draggable v-model="items" :group="draggableGroup" :draggable="orderable ? '.item' : '.none'"
         @start="drag = true" @end="drag = false" @sort="onSort()" @add="onDraggableAdded($event)"
         @change="onDraggableChange($event)" :options="draggableOptions">
         <masonry
@@ -1562,8 +1567,7 @@ export default /*#__PURE__*/ {
   :gutter="{default: '30px', 700: '15px'}"
   >
 
-        <b-col v-for="(item, index) in itemsList" v-bind:key="index" :cols="colXs" :sm="colSm" :md="colMd" :lg="colLg"
-          :xl="colXl" class="item">
+        <div v-for="(item, index) in itemsList" v-bind:key="index" class="item">
           <b-card :title="item.title" tag="article" class="mb-2 card-crud" :class="cardClass"
             :hideFooter="cardHideFooter">
             <slot name="card" v-bind:item="item">
@@ -1623,7 +1627,7 @@ export default /*#__PURE__*/ {
               </b-button-group>
             </template>
           </b-card>
-        </b-col>
+        </div>
 </masonry>
       </draggable>