grav-svelte 0.1.239 → 0.1.241

package/dist/CRUD/CrudFilters.svelte

@@ -35,6 +35,7 @@
     export let labelLimpiar: string = 'Limpiar';
     export let tooltipFiltrar: string = 'Aplicar filtro';
     export let labelFiltrar: string = 'Filtrar';
+    export let labelMostrando: string = 'Showing:';
 
     // Dynamic grid columns calculation
     $: gridColumns = Math.min(Filtros.length, 6);
@@ -348,7 +349,7 @@
             {#if showMostrandoInput}
                 <div class="filter-item">
                     <InputFormText
-                        label="Mostrando:"
+                        label={labelMostrando}
                         bind:valueVar={localPageSizeStr}
                     />
                 </div>

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         labelLimpiar?: string;
         tooltipFiltrar?: string;
         labelFiltrar?: string;
+        labelMostrando?: string;
     };
     events: {
         add: CustomEvent<any>;

package/dist/CRUD/CrudTableButtons.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ButtonConfig } from "./interfaces.js";
   import Tooltip from "./Tooltip.svelte";
-  import { onMount, afterUpdate, onDestroy } from "svelte";
 
   export let id = 1;
   export let buttonsConfig: ButtonConfig[];
@@ -14,138 +13,9 @@
     event.stopPropagation();
     button.action(id, row);
   }
-
-  // Prevenir que Font Awesome procese iconos múltiples veces
-  function preventIconDuplication(element: HTMLElement) {
-    if (!element) return;
-
-    const buttons = element.querySelectorAll("button");
-    buttons.forEach((button) => {
-      // Buscar todos los iconos (tanto <i> como SVGs generados por Font Awesome)
-      const iconElements = button.querySelectorAll(
-        'i[class*="fa-"], svg[data-icon]',
-      );
-      const iconClasses = new Set<string>();
-
-      iconElements.forEach((icon, index) => {
-        const iconClass = icon.getAttribute("class") || "";
-        const faClasses = iconClass.split(" ").filter((c) => c.startsWith("fa-"));
-
-        // Si es un elemento <i> con clase fa-
-        if (icon.tagName === "I" && faClasses.length > 0) {
-          const iconName = faClasses[faClasses.length - 1];
-          const existingSvg =
-            button.querySelector(`svg[data-icon="${iconName}"]`) ||
-            button.querySelector(`svg[data-icon="${iconName.replace(/^fa-/, "")}"]`);
-
-          if (existingSvg) {
-            icon.remove();
-            return;
-          }
-
-          const faKey = faClasses.join(" ");
-          if (!iconClasses.has(faKey)) {
-            iconClasses.add(faKey);
-            icon.setAttribute("data-fa-processed", "true");
-            icon.setAttribute("data-fa-i2svg-processed", "true");
-          } else {
-            icon.remove();
-          }
-        }
-
-        // Si es un SVG duplicado (más de uno con el mismo data-icon)
-        if (icon.tagName === "SVG") {
-          const dataIcon = icon.getAttribute("data-icon");
-          if (dataIcon) {
-            const existingSvgs = button.querySelectorAll(
-              `svg[data-icon="${dataIcon}"]`,
-            );
-            if (existingSvgs.length > 1) {
-              // Mantener solo el primero, eliminar los demás
-              for (let i = 1; i < existingSvgs.length; i++) {
-                existingSvgs[i].remove();
-              }
-            }
-          }
-        }
-      });
-
-      // Limpiar iconos <i> que ya tienen SVG correspondiente
-      const allIcons = button.querySelectorAll('i[class*="fa-"]');
-      allIcons.forEach((icon) => {
-        const iconClass = icon.getAttribute("class") || "";
-        const faClasses = iconClass.split(" ").filter((c) => c.startsWith("fa-"));
-        if (faClasses.length > 0) {
-          const iconName = faClasses[faClasses.length - 1];
-          const svg =
-            button.querySelector(`svg[data-icon="${iconName}"]`) ||
-            button.querySelector(`svg[data-icon="${iconName.replace(/^fa-/, "")}"]`);
-          if (svg) {
-            icon.remove();
-          }
-        }
-      });
-    });
-  }
-
-  let buttonGroupElement: HTMLDivElement;
-  let mutationObserver: MutationObserver | null = null;
-
-  onMount(() => {
-    if (buttonGroupElement) {
-      preventIconDuplication(buttonGroupElement);
-
-      // Observar cambios en el DOM para detectar cuando Font Awesome agrega SVGs
-      mutationObserver = new MutationObserver((mutations) => {
-        let shouldClean = false;
-        mutations.forEach((mutation) => {
-          if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-            mutation.addedNodes.forEach((node) => {
-              if (node.nodeType === 1) {
-                // Element node
-                const element = node as Element;
-                if (element.tagName === "SVG" || element.querySelector("svg")) {
-                  shouldClean = true;
-                }
-              }
-            });
-          }
-        });
-
-        if (shouldClean) {
-          // Usar setTimeout para evitar procesar múltiples veces en el mismo ciclo
-          setTimeout(() => {
-            preventIconDuplication(buttonGroupElement);
-          }, 0);
-        }
-      });
-
-      mutationObserver.observe(buttonGroupElement, {
-        childList: true,
-        subtree: true,
-      });
-    }
-  });
-
-  afterUpdate(() => {
-    if (buttonGroupElement) {
-      // Usar setTimeout para evitar procesar en medio de una actualización
-      setTimeout(() => {
-        preventIconDuplication(buttonGroupElement);
-      }, 0);
-    }
-  });
-
-  // Limpiar el observer cuando el componente se destruya
-  onDestroy(() => {
-    if (mutationObserver) {
-      mutationObserver.disconnect();
-      mutationObserver = null;
-    }
-  });
 </script>
 
