grav-svelte 0.0.30 → 0.0.32

package/README.md

@@ -87,6 +87,7 @@ Available components:
 - `FormBuilder` - Dynamic form generation
 - `Pagination` - Page navigation
 - `SearchInput` - Search with debounce
+- Image columns with URL support in data tables
 
 ## Documentation
 

package/dist/CRUD/CrudFilters.css

@@ -177,4 +177,25 @@
 
 .filter-item-bool {
     margin: auto 0;
+}
+
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 38px;
+}
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 } 

package/dist/CRUD/CrudFilters.svelte

@@ -8,7 +8,7 @@
     import { slide } from "svelte/transition";
     import "./CrudFilters.css";
 
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
     import type { FiltrosI } from "./interfaces.js";
     const dispatch = createEventDispatcher();
 
@@ -17,6 +17,7 @@
     let localPageSize = 50;
     let localPageSizeStr = "50";
     let showFilters = false;
+    let isLoading = false;
 
     export let Filtros: FiltrosI[];
     export let showAddButton: boolean = true;
@@ -74,6 +75,29 @@
             localPageSizeStr = input.value;
         }
     }
+
+    let dataFetched: { value: any; label: string }[][] = [];
+    onMount(async () => {
+        console.log("Filtros", Filtros);
+        if (Filtros.length > 0) {
+            isLoading = true;
+            try {
+                const promises = Filtros.map(async (filtro) => {
+                    console.log("filtro", filtro);
+                    if (filtro.service) {
+                        const data = await filtro.service();
+                        return data;
+                    }
+                    return [];
+                });
+                
+                dataFetched = await Promise.all(promises);
+                console.log("dataFetched", dataFetched);
+            } finally {
+                isLoading = false;
+            }
+        }
+    });
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -94,9 +118,7 @@
                     <div>
                         <div class="tooltip-container">
                             {#if showTooltip == "Agregar"}
-                                <div class="tooltip">
-                                    Agregar
-                                </div>
+                                <div class="tooltip">Agregar</div>
                             {/if}
                         </div>
                         <!-- svelte-ignore a11y_consider_explicit_label -->
@@ -128,9 +150,7 @@
                     <div>
                         <div class="tooltip-container">
                             {#if showTooltip == "Importar"}
-                                <div class="tooltip">
-                                    Importar Excel
-                                </div>
+                                <div class="tooltip">Importar Excel</div>
                             {/if}
                         </div>
                         <!-- svelte-ignore a11y_consider_explicit_label -->
@@ -219,9 +239,7 @@
                     <!-- Btn de limpiar filtros -->
                     <div class="tooltip-container">
                         {#if showTooltip == "Borrar"}
-                            <div class="tooltip">
-                                Borrar filtro
-                            </div>
+                            <div class="tooltip">Borrar filtro</div>
                         {/if}
                     </div>
                     <!-- svelte-ignore a11y_consider_explicit_label -->
@@ -266,9 +284,7 @@
             <div class="filter-group" role="group">
                 <div class="tooltip-container">
                     {#if showTooltip == "Aplicar"}
-                        <div class="tooltip">
-                            Aplicar filtro
-                        </div>
+                        <div class="tooltip">Aplicar filtro</div>
                     {/if}
                 </div>
                 <button
@@ -276,8 +292,7 @@
                     on:click={() => actualizarFiltro()}
                     on:mouseenter={() => (showTooltip = "Aplicar")}
                     on:mouseleave={() => (showTooltip = "nada")}
-                    class="apply-filter-button"
-                    >Filtrar</button
+                    class="apply-filter-button">Filtrar</button
                 >
             </div>
             <!-- /Btn de aplicar filtro -->
@@ -287,9 +302,8 @@
     {#if showFilters}
         <div
             class="filters-grid"
-            transition:slide|local={{ duration: 300, delay: 100 }}
         >
-            {#each Filtros as { tipo, label, options }, i}
+            {#each Filtros as { tipo, label, options, service }, i}
                 {#if tipo == "text"}
                     <div class="filter-item">
                         <InputFormText
@@ -320,11 +334,25 @@
                     </div>
                 {:else if tipo == "select"}
                     <div class="filter-item filter-item-select">
-                        <InputFormSelect
-                            {label}
-                            res={options}
-                            bind:justValue={Filtros[i].value}
-                        />
+                        {#if service}
+                            {#if isLoading}
+                                <div class="loading-spinner">
+                                    <div class="spinner"></div>
+                                </div>
+                            {:else}
+                                <InputFormSelect
+                                    {label}
+                                    res={dataFetched[i]}
+                                    bind:justValue={Filtros[i].value}
+                                />
+                            {/if}
+                        {:else}
+                            <InputFormSelect
+                                {label}
+                                res={options}
+                                bind:justValue={Filtros[i].value}
+                            />
+                        {/if}
                     </div>
                 {:else if tipo == "bool"}
                     <div class="filter-item filter-item-bool">

package/dist/CRUD/CrudTable.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import CrudTableButtons from "./CrudTableButtons.svelte";
+import CrudTableButtons from "./CrudTableButtons.svelte";
+import { openModal, closeModal } from "../Modals/index.js";
+import ImageModal from "./ImageModal.svelte";
 
     // COMPONENTES imports
 
@@ -36,6 +38,11 @@
             selectedAsc: selectedAscOrDesc,
         });
     }
+
+    function openImageModal(src: string) {
+        closeModal("crud-image-modal");
+        openModal("crud-image-modal", ImageModal, { src });
+    }
 </script>
 
 <div class="table-container">
@@ -49,6 +56,7 @@
                                 class="table-header-cell {index == 0
                                     ? 'borderleft'
                                     : ''} non-sortable"
+                                style="text-align: {tableHeader.align ?? 'center'}"
                             >
                                 {tableHeader.titulo}
                             </th>
@@ -58,6 +66,7 @@
                                 class="table-header-cell {index == 0
                                     ? 'borderleft'
                                     : ''} sortable"
+                                style="text-align: {tableHeader.align ?? 'left'}"
                             >
                                 <h1>{tableHeader.titulo}</h1>
                                 {#if selectedSort == tableHeader.campo}
@@ -127,6 +136,7 @@
                                             class="cell-content {tableBodyItem.biBold
                                                 ? 'bold'
                                                 : ''}"
+                                            style="text-align: {tableBodyItem.align ?? 'left'}"
                                         >
                                             {item[tableBodyItem.campo] ?? ""}
                                         </p>
@@ -141,15 +151,49 @@
                                             class="cell-content {tableBodyItem.biBold
                                                 ? 'bold'
                                                 : ''}"
+                                            style="text-align: {tableBodyItem.align ?? 'left'}"
                                         >
                                             {item[tableBodyItem.campo] ?? ""}
                                         </p>
                                     </td>
+                                {:else if tableBodyItem.tipo == "Bool"}
+                                    <td
+                                        class="table-cell {i == 0
+                                            ? 'sticky-cell'
+                                            : ''}"
+                                    >
+                                        <p
+                                            class="cell-content {tableBodyItem.biBold
+                                                ? 'bold'
+                                                : ''}"
+                                            style="text-align: {tableBodyItem.align ?? 'left'}"
+                                        >
+                                            {#if item[tableBodyItem.campo] === true}
+                                                <i class="fas fa-check"></i>
+                                            {:else}
+                                                -
+                                            {/if}
+                                        </p>
+                                    </td>
+                                {:else if tableBodyItem.tipo == "Image"}
+                                    <td
+                                        class="table-cell {i == 0
+                                            ? 'sticky-cell'
+                                            : ''}"
+                                    >
+                                        <img
+                                            class="crud-image cursor-pointer"
+                                            src={item[tableBodyItem.campo] ?? ''}
+                                            alt="image"
+                                            on:click={() => openImageModal(item[tableBodyItem.campo])}
+                                        />
+                                    </td>
                                 {:else if tableBodyItem.tipo == "Buttons"}
                                     <CrudTableButtons
                                         id={item[tableBodyItem.campo]}
                                         buttonsConfig={tableBodyItem.buttonsConfig ??
                                             []}
+                                        align={tableBodyItem.align ?? 'center'}
                                     />
                                 {/if}
                             {/each}
@@ -275,10 +319,20 @@
         background-color: #f5f5f5;
     }
 
+    /* ensure sticky cells follow row hover */
+    .table-row:hover .sticky-cell {
+        background-color: #f5f5f5;
+    }
+
     .table-row.selected {
         background-color: #e8e8e8;
     }
 
+    /* keep first column selected state consistent */
+    .table-row.selected .sticky-cell {
+        background-color: #e8e8e8;
+    }
+
     .table-cell {
         border-top: 0;
         border-left: 0;
@@ -319,6 +373,8 @@
 
     .loading-animation {
         display: flex;
+        flex-direction: column;
+        width: 100%;
         animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     }
 
@@ -328,8 +384,8 @@
         background-color: #e0e0e0;
         margin-bottom: 0.5rem;
         width: 100%;
-        flex: 1;
-        margin: 0 0.5rem;
+        margin: 0 0 0.5rem 0;
+        flex: none;
     }
 
     @keyframes pulse {
@@ -347,4 +403,11 @@
             font-size: 1rem;
         }
     }
