iconograph-ui 1.4.0 → 1.4.2

package/index.js

@@ -19,6 +19,9 @@ import Modal from "./lib/layout/Modal.svelte"
 import FlexForm from "./lib/form/FlexForm.svelte";
 import Editor from "./lib/inputs/Editor.svelte";
 import SegmentedSwitchInput from "./lib/form/SegmentedSwitchInput.svelte"
+import DateStr from "./lib/display/DateStr.svelte";
+import Field from "./lib/display/Field.svelte";
+import Link from "./lib/display/Link.svelte";
 
 export {
     Button,
@@ -41,5 +44,8 @@ export {
     SelectUserInput,
     Modal,
     Editor,
+    DateStr,
+    Field,
+    Link,
     addNotification,
 };

package/lib/display/Field.svelte

@@ -0,0 +1,46 @@
+<script>
+    // @ts-nocheck
+    export let fields;
+    export let field;
+
+    export const __filter_options = fields;
+
+    function transform(arr) {
+        return arr.reduce((acc, obj) => {
+            const [key, value] = Object.entries(obj)[0]; // take the single key/value
+            acc[key] = value;
+            return acc;
+       }, {});
+    }
+
+    let f_arr = transform(fields);
+</script>
+
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="indicator-wrapper">
+        <span>{f_arr[field]} </span>
+    </div>
+
+<style>
+
+.indicator-wrapper {
+    max-width: calc(100% - 16px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 16px;
+    z-index: 12;
+}
+.indicator-wrapper > span{
+    font-weight: 600;
+    text-wrap: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #555;
+    font-weight: 600;
+    font-size: 11px;
+}
+</style>

package/lib/table/Table.svelte

@@ -52,10 +52,9 @@
 
     async function getData() {
         waiting = true;
+        data = [];
 
         const filterStr = Object.keys(filters).map(k => k + '=' + encodeURIComponent(filters[k])).join('&');
-        console.log(filterStr);
-
         const response = await fetch(`${uri}limit=${limit}&offset=${(page - 1) * limit}&${filterStr}`,  {
             method: 'GET',
             headers: { 'Content-Type': 'application/json' }
@@ -132,17 +131,16 @@
                 <TableRow actions={actions} columns={columns} row={d}></TableRow>
             {/each}
 
-            {#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}
+            {#if waiting}
+                <span style:background-image={`url("${loaderIcon}")`}>Chargement en cours</span>
+            {:else if data.length == 0}
                 <span>Aucune donnée disponible</span>
             {/if}
 
-            {#if waiting}
-                <span style:background-image={`url("${loaderIcon}")`}>Chargement en cours</span>
+            {#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}
+
         </div>
     </div>
 </div>

package/lib/table/TableRow.svelte

@@ -14,7 +14,7 @@
                 {#if c.component}
                     <svelte:component this={c.component} {...c.props} {...{ [c.field]: row[c.field], ...row }}/>
                 {:else}
-                    <span>{ (row[c.field] && row[c.field] != "undefined ") ? row[c.field] : ''}</span>
+                    <span>{ (row[c.field] && row[c.field] != "undefined") ? row[c.field] : ''}</span>
                 {/if}
             </div>
         {/each}

package/package.json

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