@poirazis/supercomponents-shared 1.2.12 → 1.2.13

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;
   }
 

package/src/lib/SuperTableCells/CellStringMask.svelte

@@ -331,8 +331,6 @@
       },
     };
   }
-
-  $: console.log(value, localValue, isComplete);
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -365,7 +363,6 @@
       bind:this={inputElement}
       tabindex="0"
       class="editor"
-      class:with-icon={cellOptions.icon}
       {placeholder}
       style:color={!isComplete
         ? "var(--spectrum-global-color-gray-700)"
@@ -393,7 +390,6 @@
     <div
       class="value"
       tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
-      class:with-icon={cellOptions.icon}
       class:placeholder={!value}
       style:justify-content={cellOptions.align}
       on:focusin={cellState.focus}

package/src/lib/SuperTableCells/CellStringSimple.svelte

@@ -10,12 +10,11 @@
     debounce: 250,
   };
 
-  $: formattedValue =
-    cellOptions?.template
-      ? processStringSync(cellOptions.template, {
-          value,
-        })
-      : undefined;;
+  $: formattedValue = cellOptions?.template
+    ? processStringSync(cellOptions.template, {
+        value,
+      })
+    : undefined;
 
   $: placeholder =
     cellOptions.readonly || cellOptions.disabled
@@ -39,12 +38,11 @@
   style:font-weight={cellOptions.fontWeight}
 >
   {#if cellOptions.icon}
-    <i class={cellOptions.icon + " icon"}></i>
+    <i class={cellOptions.icon + " field-icon"}></i>
   {/if}
 
   <div
     class="value"
-    class:with-icon={cellOptions.icon}
     class:placeholder={!value}
     style:justify-content={cellOptions.align}
   >

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -28,6 +28,8 @@
   const stbState = getContext("stbState");
   const stbAPI = getContext("stbAPI");
 
+  const data = getContext("data");
+
   // Cell Components Map
   const cellComponents = {
     string: CellString,
@@ -68,7 +70,6 @@
   export let columnOptions;
   export let sticky;
   export let scrollPos;
-  export let stbData;
 
   // Internal Variables
   let id = Math.random() * 100;
@@ -106,9 +107,7 @@
       })
     : undefined;
 
-  $: values = $stbData?.rows?.map((row) =>
-    deepGet(row, $columnOptionsStore.name)
-  );
+  $: values = $data.map((row) => deepGet(row, $columnOptionsStore.name));
 
   $: if ($stbSortColumn == $columnOptionsStore.name) {
     sorted = $stbSortOrder;
@@ -139,7 +138,7 @@
         color: $columnOptionsStore.color,
         controlType: "checkbox",
       };
-    }
+    },
   );
 
   const headerCellOptions = derivedMemo(
@@ -160,7 +159,7 @@
         initialState: "Editing",
         role: "inlineInput",
       };
-    }
+    },
   );
 
   // Allow the Super Table to bind to the Super Column State Machine to control it
@@ -177,7 +176,7 @@
         if (columnOptions.canSort) {
           stbState.sortBy(
             columnOptions.name,
-            sorted == "ascending" ? "descending" : "ascending"
+            sorted == "ascending" ? "descending" : "ascending",
           );
           sorted = "ascending" ? "descending" : "ascending";
         }
@@ -188,7 +187,7 @@
       unlockWidth() {
         if (resizing) return;
         $lockWidth = 0;
-        if (!columnOptions.asComponent) this.lockWidth.debounce(50);
+        if (!columnOptions.asComponent) this.lockWidth.debounce(150);
       },
       startResizing(e) {
         e.stopPropagation();
@@ -244,6 +243,7 @@
         return "Idle";
       },
       clear() {
+        stbState.clearFilter(id);
         return "Idle";
       },
     },
