@poirazis/supercomponents-shared 1.1.8 → 1.2.0

package/src/lib/SuperTableCells/CellLinkAdvanced.svelte

@@ -34,17 +34,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 +51,7 @@
         if (popup?.contains(e.relatedTarget)) return;
         this.submit();
       },
-      popupfocusout(e) {
-        console.log(e);
-      },
+      popupfocusout(e) {},
       clear() {
         localValue = [];
       },
@@ -216,7 +203,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

@@ -158,6 +158,7 @@
         if (cellOptions.debounce) dispatch("change", null);
       },
       cancel() {
+        localValue = JSON.parse(originalValue);
         searchTerm = null;
         anchor?.blur();
         return "View";
@@ -541,7 +542,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 +565,7 @@
                 style:min-width={"4rem"}
               >
                 {#if pills}
-                  <div class="loope" />
+                  <div class="loope"></div>
                 {/if}
                 <span> {labels[val] || val} </span>
               </div>
@@ -617,7 +618,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 +629,7 @@
       <i
         class="ph ph-caret-down control-icon"
         on:mousedown={inEdit ? editorState.toggle : null}
-      />
+      ></i>
     {/if}
   {/if}
 </div>
@@ -649,7 +650,7 @@
           <i
             class="search-icon ph ph-magnifying-glass"
             class:active={searchTerm}
-          />
+          ></i>
           <span class="search-term">{searchTerm}</span>
         </div>
       {/if}
@@ -661,7 +662,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 +683,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 +775,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

@@ -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);

package/src/lib/SuperTableCells/CellSQLLinkPicker.svelte

@@ -208,7 +208,7 @@
       style:color={filterTerm
         ? "var(--spectrum-global-color-blue-400)"
         : "var(--spectrum-global-color-gray-700)"}
-    />
+    ></i>
     <input
       bind:this={control}
       class="search"
@@ -257,7 +257,7 @@
               {#each relatedColumns as col}
                 <div class="data-cell">{row[col.name] || ""}</div>
               {/each}
-              <div class="data-cell check"><i class="ri-check-line" /></div>
+              <div class="data-cell check"><i class="ri-check-line" ></i></div>
             </div>
           {/each}
 
@@ -278,7 +278,7 @@
                       <div class="data-cell">{row[col.name] || ""}</div>
                     {/each}
                     <div class="data-cell check">
-                      <i class="ri-check-line" />
+                      <i class="ri-check-line" ></i>
                     </div>
                   </div>
                 {/if}
@@ -289,13 +289,13 @@
           {#if $optionsFetch?.loading}
             <div class="data-row loading">
               <div class="data-cell" style="grid-column: 1 / -1;">
-                <i class="ri-loader-2-line rotating" /> Loading more...
+                <i class="ri-loader-2-line rotating" ></i> Loading more...
               </div>
             </div>
           {:else if $optionsFetch?.loading && !$optionsFetch.loaded}
             <div class="data-row loading">
               <div class="data-cell" style="grid-column: 1 / -1;">
-                <i class="ri-loader-2-line rotating" /> Loading...
+                <i class="ri-loader-2-line rotating" ></i> Loading...
               </div>
             </div>
           {:else if !$optionsFetch?.loading && $optionsFetch?.loaded && !$optionsFetch.rows?.length}
@@ -319,7 +319,7 @@
               on:mousedown|preventDefault|stopPropagation={() => selectRow(row)}
             >
               {row.primaryDisplay || row[primaryDisplay]}
-              <i class="ri-check-line" />
+              <i class="ri-check-line" ></i>
             </div>
           {/each}
 
@@ -337,20 +337,20 @@
                     on:mousedown|preventDefault={() => selectRow(row)}
                   >
                     {row.primaryDisplay || row[primaryDisplay]}
-                    <i class="ri-check-line" />
+                    <i class="ri-check-line" ></i>
                   </div>
                 {/if}
               {/each}
             {/key}
             {#if $optionsFetch?.loading}
               <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 $optionsFetch?.loading && !$optionsFetch.loaded}
             <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/CellString.svelte

@@ -8,7 +8,7 @@
   import fsm from "svelte-fsm";
 
   /**
-   * @typedef {import('./types.js').CellStringOptions} CellStringOptions
+   * @typedef {import('./types.js').CellOptions} CellOptions
    * @typedef {import('./types.js').CellApi} CellApi
    */
 
@@ -21,7 +21,7 @@
   /** @type {string | undefined} */
   export let formattedValue = undefined;
 
-  /** @type {CellStringOptions} */
+  /** @type {CellOptions} */
   export let cellOptions = {
     role: "formInput",
     initialState: "Editing",
@@ -260,7 +260,7 @@
         <i
           class="ri-close-line clearIcon"
           on:mousedown|self|preventDefault={cellState.clear}
-        />
+        ></i>
       {/if}
     {/if}
   {:else if textarea}

package/src/lib/SuperTableCells/CellStringMask.svelte

@@ -290,7 +290,7 @@
       <i
         class="ri-close-line clearIcon"
         on:mousedown|self|preventDefault={cellState.clear}
-      />
+      ></i>
     {/if}
   {:else}
     <div