grav-svelte 0.1.248 → 0.1.249

package/dist/CRUD/CrudFilters.css

@@ -215,6 +215,29 @@
   color: var(--grav-crud-color-bg);
 }
 
+/* Botones extra (customButtons) con badge de conteo en la esquina superior derecha */
+.custom-button {
+  position: relative;
+}
+
+.custom-button-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  padding: 0 0.25rem;
+  background-color: #dc2626;
+  color: #fff;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 800;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .filter-apply-button {
   display: inline-flex;
   align-items: center;

package/dist/CRUD/CrudFilters.svelte

@@ -11,7 +11,7 @@
     import Tooltip from "./Tooltip.svelte";
 
     import { createEventDispatcher, onMount, tick } from "svelte";
-    import type { FiltrosI } from "./interfaces.js";
+    import type { FiltrosI, CustomButtonI } from "./interfaces.js";
     const dispatch = createEventDispatcher();
 
     export let PageSize = 50;
@@ -26,6 +26,8 @@
     export let showImportButton: boolean = true;
     export let showSettingsButton: boolean = false;
     export let showMostrandoInput: boolean = true;
+    /** Botones extra (con badge opcional) que se agregan a la barra de acciones. */
+    export let customButtons: CustomButtonI[] = [];
     export let Titulo_Crud: string;
     export let tooltipAgregar: string = 'Agregar';
     export let tooltipImportarExcel: string = 'Importar Excel';
@@ -270,6 +272,20 @@
                         </button>
                     </Tooltip>
                 {/if}
+                {#each customButtons as btn}
+                    <Tooltip text={btn.tooltip ?? ''}>
+                        <button
+                            type="button"
+                            on:click={btn.onClick}
+                            class="filter-button custom-button"
+                        >
+                            <i class={btn.icon}></i>
+                            {#if btn.badge && btn.badge > 0}
+                                <span class="custom-button-badge">{btn.badge}</span>
+                            {/if}
+                        </button>
+                    </Tooltip>
+                {/each}
                 <slot name="headerActions" />
             </div>
             <!-- Show Filters Button -->

package/dist/CRUD/CrudFilters.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import "./CrudFilters.css";
 import "../typography.css";
-import type { FiltrosI } from "./interfaces.js";
+import type { FiltrosI, CustomButtonI } from "./interfaces.js";
 declare const __propDef: {
     props: {
         PageSize?: number;
@@ -10,6 +10,7 @@ declare const __propDef: {
         showImportButton?: boolean;
         showSettingsButton?: boolean;
         showMostrandoInput?: boolean;
+        /** Botones extra (con badge opcional) que se agregan a la barra de acciones. */ customButtons?: CustomButtonI[];
         Titulo_Crud: string;
         tooltipAgregar?: string;
         tooltipImportarExcel?: string;

package/dist/CRUD/CrudWrapper.svelte

@@ -5,6 +5,7 @@
     import type {
         FiltrosI,
         TableHeader,
+        CustomButtonI,
     } from "./interfaces.js";
     import PaginationCrud from "./PaginationCRUD.svelte";
 
@@ -23,6 +24,8 @@
     export let showPdfButton: boolean = true;
     export let showSettingsButton: boolean = false;
     export let showMostrandoInput: boolean = true;
+    /** Botones extra (con badge opcional) para la barra de acciones del Crud. */
+    export let customButtons: CustomButtonI[] = [];
     export let Titulo_Crud: string;
     export let tooltipAgregar: string = 'Agregar';
     export let tooltipImportarExcel: string = 'Importar Excel';
@@ -153,6 +156,7 @@
         {showImportButton}
         {showSettingsButton}
         {showMostrandoInput}
+        {customButtons}
         {Titulo_Crud}
         {tooltipAgregar}
         {tooltipImportarExcel}

package/dist/CRUD/CrudWrapper.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FiltrosI, TableHeader } from "./interfaces.js";
+import type { FiltrosI, TableHeader, CustomButtonI } from "./interfaces.js";
 declare const __propDef: {
     props: {
         Filtros: FiltrosI[];
@@ -17,6 +17,7 @@ declare const __propDef: {
         showPdfButton?: boolean;
         showSettingsButton?: boolean;
         showMostrandoInput?: boolean;
+        /** Botones extra (con badge opcional) para la barra de acciones del Crud. */ customButtons?: CustomButtonI[];
         Titulo_Crud: string;
         tooltipAgregar?: string;
         tooltipImportarExcel?: string;

package/dist/CRUD/interfaces.d.ts

@@ -8,6 +8,20 @@ export interface ButtonConfig {
      */
     show?: boolean;
 }
+/**
+ * Botón extra para la barra de acciones del CrudWrapper (junto a "Ver filtros" y configuración).
+ * Se renderiza con el mismo estilo nativo (.filter-button) y muestra un badge de conteo si `badge > 0`.
+ */
+export interface CustomButtonI {
+    /** Clase de icono font-awesome, ej. 'fas fa-pause'. */
+    icon: string;
+    /** Texto del tooltip al pasar el mouse. */
+    tooltip?: string;
+    /** Si es > 0 se muestra el globito de conteo en la esquina del botón. */
+    badge?: number;
+    /** Acción al hacer click. */
+    onClick: () => void;
+}
 export interface TableHeader {
     titulo: string;
     biSort: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grav-svelte",
-  "version": "0.1.248",
+  "version": "0.1.249",
   "description": "A collection of Svelte components",
   "license": "MIT",
   "scripts": {