vue-laravel-crud 2.0.4 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.4",
+    "version": "2.0.6",
     "type": "module",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
@@ -53,6 +53,7 @@
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
         "express": "^4.18.2",
+        "marked": "^4.3.0",
         "minimist": "^1.2.5",
         "node-sass": "^8.0.0",
         "rollup": "^2.68.0",

package/src/ItemCard.vue

@@ -15,11 +15,29 @@
                   {{ itemValue(column, item) }}
                 </span>
                 <span v-else-if="column.type === 'state'">
-                  {{ getStateValue(itemValue(column, item), column.options) }}
+                  <template v-if="getStateOptionsForColumn(column, item).length > 0">
+                    <b-badge 
+                      v-for="(option, optIndex) in getStateOptionsForColumn(column, item)" 
+                      :key="optIndex" 
+                      :variant="getStateBadgeVariant(option)"
+                      class="mr-1"
+                    >
+                      {{ option.text }}
+                    </b-badge>
+                  </template>
+                  <span v-else>
+                    {{ itemValue(column, item) }}
+                  </span>
                 </span>
                 <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>
@@ -29,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>
@@ -55,11 +76,53 @@
       cardHideFooter: Boolean,
       itemValue: Function,
       getStateValue: Function,
+      getStateOptions: Function,
+      getStateBadgeVariant: Function,
       getArrayValue: Function,
       showItem: Function,
       updateItem: Function,
       removeItem: Function,
     },