-<div class="button-group" role="group" bind:this={buttonGroupElement}>
+<div class="button-group" role="group">
   {#each visibleButtons as button, i (button.icon + id + i)}
     <Tooltip text={button.tooltip}>
       <button

package/dist/CRUD/CrudWrapper.svelte

@@ -32,6 +32,9 @@
     export let labelLimpiar: string = 'Limpiar';
     export let tooltipFiltrar: string = 'Aplicar filtro';
     export let labelFiltrar: string = 'Filtrar';
+    export let labelMostrando: string = 'Mostrando:';
+    export let labelDe: string = 'de';
+    export let labelRegistros: string = 'registros';
     export let dragEnabled: boolean = false;
     export let orderField: string = "inOrden";
     export let minHeightScreen: boolean = false;
@@ -159,6 +162,7 @@
         {labelLimpiar}
         {tooltipFiltrar}
         {labelFiltrar}
+        {labelMostrando}
     />
     </div>
     <div class="crud-table-container crud-anim-item crud-anim-table">
@@ -182,6 +186,9 @@
             {totalRows}
             bind:currentPage
             on:pageChange={handlePageChange}
+            {labelMostrando}
+            {labelDe}
+            {labelRegistros}
         />
     </div>
 

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

@@ -26,6 +26,9 @@ declare const __propDef: {
         labelLimpiar?: string;
         tooltipFiltrar?: string;
         labelFiltrar?: string;
+        labelMostrando?: string;
+        labelDe?: string;
+        labelRegistros?: string;
         dragEnabled?: boolean;
         orderField?: string;
         minHeightScreen?: boolean;

package/dist/CRUD/PaginationCRUD.svelte

@@ -7,6 +7,9 @@
     export let perPage;
     export let totalRows;
     export let currentPage = 1;
+    export let labelMostrando = 'Showing:';
+    export let labelDe = 'of';
+    export let labelRegistros = 'records';
 
     $: totalPages = Math.ceil(totalRows / perPage);
     $: start = (currentPage - 1) * perPage;
@@ -85,7 +88,7 @@
 
 <div class="pagination-info-container">
     <p class="pagination-info">
-        Mostrando: {start + 1} - {end + 1} de {totalRows} registros
+        {labelMostrando} {start + 1} - {end + 1} {labelDe} {totalRows} {labelRegistros}
     </p>
 </div>
 

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

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

package/dist/Inputs/InputFormNumber.svelte

@@ -26,6 +26,7 @@
       bind:value={valueVar}
       placeholder=" "
       class="input-field"
+      on:wheel|preventDefault={() => {}}
     />
 
     <label for={inputId} class="input-label"

package/dist/Inputs/InputFormSelect.svelte

@@ -21,6 +21,8 @@
   export let onPlusClick: () => void = () => {};
   export let multiple = false;
   export let placeholder: string | undefined = undefined;
+  export let placeholderSingle: string = "Seleccione una opción";
+  export let placeholderMultiple: string = "Seleccione opciones";
 
   let containerEl: HTMLDivElement;
 
@@ -130,7 +132,7 @@
       class="select-input"
       inputStyles="font-size: 16px; color: currentColor !important; background-color: transparent;"
       containerStyles="font-size: 16px; background-color: transparent; border: var(--grav-crud-input-border-width) solid currentColor; border-radius: 0.5rem;"
-      placeholder={placeholder ?? (multiple ? "Seleccione opciones" : "Seleccione una opción")}
+      placeholder={placeholder ?? (multiple ? placeholderMultiple : placeholderSingle)}
       --placeholder-color="currentColor"
       --chevron-color="currentColor"
       --item-color="black"

package/dist/Inputs/InputFormSelect.svelte.d.ts

@@ -25,6 +25,8 @@ declare const __propDef: {
         onPlusClick?: () => void;
         multiple?: boolean;
         placeholder?: string | undefined;
+        placeholderSingle?: string;
+        placeholderMultiple?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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