vue-laravel-crud 2.0.0 → 2.0.1

package/src/components/CrudPagination.vue

@@ -20,19 +20,35 @@
     </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>
+        <span class="paginator-badge">
+          <span class="paginator-label">xPág:</span>
+          <span class="paginator-value">{{ pagination.per_page }}</span>
+        </span>
+        <span class="paginator-badge">
+          <span class="paginator-label">Pág:</span>
+          <span class="paginator-value">{{ pagination.current_page }}</span>
+        </span>
+        <span class="paginator-badge" v-if="selectedItems.length > 0">
+          <span class="paginator-label">Seleccionados:</span>
+          <span class="paginator-value">{{ selectedItems.length }}</span>
+        </span>
+      </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>
@@ -63,11 +79,55 @@ export default {
 </script>
 
 <style scoped>
-.crud-pagination {
+.paginator-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
   width: 100%;
-  justify-content: center;
   margin-top: 1rem;
+  gap: 0.75rem;
+}
+
+.paginator-data {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.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;
+}
+
+.crud-paginator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
 </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/TableHeader.vue

@@ -3,7 +3,9 @@
     <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 : 'inherit' }" 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 &&
@@ -81,12 +83,12 @@
           <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>
@@ -108,6 +110,36 @@ export default {
     'toggleSortFilter',
     'sortable',
     'optionsLoaded'
-  ]
+  ],
+  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>

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>

package/src/vue-laravel-crud.vue

@@ -106,6 +106,7 @@ export default /*#__PURE__*/ {
       bulkDelete: this.bulkDelete,
       showImport: this.showImport,
       showExport: this.showExport,
+      fileImport: this.fileImport,
       markDirty: this.markDirty,
 
       // Data from mixins
@@ -545,6 +546,38 @@ tr td:first-child {
   white-space: nowrap;
 }
 
+tbody tr.selected {
+  background-color: #e3f2fd !important;
+  
+  td {
+    background-color: transparent !important;
+  }
+  
+  &:hover {
+    background-color: #bbdefb !important;
+    
+    td {
+      background-color: transparent !important;
+    }
+  }
+}
+
+.table-striped tbody tr.selected:nth-of-type(odd) {
+  background-color: #e3f2fd !important;
+  
+  td {
+    background-color: transparent !important;
+  }
+}
+
+.table-striped tbody tr.selected:nth-of-type(even) {
+  background-color: #e3f2fd !important;
+  
+  td {
+    background-color: transparent !important;
+  }
+}
+
 .crud-pagination {
   display: flex;
   align-items: center;