+
+    .crud-image {
+        max-width: 4rem;
+        max-height: 4rem;
+        object-fit: contain;
+        margin: auto;
+    }
 </style>

package/dist/CRUD/CrudTableButtons.svelte

@@ -3,10 +3,11 @@
 
     export let id = 1;
     export let buttonsConfig: ButtonConfig[];
+    export let align: 'left' | 'right' | 'center' = 'center';
     let showTooltip = "";
 </script>
 
-<td class="table-cell">
+<td class="table-cell" style="text-align: {align}">
     <div class="button-group" role="group">
         {#each buttonsConfig as button, i}
             <div class="tooltip-container">

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         id?: number;
         buttonsConfig: ButtonConfig[];
+        align?: "left" | "right" | "center";
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/CRUD/CrudWrapper.svelte

@@ -3,7 +3,8 @@
     import CrudFilters from "./CrudFilters.svelte";
     import CrudTable from "./CrudTable.svelte";
     import type { FiltrosI, TableHeader, CrudWrapperProps } from "./interfaces.js";
-    import PaginationCrud from "./PaginationCRUD.svelte";
+import PaginationCrud from "./PaginationCRUD.svelte";
+import { ModalContainer } from "../Modals/index.js";
 
     export let Filtros: FiltrosI[];
     export let todosLosObjetos: any[];
@@ -105,6 +106,7 @@
             <i class="far fa-file-pdf pr-3"> </i>PDF
         </button>
     </div>
+    <ModalContainer />
 </div>
 
 <style>

package/dist/CRUD/ImageModal.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Grav_Modal, closeModal } from '../Modals/index.js';
+    export let src: string;
+    const MODAL_ID = 'crud-image-modal';
+</script>
+
+<Grav_Modal
+    title="Imagen"
+    size="md"
+    isVista={true}
+    onClose={() => closeModal(MODAL_ID)}
+>
+    <div class="flex items-center justify-center p-4">
+        <img src={src} alt="image" class="max-w-full max-h-[80vh]" />
+    </div>
+</Grav_Modal>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        src: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageModalProps = typeof __propDef.props;
+export type ImageModalEvents = typeof __propDef.events;
+export type ImageModalSlots = typeof __propDef.slots;
+export default class ImageModal extends SvelteComponentTyped<ImageModalProps, ImageModalEvents, ImageModalSlots> {
+}
+export {};

