vue-laravel-crud 2.0.5 → 2.0.6

package/src/components/table/TableCell.vue

@@ -54,6 +54,12 @@
           )
         }}
       </span>
+      <span v-else-if="column.type == 'money' || column.type == 'price'">
+        {{ formatMoney(itemValue(column, item), column) }}
+      </span>
+      <span v-else-if="column.type == 'number' && (column.thousandsSeparator || column.decimalSeparator || column.decimals !== undefined)">
+        {{ formatNumber(itemValue(column, item), column) }}
+      </span>
       <span v-else>
       
         {{ itemValue(column, item) }}
@@ -68,33 +74,39 @@
       <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"
+      <slot name="rowActions" 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 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>
       </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"
+      <slot name="rowActions" 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 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>
       </slot>
     </b-button-group>
   </td>
@@ -139,6 +151,40 @@ export default {
       }
       return [];
     }
+  },
+  methods: {
+    formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      
+      const thousandsSep = column.thousandsSeparator || '.';
+      const decimalSep = column.decimalSeparator || ',';
+      const decimals = column.decimals !== undefined ? column.decimals : (numValue % 1 === 0 ? 0 : 2);
+      
+      // Formatear número con separadores
+      const parts = numValue.toFixed(decimals).split('.');
+      const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      const decimalPart = parts[1] || '';
+      
+      if (decimals > 0 && decimalPart) {
+        return `${integerPart}${decimalSep}${decimalPart}`;
+      }
+      return integerPart;
+    },
+    formatMoney(value, column) {
+      const formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      const symbol = column.symbol || '$';
+      return `${symbol}${formatted}`;
+    }
   }
 };
 </script>

package/src/components/table/TableHeader.vue

@@ -36,13 +36,13 @@
                 </div>
               </div>
 
-              <div class="row" v-else-if="column.type == 'number' || column.type == 'money'">
+              <div class="row" v-else-if="column.type == 'number' || column.type == 'money' || column.type == 'price'">
                 <div class="col-6">
                   <input 
                     type="number" 
                     class="form-control form-control-md p-2" 
                     v-model.number="internalFilterByProp(column.prop + '_from').value"
-                    :step="column.type == 'money' ? '0.01' : '1'"
+                    :step="column.type == 'money' || column.type == 'price' ? '0.01' : '1'"
                     @change="onChangeFilter($event)"
                     placeholder="Desde" />
                 </div>
@@ -51,7 +51,7 @@
                     type="number" 
                     class="form-control form-control-md p-2" 
                     v-model.number="internalFilterByProp(column.prop + '_to').value"
-                    :step="column.type == 'money' ? '0.01' : '1'"
+                    :step="column.type == 'money' || column.type == 'price' ? '0.01' : '1'"
                     @change="onChangeFilter($event)"
                     placeholder="Hasta" />
                 </div>
@@ -104,12 +104,17 @@
           <span v-else>{{ column.label }}</span>
 
           <span
-            v-if="isSortableColumn(column) && shouldShowSortIcon(column)"
-            class="sort-filter" @click="toggleSortFilter(column)">
+            v-if="isSortableColumn(column)"
+            class="sort-filter ml-1"
+            :class="{ 'sort-filter-visible': shouldShowSortIcon(column) }"
+            @click="toggleSortFilter(column)">
             <b-icon-sort-up
               v-if="getSortIconDirection(column) === 'up'"></b-icon-sort-up>
             <b-icon-sort-down
-              v-if="getSortIconDirection(column) === 'down'"></b-icon-sort-down>
+              v-else-if="getSortIconDirection(column) === 'down'"></b-icon-sort-down>
+            <b-icon-sort-up
+              v-else
+              style="visibility: hidden;"></b-icon-sort-up>
           </span>
         </th>
       </slot>
@@ -172,4 +177,14 @@ export default {
   width: 1%;
   white-space: nowrap;
 }
+
+.sort-filter {
+  cursor: pointer;
+  visibility: hidden;
+  display: inline-block;
+}
+
+.sort-filter-visible {
+  visibility: visible;
+}
 </style>

package/src/components/table/TableRow.vue

@@ -16,7 +16,11 @@
         :item="item"
         :index="index"
         :columnIndex="indexc"
-      />
+      >
+        <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+          <slot :name="name" v-bind="slotProps" />
+        </template>
+      </TableCell>
     </slot>
   </tr>
 </template>

package/src/vue-laravel-crud.vue

@@ -1,4 +1,5 @@
 <script>
+import Vue from 'vue';
 import CrudHeader from "./components/CrudHeader.vue";
 import CrudTable from "./components/CrudTable.vue";
 import CrudCards from "./components/CrudCards.vue";
@@ -45,6 +46,7 @@ export default /*#__PURE__*/ {
       vuexLocalforage: this.vuexLocalforage,
       columns: this.columns,
       filter: this.filter,
+      customFilters: this.customFilters,
       enableFilters: this.enableFilters,
       infiniteScroll: this.infiniteScroll,
       sortable: this.sortable,
@@ -65,7 +67,7 @@ export default /*#__PURE__*/ {
       showHeader: this.showHeader,
       showTitle: this.showTitle,
       limit: this.limit,
-      displayMode: this.displayMode,
+      displayMode: this.displayModeReactive,
       displayModeToggler: this.displayModeToggler,
       colXs: this.colXs,
       colSm: this.colSm,
@@ -114,6 +116,8 @@ export default /*#__PURE__*/ {
       moment: this.moment,
       loading: this.loading,
       firstLoad: this.firstLoad,
+      // Proporcionar item como función getter para reactividad
+      getItem: () => this.item,
       item: this.item,
       items: this.items,
       selectedItems: this.selectedItems,
@@ -180,6 +184,7 @@ export default /*#__PURE__*/ {
       toggleFilters: this.toggleFilters,
       resetFilters: this.resetFilters,
       isColumnHasFilter: this.isColumnHasFilter,
+      isCustomFilterEnabled: this.isCustomFilterEnabled,
       setFilter: this.setFilter,
       onChangeFilter: this.onChangeFilter,
       togglePrincipalSort: this.togglePrincipalSort,
@@ -256,6 +261,10 @@ export default /*#__PURE__*/ {
       type: Array,
       default: () => [],
     },
+    customFilters: {
+      type: Array,
+      default: () => [],
+    },
     enableFilters: {
       type: Boolean,
       default: false,
@@ -532,9 +541,21 @@ export default /*#__PURE__*/ {
   <div class="crud">
     <CrudHeader />
     
-    <CrudTable />
-    <CrudCards />
-    <CrudKanban />
+    <CrudTable>
+      <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+        <slot :name="name" v-bind="slotProps" />
+      </template>
+    </CrudTable>
+    <CrudCards>
+      <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+        <slot :name="name" v-bind="slotProps" />
+      </template>
+    </CrudCards>
+    <CrudKanban>
+      <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+        <slot :name="name" v-bind="slotProps" />
+      </template>
+    </CrudKanban>
     <CrudCustom />
     
     <b-overlay :show="loading" rounded="sm"></b-overlay>