grav-svelte 0.0.53 → 0.0.55

package/dist/CRUD/CrudWrapper.svelte

@@ -22,6 +22,7 @@
     export let Titulo_Crud: string;
     export let dragEnabled: boolean = false;
     export let orderField: string = "inOrden";
+    export let minHeightScreen: boolean = false;
 
     // Event handlers from parent
     export let onFilter: (filters: FiltrosI[]) => void;
@@ -67,14 +68,23 @@
         onFilter(Filtros);
     }
 
+    function generateFileName(title: string): string {
+        const today = new Date();
+        const dateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD
+        const cleanTitle = title.replace(/[^a-zA-Z0-9\s]/g, ''); // Remove special chars
+        return `${cleanTitle} - ${dateStr}`;
+    }
+
     function handleExport(type: "excel" | "pdf") {
         const table = document.querySelector("table");
         if (!table) return;
 
+        const fileName = generateFileName(Titulo_Crud);
+
         if (type === "excel") {
-            html_table_to_excel("xlsx", "Date Report", table);
+            html_table_to_excel("xlsx", fileName, table);
         } else {
-            createPDF(table);
+            createPDF(table, fileName);
         }
     }
 
@@ -89,7 +99,7 @@
     }
 </script>
 
-<div class="crud-wrapper">
+<div class="crud-wrapper" class:min-height-screen={minHeightScreen}>
     <CrudFilters
         bind:PageSize
         bind:Filtros
@@ -138,6 +148,10 @@
 
 <style>
     .crud-wrapper {
+        min-height: auto;
+    }
+
+    .crud-wrapper.min-height-screen {
         min-height: 100vh;
     }
 

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

@@ -16,6 +16,7 @@ declare const __propDef: {
         Titulo_Crud: string;
         dragEnabled?: boolean;
         orderField?: string;
+        minHeightScreen?: boolean;
         onFilter: (filters: FiltrosI[]) => void;
         onAdd: () => void;
         onImport?: (() => void) | undefined;

package/dist/CRUD/PaginationCRUD.css

@@ -0,0 +1,106 @@
+/* Pagination CRUD Styles */
+.pagination-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    padding-bottom: 0;
+}
+
+.pagination-button {
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: var(--grav-crud-button-border-radius, 0.5rem);
+    border-width: var(--grav-crud-button-border-width, 1.5px);
+    border-style: solid;
+    font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
+    font-size: var(--grav-crud-button-font-size, 0.875rem);
+    font-weight: var(--grav-crud-button-font-weight, 500);
+    line-height: var(--grav-crud-button-line-height, 1.5);
+    transition: all 0.2s ease;
+    background-color: transparent;
+}
+
+.pagination-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.pagination-button-nav {
+    border-color: var(--grav-crud-color-neutral);
+    color: var(--grav-crud-color-neutral);
+    background-color: transparent;
+    font-size: var(--grav-crud-header-font-size, 0.75rem);
+    font-weight: var(--grav-crud-header-font-weight, 600);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.pagination-button-nav:hover:not(:disabled) {
+    background-color: var(--grav-crud-color-neutral);
+    color: var(--grav-crud-color-button);
+}
+
+.pagination-button-nav.first {
+    margin-right: auto;
+}
+
+.pagination-button-nav.last {
+    margin-left: auto;
+}
+
+.pagination-button-page {
+    padding: 0.25rem;
+    width: 2rem;
+    text-align: center;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: transparent;
+    margin-right: 0.25rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    color: var(--grav-crud-color-neutral);
+    background-color: transparent;
+}
+
+.pagination-button-page:hover {
+    background-color: var(--grav-crud-color-light);
+}
+
+.pagination-button-page.active {
+    border-bottom-color: var(--grav-crud-color-neutral);
+}
+
+.pagination-button-arrow {
+    border: none;
+    background-color: transparent;
+    color: var(--grav-crud-color-neutral);
+}
+
+.pagination-button-arrow:hover:not(:disabled) {
+    background-color: var(--grav-crud-color-light);
+}
+
+.pagination-ellipsis {
+    padding: 0 0.5rem;
+    color: var(--grav-crud-color-neutral);
+    font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
+    font-size: var(--grav-crud-button-font-size, 0.875rem);
+}
+
+.pagination-info-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.5rem 0;
+}
+
+.pagination-info {
+    font-family: var(--grav-crud-cell-font-family, 'mundial', sans-serif);
+    font-size: var(--grav-crud-cell-font-size, 0.875rem);
+    font-weight: var(--grav-crud-cell-font-weight, 400);
+    line-height: var(--grav-crud-cell-line-height, 1.5);
+    color: var(--grav-crud-color-neutral);
+}

package/dist/CRUD/PaginationCRUD.svelte

@@ -1,11 +1,12 @@
 <script>
     import { createEventDispatcher } from "svelte";
+    import "./PaginationCRUD.css";
+    import "../typography.css";
     const dispatch = createEventDispatcher();
 
     export let perPage;
     export let totalRows;
     export let currentPage = 1;
-    export let theme = "black";
 
     $: totalPages = Math.ceil(totalRows / perPage);
     $: start = (currentPage - 1) * perPage;
