@poirazis/supercomponents-shared 1.0.9 → 1.0.18

package/src/lib/SuperTable/SuperTable.svelte

@@ -3,6 +3,7 @@
   import fsm from "svelte-fsm";
   import { writable } from "svelte/store";
 
+  import "./SuperTable.css";
   import {
     sizingMap,
     defaultOperatorMap,
@@ -290,11 +291,14 @@
   $: cumulativeHeights = derivedMemo(
     [stbRowMetadata, stbSettings],
     ([$meta, $settings]) => {
-      const defaultRowHeight = $settings.appearance?.rowHeight || 36; // Fallback if undefined
+      const defaultRowHeight = $settings.appearance?.rowHeight || 36;
       return $meta.map((_, i) =>
         $meta
           .slice(0, i + 1)
-          .reduce((sum, meta) => sum + (meta.height || defaultRowHeight), 0)
+          .reduce(
+            (sum, meta) => sum + Math.max(meta.height || defaultRowHeight, 0),
+            0
+          )
       );
     }
   );
@@ -703,11 +707,10 @@
         if (!rows?.length || !viewport || !$cumulativeHeights.length) return;
 
         const defaultRowHeight = $stbSettings.appearance.rowHeight;
-        let start = $stbVisibleRows?.length ? $stbVisibleRows[0] - 1 : 0;
-        start = Math.max(0, start); // Ensure start doesn't go negative
-        let end = 0;
+        let start = 0,
+          end = rows.length;
 
-        // Find start index using cumulativeHeights
+        // Find start index
         for (let i = 0; i < rows.length; i++) {
           if ($cumulativeHeights[i] > $stbScrollPos) {
             start = i;
@@ -715,45 +718,30 @@
           }
         }
 
-        // Find end index using cumulativeHeights
+        // Find end index
         for (let i = start; i < rows.length; i++) {
-          if (
-            $cumulativeHeights[i] >=
-            $stbScrollPos + maxBodyHeight - defaultRowHeight
-          ) {
+          if ($cumulativeHeights[i] >= $stbScrollPos + maxBodyHeight) {
             end = i + 1;
             break;
           }
         }
 
-        // Ensure all rows are included when at the bottom
-        end = end || rows.length;
-
         // Update visible rows
         $stbVisibleRows = $stbData?.rows
-          ?.slice(start, end)
+          .slice(start, end)
           .map((_, i) => i + start);
 
-        // Calculate scroll offset for rendering
+        // Calculate scroll offset
         const startHeight = start > 0 ? $cumulativeHeights[start - 1] : 0;
         $stbScrollOffset = $stbScrollPos - startHeight;
 
-        // Ensure offset doesn't exceed bounds at the end
-        if ($stbScrollPos >= scrollHeight - maxBodyHeight) {
-          $stbScrollPos = Math.max(0, scrollHeight - maxBodyHeight);
-          $stbScrollOffset = Math.min(
-            $stbScrollOffset,
-            maxBodyHeight - defaultRowHeight
-          );
-        }
-
-        // Fetch more rows if nearing the end of loaded data
+        // Fetch more rows if nearing the end
         if (fetchOnScroll && rows.length > 0) {
           const loadedHeight = $cumulativeHeights[rows.length - 1];
           const remainingHeight =
             loadedHeight - ($stbScrollPos + maxBodyHeight);
-          if (remainingHeight < maxBodyHeight && rows.length == _limit) {
-            stbState.fetchMoreRows.debounce(200, 100); // Debounced fetch call
+          if (remainingHeight < maxBodyHeight && rows.length === _limit) {
+            stbState.fetchMoreRows.debounce(200, 100); // Debounced fetch
           }
         }
       },
@@ -769,11 +757,7 @@
           scrollHeight > maxBodyHeight
             ? $stbScrollPos / (scrollHeight - maxBodyHeight)
             : 0;
-        $stbScrollOffset = Math.floor(
-          $stbScrollPos % $stbSettings.appearance.rowHeight
-        );
-
-        this.calculateRowBoundaries.debounce(1);
+        window.requestAnimationFrame(() => this.calculateRowBoundaries());
       },
       handleWheel(e) {
         if ($stbState == "Inserting") {
@@ -1194,8 +1178,6 @@
   $: console.log("Table Filters : ", stbColumnFilters);
   $: console.log("Table Settings : ", $stbSettings);
   */
-
-  $: console.log($stbSchema);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

package/src/lib/SuperTableCells/CellCommon.css

@@ -205,6 +205,8 @@
   color: var(--spectrum-global-color-gray-800);
   border: 1px solid var(--spectrum-global-color-gray-300);
   background: var(--spectrum-global-color-gray-50);
+  min-height: 2rem;
+  max-height: 2rem;
 
   &:focus-within {
     border: 1px solid var(--spectrum-global-color-blue-400) !important;

package/src/lib/SuperTableCells/CellIcon.svelte

@@ -180,7 +180,6 @@
   class:readonly
   on:click={!readonly
     ? () => {
-        console.log(open);
         open = !open;
       }
     : null}

package/src/lib/SuperTableCells/CellString.svelte

@@ -1,5 +1,10 @@
 <script>
-  import { createEventDispatcher, getContext, onMount } from "svelte";
+  import {
+    createEventDispatcher,
+    getContext,
+    onMount,
+    onDestroy,
+  } from "svelte";
   import fsm from "svelte-fsm";
   const dispatch = createEventDispatcher();
   const { processStringSync } = getContext("sdk");
@@ -28,6 +33,7 @@
       reset() {
         localValue = value;
         lastEdit = undefined;
+        return "View";
       },
     },
     View: {
@@ -109,6 +115,11 @@
         cellState.focus();
       }, 50);
   });
