vue-laravel-crud 2.0.5 → 2.0.7

package/src/components/kanban/KanbanColumn.vue

@@ -30,8 +30,12 @@
             :getArrayValue="getArrayValue" 
             :showItem="showItem"
             :updateItem="updateItem" 
-            :removeItem="removeItem" 
-          />
+            :removeItem="removeItem"
+          >
+            <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+              <slot :name="name" v-bind="slotProps" />
+            </template>
+          </KanbanCard>
         </slot>
       </div>
     </draggable>

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>