vue-laravel-crud 2.0.6 → 2.0.8

package/src/components/CrudHeader.vue

@@ -1,152 +1,154 @@
-<template>
-  <div class="crud-header" v-if="showHeader">
-    <h4 class="crud-title" v-if="showTitle">{{ title }}</h4>
-    
-    <b-sidebar :visible="sidebarVisible" @hidden="closeSidebar" title="Filtrar" right shadow>
-      <CrudFilters />
-    </b-sidebar>
-
-    <div class="table-options">
-      <b-button-group class="mr-1">
-        <slot name="tableActions" v-bind:createItem="createItem" v-bind:toggleDisplayMode="toggleDisplayMode"
-          v-bind:loading="loading">
-          <slot name="tableActionsPrepend" v-bind:loading="loading"> </slot>
-
-          <b-button variant="info" @click="showImportModal()" v-if="showImport">
-            <b-icon-cloud-upload></b-icon-cloud-upload>{{ messageImport }}
-          </b-button>
-          <b-button variant="info" @click="showExportModal()" v-if="showExport">
-            <b-icon-cloud-download></b-icon-cloud-download>{{ messageExport }}
-          </b-button>
-          <b-button variant="info" v-if="showPrincipalSortBtn" @click="togglePrincipalSort()" :disabled="loading">
-            <b-icon-sort-numeric-down v-if="principalSort"></b-icon-sort-numeric-down>
-            <b-icon-sort-numeric-up v-else></b-icon-sort-numeric-up>
-          </b-button>
-          <b-button variant="danger" @click="confirmBulkDelete()"
-            v-if="bulkDelete"><b-icon-trash></b-icon-trash></b-button>
-          <b-button variant="success" v-if="showCreateBtn" @click="createItem()" :disabled="loading">
-            <b-icon-plus></b-icon-plus>{{ messageNew }}
-          </b-button>
-          <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="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">
-            <b-input-group>
-              <b-input-group-prepend>
-                <b-button variant="info" @click="displaySearch = !displaySearch"
-                  :class="{ open: displaySearch }"><b-icon-search></b-icon-search></b-button>
-              </b-input-group-prepend>
-              <b-form-input v-if="displaySearch" v-model="search" class="pl-2" type="search" required
-                :placeholder="searchPlaceholder" debounce="500"></b-form-input>
-            </b-input-group>
-
-            <slot name="tableActionsAppend" v-bind:loading="loading"> </slot>
-          </div>
-        </slot>
-      </b-button-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import CrudFilters from './CrudFilters.vue';
-
-export default {
-  name: 'CrudHeader',
-  components: {
-    CrudFilters
-  },
-  inject: [
-    'showHeader',
-    'showTitle',
-    'title',
-    'filterSidebarOpen',
-    'showImport',
-    'showExport',
-    'showPrincipalSortBtn',
-    'principalSort',
-    'bulkDelete',
-    'showCreateBtn',
-    'enableFilters',
-    'displayModeToggler',
-    'displayMode',
-    'displayModes',
-    'showSearch',
-    'displaySearch',
-    'search',
-    'searchPlaceholder',
-    'loading',
-    'messageImport',
-    'messageExport',
-    'messageNew',
-    'createItem',
-    'toggleDisplayMode',
-    'togglePrincipalSort',
-    'confirmBulkDelete',
-    'toggleFilters',
-    'refresh'
-  ],
-  computed: {
-    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: {
-    closeSidebar() {
-      if (this.filterSidebarOpen) {
-        this.toggleFilters();
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.crud-header {
-  display: flex;
-  justify-content: space-between;
-  max-height: 3rem;
-}
-
-.crud-title {
-  margin: 0;
-}
-
-.crud-search {
-  max-width: 15rem;
-}
-
-.crud-search .btn {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.crud-search .btn.open {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.table-options {
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-</style>
+<template>
+  <div class="crud-header" v-if="showHeader">
+    <h4 class="crud-title" v-if="showTitle">{{ title }}</h4>
+    
+    <b-sidebar :visible="sidebarVisible" @hidden="closeSidebar" title="Filtrar" right shadow>
+      <CrudFilters />
+    </b-sidebar>
+
+    <div class="table-options">
+      <b-button-group class="mr-1">
+        <slot name="tableActions" v-bind:createItem="createItem" v-bind:toggleDisplayMode="toggleDisplayMode"
+          v-bind:loading="loading">
+          <slot name="tableActionsPrepend" v-bind:loading="loading"> </slot>
+
+          <b-button variant="info" @click="showImportModal()" v-if="showImport">
+            <b-icon-cloud-upload></b-icon-cloud-upload>{{ messageImport }}
+          </b-button>
+          <b-button variant="info" @click="showExportModal()" v-if="showExport">
+            <b-icon-cloud-download></b-icon-cloud-download>{{ messageExport }}
+          </b-button>
+          <b-button variant="info" v-if="showPrincipalSortBtn" @click="togglePrincipalSort()" :disabled="loading">
+            <b-icon-sort-numeric-down v-if="principalSort"></b-icon-sort-numeric-down>
+            <b-icon-sort-numeric-up v-else></b-icon-sort-numeric-up>
+          </b-button>
+          <b-button variant="danger" @click="confirmBulkDelete()"
+            v-if="bulkDelete"><b-icon-trash></b-icon-trash></b-button>
+          <b-button variant="success" v-if="showCreateBtn" @click="createItem()" :disabled="loading">
+            <b-icon-plus></b-icon-plus>{{ messageNew }}
+          </b-button>
+          <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="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">
+            <b-input-group>
+              <b-input-group-prepend>
+                <b-button variant="info" @click="displaySearch = !displaySearch"
+                  :class="{ open: displaySearch }"><b-icon-search></b-icon-search></b-button>
+              </b-input-group-prepend>
+              <b-form-input v-if="displaySearch" v-model="search" class="pl-2" type="search" required
+                :placeholder="searchPlaceholder" debounce="500"></b-form-input>
+            </b-input-group>
+
+            <slot name="tableActionsAppend" v-bind:loading="loading"> </slot>
+          </div>
+        </slot>
+      </b-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import CrudFilters from './CrudFilters.vue';
+
+export default {
+  name: 'CrudHeader',
+  components: {
+    CrudFilters
+  },
+  inject: [
+    'showHeader',
+    'showTitle',
+    'title',
+    'filterSidebarOpen',
+    'showImport',
+    'showExport',
+    'showPrincipalSortBtn',
+    'principalSort',
+    'bulkDelete',
+    'showCreateBtn',
+    'enableFilters',
+    'displayModeToggler',
+    'displayMode',
+    'displayModes',
+    'showSearch',
+    'displaySearch',
+    'search',
+    'searchPlaceholder',
+    'loading',
+    'messageImport',
+    'messageExport',
+    'messageNew',
+    'createItem',
+    'toggleDisplayMode',
+    'togglePrincipalSort',
+    'confirmBulkDelete',
+    'toggleFilters',
+    'refresh',
+    'showImportModal',
+    'showExportModal'
+  ],
+  computed: {
+    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: {
+    closeSidebar() {
+      if (this.filterSidebarOpen) {
+        this.toggleFilters();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.crud-header {
+  display: flex;
+  justify-content: space-between;
+  max-height: 3rem;
+}
+
+.crud-title {
+  margin: 0;
+}
+
+.crud-search {
+  max-width: 15rem;
+}
+
+.crud-search .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.crud-search .btn.open {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.table-options {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

package/src/components/CrudKanban.vue

@@ -1,36 +1,36 @@
-<template>
-  <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>
-
-<script>
-import KanbanBoard from './kanban/KanbanBoard.vue';
-
-export default {
-  name: 'CrudKanban',
-  components: {
-    KanbanBoard
-  },
-  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>
+<template>
+  <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>
+
+<script>
+import KanbanBoard from './kanban/KanbanBoard.vue';
+
+export default {
+  name: 'CrudKanban',
+  components: {
+    KanbanBoard
+  },
+  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>

package/src/components/CrudModals.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- Modal de formulario -->
     <b-modal :id="'modal-form-item-' + modelName" hide-footer size="xl" :title="title" no-close-on-backdrop>
-      <b-overlay :show="loading" rounded="sm">
+      <b-overlay :show="loadingValue" rounded="sm">
         <template v-if="validate">
           <form @submit="saveItem">
             <template v-if="reactiveItem">
@@ -12,8 +12,8 @@
                 </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 block type="submit" variant="success" :disabled="loadingValue">
+              <b-spinner small v-if="loadingValue"></b-spinner>{{ messageSave }}
             </b-button>
           </form>
         </template>
@@ -25,8 +25,8 @@
               </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 block type="submit" variant="success" :disabled="loadingValue" @click="saveItem()">
+            <b-spinner small v-if="loadingValue"></b-spinner>{{ messageSave }}
           </b-button>
         </template>
       </b-overlay>
@@ -51,13 +51,13 @@
     <!-- Modal de importación -->
     <b-modal ref="modal-import" title="Importar" hide-footer v-if="showImport">
       <slot name="import" v-bind:item="item" v-if="item">
-        <b-overlay :show="loading" rounded="sm">
+        <b-overlay :show="loadingValue" rounded="sm">
           <b-form-file v-model="fileImport" :state="Boolean(fileImport)" browse-text="Explorar"
             placeholder="Importar..." drop-placeholder="Arrastrar Archivo aquí..."></b-form-file>
           <div class="text-center mt-3">
-            <b-button variant="info" v-on:click="importItems()" :disabled="loading">
+            <b-button variant="info" v-on:click="importItems()" :disabled="loadingValue">
               <b-icon-cloud-upload></b-icon-cloud-upload>
-              {{ loading ? "Cargando..." : "Importar" }}
+              {{ loadingValue ? "Cargando..." : "Importar" }}
             </b-button>
           </div>
         </b-overlay>
@@ -67,20 +67,36 @@
     <!-- Modal de exportación -->
     <b-modal ref="modal-export" title="Exportar" hide-footer v-if="showExport">
       <slot name="export" v-bind:item="item" v-if="item">
-        <b-overlay :show="loading" rounded="sm">
+        <b-overlay :show="loadingValue" rounded="sm">
 
           <p v-if="selectedItems.length">Se exportará {{ selectedItems.length }} elementos.</p>
           <p v-else>Se exportará la consulta actual.</p>
 
-          <select class="form-control" v-model="exportFormat">
-            <option value="JSON">JSON</option>
-            <option value="XLSX">XLSX</option>
-          </select>
+          <b-form-group label="Seleccione el formato de exportación:" class="mt-3">
+            <div class="export-format-options">
+              <b-form-radio
+                v-model="exportFormat"
+                value="JSON"
+                class="export-format-radio"
+              >
+                <b-icon-file-text class="mr-2"></b-icon-file-text>
+                JSON
+              </b-form-radio>
+              <b-form-radio
+                v-model="exportFormat"
+                value="XLSX"
+                class="export-format-radio"
+              >
+                <b-icon-table class="mr-2"></b-icon-table>
+                XLSX
+              </b-form-radio>
+            </div>
+          </b-form-group>
 
           <div class="text-center mt-3">
-            <b-button variant="info" v-on:click="exportItems()" :disabled="loading">
+            <b-button variant="info" v-on:click="exportItems()" :disabled="loadingValue">
               <b-icon-cloud-upload></b-icon-cloud-upload>
-              {{ loading ? "Cargando..." : "Exportar" }}
+              {{ loadingValue ? "Cargando..." : "Exportar" }}
             </b-button>
           </div>
         </b-overlay>
@@ -118,6 +134,10 @@ export default {
       }
       // Si no, usar el item inyectado directamente
       return this.item;
+    },
+    // Computed property para manejar loading como objeto reactivo o booleano
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
     }
   },
   watch: {
@@ -132,3 +152,66 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.export-format-options {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.export-format-radio {
+  flex: 1;
+  min-width: 150px;
+  padding: 1rem;
+  border: 2px solid #dee2e6;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+.export-format-radio:hover {
+  border-color: #007bff;
+  background-color: #f8f9fa;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
+}
+
+.export-format-radio >>> .custom-control-input:checked ~ .custom-control-label {
+  color: #007bff;
+  font-weight: 600;
+}
+
+.export-format-radio >>> .custom-control-input:checked ~ .custom-control-label::before {
+  border-color: #007bff;
+  background-color: #007bff;
+}
+
+.export-format-radio >>> .custom-control-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.export-format-radio >>> .custom-control-label::before {
+  margin-right: 0.5rem;
+}
+
+.export-format-radio >>> svg {
+  font-size: 1.5rem;
+  color: #495057;
+}
+
+.export-format-radio >>> .custom-control-input:checked ~ .custom-control-label svg {
+  color: #007bff;
+}
+</style>