+
+  onDestroy(() => {
+    clearTimeout(timer);
+    cellState.reset();
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->

package/src/lib/SuperTableCells/CellStringSimple.svelte

@@ -11,11 +11,11 @@
   };
 
   $: formattedValue =
-    !formattedValue && cellOptions?.template
+    cellOptions?.template
       ? processStringSync(cellOptions.template, {
           value,
         })
-      : formattedValue;
+      : undefined;;
 
   $: placeholder =
     cellOptions.readonly || cellOptions.disabled

package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte

@@ -34,7 +34,7 @@
   class:is-editing={editing}
 >
   {#if rows?.length}
-    {#each $stbVisibleRows as index}
+    {#each $stbVisibleRows as index (index)}
       {#if rows[index]}
         <SuperColumnRow
           {isLast}

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -1,7 +1,13 @@
 <script>
-  import { getContext, createEventDispatcher, onMount, tick } from "svelte";
+  import {
+    getContext,
+    createEventDispatcher,
+    onMount,
+    tick,
+    onDestroy,
+  } from "svelte";
 
-  const { Provider, processStringSync, ContextScopes } = getContext("sdk");
+  const { Provider, ContextScopes } = getContext("sdk");
 
   const dispatch = createEventDispatcher();
   const columnSettings = getContext("stColumnOptions");
@@ -10,6 +16,7 @@
   const rowMetadata = getContext("stbRowMetadata");
   const stbHovered = getContext("stbHovered");
   const stbSelected = getContext("stbSelected");
+  const stbEditing = getContext("stbEditing");
   const stbAPI = getContext("stbAPI");
   const stbState = getContext("stbState");
   const stbMenuID = getContext("stbMenuID");
@@ -34,12 +41,6 @@
   $: isSelected = $stbSelected.includes(id);
   $: hasChildren = $columnSettings.hasChildren > 0;
 
-  const getCellValue = (value) => {
-    return $columnSettings.template
-      ? processStringSync($columnSettings.template, { value })
-      : undefined;
-  };
-
   const patchRow = async (change) => {
     let patch = {
       ...row,
@@ -88,6 +89,12 @@
     } else return obj[path] ?? undefined;
   };
   onMount(() => (mounted = $columnSettings.superColumn));
+
+  onDestroy(() => {
+    if ($stbEditing == index) {
+      columnState.exitedit();
+    }
+  });
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->