@poirazis/supercomponents-shared 1.2.12 → 1.2.13

package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte

@@ -76,7 +76,7 @@
   const unselectRow = (val) => {
     localValue.splice(
       localValue.findIndex((e) => e._id === val._id),
-      1
+      1,
     );
     localValue = localValue;
     dispatch("change", localValue);
@@ -132,7 +132,9 @@
   };
 
   const handleNavigation = (e) => {
-    if (e.key == "ArrowDown") {
+    if (e.key == "Escape") {
+      dispatch("close");
+    } else if (e.key == "ArrowDown") {
       e.preventDefault();
       focusIdx += 1;
       if (focusIdx > $fetch.rows.length - 1) focusIdx = 0;
@@ -191,6 +193,7 @@
         : "Search"}
       on:input={handleSearch}
       on:keydown={handleNavigation}
+      on:focusout
     />
   </div>
 
@@ -209,7 +212,7 @@
                       on:mouseenter={() => (focusIdx = idx)}
                       on:mouseleave={() => (focusIdx = -1)}
                       on:mousedown|preventDefault|stopPropagation={selectRow(
-                        row
+                        row,
                       )}
                     >
                       {row[primaryDisplay]}
@@ -243,7 +246,7 @@
                     transition:fly={{ x: -20, duration: 130 }}
                     class="option wide selected"
                     on:mousedown|stopPropagation|preventDefault={unselectRow(
-                      val
+                      val,
                     )}
                   >
                     {val.primaryDisplay}

package/src/lib/SuperTableCells/CellNumber.svelte

@@ -7,18 +7,11 @@
   } from "svelte";
   import fsm from "svelte-fsm";
 
-  /**
-   * @typedef {import('./types.js').CellOptions} CellOptions
-   * @typedef {import('./types.js').CellApi} CellApi
-   */
-
   const { processStringSync } = getContext("sdk");
   const context = getContext("context");
   const dispatch = createEventDispatcher();
 
-  /** @type {number | null} */
   export let value;
-  /** @type {CellOptions} */
   export let cellOptions = {};
   export let autofocus = false;
 
@@ -48,15 +41,10 @@
     decimals,
     thousandsSeparator,
     role,
+    calculated,
   } = 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) {
     // Parse string to number if needed
     const parsedNum = typeof num === "string" ? parseFloat(num) : num;
@@ -90,11 +78,12 @@
   $: formattedValue = template
     ? processStringSync(template, {
         ...$context,
-        value,
+        value: formatNumber(displayValue, thousandsSeparator, decimals),
       })
     : formatNumber(displayValue, thousandsSeparator, decimals);
 
   $: stepValue = stepSize ?? 1;
+  $: clearValue = cellOptions.clearValue && cellOptions.role != "tableCell";
 
   // Reset when value changes externally
   $: cellState.reset(value);
@@ -119,7 +108,7 @@
         return state;
       },
       focus() {
-        if (!readonly && !disabled) return "Editing";
+        if (!readonly && !disabled && !calculated) return "Editing";
       },
     },
     Editing: {
@@ -275,7 +264,6 @@
     },
   });
 
