vue-laravel-crud 2.0.0 → 2.0.4

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.0",
+    "version": "2.0.4",
+    "type": "module",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",
@@ -16,14 +17,17 @@
         "serve": "vue-cli-service serve dev/serve.js",
         "demo": "concurrently \"npm run demo:api\" \"npm run demo:app\"",
         "demo:api": "node dev/api/mockServer.js",
-        "demo:app": "vue-cli-service serve dev/demo/DemoApp.vue",
+        "demo:app": "vue-cli-service serve dev/demo/main.js",
         "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
         "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
         "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-        "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+        "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
+        "build:demo": "cross-env NODE_ENV=production vue-cli-service build --mode production dev/demo/main.js",
+        "build:gh-pages": "npm run build:demo"
     },
     "dependencies": {
         "axios": "^1.3.5",
+        "bootstrap": "^4.6.2",
         "bootstrap-vue": "^2.21.2",
         "moment": "^2.29.1",
         "sass-loader": "^14.1.1",

package/src/components/CrudCards.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-else-if="displayMode == displayModes.MODE_CARDS">
+  <div v-if="displayMode == displayModes.MODE_CARDS">
     <draggable 
       v-model="items" 
       :group="draggableGroup" 
@@ -35,22 +35,25 @@
       </masonry>
     </draggable>
 
-    <p v-if="!loading && items && items.length == 0 && !infiniteScroll" class="p-3">
+    <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
       {{ messageEmptyResults }}
     </p>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import draggable from "vuedraggable";
 import VueMasonry from 'vue-masonry-css';
 import ItemCard from '../ItemCard.vue';
 
+// Registrar el componente masonry usando el Plugin
+Vue.use(VueMasonry);
+
 export default {
   name: 'CrudCards',
   components: {
     draggable,
-    VueMasonry,
     ItemCard
   },
   inject: [

package/src/components/CrudCustom.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-else-if="displayMode == displayModes.MODE_CUSTOM">
+  <div v-if="displayMode == displayModes.MODE_CUSTOM">
     <div :class="listContainerClass">
-      <p v-if="!loading && items && items.length == 0 && !infiniteScroll" class="p-3">
+      <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
         {{ messageEmptyResults }}
       </p>
       <div :class="listItemClass" v-for="(item, index) in itemsList" v-bind:key="index">

package/src/components/CrudHeader.vue

@@ -2,7 +2,7 @@
   <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>
+    <b-sidebar :visible="sidebarVisible" @hidden="closeSidebar" title="Filtrar" right shadow>
       <CrudFilters />
     </b-sidebar>
 
@@ -89,7 +89,20 @@ export default {
     'confirmBulkDelete',
     'toggleFilters',
     'refresh'
-  ]
+  ],
+  computed: {
+    sidebarVisible() {
+      // Acceder directamente al componente padre para obtener reactividad
+      return this.$parent ? this.$parent.filterSidebarOpen : this.filterSidebarOpen;
+    }
+  },
+  methods: {
+    closeSidebar() {
+      if (this.filterSidebarOpen) {
+        this.toggleFilters();
+      }
+    }
+  }
 };
 </script>
 

package/src/components/CrudKanban.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-else-if="displayMode == displayModes.MODE_KANBAN">
+  <div v-if="displayMode == displayModes.MODE_KANBAN">
     <KanbanBoard />
   </div>
 </template>

package/src/components/CrudPagination.vue

@@ -20,19 +20,50 @@
     </infinite-loading>
 
     <!-- Paginador -->
-    <div class="paginator-data" v-if="!infiniteScroll">
-      Filas: {{ pagination.total }} | xPág: {{ pagination.per_page }} | Pág: {{ pagination.current_page }} |
-      Seleccionados: {{ selectedItems.length }}
-    </div>
-    
-    <div class="crud-paginator" v-if="!infiniteScroll">
-      <b-pagination 
-        v-if="showPaginator" 
-        v-model="pagination.current_page" 
-        :total-rows="pagination.total"
-        :per-page="pagination.per_page" 
-        @change="onPaginationChange($event)"
-      ></b-pagination>
+    <div class="paginator-container" v-if="!infiniteScroll">
+      <div class="paginator-data">
+        <span class="paginator-badge">
+          <span class="paginator-label">Filas:</span>
+          <span class="paginator-value">{{ pagination.total }}</span>
+        </span>
+        <b-dropdown 
+          variant="outline-secondary" 
+          size="sm" 
+          class="paginator-dropdown"
+          :text="`xPág: ${pagination.per_page}`"
+        >
+          <b-dropdown-item 
+            v-for="option in perPageOptions" 
+            :key="option"
+            @click="onPerPageChange(option)"
+            :active="pagination.per_page === option"
+          >
+            {{ option }}
+          </b-dropdown-item>
+        </b-dropdown>
+        <b-dropdown 
+          v-if="selectedItemsCount > 0"
+          variant="outline-secondary" 
+          size="sm" 
+          class="paginator-dropdown paginator-badge-dropdown"
+          :text="`Seleccionados: ${selectedItemsCount}`"
+        >
+          <b-dropdown-item @click="clearSelection">
+            <b-icon-x-circle class="mr-1"></b-icon-x-circle>
+            Limpiar selección
+          </b-dropdown-item>
+        </b-dropdown>
+      </div>
+      
+      <div class="crud-paginator">
+        <b-pagination 
+          v-if="showPaginator" 
+          v-model="pagination.current_page" 
+          :total-rows="pagination.total"
+          :per-page="pagination.per_page" 
+          @change="onPaginationChange($event)"
+        ></b-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -57,17 +88,113 @@ export default {
     'selectedItems',
     'showPaginator',
     'infiniteHandler',
-    'onPaginationChange'
-  ]
+    'onPaginationChange',
+    'onPerPageChange',
+    'clearSelection'
+  ],
+  data() {
+    return {
+      perPageOptions: [10, 20, 50, 100]
+    };
+  },
+  computed: {
+    selectedItemsCount() {
+      // Computed para forzar reactividad del contador
+      return this.selectedItems ? this.selectedItems.length : 0;
+    }
+  }
 };
 </script>
 
 <style scoped>
