grav-svelte 0.0.85 → 0.0.88

package/dist/CRUD/CrudFilters.css

@@ -54,6 +54,13 @@
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+@media (min-width: 640px) {
+    .filters-actions {
+        margin-top: 0;
+    }
 }
 
 .filters-controls {
@@ -106,7 +113,7 @@
 
 .filter-group {
     display: inline-flex;
-    gap: 0.2rem;
+    gap: 0.5rem;
     padding: 0.5rem;
 }
 
@@ -121,27 +128,39 @@
 .filter-button {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     cursor: pointer;
     height: 2.5rem;
     font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
-    font-size: var(--grav-crud-button-font-size, 0.875rem);
+    font-size: 1.1rem;
     font-weight: var(--grav-crud-button-font-weight, 500);
     line-height: var(--grav-crud-button-line-height, 1.5);
     border-width: var(--grav-crud-filter-border-width, 1.5px);
     border-style: solid;
     border-color: var(--grav-crud-color-neutral);
     color: var(--grav-crud-color-neutral);
-    border-radius: var(--grav-crud-filter-border-radius, 0.5rem) 0 0 var(--grav-crud-filter-border-radius, 0.5rem);
-    padding: 0.8rem;
+    border-radius: var(--grav-crud-filter-border-radius, 0.5rem);
+    padding: 0.75rem 1rem;
 }
 
 @media (min-width: 640px) {
     .filter-button {
         padding: 0.75rem 1rem;
-        font-size: 0.875rem;
+        font-size: 1.2rem;
     }
 }
 
+.filter-button-active {
+    background-color: var(--grav-crud-color-neutral);
+    color: var(--grav-crud-color-bg);
+}
+
+.filters-actions {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
 .filter-button-middle {
     border-radius: 0;
 }

package/dist/CRUD/CrudFilters.svelte

@@ -24,6 +24,7 @@
     export let Filtros: FiltrosI[];
     export let showAddButton: boolean = true;
     export let showImportButton: boolean = true;
+    export let showSettingsButton: boolean = false;
     export let showMostrandoInput: boolean = true;
     export let Titulo_Crud: string;
 
@@ -181,108 +182,41 @@
             <div class="filter-group" role="group">
                 {#if Filtros && Filtros.length > 0}
                     {#if showFilters}
-                        <button
-                            type="button"
-                            on:click={() => (showFilters = !showFilters)}
-                            class="filter-button"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="mr-1"
+                        <Tooltip text="Ver filtros">
+                            <button
+                                type="button"
+                                on:click={() => (showFilters = !showFilters)}
+                                class="filter-button filter-button-active"
                             >
-                                <polygon
-                                    points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
-                                ></polygon>
-                            </svg>
-                            {showFilters ? "▲" : "▼"}
-                        </button>
+                                <i class="fa-solid fa-sliders"></i>
+                            </button>
+                        </Tooltip>
                     {:else}
-                        <button
-                            type="button"
-                            on:click={() => (showFilters = !showFilters)}
-                            class="filter-button"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                class="mr-1"
+                        <Tooltip text="Ver filtros">
+                            <button
+                                type="button"
+                                on:click={() => (showFilters = !showFilters)}
+                                class="filter-button"
                             >
-                                <polygon
-                                    points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
-                                ></polygon>
-                            </svg>
-                            {showFilters ? "▲" : "▼"}
-                        </button>
+                                <i class="fa-solid fa-sliders"></i>
+                            </button>
+                        </Tooltip>
                     {/if}
-
-                    <!-- Btn de aplicar filtro -->
-                    <Tooltip text="Aplicar filtro">
-                        <!-- svelte-ignore a11y_consider_explicit_label -->
-                        <button
-                            type="button"
-                            on:click={() => actualizarFiltro()}
-                            class="filter-button filter-button-middle"
-                            aria-label="Aplicar filtros"
-                        >
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </Tooltip>
-
-                    <!-- Btn de limpiar filtros -->
-                    <Tooltip text="Borrar filtro">
-                        <!-- svelte-ignore a11y_consider_explicit_label -->
+                {/if}
+                {#if showSettingsButton}
+                    <Tooltip text="Configuración">
                         <button
                             type="button"
-                            on:click={() => clearFilters()}
-                            class="filter-button filter-button-right"
+                            on:click={() => dispatch("settings")}
+                            class="filter-button"
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <polyline points="3 6 5 6 21 6"></polyline>
-                                <path
-                                    d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-                                ></path>
-                            </svg>
+                            <i class="fas fa-cog"></i>
                         </button>
                     </Tooltip>
                 {/if}
             </div>
 
-            <!-- Filtro 2 -->
-            {#if showMostrandoInput}
-                <div class="page-size-input">
-                    <InputFormText
-                        label="Mostrando:"
-                        bind:valueVar={localPageSizeStr}
-                        noMarginTop={true}
-                    />
-                </div>
-            {/if}
-            <!-- /Filtro 2 -->
+
         </div>
     </div>
     <!-- Filtros Dynamic -->
@@ -352,6 +286,42 @@
                     </div>
                 {/if}
             {/each}
+            <!-- Filtro 2 -->
+            {#if showMostrandoInput}
+            
+                <div class="filter-item ">
+                    <InputFormText
+                        label="Mostrando:"
+                        bind:valueVar={localPageSizeStr}
+                    />
+                </div>
+            {/if}
+            <!-- /Filtro 2 -->
+        </div>
+        <!-- Btn de aplicar filtro -->
+        <div class="filters-actions">
+            <!-- Btn de limpiar filtros -->
+            <Tooltip text="Borrar filtro">
+                <!-- svelte-ignore a11y_consider_explicit_label -->
+                <button
+                    type="button"
+                    on:click={() => clearFilters()}
+                    class="filter-button"
+                >
+                    Limpiar
+                </button>
+            </Tooltip>
+            <Tooltip text="Aplicar filtro">
+                <!-- svelte-ignore a11y_consider_explicit_label -->
+                <button
+                    type="button"
+                    on:click={() => actualizarFiltro()}
+                    class="filter-button"
+                    aria-label="Aplicar filtros"
+                >
+                    Filtrar
+                </button>
+            </Tooltip>
         </div>
     {/if}
 </div>

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

@@ -8,12 +8,14 @@ declare const __propDef: {
         Filtros: FiltrosI[];
         showAddButton?: boolean;
         showImportButton?: boolean;
+        showSettingsButton?: boolean;
         showMostrandoInput?: boolean;
         Titulo_Crud: string;
     };
     events: {
         add: CustomEvent<any>;
         import: CustomEvent<any>;
+        settings: CustomEvent<any>;
         filtrar: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/CRUD/CrudTableButtons.svelte

@@ -49,7 +49,7 @@
         color: white;
         text-align: center;
         font-size: 0.75rem;
-        background-color: var(--grav-crud-color-icon-hover);
+        background-color: var(--grav-crud-color-tooltip);
         border-radius: var(--grav-crud-tooltip-border-radius, 0.25rem);
         top: -1.8rem;
         right: -2.5rem;

package/dist/CRUD/CrudWrapper.svelte

@@ -130,8 +130,10 @@
         on:filtrar={handleFiltroAplicado}
         on:add={handleAdd}
         on:import={handleImport}
+        on:settings={handleSettings}
         {showAddButton}
         {showImportButton}
+        {showSettingsButton}
         {showMostrandoInput}
         {Titulo_Crud}
     />
@@ -157,19 +159,8 @@
         />
     </div>
 
-    {#if showSettingsButton || showExcelButton || showPdfButton}
+    {#if showExcelButton || showPdfButton}
         <div class="export-buttons">
-            <div class="buttons-left">
-                {#if showSettingsButton}
-                    <button
-                        type="button"
-                        on:click={handleSettings}
-                        class="export-button settings-button"
-                    >
-                        <i class="fas fa-cog"></i>
-                    </button>
-                {/if}
-            </div>
             <div class="buttons-right">
                 {#if showExcelButton}
                     <button
@@ -214,10 +205,9 @@
         display: flex;
         gap: 1rem;
         margin-top: 1rem;
-        justify-content: space-between;
+        justify-content: flex-end;
     }
 
-    .buttons-left,
     .buttons-right {
         display: flex;
         gap: 1rem;
@@ -229,15 +219,15 @@
         color: white;
         padding: 1rem;
         border-radius: 0.25rem;
-        background-color: var(--grav-crud-color-neutral);
+        background-color: var(--grav-crud-color-bg);
         color: var(--grav-crud-color-button);
-        border: 1px solid var(--grav-crud-color-neutral);
+        border: 1px solid var(--grav-crud-color-bg);
     }
 
     .export-button:hover {
         transition: all 0.2s ease;
         background-color: transparent;
-        color: var(--grav-crud-color-neutral);
+        color: var(--grav-crud-color-bg);
     }
 
     .export-button i {

package/dist/CRUD/PaginationCRUD.css

@@ -13,7 +13,7 @@
     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-family: var(--grav-crud-button-font-family, var(--grav-font-family));
     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);
@@ -86,7 +86,7 @@
 .pagination-ellipsis {
     padding: 0 0.5rem;
     color: var(--grav-crud-color-neutral);
-    font-family: var(--grav-crud-button-font-family, 'mundial', sans-serif);
+    font-family: var(--grav-crud-button-font-family, var(--grav-font-family));
     font-size: var(--grav-crud-button-font-size, 0.875rem);
 }
 
@@ -98,7 +98,7 @@
 }
 
 .pagination-info {
-    font-family: var(--grav-crud-cell-font-family, 'mundial', sans-serif);
+    font-family: var(--grav-crud-cell-font-family, var(--grav-font-family));
     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);

package/dist/CRUD/Tooltip.svelte

@@ -31,7 +31,7 @@
         padding: 0.25rem;
         color: white;
         font-size: 0.75rem;
-        background-color: var(--grav-crud-color-icon-hover);
+        background-color: var(--grav-crud-color-tooltip);
         border-radius: var(--grav-crud-tooltip-border-radius, 0.25rem);
         top: -1.25rem;
         left: -1.5rem;

package/dist/CRUD/cells/CellRenderer.svelte

@@ -1,69 +1,74 @@
 <script lang="ts">
-    import type { TableHeader } from "../interfaces.js";
-    import CrudTableButtons from "../CrudTableButtons.svelte";
-    import TextCell from "./TextCell.svelte";
-    import DateCell from "./DateCell.svelte";
-    import BoolCell from "./BoolCell.svelte";
-    import EditableBoolCell from "./EditableBoolCell.svelte";
-    import EditableTextCell from "./EditableTextCell.svelte";
-    import EditableNumberCell from "./EditableNumberCell.svelte";
-    import ImageCell from "./ImageCell.svelte";
-    import DynamicButtonCell from "./DynamicButtonCell.svelte";
-    import ImageButtonCell from "./ImageButtonCell.svelte";
-    import DualTextButtonCell from "./DualTextButtonCell.svelte";
-    import ConditionalCell from "./ConditionalCell.svelte";
-    import MultiTextButtonCell from "./MultiTextButtonCell.svelte";
-    import ComponentCell from "./ComponentCell.svelte";
+  import type { TableHeader } from "../interfaces.js";
+  import CrudTableButtons from "../CrudTableButtons.svelte";
+  import TextCell from "./TextCell.svelte";
+  import TextAreaCell from "./TextAreaCell.svelte";
+  import DateCell from "./DateCell.svelte";
+  import BoolCell from "./BoolCell.svelte";
+  import EditableBoolCell from "./EditableBoolCell.svelte";
+  import EditableTextCell from "./EditableTextCell.svelte";
+  import EditableNumberCell from "./EditableNumberCell.svelte";
+  import ImageCell from "./ImageCell.svelte";
+  import DynamicButtonCell from "./DynamicButtonCell.svelte";
+  import ImageButtonCell from "./ImageButtonCell.svelte";
+  import DualTextButtonCell from "./DualTextButtonCell.svelte";
+  import ConditionalCell from "./ConditionalCell.svelte";
+  import MultiTextButtonCell from "./MultiTextButtonCell.svelte";
+  import ComponentCell from "./ComponentCell.svelte";
 
-    export let item: any;
-    export let header: TableHeader;
-    export let idField: string;
-    export let index: number;
-    export let dragEnabled: boolean;
-    export let expandEnabled: boolean;
-    export let onImageClick: (src: string) => void;
+  export let item: any;
+  export let header: TableHeader;
+  export let idField: string;
+  export let index: number;
+  export let dragEnabled: boolean;
+  export let expandEnabled: boolean;
+  export let onImageClick: (src: string) => void;
 </script>
 
 <td
-    class="table-cell {index == 0 && !dragEnabled && !expandEnabled
-        ? 'sticky-cell'
-        : ''}"
-    style="text-align: {header.align ?? 'center'}"
+  class="table-cell {index == 0 && !dragEnabled && !expandEnabled
+    ? 'sticky-cell'
+    : ''} {header.tipo === 'TextArea' ? 'cell-textarea' : ''}"
+  style="text-align: {header.align ?? 'center'}; {header.tipo === 'TextArea'
+    ? `max-height: calc(${header.cellMaxHeight ?? '150px'} + 14px + 0.6rem);`
+    : ''}"
 >
-    {#if header.tipo == "Text" || header.tipo == "Number"}
-        <TextCell {item} {header} />
-    {:else if header.tipo == "Date"}
-        <DateCell {item} {header} isDatetime={false} />
-    {:else if header.tipo == "Datetime"}
-        <DateCell {item} {header} isDatetime={true} />
-    {:else if header.tipo == "Bool"}
-        <BoolCell {item} {header} />
-    {:else if header.tipo == "EditableBool"}
-        <EditableBoolCell {item} {header} {idField} />
-    {:else if header.tipo == "EditableText"}
-        <EditableTextCell {item} {header} {idField} />
-    {:else if header.tipo == "EditableNumber"}
-        <EditableNumberCell {item} {header} {idField} />
-    {:else if header.tipo == "Image"}
-        <ImageCell {item} {header} {onImageClick} />
-    {:else if header.tipo == "Buttons"}
-        <CrudTableButtons
-            id={item[header.campo]}
-            buttonsConfig={header.buttonsConfig ?? []}
-            align={header.align ?? "center"}
-            row={item}
-        />
-    {:else if header.tipo == "DynamicButton"}
-        <DynamicButtonCell {item} {header} {idField} />
-    {:else if header.tipo == "ImageButton"}
-        <ImageButtonCell {item} {header} {idField} />
-    {:else if header.tipo == "DualTextButton"}
-        <DualTextButtonCell {item} {header} {idField} />
-    {:else if header.tipo == "ConditionalCell"}
-        <ConditionalCell {item} {header} {idField} />
-    {:else if header.tipo == "MultiTextButton"}
-        <MultiTextButtonCell {item} {header} {idField} />
-    {:else if header.tipo == "Component"}
-        <ComponentCell {item} {header} />
-    {/if}
+  {#if header.tipo == "Text" || header.tipo == "Number"}
+    <TextCell {item} {header} />
+  {:else if header.tipo == "TextArea"}
+    <TextAreaCell {item} {header} />
+  {:else if header.tipo == "Date"}
+    <DateCell {item} {header} isDatetime={false} />
+  {:else if header.tipo == "Datetime"}
+    <DateCell {item} {header} isDatetime={true} />
+  {:else if header.tipo == "Bool"}
+    <BoolCell {item} {header} />
+  {:else if header.tipo == "EditableBool"}
+    <EditableBoolCell {item} {header} {idField} />
+  {:else if header.tipo == "EditableText"}
+    <EditableTextCell {item} {header} {idField} />
+  {:else if header.tipo == "EditableNumber"}
+    <EditableNumberCell {item} {header} {idField} />
+  {:else if header.tipo == "Image"}
+    <ImageCell {item} {header} {onImageClick} />
+  {:else if header.tipo == "Buttons"}
+    <CrudTableButtons
+      id={item[header.campo]}
+      buttonsConfig={header.buttonsConfig ?? []}
+      align={header.align ?? "center"}
+      row={item}
+    />
+  {:else if header.tipo == "DynamicButton"}
+    <DynamicButtonCell {item} {header} {idField} />
+  {:else if header.tipo == "ImageButton"}
+    <ImageButtonCell {item} {header} {idField} />
+  {:else if header.tipo == "DualTextButton"}
+    <DualTextButtonCell {item} {header} {idField} />
+  {:else if header.tipo == "ConditionalCell"}
+    <ConditionalCell {item} {header} {idField} />
+  {:else if header.tipo == "MultiTextButton"}
+    <MultiTextButtonCell {item} {header} {idField} />
+  {:else if header.tipo == "Component"}
+    <ComponentCell {item} {header} />
+  {/if}
 </td>

package/dist/CRUD/cells/TextAreaCell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { TableHeader } from "../interfaces.js";
+
+  export let item: any;
+  export let header: TableHeader;
+
+  // Altura máxima para TextArea (150px por defecto, puede ser personalizada con cellMaxHeight)
+  $: maxHeight = header.cellMaxHeight ?? "180px";
+</script>
+
+<div
+  class="cell-content-textarea {header.biBold ? 'bold' : ''}"
+  style="text-align: {header.align ?? 'left'}; {header.colorCampo &&
+  item[header.colorCampo]
+    ? `background-color: ${item[header.colorCampo]}; color: white;`
+    : ''} max-height: {maxHeight};"
+>
+  {item[header.campo] ?? ""}
+</div>

package/dist/CRUD/cells/TextAreaCell.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TableHeader } from "../interfaces.js";
+declare const __propDef: {
+    props: {
+        item: any;
+        header: TableHeader;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextAreaCellProps = typeof __propDef.props;
+export type TextAreaCellEvents = typeof __propDef.events;
+export type TextAreaCellSlots = typeof __propDef.slots;
+export default class TextAreaCell extends SvelteComponentTyped<TextAreaCellProps, TextAreaCellEvents, TextAreaCellSlots> {
+}
+export {};

package/dist/CRUD/interfaces.d.ts

@@ -11,7 +11,7 @@ export interface ButtonConfig {
 export interface TableHeader {
     titulo: string;
     biSort: boolean;
-    tipo: 'Text' | 'Number' | 'Buttons' | 'Bool' | 'Image' | 'Datetime' | 'Date' | 'EditableBool' | 'EditableText' | 'EditableNumber' | 'DynamicButton' | 'ImageButton' | 'DualTextButton' | 'ConditionalCell' | 'MultiTextButton' | 'Component';
+    tipo: 'Text' | 'TextArea' | 'Number' | 'Buttons' | 'Bool' | 'Image' | 'Datetime' | 'Date' | 'EditableBool' | 'EditableText' | 'EditableNumber' | 'DynamicButton' | 'ImageButton' | 'DualTextButton' | 'ConditionalCell' | 'MultiTextButton' | 'Component';
     biBold: boolean;
     /**
      * Alignment for the content of the cells belonging to this header.