@poirazis/supercomponents-shared 1.0.11 → 1.0.19

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
+          )
       );
     }
   );
@@ -647,10 +651,8 @@
       init() {
         return "Init";
       },
-      async refresh() {
-        if (stbData.loaded) await stbData?.refresh();
-        this.enrichRows();
-        this.calculateRowBoundaries();
+      refresh() {
+        stbData?.refresh();
       },
       enrichRows() {},
       scrollToTop() {
@@ -703,11 +705,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 +716,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 +755,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 +1176,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/CellNumber.svelte

@@ -1,104 +1,119 @@
-<script>
-  import { createEventDispatcher, getContext, onMount } from "svelte";
+<script lang="ts">
+  import {
+    createEventDispatcher,
+    getContext,
+    onDestroy,
+    onMount,
+  } from "svelte";
   import fsm from "svelte-fsm";
 
   const { processStringSync } = getContext("sdk");
   const context = getContext("context");
   const dispatch = createEventDispatcher();
 
-  export let value;
-  export let formattedValue;
-  export let cellOptions;
-  export let autofocus;
+  export let value: number | null;
+  export let formattedValue: string | undefined;
+  export let cellOptions: any;
+  export let autofocus: boolean;
 
-  let originalValue = value;
-  let inEdit;
-  let localValue = value;
-  let editor;
-
-  $: inEdit = $cellState == "Editing";
-  $: inline = cellOptions.role == "inlineInput";
-  $: isDirty = inEdit && originalValue != localValue;
-  $: formattedValue = cellOptions.template
-    ? processStringSync(cellOptions.template, {
-        ...$context,
-        value: localValue,
-      })
-    : undefined;
-
-  $: placeholder =
-    cellOptions.readonly || cellOptions.disabled
-      ? ""
-      : cellOptions.placeholder || "";
+  let originalValue: number | null = value;
+  let inEdit: boolean;
+  let localValue: number | null = value;
+  let editor: HTMLInputElement;
+  let lastEdit: Date | undefined;
+  let timer: ReturnType<typeof setTimeout>;
 
   export let cellState = fsm(cellOptions.initialState ?? "View", {
     "*": {
-      goTo(state) {
+      goTo(state: string) {
         return state;
       },
+      reset() {
+        localValue = value;
+        lastEdit = undefined;
+        return "View";
+      },
     },
     View: {
+      _enter() {
+        localValue = value;
+      },
       focus() {
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
       },
     },
-    Hovered: {
-      cancel: () => {
-        return "View";
-      },
-    },
-    Focused: {
-      unfocus() {
-        return "View";
-      },
-    },
-    Error: { check: "View" },
     Editing: {
       _enter() {
-        originalValue = localValue;
+        originalValue = value;
         editor?.focus();
         dispatch("enteredit");
       },
       _exit() {
+        originalValue = undefined;
         dispatch("exitedit");
-      },
-      focusout() {
-        if (isDirty && !cellOptions.debounce) dispatch("change", localValue);
-
         dispatch("focusout");
-        return "View";
       },
       clear() {
         if (cellOptions.debounce) dispatch("change", null);
+        lastEdit = new Date();
         localValue = null;
       },
+      focusout(e: FocusEvent) {
+        this.submit();
+      },
+      submit() {
+        if (isDirty) {
+          dispatch("change", localValue);
+        }
+        return "View";
+      },
       cancel() {
         value = originalValue;
+        dispatch("cancel");
+        return "View";
+      },
+      debounce(e: KeyboardEvent) {
+        if ((e.key.length === 1 && e.key !== "." && isNaN(Number(e.key)) && !e.ctrlKey) ||
+            e.keyCode == 32 ||
+            (e.key === "." && e.target.value.toString().indexOf(".") > -1)) {
+          e.preventDefault();
+          return;
+        }
+        localValue = Number(e.target.value);
+        lastEdit = new Date();
+        if (cellOptions?.debounce) {
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            dispatch("change", localValue);
+          }, cellOptions.debounce ?? 0);
+        }
+      },
+      handleKeyboard(e: KeyboardEvent) {
+        if (e.key == "Enter") this.submit();
+        if (e.key == "Escape") this.cancel();
       },
     },
   });
 
-  let timer;
-  const debounce = (e) => {
-    // Abort Invalid Keys
-    if (
-      (e.key.length === 1 && e.key !== "." && isNaN(e.key) && !e.ctrlKey) ||
-      e.keyCode == 32 ||
-      (e.key === "." && e.target.value.toString().indexOf(".") > -1)
-    ) {
-      e.preventDefault();
-      return;
-    }
-    if (cellOptions.debounce) {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        dispatch("change", localValue);
-      }, cellOptions.debounce ?? 0);
-    }
-  };
+  $: inEdit = $cellState == "Editing";
+  $: inline = cellOptions.role == "inlineInput";
+  $: isDirty = inEdit && originalValue != localValue;
+  $: formattedValue = cellOptions.template
+    ? processStringSync(cellOptions.template, {
+        ...$context,
+        value: localValue,
+      })
+    : undefined;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
 
-  function focus(element) {
-    setTimeout(element?.focus(), 10);
+  $: cellState.reset(value);
+
+  function focus(element: HTMLElement) {
+    setTimeout(() => element?.focus(), 10);
   }
 
   onMount(() => {
@@ -108,6 +123,11 @@
         editor?.focus();
       }, 30);
   });
+
+  onDestroy(() => {
+    clearTimeout(timer);
+    cellState.reset();
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -148,8 +168,9 @@
           : "right "}
       placeholder={cellOptions?.placeholder}
       bind:value={localValue}
-      on:keydown={(e) => debounce(e)}
-      on:focusout={cellState.focusout}
+      on:keydown={(e) => cellState.debounce(e)}
+      on:focusout={(e) => cellState.focusout(e)}
+      on:keyup={(e) => cellState.handleKeyboard(e)}
       use:focus
     />
     <i class="ri-close-line clearIcon" on:mousedown|self={cellState.clear}> </i>

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,19 @@
         cellState.focus();
       }, 50);
   });
+
+  onDestroy(() => {
+    clearTimeout(timer);
+    cellState.reset();
+  });
+
+  $: if (inEdit)
+    console.log(
+      "Entering edit mode for cell",
+      value,
+      localValue,
+      originalValue
+    );
 </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/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 -->