@poirazis/supercomponents-shared 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Shared Svelte components library",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/SuperForm/SuperForm.svelte

@@ -27,6 +27,7 @@
   export let initialFormStep: string | number = 1;
   export let disableSchemaValidation: boolean = false;
   export let editAutoColumns: boolean = false;
+  export let provideContext: boolean = true;
 
   // Export the full form API to be used by parents
   export let form;
@@ -73,6 +74,7 @@
     if (type !== "Update") {
       return {};
     }
+
     const dsType = dataSource?.type;
     if (dsType !== "table" && dsType !== "viewV2") {
       return {};
@@ -136,6 +138,7 @@
       {disableSchemaValidation}
       {editAutoColumns}
       {currentStep}
+      {provideContext}
       on:change
       on:reset
     >

package/src/lib/SuperTable/SuperTable.svelte

@@ -651,10 +651,8 @@
       init() {
         return "Init";
       },
-      async refresh() {
-        if (stbData.loaded) await stbData?.refresh();
-        this.enrichRows();
-        this.calculateRowBoundaries();
+      refresh() {
+        stbData?.refresh();
       },
       enrichRows() {},
       scrollToTop() {

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

@@ -120,6 +120,14 @@
     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/SuperTableColumn/parts/SuperColumnBody.svelte

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