@likable-hair/svelte 3.1.51 → 3.2.0

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

@@ -32,33 +32,42 @@ function handleRowsPerPageChange(e) {
   handlePaginationChange();
 }
 function handlePaginationChange() {
+  let builder = buildFilters();
   dispatch("paginationChange", {
     rowsPerPage,
-    page
+    page,
+    builder
   });
 }
 function handleSearchChange(searchText2) {
+  let builder = buildFilters({ searchText: searchText2 });
+  dispatch("filtersChange", {
+    builder
+  });
+}
+$:
+  handleSearchChange(searchText);
+function handleFiltersChange() {
+  let builder = buildFilters({ searchText });
+  dispatch("filtersChange", {
+    builder
+  });
+}
+function buildFilters(params) {
   let converter = new Converter();
   let builder;
   builder = converter.createBuilder({
     filters: filters || []
   });
-  if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
+  if (!!params?.searchText && !!searchBarColumns && searchBarColumns.length > 0) {
     builder.where((b) => {
-      b.where(searchBarColumns[0], "ilike", "%" + searchText2 + "%");
+      b.where(searchBarColumns[0], "ilike", "%" + params?.searchText + "%");
       for (let i = 1; i < searchBarColumns.length; i += 1) {
-        b.orWhere(searchBarColumns[i], "ilike", "%" + searchText2 + "%");
+        b.orWhere(searchBarColumns[i], "ilike", "%" + params?.searchText + "%");
       }
     });
   }
-  dispatch("filtersChange", {
-    builder
-  });
-}
-$:
-  handleSearchChange(searchText);
-function handleFiltersChange() {
-  handleSearchChange(searchText);
+  return builder;
 }
 </script>
 
@@ -105,6 +114,7 @@ function handleFiltersChange() {
     bind:items
     bind:sortedBy
     bind:sortDirection
+    on:sort={handleFiltersChange}
     on:sort
     on:rowClick
     {calculateRowStyles}

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

@@ -13,9 +13,13 @@ export let calculateRowClasses = void 0;
 onMount(() => {
   if (resizableColumns) {
     for (const head of [...headers, { value: "slot-append" }]) {
-      let th = document.getElementById(head.value);
+      let th;
+      if (head.value == "slot-append") {
+        th = document.getElementsByClassName(head.value).item(0);
+      } else {
+        th = document.getElementById(head.value);
+      }
       if (!!th) {
-        let { paddingLeft, paddingRight } = getComputedStyle(th);
         let widthWihtPadding;
         if (!!resizedColumnSizeWithPadding[head.value]) {
           widthWihtPadding = resizedColumnSizeWithPadding[head.value];
@@ -23,7 +27,19 @@ onMount(() => {
           widthWihtPadding = th.getBoundingClientRect().width;
           resizedColumnSizeWithPadding[head.value] = widthWihtPadding;
         }
-        let width = widthWihtPadding - parseFloat(paddingLeft) - parseFloat(paddingRight);
+      }
+    }
+    for (const head of [...headers, { value: "slot-append" }]) {
+      let th;
+      if (head.value == "slot-append") {
+        th = document.getElementsByClassName(head.value).item(0);
+      } else {
+        th = document.getElementById(head.value);
+      }
+      if (!!th) {
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        let width = resizedColumnSizeWithPadding[head.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        console.log(resizedColumnSizeWithPadding[head.value], paddingLeft, paddingRight, width);
         th.style.width = `${width}px`;
       }
     }
@@ -82,7 +98,6 @@ function resize(node) {
       }
     }, mouseUpHandler = function(e) {
       if (!!th) {
-        e.stopPropagation();
         resizing = false;
         let { paddingLeft, paddingRight } = getComputedStyle(th);
         width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
@@ -157,7 +172,7 @@ function resize(node) {
             </th>
           {/each}
           {#if $$slots.rowActions || $$slots.append}
-            <th id="slot-append">
+            <th class="slot-append">
               <slot name="append" index={-1} items={undefined} />
             </th>
           {/if}
@@ -210,7 +225,7 @@ function resize(node) {
               </td>
             {/each}
             {#if $$slots.rowActions || $$slots.append}
-              <td class="{clazz.cell || ''}">
+              <td class="{clazz.cell || ''} append" style:width="fit-content">
                 <slot name="rowActions" index={i} {item} />
                 <slot name="append" index={i} {item} />
               </td>
@@ -223,6 +238,20 @@ function resize(node) {
 {/if}
 
 <style>
+
+  th.slot-append {
+    width: 1px;
+    min-width: unset;
+  }
+
+  .table.resizable .slot-append {
+    box-sizing: content-box;
+  }
+
+  .table.resizable td.append {
+    padding: 0;
+  }
+
   .simple-table-container.resizable {
     overflow-x: auto;
   }
@@ -239,6 +268,7 @@ function resize(node) {
     cursor: col-resize;
     background-clip: content-box;
     padding: 0px 5px 0px 5px;
+    box-sizing: content-box;
   }
 
   th:hover .resizer {
@@ -398,6 +428,7 @@ function resize(node) {
     min-width: 100px;
     position: relative;
     user-select: none;
+    box-sizing: content-box;
   }
 
   td {

package/package.json

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