iconograph-ui 1.2.26 → 1.3.1

package/example/src/lib/components/CustomTable.svelte

@@ -34,4 +34,4 @@
 
 </script>
 
-<Table uri={uri} columns={settings} actions={false}></Table>
+<Table uri={uri} columns={settings} actions={false} pagination={true} ></Table>

package/example/src/routes/example/+server.js

@@ -1,16 +1,113 @@
 // @ts-nocheck
 import { json } from '@sveltejs/kit';
 
-export async function GET({ request, cookies }) {
+export async function GET({ request, url, cookies }) {
+    let limit = url.searchParams.get('limit');
+    let offset = url.searchParams.get('offset');
+    offset = offset ? offset : 1;
 
     let response = [
-        { id: "1234", name: "Saint Louis", city: "Paris", type: "HOMME", status: "ACTIVE" },
-        { id: "1234", name: "Saint Jean", city: "Jérusalem", type: "HOMME", status: "DISABLED" },
-        { id: "1234", name: "Sainte Blandine", city: "Lyon", type: "FEMME", status: "ACTIVE" },
-        { id: "1234", name: "Saint Christophe", city: "Corinthe", type: "HOMME", status: "ACTIVE" },
-        { id: "1234", name: "Sainte Rita", city: "Lupiano", type: "FEMME", status: "DELETED" },
-        { id: "1234", name: "Saint François d'Assise", city: "Assise", type: "HOMME", status: "ACTIVE" }
+        { id: "1001", name: "Saint Louis", city: "Paris", type: "HOMME", status: "ACTIVE" },
+        { id: "1002", name: "Saint Jean", city: "Jérusalem", type: "HOMME", status: "DISABLED" },
+        { id: "1003", name: "Sainte Blandine", city: "Lyon", type: "FEMME", status: "ACTIVE" },
+        { id: "1004", name: "Saint Christophe", city: "Corinthe", type: "HOMME", status: "ACTIVE" },
+        { id: "1005", name: "Sainte Rita", city: "Lupiano", type: "FEMME", status: "DELETED" },
+        { id: "1006", name: "Saint François d'Assise", city: "Assise", type: "HOMME", status: "ACTIVE" },
+        { id: "1007", name: "Sainte Claire", city: "Assise", type: "FEMME", status: "ACTIVE" },
+        { id: "1008", name: "Saint Pierre", city: "Rome", type: "HOMME", status: "DISABLED" },
+        { id: "1009", name: "Saint Paul", city: "Antioche", type: "HOMME", status: "ACTIVE" },
+        { id: "1010", name: "Sainte Thérèse de Lisieux", city: "Lisieux", type: "FEMME", status: "ACTIVE" },
+        { id: "1011", name: "Saint Augustin", city: "Hippo", type: "HOMME", status: "ACTIVE" },
+        { id: "1012", name: "Saint Thomas d'Aquin", city: "Roccasecca", type: "HOMME", status: "ACTIVE" },
+        { id: "1013", name: "Sainte Bernadette", city: "Lourdes", type: "FEMME", status: "DISABLED" },
+        { id: "1014", name: "Saint Antoine de Padoue", city: "Padoue", type: "HOMME", status: "ACTIVE" },
+        { id: "1015", name: "Saint Martin", city: "Tours", type: "HOMME", status: "DELETED" },
+        { id: "1016", name: "Sainte Jeanne d’Arc", city: "Domrémy", type: "FEMME", status: "ACTIVE" },
+        { id: "1017", name: "Saint Denis", city: "Paris", type: "HOMME", status: "ACTIVE" },
+        { id: "1018", name: "Saint Nicolas", city: "Myre", type: "HOMME", status: "DISABLED" },
+        { id: "1019", name: "Sainte Monique", city: "Tagaste", type: "FEMME", status: "ACTIVE" },
+        { id: "1020", name: "Saint Joseph", city: "Nazareth", type: "HOMME", status: "ACTIVE" },
+        { id: "1021", name: "Saint André", city: "Patras", type: "HOMME", status: "DELETED" },
+        { id: "1022", name: "Sainte Marguerite", city: "Écosse", type: "FEMME", status: "ACTIVE" },
+        { id: "1023", name: "Saint Georges", city: "Lydda", type: "HOMME", status: "ACTIVE" },
+        { id: "1024", name: "Saint Patrick", city: "Irlande", type: "HOMME", status: "DISABLED" },
+        { id: "1025", name: "Sainte Hélène", city: "Constantinople", type: "FEMME", status: "ACTIVE" },
+        { id: "1026", name: "Saint Étienne", city: "Jérusalem", type: "HOMME", status: "ACTIVE" },
+        { id: "1027", name: "Sainte Marie-Madeleine", city: "Magdala", type: "FEMME", status: "ACTIVE" },
+        { id: "1028", name: "Saint Matthieu", city: "Capharnaüm", type: "HOMME", status: "DELETED" },
+        { id: "1029", name: "Saint Marc", city: "Alexandrie", type: "HOMME", status: "ACTIVE" },
+        { id: "1030", name: "Saint Luc", city: "Antioche", type: "HOMME", status: "ACTIVE" },
+        { id: "1031", name: "Sainte Catherine de Sienne", city: "Sienne", type: "FEMME", status: "ACTIVE" },
+        { id: "1032", name: "Saint Benoît", city: "Nursie", type: "HOMME", status: "DISABLED" },
+        { id: "1033", name: "Saint Ignace de Loyola", city: "Loyola", type: "HOMME", status: "ACTIVE" },
+        { id: "1034", name: "Saint Jean Bosco", city: "Turin", type: "HOMME", status: "ACTIVE" },
+        { id: "1035", name: "Sainte Faustine", city: "Cracovie", type: "FEMME", status: "DELETED" },
+        { id: "1036", name: "Saint Cyrille", city: "Alexandrie", type: "HOMME", status: "ACTIVE" },
+        { id: "1037", name: "Saint Méthode", city: "Salonique", type: "HOMME", status: "ACTIVE" },
+        { id: "1038", name: "Sainte Cécile", city: "Rome", type: "FEMME", status: "ACTIVE" },
+        { id: "1039", name: "Saint Ambroise", city: "Milan", type: "HOMME", status: "DISABLED" },
+        { id: "1040", name: "Saint Grégoire", city: "Rome", type: "HOMME", status: "ACTIVE" },
+        { id: "1041", name: "Saint Léon", city: "Rome", type: "HOMME", status: "ACTIVE" },
+        { id: "1042", name: "Sainte Élisabeth", city: "Hongrie", type: "FEMME", status: "ACTIVE" },
+        { id: "1043", name: "Saint Sébastien", city: "Rome", type: "HOMME", status: "DELETED" },
+        { id: "1044", name: "Saint Laurent", city: "Rome", type: "HOMME", status: "ACTIVE" },
+        { id: "1045", name: "Sainte Agnès", city: "Rome", type: "FEMME", status: "ACTIVE" },
+        { id: "1046", name: "Saint Basile", city: "Césarée", type: "HOMME", status: "DISABLED" },
+        { id: "1047", name: "Saint Athanase", city: "Alexandrie", type: "HOMME", status: "ACTIVE" },
+        { id: "1048", name: "Saint Anselme", city: "Aoste", type: "HOMME", status: "ACTIVE" },
+        { id: "1049", name: "Sainte Brigitte", city: "Suède", type: "FEMME", status: "ACTIVE" },
+        { id: "1050", name: "Saint Albert", city: "Cologne", type: "HOMME", status: "ACTIVE" },
+        { id: "1051", name: "Saint Louis-Marie Grignion", city: "Montfort", type: "HOMME", status: "ACTIVE" },
+        { id: "1052", name: "Saint Charles Borromée", city: "Milan", type: "HOMME", status: "DISABLED" },
+        { id: "1053", name: "Sainte Geneviève", city: "Paris", type: "FEMME", status: "ACTIVE" },
+        { id: "1054", name: "Saint Philibert", city: "Tournus", type: "HOMME", status: "DELETED" },
+        { id: "1055", name: "Saint Dominique", city: "Caleruega", type: "HOMME", status: "ACTIVE" },
+        { id: "1056", name: "Sainte Scholastique", city: "Nursie", type: "FEMME", status: "ACTIVE" },
+        { id: "1057", name: "Saint François Xavier", city: "Navarre", type: "HOMME", status: "ACTIVE" },
+        { id: "1058", name: "Saint Vincent de Paul", city: "Pouy", type: "HOMME", status: "DISABLED" },
+        { id: "1059", name: "Sainte Louise de Marillac", city: "Paris", type: "FEMME", status: "ACTIVE" },
+        { id: "1060", name: "Saint Camille de Lellis", city: "Bucchianico", type: "HOMME", status: "ACTIVE" },
+        { id: "1061", name: "Saint Alphonse de Liguori", city: "Naples", type: "HOMME", status: "ACTIVE" },
+        { id: "1062", name: "Sainte Anne", city: "Jérusalem", type: "FEMME", status: "DELETED" },
+        { id: "1063", name: "Saint Joachim", city: "Jérusalem", type: "HOMME", status: "ACTIVE" },
+        { id: "1064", name: "Saint Isaac", city: "Ninive", type: "HOMME", status: "ACTIVE" },
+        { id: "1065", name: "Sainte Véronique", city: "Jérusalem", type: "FEMME", status: "DISABLED" },
+        { id: "1066", name: "Saint Éphrem", city: "Nisibe", type: "HOMME", status: "ACTIVE" },
+        { id: "1067", name: "Saint Maxime", city: "Chalcedoine", type: "HOMME", status: "ACTIVE" },
+        { id: "1068", name: "Sainte Julienne", city: "Cornillon", type: "FEMME", status: "ACTIVE" },
+        { id: "1069", name: "Saint Prosper", city: "Aquitaine", type: "HOMME", status: "ACTIVE" },
+        { id: "1070", name: "Saint Hilaire", city: "Poitiers", type: "HOMME", status: "DELETED" },
+        { id: "1071", name: "Saint Irénée", city: "Lyon", type: "HOMME", status: "ACTIVE" },
+        { id: "1072", name: "Sainte Odile", city: "Alsace", type: "FEMME", status: "ACTIVE" },
+        { id: "1073", name: "Saint Clément", city: "Rome", type: "HOMME", status: "ACTIVE" },
+        { id: "1074", name: "Saint Barnabé", city: "Chypre", type: "HOMME", status: "DISABLED" },
+        { id: "1075", name: "Sainte Philomène", city: "Rome", type: "FEMME", status: "ACTIVE" },
+        { id: "1076", name: "Saint Barthélemy", city: "Arménie", type: "HOMME", status: "ACTIVE" },
+        { id: "1077", name: "Saint Simon", city: "Canaan", type: "HOMME", status: "DELETED" },
+        { id: "1078", name: "Saint Jude", city: "Édesse", type: "HOMME", status: "ACTIVE" },
+        { id: "1079", name: "Saint Jacques", city: "Compostelle", type: "HOMME", status: "ACTIVE" },
+        { id: "1080", name: "Sainte Apolline", city: "Alexandrie", type: "FEMME", status: "ACTIVE" },
+        { id: "1081", name: "Saint Cyr", city: "Tarse", type: "HOMME", status: "DISABLED" },
+        { id: "1082", name: "Sainte Perpétue", city: "Carthage", type: "FEMME", status: "ACTIVE" },
+        { id: "1083", name: "Sainte Félicité", city: "Carthage", type: "FEMME", status: "ACTIVE" },
+        { id: "1084", name: "Saint Polycarpe", city: "Smyrne", type: "HOMME", status: "ACTIVE" },
+        { id: "1085", name: "Saint Justin", city: "Naplouse", type: "HOMME", status: "DELETED" },
+        { id: "1086", name: "Saint Clovis", city: "Soissons", type: "HOMME", status: "ACTIVE" },
+        { id: "1087", name: "Sainte Bathilde", city: "Chelles", type: "FEMME", status: "ACTIVE" },
+        { id: "1088", name: "Saint Louis de Gonzague", city: "Mantoue", type: "HOMME", status: "ACTIVE" },
+        { id: "1089", name: "Sainte Madeleine Sophie", city: "Joigny", type: "FEMME", status: "ACTIVE" },
+        { id: "1090", name: "Saint Claude", city: "Besançon", type: "HOMME", status: "DISABLED" },
+        { id: "1091", name: "Saint Bernard", city: "Clairvaux", type: "HOMME", status: "ACTIVE" },
+        { id: "1092", name: "Sainte Juliette", city: "Césarée", type: "FEMME", status: "ACTIVE" },
+        { id: "1093", name: "Saint Pierre Claver", city: "Verdú", type: "HOMME", status: "ACTIVE" },
+        { id: "1094", name: "Saint François de Sales", city: "Annecy", type: "HOMME", status: "ACTIVE" },
+        { id: "1095", name: "Sainte Jeanne de Chantal", city: "Bourgogne", type: "FEMME", status: "DELETED" },
+        { id: "1096", name: "Saint Prosper d'Aquitaine", city: "Aquitaine", type: "HOMME", status: "ACTIVE" },
+        { id: "1097", name: "Saint Raymond", city: "Barcelone", type: "HOMME", status: "ACTIVE" },
+        { id: "1098", name: "Sainte Marguerite-Marie", city: "Paray-le-Monial", type: "FEMME", status: "ACTIVE" },
+        { id: "1099", name: "Saint Jean-Marie Vianney", city: "Ars", type: "HOMME", status: "ACTIVE" },
+        { id: "1100", name: "Sainte Édith", city: "Angleterre", type: "FEMME", status: "ACTIVE" }
     ]
 
-	return json({ data: response }, { status: 201 });
+	return json({ data: response.slice((offset - 1) * limit, offset * limit), count: response.length }, { status: 200 });
 }

package/lib/table/CellLink.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <span>
-    <a href="{url}" data-sveltekit-preload-data="off">{text ? text : ''}</a>
+    <a href="{url}" data-sveltekit-preload-data="off" >{text ? text : ''}</a>
 </span>
 
 <style>

package/lib/table/Table.svelte

@@ -3,16 +3,18 @@
     import { onMount } from 'svelte';
 	import TableRow from "./TableRow.svelte";
     import TableFilter from './TableFilter.svelte';
+    import TablePagination from './TablePagination.svelte';
 
     export let columns = [];
     export let uri;
     export let actions = false;
+    export let pagination = false;
+    export let filters = false;
 
     let waiting = false;
     let selected = {};
-    let pagination = false;
     let total = 0;
-    let limit = 500;
+    let limit = 25;
     let page = 1;
 
     let data = [];
@@ -47,13 +49,14 @@
     async function getData() {
         waiting = true;
 
-        const response = await fetch(`${uri}?limit=${limit}&page=${page}`,  {
+        const response = await fetch(`${uri}?limit=${limit}&offset=${(page - 1) * limit}`,  {
             method: 'GET',
             headers: { 'Content-Type': 'application/json' }
         });
 
         const resBody = await response.json();
         data = resBody.data;
+        total = resBody.count ? resBody.count : 0;
 
         selected = {};
         waiting = false;
@@ -74,7 +77,6 @@
 
 </script>
 
-<!--<div style="max-width: min(calc(100% - 24px), 1100px) !important;">-->
 <div class="table-wrapper">
     <div>
         <!--<div >
@@ -86,20 +88,15 @@
                         <h4>{data.length} Schedules Rules</h4>
                         <span>({Object.values(selected).filter(Boolean).length} sélectionnées)</span>
                     </div>
-                    <div style="display: flex; gap: 12px;">
-                        <select bind:value={status} on:change={resetAndGetData} disabled={waiting} >
-                            {#each statuses as option}
-                                <option value={option.value}> {option.name} </option>
-                            {/each}
-                        </select>
-
-                    </div>
                 </div>
                 {/if}
             </div>
         </div>-->
 
-        <TableFilter columns={columns}></TableFilter>
+        {#if filters}
+            <TableFilter columns={columns}></TableFilter>
+        {/if}
+
         <div class="table-header">
             <div><div>
             {#each columns as c}
@@ -117,27 +114,12 @@
 
         <div class="table-body">
             {#each data as d }
-            <TableRow actions={actions} columns={columns} row={d}>
-            </TableRow>
+                <TableRow actions={actions} columns={columns} row={d}></TableRow>
             {/each}
 
-            <!--{#if pagination && data.length > 0}
-            <div class="footer-pagination" >
-                <div>
-                    Page <input type="number" bind:value={page} on:change={getData} disabled={waiting}/>
-                    / {Math.round(total / limit)}
-                </div>
-                <div>
-                    <select bind:value={limit} on:change={resetAndGetData} disabled={waiting} >
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="500">500</option>
-                        <option value="1000">1000</option>
-                    </select>
-                    / page
-                </div>
-            </div>
-            {/if}-->
+            {#if pagination && data.length > 0}
+                <TablePagination bind:page={page} bind:limit={limit} bind:waiting={waiting} bind:total={total} on:pageChange={getData} on:limitChange={resetAndGetData} ></TablePagination>
+            {/if}
 
             {#if data.length == 0}
                 <span>Aucune donnée disponible</span>
@@ -249,29 +231,5 @@
         font-weight: 600;
         font-size: 14px;
     }
-    .footer-pagination {
-        background-color: #f7f7f7;
-        border-bottom: 1px solid #e5e5e5;
-        width: calc(100% - 56px);
-        height: 48px;
-        padding: 0px 28px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #555;
-        font-weight: 600;
-        font-size: 14px;
-        display: flex;
-        justify-content: center;
-        width: calc(100% - 56px);
-    }
-    .footer-pagination input[type="number"]{
-        width: 50px;
-        background-color: #fff;
-        margin: 0px 6px;
-    }
-    .footer-pagination select{
-        background-color: #fff;
-        margin-left: 60px;
-    }
+
 </style>

package/lib/table/TablePagination.svelte

@@ -0,0 +1,66 @@
+<script>
+    import { createEventDispatcher } from 'svelte'
+    const dispatch = createEventDispatcher()
+
+    export let page;
+    export let limit;
+    export let waiting;
+    export let total;
+
+</script>
+
+<div class="footer-pagination" >
+    <div>
+        Page <input type="number" bind:value={page} onchange={() => { dispatch('pageChange', {})}} disabled={waiting}/>
+        / {Math.round(total / limit)}
+    </div>
+    <div>
+        <select bind:value={limit} onchange={() => { dispatch('limitChange', {})}} disabled={waiting} >
+            {#each [5, 10, 25, 50, 100, 500] as v }
+                <option value={v} selected={v == limit} >{v}</option>
+            {/each}
+        </select>
+        / page
+    </div>
+</div>
+
+<style>
+    .footer-pagination {
+        background-color: #f7f7f7;
+        border-bottom: 1px solid #e5e5e5;
+        width: calc(100% - 56px);
+        height: 48px;
+        padding: 0px 28px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #555;
+        font-weight: 600;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        width: calc(100% - 56px);
+    }
+    .footer-pagination input[type="number"]{
+        width: 50px;
+        background-color: #fff;
+        margin: 0px 6px;
+    }
+    .footer-pagination select{
+        background-color: #fff;
+        margin-left: 60px;
+    }
+    input, select {
+        background-color: var(--theme-input-bg-color, #ebebed);
+        height: 32px;
+        border: var(--theme-input-border, none);
+        border-radius: 8px;
+        padding: 0px 16px;
+        font-size: 14px;
+        line-height: 16px;
+        font-weight: 400;
+        font-family: var(--theme-text-font);
+        color: var(--theme-input-text-font);
+        cursor: pointer;
+    }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iconograph-ui",
-    "version": "1.2.26",
+    "version": "1.3.1",
     "description": "A Svelte Kit components library",
     "main": "./index.js",
     "svelte": "./index.js",