-  /** @type {CellApi} */
   export const cellApi = {
     focus: () => cellState.focus(),
     reset: () => cellState.reset(value),
@@ -320,7 +308,7 @@
   class:formInput={role == "formInput"}
   style:color
   style:background
-  tabIndex={disabled ? -1 : 0}
+  tabIndex={disabled ? -1 : (cellOptions.order ?? 0)}
   on:focusin={cellState.focus}
 >
   {#if icon}
@@ -344,12 +332,15 @@
       on:wheel={(e) => cellState.handleWheel(e)}
       use:focus
     />
+
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <i
-      class="ri-close-line clear-icon visible"
+      class="ri-close-line clear-icon"
+      class:visible={clearValue}
       on:mousedown|preventDefault|stopPropagation={cellState.clear}
     >
     </i>
+
     {#if showStepper}
       <div class="controls">
         <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -369,7 +360,6 @@
   {:else}
     <div
       class="value"
-      style:padding-right={"12px"}
       class:placeholder={!value && value !== 0}
       style:justify-content={cellOptions.align ?? "flex-end"}
     >
@@ -380,22 +370,27 @@
 
 <style>
   .controls {
+    height: 100%;
     display: flex;
     flex-direction: row;
+    align-items: stretch;
     gap: 0.25rem;
-    padding-right: 0.5rem;
-    margin-left: -0.25rem;
+    padding: 0.25rem 0rem;
   }
 
   .controls i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    padding: 0.15rem;
+    padding: 0.25rem;
     background-color: var(--spectrum-global-color-gray-100);
     border-radius: 0.25rem;
     transition: all 0.2s ease-in-out;
   }
 
   .controls i:hover {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-300);
+    color: var(--spectrum-global-color-gray-900);
   }
 </style>

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -106,6 +106,7 @@
     View: {
       _enter() {
         searchTerm = null;
+        editorState.filterOptions();
       },
       focus(e) {
         if (!readonly && !disabled) {
@@ -115,23 +116,22 @@
     },
     Editing: {
       _enter() {
+        editorState.open();
         originalValue = JSON.stringify(
           Array.isArray(value) ? value : value ? [value] : [],
         );
         inputValue = multi ? "" : labels[localValue[0]] || localValue[0] || "";
-        // Open the popup if the focus in came from a TAB
-        editorState.open();
+
         dispatch("enteredit");
       },
       _exit() {
         editorState.close();
-        editorState.filterOptions();
         dispatch("exitedit");
       },
+      toggle(e) {
+        editorState.toggle();
+      },
       focusout(e) {
-        // If the focus is moving to the search input inside the popup, ignore
-        if (anchor.contains(e.relatedTarget)) return;
-
         dispatch("focusout");
 
         // For debounced inputs, dispatch the current value immediately on focusout
@@ -144,6 +144,12 @@
 
         return "View";
       },
+      popupfocusout(e) {
+        if (anchor != e?.relatedTarget) {
+          this.submit();
+          return "View";
+        }
+      },
       submit() {
         if (isDirty && !cellOptions.debounce) {
           if (multi) dispatch("change", localValue);
@@ -344,11 +350,8 @@
         searchTerm = null;
         focusedOptionIdx = -1;
       },
-      toggle(e) {
-        if (inEdit) {
-          e.preventDefault();
-          return "Open";
-        }
+      toggle() {
+        return "Open";
       },
       open() {
         return "Open";
@@ -505,6 +508,8 @@
   $: isDirty = inEdit && originalValue !== JSON.stringify(localValue);
   $: inEdit = $cellState == "Editing";
   $: pills = optionsViewMode == "pills";
+  $: bullets = optionsViewMode == "bullets";
+
   $: multi =
     fieldSchema && fieldSchema.type ? fieldSchema.type == "array" : multi;
 
@@ -542,10 +547,12 @@
   class:inline={role == "inlineInput"}
   class:tableCell={role == "tableCell"}
   class:formInput={role == "formInput"}
+  class:has-popup={controlType == "select"}
+  class:open-popup={open}
   on:focusin={cellState.focus}
   on:focusout={cellState.focusout}
   on:keydown={editorState.handleKeyboard}
-  on:mousedown={editorState.toggle}
+  on:mousedown={cellState.toggle}
 >
   {#if icon}
     <i class={icon + " field-icon"} class:active={searchTerm}></i>
@@ -592,7 +599,7 @@
       use:focus
       {placeholder}
     />
-    <div class="action-icon" on:click={editorState.toggle}>
+    <div class="control-icon" on:click={editorState.toggle}>
       <i class="ph ph-caret-down"></i>
     </div>
   {:else}
@@ -611,7 +618,7 @@
         <div
           class="items"
           class:pills
-          class:colorText={optionsViewMode == "colorText"}
+          class:bullets
           style:justify-content={cellOptions.align ?? "flex-start"}
         >
           {#each localValue as val, idx (val)}
@@ -620,7 +627,7 @@
               style:--option-color={$colors[val] ||
                 colorsArray[idx % colorsArray.length]}
             >
-              <i class={"ph-fill ph-square"}></i>
+              <div class="loope"></div>
               <span> {isObjects ? "JSON" : labels[val] || val} </span>
             </div>
           {/each}
@@ -628,7 +635,7 @@
       {/if}
     </div>
     {#if !readonly && (role == "formInput" || inEdit)}
-      <i class="ph ph-caret-down control-icon"></i>
+      <i class="ph ph-caret-down control-icon" on:mousedown></i>
     {/if}
   {/if}
 </div>
@@ -771,21 +778,6 @@
     font-style: italic;
   }
 
-  .action-icon {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-left: 1px solid var(--spectrum-global-color-blue-500);
-    min-width: 2rem;
-    font-size: 16px;
-  }
-  .action-icon:hover {
-    cursor: pointer;
-    background-color: var(--spectrum-global-color-gray-75);
-    font-weight: 800;
-  }
-
   .search-icon {
     font-size: 16px;
     color: var(--spectrum-global-color-gray-500);
@@ -812,4 +804,15 @@
     width: 100%;
     overflow: hidden;
   }
+
+  .loope {
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    background-color: var(
+      --option-color,
+      var(--spectrum-global-color-gray-300)
+    );
+    flex-shrink: 0;
+  }
 </style>

package/src/lib/SuperTableCells/CellSQLLink.svelte

@@ -23,6 +23,8 @@
   let popup;
   let search;
   let pickerApi;
+  let isLoading = false;
+  let localValue;
 
   const editorState = fsm("Closed", {
     Open: {
@@ -54,7 +56,10 @@
     },
     View: {
       _enter() {},
-      focus() {
+      toggle() {
+        return;
+      },
+      focus(e) {
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
       },
     },
@@ -68,11 +73,18 @@
         editorState.close();
         dispatch("exitedit");
       },
+      toggle(e) {
+        editorState.toggle();
+      },
       focusout(e) {
         if (popup?.contains(e?.relatedTarget)) return;
         this.submit();
       },
-
+      popupfocusout(e) {
+        if (anchor != e?.relatedTarget) {
+          this.submit();
+        }
+      },
       clear() {
         localValue = [];
       },
@@ -82,6 +94,8 @@
         return "View";
       },
       cancel() {
+        anchor.blur();
+        localValue = JSON.parse(originalValue);
         return "View";
       },
     },
@@ -94,7 +108,9 @@
   $: pills = cellOptions.relViewMode == "pills";
   $: ownId = ownId || cellOptions?.ownId;
 
-  $: localValue = enrichValue(value);
+  $: if (!isLoading) {
+    localValue = enrichValue(value);
+  }
 
   $: inEdit = $cellState == "Editing";
   $: isDirty = inEdit && originalValue != JSON.stringify(localValue);
@@ -116,17 +132,7 @@
     } else if (e.key == "Tab" && $editorState == "Open") {
       cellState.focusout(e);
     } else if ($editorState == "Open") {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        pickerApi?.focusPrev();
-        pickerApi?.scrollIntoView();
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        pickerApi?.focusNext();
-        pickerApi?.scrollIntoView();
-      } else if (e.key.length == 1 && e.key.match(/\S/)) {
-        pickerApi?.setSearch(e.key);
-      }
+      pickerApi?.focus();
     }
   };
 
@@ -135,6 +141,7 @@
 
     if (!multi) {
       editorState.close();
+      anchor.focus();
     }
   };
 
@@ -146,6 +153,7 @@
         : [];
       const missingIds = x.filter((id) => !existingIds.includes(id));
       if (missingIds.length > 0) {
+        isLoading = true;
         API.fetchTableDefinition(relatedTableId).then((def) => {
           fieldSchema.primaryDisplay = def.primaryDisplay;
         });
@@ -155,16 +163,20 @@
         )
           .then((rows) => {
             const newEnriched = rows.map((row) => ({
-              [relatedField]: row[relatedField],
+              ...row,
               primaryDisplay: fieldSchema.primaryDisplay
                 ? row[fieldSchema.primaryDisplay]
                 : row.name || row.id,
             }));
             // Append new enriched items to existing localValue
             localValue = [...(localValue || []), ...newEnriched];
+            // Dispatch enrich event with full row context
+            dispatch("enrich", { rows: newEnriched });
+            isLoading = false;
           })
           .catch((e) => {
             // On error, keep existing localValue
+            isLoading = false;
           });
       }
       return localValue || [];
@@ -173,23 +185,27 @@
       const existing =
         localValue && localValue.find((v) => v[relatedField] === x);
       if (!existing) {
+        isLoading = true;
         API.fetchTableDefinition(relatedTableId).then((def) => {
           fieldSchema.primaryDisplay = def.primaryDisplay;
         });
 
         API.fetchRow(relatedTableId, x, true)
           .then((row) => {
-            localValue = [
-              {
-                [relatedField]: row[relatedField],
-                primaryDisplay: fieldSchema.primaryDisplay
-                  ? row[fieldSchema.primaryDisplay]
-                  : row.name || row.id,
-              },
-            ];
+            const enrichedRow = {
+              ...row,
+              primaryDisplay: fieldSchema.primaryDisplay
+                ? row[fieldSchema.primaryDisplay]
+                : row.name || row.id,
+            };
+            localValue = [enrichedRow];
+            // Dispatch enrich event with full row context
+            dispatch("enrich", { rows: [enrichedRow] });
+            isLoading = false;
           })
           .catch((e) => {
             localValue = [];
+            isLoading = false;
           });
       }
       return localValue || [];
@@ -205,7 +221,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="superCell"
+  class="superCell has-popup"
   tabindex={cellOptions?.disabled ? -1 : 0}
   bind:this={anchor}
   class:isDirty={isDirty && cellOptions.showDirty}
@@ -215,63 +231,66 @@
   class:formInput={cellOptions.role == "formInput"}
   class:disabled={cellOptions.disabled}
   class:readonly
+  class:open-popup={$editorState == "Open"}
   class:error={cellOptions.error}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  style:font-weight={cellOptions.fontWeight}
   on:focusin={cellState.focus}
   on:keydown|self={handleKeyboard}
+  on:mousedown={cellState.toggle}
   on:focusout={cellState.focusout}
 >
-  {#if cellOptions?.icon}
-    <i class={cellOptions.icon + " field-icon"}></i>
-  {/if}
+  {#if !isLoading}
+    {#if cellOptions?.icon}
+      <i class={cellOptions.icon + " field-icon"}></i>
+    {/if}
 
-  <div class="value" class:placeholder={localValue?.length < 1}>
-    {#if localValue?.length < 1}
-      <span> {placeholder} </span>
-    {:else if pills}
-      <div
-        class="items"
-        class:pills
-        class:withCount={localValue.length > 5}
-        class:inEdit
-      >
-        {#each localValue as val, idx}
-          {#if idx < 5}
-            <div class="item">
-              <span>{val.primaryDisplay}</span>
-            </div>
+    <div class="value" class:placeholder={localValue?.length < 1}>
+      {#if localValue?.length < 1}
+        <span> {placeholder} </span>
+      {:else if pills}
+        <div
+          class="items"
+          class:pills
+          class:withCount={localValue.length > 5}
+          class:inEdit
+        >
+          {#each localValue as val, idx}
+            {#if idx < 5}
+              <div class="item">
+                <span>{val.primaryDisplay}</span>
+              </div>
+            {/if}
+          {/each}
+          {#if localValue.length > 5}
+            <span class="count">
+              (+ {localValue.length - 5})
+            </span>
           {/if}
-        {/each}
-        {#if localValue.length > 5}
-          <span class="count">
-            (+ {localValue.length - 5})
-          </span>
-        {/if}
-      </div>
-    {:else}
-      <span>
-        {#if cellOptions.role == "formInput" && localValue.length > 1}
-          ({localValue.length})
-        {/if}
-        {localValue.map((v) => v.primaryDisplay).join(", ")}
-      </span>
+        </div>
+      {:else}
+        <span>
+          {#if cellOptions.role == "formInput" && localValue.length > 1}
+            ({localValue.length})
+          {/if}
+          {localValue.map((v) => v.primaryDisplay).join(", ")}
+        </span>
+      {/if}
+    </div>
+    {#if !readonly && (cellOptions.role == "formInput" || inEdit)}
+      <i class="ph ph-caret-down control-icon"></i>
     {/if}
-  </div>
-  {#if !readonly && (cellOptions.role == "formInput" || inEdit)}
-    <i class="ph ph-caret-down control-icon" on:click={editorState.toggle}></i>
   {/if}
 </div>
 
 {#if inEdit}
   <SuperPopover
     {anchor}
-    useAnchorWidth
+    useAnchorWidth={true}
+    minWidth={cellOptions.pickerWidth || undefined}
+    align="left"
     open={$editorState == "Open"}
-    on:close={(e) => {
-      editorState.close();
-    }}
+    bind:popup
   >
     {#if fieldSchema.recursiveTable}
       <CellLinkPickerTree
@@ -293,6 +312,7 @@
         value={localValue}
         bind:api={pickerApi}
         on:change={handleChange}
+        on:focusout={cellState.popupfocusout}
       />
     {/if}
   </SuperPopover>