@@ -259,7 +259,7 @@
     },
     EditingCell: {
       _enter() {
-        $lockWidth = viewport.clientWidth;
+        $lockWidth = Math.max(viewport.clientWidth, 160);
         stbState.edit.debounce(30);
       },
       patchRow(index, id, rev, field, change) {
@@ -395,7 +395,7 @@
   {/if}
 
   <SuperColumnBody
-    rows={$stbData?.rows}
+    rows={$data}
     rowHeight={$stbSettings.appearance.rowHeight}
     field={$columnOptionsStore.name}
     idField={$stbSettings.data.idColumn}

package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte

@@ -28,6 +28,10 @@
   }
 
   $: isEntering = $columnState == "Entering";
+  $: if ($columnState == "Idle") {
+    filterValue = null;
+    filterOperator = $columnOptions.defaultFilteringOperator;
+  }
 
   const handleValueChange = (e) => {
     if (e.detail != undefined && e.detail != null && e.detail != "") {
@@ -125,7 +129,6 @@
       fieldSchema={$columnOptions.schema}
       multi={filterOperator == "containsAny" || filterOperator == "oneOf"}
       on:change={handleValueChange}
-      on:cancel={columnState.cancel}
       on:focusout={handleBlur}
     />
   {:else}

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -21,16 +21,18 @@
   export let isLast;
   export let disabled;
 
-  // the default height
-
-  let viewport;
   let info;
 
-  $: meta = $rowMetadata?.[index] ?? {};
+  // Get Row overrides from metadata or fallback to column settings
+  $: color = $rowMetadata[index]?.color;
+  $: height = $rowMetadata[index]?.height;
+  $: bgcolor = $rowMetadata[index]?.bgcolor;
+
   $: id = row?.[idField] ?? index;
   $: value = deepGet(row, field);
-  $: isHovered = $stbHovered == index || $stbMenuID == index;
-  $: isSelected = $rowMetadata?.[index]?.selected ?? false;
+  $: hovered = $stbHovered == index || $stbMenuID == index;
+  $: selected = $rowMetadata?.[index]?.selected ?? false;
+  $: disabled = $rowMetadata?.[index]?.disabled ?? false;
   $: hasChildren = $columnSettings.hasChildren > 0;
 
   const patchRow = async (change) => {
@@ -73,37 +75,39 @@
     } else return obj[path] ?? undefined;
   };
 
+  const onClick = () => {
+    if (disabled) return;
+    stbState.handleRowClick(index, field, deepGet(row, field), id);
+  };
   onDestroy(() => {
     if ($stbEditing == index) {
       columnState.exitedit();
     }
   });
+
+  const onContextMenu = (e) => {
+    stbAPI.showContextMenu(index, e.__root);
+  };
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
-  bind:this={viewport}
   class="super-row"
-  class:is-selected={isSelected}
-  class:is-hovered={isHovered}
-  class:is-editing={isEditing}
-  class:is-disabled={meta.disabled}
+  class:selected
+  class:hovered
+  class:isEditing
+  class:disabled
   class:isLast
-  style:height={meta.height + "px"}
-  style:color={meta.color}
-  style:background-color={meta.bgcolor}
+  style:height
+  style:color
+  style:background-color={bgcolor}
   style:justify-content={$columnSettings.align}
   on:mouseenter={() => ($stbHovered = index)}
   on:mouseleave={() => ($stbHovered = undefined)}
-  on:click={() => {
-    if (!meta.disabled)
-      stbState.handleRowClick(index, field, deepGet(row, field), id);
-  }}
-  on:contextmenu|preventDefault={() => {
-    stbAPI.showContextMenu(index, viewport);
-  }}
+  on:click={onClick}
+  on:contextmenu|preventDefault={onContextMenu}
 >
   {#if !hasChildren}
     <svelte:component

package/src/lib/SuperTabs/SuperTabs.svelte

@@ -15,14 +15,14 @@
   export let tabsIconsOnly;
   export let list_icon;
   export let list_title;
-  export let wide = true;
+  export let tabsWidth = "200px";
 
   export let quietTabs;
 
   // Computed for repeated logic
   $: isVertical = tabsPosition == "left" || theme === "list";
   $: justify = direction === "row" ? hAlign : vAlign;
-  $: button = theme === "buttons" || theme === "wideButtons";
+  $: button = theme === "buttons";
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -33,15 +33,14 @@
     class:quietTabs
     class:list={theme === "list"}
     class:vertical={isVertical}
-    class:wide={theme === "wideButtons" && wide}
     style:justify-content={justify}
+    style:width={isVertical ? tabsWidth || "200px" : "100%"}
   >
     <div
       class="tabs"
       class:vertical={isVertical}
       class:buttons={button}
       class:list={theme === "list"}
-      class:wide={theme === "wideButtons" && wide}
       style:justify-content={buttonsAlignment}
       style:--tab-alignment={tabsAlignment}
       style:--tab-track-thickness="1px"
@@ -104,19 +103,14 @@
   }
 
   .outer-tabs.vertical {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
     flex-direction: column;
     align-items: stretch;
-    margin-right: 0.75rem;
     margin-bottom: unset;
-    width: 10rem;
-    background-color: var(--spectrum-global-color-gray-100);
     --selected-tab: var(--spectrum-global-color-gray-200);
   }
 
-  .outer-tabs.vertical.wide {
-    width: 14rem;
-  }
-
   .tabs {
     flex: auto;
     display: flex;
@@ -179,6 +173,7 @@
 
   .tab.button.vertical {
     width: 100%;
+    padding: 0.5rem 0.75rem;
   }
 
   .tab.button:active:not(.disabled):not(.list-section) {
@@ -188,7 +183,7 @@
   }
 
   .tab.button.selected {
-    color: var(--spectrum-global-color-gray-800);
+    color: var(--spectrum-global-color-gray-700);
     border: 1px solid var(--spectrum-global-color-gray-300);
     background-color: rgb(
       from var(--spectrum-global-color-gray-200) r g b / 0.85