@poirazis/supercomponents-shared 1.1.8 → 1.2.1

package/src/lib/SuperTableCells/CellLink.svelte

@@ -39,17 +39,6 @@
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
       },
     },
-    Hovered: {
-      cancel: () => {
-        return "View";
-      },
-    },
-    Focused: {
-      unfocus() {
-        return "View";
-      },
-    },
-    Error: { check: "View" },
     Editing: {
       _enter() {
         originalValue = JSON.stringify(localValue);
@@ -61,7 +50,12 @@
         dispatch("exitedit");
       },
       focusout(e) {
-        if (popup?.contains(e?.relatedTarget)) return;
+        if (
+          anchor?.contains(e?.relatedTarget) ||
+          popup?.contains(e?.relatedTarget)
+        )
+          return;
+
         this.submit();
       },
 
@@ -78,6 +72,8 @@
         return "View";
       },
       cancel() {
+        localValue = JSON.parse(originalValue);
+        anchor?.blur();
         return "View";
       },
     },
@@ -130,6 +126,7 @@
   const handleKeyboard = (e) => {
     if (e.key == "Escape" && $editorState == "Open") {
       editorState.close();
+      return;
     } else if (e.key == "Escape") {
       cellState.cancel();
     } else if (e.keyCode == 32 && $cellState == "Editing") {
@@ -146,6 +143,7 @@
 
     if (singleSelect) {
       editorState.close();
+      anchor.focus();
     }
   };
 
@@ -192,7 +190,6 @@
   class:error={cellOptions.error}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  style:font-weight={cellOptions.fontWeight}
   on:mousedown={editorState.toggle}
   on:focusin={cellState.focus}
   on:keydown|self={handleKeyboard}
@@ -224,7 +221,7 @@
                   }
                 : null}
             >
-              <i class={valueIcon} />
+              <i class={valueIcon}></i>
               <span>{val.primaryDisplay}</span>
             </div>
           {/if}
@@ -253,36 +250,46 @@
   <SuperPopover
     {anchor}
     useAnchorWidth
-    bind:popup
     open={$editorState == "Open"}
+    on:close={cellState.cancel}
+    bind:popup
   >
-    {#if fieldSchema.recursiveTable}
-      <CellLinkPickerTree
-        {fieldSchema}
-        filter={filter ?? []}
-        {search}
-        {limit}
-        joinColumn={cellOptions.joinColumn}
-        value={localValue}
-        {ownId}
-        multi={fieldSchema.relationshipType == "many-to-many" ||
-          fieldSchema.relationshipType == "many-to-one"}
-        on:change={handleChange}
-      />
-    {:else}
-      <CellLinkPickerSelect
-        bind:api={pickerApi}
-        {fieldSchema}
-        filter={filter ?? []}
-        {singleSelect}
-        value={localValue}
-        {search}
-        wide={cellOptions.wide && !singleSelect}
-        on:change={handleChange}
-        on:close={() => {
-          cellState.focusout();
-        }}
-      />
-    {/if}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="picker-container"
+      on:keydown={(e) => {
+        if (e.key == "Escape" || e.key == "Tab") {
+          anchor.focus();
+          editorState.close();
+          e.preventDefault();
+        }
+      }}
+    >
+      {#if fieldSchema.recursiveTable}
+        <CellLinkPickerTree
+          {fieldSchema}
+          filter={filter ?? []}
+          {search}
+          {limit}
+          joinColumn={cellOptions.joinColumn}
+          value={localValue}
+          {ownId}
+          multi={fieldSchema.relationshipType == "many-to-many" ||
+            fieldSchema.relationshipType == "many-to-one"}
+          on:change={handleChange}
+        />
+      {:else}
+        <CellLinkPickerSelect
+          bind:api={pickerApi}
+          {fieldSchema}
+          filter={filter ?? []}
+          {singleSelect}
+          value={localValue}
+          {search}
+          wide={cellOptions.wide && !singleSelect}
+          on:change={handleChange}
+        />
+      {/if}
+    </div>
   </SuperPopover>
 {/if}

package/src/lib/SuperTableCells/CellLinkAdvanced.svelte

@@ -3,7 +3,6 @@
   import fsm from "svelte-fsm";
   import SuperPopover from "../SuperPopover/SuperPopover.svelte";
   import CellLinkPickerTree from "../../lib/SuperTableCells/CellLinkPickerTree.svelte";
-  import { readonly } from "svelte/store";
   const dispatch = createEventDispatcher();
 
   export let value;
@@ -34,17 +33,6 @@
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
       },
     },
