vue-laravel-crud 2.0.5 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.5",
+    "version": "2.0.7",
     "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,98 +1,131 @@
-<template>
-  <div v-if="displayMode == displayModes.MODE_CARDS">
-    <draggable 
-      v-model="items" 
-      :group="draggableGroup" 
-      :draggable="orderable ? '.item' : '.none'" 
-      @start="drag = true"
-      @end="drag = false" 
-      @sort="onSort()" 
-      @add="onDraggableAdded($event)" 
-      @change="onDraggableChange($event)"
-      :options="draggableOptions"
-    >
-      <masonry
-        :cols="{ default: 12 / colLg, 1400: 12 / colXl, 1200: 12 / colLg, 1000: 12 / colMd, 700: 12 / colSm, 400: 12 / colXs }"
-        :gutter="{ default: '15px', 700: '15px' }"
-      >
-        <div v-for="(item, itemIndex) in itemsList" v-bind:key="itemIndex" class="item">
-          <slot name="card" v-bind:item="item">
-            <ItemCard 
-              :item="item" 
-              :columns="columns" 
-              :index="itemIndex"
-              :cardClass="cardClass" 
-              :cardHideFooter="cardHideFooter" 
-              :itemValue="itemValue"
-              :getStateValue="getStateValue"
-              :getStateOptions="getStateOptions"
-              :getStateBadgeVariant="getStateBadgeVariant"
-              :getArrayValue="getArrayValue" 
-              :showItem="showItem"
-              :updateItem="updateItem" 
-              :removeItem="removeItem" 
-            />
-          </slot>
-        </div>
-      </masonry>
-    </draggable>
-
-    <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
-      {{ messageEmptyResults }}
-    </p>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-import draggable from "vuedraggable";
-import VueMasonry from 'vue-masonry-css';
-import ItemCard from '../ItemCard.vue';
-
-// Registrar el componente masonry usando el Plugin
-Vue.use(VueMasonry);
-
-export default {
-  name: 'CrudCards',
-  components: {
-    draggable,
-    ItemCard
-  },
-  inject: [
-    'displayMode',
-    'displayModes',
-    'items',
-    'draggableGroup',
-    'orderable',
-    'draggableOptions',
-    'itemsList',
-    'colLg',
-    'colXl',
-    'colMd',
-    'colSm',
-    'colXs',
-    'columns',
-    'cardClass',
-    'cardHideFooter',
-    'itemValue',
-    'getStateValue',
-    'getStateOptions',
-    'getStateBadgeVariant',
-    'getArrayValue',
-    'showItem',
-    'updateItem',
-    'removeItem',
-    'loading',
-    'infiniteScroll',
-    'messageEmptyResults',
-    'onSort',
-    'onDraggableAdded',
-    'onDraggableChange'
-  ],
-  data() {
-    return {
-      drag: false
-    };
-  }
-};
-</script>
+<template>
+  <div v-if="currentDisplayMode == displayModes.MODE_CARDS">
+    <!-- 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>
+
+    <!-- Cards con datos -->
+    <template v-else>
+      <draggable 
+        v-model="items" 
+        :group="draggableGroup" 
+        :draggable="orderable ? '.item' : '.none'" 
+        @start="drag = true"
+        @end="drag = false" 
+        @sort="onSort()" 
+        @add="onDraggableAdded($event)" 
+        @change="onDraggableChange($event)"
+        :options="draggableOptions"
+      >
+        <masonry
+          :cols="{ default: 12 / colLg, 1400: 12 / colXl, 1200: 12 / colLg, 1000: 12 / colMd, 700: 12 / colSm, 400: 12 / colXs }"
+          :gutter="{ default: '15px', 700: '15px' }"
+        >
+          <div v-for="(item, itemIndex) in itemsList" v-bind:key="itemIndex" class="item">
+            <slot name="card" v-bind:item="item">
+              <ItemCard 
+                :item="item" 
+                :columns="columns" 
+                :index="itemIndex"
+                :cardClass="cardClass" 
+                :cardHideFooter="cardHideFooter" 
+                :itemValue="itemValue"
+                :getStateValue="getStateValue"
+                :getStateOptions="getStateOptions"
+                :getStateBadgeVariant="getStateBadgeVariant"
+                :getArrayValue="getArrayValue" 
+                :showItem="showItem"
+                :updateItem="updateItem" 
+                :removeItem="removeItem"
+              >
+                <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="slotProps">
+                  <slot :name="name" v-bind="slotProps" />
+                </template>
+              </ItemCard>
+            </slot>
+          </div>
+        </masonry>
+      </draggable>
+
+      <p v-if="firstLoadValue && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
+        {{ messageEmptyResults }}
+      </p>
+    </template>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import draggable from "vuedraggable";
+import VueMasonry from 'vue-masonry-css';
+import ItemCard from '../ItemCard.vue';
+
+// Registrar el componente masonry usando el Plugin
+Vue.use(VueMasonry);
+
+export default {
+  name: 'CrudCards',
+  components: {
+    draggable,
+    ItemCard
+  },
+  inject: [
+    'displayMode',
+    'displayModes',
+    'items',
+    'draggableGroup',
+    'orderable',
+    'draggableOptions',
+    'itemsList',
+    'colLg',
+    'colXl',
+    'colMd',
+    'colSm',
+    'colXs',
+    'columns',
+    'cardClass',
+    'cardHideFooter',
+    'itemValue',
+    'getStateValue',
+    'getStateOptions',
+    'getStateBadgeVariant',
+    'getArrayValue',
+    'showItem',
+    'updateItem',
+    'removeItem',
+    '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/CrudCustom.vue

@@ -1,29 +1,58 @@
-<template>
-  <div v-if="displayMode == displayModes.MODE_CUSTOM">
-    <div :class="listContainerClass">
-      <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
-        {{ messageEmptyResults }}
-      </p>
-      <div :class="listItemClass" v-for="(item, index) in itemsList" v-bind:key="index">
-        <slot name="card" v-bind:item="item"> </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CrudCustom',
-  inject: [
-    'displayMode',
-    'displayModes',
-    'listContainerClass',
-    'listItemClass',
-    'loading',
-    'items',
-    'infiniteScroll',
-    'messageEmptyResults',
-    'itemsList'
-  ]
-};
-</script>
+<template>
+  <div v-if="currentDisplayMode == displayModes.MODE_CUSTOM">
+    <div :class="listContainerClass">
+      <!-- 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>
+
+      <!-- Contenido con datos -->
+      <template v-else>
+        <p v-if="firstLoadValue && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
+          {{ messageEmptyResults }}
+        </p>
+        <div :class="listItemClass" v-for="(item, index) in itemsList" v-bind:key="index">
+          <slot name="card" v-bind:item="item"> </slot>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CrudCustom',
+  inject: [
+    'displayMode',
+    'displayModes',
+    'listContainerClass',
+    'listItemClass',
+    'loading',
+    'firstLoad',
+    'items',
+    'infiniteScroll',
+    'messageEmptyResults',
+    'messageLoading',
+    '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;
+    },
+    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>