iconograph-ui 1.4.9 → 1.4.12

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

@@ -29,6 +29,12 @@
         { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
         { field: "type", label: "Type", component: CustomLabel, props: {}, width: 120, sort: (a, b) => null, filterOptions: enumType},
         { field: "status", label: "Statut", component: null, props: {}, width: 120, sort: (a, b) => null, filterOptions: false},
+        { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
+        { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
+        { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
+        { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
+        { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
+        { field: "city", label: "Ville", component: null, props: {}, width: 200, sort: (a, b) => a.name.localeCompare(b.name)},
     ]
 
     let uri = "/example?"

package/example/src/routes/+page.svelte

@@ -12,6 +12,7 @@
     import Editor from "$lib/iconograph-ui/inputs/Editor.svelte";
     import SegmentedSwitchInput from "$lib/iconograph-ui/form/SegmentedSwitchInput.svelte"
     import Link from "$lib/iconograph-ui/display/Link.svelte";
+    import SelectUserInput from "$lib/iconograph-ui/user/SelectUserInput.svelte";
 
     let options = [{ key: "Value" }]
     let inputs = [
@@ -67,6 +68,12 @@
     <Card padding={'0px'}>
         <Editor on:change={onEditorChange}></Editor>
     </Card>
+
+    <Card>
+
+        <SelectUserInput multiple={true}></SelectUserInput>
+
+    </Card>
 </BodySection>
 
 <Modal bind:open={open}>

package/example/src/routes/user/+page.svelte

@@ -8,6 +8,7 @@
     import UserSelect from "$lib/iconograph-ui/user/UserSelect.svelte";
 
     import Form from "$lib/iconograph-ui/form/Form.svelte";
+    import ActionButton from "$lib/iconograph-ui/form/ActionButton.svelte";
     import Input from "$lib/iconograph-ui/form/Input.svelte";
     import SexeChoiceInput from "$lib/iconograph-ui/form/SexeChoiceInput.svelte";
     import CustomInput from "$lib/components/CustomInput.svelte";
@@ -59,6 +60,9 @@
                     </div>
                     <span class="margin-l-s" style="text-transform: uppercase; color: #888; font-weight: 600;"></span>
                 </div>
+                <div style="margin-right: 60px;">
+                    <ActionButton options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
+                </div>
             </div>
         </div>
     </div>

package/index.js

@@ -22,6 +22,7 @@ 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";
+import ActionButton from "./lib/form/ActionButton.svelte";
 
 export {
     Button,
@@ -47,5 +48,6 @@ export {
     DateStr,
     Field,
     Link,
+    ActionButton,
     addNotification,
 };

package/lib/assets/icons/icon-details.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0,0,256,256"
+   width="52px"
+   height="52px"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="icon-details.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="5.639423"
+     inkscape:cx="34.134698"
+     inkscape:cy="24.913896"
+     inkscape:window-width="1366"
+     inkscape:window-height="697"
+     inkscape:window-x="1724"
+     inkscape:window-y="1432"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g2" />
+  <g
+     fill="#ffffff"
+     fill-rule="nonzero"
+     stroke="none"
+     stroke-width="1"
+     stroke-linecap="butt"
+     stroke-linejoin="miter"
+     stroke-miterlimit="10"
+     stroke-dasharray=""
+     stroke-dashoffset="0"
+     font-family="none"
+     font-weight="none"
+     font-size="none"
+     text-anchor="none"
+     style="mix-blend-mode: normal"
+     id="g2">
+    <circle
+       style="fill:#353435;fill-opacity:1;stroke-width:58.4123;paint-order:stroke markers fill"
+       id="path1"
+       cx="128"
+       cy="33.164097"
+       r="30.319672" />
+    <circle
+       style="mix-blend-mode:normal;fill:#353435;fill-opacity:1;stroke-width:58.4123;paint-order:stroke markers fill"
+       id="path1-1"
+       cx="128"
+       cy="129.33942"
+       r="30.319672" />
+    <circle
+       style="mix-blend-mode:normal;fill:#353435;fill-opacity:1;stroke-width:58.4123;paint-order:stroke markers fill"
+       id="path1-2"
+       cx="128"
+       cy="225.51472"
+       r="30.319672" />
+  </g>
+</svg>

package/lib/assets/icons/icon-next-w.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   width="96px"
+   height="96px"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon-next-w.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="3.6902135"
+     inkscape:cx="34.279859"
+     inkscape:cy="51.081055"
+     inkscape:window-width="1366"
+     inkscape:window-height="697"
+     inkscape:window-x="296"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     style="color:#000000;fill:#ffffff;stroke-linecap:square;-inkscape-stroke:none"
+     d="M 8.7481553,4.4712861 15.251845,10.974975"
+     id="path7" />
+  <path
+     id="path8"
+     style="color:#000000;fill:#ffffff;stroke-width:1.19665;stroke-linecap:square;-inkscape-stroke:none"
+     d="M 8.0956441,2.2032465 5.980469,4.3184215 7.0392251,5.3771777 13.762794,12.1025 7.0392251,18.828406 5.980469,19.884825 8.0956441,22 9.1544,20.94358 l 7.780572,-7.782908 1.058756,-1.058756 v -5.85e-4 L 17.729039,11.837226 15.878553,9.98674 15.877969,9.987324 9.1544,3.2620026 Z" />
+</svg>

package/lib/form/ActionButton.svelte

@@ -0,0 +1,109 @@
+<script>
+    // @ts-nocheck
+    import { onMount } from 'svelte';
+    import Portal from 'svelte-portal';
+    import { clickOutside } from './../utils/clickOutside.js';
+    import detailsIcon from '../assets/icons/icon-details.svg?url';
+
+    export let options = [];
+
+    let open = false;
+    let dropdownEl;
+    let coords = { top: 0, left: 0, width: 0 };
+
+    function openDropdown() {
+        const rect = dropdownEl.getBoundingClientRect();
+        coords = { top: rect.bottom, left: rect.left, width: rect.width };
+        open = !open;
+    }
+
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="dropdown {open ? 'open' : ''}" bind:this={dropdownEl} use:clickOutside on:click_outside={() => {open = false}}
+    on:click|preventDefault|stopPropagation={openDropdown}>
+    <div style:background-image={`url("${detailsIcon}")`}>Actions</div>
+
+    <!-- Liste déroulante -->
+    {#if open}
+    <Portal target="body" >
+        <div class="list" style="position: absolute; top:{coords.top + 2}px; left:{coords.left + coords.width - 200}px; width: {coords.width}px;" >
+        <!-- Options -->
+        {#each options as opt}
+            <div class="option" on:click={opt.action}>
+                <span>{opt.label}</span>
+            </div>
+        {/each}
+        </div>
+    </Portal>
+    {/if}
+
+</div>
+
+<style>
+.dropdown {
+    position: relative;
+    display: flex;
+    height: var(--theme-input-height, 40px);
+    flex: 1;
+}
+.dropdown.open {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+.dropdown > div:first-of-type {
+    background-color: #ebebed;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    padding: 0px 16px;
+    font-size: 14px;
+    line-height: 40px;
+    font-weight: 600;
+    font-family: var(--theme-text-font);
+    color: #333;
+    flex: 1;
+    min-width: 76px;
+    background-size: 16px auto;
+    background-repeat: no-repeat;
+    background-position: center right 16px;
+    padding-left: 24px;
+}
+.dropdown > div:first-of-type:hover {
+    background-color: #ddd;
+}
+.list {
+    position: absolute;
+    top: 100%;
+    right: 0px;
+    background: var(--theme-input-bg-highlight, #ebebed);
+    border-radius: 8px;
+    padding: 8px 0px;
+    max-height: 220px;
+    overflow-y: auto;
+    z-index: 9999;
+    min-width: 200px;
+}
+.option {
+    display: flex;
+    align-items: center;
+    padding: 8px 24px;
+    gap: 8px;
+    cursor: pointer;
+}
+.option > span {
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 400;
+    font-family: var(--theme-text-font);
+    color: var(--theme-input-text-color);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.option:hover {
+    background: var(--theme-input-bg-hover);
+}
+</style>

package/lib/table/Table.svelte

@@ -23,6 +23,9 @@
 
     let data = [];
 
+    let els = [];
+    let actualWidths = columns.map(c => c.width);
+
     /*
     function handleSort(sname) {
         settings.forEach(e => {
@@ -82,13 +85,28 @@
 
     onMount(() => {
         resetAndGetData()
+        const observers = [];
+
+        columns.forEach((_, i) => {
+            const ob = new ResizeObserver(() => {
+                actualWidths[i] = els[i].offsetWidth;
+                //columns[i].width = actualWidths[i];
+
+                actualWidths = [...actualWidths];
+            });
+
+            ob.observe(els[i]);
+            observers.push(ob);
+        });
+
+        return () => observers.forEach(o => o.disconnect());
     });
 
 </script>
 
 <div class="table-wrapper">
     <div>
-        <div >
+        <div>
             <div>
                 {#if header}
                 <div class="hd-actions" >
@@ -107,14 +125,16 @@
             </div>
         </div>
 
+        <div>
         {#if filtering}
             <TableFilter columns={columns} on:filter={(e) => resetAndGetData(e.detail)}></TableFilter>
         {/if}
+        </div>
 
         <div class="table-header">
             <div><div>
-            {#each columns as c}
-                <div style="min-width: {c.width}px; width: {c.width}px;">
+            {#each columns as c, i}
+                <div bind:this={els[i]} style="min-width: {c.width}px; width: {c.width}px;" class="col-h">
                     {c.label}
                     {#if c.sort != null }
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -190,6 +210,9 @@
         padding-right: 24px;
         display: flex;
         gap: 8px;
+        /*border-right: 1px red solid;
+        resize: horizontal;
+        overflow: hidden;*/
     }
     .table-body {
         width: 100%;

package/lib/user/SelectUserInput.svelte

@@ -31,7 +31,9 @@
             <div>
                 <div class="user-label">
                     <UserPicture size={24} user={v}></UserPicture>
-                    <span>{v.firstname} {v.lastname}</span>
+                    <a href={`/user/${v.id}`}>
+                        <span>{v.firstname} {v.lastname}</span>
+                    </a>
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_static_element_interactions -->
                     <div on:click={() => handleRemove(v.id)}>+</div>
@@ -49,7 +51,9 @@
         {:else}
             <div class="user-label">
                 <UserPicture size={24} user={value}></UserPicture>
-                <span>{value.firstname} {value.lastname}</span>
+                <a href={`/user/${value.id}`}>
+                    <span>{value.firstname} {value.lastname}</span>
+                </a>
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <div on:click={handleRemove}>+</div>
@@ -76,7 +80,7 @@
     display: flex;
     align-items: center;
     background-color: #ffffff;
-    height: var(--theme-input-height, 40px);
+    height: calc(var(--theme-input-height, 40px) - 2px);
     border: 1px solid #e4e4e4;
     border-radius: 8px;
     padding: 0px 16px;
@@ -87,7 +91,7 @@
     color: var(--theme-input-text-font);
     flex: 1;
 }
-.user-label > span {
+.user-label span {
     font-size: 14px;
     line-height: 16px;
     font-weight: 400;
@@ -99,6 +103,9 @@
     margin-left: 8px;
     flex: 1;
 }
+.user-label a, .user-label span {
+    flex: 1;
+}
 .user-label > div:nth-of-type(2) {
     cursor: pointer;
     margin-left: 8px;

package/lib/user/UserSelect.svelte

@@ -16,6 +16,7 @@
     let open = false;
     let search = "";
 
+    let y = 0;
     let dropdownEl;
     let coords = { top: 0, left: 0, width: 0 };
 
@@ -48,6 +49,8 @@
 
 </script>
 
+<svelte:window bind:scrollY={y} />
+
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="dropdown {open ? 'open' : ''}" bind:this={dropdownEl} use:clickOutside on:click_outside={() => {open = false}}
@@ -58,7 +61,7 @@
     <!-- Liste déroulante -->
     {#if open}
     <Portal target="body" >
-        <div class="list" style="position: absolute; top:{coords.top}px; left:{coords.left}px; width: {coords.width}px;" >
+        <div class="list" style="position: absolute; top:{coords.top + y}px; left:{coords.left}px; width: {coords.width}px;" >
         <!-- Options -->
         {#each users as user}
             <div class="option" on:click={() => selectUser(user)}>

package/package.json

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