vue-laravel-crud 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "1.6.3",
+    "version": "1.6.5",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",

package/src/vue-laravel-crud.vue

@@ -2,7 +2,6 @@
 import draggable from "vuedraggable";
 import moment from "moment";
 import InfiniteLoading from 'vue-infinite-loading';
-import Vue from 'vue'
 import VueMasonry from 'vue-masonry-css'
 
 
@@ -175,6 +174,11 @@ export default /*#__PURE__*/ {
       type: Boolean,
       default: true,
     },
+    showPrincipalSortBtn: {
+      type: Boolean,
+      default: false,
+    },
+
     showHeader: {
       type: Boolean,
       default: true,
@@ -213,7 +217,7 @@ export default /*#__PURE__*/ {
       type: Number,
     },
     colXl: {
-      default: 3,
+      default: 4,
       type: Number,
     },
 
@@ -334,6 +338,10 @@ export default /*#__PURE__*/ {
       default: 3,
     },
 
+    principalSortColumn: {
+      type: String,
+      default: "id",
+    },
   },
 
   mounted() {
@@ -441,9 +449,22 @@ export default /*#__PURE__*/ {
       return [
         ...this.filters,
         ...this.filter,
-        ...this.internalFilter
+        ...this.internalFilter,
+        ...this.sortFilter
       ];
     },
+    sortFilter(){
+      if(this.showPrincipalSortBtn){
+        if(this.principalSort){
+        return [[this.principalSortColumn,'SORTASC','']];
+      }else{
+        return [[this.principalSortColumn,'SORTDESC','']];
+      }
+      }else{
+        return [];
+      }
+
+    },
     internalFilter() {
       let filter = [];
       this.forceRecomputeCounter;
@@ -468,6 +489,13 @@ export default /*#__PURE__*/ {
       // Actualizar isMobile cuando cambia el tamaño de la pantalla
       this.isMobile = window.matchMedia("(max-width: 1024px)").matches;
     },
+
+    togglePrincipalSort(){
+      this.principalSort = !this.principalSort;
+      setTimeout(() => {
+          this.refresh();
+        }, 1);
+    },
     infiniteHandler($state) {
       
       
@@ -1257,7 +1285,6 @@ export default /*#__PURE__*/ {
   <div class="crud">
     <div class="crud-header" v-if="showHeader">
       <h4 class="crud-title" v-if="showTitle">{{ title }}</h4>
-
       <b-sidebar v-model="filterSidebarOpen" title="Filtrar" right shadow>
         <slot name="sidebarFilters" v-bind:createItem="createItem" v-bind:toggleDisplayMode="toggleDisplayMode"
           v-bind:loading="loading" v-bind:isColumnHasFilter="isColumnHasFilter" v-bind:setFilter="setFilter">
@@ -1357,14 +1384,15 @@ export default /*#__PURE__*/ {
           <slot name="tableActions" v-bind:createItem="createItem" v-bind:toggleDisplayMode="toggleDisplayMode"
             v-bind:loading="loading">
             <slot name="tableActionsPrepend" v-bind:loading="loading"> </slot>
+            <b-button variant="success" v-if="showPrincipalSortBtn" @click="togglePrincipalSort()" :disabled="loading">
+              <b-icon-sort-numeric-down v-if="principalSort"></b-icon-sort-numeric-down>
+              <b-icon-sort-numeric-up v-else></b-icon-sort-numeric-up>
+            </b-button>
             <b-button variant="success" v-if="showCreateBtn" @click="createItem()" :disabled="loading">
               <b-icon-plus></b-icon-plus>{{ messageNew }}
             </b-button>
-
             <b-button v-if="enableFilters" @click="toggleFilters()">Filtros</b-button>
-
             <b-button @click="refresh()"><b-icon-arrow-clockwise></b-icon-arrow-clockwise></b-button>
-
             <b-button variant="info" @click="toggleDisplayMode()" :disabled="loading" v-if="displayModeToggler">
               <b-icon-card-list v-if="displayMode == displayModes.MODE_TABLE"></b-icon-card-list>
               <b-icon-table v-if="displayMode == displayModes.MODE_CARDS"></b-icon-table>
@@ -1563,7 +1591,7 @@ export default /*#__PURE__*/ {
         @start="drag = true" @end="drag = false" @sort="onSort()" @add="onDraggableAdded($event)"
         @change="onDraggableChange($event)" :options="draggableOptions">
         <masonry
-        :cols="{default: colLg, 1400: colXl, 1200: colLg, 1000: colMd, 700: colSm, 400: colXs}"
+        :cols="{default: 12/colLg, 1400: 12/colXl, 1200: 12/colLg, 1000: 12/colMd, 700: 12/colSm, 400: 12/colXs}"
   :gutter="{default: '15px', 700: '15px'}"
   >