@@ -25,24 +26,24 @@
 </script>
 
 {#if totalRows && totalRows > perPage}
-    <div class="flex items-center justify-center p-3 pb-0">
+    <div class="pagination-container">
         <button
             on:click={() => handlePageChange(1)}
             disabled={currentPage === 1}
-            class="mr-auto p-2 text-xs hover:bg-black hover:text-white bg-white text-black border border-black tracking-wider rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            class="pagination-button pagination-button-nav first"
             aria-label="Go to first page"
         >
-            <i class="fas fa-chevron-left" />
-            <i class="fas fa-chevron-left" />
+            <i class="fas fa-chevron-left"></i>
+            <i class="fas fa-chevron-left"></i>
         </button>
 
         <button
             on:click={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
-            class="p-2 hover:bg-gray-100 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            class="pagination-button pagination-button-arrow"
             aria-label="Go to previous page"
         >
-            <i class="fas fa-chevron-left" />
+            <i class="fas fa-chevron-left"></i>
         </button>
 
         {#each Array(totalPages) as _, i}
@@ -50,53 +51,41 @@
             {#if shouldShowPage(pageNum)}
                 <button
                     on:click={() => handlePageChange(pageNum)}
-                    class="p-1 w-8 text-center border-b-2 hover:bg-gray-200 cursor-pointer mr-1 {pageNum ===
-                    currentPage
-                        ? 'border-black'
-                        : ''}"
+                    class="pagination-button pagination-button-page {pageNum === currentPage ? 'active' : ''}"
                     aria-label="Go to page {pageNum}"
                     aria-current={pageNum === currentPage ? "page" : undefined}
                 >
                     {pageNum}
                 </button>
             {:else if shouldShowPage(i) && !shouldShowPage(i + 1)}
-                <span class="px-2">...</span>
+                <span class="pagination-ellipsis">...</span>
             {/if}
         {/each}
 
         <button
             on:click={() => handlePageChange(currentPage + 1)}
             disabled={currentPage === totalPages}
-            class="p-2 hover:bg-gray-100 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            class="pagination-button pagination-button-arrow"
             aria-label="Go to next page"
         >
-            <i class="fas fa-chevron-right" />
+            <i class="fas fa-chevron-right"></i>
         </button>
 
         <button
             on:click={() => handlePageChange(totalPages)}
             disabled={currentPage === totalPages}
-            class="ml-auto p-2 text-xs hover:bg-black hover:text-white bg-white text-black border border-black tracking-wider rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            class="pagination-button pagination-button-nav last"
             aria-label="Go to last page"
         >
-            <i class="fas fa-chevron-right" />
-            <i class="fas fa-chevron-right" />
+            <i class="fas fa-chevron-right"></i>
+            <i class="fas fa-chevron-right"></i>
         </button>
     </div>
 {/if}
 
-<div
-    class="flex items-center justify-center my-2 {theme === 'black'
-        ? 'texto-pagination'
-        : 'text-white'}"
->
-    <p class="text-sm">
+<div class="pagination-info-container">
+    <p class="pagination-info">
         Mostrando: {start + 1} - {end + 1} de {totalRows} registros
     </p>
 </div>
 
-<style>
-    .texto-pagination {
-        color: var(--grav-crud-color-neutral);
-    }
-</style>

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

@@ -5,7 +5,6 @@ export default class PaginationCrud extends SvelteComponentTyped<{
     perPage: any;
     totalRows: any;
     currentPage?: number | undefined;
-    theme?: string | undefined;
 }, {
     pageChange: CustomEvent<any>;
 } & {
@@ -21,7 +20,6 @@ declare const __propDef: {
         perPage: any;
         totalRows: any;
         currentPage?: number | undefined;
-        theme?: string | undefined;
     };
     events: {
         pageChange: CustomEvent<any>;

package/dist/generics.d.ts

@@ -1,2 +1,6 @@
 export function html_table_to_excel(type: any, nombreArchivo: any, tablaExport: any): void;
-export function createPDF(tablaExport: any): void;
+/**
+ * @param {HTMLElement} tablaExport
+ * @param {string} nombreArchivo
+ */
+export function createPDF(tablaExport: HTMLElement, nombreArchivo?: string): void;

package/dist/generics.js

@@ -27,7 +27,11 @@ function html_table_to_excel(type, nombreArchivo, tablaExport) {
     XLSX.writeFile(workbook, `${nombreArchivo}.${type}`);
 }
 
-function createPDF(tablaExport) {
+/**
+ * @param {HTMLElement} tablaExport
+ * @param {string} nombreArchivo
+ */
+function createPDF(tablaExport, nombreArchivo = "PDF") {
     // Crear un nuevo contenido solo con los datos limpios
     let cleanTable = "<table>";
 
@@ -55,7 +59,7 @@ function createPDF(tablaExport) {
 
     // Crear una nueva ventana para el contenido limpio
     const win = window.open("", "", "height=700,width=700");
-    win.document.write("<html><head><title>PDF</title>");
+    win.document.write(`<html><head><title>${nombreArchivo}</title>`);
     win.document.write(style); // Agregar estilos
     win.document.write("</head><body>");
     win.document.write(cleanTable); // Insertar la tabla limpia

package/package.json

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