-    Hovered: {
-      cancel: () => {
-        return "View";
-      },
-    },
-    Focused: {
-      unfocus() {
-        return "View";
-      },
-    },
-    Error: { check: "View" },
     Editing: {
       _enter() {
         originalValue = JSON.stringify(localValue);
@@ -62,9 +50,7 @@
         if (popup?.contains(e.relatedTarget)) return;
         this.submit();
       },
-      popupfocusout(e) {
-        console.log(e);
-      },
+      popupfocusout(e) {},
       clear() {
         localValue = [];
       },
@@ -216,7 +202,7 @@
                 class={fieldSchema.type == "link"
                   ? "ri-links-line"
                   : "ri-user-line"}
-              />
+              ></i>
             {/if}
             <span>{val.primaryDisplay}</span>
           </div>

package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte

@@ -140,9 +140,9 @@
       e.preventDefault();
       focusIdx -= 1;
       if (focusIdx < 0) focusIdx = $fetch.rows.length - 1;
-    } else if (e.key == "Enter" && focusIdx > -1)
+    } else if (e.key == "Enter" && focusIdx > -1) {
       selectRow($fetch.rows[focusIdx]);
-    if (e.key == "Tab" || e.key == "Escape") dispatch("close");
+    }
   };
 
   // Auto-fetch more if initial data doesn't fill viewport
@@ -180,7 +180,7 @@
       style:color={filterTerm
         ? "var(--spectrum-global-color-blue-400)"
         : "var(--spectrum-global-color-gray-700)"}
-    />
+    ></i>
     <input
       bind:this={control}
       class="search"
@@ -191,7 +191,6 @@
         : "Search"}
       on:input={handleSearch}
       on:keydown={handleNavigation}
-      on:blur={() => dispatch("close")}
     />
   </div>
 
@@ -214,19 +213,19 @@
                       )}
                     >
                       {row[primaryDisplay]}
-                      <i class="ri-add-line" />
+                      <i class="ri-add-line"></i>
                     </div>
                   {/if}
                 {/each}
                 {#if $fetch?.loading && $fetch.loaded}
                   <div class="option wide loading">
-                    <i class="ri-loader-2-line rotating" />
+                    <i class="ri-loader-2-line rotating"></i>
                     Loading more...
                   </div>
                 {/if}
               {:else if $fetch?.loading}
                 <div class="option wide loading">
-                  <i class="ri-loader-2-line rotating" />
+                  <i class="ri-loader-2-line rotating"></i>
                   Loading...
                 </div>
               {:else}
@@ -248,7 +247,7 @@
                     )}
                   >
                     {val.primaryDisplay}
-                    <i class="ri-close-line" />
+                    <i class="ri-close-line"></i>
                   </div>
                 {/if}
               {/each}
@@ -274,18 +273,18 @@
                     on:mousedown|preventDefault|stopPropagation={selectRow(row)}
                   >
                     {row[primaryDisplay]}