+    methods: {
+      getStateOptionsForColumn(column, item) {
+        if (column.type === 'state' && column.options) {
+          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}`;
+      }
+    }
   };
   </script>
   

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" 
@@ -24,12 +24,18 @@
               :cardClass="cardClass" 
               :cardHideFooter="cardHideFooter" 
               :itemValue="itemValue"
-              :getStateValue="getStateValue" 
+              :getStateValue="getStateValue"
+              :getStateOptions="getStateOptions"
+              :getStateBadgeVariant="getStateBadgeVariant"
               :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>
@@ -74,6 +80,8 @@ export default {
     'cardHideFooter',
     'itemValue',
     'getStateValue',
+    'getStateOptions',
+    'getStateBadgeVariant',
     'getArrayValue',
     'showItem',
     'updateItem',
@@ -89,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

@@ -3,11 +3,11 @@
     <div v-for="(column, indexc) in columns" :key="indexc">
       <div v-if="isColumnHasFilter(column)">
         <slot :name="'sidebar-filter-' + column.prop" v-bind:column="column" v-bind:filter="filter"
-          v-bind:internalFilterByProp="internalFilterByProp" v-if="internalFilterByProp(column.prop)">
+          v-bind:internalFilterByProp="internalFilterByProp" v-bind:getFilterForColumn="getFilterForColumn">
           <div class="form-group" v-if="column.type == 'boolean'">
             <label>{{ column.label }}</label>
 
-            <select class="form-control" v-model="internalFilterByProp(column.prop).value"
+            <select class="form-control" v-model="getFilterForColumn(column).value"
               @change="onChangeFilter($event)">
               <option value=""></option>
               <option value="1">Sí</option>
@@ -17,31 +17,49 @@
           <div class="form-group" v-else-if="column.type == 'date'">
             <div class="row">
               <div class="col-6">
-                <b-form-datepicker v-model="internalFilterByProp(column.prop + '_from').value
+                <b-form-datepicker v-model="getFilterForDateFrom(column).value
                   " today-button reset-button close-button locale="es"></b-form-datepicker>
               </div>
               <div class="col-6">
-                <b-form-datepicker v-model="internalFilterByProp(column.prop + '_to').value
+                <b-form-datepicker v-model="getFilterForDateTo(column).value
                   " today-button reset-button close-button locale="es"></b-form-datepicker>
               </div>
             </div>
           </div>
 
+          <div class="form-group" v-else-if="column.type == 'number' || column.type == 'money'">
+            <label>{{ column.label }}</label>
+            <div class="row">
+              <div class="col-6">
+                <input 
+                  type="number" 
+                  class="form-control" 
+                  v-model.number="getFilterForDateFrom(column).value"
+                  :step="column.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(column).value"
+                  :step="column.type == 'money' ? '0.01' : '1'"
+                  @change="onChangeFilter($event)"
+                  placeholder="Hasta" />
+              </div>
+            </div>
+          </div>
+
           <div class="form-group" v-else-if="column.type == 'state'">
             <label>{{ column.label }}</label>
 
-            <select class="form-control" v-model="internalFilterByProp(column.prop).value"
-              @change="onChangeFilter($event)" v-if="optionsLoaded">
+            <select class="form-control" v-model="getFilterForColumn(column).value"
+              @change="onChangeFilter($event)" v-if="column.options && Array.isArray(column.options)">
               <option value=""></option>
-              <option :value="option.id ? option.id : option.value" v-for="option in column.options"
-                :key="option.id ? option.id : option.value">
-                {{
-                  option.text
-                    ? option.text
-                    : option.label
-                      ? option.label
-                      : ""
-                }}
+              <option :value="option.value" v-for="option in column.options"
+                :key="option.value || option.id">
+                {{ option.text }}
               </option>
             </select>
           </div>
@@ -49,34 +67,132 @@
           <div class="form-group" v-else-if="column.type == 'array'">
             <label>{{ column.label }}</label>
 
-            <select class="form-control" v-model="internalFilterByProp(column.prop).value"
-              @change="onChangeFilter($event)" v-if="optionsLoaded">
+            <select class="form-control" v-model="getFilterForColumn(column).value"
+              @change="onChangeFilter($event)" v-if="column.options && Array.isArray(column.options)">
               <option value=""></option>
-              <template v-if="column.options">
-                <option :value="option.id ? option.id : option.value" v-for="option in column.options"
-                  :key="option.id ? option.id : option.value">
-                  {{
-                    option.text
-                      ? option.text
-                      : option.label
-                        ? option.label
-                        : ""
-                  }}
-                </option>
-              </template>
+              <option :value="option.value" v-for="option in column.options"
+                :key="option.value || option.id">
+                {{ option.text }}
+              </option>
             </select>
           </div>
 
           <div class="form-group" v-else>
             <label>{{ column.label }}</label>
 
-            <input class="form-control" v-model.lazy="internalFilterByProp(column.prop).value"
+            <input class="form-control" v-model.lazy="getFilterForColumn(column).value"
               @change="onChangeFilter($event)" />
           </div>
         </slot>
       </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
@@ -89,16 +205,115 @@
 </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',
     'onChangeFilter',
-    'resetFilters'
-  ]
+    'resetFilters',
+    'setupFilters',
+    'internalFilters'
+  ],
+  methods: {
+    // Método helper para obtener el filtro de forma segura, creándolo si no existe
+    getFilterForColumn(column) {
+      let filter = this.internalFilterByProp(column.prop);
+      
+      // Si el filtro no existe, intentar inicializar los filtros
+      if (!filter) {
+        // Verificar si hay filtros inicializados
+        if (this.internalFilters && this.internalFilters.length === 0) {
+          this.setupFilters();
+          // Intentar obtener el filtro nuevamente después de inicializar
+          filter = this.internalFilterByProp(column.prop);
+        }
+      }
+      
+      // Si aún no existe, crear un objeto temporal para evitar errores
+      if (!filter) {
+        return {
+          value: null
+        };
+      }
+      
+      return filter;
+    },
+    
+    // Método helper específico para campos de fecha (from)
+    getFilterForDateFrom(column) {
+      const filter = this.internalFilterByProp(column.prop + '_from');
+      if (!filter) {
+        if (this.internalFilters && this.internalFilters.length === 0) {
+          this.setupFilters();
+          return this.internalFilterByProp(column.prop + '_from') || { value: null };
+        }
+        return { value: null };
+      }
+      return filter;
+    },
+    
+    // Método helper específico para campos de fecha (to)
+    getFilterForDateTo(column) {
+      const filter = this.internalFilterByProp(column.prop + '_to');
+      if (!filter) {
+        if (this.internalFilters && this.internalFilters.length === 0) {
+          this.setupFilters();
+          return this.internalFilterByProp(column.prop + '_to') || { value: null };
+        }
+        return { value: null };
+      }
+      return filter;
+    }
+  }
 };
 </script>

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>