@likable-hair/svelte 3.1.46 → 3.1.48

package/dist/components/composed/list/PaginatedTable.svelte

@@ -14,7 +14,7 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true;
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {};
 export let calculateRowStyles = void 0;
 export let calculateRowClasses = void 0;
 let searchBarInput, searchText = void 0;
@@ -109,6 +109,8 @@ function handleFiltersChange() {
     on:rowClick
     {calculateRowStyles}
     {calculateRowClasses}
+    {resizableColumns}
+    bind:resizedColumnSizeWithPadding
   >
     <svelte:fragment slot="header" let:head>
       <slot name="header" {head} >

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -28,6 +28,10 @@ declare const __propDef: {
         lang?: "it" | "en" | undefined;
         editFilterMode?: "one-edit" | "multi-edit" | undefined;
         showActiveFilters?: boolean | undefined;
+        resizableColumns?: boolean | undefined;
+        resizedColumnSizeWithPadding?: {
+            [value: string]: number;
+        } | undefined;
         calculateRowStyles?: CalculateRowStyles | undefined;
         calculateRowClasses?: CalculateRowClasses | undefined;
     };

package/dist/components/simple/charts/GanymedeBarChart.svelte

@@ -30,15 +30,18 @@ let mounted = false, zoomMounted = false;
 onMount(() => {
   mounted = true;
 });
-let rgbTooltipColor = void 0;
-let rgbTooltipBackgroundColor = void 0;
-let rgbBackgroundColor = void 0;
+export let rgbTooltipColor = void 0;
+export let rgbTooltipBackgroundColor = void 0;
+export let rgbBackgroundColor = void 0;
 $:
-  rgbTooltipColor = $theme.colors?.[$theme.active]["dark"]["primary"]["300"];
+  if (!rgbTooltipColor && !!$theme.colors?.[$theme.active]["dark"]["primary"]["300"])
+    rgbTooltipColor = $theme.colors?.[$theme.active]["dark"]["primary"]["300"];
 $:
-  rgbTooltipBackgroundColor = $theme.colors?.[$theme.active]["dark"]["primary"]["900"];
+  if (!rgbTooltipBackgroundColor && !!$theme.colors?.[$theme.active]["dark"]["primary"]["900"])
+    rgbTooltipBackgroundColor = $theme.colors?.[$theme.active]["dark"]["primary"]["900"];
 $:
-  rgbBackgroundColor = $theme.colors?.[$theme.active]["dark"]["background"]["200"];
+  if (!rgbBackgroundColor && !!$theme.colors?.[$theme.active]["dark"]["background"]["200"])
+    rgbBackgroundColor = $theme.colors?.[$theme.active]["dark"]["background"]["200"];
 $:
   finalTooltipColor = !!rgbTooltipColor ? `rgb(${rgbTooltipColor}, .8)` : void 0;
 $:

package/dist/components/simple/charts/GanymedeBarChart.svelte.d.ts

@@ -25,6 +25,9 @@ declare const __propDef: {
         tooltipLabel?: ((tooltip: import("chart.js").TooltipItem<"bar">) => string) | undefined;
         yTickLabel?: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined;
         xTickLabel?: ((tickValue: string | number, index: number, ticks: any[]) => (string | number)) | undefined;
+        rgbTooltipColor?: string | undefined;
+        rgbTooltipBackgroundColor?: string | undefined;
+        rgbBackgroundColor?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/lists/SimpleTable.svelte

@@ -3,13 +3,34 @@
 <script>import "../../../css/main.css";
 import "./SimpleTable.css";
 import Icon from "../media/Icon.svelte";
-import { createEventDispatcher } from "svelte";
+import { createEventDispatcher, onMount } from "svelte";
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc";
+export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc", resizableColumns = false, resizedColumnSizeWithPadding = {};
 export let calculateRowStyles = void 0;
 export let calculateRowClasses = void 0;
+onMount(() => {
+  if (resizableColumns) {
+    for (const head of [...headers, { value: "slot-append" }]) {
+      let th = document.getElementById(head.value);
+      if (!!th) {
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        let widthWihtPadding;
+        if (!!resizedColumnSizeWithPadding[head.value]) {
+          widthWihtPadding = resizedColumnSizeWithPadding[head.value];
+        } else {
+          widthWihtPadding = th.getBoundingClientRect().width;
+          resizedColumnSizeWithPadding[head.value] = widthWihtPadding;
+        }
+        let width = widthWihtPadding - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        th.style.width = `${width}px`;
+      }
+    }
+    let table = document.getElementsByClassName("table")[0];
+    table.classList.add("resizable");
+  }
+});
 function handleHeaderClick(header) {
   if (header.sortable) {
     if (!!sortedBy && header.value == sortedBy) {
@@ -36,20 +57,82 @@ function handleRowClick(item) {
 function formatDate(dateTime, dateFormat) {
   return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
 }
+function resize(node) {
+  let th = node.parentElement;
+  let thead = document.getElementsByClassName("thead").item(0);
+  if (!!th && !!thead && thead instanceof HTMLElement) {
+    let mouseMoveHandler = function(e) {
+      if (resizing && !!th) {
+        width += e.movementX;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        let minWidth = headers.find((h) => h.value === th.id)?.minWidth;
+        let minWidthPx = void 0;
+        if (!!minWidth && minWidth.endsWith("px")) {
+          minWidthPx = parseInt(minWidth, 10);
+        }
+        let actualMinWidth = (minWidthPx || 50) - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        if (width > actualMinWidth) {
+          th.style.width = width + "px";
+          resizedColumnSizeWithPadding[th.id] = th.getBoundingClientRect().width;
+          dispatch("columnResize", {
+            id: th.id,
+            newWidthPx: width
+          });
+        }
+      }
+    }, mouseUpHandler = function(e) {
+      if (!!th) {
+        e.stopPropagation();
+        resizing = false;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+      }
+    }, mouseDownHandler = function(e) {
+      if (!!th) {
+        e.stopPropagation();
+        resizing = true;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+      }
+    };
+    let resizing = false;
+    let { width } = th.getBoundingClientRect();
+    node.addEventListener("mousedown", mouseDownHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    return {
+      destroy() {
+        node.removeEventListener("mousedown", mouseDownHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+      }
+    };
+  }
+}
 </script>
 
 {#if !!items && Array.isArray(items)}
-  <div class="simple-table-container {clazz.container || ''}">
+  <div class="simple-table-container {clazz.container || ''}" class:resizable={resizableColumns}>
     <table class="table">
       <thead class="thead {clazz.header || ''}">
         <tr>
           {#each headers as head}
             <th
-              style:width={head.width}
+              tabindex="0"
+              style={`${resizableColumns || !head.width ? '' : `width: ${head.width}`}`}
               style:min-width={head.minWidth}
               class:sortable={head.sortable}
-              on:click={() => handleHeaderClick(head)}
+              on:mousedown={() => handleHeaderClick(head)}
+              on:keydown={(e) => {
+                if(e.key == 'Enter') {
+                  handleHeaderClick(head)
+                }
+              }}
+              id={head.value}
             >
+              {#if resizableColumns}
+                <div class="resizer" use:resize></div>
+              {/if}
               <slot name="header" {head}>
                 <span class="header-label">
                   <slot name="headerLabel">
@@ -74,7 +157,7 @@ function formatDate(dateTime, dateFormat) {
             </th>
           {/each}
           {#if $$slots.rowActions || $$slots.append}
-            <th>
+            <th id="slot-append">
               <slot name="append" index={-1} items={undefined} />
             </th>
           {/if}
@@ -121,7 +204,7 @@ function formatDate(dateTime, dateFormat) {
                   {:else}
                     {item[header.value]}
                   {/if}
-                {:else} 
+                {:else}
                   {item[header.value]}
                 {/if}
               </td>
@@ -140,6 +223,29 @@ function formatDate(dateTime, dateFormat) {
 {/if}
 
 <style>
+  .simple-table-container.resizable {
+    overflow-x: auto;
+  }
+
+  .resizer {
+    width: 2px;
+    display: none;
+    position: absolute;
+    right: 5%;
+    top: 10%;
+    bottom: 10%;
+    z-index: 1000;
+    background-color: rgb(var(--simple-table-column-resizer-color, var(--global-color-contrast-400)));
+    cursor: col-resize;
+    background-clip: content-box;
+    padding: 0px 5px 0px 5px;
+  }
+
+  th:hover .resizer {
+    display: inline-block;
+  }
+
+
   .simple-table-container {
     width: var(--simple-table-width, var(--simple-table-default-width));
     min-width: var(
@@ -197,6 +303,10 @@ function formatDate(dateTime, dateFormat) {
     user-select: none;
   }
 
+  .table.resizable .thead th.sortable {
+    transition: none;
+  }
+
   .thead th.sortable:hover {
     color: var(
       --simple-table-header-hover-color,
@@ -271,10 +381,23 @@ function formatDate(dateTime, dateFormat) {
     width: 100%;
   }
 
+  .table.resizable {
+    table-layout: fixed;
+    width: fit-content;
+  }
+
+  .table.resizable td, th {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   th {
     text-align: start;
     padding-left: 10px;
     min-width: 100px;
+    position: relative;
+    user-select: none;
   }
 
   td {

package/dist/components/simple/lists/SimpleTable.svelte.d.ts

@@ -35,6 +35,10 @@ declare const __propDef: {
         items?: Item[] | undefined;
         sortedBy?: string | undefined;
         sortDirection?: "desc" | "asc" | undefined;
+        resizableColumns?: boolean | undefined;
+        resizedColumnSizeWithPadding?: {
+            [value: string]: number;
+        } | undefined;
         calculateRowStyles?: CalculateRowStyles | undefined;
         calculateRowClasses?: CalculateRowClasses | undefined;
     };
@@ -46,6 +50,10 @@ declare const __propDef: {
         rowClick: CustomEvent<{
             item: Item;
         }>;
+        columnResize: CustomEvent<{
+            id: string;
+            newWidthPx: number;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/utils/countries.js

@@ -42,7 +42,7 @@ export const countriesList = [
     { alpha2: "CF", name: "Central African Republic" },
     { alpha2: "CG", name: "Congo" },
     { alpha2: "CH", name: "Switzerland" },
-    { alpha2: "CI", name: "Côte d'Ivoire" },
+    { alpha2: "CI", name: "Cote d'Ivoire" },
     { alpha2: "CK", name: "Cook Islands" },
     { alpha2: "CL", name: "Chile" },
     { alpha2: "CM", name: "Cameroon" },
@@ -223,7 +223,7 @@ export const countriesList = [
     { alpha2: "TM", name: "Turkmenistan" },
     { alpha2: "TN", name: "Tunisia" },
     { alpha2: "TO", name: "Tonga" },
-    { alpha2: "TR", name: "Türkiye" },
+    { alpha2: "TR", name: "Turkiye" },
     { alpha2: "TT", name: "Trinidad and Tobago" },
     { alpha2: "TV", name: "Tuvalu" },
     { alpha2: "TW", name: "Taiwan, Province of China" },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.46",
+  "version": "3.1.48",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",