-.crud-pagination {
-  display: flex;
+.paginator-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   width: 100%;
-  justify-content: center;
   margin-top: 1rem;
+  gap: 1rem;
+}
+
+.paginator-data {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  grid-column: 1;
+}
+
+.paginator-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.625rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  color: #495057;
+  transition: all 0.2s ease;
+}
+
+.paginator-badge:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
+.paginator-label {
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.paginator-value {
+  font-weight: 600;
+  color: #212529;
+}
+
+.paginator-dropdown {
+  font-size: 0.875rem;
+}
+
+.paginator-dropdown >>> .btn {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  color: #495057;
+}
+
+.paginator-dropdown >>> .btn:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
+.crud-paginator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 2;
+}
+
+.paginator-badge-dropdown {
+  z-index: 1;
+  position: relative;
+}
+
+.paginator-badge-dropdown >>> .btn {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  color: #495057;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.paginator-badge-dropdown >>> .btn:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
 }
 </style>

package/src/components/CrudTable.vue

@@ -4,7 +4,7 @@
       <TableHeader />
       
       <draggable 
-        v-model="items" 
+        :list="items" 
         :group="draggableGroup" 
         tag="tbody" 
         :draggable="orderable ? '.item' : '.none'"
@@ -25,7 +25,7 @@
       </draggable>
     </table>
     
-    <p v-if="!loading && items && items.length == 0 && !infiniteScroll" class="p-3">
+    <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
       {{ messageEmptyResults }}
     </p>
   </div>

package/src/components/table/TableCell.vue

@@ -1,5 +1,6 @@
 <template>
-  <td :scope="column.prop == 'id' ? 'row' : ''">
+  <td :scope="column.prop == 'id' ? 'row' : ''" 
+      :class="{ 'actions-cell': column.type == 'actions' }">
     <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
       v-bind:columnindex="columnIndex">
       <span v-if="column.type == 'boolean'">
