vue-laravel-crud 2.0.1 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.1",
+    "version": "2.0.5",
     "type": "module",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
@@ -21,7 +21,9 @@
         "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
         "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
         "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-        "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+        "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
+        "build:demo": "cross-env NODE_ENV=production vue-cli-service build --mode production dev/demo/main.js",
+        "build:gh-pages": "npm run build:demo"
     },
     "dependencies": {
         "axios": "^1.3.5",
@@ -51,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,7 +15,19 @@
                   {{ 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) }}
@@ -55,11 +67,21 @@
       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 [];
+      }
+    }
   };
   </script>
   

package/src/components/CrudCards.vue

@@ -24,7 +24,9 @@
               :cardClass="cardClass" 
               :cardHideFooter="cardHideFooter" 
               :itemValue="itemValue"
-              :getStateValue="getStateValue" 
+              :getStateValue="getStateValue"
+              :getStateOptions="getStateOptions"
+              :getStateBadgeVariant="getStateBadgeVariant"
               :getArrayValue="getArrayValue" 
               :showItem="showItem"
               :updateItem="updateItem" 
@@ -74,6 +76,8 @@ export default {
     'cardHideFooter',
     'itemValue',
     'getStateValue',
+    'getStateOptions',
+    'getStateBadgeVariant',
     'getArrayValue',
     'showItem',
     'updateItem',

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,28 +67,20 @@
           <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>
@@ -98,7 +108,60 @@ export default {
     '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/CrudPagination.vue

@@ -26,18 +26,33 @@
           <span class="paginator-label">Filas:</span>
           <span class="paginator-value">{{ pagination.total }}</span>
         </span>
-        <span class="paginator-badge">
-          <span class="paginator-label">xPág:</span>
-          <span class="paginator-value">{{ pagination.per_page }}</span>
-        </span>
-        <span class="paginator-badge">
-          <span class="paginator-label">Pág:</span>
-          <span class="paginator-value">{{ pagination.current_page }}</span>
-        </span>
-        <span class="paginator-badge" v-if="selectedItems.length > 0">
-          <span class="paginator-label">Seleccionados:</span>
-          <span class="paginator-value">{{ selectedItems.length }}</span>
-        </span>
+        <b-dropdown 
+          variant="outline-secondary" 
+          size="sm" 
+          class="paginator-dropdown"
+          :text="`xPág: ${pagination.per_page}`"
+        >
+          <b-dropdown-item 
+            v-for="option in perPageOptions" 
+            :key="option"
+            @click="onPerPageChange(option)"
+            :active="pagination.per_page === option"
+          >
+            {{ option }}
+          </b-dropdown-item>
+        </b-dropdown>
+        <b-dropdown 
+          v-if="selectedItemsCount > 0"
+          variant="outline-secondary" 
+          size="sm" 
+          class="paginator-dropdown paginator-badge-dropdown"
+          :text="`Seleccionados: ${selectedItemsCount}`"
+        >
+          <b-dropdown-item @click="clearSelection">
+            <b-icon-x-circle class="mr-1"></b-icon-x-circle>
+            Limpiar selección
+          </b-dropdown-item>
+        </b-dropdown>
       </div>
       
       <div class="crud-paginator">
@@ -73,28 +88,42 @@ export default {
     'selectedItems',
     'showPaginator',
     'infiniteHandler',
-    'onPaginationChange'
-  ]
+    'onPaginationChange',
+    'onPerPageChange',
+    'clearSelection'
+  ],
+  data() {
+    return {
+      perPageOptions: [10, 20, 50, 100]
+    };
+  },
+  computed: {
+    selectedItemsCount() {
+      // Computed para forzar reactividad del contador
+      return this.selectedItems ? this.selectedItems.length : 0;
+    }
+  }
 };
 </script>
 
 <style scoped>
 .paginator-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   width: 100%;
   margin-top: 1rem;
-  gap: 0.75rem;
+  gap: 1rem;
 }
 
 .paginator-data {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.875rem;
+  grid-column: 1;
 }
 
 .paginator-badge {
@@ -124,10 +153,48 @@ export default {
   color: #212529;
 }
 
+.paginator-dropdown {
+  font-size: 0.875rem;
+}
+
+.paginator-dropdown >>> .btn {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  color: #495057;
+}
+
+.paginator-dropdown >>> .btn:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
 .crud-paginator {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
+  grid-column: 2;
+}
+
+.paginator-badge-dropdown {
+  z-index: 1;
+  position: relative;
+}
+
+.paginator-badge-dropdown >>> .btn {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  color: #495057;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.paginator-badge-dropdown >>> .btn:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
 }
 </style>

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

package/src/components/kanban/KanbanCard.vue

@@ -22,7 +22,19 @@
                   {{ 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) }}
@@ -61,10 +73,20 @@ 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 [];
+    }
   }
 };
 </script>

package/src/components/kanban/KanbanColumn.vue

@@ -24,7 +24,9 @@
             :cardClass="cardClass" 
             :cardHideFooter="cardHideFooter" 
             :itemValue="itemValue"
-            :getStateValue="getStateValue" 
+            :getStateValue="getStateValue"
+            :getStateOptions="getStateOptions"
+            :getStateBadgeVariant="getStateBadgeVariant"
             :getArrayValue="getArrayValue" 
             :showItem="showItem"
             :updateItem="updateItem" 
@@ -53,6 +55,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

@@ -1,5 +1,6 @@
 <template>
-  <td :scope="column.prop == 'id' ? 'row' : ''">
+  <td :scope="column.prop == 'id' ? 'row' : ''" 
+      :class="{ 'actions-cell': column.type == 'actions' }">
     <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
       v-bind:columnindex="columnIndex">
       <span v-if="column.type == 'boolean'">
@@ -25,10 +26,24 @@
         <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 == 'checkbox'">
+        <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
+        </b-form-checkbox>
+      </span>
+      <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">
         {{
@@ -40,11 +55,35 @@
         }}
       </span>
       <span v-else>
+      
         {{ itemValue(column, item) }}
       </span>
     </slot>
 
-    <b-button-group v-if="column.type == 'actions'">
+    <!-- Modo dropdown cuando useDropdown está activo -->
+    <b-dropdown v-if="column.type == 'actions' && column.useDropdown" 
+                variant="secondary" 
+                size="sm" 
+                class="actions-dropdown">
+      <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"
+        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>
+    </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"
         v-bind:updateItem="updateItem" v-bind:removeItem="removeItem">
         <b-button variant="primary" @click="showItem(item.id, index)">
@@ -75,6 +114,8 @@ export default {
   inject: [
     'itemValue',
     'getStateValue',
+    'getStateOptions',
+    'getStateBadgeVariant',
     'getArrayValue',
     'onCheckSelect',
     'showItem',
@@ -86,6 +127,40 @@ 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 [];
+    }
   }
 };
 </script>
+
+<style scoped>
+/* Fijar ancho de la columna de acciones */
+.actions-cell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.actions-button-group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+.actions-dropdown {
+  display: inline-block;
+}
+
+/* Asegurar que los botones no se expandan */
+.actions-button-group .btn {
+  flex-shrink: 0;
+}
+</style>