vue-laravel-crud 2.0.4 → 2.0.6

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

@@ -8,6 +8,8 @@
         :columns="columns"
         :itemValue="itemValue"
         :getStateValue="getStateValue"
+        :getStateOptions="getStateOptions"
+        :getStateBadgeVariant="getStateBadgeVariant"
         :getArrayValue="getArrayValue"
         :showItem="showItem"
         :updateItem="updateItem"
@@ -15,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>
@@ -34,6 +40,8 @@ export default {
     'columns',
     'itemValue',
     'getStateValue',
+    'getStateOptions',
+    'getStateBadgeVariant',
     'getArrayValue',
     'showItem',
     'updateItem',

package/src/components/kanban/KanbanCard.vue

@@ -22,11 +22,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>
@@ -38,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>
@@ -61,10 +82,52 @@ export default {
     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/kanban/KanbanColumn.vue

@@ -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>
+          </KanbanCard>
         </slot>
       </div>
     </draggable>
@@ -53,6 +59,8 @@ export default {
     columns: Array,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,

package/src/components/table/TableCell.vue

@@ -30,10 +30,20 @@
         <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
         </b-form-checkbox>
       </span>
-      <span v-else-if="column.type == 'state' && optionsLoaded">
-        {{
-          getStateValue(itemValue(column, item), column.options)
-        }}
+      <span v-else-if="column.type == 'state'">
+        <template v-if="stateOptions.length > 0">
+          <b-badge 
+            v-for="(option, optIndex) in stateOptions" 
+            :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' && optionsLoaded">
         {{
@@ -44,7 +54,14 @@
           )
         }}
       </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>
     </slot>
@@ -57,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>
@@ -103,6 +126,8 @@ export default {
   inject: [
     'itemValue',
     'getStateValue',
+    'getStateOptions',
+    'getStateBadgeVariant',
     'getArrayValue',
     'onCheckSelect',
     'showItem',
@@ -114,6 +139,52 @@ export default {
     return {
       moment: moment
     };
+  },
+  computed: {
+    stateOptions() {
+      // Permitir usar opciones incluso si optionsLoaded es false, ya que getStateOptions normaliza internamente
+      if (this.column.type === 'state' && this.column.options && Array.isArray(this.column.options)) {
+        const itemVal = this.itemValue(this.column, this.item);
+        const options = this.column.options;
+        const result = this.getStateOptions(itemVal, options);
+        return result;
+      }
+      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

@@ -12,7 +12,7 @@
             v-bind:internalFilterByProp="internalFilterByProp" v-if="enableFilters &&
               filtersVisible &&
               isColumnHasFilter(column) &&
-              internalFilterByProp(column.prop)
+              (internalFilterByProp(column.prop) || internalFilterByProp(column.prop + '_from'))
             ">
 
             <div class="form-group">
@@ -36,33 +36,42 @@
                 </div>
               </div>
 
-              <select v-else-if="column.type == 'state' && optionsLoaded" class="form-control form-control-md p-2"
+              <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' || column.type == 'price' ? '0.01' : '1'"
+                    @change="onChangeFilter($event)"
+                    placeholder="Desde" />
+                </div>
+                <div class="col-6">
+                  <input 
+                    type="number" 
+                    class="form-control form-control-md p-2" 
+                    v-model.number="internalFilterByProp(column.prop + '_to').value"
+                    :step="column.type == 'money' || column.type == 'price' ? '0.01' : '1'"
+                    @change="onChangeFilter($event)"
+                    placeholder="Hasta" />
+                </div>
+              </div>
+
+              <select v-else-if="column.type == 'state' && column.options && Array.isArray(column.options)" class="form-control form-control-md p-2"
                 v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
                 :placeholder="column.label">
                 <option value="">{{ column.label }}</option>
-                <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
-                  {{
-                    option.text
-                      ? option.text
-                      : option.label
-                        ? option.label
-                        : ""
-                  }}
+                <option :value="option.value" v-for="(option, indexo) in column.options" :key="indexo">
+                  {{ option.text }}
                 </option>
               </select>
 
-              <select v-else-if="column.type == 'array' && optionsLoaded" class="form-control form-control-md p-2"
+              <select v-else-if="column.type == 'array' && column.options && Array.isArray(column.options)" class="form-control form-control-md p-2"
                 v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
                 :placeholder="column.label">
                 <option value="">{{ column.label }}</option>
-                <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
-                  {{
-                    option.text
-                      ? option.text
-                      : option.label
-                        ? option.label
-                        : ""
-                  }}
+                <option :value="option.value" v-for="(option, indexo) in column.options" :key="indexo">
+                  {{ option.text }}
                 </option>
               </select>
 
@@ -95,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>
@@ -163,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>