vue-laravel-crud 2.0.5 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.5",
+    "version": "2.0.6",
     "type": "module",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",

package/src/ItemCard.vue

@@ -32,6 +32,12 @@
                 <span v-else-if="column.type === 'array'">
                   {{ getArrayValue(itemValue(column, item), column.displayProp, column.options) }}
                 </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) }}
                 </span>
@@ -41,11 +47,14 @@
         </slot>
         <template v-slot:footer>
           <b-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>
         </template>
@@ -80,6 +89,38 @@
           return this.getStateOptions(this.itemValue(column, item), column.options);
         }
         return [];
+      },
+      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}`;
       }
     }
   };

package/src/components/CrudCards.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="displayMode == displayModes.MODE_CARDS">
+  <div v-if="currentDisplayMode == displayModes.MODE_CARDS">
     <draggable 
       v-model="items" 
       :group="draggableGroup" 
@@ -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>
+            </ItemCard>
           </slot>
         </div>
       </masonry>
@@ -93,6 +97,18 @@ export default {
     return {
       drag: false
     };
+  },
+  computed: {
+    currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
   }
 };
 </script>

package/src/components/CrudCustom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="displayMode == displayModes.MODE_CUSTOM">
+  <div v-if="currentDisplayMode == displayModes.MODE_CUSTOM">
     <div :class="listContainerClass">
       <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
         {{ messageEmptyResults }}
@@ -24,6 +24,18 @@ export default {
     'infiniteScroll',
     'messageEmptyResults',
     'itemsList'
-  ]
+  ],
+  computed: {
+    currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
+  }
 };
 </script>

package/src/components/CrudFilters.vue

@@ -87,6 +87,112 @@
       </div>
     </div>
 
+    <!-- Filtros custom -->
+    <div v-for="(customFilter, indexcf) in customFilters" :key="'custom-' + indexcf">
+      <div v-if="isCustomFilterEnabled(customFilter)">
+        <!-- Slot personalizado para filtro custom -->
+        <slot :name="'sidebar-filter-custom-' + customFilter.prop" v-bind:column="customFilter" v-bind:filter="filter"
+          v-bind:internalFilterByProp="internalFilterByProp" v-bind:getFilterForColumn="getFilterForColumn">
+          
+          <!-- Si type es una función callback -->
+          <RenderCustomFilter 
+            v-if="typeof customFilter.type === 'function'"
+            :render-function="customFilter.type"
+            :custom-filter="customFilter"
+            :filter="filter"
+            :internal-filter-by-prop="internalFilterByProp"
+            :get-filter-for-column="getFilterForColumn"
+            :on-change-filter="onChangeFilter"
+          />
+
+          <!-- Si type es string, usar la misma lógica que las columnas -->
+          <template v-else>
+            <div class="form-group" v-if="customFilter.type == 'boolean'">
+              <label>{{ customFilter.label }}</label>
+
+              <select class="form-control" v-model="getFilterForColumn(customFilter).value"
+                @change="onChangeFilter($event)">
+                <option value=""></option>
+                <option value="1">Sí</option>
+                <option value="0">No</option>
+              </select>
+            </div>
+
+            <div class="form-group" v-else-if="customFilter.type == 'date'">
+              <label>{{ customFilter.label }}</label>
+              <div class="row">
+                <div class="col-6">
+                  <b-form-datepicker v-model="getFilterForDateFrom(customFilter).value
+                    " today-button reset-button close-button locale="es"></b-form-datepicker>
+                </div>
+                <div class="col-6">
+                  <b-form-datepicker v-model="getFilterForDateTo(customFilter).value
+                    " today-button reset-button close-button locale="es"></b-form-datepicker>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group" v-else-if="customFilter.type == 'number' || customFilter.type == 'money'">
+              <label>{{ customFilter.label }}</label>
+              <div class="row">
+                <div class="col-6">
+                  <input 
+                    type="number" 
+                    class="form-control" 
+                    v-model.number="getFilterForDateFrom(customFilter).value"
+                    :step="customFilter.type == 'money' ? '0.01' : '1'"
+                    @change="onChangeFilter($event)"
+                    placeholder="Desde" />
+                </div>
+                <div class="col-6">
+                  <input 
+                    type="number" 
+                    class="form-control" 
+                    v-model.number="getFilterForDateTo(customFilter).value"
+                    :step="customFilter.type == 'money' ? '0.01' : '1'"
+                    @change="onChangeFilter($event)"
+                    placeholder="Hasta" />
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group" v-else-if="customFilter.type == 'state'">
+              <label>{{ customFilter.label }}</label>
+
+              <select class="form-control" v-model="getFilterForColumn(customFilter).value"
+                @change="onChangeFilter($event)" v-if="customFilter.options && Array.isArray(customFilter.options)">
+                <option value=""></option>
+                <option :value="option.value" v-for="option in customFilter.options"
+                  :key="option.value || option.id">
+                  {{ option.text }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-group" v-else-if="customFilter.type == 'array'">
+              <label>{{ customFilter.label }}</label>
+
+              <select class="form-control" v-model="getFilterForColumn(customFilter).value"
+                @change="onChangeFilter($event)" v-if="customFilter.options && Array.isArray(customFilter.options)">
+                <option value=""></option>
+                <option :value="option.value" v-for="option in customFilter.options"
+                  :key="option.value || option.id">
+                  {{ option.text }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-group" v-else>
+              <label>{{ customFilter.label }}</label>
+
+              <input class="form-control" v-model.lazy="getFilterForColumn(customFilter).value"
+                @change="onChangeFilter($event)" />
+            </div>
+          </template>
+        </slot>
+      </div>
+    </div>
+
     <div class="mt-3 d-flex justify-content-center">
       <button class="btn btn-light" @click="resetFilters()">
         Reset
@@ -99,11 +205,57 @@
 </template>
 
 <script>
+// Componente funcional para renderizar filtros custom con callback
+const RenderCustomFilter = {
+  functional: true,
+  props: {
+    renderFunction: {
+      type: Function,
+      required: true
+    },
+    customFilter: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Array,
+      default: () => []
+    },
+    internalFilterByProp: {
+      type: Function,
+      required: true
+    },
+    getFilterForColumn: {
+      type: Function,
+      required: true
+    },
+    onChangeFilter: {
+      type: Function,
+      required: true
+    }
+  },
+  render(h, context) {
+    const { renderFunction, customFilter, filter, internalFilterByProp, getFilterForColumn, onChangeFilter } = context.props;
+    return renderFunction(h, {
+      column: customFilter,
+      filter: filter,
+      internalFilterByProp: internalFilterByProp,
+      getFilterForColumn: getFilterForColumn,
+      onChangeFilter: onChangeFilter
+    });
+  }
+};
+
 export default {
   name: 'CrudFilters',
+  components: {
+    RenderCustomFilter
+  },
   inject: [
     'columns',
+    'customFilters',
     'isColumnHasFilter',
+    'isCustomFilterEnabled',
     'filter',
     'internalFilterByProp',
     'optionsLoaded',

package/src/components/CrudHeader.vue

@@ -30,8 +30,8 @@
           <b-button variant="info" v-if="enableFilters" @click="toggleFilters()">Filtros</b-button>
           <b-button variant="info" @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-else-if="displayMode == displayModes.MODE_CARDS"></b-icon-table>
+            <b-icon-card-list v-if="currentDisplayMode == displayModes.MODE_TABLE"></b-icon-card-list>
+            <b-icon-table v-else-if="currentDisplayMode == displayModes.MODE_CARDS"></b-icon-table>
           </b-button>
 
           <div class="crud-search m-0" v-if="showSearch">
@@ -94,6 +94,16 @@ export default {
     sidebarVisible() {
       // Acceder directamente al componente padre para obtener reactividad
       return this.$parent ? this.$parent.filterSidebarOpen : this.filterSidebarOpen;
+    },
+    currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
     }
   },
   methods: {

package/src/components/CrudKanban.vue

@@ -1,6 +1,10 @@
 <template>
-  <div v-if="displayMode == displayModes.MODE_KANBAN">
-    <KanbanBoard />
+  <div v-if="currentDisplayMode == displayModes.MODE_KANBAN">
+    <KanbanBoard>
+      <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+        <slot :name="name" v-bind="slotProps" />
+      </template>
+    </KanbanBoard>
   </div>
 </template>
 
@@ -15,6 +19,18 @@ export default {
   inject: [
     'displayMode',
     'displayModes'
-  ]
+  ],
+  computed: {
+    currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
+  }
 };
 </script>

package/src/components/CrudModals.vue

@@ -5,22 +5,26 @@
       <b-overlay :show="loading" rounded="sm">
         <template v-if="validate">
           <form @submit="saveItem">
-            <slot name="form" v-bind:item="item" v-if="item">
-              <b-form-group label="Nombre:" description="Nombre ">
-                <b-form-input v-model="item.title" type="text" required placeholder="Nombre"></b-form-input>
-              </b-form-group>
-            </slot>
+            <template v-if="reactiveItem">
+              <slot name="form" v-bind:item="reactiveItem">
+                <b-form-group label="Nombre:" description="Nombre ">
+                  <b-form-input v-model="reactiveItem.title" type="text" required placeholder="Nombre"></b-form-input>
+                </b-form-group>
+              </slot>
+            </template>
             <b-button block type="submit" variant="success" :disabled="loading">
               <b-spinner small v-if="loading"></b-spinner>{{ messageSave }}
             </b-button>
           </form>
         </template>
         <template v-if="!validate">
-          <slot name="form" v-bind:item="item" v-if="item">
-            <b-form-group :label="key" v-for="(value, key) in item" :key="key">
-              <b-form-input v-model="item[key]" type="text" required></b-form-input>
-            </b-form-group>
-          </slot>
+          <template v-if="reactiveItem">
+            <slot name="form" v-bind:item="reactiveItem">
+              <b-form-group :label="key" v-for="(value, key) in reactiveItem" :key="key">
+                <b-form-input v-model="reactiveItem[key]" type="text" required></b-form-input>
+              </b-form-group>
+            </slot>
+          </template>
           <b-button block type="submit" variant="success" :disabled="loading" @click="saveItem()">
             <b-spinner small v-if="loading"></b-spinner>{{ messageSave }}
           </b-button>
@@ -30,16 +34,18 @@
 
     <!-- Modal de visualización -->
     <b-modal :id="'modal-show-item-' + modelName" hide-footer size="xl" :title="title" no-close-on-backdrop>
-      <slot name="show" v-bind:item="item" v-if="item">
-        <b-list-group>
-          <b-list-group-item v-for="(value, key) in item" :key="key">
-            <b-row class="w-100">
-              <b-col cols="4" class="font-weight-bold">{{ key }}</b-col>
-              <b-col cols="8">{{ JSON.stringify(value) }}</b-col>
-            </b-row>
-          </b-list-group-item>
-        </b-list-group>
-      </slot>
+      <template v-if="reactiveItem">
+        <slot name="show" v-bind:item="reactiveItem">
+          <b-list-group>
+            <b-list-group-item v-for="(value, key) in reactiveItem" :key="key">
+              <b-row class="w-100">
+                <b-col cols="4" class="font-weight-bold">{{ key }}</b-col>
+                <b-col cols="8">{{ JSON.stringify(value) }}</b-col>
+              </b-row>
+            </b-list-group-item>
+          </b-list-group>
+        </slot>
+      </template>
     </b-modal>
 
     <!-- Modal de importación -->
@@ -92,6 +98,7 @@ export default {
     'loading',
     'validate',
     'item',
+    'getItem',
     'messageSave',
     'showImport',
     'showExport',
@@ -101,6 +108,27 @@ export default {
     'saveItem',
     'importItems',
     'exportItems'
-  ]
+  ],
+  computed: {
+    // Computed property para asegurar reactividad del item inyectado
+    reactiveItem() {
+      // Si hay una función getItem, usarla para obtener el item actual
+      if (this.getItem && typeof this.getItem === 'function') {
+        return this.getItem();
+      }
+      // Si no, usar el item inyectado directamente
+      return this.item;
+    }
+  },
+  watch: {
+    // Watch el item inyectado para forzar actualización
+    item: {
+      handler() {
+        this.$forceUpdate();
+      },
+      deep: true,
+      immediate: true
+    }
+  }
 };
 </script>

package/src/components/CrudTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['table-responsive', tableContainerClass]" v-if="displayMode == displayModes.MODE_TABLE">
+  <div :class="['table-responsive', tableContainerClass]" v-if="currentDisplayMode == displayModes.MODE_TABLE">
     <table :class="['table table-hover table-striped w-100', tableClass]">
       <TableHeader />
       
@@ -21,7 +21,11 @@
           :item="item"
           :index="index"
           :grouped="grouped"
-        />
+        >
+          <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+          </template>
+        </TableRow>
       </draggable>
     </table>
     
@@ -65,6 +69,18 @@ export default {
     return {
       drag: false
     };
+  },
+  computed: {
+    currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
   }
 };
 </script>

package/src/components/kanban/KanbanBoard.vue

@@ -17,7 +17,11 @@
         :cardClass="cardClass"
         :cardHideFooter="cardHideFooter"
         @draggableChange="onDraggableChange"
-      />
+      >
+        <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+          <slot :name="name" v-bind="slotProps" />
+        </template>
+      </KanbanColumn>
     </div>
   </div>
 </template>

package/src/components/kanban/KanbanCard.vue

@@ -39,6 +39,12 @@
                 <span v-else-if="column.type === 'array'">
                   {{ getArrayValue(itemValue(column, item), column.displayProp, column.options) }}
                 </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) }}
                 </span>
@@ -50,11 +56,14 @@
       
       <template v-slot:footer>
         <b-button-group size="sm">
-          <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>
       </template>
@@ -86,6 +95,38 @@ export default {
         return this.getStateOptions(this.itemValue(column, item), column.options);
       }
       return [];
+    },
+    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}`;
     }
   }
 };

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>