vue-laravel-crud 2.0.5 → 2.0.7

package/src/components/CrudPagination.vue

@@ -1,200 +1,207 @@
-<template>
-  <div>
-    <!-- Infinite Loading -->
-    <infinite-loading 
-      ref="infiniteLoading" 
-      @infinite="infiniteHandler" 
-      v-if="infiniteScroll"
-      :forceUseInfiniteWrapper="true" 
-      :key="infiniteScrollKey"
-    >
-      <div slot="spinner">
-        <div class="text-center">{{ messageLoading }}</div>
-      </div>
-      <div slot="no-more">
-        <div class="text-center" v-if="!loading">{{ messageNoMore }}</div>
-      </div>
-      <div slot="no-results">
-        <div class="text-center" v-if="!loading">{{ items.length == 0 ? messageEmptyResults : messageNoMore }}</div>
-      </div>
-    </infinite-loading>
-
-    <!-- Paginador -->
-    <div class="paginator-container" v-if="!infiniteScroll">
-      <div class="paginator-data">
-        <span class="paginator-badge">
-          <span class="paginator-label">Filas:</span>
-          <span class="paginator-value">{{ pagination.total }}</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">
-        <b-pagination 
-          v-if="showPaginator" 
-          v-model="pagination.current_page" 
-          :total-rows="pagination.total"
-          :per-page="pagination.per_page" 
-          @change="onPaginationChange($event)"
-        ></b-pagination>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import InfiniteLoading from 'vue-infinite-loading';
-
-export default {
-  name: 'CrudPagination',
-  components: {
-    InfiniteLoading
-  },
-  inject: [
-    'infiniteScroll',
-    'infiniteScrollKey',
-    'messageLoading',
-    'messageNoMore',
-    'messageEmptyResults',
-    'loading',
-    'items',
-    'pagination',
-    'selectedItems',
-    'showPaginator',
-    'infiniteHandler',
-    '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: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  width: 100%;
-  margin-top: 1rem;
-  gap: 1rem;
-}
-
-.paginator-data {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  grid-column: 1;
-}
-
-.paginator-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.375rem 0.625rem;
-  background-color: #f8f9fa;
-  border: 1px solid #dee2e6;
-  border-radius: 0.375rem;
-  color: #495057;
-  transition: all 0.2s ease;
-}
-
-.paginator-badge:hover {
-  background-color: #e9ecef;
-  border-color: #ced4da;
-}
-
-.paginator-label {
-  font-weight: 500;
-  color: #6c757d;
-}
-
-.paginator-value {
-  font-weight: 600;
-  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;
-  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>
+<template>
+  <div>
+    <!-- Infinite Loading -->
+    <infinite-loading 
+      ref="infiniteLoading" 
+      @infinite="infiniteHandler" 
+      v-if="infiniteScroll"
+      :forceUseInfiniteWrapper="true" 
+      :key="infiniteScrollKey"
+    >
+      <div slot="spinner">
+        <div class="text-center">{{ messageLoading }}</div>
+      </div>
+      <div slot="no-more">
+        <div class="text-center" v-if="!loadingValue">{{ messageNoMore }}</div>
+      </div>
+      <div slot="no-results">
+        <div class="text-center" v-if="!loadingValue && firstLoadValue">{{ items.length == 0 ? messageEmptyResults : messageNoMore }}</div>
+      </div>
+    </infinite-loading>
+
+    <!-- Paginador -->
+    <div class="paginator-container" v-if="!infiniteScroll">
+      <div class="paginator-data">
+        <span class="paginator-badge">
+          <span class="paginator-label">Filas:</span>
+          <span class="paginator-value">{{ pagination.total }}</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">
+        <b-pagination 
+          v-if="showPaginator" 
+          v-model="pagination.current_page" 
+          :total-rows="pagination.total"
+          :per-page="pagination.per_page" 
+          @change="onPaginationChange($event)"
+        ></b-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import InfiniteLoading from 'vue-infinite-loading';
+
+export default {
+  name: 'CrudPagination',
+  components: {
+    InfiniteLoading
+  },
+  inject: [
+    'infiniteScroll',
+    'infiniteScrollKey',
+    'messageLoading',
+    'messageNoMore',
+    'messageEmptyResults',
+    'loading',
+    'firstLoad',
+    'items',
+    'pagination',
+    'selectedItems',
+    'showPaginator',
+    'infiniteHandler',
+    '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;
+    },
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
+    },
+    firstLoadValue() {
+      return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.paginator-container {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: 100%;
+  margin-top: 1rem;
+  gap: 1rem;
+}
+
+.paginator-data {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  grid-column: 1;
+}
+
+.paginator-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.625rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  color: #495057;
+  transition: all 0.2s ease;
+}
+
+.paginator-badge:hover {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
+.paginator-label {
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.paginator-value {
+  font-weight: 600;
+  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;
+  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/CrudTable.vue

@@ -1,70 +1,103 @@
-<template>
-  <div :class="['table-responsive', tableContainerClass]" v-if="displayMode == displayModes.MODE_TABLE">
-    <table :class="['table table-hover table-striped w-100', tableClass]">
-      <TableHeader />
-      
-      <draggable 
-        :list="items" 
-        :group="draggableGroup" 
-        tag="tbody" 
-        :draggable="orderable ? '.item' : '.none'"
-        @start="drag = true" 
-        @end="drag = false" 
-        @sort="onSort()" 
-        @add="onDraggableAdded($event)"
-        @change="onDraggableChange($event)" 
-        :options="draggableOptions"
-      >
-        <TableRow 
-          v-for="(item, index) in itemsList" 
-          v-bind:key="index"
-          :item="item"
-          :index="index"
-          :grouped="grouped"
-        />
-      </draggable>
-    </table>
-    
-    <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
-      {{ messageEmptyResults }}
-    </p>
-  </div>
-</template>
-
-<script>
-import draggable from "vuedraggable";
-import TableHeader from './table/TableHeader.vue';
-import TableRow from './table/TableRow.vue';
-
-export default {
-  name: 'CrudTable',
-  components: {
-    draggable,
-    TableHeader,
-    TableRow
-  },
-  inject: [
-    'displayMode',
-    'displayModes',
-    'tableContainerClass',
-    'tableClass',
-    'items',
-    'draggableGroup',
-    'orderable',
-    'draggableOptions',
-    'itemsList',
-    'grouped',
-    'loading',
-    'infiniteScroll',
-    'messageEmptyResults',
-    'onSort',
-    'onDraggableAdded',
-    'onDraggableChange'
-  ],
-  data() {
-    return {
-      drag: false
-    };
-  }
-};
-</script>
+<template>
+  <div :class="['table-responsive', tableContainerClass]" v-if="currentDisplayMode == displayModes.MODE_TABLE">
+    <!-- Spinner durante la carga inicial -->
+    <div v-if="loadingValue || !firstLoadValue" class="text-center p-5">
+      <b-spinner variant="primary" label="Cargando..."></b-spinner>
+      <p class="mt-2">{{ messageLoading }}</p>
+    </div>
+
+    <!-- Tabla con datos -->
+    <template v-else>
+      <table :class="['table table-hover table-striped w-100', tableClass]">
+        <TableHeader />
+        
+        <draggable 
+          :list="items" 
+          :group="draggableGroup" 
+          tag="tbody" 
+          :draggable="orderable ? '.item' : '.none'"
+          @start="drag = true" 
+          @end="drag = false" 
+          @sort="onSort()" 
+          @add="onDraggableAdded($event)"
+          @change="onDraggableChange($event)" 
+          :options="draggableOptions"
+        >
+          <TableRow 
+            v-for="(item, index) in itemsList" 
+            v-bind:key="index"
+            :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>
+      
+      <p v-if="firstLoadValue && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
+        {{ messageEmptyResults }}
+      </p>
+    </template>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import TableHeader from './table/TableHeader.vue';
+import TableRow from './table/TableRow.vue';
+
+export default {
+  name: 'CrudTable',
+  components: {
+    draggable,
+    TableHeader,
+    TableRow
+  },
+  inject: [
+    'displayMode',
+    'displayModes',
+    'tableContainerClass',
+    'tableClass',
+    'items',
+    'draggableGroup',
+    'orderable',
+    'draggableOptions',
+    'itemsList',
+    'grouped',
+    'loading',
+    'firstLoad',
+    'infiniteScroll',
+    'messageEmptyResults',
+    'messageLoading',
+    'onSort',
+    'onDraggableAdded',
+    'onDraggableChange'
+  ],
+  data() {
+    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;
+    },
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
+    },
+    firstLoadValue() {
+      return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
+    }
+  }
+};
+</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}`;
     }
   }
 };