@@ -25,6 +26,10 @@
         <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
         </b-form-checkbox>
       </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' && optionsLoaded">
         {{
           getStateValue(itemValue(column, item), column.options)
@@ -44,7 +49,30 @@
       </span>
     </slot>
 
-    <b-button-group v-if="column.type == 'actions'">
+    <!-- Modo dropdown cuando useDropdown está activo -->
+    <b-dropdown v-if="column.type == 'actions' && column.useDropdown" 
+                variant="secondary" 
+                size="sm" 
+                class="actions-dropdown">
+      <template #button-content>
+        <b-icon-list></b-icon-list>
+      </template>
+      <slot name="rowAction" v-bind:item="item" v-bind:index="index" v-bind:showItem="showItem"
+        v-bind:updateItem="updateItem" v-bind:removeItem="removeItem">
+        <b-dropdown-item @click="showItem(item.id, index)">
+          <b-icon-eye></b-icon-eye> Ver
+        </b-dropdown-item>
+        <b-dropdown-item @click="updateItem(item.id, index)">
+          <b-icon-pencil></b-icon-pencil> Editar
+        </b-dropdown-item>
+        <b-dropdown-item @click="removeItem(item.id, index)" class="text-danger">
+          <b-icon-trash></b-icon-trash> Eliminar
+        </b-dropdown-item>
+      </slot>
+    </b-dropdown>
+    
+    <!-- Modo botones normal (comportamiento original) -->
+    <b-button-group v-else-if="column.type == 'actions'" class="actions-button-group">
       <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)">
@@ -89,3 +117,25 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+/* Fijar ancho de la columna de acciones */
+.actions-cell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.actions-button-group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+.actions-dropdown {
+  display: inline-block;
+}
+
+/* Asegurar que los botones no se expandan */
+.actions-button-group .btn {
+  flex-shrink: 0;
+}
+</style>

package/src/components/table/TableHeader.vue

@@ -3,7 +3,11 @@
     <tr>
       <slot name="rowHead">
         <th v-for="(column, indexc) in columns" :key="indexc"
-          :style="{ width: column.width ? column.width : 'inherit' }" scope="col">
+          :style="{ width: column.width ? column.width : (column.type == 'actions' ? '1%' : 'inherit') }" 
+          :class="{ 'actions-header': column.type == 'actions' }"
+          scope="col"
+          @mouseenter="hoveredColumn = column.prop"
+          @mouseleave="hoveredColumn = null">
           <slot :name="'filter-' + column.prop" v-bind:column="column" v-bind:filter="filter"
             v-bind:internalFilterByProp="internalFilterByProp" v-if="enableFilters &&
               filtersVisible &&
@@ -63,10 +67,13 @@
               </select>
 
               <b-form-checkbox v-else-if="column.type == 'checkbox'" name="select-all"
-                @change="toggleAll($event)">
+                :checked="isAllSelected"
+                @change="toggleAll">
               </b-form-checkbox>
 
-              <b-form-checkbox v-else-if="column.type == 'select'" name="select-all" @change="toggleAll($event)">
+              <b-form-checkbox v-else-if="column.type == 'select'" name="select-all" 
+                :checked="isAllSelected"
+                @change="toggleAll">
               </b-form-checkbox>
 
               <input v-else class="form-control form-control-md p-2"
@@ -76,17 +83,24 @@
             </div>
           </slot>
           <span v-else-if="column.type == 'select'">
-            <b-form-checkbox name="select-all" @change="toggleAll($event)"></b-form-checkbox>
+            <b-form-checkbox name="select-all" 
+              :checked="isAllSelected"
+              @change="toggleAll"></b-form-checkbox>
+          </span>
+          <span v-else-if="column.type == 'checkbox'">
+            <b-form-checkbox name="select-all" 
+              :checked="isAllSelected"
+              @change="toggleAll"></b-form-checkbox>
           </span>
           <span v-else>{{ column.label }}</span>
 
           <span
-            v-if="sortable && column.type != 'select' && column.type != 'checkbox' && internalFilterByProp(column.prop + '_sort')"
-            class="sort-filter" @click="toggleSortFilter(column)"><b-icon-sort-down
-              v-if="!internalFilterByProp(column.prop + '_sort').value"></b-icon-sort-down><b-icon-sort-up
-              v-if="internalFilterByProp(column.prop + '_sort').value == 'ASC'"></b-icon-sort-up>
+            v-if="isSortableColumn(column) && shouldShowSortIcon(column)"
+            class="sort-filter" @click="toggleSortFilter(column)">
+            <b-icon-sort-up
+              v-if="getSortIconDirection(column) === 'up'"></b-icon-sort-up>
             <b-icon-sort-down
-              v-if="internalFilterByProp(column.prop + '_sort').value == 'DESC'"></b-icon-sort-down>
+              v-if="getSortIconDirection(column) === 'down'"></b-icon-sort-down>
           </span>
         </th>
       </slot>
@@ -107,7 +121,46 @@ export default {
     'toggleAll',
     'toggleSortFilter',
     'sortable',
-    'optionsLoaded'
-  ]
+    'optionsLoaded',
+    'isAllSelected'
+  ],
+  data() {
+    return {
+      hoveredColumn: null
+    };
+  },
+  methods: {
+    isSortableColumn(column) {
+      return this.sortable && 
+             column.type != 'select' && 
+             column.type != 'checkbox' && 
+             this.internalFilterByProp(column.prop + '_sort');
+    },
+    shouldShowSortIcon(column) {
+      const sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      return this.hoveredColumn === column.prop || sortFilter.value;
+    },
+    getSortIconDirection(column) {
+      const sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      const sortValue = sortFilter.value;
+      
+      if (sortValue === 'DESC') {
+        return 'down';
+      } else if (sortValue === 'ASC') {
+        return 'up';
+      } else if (this.hoveredColumn === column.prop) {
+        return 'up';
+      }
+      return null;
+    }
+  }
 };
 </script>
+
+<style scoped>
+/* Fijar ancho de la columna de acciones en el header */
+.actions-header {
+  width: 1%;
+  white-space: nowrap;
+}
+</style>

package/src/components/table/TableRow.vue

@@ -1,5 +1,9 @@
 <template>
-  <tr @mouseover="onRowHover(item, index)" @click="onRowClick(item, index)" class="item">
+  <tr 
+    @mouseover="onRowHover(item, index)" 
+    @click="onRowClick(item, index)" 
+    :class="['item', { 'selected': item.selected }]"
+  >
     <th :colspan="columns.length" v-if="grouped && item.crudgroup">
       <span>{{ item.crudgrouplabel }}</span>
     </th>