grav-svelte 0.0.4 → 0.0.6

package/dist/CRUD/CrudFilters.svelte

@@ -0,0 +1,272 @@
+<script lang="ts">
+    import InputFormText from "./../Inputs/InputFormText.svelte";
+    import InputFormBool from "../Inputs/InputFormBool.svelte";
+    import InputFormSelect from "../Inputs/InputFormSelect.svelte";
+    import InputFormNumber from "../Inputs/InputFormNumber.svelte";
+    import InputFormDateAndHours from "../Inputs/InputFormDateAndHours.svelte";
+    import InputFormDate from "../Inputs/InputFormDate.svelte";
+    import { slide } from "svelte/transition";
+
+    import { createEventDispatcher } from "svelte";
+    import type { FiltrosI } from "./interfaces.js";
+    const dispatch = createEventDispatcher();
+
+    let showTooltip = "";
+    export let PageSize = 50;
+    let localPageSize = 50;
+    let showFilters = false;
+
+    export let Filtros: FiltrosI[];
+    export let showAddButton: boolean = true;
+    export let showImportButton: boolean = true;
+
+    // Ensure localPageSize is never 0
+    $: if (localPageSize == 0) {
+        localPageSize = 1;
+    }
+
+    function clearFilters() {
+        console.log("clearFilters");
+
+        Filtros = Filtros.map((filtro) => ({
+            ...filtro,
+            value: filtro.tipo === "bool" ? false : "",
+        }));
+        console.log(Filtros);
+        dispatch("filtrar", { filtros: Filtros }); // puedes pasar los filtros actualizados
+    }
+
+    function actualizarFiltro() {
+        console.log(Filtros);
+        PageSize = localPageSize;
+        dispatch("filtrar", { filtros: Filtros }); // puedes pasar los filtros actualizados
+    }
+
+    // Handle keydown event
+    function handleKeydown(event) {
+        // Check if the event target is a textarea or input
+        // const isInputElement = event.target.tagName === 'TEXTAREA' || event.target.tagName === 'INPUT';
+        const isInputElement = event.target.tagName === "TEXTAREA";
+
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            actualizarFiltro();
+        }
+    }
+
+    // Handle click to focus the modal
+    function handleClick(event) {
+        // Only focus if clicking directly on the modal container
+        if (event.target === event.currentTarget) {
+            event.target.focus();
+        }
+    }
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+    class="sm:mb-0 sm:mt-1 p-2"
+    on:keydown={handleKeydown}
+    on:click={handleClick}
+    tabindex="0"
+>
+    <!-- Filtros CORE -->
+    <!--------------------------------------------------------------------->
+    <div class="sm:flex sm:space-x-3 w-full">
+        <div class=" flex items-center space-x-3">
+            <h1 class=" font-bold text-2xl">Transacciones</h1>
+            <div class="flex justify-start items-center space-x-3 w-full">
+                {#if showAddButton}
+                    <div>
+                        <div class="relative">
+                            {#if showTooltip == "Agregar"}
+                                <div
+                                    class="absolute z-[10000] p-1 text-white text-xs bg-gray-500 rounded shadow -top-5 -left-10"
+                                >
+                                    Agregar
+                                </div>
+                            {/if}
+                        </div>
+                        <button
+                            class=" flex justify-center items-center border border-black w-12 h-12 rounded-lg shadow-md"
+                            type="button"
+                            on:mouseenter={() => (showTooltip = "Agregar")}
+                            on:mouseleave={() => (showTooltip = "")}
+                            on:click={() => dispatch("add")}
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <line x1="12" y1="5" x2="12" y2="19"></line>
+                                <line x1="5" y1="12" x2="19" y2="12"></line>
+                            </svg>
+                        </button>
+                    </div>
+                {/if}
+                {#if showImportButton}
+                    <div>
+                        <div class="relative">
+                            {#if showTooltip == "Importar"}
+                                <div
+                                    class="absolute z-[10000] p-1 text-white text-xs bg-gray-500 rounded shadow -top-5 -left-10"
+                                >
+                                    Importar Excel
+                                </div>
+                            {/if}
+                        </div>
+                        <button
+                            class=" flex justify-center items-center border border-black w-12 h-12 rounded-lg shadow-md"
+                            type="button"
+                            on:mouseenter={() => (showTooltip = "Importar")}
+                            on:mouseleave={() => (showTooltip = "")}
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                <polyline points="7 10 12 15 17 10"></polyline>
+                                <line x1="12" y1="15" x2="12" y2="3"></line>
+                            </svg>
+                        </button>
+                    </div>
+                {/if}
+            </div>
+        </div>
+        <div class=" flex items-center space-x-3 mt-2 sm:mt-0">
+            <!-- Show Filters Button -->
+            <div class="inline-flex shadow-sm" role="group">
+                {#if Filtros && Filtros.length > 0}
+                    {#if showFilters}
+                        <button
+                            type="button"
+                            on:click={() => (showFilters = !showFilters)}
+                            class="inline-flex items-center h-12 sm:px-4 sm:py-3 px-3 py-2 sm:text-sm text-xs font-medium border border-black text-black rounded-l-lg"
+                        >
+                            <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">
+                                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                            </svg>
+                            {showFilters ? '▲' : '▼'}
+                        </button>
+                    {:else}
+                        <button
+                            type="button"
+                            on:click={() => (showFilters = !showFilters)}
+                            class="inline-flex items-center h-12 sm:px-4 sm:py-3 px-3 py-2 sm:text-sm text-xs font-medium border border-black text-black rounded-l-lg"
+                        >
+                            <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">
+                                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                            </svg>
+                            {showFilters ? '▲' : '▼'}
+                        </button>
+                    {/if}
+
+                    <!-- Btn de limpiar filtros -->
+
+                    <div class="relative">
+                        {#if showTooltip == "Borrar"}
+                            <div
+                                class="absolute z-[10000] p-1 text-white text-xs bg-gray-500 rounded shadow -top-5 -left-10"
+                            >
+                                Borrar filtro
+                            </div>
+                        {/if}
+                    </div>
+                    <button
+                        type="button"
+                        on:click={() => clearFilters()}
+                        on:mouseenter={() => (showTooltip = "Borrar")}
+                        on:mouseleave={() => (showTooltip = "nada")}
+                        class="inline-flex items-center sm:px-4 sm:py-3 px-3 py-2 sm:text-sm text-xs font-medium border border-black rounded-r-lg text-black"
+                        >
+                        <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>
+                        </button>
+                {/if}
+            </div>
+
+            <!-- Filtro 2 -->
+            <div class=" w-16">
+                <InputFormText
+                    label="Mostrando:"
+                    bind:valueVar={localPageSize}
+                />
+            </div>
+            <!-- /Filtro 2 -->
+
+            <!-- Btn de aplicar filtro (siempre visible) -->
+            <div class="inline-flex rounded-md shadow-sm" role="group">
+                <div class="relative">
+                    {#if showTooltip == "Aplicar"}
+                        <div
+                            class="absolute z-[10000] p-1 transition-all ease-in duration-200 text-white text-xs bg-gray-500 rounded shadow -top-5 -left-10"
+                        >
+                            Aplicar filtro
+                        </div>
+                    {/if}
+                </div>
+                <button
+                    type="button"
+                    on:click={() => actualizarFiltro()}
+                    on:mouseenter={() => (showTooltip = "Aplicar")}
+                    on:mouseleave={() => (showTooltip = "nada")}
+                    class="inline-flex h-12 items-center shadow-md sm:px-4 sm:py-3 px-3 py-2 sm:text-sm text-xs font-medium border border-black text-black rounded-lg"
+                    >Filtrar</button
+                >
+            </div>
+            <!-- /Btn de aplicar filtro -->
+        </div>
+    </div>
+    <!-- Filtros Dynamic -->
+    {#if showFilters}
+        <div
+            class="grid sm:grid-cols-5 grid-cols-1 gap-3 mt-4"
+            transition:slide|local={{ duration: 300, delay: 100 }}
+        >
+            {#each Filtros as { tipo, label, value, options }, i}
+                {#if tipo == "text"}
+                    <div class="relative z-0 my-auto">
+                        <InputFormText
+                            {label}
+                            bind:valueVar={Filtros[i].value}
+                        />
+                    </div>
+                {:else if tipo == "number"}
+                    <div class="z-50">
+                        <InputFormNumber
+                            {label}
+                            bind:valueVar={Filtros[i].value}
+                        />
+                    </div>
+                {:else if tipo == "datetime"}
+                    <div class="z-50">
+                        <InputFormDateAndHours
+                            {label}
+                            bind:valueVar={Filtros[i].value}
+                        />
+                    </div>
+                {:else if tipo == "date"}
+                    <div class="z-50">
+                        <InputFormDate
+                            {label}
+                            bind:valueVar={Filtros[i].value}
+                        />
+                    </div>
+                {:else if tipo == "select"}
+                    <div class="z-50">
+                        <InputFormSelect
+                            {label}
+                            res={options}
+                            bind:justValue={Filtros[i].value}
+                        />
+                    </div>
+                {:else if tipo == "bool"}
+                    <div class="my-auto">
+                        <InputFormBool
+                            {label}
+                            bind:valueVar={Filtros[i].value}
+                        />
+                    </div>
+                {/if}
+            {/each}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FiltrosI } from "./interfaces.js";
+declare const __propDef: {
+    props: {
+        PageSize?: number;
+        Filtros: FiltrosI[];
+        showAddButton?: boolean;
+        showImportButton?: boolean;
+    };
+    events: {
+        add: CustomEvent<any>;
+        filtrar: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CrudFiltersProps = typeof __propDef.props;
+export type CrudFiltersEvents = typeof __propDef.events;
+export type CrudFiltersSlots = typeof __propDef.slots;
+export default class CrudFilters extends SvelteComponentTyped<CrudFiltersProps, CrudFiltersEvents, CrudFiltersSlots> {
+}
+export {};

package/dist/CRUD/CrudTable.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+    import CrudTableButtons from "./CrudTableButtons.svelte";
+
+    // COMPONENTES imports
+
+    import { createEventDispatcher } from "svelte";
+    import type { TableHeader } from "./interfaces.js";
+
+    const dispatch = createEventDispatcher();
+
+    // variable que captura la tabla para exportar a Excel o Pdf
+    let tablaExport;
+
+    export let todosLosRegistros: any[] = [];
+    export let tableHeaders: TableHeader[];
+    export let loading: boolean = false;
+
+    let selectedAscOrDesc = "asc";
+    let selectedSort = "";
+    let selectedRowId: string | number | null = null;
+
+    function handleRowClick(id: string | number) {
+        if (id === 0) return;
+        selectedRowId = selectedRowId === id ? null : id;
+        dispatch("rowClick", { id: selectedRowId });
+    }
+
+    function dispatchSort(selection: string) {
+        if (selectedAscOrDesc == "asc") {
+            selectedAscOrDesc = "desc";
+        } else {
+            selectedAscOrDesc = "asc";
+        }
+        selectedSort = selection;
+        dispatch("selectedSort", {
+            selectedSort: selection,
+            selectedAsc: selectedAscOrDesc,
+        });
+    }
+</script>
+
+<div
+    class="relative flex flex-col min-w-0 break-words z-30 w-full mb-3 shadow-lg rounded mt-3 p-1 bg-white"
+>
+    <div class="not-prose relative bg-slate-50 rounded-xl overflow-hidden">
+        <div class="relative rounded-xl overflow-auto">
+            <div class=" bg-white shadow-xl overflow-hidden">
+                <div class="overflow-scroll grid max-h-[80vh]">
+                    <table
+                        class="items-center w-full bg-transparent border-collapse shadow-xs table-auto"
+                        bind:this={tablaExport}
+                    >
+                        <thead class="shadow-lg sticky top-0 z-20 bg-white">
+                            <tr class="relative">
+                                {#each tableHeaders as tableHeader}
+                                    {#if tableHeader.biSort == false}
+                                        <th
+                                            class="px-3 align-middle cursor-not-allowed text-center border border-solid py-1 text-xs uppercase border-l-0 border-r whitespace-nowrap font-semibold bg-blueGray-50 text-blueGray-500 border-blueGray-100"
+                                        >
+                                            {tableHeader.titulo}
+                                        </th>
+                                    {:else}
+                                        <th
+                                            on:click={() =>
+                                                dispatchSort(tableHeader.campo)}
+                                            class="px-3 border-r cursor-pointer align-middle border border-solid py-1 text-xs uppercase border-l-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100"
+                                        >
+                                            <h1 class="relative">
+                                                {tableHeader.titulo}
+                                            </h1>
+                                            {#if selectedSort == tableHeader.campo}
+                                                {#if selectedAscOrDesc == "asc"}
+                                                    <div
+                                                        class="flex items-center justify-center"
+                                                    >
+                                                        <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="ml-1"
+                                                        >
+                                                            <polyline
+                                                                points="6 9 12 15 18 9"
+                                                            ></polyline>
+                                                        </svg>
+                                                    </div>
+                                                {:else}
+                                                    <div
+                                                        class="flex items-center justify-center"
+                                                    >
+                                                        <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="ml-1"
+                                                        >
+                                                            <polyline
+                                                                points="18 15 12 9 6 15"
+                                                            ></polyline>
+                                                        </svg>
+                                                    </div>
+                                                {/if}
+                                            {/if}
+                                        </th>
+                                    {/if}
+                                {/each}
+                            </tr>
+                        </thead>
+
+                        {#if todosLosRegistros && !loading}
+                            <tbody>
+                                {#each todosLosRegistros as item, index}
+                                    <tr
+                                        class="border-b-2 cursor-pointer transition-colors duration-200 {selectedRowId ===
+                                        index
+                                            ? 'bg-gray-100'
+                                            : 'hover:bg-gray-50'}"
+                                        on:click={() => handleRowClick(index)}
+                                    >
+                                        {#each tableHeaders as tableBodyItem, i}
+                                            {#if tableBodyItem.tipo == "Text"}
+                                                <td
+                                                    class="border-t-0 {i == 0
+                                                        ? 'sticky bg-white'
+                                                        : ''} {selectedRowId ===
+                                                    index
+                                                        ? 'bg-gray-100'
+                                                        : 'hover:bg-gray-50'} z-10 left-0 align-middle border-l-0 border-r-0 whitespace-nowrap"
+                                                >
+                                                    <p
+                                                        class=" pl-1 whitespace-normal break-word sm:text-base text-xs {tableBodyItem.biBold
+                                                            ? 'font-bold'
+                                                            : ''} text-blueGray-500"
+                                                    >
+                                                        {item[
+                                                            tableBodyItem.campo
+                                                        ] ?? ""}
+                                                    </p>
+                                                </td>
+                                            {:else if tableBodyItem.tipo == "Number"}
+                                                <td
+                                                    class="border-t-0 {i == 0
+                                                        ? 'sticky bg-white'
+                                                        : ''} {selectedRowId ===
+                                                    index
+                                                        ? 'bg-gray-100'
+                                                        : 'hover:bg-gray-50'} z-10 left-0 align-middle border-l-0 border-r-0 whitespace-nowrap"
+                                                >
+                                                    <p
+                                                        class=" pl-1 whitespace-normal break-word sm:text-base text-xs {tableBodyItem.biBold
+                                                            ? 'font-bold'
+                                                            : ''} text-blueGray-500"
+                                                    >
+                                                        {item[
+                                                            tableBodyItem.campo
+                                                        ] ?? ""}
+                                                    </p>
+                                                </td>
+                                            {:else if tableBodyItem.tipo == "Buttons"}
+                                                <CrudTableButtons
+                                                    id={item[
+                                                        tableBodyItem.campo
+                                                    ]}
+                                                    buttonsConfig={tableBodyItem.buttonsConfig ??
+                                                        []}
+                                                />
+                                            {/if}
+                                        {/each}
+                                    </tr>
+                                {/each}
+                            </tbody>
+                        {:else if !loading}
+                            <tbody>
+                                <tr>
+                                    <td
+                                        colspan={tableHeaders.length}
+                                        class="text-center py-4"
+                                    >
+                                        No hay datos disponibles
+                                    </td>
+                                </tr>
+                            </tbody>
+                        {/if}
+                    </table>
+                    {#if loading}
+                        <div class="mx-auto w-full rounded-md p-4">
+                            <div class="flex animate-pulse space-x-4">
+                                <div class="flex-1 space-y-6 py-1">
+                                    <div class="space-y-4">
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                        <div class="h-4 rounded bg-gray-200" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TableHeader } from "./interfaces.js";
+declare const __propDef: {
+    props: {
+        todosLosRegistros?: any[];
+        tableHeaders: TableHeader[];
+        loading?: boolean;
+    };
+    events: {
+        rowClick: CustomEvent<any>;
+        selectedSort: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CrudTableProps = typeof __propDef.props;
+export type CrudTableEvents = typeof __propDef.events;
+export type CrudTableSlots = typeof __propDef.slots;
+export default class CrudTable extends SvelteComponentTyped<CrudTableProps, CrudTableEvents, CrudTableSlots> {
+}
+export {};

package/dist/CRUD/CrudTableButtons.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { ButtonConfig } from "./interfaces.js";
+
+    export let id = 1;
+    export let buttonsConfig: ButtonConfig[];
+    let showTooltip = "";
+</script>
+
+<td class="text-xs text-center">
+    <div class="inline-flex rounded-md shadow-sm" role="group">
+        {#each buttonsConfig as button, i}
+            <div class="relative">
+                {#if showTooltip == button.tooltip}
+                    <div
+                        class="absolute z-[10000] p-1 text-white text-xs bg-gray-500 rounded shadow -top-6 -right-10"
+                    >
+                        {button.tooltip}
+                    </div>
+                {/if}
+            </div>
+            <button
+                aria-label={button.tooltip}
+                on:click={() => button.action(id)}
+                on:mouseenter={() => (showTooltip = button.tooltip)}
+                on:mouseleave={() => (showTooltip = "")}
+                type="button"
+                class="inline-flex items-center sm:px-2 sm:py-1 px-3 py-2 min-h-6 min-w-5 sm:text-xs text-xs border border-gray-200 text-white {i ==
+                0
+                    ? 'rounded-l-lg'
+                    : i == buttonsConfig.length - 1
+                      ? 'rounded-r-lg'
+                      : ''} {button.color}  "
+            >
+                <i class={button.icon}> </i>
+            </button>
+        {/each}
+    </div>
+</td>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonConfig } from "./interfaces.js";
+declare const __propDef: {
+    props: {
+        id?: number;
+        buttonsConfig: ButtonConfig[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CrudTableButtonsProps = typeof __propDef.props;
+export type CrudTableButtonsEvents = typeof __propDef.events;
+export type CrudTableButtonsSlots = typeof __propDef.slots;
+export default class CrudTableButtons extends SvelteComponentTyped<CrudTableButtonsProps, CrudTableButtonsEvents, CrudTableButtonsSlots> {
+}
+export {};