vue-laravel-crud 1.4.26 → 1.4.28

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

@@ -17305,7 +17305,7 @@ var moment$1 = {
 	})));
 } (moment$1));
 
-var moment = momentExports;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-33d8448d]:last-child,\ntr td[data-v-33d8448d]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-33d8448d] {\n  display: flex;\n  justify-content: center; }\n\n.crud-header[data-v-33d8448d] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-33d8448d] .crud-title[data-v-33d8448d] {\n    margin: 0; }\n  .crud-header[data-v-33d8448d] .crud-search[data-v-33d8448d] {\n    max-width: 15rem; }\n    .crud-header[data-v-33d8448d] .crud-search[data-v-33d8448d] .btn[data-v-33d8448d] {\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-33d8448d] .crud-search[data-v-33d8448d] .btn[data-v-33d8448d].open[data-v-33d8448d] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-33d8448d] .table-options[data-v-33d8448d] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-33d8448d] {\n  position: relative;\n  top: -15px; }\n\n@media (min-width: 992px) {\n  .table[data-v-33d8448d] {\n    table-layout: auto; }\n    .table[data-v-33d8448d] tbody[data-v-33d8448d] td[data-v-33d8448d] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-33d8448d] tbody[data-v-33d8448d] td[data-v-33d8448d]::-webkit-scrollbar {\n      display: none; } }\n";
+var moment = momentExports;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-93788972]:last-child,\ntr td[data-v-93788972]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-93788972] {\n  display: flex;\n  justify-content: center; }\n\n.crud-header[data-v-93788972] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-93788972] .crud-title[data-v-93788972] {\n    margin: 0; }\n  .crud-header[data-v-93788972] .crud-search[data-v-93788972] {\n    max-width: 15rem; }\n    .crud-header[data-v-93788972] .crud-search[data-v-93788972] .btn[data-v-93788972] {\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-93788972] .crud-search[data-v-93788972] .btn[data-v-93788972].open[data-v-93788972] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-93788972] .table-options[data-v-93788972] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-93788972] {\n  position: relative;\n  top: -15px; }\n\n@media (min-width: 992px) {\n  .table[data-v-93788972] {\n    table-layout: auto; }\n    .table[data-v-93788972] tbody[data-v-93788972] td[data-v-93788972] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-93788972] tbody[data-v-93788972] td[data-v-93788972]::-webkit-scrollbar {\n      display: none; } }\n";
 n(css, {});function normalizeComponent (
     scriptExports,
     render,
@@ -17653,6 +17653,16 @@ n(css, {});function normalizeComponent (
     groupedLabelAfter: {
       type: String,
       default: ""
+    },
+    draggableGroup: {
+      type: String,
+      default: "people"
+    },
+    draggableOptions: {
+      type: Object,
+      default: {
+        clone: false
+      }
     }
   },
   mounted: function mounted() {
@@ -17712,6 +17722,10 @@ n(css, {});function normalizeComponent (
     }
   },
   methods: {
+    onDraggableAdded: function onDraggableAdded(event) {
+      console.log('Se agregó un nuevo elemento a la lista', event);
+      this.$emit("draggableAdded", event);
+    },
     setupFilters: function setupFilters() {
       var _this2 = this;
       this.columns.forEach(function (column) {
@@ -18448,7 +18462,7 @@ var _sfc_render = function render() {
             callback: function callback($$v) {
               _vm.$set(_vm.internalFilterByProp(column.prop + '_from'), "value", $$v);
             },
-            expression: "\n                        internalFilterByProp(column.prop + '_from').value\n                      "
+            expression: "internalFilterByProp(column.prop + '_from').value\n                        "
           }
         })], 1), _c('div', {
           staticClass: "col-6"
@@ -18464,7 +18478,7 @@ var _sfc_render = function render() {
             callback: function callback($$v) {
               _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", $$v);
             },
-            expression: "\n                        internalFilterByProp(column.prop + '_to').value\n                      "
+            expression: "internalFilterByProp(column.prop + '_to').value\n                        "
           }
         })], 1)])]) : column.type == 'state' ? _c('div', {
           staticClass: "form-group"
@@ -18739,7 +18753,7 @@ var _sfc_render = function render() {
             callback: function callback($$v) {
               _vm.$set(_vm.internalFilterByProp(column.prop + '_from'), "value", $$v);
             },
-            expression: "\n                          internalFilterByProp(column.prop + '_from').value\n                        "
+            expression: "internalFilterByProp(column.prop + '_from').value\n                          "
           }
         })], 1), _c('div', {
           staticClass: "col-6"
@@ -18756,7 +18770,7 @@ var _sfc_render = function render() {
             callback: function callback($$v) {
               _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", $$v);
             },
-            expression: "\n                          internalFilterByProp(column.prop + '_to').value\n                        "
+            expression: "internalFilterByProp(column.prop + '_to').value\n                          "
           }
         })], 1)]) : column.type == 'state' ? _c('select', {
           directives: [{
@@ -18870,9 +18884,10 @@ var _sfc_render = function render() {
     });
   })], 2)]), _c('draggable', {
     attrs: {
-      "group": "people",
+      "group": _vm.draggableGroup,
       "tag": "tbody",
-      "draggable": _vm.orderable ? '.item' : '.none'
+      "draggable": _vm.orderable ? '.item' : '.none',
+      "options": _vm.draggableOptions
     },
     on: {
       "start": function start($event) {
@@ -18883,6 +18898,9 @@ var _sfc_render = function render() {
       },
       "sort": function sort($event) {
         return _vm.onSort();
+      },
+      "added": function added($event) {
+        return _vm.onDraggableAdded($event);
       }
     },
     model: {
@@ -18924,7 +18942,7 @@ var _sfc_render = function render() {
             attrs: {
               "variant": "danger"
             }
-          }, [_c('b-icon-x-circle')], 1) : _vm._e()], 1) : column.type == 'date' ? _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, item) && column.format ? _vm.moment(_vm.itemValue(column, item)).format(column.format) : _vm.itemValue(column, item)) + " ")]) : column.type == 'checkbox' ? _c('span', [_c('b-form-checkbox', {
+          }, [_c('b-icon-x-circle')], 1) : _vm._e()], 1) : column.type == 'date' ? _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, item) ? _vm.moment(_vm.itemValue(column, item)).format(column.format ? column.format : 'L LT') : _vm.itemValue(column, item)) + " ")]) : column.type == 'select' ? _c('span', [_c('b-form-checkbox', {
             on: {
               "change": function change($event) {
                 return _vm.onCheckSelect($event, item);
@@ -18990,8 +19008,9 @@ var _sfc_render = function render() {
   }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e(), _c('draggable', {
     staticClass: "row",
     attrs: {
-      "group": "people",
-      "draggable": _vm.orderable ? '.item' : '.none'
+      "group": _vm.draggableGroup,
+      "draggable": _vm.orderable ? '.item' : '.none',
+      "options": _vm.draggableOptions
     },
     on: {
       "start": function start($event) {
@@ -19002,6 +19021,9 @@ var _sfc_render = function render() {
       },
       "sort": function sort($event) {
         return _vm.onSort();
+      },
+      "added": function added($event) {
+        return _vm.onDraggableAdded($event);
       }
     },
     model: {
@@ -19243,7 +19265,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, "33d8448d", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "93788972", 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.4.26",
+    "version": "1.4.28",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",

package/src/vue-laravel-crud.vue

@@ -266,6 +266,18 @@ export default /*#__PURE__*/ {
       type: String,
       default: "",
     },
+
+    draggableGroup: {
+      type: String,
+      default: "people",
+    },
+
+    draggableOptions: {
+      type: Object,
+      default: {
+        clone: false
+      }
+    },
   },
 
   mounted() {
@@ -277,7 +289,7 @@ export default /*#__PURE__*/ {
       this.itemDefault = JSON.parse(JSON.stringify(this.item));
     }
 
-    console.debug("crud mounted columns" ,this.columns);
+    console.debug("crud mounted columns", this.columns);
     this.internalFilters = [];
     this.setupFilters();
 
@@ -288,6 +300,7 @@ export default /*#__PURE__*/ {
       this.pagination.total = this.items.length;
     }
 
+
   },
   computed: {
     itemValue() {
@@ -337,6 +350,11 @@ export default /*#__PURE__*/ {
     },
   },
   methods: {
+
+    onDraggableAdded(event) {
+      console.log('Se agregó un nuevo elemento a la lista', event);
+      this.$emit("draggableAdded", event);
+    },
     setupFilters() {
       this.columns.forEach((column) => {
         if (this.isColumnHasFilter(column)) {
@@ -858,38 +876,38 @@ export default /*#__PURE__*/ {
       let error_message = "Ha ocurrido un error";
 
       if (typeof error === "string") {
-          error_message = error;
+        error_message = error;
       } else if (error.response) {
-          // handle API errors
-          if (error.response.status === 401) {
-              error_message = "No estás autorizado para realizar esta acción";
-          } else if (error.response.status === 404) {
-              error_message = "El recurso solicitado no se encontró";
-          } else if (error.response.status >= 400 && error.response.status < 500) {
-              error_message = "Hubo un problema con la solicitud realizada";
-          } else if (error.response.status >= 500) {
-              error_message = "El servidor no pudo procesar la solicitud";
-          }
+        // handle API errors
+        if (error.response.status === 401) {
+          error_message = "No estás autorizado para realizar esta acción";
+        } else if (error.response.status === 404) {
+          error_message = "El recurso solicitado no se encontró";
+        } else if (error.response.status >= 400 && error.response.status < 500) {
+          error_message = "Hubo un problema con la solicitud realizada";
+        } else if (error.response.status >= 500) {
+          error_message = "El servidor no pudo procesar la solicitud";
+        }
 
-          if (error.response.data) {
-              if (typeof error.response.data === "object") {
-                  if (error.response.data.errors) {
-                      let errors = error.response.data.errors;
-                      this.responseErrors = errors;
-                      error_message = Object.values(errors)[0][0];
-                  } else if (error.response.data.message) {
-                      error_message = error.response.data.message;
-                  }
-              } else if (typeof error.response.data === "string") {
-                  error_message = error.response.data;
-              }
+        if (error.response.data) {
+          if (typeof error.response.data === "object") {
+            if (error.response.data.errors) {
+              let errors = error.response.data.errors;
+              this.responseErrors = errors;
+              error_message = Object.values(errors)[0][0];
+            } else if (error.response.data.message) {
+              error_message = error.response.data.message;
+            }
+          } else if (typeof error.response.data === "string") {
+            error_message = error.response.data;
           }
+        }
       } else if (error.request) {
-          // handle network errors
-          error_message = "No se pudo conectar con el servidor. Verifique su conexión a Internet.";
+        // handle network errors
+        error_message = "No se pudo conectar con el servidor. Verifique su conexión a Internet.";
       } else if (error.message) {
-          // handle other errors
-          error_message = error.message;
+        // handle other errors
+        error_message = error.message;
       }
 
 
@@ -914,7 +932,7 @@ export default /*#__PURE__*/ {
 
     onChangeFilter(event) {
       this.forceRecomputeCounter++;
-      console.debug("Filters debug ",this.finalFilters,this.internalFilter,this.internalFilters,this.filter,this.filters);
+      console.debug("Filters debug ", this.finalFilters, this.internalFilter, this.internalFilters, this.filter, this.filters);
       setTimeout(() => {
         this.refresh();
       }, 1);
@@ -963,14 +981,12 @@ export default /*#__PURE__*/ {
                   <div class="form-group" v-else-if="column.type == 'date'">
                     <div class="row">
                       <div class="col-6">
-                        <b-form-datepicker v-model="
-                          internalFilterByProp(column.prop + '_from').value
-                        " today-button reset-button close-button locale="es"></b-form-datepicker>
+                        <b-form-datepicker v-model="internalFilterByProp(column.prop + '_from').value
+                          " today-button reset-button close-button locale="es"></b-form-datepicker>
                       </div>
                       <div class="col-6">
-                        <b-form-datepicker v-model="
-                          internalFilterByProp(column.prop + '_to').value
-                        " today-button reset-button close-button locale="es"></b-form-datepicker>
+                        <b-form-datepicker v-model="internalFilterByProp(column.prop + '_to').value
+                          " today-button reset-button close-button locale="es"></b-form-datepicker>
                       </div>
                     </div>
                   </div>
@@ -982,7 +998,8 @@ export default /*#__PURE__*/ {
                     <select class="form-control" v-model="internalFilterByProp(column.prop).value"
                       @change="onChangeFilter($event)">
                       <option value=""></option>
-                      <option :value="option.id ? option.id : option.value " v-for="option in column.options" :key="option.id ? option.id : option.value ">
+                      <option :value="option.id ? option.id : option.value" v-for="option in column.options"
+                        :key="option.id ? option.id : option.value">
                         {{
                           option.text
                           ? option.text
@@ -1002,7 +1019,8 @@ export default /*#__PURE__*/ {
                       @change="onChangeFilter($event)">
                       <option value=""></option>
                       <template v-if="column.options">
-                        <option :value="option.id ? option.id : option.value  " v-for="option in column.options" :key="option.id ? option.id : option.value ">
+                        <option :value="option.id ? option.id : option.value" v-for="option in column.options"
+                          :key="option.id ? option.id : option.value">
                           {{
                             option.text
                             ? option.text
@@ -1080,12 +1098,11 @@ export default /*#__PURE__*/ {
                 <th v-for="(column, indexc) in columns" :key="indexc"
                   :style="{ width: column.width ? column.width : 'inherit' }" scope="col">
                   <slot :name="'filter-' + column.prop" v-bind:column="column" v-bind:filter="filter"
-                    v-bind:internalFilterByProp="internalFilterByProp" v-if="
-                      enableFilters &&
+                    v-bind:internalFilterByProp="internalFilterByProp" v-if="enableFilters &&
                       filtersVisible &&
                       isColumnHasFilter(column) &&
                       internalFilterByProp(column.prop)
-                    ">
+                      ">
 
                     <div class="form-group">
                       <select v-if="column.type == 'boolean'" class="form-control form-control-md p-2"
@@ -1097,15 +1114,13 @@ export default /*#__PURE__*/ {
 
                       <div class="row" v-else-if="column.type == 'date'">
                         <div class="col-6">
-                          <b-form-datepicker v-model="
-                            internalFilterByProp(column.prop + '_from').value
-                          " today-button reset-button close-button locale="es"
+                          <b-form-datepicker v-model="internalFilterByProp(column.prop + '_from').value
+                            " today-button reset-button close-button locale="es"
                             class="form-control-md p-2"></b-form-datepicker>
                         </div>
                         <div class="col-6">
-                          <b-form-datepicker v-model="
-                            internalFilterByProp(column.prop + '_to').value
-                          " today-button reset-button close-button locale="es"
+                          <b-form-datepicker v-model="internalFilterByProp(column.prop + '_to').value
+                            " today-button reset-button close-button locale="es"
                             class="form-control-md p-2"></b-form-datepicker>
                         </div>
                       </div>
@@ -1140,8 +1155,9 @@ export default /*#__PURE__*/ {
 
                       <b-form-checkbox v-else-if="column.type == 'checkbox'" name="select-all" @change="toggleAll()">
                       </b-form-checkbox>
-                      <input v-else class="form-control form-control-md p-2" v-model="internalFilterByProp(column.prop).value"
-                        :placeholder="column.label" @change="onChangeFilter($event)" />
+                      <input v-else class="form-control form-control-md p-2"
+                        v-model="internalFilterByProp(column.prop).value" :placeholder="column.label"
+                        @change="onChangeFilter($event)" />
 
                     </div>
                   </slot>
@@ -1150,8 +1166,8 @@ export default /*#__PURE__*/ {
 
                   <span v-if="sortable && internalFilterByProp(column.prop + '_sort')" class="sort-filter"
                     @click="toggleSortFilter(column)"><b-icon-sort
-                      v-if="!internalFilterByProp(column.prop + '_sort').value"></b-icon-sort><b-icon-sort-up v-if="
-                        internalFilterByProp(column.prop + '_sort').value == 'ASC'"></b-icon-sort-up>
+                      v-if="!internalFilterByProp(column.prop + '_sort').value"></b-icon-sort><b-icon-sort-up
+                      v-if="internalFilterByProp(column.prop + '_sort').value == 'ASC'"></b-icon-sort-up>
                     <b-icon-sort-down
                       v-if="internalFilterByProp(column.prop + '_sort').value == 'DESC'"></b-icon-sort-down>
                   </span>
@@ -1160,80 +1176,79 @@ export default /*#__PURE__*/ {
             </tr>
           </thead>
 
-          <draggable v-model="items" group="people" tag="tbody" :draggable="orderable ? '.item' : '.none'"
-            @start="drag = true" @end="drag = false" @sort="onSort()">
+          <draggable v-model="items" :group="draggableGroup" tag="tbody" :draggable="orderable ? '.item' : '.none'"
+            @start="drag = true" @end="drag = false" @sort="onSort()" @added="onDraggableAdded($event)"
+            :options="draggableOptions">
             <tr v-for="(item, index) in itemsList" v-bind:key="index" @mouseover="onRowHover(item, index)"
               @click="onRowClick(item, index)" class="item">
-    
-                <th :colspan="columns.length" v-if="item.group">
-                  <span>{{ item.label }}</span>
-                </th>
-          
-        
-                <slot name="row" v-bind:item="item" v-else>
-                  <td v-for="(column, indexc) in columns" :key="indexc" :scope="column.prop == 'id' ? 'row' : ''">
-                    <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
-                      v-bind:columnindex="indexc">
-                      <span v-if="column.type == 'boolean'">
-                        <b-badge variant="success" v-if="
-                          itemValue(column, item) == 'true' ||
-                          itemValue(column, item) == 1 ||
-                          itemValue(column, item) == '1'
+
+              <th :colspan="columns.length" v-if="item.group">
+                <span>{{ item.label }}</span>
+              </th>
+
+
+              <slot name="row" v-bind:item="item" v-else>
+                <td v-for="(column, indexc) in columns" :key="indexc" :scope="column.prop == 'id' ? 'row' : ''">
+                  <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
+                    v-bind:columnindex="indexc">
+                    <span v-if="column.type == 'boolean'">
+                      <b-badge variant="success" v-if="itemValue(column, item) == 'true' ||
+                        itemValue(column, item) == 1 ||
+                        itemValue(column, item) == '1'
                         "><b-icon-check-circle></b-icon-check-circle></b-badge>
-                        <b-badge variant="danger" v-if="
-                          !itemValue(column, item) ||
-                          itemValue(column, item) == '0' ||
-                          itemValue(column, item) == 'false'
+                      <b-badge variant="danger" v-if="!itemValue(column, item) ||
+                        itemValue(column, item) == '0' ||
+                        itemValue(column, item) == 'false'
                         "><b-icon-x-circle></b-icon-x-circle></b-badge>
-                      </span>
-                      <span v-else-if="column.type == 'date'">
-                        {{
-                          itemValue(column, item) && column.format
-                          ? moment(itemValue(column, item)).format(
-                            column.format
-                          )
-                          : itemValue(column, item)
-                        }}
-                      </span>
-                      <span v-else-if="column.type == 'checkbox'">
-                        <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
-                        </b-form-checkbox>
-                      </span>
-                      <span v-else-if="column.type == 'state'">
-                        {{
-                          getStateValue(itemValue(column, item), column.options)
-                        }}
-                      </span>
-                      <span v-else-if="column.type == 'array'">
-                        {{
-                          getArrayValue(
-                            itemValue(column, item),
-                            column.displayProp
-                          )
-                        }}
-                      </span>
-                      <span v-else>
-                        {{ itemValue(column, item) }}
-                      </span>
+                    </span>
+                    <span v-else-if="column.type == 'date'">
+                      {{
+                        itemValue(column, item)
+                        ? moment(itemValue(column, item)).format(
+                          column.format ? column.format : 'L LT'
+                        )
+                        : itemValue(column, item)
+                      }}
+                    </span>
+                    <span v-else-if="column.type == 'select'">
+                      <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
+                      </b-form-checkbox>
+                    </span>
+                    <span v-else-if="column.type == 'state'">
+                      {{
+                        getStateValue(itemValue(column, item), column.options)
+                      }}
+                    </span>
+                    <span v-else-if="column.type == 'array'">
+                      {{
+                        getArrayValue(
+                          itemValue(column, item),
+                          column.displayProp
+                        )
+                      }}
+                    </span>
+                    <span v-else>
+                      {{ itemValue(column, item) }}
+                    </span>
+                  </slot>
+
+                  <b-button-group v-if="column.type == 'actions'">
+                    <slot name="rowAction" v-bind:item="item" v-bind:index="index" v-bind:showItem="showItem"
+                      v-bind:updateItem="updateItem" v-bind:removeItem="removeItem">
+                      <b-button variant="primary" @click="showItem(item.id, index)">
+                        <b-icon-eye></b-icon-eye>
+                      </b-button>
+                      <b-button variant="secondary" @click="updateItem(item.id, index)">
+                        <b-icon-pencil></b-icon-pencil>
+                      </b-button>
+                      <b-button variant="danger" @click="removeItem(item.id, index)">
+                        <b-icon-trash></b-icon-trash>
+                      </b-button>
                     </slot>
+                  </b-button-group>
+                </td>
+              </slot>
 
-                    <b-button-group v-if="column.type == 'actions'">
-                      <slot name="rowAction" v-bind:item="item" v-bind:index="index" v-bind:showItem="showItem"
-                        v-bind:updateItem="updateItem" v-bind:removeItem="removeItem">
-                        <b-button variant="primary" @click="showItem(item.id, index)">
-                          <b-icon-eye></b-icon-eye>
-                        </b-button>
-                        <b-button variant="secondary" @click="updateItem(item.id, index)">
-                          <b-icon-pencil></b-icon-pencil>
-                        </b-button>
-                        <b-button variant="danger" @click="removeItem(item.id, index)">
-                          <b-icon-trash></b-icon-trash>
-                        </b-button>
-                      </slot>
-                    </b-button-group>
-                  </td>
-                </slot>
-          
             </tr>
           </draggable>
         </table>
@@ -1247,8 +1262,9 @@ export default /*#__PURE__*/ {
           {{ messageEmptyResults }}
         </p>
 
-        <draggable v-model="items" group="people" class="row" :draggable="orderable ? '.item' : '.none'"
-          @start="drag = true" @end="drag = false" @sort="onSort()">
+        <draggable v-model="items" :group="draggableGroup" class="row" :draggable="orderable ? '.item' : '.none'"
+          @start="drag = true" @end="drag = false" @sort="onSort()" @added="onDraggableAdded($event)"
+          :options="draggableOptions">
           <b-col v-for="(item, index) in itemsList" v-bind:key="index" :cols="colXs" :sm="colSm" :md="colMd" :lg="colLg"
             :xl="colXl" class="item">
             <b-card :title="item.title" tag="article" class="mb-2 card-crud" :class="cardClass"
@@ -1259,16 +1275,14 @@ export default /*#__PURE__*/ {
                     <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
                       v-bind:columnindex="indexc">
                       <span v-if="column.type == 'boolean'">
-                        <b-badge variant="success" v-if="
-                          itemValue(column, item) == 'true' ||
+                        <b-badge variant="success" v-if="itemValue(column, item) == 'true' ||
                           itemValue(column, item) == 1 ||
                           itemValue(column, item) == '1'
-                        "><b-icon-check-circle></b-icon-check-circle></b-badge>
-                        <b-badge variant="danger" v-if="
-                          !itemValue(column, item) ||
+                          "><b-icon-check-circle></b-icon-check-circle></b-badge>
+                        <b-badge variant="danger" v-if="!itemValue(column, item) ||
                           itemValue(column, item) == '0' ||
                           itemValue(column, item) == 'false'
-                        "><b-icon-x-circle></b-icon-x-circle></b-badge>
+                          "><b-icon-x-circle></b-icon-x-circle></b-badge>
                       </span>
                       <span v-else-if="column.type == 'date'">
                         {{ itemValue(column, item) }}