-                    <i class="ri-check-line" />
+                    <i class="ri-check-line"></i>
                   </div>
                 {/each}
                 {#if $fetch?.loading && $fetch.loaded}
                   <div class="option loading">
-                    <i class="ri-loader-2-line rotating" />
+                    <i class="ri-loader-2-line rotating"></i>
                     Loading more...
                   </div>
                 {/if}
               {:else if $fetch?.loading}
                 <div class="option loading">
-                  <i class="ri-loader-2-line rotating" />
+                  <i class="ri-loader-2-line rotating"></i>
                   Loading...
                 </div>
               {:else}

package/src/lib/SuperTableCells/CellLinkPickerTree.svelte

@@ -163,8 +163,6 @@
     role: "inlineInput",
     debounce: 50,
   };
-
-  export const api = {};
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -226,4 +224,8 @@
     display: flex;
     align-items: stretch;
   }
+
+  .spectrum-TreeView {
+    width: 100%;
+  }
 </style>

package/src/lib/SuperTableCells/CellNumber.svelte

@@ -8,7 +8,7 @@
   import fsm from "svelte-fsm";
 
   /**
-   * @typedef {import('./types.js').CellNumberOptions} CellNumberOptions
+   * @typedef {import('./types.js').CellOptions} CellOptions
    * @typedef {import('./types.js').CellApi} CellApi
    */
 
@@ -18,7 +18,7 @@
 
   /** @type {number | null} */
   export let value;
-  /** @type {CellNumberOptions} */
+  /** @type {CellOptions} */
   export let cellOptions = {};
   export let autofocus = false;
 
@@ -51,9 +51,28 @@
   } = cellOptions ?? {});
 
   // Helper function to format number with thousands separator
+  /**
+   * @param {number | string | null | undefined} num
+   * @param {string | undefined} separator
+   * @param {number | undefined} decimals
+   * @returns {string}
+   */
   function formatNumber(num, separator, decimals) {
-    if (!num && num !== 0) return "";
-    const fixed = num.toFixed(decimals ?? 0);
+    // Parse string to number if needed
+    const parsedNum = typeof num === "string" ? parseFloat(num) : num;
+
+    // Check if it's a valid number
+    if (isNaN(parsedNum) || (parsedNum !== 0 && !parsedNum)) return "";
+
+    // If decimals not specified and input was a string, preserve original decimals
+    let fixed;
+    if (decimals === undefined && typeof num === "string") {
+      // Keep the string representation to preserve decimals
+      fixed = parsedNum.toString();
+    } else {
+      fixed = parsedNum.toFixed(decimals ?? 0);
+    }
+
     if (!separator) return fixed;
 
     const parts = fixed.split(".");
@@ -113,7 +132,7 @@
         dispatch("exitedit");
       },
       clear() {
-        if (debounceDelay) dispatch("change", null);
+        dispatch("change", null);
         lastEdit = new Date();
         localValue = null;
       },

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -14,6 +14,7 @@
 
   let anchor;
   let editor;
+  let optionsList;
   let options = memo([]);
   let labels = {};
   let optionColors = {};
