@poirazis/supercomponents-shared 1.2.11 → 1.2.13

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,25 +153,30 @@
         : [];
       const missingIds = x.filter((id) => !existingIds.includes(id));
       if (missingIds.length > 0) {
+        isLoading = true;
         API.fetchTableDefinition(relatedTableId).then((def) => {
           fieldSchema.primaryDisplay = def.primaryDisplay;
         });
 
         Promise.all(
-          missingIds.map((id) => API.fetchRow(relatedTableId, id, true))
+          missingIds.map((id) => API.fetchRow(relatedTableId, id, true)),
         )
           .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,64 +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) => {
-      console.log("closing editor");
-      editorState.close();
-    }}
+    bind:popup
   >
     {#if fieldSchema.recursiveTable}
       <CellLinkPickerTree
@@ -294,6 +312,7 @@
         value={localValue}
         bind:api={pickerApi}
         on:change={handleChange}
+        on:focusout={cellState.popupfocusout}
       />
     {/if}
   </SuperPopover>

package/src/lib/SuperTableCells/CellSQLLinkPicker.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext, createEventDispatcher, tick } from "svelte";
-  import type { LogicalOperator, EmptyFilterOption } from "@budibase/types";
 
   const { API, fetchData, QueryUtils } = getContext("sdk");
   const dispatch = createEventDispatcher();
@@ -18,7 +17,7 @@
   let control;
   let filterTerm;
   let initLimit = 15;
-  let listElement;
+
   let isInitialLoad = true;
   let hasMoreData = true;
   let optionRefs = [];
@@ -26,12 +25,23 @@
   let optionsFetch;
   let searchFilter;
   let currentLimit = initLimit;
+  let searchExtensions = {};
 
   $: localValue = Array.isArray(value) ? value : [];
   $: defaultQuery = QueryUtils.buildQuery(filter);
-  $: searchExtensions = searchFilter
-    ? { search: QueryUtils.buildQuery(searchFilter) }
-    : {};
+  $: {
+    if (searchFilter) {
+      // If searchFilter is already in $or format (object), use it directly
+      // Otherwise if it's legacy array format, build it through QueryUtils
+      if (Array.isArray(searchFilter)) {
+        searchExtensions = { search: QueryUtils.buildQuery(searchFilter) };
+      } else {
+        searchExtensions = { search: searchFilter };
+      }
+    } else {
+      searchExtensions = {};
+    }
+  }
 
   $: query = extendQuery(defaultQuery, searchExtensions);
 
@@ -50,6 +60,10 @@
   $: optionsFetch?.update({ query: query, limit: currentLimit });
 
   $: primaryDisplay = $optionsFetch?.definition?.primaryDisplay || "id";
+  $: gridTemplate = relatedColumns
+    .map((col) => col.width || "1fr")
+    .concat("32px")
+    .join(" ");
 
   $: if ($optionsFetch?.loaded) {
     hasMoreData = $optionsFetch.rows.length >= currentLimit;
@@ -71,17 +85,15 @@
       return defaultQuery;
     }
     const extended = {
-      [LogicalOperator.AND]: {
+      ["$and"]: {
         conditions: [
           ...(defaultQuery ? [defaultQuery] : []),
           ...Object.values(extensions || {}),
         ],
       },
-      onEmptyFilter: EmptyFilterOption.RETURN_NONE,
+      onEmptyFilter: "none",
     };
-    return (extended[LogicalOperator.AND]?.conditions?.length ?? 0) > 0
-      ? extended
-      : {};
+    return (extended["$and"]?.conditions?.length ?? 0) > 0 ? extended : {};
   };
 
   const rowSelected = (val) => {
@@ -98,6 +110,7 @@
         : val[primaryDisplay];
 
     const selectedItem = {
+      ...val, // Include the full row object
       [relatedField]: val[relatedField],
       primaryDisplay: displayValue,
     };
@@ -108,7 +121,7 @@
       } else localValue = [selectedItem];
     } else {
       let pos = localValue.findIndex(
-        (v) => v[relatedField] == val[relatedField]
+        (v) => v[relatedField] == val[relatedField],
       );
       if (pos > -1) {
         localValue.splice(pos, 1);
@@ -124,15 +137,29 @@
   const handleSearch = (e) => {
     filterTerm = e.target.value;
     if (e.target.value) {
-      searchFilter = [
-        {
-          field: primaryDisplay,
-          type: "string",
-          operator: "fuzzy",
-          value: e.target.value,
-          valueType: "Value",
-        },
-      ];
+      // If we have relatedColumns, create an OR filter that matches any column
+      if (relatedColumns && relatedColumns.length > 0) {
+        searchFilter = {
+          $or: {
+            conditions: relatedColumns.map((col) => ({
+              fuzzy: {
+                [col.name]: e.target.value,
+              },
+            })),
+          },
+        };
+      } else {
+        // Otherwise use primary display field
+        searchFilter = [
+          {
+            field: primaryDisplay,
+            type: "string",
+            operator: "fuzzy",
+            value: e.target.value,
+            valueType: "Value",
+          },
+        ];
+      }
     } else {
       searchFilter = undefined;
     }
@@ -186,12 +213,7 @@
       filterTerm = char;
       control?.focus();
     },
-    focusList: () => {
-      listElement?.focus();
-    },
   };
-
-  $: numCols = relatedColumns.length;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -221,7 +243,7 @@
         : "Search"}
       on:input={handleSearch}
       on:keydown={handleNavigation}
-      on:blur={() => dispatch("close")}
+      on:focusout
     />
   </div>
 
@@ -229,18 +251,19 @@
     <div
       class="list"
       class:table-mode={relatedColumns && relatedColumns.length > 0}
