@likable-hair/svelte 3.1.51 → 3.1.52

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.1.52",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",