@@ -85,7 +86,7 @@
     Loading: {
       _enter() {
         if (cellOptions.optionsSource != "data" || $fetch?.loaded)
-          this.goTo.debounce(5, cellOptions.initialState || "View");
+          this.goTo.debounce(15, cellOptions.initialState || "View");
       },
       _exit() {
         if (cellOptions.optionsSource == "custom") this.loadCustomOptions();
@@ -158,6 +159,7 @@
         if (cellOptions.debounce) dispatch("change", null);
       },
       cancel() {
+        localValue = JSON.parse(originalValue);
         searchTerm = null;
         anchor?.blur();
         return "View";
@@ -208,7 +210,7 @@
     Open: {
       _enter() {
         searchTerm = "";
-        this.filterOptions();
+        // this.filterOptions();
         focusedOptionIdx = -1;
       },
       filterOptions(term) {
@@ -271,8 +273,10 @@
         }
 
         if (e.key == "Escape") {
+          e.stopPropagation();
+          e.preventDefault();
           searchTerm = null;
-          anchor?.focus();
+          //anchor?.focus();
           return "Closed";
         }
 
@@ -541,7 +545,7 @@
   on:keydown={editorState.handleKeyboard}
 >
   {#if icon}
-    <i class={icon + " field-icon"} class:active={searchTerm} />
+    <i class={icon + " field-icon"} class:active={searchTerm}></i>
   {/if}
 
   {#if inEdit && controlType == "inputSelect"}
@@ -564,7 +568,7 @@
                 style:min-width={"4rem"}
               >
                 {#if pills}
-                  <div class="loope" />
+                  <div class="loope"></div>
                 {/if}
                 <span> {labels[val] || val} </span>
               </div>
@@ -592,7 +596,7 @@
     <div
       class="value"
       class:placeholder={isEmpty && !searchTerm}
-      on:mousedown={inEdit ? editorState.toggle : null}
+      on:mousedown={inEdit ? editorState.toggle : () => {}}
     >
       {#if isEmpty && !open}
         <span>{searchTerm || placeholder}</span>
@@ -617,7 +621,7 @@
               style:--option-color={$colors[val] ||
                 colorsArray[idx % colorsArray.length]}
             >
-              <i class={"ph-fill ph-square"} />
+              <i class={"ph-fill ph-square"}></i>
               <span> {isObjects ? "JSON" : labels[val] || val} </span>
             </div>
           {/each}
@@ -628,7 +632,7 @@
       <i
         class="ph ph-caret-down control-icon"
         on:mousedown={inEdit ? editorState.toggle : null}
-      />
+      ></i>
     {/if}
   {/if}
 </div>
@@ -636,24 +640,19 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if inEdit}
-  <SuperPopover
-    {anchor}
-    useAnchorWidth
-    maxHeight={250}
-    {open}
-    on:close={editorState.close}
-  >
+  <SuperPopover {anchor} useAnchorWidth maxHeight={250} {open}>
     <div class="picker" on:mousedown|stopPropagation|preventDefault>
       {#if searchTerm && !isEmpty}
         <div class="searchControl">
           <i
             class="search-icon ph ph-magnifying-glass"
             class:active={searchTerm}
-          />
+          ></i>
           <span class="search-term">{searchTerm}</span>
         </div>
       {/if}
       <div
+        bind:this={optionsList}
         class="options"
         on:wheel={(e) => e.stopPropagation()}
         on:mouseleave={() => (focusedOptionIdx = -1)}
@@ -661,7 +660,7 @@
       >
         {#if optionsSource == "data" && $fetch?.loading && !$fetch?.rows?.length}
           <div class="option loading">
-            <i class="ph ph-spinner spin" />
+            <i class="ph ph-spinner spin"></i>
             Loading...
           </div>
         {:else if filteredOptions?.length}
@@ -682,22 +681,22 @@
                     ? "ph ph-" + $fetch?.rows?.[idx]?.[iconColumn]
                     : "ph-fill ph-square"}
                   style:color={$colors[option]}
-                />
+                ></i>
                 {labels[option] || option}
               </span>
-              <i class="ph ph-check" />
+              <i class="ph ph-check"></i>
             </div>
           {/each}
           {#if optionsSource == "data" && $fetch?.loading}
             <div class="option loading">
-              <i class="ph ph-spinner spin" />
+              <i class="ph ph-spinner spin"></i>
               Loading more...
             </div>
           {/if}
         {:else}
           <div class="option">
             <span>
-              <i class="ri-close-line" />
+              <i class="ri-close-line"></i>
               No Options Found
             </span>
           </div>
@@ -774,19 +773,6 @@
     justify-content: center;
     color: var(--spectrum-global-color-gray-500);
     font-style: italic;
-
-    & > i.rotating {
-      animation: rotate 1s linear infinite;
-    }
-  }
-
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
   }
 
   .action-icon {

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -441,7 +441,7 @@
                   : localValue.includes(option)
                     ? "ph-fill ph-check-square"
                     : "ph ph-square"}
-            />
+            ></i>
             {labels[option] || option}
           </div>
         {/each}
@@ -469,7 +469,7 @@
                 type="checkbox"
                 class="spectrum-Switch-input"
               />
-              <span class="spectrum-Switch-switch" />
+              <span class="spectrum-Switch-switch"></span>
             </div>
           {/if}
         </div>
@@ -483,7 +483,7 @@
           on:click={(e) => editorState.toggleOption(idx)}
           on:mouseenter={() => (focusedOptionIdx = idx)}
         >
-          <i class={optionIcons[option] || "no-icon"} />
+          <i class={optionIcons[option] || "no-icon"}></i>
           <div class="text">{labels[option] || option}</div>
           <div class="spectrum-Switch spectrum-Switch--emphasized">
             <input
@@ -518,7 +518,7 @@
       {#if filteredOptions?.length < 1 || filteredOptions.length == localValue.length}
         <div class="option">
           <span>
-            <i class="ri-close-line" />
+            <i class="ri-close-line"></i>
             No Options Found
           </span>
         </div>
@@ -535,7 +535,7 @@
             on:mouseenter={() => (focusedOptionIdx = idx)}
           >
             <span>
-              <i class="ri-checkbox-blank-fill" />
+              <i class="ri-checkbox-blank-fill"></i>
               {labels[option] || option}
             </span>
           </div>

package/src/lib/SuperTableCells/CellSQLLink.svelte

@@ -24,6 +24,25 @@
   let search;
   let pickerApi;
 
+  const editorState = fsm("Closed", {
+    Open: {
+      close() {
+        return "Closed";
+      },
+      toggle() {
+        return "Closed";
+      },
+    },
+    Closed: {
+      open() {
+        return "Open";
+      },
+      toggle() {
+        return "Open";
+      },
+    },
+  });
+
   export let cellState = fsm(cellOptions.initialState ?? "View", {
     "*": {
       goTo(state) {
@@ -39,17 +58,6 @@
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
       },
     },
-    Hovered: {
-      cancel: () => {
-        return "View";
-      },
-    },
-    Focused: {
-      unfocus() {
-        return "View";
-      },
-    },
-    Error: { check: "View" },
     Editing: {
       _enter() {
         originalValue = JSON.stringify(localValue);
@@ -79,25 +87,6 @@
     },
   });
 
-  const editorState = fsm("Closed", {
-    Open: {
-      close() {
-        return "Closed";
-      },
-      toggle() {
-        return "Closed";
-      },
-    },
-    Closed: {
-      open() {
-        return "Open";
-      },
-      toggle() {
-        return "Open";
-      },
-    },
-  });
-
   $: relatedField = fieldSchema?.relatedField || "id";
   $: relatedTableId = fieldSchema?.tableId;
   $: relatedColumns = fieldSchema?.relatedColumns || [];
@@ -230,7 +219,6 @@
   style:color={cellOptions.color}
   style:background={cellOptions.background}
   style:font-weight={cellOptions.fontWeight}
-  on:mousedown={editorState.toggle}
   on:focusin={cellState.focus}
   on:keydown|self={handleKeyboard}
   on:focusout={cellState.focusout}
@@ -272,7 +260,7 @@
     {/if}
   </div>
   {#if !readonly && (cellOptions.role == "formInput" || inEdit)}
-    <i class="ph ph-caret-down control-icon"></i>
+    <i class="ph ph-caret-down control-icon" on:click={editorState.toggle}></i>
   {/if}
 </div>
 
@@ -280,8 +268,11 @@
   <SuperPopover
     {anchor}
     useAnchorWidth
-    bind:popup
     open={$editorState == "Open"}
+    on:close={(e) => {
+      console.log("closing editor");
+      editorState.close();
+    }}
   >
     {#if fieldSchema.recursiveTable}
       <CellLinkPickerTree
@@ -303,9 +294,6 @@
         value={localValue}
         bind:api={pickerApi}
         on:change={handleChange}
-        on:close={() => {
-          cellState.focusout(null);
-        }}
       />
     {/if}
   </SuperPopover>