package/dist/CRUD/index.d.ts

@@ -3,4 +3,5 @@ export { default as CrudTable } from './CrudTable.svelte';
 export { default as CrudFilters } from './CrudFilters.svelte';
 export { default as PaginationCrud } from './PaginationCRUD.svelte';
 export { default as CrudTableButtons } from './CrudTableButtons.svelte';
+export { default as ImageModal } from './ImageModal.svelte';
 export type { ButtonConfig, TableHeader, FiltrosI, CrudWrapperProps } from './interfaces.js';

package/dist/CRUD/index.js

@@ -3,3 +3,4 @@ export { default as CrudTable } from './CrudTable.svelte';
 export { default as CrudFilters } from './CrudFilters.svelte';
 export { default as PaginationCrud } from './PaginationCRUD.svelte';
 export { default as CrudTableButtons } from './CrudTableButtons.svelte';
+export { default as ImageModal } from './ImageModal.svelte';

package/dist/CRUD/interfaces.d.ts

@@ -7,8 +7,13 @@ export interface ButtonConfig {
 export interface TableHeader {
     titulo: string;
     biSort: boolean;
-    tipo: 'Text' | 'Number' | 'Buttons';
+    tipo: 'Text' | 'Number' | 'Buttons' | 'Bool' | 'Image';
     biBold: boolean;
+    /**
+     * Alignment for the content of the cells belonging to this header.
+     * Defaults to 'left' when not provided.
+     */
+    align?: 'left' | 'right' | 'center';
     campo: string;
     buttonsConfig: ButtonConfig[] | null;
 }
@@ -16,10 +21,14 @@ export interface FiltrosI {
     tipo: 'number' | 'text' | 'date' | 'datetime' | 'select' | 'bool';
     label: string;
     value: any;
-    options: {
-        value: string;
+    options?: {
+        value: any;
         label: string;
     }[];
+    service?: () => Promise<{
+        value: any;
+        label: string;
+    }[]>;
 }
 export interface CrudWrapperProps {
     Filtros: FiltrosI[];

package/dist/Inputs/InputFormSelect.svelte

@@ -2,12 +2,12 @@
     import Select from "svelte-select";
 
     interface SelectValue {
-        value: string;
+        value: any;
         label: string;
     }
 
     export let value: SelectValue | null = null;
-    export let justValue: string | null = null;
+    export let justValue: any | null = null;
     export let res: any[] = [];
     export let changeFunction: (
         e: CustomEvent<SelectValue | null>

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

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         value?: {
-            value: string;
+            value: any;
             label: string;
         } | null;
-        justValue?: string | null;
+        justValue?: any | null;
         res?: any[];
         changeFunction?: (e: CustomEvent<{
-            value: string;
+            value: any;
             label: string;
         } | null>) => void;
         onClear?: () => void;

package/dist/Inputs/InputFormTextArea.svelte

@@ -4,23 +4,102 @@
     export let disabled = false;
     export let obligatory = false;
     export let rows: number = 3;
+    export let icon: string | null = null;
 </script>
 
-<div class="relative z-0 mt-4">
-    <textarea
-        {disabled}
-        id={valueVar}
-        bind:value={valueVar}
-        name={valueVar}
-        {rows}
-        class="block pt-2.5 px-0 w-full text-base text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-black peer"
-    />
-    <label
-        for={valueVar}
-        class="absolute text-base text-gray-600 duration-300 transform -translate-y-6 scale-75 top-2.5 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-gray-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
-        >{label}
-        {#if obligatory}
-            <span class="text-red-600"> *</span>
-        {/if}</label
-    >
+<div class="input-container">
+    {#if icon}
+        <div class="icon-wrapper">
+            <i class="{icon} icon"></i>
+        </div>
+    {/if}
+    <div class="input-wrapper">
+        <textarea
+            {disabled}
+            id={valueVar}
+            bind:value={valueVar}
+            name={valueVar}
+            {rows}
+            placeholder=""
+            class="input-field"
+        />
+        <label for={valueVar} class="input-label"
+            >{label}
+            {#if obligatory}
+                <span class="required-mark"> *</span>
+            {/if}</label
+        >
+    </div>
 </div>
+
+<style>
+    .input-container {
+        display: flex;
+        align-items: center;
+        margin-top: 0.75rem;
+        border: 0;
+        border-bottom: 2px solid #9ca3af;
+    }
+
+    .icon-wrapper {
+        width: 1rem;
+        position: relative;
+        margin-right: 0.5rem;
+    }
+
+    .icon {
+        position: absolute;
+        top: -0.25rem;
+        left: 0.25rem;
+    }
+
+    .input-wrapper {
+        position: relative;
+        z-index: 0;
+        width: 100%;
+    }
+
+    .input-field {
+        display: block;
+        padding-top: 0.625rem;
+        padding-left: 0;
+        padding-right: 0;
+        width: 100%;
+        font-size: 1rem;
+        color: #111827;
+        background: transparent;
+        appearance: none;
+    }
+
+    .input-field:focus {
+        outline: none;
+        border-color: black;
+    }
+
+    .input-label {
+        position: absolute;
+        font-size: 1rem;
+        text-align: left;
+        color: black;
+        transition: all 0.3s;
+        top: 0.625rem;
+        z-index: -10;
+        transform-origin: left;
+    }
+
+    .input-field:focus + .input-label,
+    .input-field:not(:placeholder-shown) + .input-label {
+        left: 0;
+        color: #4b5563;
+        translate: 0rem -1.25rem;
+        scale: 0.75;
+    }
+
+    .input-field:placeholder-shown + .input-label {
+        transform: translateY(0) scale(1);
+    }
+
+    .required-mark {
+        color: #dc2626;
+    }
+</style>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         disabled?: boolean;
         obligatory?: boolean;
         rows?: number;
+        icon?: string | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Sidebar/SidebarWrapper.svelte

@@ -2,6 +2,7 @@
     import type { SidebarSection } from "./sidebarConfig.js";
     import SidebarItem from "./SidebarItem.svelte";
     import "./SidebarWrapper.css";
+    import { Confirmacion_Alert } from "../index.js";
     import { onMount } from 'svelte';
     // Props
     export let sections: SidebarSection[];
@@ -26,6 +27,17 @@
         console.log("toggleCollapseShow");
         collapseShow = !collapseShow;
     }
+
+    function handleLogout(event: MouseEvent) {
+        event.preventDefault();
+        Confirmacion_Alert(
+            "Confirmar cierre de sesión",
+            "¿Desea cerrar sesión?",
+            () => {
+                window.location.href = logoutLink;
+            }
+        );
+    }
 </script>
 
 <nav class="sidebar {customClass}">
@@ -107,8 +119,13 @@
 
                     {#if showLogout}
                         <li class="logout-item">
-                            <a class="logout-link" href={logoutLink}>
-                                Log Out <i class="fas fa-sign-out-alt ml-2"></i>
+                            <a
+                                class="logout-link"
+                                href={logoutLink}
+                                on:click|preventDefault={handleLogout}
+                            >
+                                Log Out
+                                <i class="fas fa-sign-out-alt ml-2"></i>
                             </a>
                         </li>
                     {/if}

package/package.json

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