-      bind:this={listElement}
       on:scroll={handleScroll}
     >
       {#if relatedColumns && relatedColumns.length > 1}
         <div
           class="grid-container"
-          style="--num-cols: {numCols}"
+          style="--grid-template: {gridTemplate}"
           on:scroll={handleScroll}
         >
           <div class="header-row">
             {#each relatedColumns as col}
-              <div class="header-cell">{col.displayName}</div>
+              <div class="header-cell">
+                {col.displayName || col.name}
+              </div>
             {/each}
             <div class="header-cell check"></div>
           </div>
@@ -255,7 +278,9 @@
               on:mousedown|preventDefault={() => selectRow(row)}
             >
               {#each relatedColumns as col}
-                <div class="data-cell">{row[col.name] || ""}</div>
+                <div class="data-cell">
+                  {row[col.name] || ""}
+                </div>
               {/each}
               <div class="data-cell check"><i class="ri-check-line"></i></div>
             </div>
@@ -318,7 +343,7 @@
               on:mouseleave={() => (focusIdx = -1)}
               on:mousedown|preventDefault|stopPropagation={() => selectRow(row)}
             >
-              {row.primaryDisplay || row[primaryDisplay]}
+              <span>{row.primaryDisplay || row[primaryDisplay]}</span>
               <i class="ri-check-line"></i>
             </div>
           {/each}
@@ -336,7 +361,7 @@
                     on:mouseleave={() => (focusIdx = -1)}
                     on:mousedown|preventDefault={() => selectRow(row)}
                   >
-                    {row.primaryDisplay || row[primaryDisplay]}
+                    <span>{row.primaryDisplay || row[primaryDisplay]}</span>
                     <i class="ri-check-line"></i>
                   </div>
                 {/if}
@@ -444,15 +469,20 @@
     line-height: 1.5rem;
     padding: 0.15rem 0.5rem;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     display: flex;
+    min-width: 0;
     justify-content: space-between;
 
     & > i {
       visibility: hidden;
     }
 
+    & > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     &.selected {
       & > i {
         visibility: visible;
@@ -492,13 +522,13 @@
     background-color: var(--spectrum-global-color-gray-100);
     z-index: 1;
     display: grid;
-    grid-template-columns: repeat(var(--num-cols), 1fr) 32px;
+    grid-template-columns: var(--grid-template);
     height: 1.75rem;
   }
 
   .data-row {
     display: grid;
-    grid-template-columns: repeat(var(--num-cols), 1fr) 32px;
+    grid-template-columns: var(--grid-template);
     cursor: pointer;
   }
 

package/src/lib/SuperTableCells/CellString.svelte

@@ -8,21 +8,13 @@
   import fsm from "svelte-fsm";
   import "./CellCommon.css";
 
-  /**
-   * @typedef {import('./types.js').CellOptions} CellOptions
-   * @typedef {import('./types.js').CellApi} CellApi
-   */
-
   const dispatch = createEventDispatcher();
   const { processStringSync } = getContext("sdk");
 
-  /** @type {string | null} */
   export let value;
 
-  /** @type {string | undefined} */
   export let formattedValue = undefined;
 
-  /** @type {CellOptions} */
   export let cellOptions = {
     role: "formInput",
     initialState: "Editing",
@@ -157,7 +149,6 @@
   });
 
   // Public API
-  /** @type {CellApi} */
   export const cellApi = {
     focus: () => cellState.focus(),
     reset: () => cellState.reset(value),
@@ -201,6 +192,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="superCell"
+  tabindex={cellOptions.readonly || cellOptions.disabled ? -1 : 0}
   class:multirow={controlType == "textarea"}
   class:inEdit
   class:isDirty={isDirty && showDirty}
@@ -212,8 +204,9 @@
   class:error
   style:color
   style:background
+  on:focusin={cellState.focus}
 >
-  {#if icon}
+  {#if icon && !textarea}
     <i class={icon + " field-icon"} class:with-error={error}></i>
   {/if}
   {#if inEdit}
@@ -247,39 +240,30 @@
           : cellOptions.align == "flex-end"
             ? "right"
             : "left"}
-        style:padding-right={cellOptions.align != "flex-start"
-          ? "2rem"
-          : "0.75rem"}
         on:input={cellState.debounce}
         on:focusout={cellState.focusout}
         on:keydown={cellState.handleKeyboard}
         use:focus
       />
-      {#if localValue && cellOptions?.clearIcon !== false}
-        <i
-          class="ri-close-line clearIcon"
-          on:mousedown|self|preventDefault={cellState.clear}
-        ></i>
-      {/if}
+      <i
+        class="ri-close-line clear-icon"
+        class:visible={localValue && cellOptions?.clearIcon !== false}
+        on:mousedown|self|preventDefault={cellState.clear}
+      ></i>
     {/if}
   {:else if textarea}
     <div
       class="value textarea"
-      tabindex={cellOptions.readonly || cellOptions.disabled ? -1 : 0}
-      class:with-icon={cellOptions.icon || error}
       class:placeholder={!value && !formattedValue}
       style:justify-content={cellOptions.align}
-      on:focusin={cellState.focus}
     >
       {formattedValue || value || placeholder}
     </div>
   {:else}
     <div
       class="value"
-      tabindex={cellOptions.readonly || cellOptions.disabled ? -1 : 0}
       class:placeholder={!value}
       style:justify-content={cellOptions.align}
-      on:focusin={cellState.focus}
     >
       <span>
         {formattedValue || value || placeholder}
@@ -294,7 +278,7 @@
     display: flex;
     align-items: flex-start;
     white-space: pre-wrap;
-    padding: 0.5rem;
+    padding: 0.5rem 0rem;
     overflow-y: auto;
   }