@poirazis/supercomponents-shared 1.2.10 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "Shared Svelte components library",
   "type": "module",
   "packageManager": "bun@1.0.0",
@@ -36,7 +36,6 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@budibase/types": "^3.24.4",
     "@jsrob/svelte-portal": "^0.2.1",
     "@phosphor-icons/web": "^2.1.2",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
@@ -49,6 +48,7 @@
     "zod": "4.3.5"
   },
   "devDependencies": {
+    "@budibase/types": "^3.24.4",
     "@sveltejs/package": "^2.3.12",
     "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "@tsconfig/svelte": "^5.0.4",

package/src/lib/SuperField/SuperField.svelte

@@ -106,7 +106,7 @@
 
 <style>
   .super-field {
-    min-width: 120px;
+    min-width: 80px;
     width: 100%;
     display: flex;
     flex-direction: column;

package/src/lib/SuperForm/InnerForm.svelte

@@ -2,7 +2,7 @@
   import { setContext, getContext, createEventDispatcher } from "svelte";
   import type { Readable, Writable } from "svelte/store";
   import { derived, get, writable } from "svelte/store";
-  import {
+  import type {
     DataFetchDatasource,
     FieldSchema,
     FieldType,

package/src/lib/SuperTable/SuperTable.svelte

@@ -2,7 +2,7 @@
   import { getContext, setContext, onDestroy, tick } from "svelte";
   import fsm from "svelte-fsm";
   import { writable } from "svelte/store";
-  import {
+  import type {
     LogicalOperator,
     EmptyFilterOption,
     SearchFilters,

package/src/lib/SuperTableCells/CellAttachmentExpanded.svelte

@@ -589,7 +589,6 @@
     bind:open={showModal}
     bind:currentIndex
     bind:selectedIndices
-    on:close={() => console.log("closed")}
     {canSelect}
     {canDelete}
   />

package/src/lib/SuperTableCells/CellAttachmentSlider.svelte

@@ -320,7 +320,6 @@
     bind:open={showModal}
     bind:currentIndex={modalImageIndex}
     bind:selectedIndices
-    on:close={() => console.log("lightbox closed")}
     on:delete={(e) => {
       handleDelete(e.detail.index);
     }}

package/src/lib/SuperTableCells/CellCommon.css

@@ -304,6 +304,7 @@
 
   &:hover:not(.disabled):not(.readonly):not(.inEdit) {
     border: 1px solid var(--spectrum-global-color-gray-400);
+    cursor: pointer;
   }
 
   &.disabled {

package/src/lib/SuperTableCells/CellDateRange.svelte

@@ -101,7 +101,7 @@
     dateFormat,
     fromTime,
     toTime,
-    showTime
+    showTime,
   ) {
     if (!showTime) {
       return {
@@ -120,14 +120,7 @@
 
   // Date formatting helper function
   function formatDateRange(fromDate, toDate, dateFormat) {
-    console.log("🔍 formatDateRange called with:", {
-      fromDate,
-      toDate,
-      dateFormat,
-    });
-
     if (!dateFormat || dateFormat === "default") {
-      console.log("➡️ Using default format");
       return {
         from: fromDate.toDateString(),
         to: toDate.toDateString(),
@@ -138,30 +131,18 @@
     if (dateFormat === "MM/DD/YYYY") {
       const fromFormatted = `${(fromDate.getMonth() + 1).toString().padStart(2, "0")}/${fromDate.getDate().toString().padStart(2, "0")}/${fromDate.getFullYear()}`;
       const toFormatted = `${(toDate.getMonth() + 1).toString().padStart(2, "0")}/${toDate.getDate().toString().padStart(2, "0")}/${toDate.getFullYear()}`;
-      console.log("✅ MM/DD/YYYY formatted:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return { from: fromFormatted, to: toFormatted };
     }
 
     if (dateFormat === "DD/MM/YYYY") {
       const fromFormatted = `${fromDate.getDate().toString().padStart(2, "0")}/${(fromDate.getMonth() + 1).toString().padStart(2, "0")}/${fromDate.getFullYear()}`;
       const toFormatted = `${toDate.getDate().toString().padStart(2, "0")}/${(toDate.getMonth() + 1).toString().padStart(2, "0")}/${toDate.getFullYear()}`;
-      console.log("✅ DD/MM/YYYY formatted:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return { from: fromFormatted, to: toFormatted };
     }
 
     if (dateFormat === "YYYY-MM-DD") {
       const fromFormatted = `${fromDate.getFullYear()}-${(fromDate.getMonth() + 1).toString().padStart(2, "0")}-${fromDate.getDate().toString().padStart(2, "0")}`;
       const toFormatted = `${toDate.getFullYear()}-${(toDate.getMonth() + 1).toString().padStart(2, "0")}-${toDate.getDate().toString().padStart(2, "0")}`;
-      console.log("✅ YYYY-MM-DD formatted:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return { from: fromFormatted, to: toFormatted };
     }
 
@@ -182,22 +163,16 @@
     };
 
     const format = options[dateFormat];
-    console.log("📅 Format object:", format);
 
     if (format) {
       const fromFormatted = fromDate.toLocaleDateString("en-US", format);
       const toFormatted = toDate.toLocaleDateString("en-US", format);
-      console.log("✅ Formatted result:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return {
         from: fromFormatted,
         to: toFormatted,
       };
     }
 
-    console.log("⚠️ Format not found, using fallback");
     // Fallback to default
     return {
       from: fromDate.toDateString(),
@@ -240,7 +215,7 @@
             dateFormat,
             fromTime,
             fromTime,
-            true
+            true,
           );
           fromFormatted = formatted.from;
         } else {
@@ -263,7 +238,7 @@
             dateFormat,
             toTime,
             toTime,
-            true
+            true,
           );
           toFormatted = formatted.to;
         } else {

package/src/lib/SuperTableCells/CellLink.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { getContext, createEventDispatcher } from "svelte";
   import fsm from "svelte-fsm";
   import SuperPopover from "../SuperPopover/SuperPopover.svelte";
   import CellLinkPickerSelect from "./CellLinkPickerSelect.svelte";
@@ -66,7 +66,7 @@
         if (isDirty)
           dispatch(
             "change",
-            returnSingle && localValue ? localValue[0] : localValue
+            returnSingle && localValue ? localValue[0] : localValue,
           );
 
         return "View";
@@ -190,10 +190,16 @@
   class:error={cellOptions.error}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  on:mousedown={editorState.toggle}
   on:focusin={cellState.focus}
   on:keydown|self={handleKeyboard}
   on:focusout={cellState.focusout}
+  on:mousedown={(e) => {
+    if (inEdit) {
+      // Prevent losing focus when clicking to open the picker
+      e.preventDefault();
+      editorState.toggle();
+    }
+  }}
 >
   {#if cellOptions?.icon}
     <i class={cellOptions.icon + " field-icon"}></i>

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -116,7 +116,7 @@
     Editing: {
       _enter() {
         originalValue = JSON.stringify(
-          Array.isArray(value) ? value : value ? [value] : []
+          Array.isArray(value) ? value : value ? [value] : [],
         );
         inputValue = multi ? "" : labels[localValue[0]] || localValue[0] || "";
         // Open the popup if the focus in came from a TAB
@@ -230,7 +230,7 @@
           // Client-side filtering for non-datasource
           if (term) {
             filteredOptions = $options.filter((x) =>
-              x?.toLocaleLowerCase().startsWith(term.toLocaleLowerCase())
+              x?.toLocaleLowerCase().startsWith(term.toLocaleLowerCase()),
             );
           } else {
             filteredOptions = $options;
@@ -403,7 +403,7 @@
     $options.forEach(
       (option, index) =>
         (obj[option] =
-          optionColors[option] ?? colorsArray[index % colorsArray.length])
+          optionColors[option] ?? colorsArray[index % colorsArray.length]),
     );
     return obj;
   });
@@ -441,7 +441,7 @@
   ];
 
   let originalValue = JSON.stringify(
-    Array.isArray(value) ? value : value ? [value] : []
+    Array.isArray(value) ? value : value ? [value] : [],
   );
 
   $: ({
@@ -492,7 +492,7 @@
     iconColumn,
     colorColumn,
     $dataSourceStore,
-    customOptions
+    customOptions,
   );
 
   // We always keep an internal value as an array
@@ -542,7 +542,6 @@
   class:inline={role == "inlineInput"}
   class:tableCell={role == "tableCell"}
   class:formInput={role == "formInput"}
-  style:cursor={inEdit ? "pointer" : "default"}
   on:focusin={cellState.focus}
   on:focusout={cellState.focusout}
   on:keydown={editorState.handleKeyboard}

package/src/lib/SuperTableCells/CellSQLLink.svelte

@@ -151,7 +151,7 @@
         });
 
         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) => ({
@@ -270,7 +270,6 @@
     useAnchorWidth
     open={$editorState == "Open"}
     on:close={(e) => {
-      console.log("closing editor");
       editorState.close();
     }}
   >

package/src/lib/SuperTableCells/CellSQLLinkPicker.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   import { getContext, createEventDispatcher, tick } from "svelte";
-  import { LogicalOperator, EmptyFilterOption } from "@budibase/types";
+  import type { LogicalOperator, EmptyFilterOption } from "@budibase/types";
 
   const { API, fetchData, QueryUtils } = getContext("sdk");
   const dispatch = createEventDispatcher();
@@ -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" ></i></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>
+                      <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" ></i> 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" ></i> 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>
+              <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>
+                    <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>
+                <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>
+              <i class="ri-loader-2-line rotating"></i>
               Loading...
             </div>
           {:else}

package/src/lib/SuperTableCells/CellStringMask.svelte

@@ -1,7 +1,28 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from "svelte";
   import fsm from "svelte-fsm";
-  import IMask from "imask";
+  import {
+    Masked,
+    InputMask,
+    createMask,
+    MaskedPattern,
+    MaskedRegExp,
+    MaskedNumber,
+    MaskedDate,
+    MaskedEnum,
+    MaskedRange,
+    MaskedDynamic,
+  } from "imask";
+
+  // Register mask classes with Masked.overloads to ensure they're available for createMask
+  // This is required for imask 6.x to properly handle pattern-based masks
+  if (MaskedPattern && Masked.overloads) {
+    // Ensure MaskedPattern is available as an overload
+    if (!Masked.overloads.find((o) => o.mask === MaskedPattern)) {
+      Masked.overloads.unshift({ mask: MaskedPattern });
+    }
+  }
+
   const dispatch = createEventDispatcher();
 
   export let value;
@@ -23,9 +44,53 @@
   let inputMask;
   let inputElement;
 
+  function createMaskInstance(maskPattern) {
+    if (!maskPattern) return null;
+    try {
+      // For imask 6.x, explicitly create a MaskedPattern instance
+      // This avoids the "Masked class is not found" error by directly instantiating
+      const mask = new MaskedPattern({
+        mask: maskPattern,
+        lazy: false,
+        placeholderChar: "_",
+      });
+      return mask;
+    } catch (patternError) {
+      try {
+        // Fallback: try as a regex pattern
+        const mask = new MaskedRegExp({
+          mask: new RegExp(maskPattern),
+          lazy: false,
+        });
+        return mask;
+      } catch (regexError) {
+        try {
+          // Last fallback: use generic createMask
+          return createMask({
+            mask: maskPattern,
+            lazy: false,
+          });
+        } catch (createError) {
+          console.error(
+            "Failed to create mask - pattern:",
+            maskPattern,
+            "errors:",
+            {
+              patternError: patternError?.message,
+              regexError: regexError?.message,
+              createError: createError?.message,
+            },
+          );
+          return null;
+        }
+      }
+    }
+  }
+
   function applyMask(rawValue) {
     if (!mask || !rawValue) return rawValue;
-    const tempMask = IMask.createMask({ mask: mask });
+    const tempMask = createMaskInstance(mask);
+    if (!tempMask) return rawValue;
     tempMask.unmaskedValue = rawValue;
     return tempMask.value;
   }
@@ -42,7 +107,11 @@
       return;
     }
 
-    const tempMask = IMask.createMask({ mask: mask });
+    const tempMask = createMaskInstance(mask);
+    if (!tempMask) {
+      isComplete = false;
+      return;
+    }
     tempMask.resolve(localValue);
     isComplete = tempMask.isComplete;
   }
@@ -158,16 +227,18 @@
         // For input validation, check if typed key is valid for mask
         if (e.key.length === 1 && mask) {
           // Check if key matches mask pattern (e.g., for "00000", only digits)
-          const tempMask = IMask.createMask({ mask: mask });
-          const currentLength = (localValue || "").length;
-          // Get the expected pattern for this position
-          // For simplicity, if mask contains only digits or specific chars, check if key matches
-          const placeholder =
-            tempMask.blocks[0]?.placeholder ||
-            (tempMask.mask.includes("0") ? "0" : null);
-          if (placeholder === "0" && !/\d/.test(e.key)) {
-            e.preventDefault();
-            return;
+          const tempMask = createMaskInstance(mask);
+          if (tempMask) {
+            const currentLength = (localValue || "").length;
+            // Get the expected pattern for this position
+            // For simplicity, if mask contains only digits or specific chars, check if key matches
+            const placeholder =
+              tempMask.blocks?.[0]?.placeholder ||
+              (tempMask.mask?.includes("0") ? "0" : null);
+            if (placeholder === "0" && !/\d/.test(e.key)) {
+              e.preventDefault();
+              return;
+            }
           }
         }
       },
@@ -180,6 +251,7 @@
   $: error = cellOptions?.error;
   $: icon = error ? "ph ph-warning" : cellOptions?.icon;
   $: cellState.reset(value);
+  $: displayValue = inEdit ? localValue : applyMask(value);
 
   const focus = (node) => {
     node?.focus();
@@ -217,18 +289,41 @@
       };
     }
 
-    inputMask = IMask(node, { mask: maskPattern });
-    inputMask.unmaskedValue = localValue || "";
+    try {
+      // Try to create mask instance using MaskedPattern first
+      const maskInstance = createMaskInstance(maskPattern);
+      if (maskInstance) {
+        inputMask = new InputMask(node, { mask: maskPattern });
+      } else {
+        throw new Error("Failed to create mask instance");
+      }
 
-    inputMask.on("accept", () => {
-      localValue = inputMask.unmaskedValue;
-      updateIsComplete();
-      lastEdit = new Date();
-    });
+      inputMask.unmaskedValue = localValue || "";
 
-    inputMask.on("complete", () => {
-      isComplete = true;
-    });
+      inputMask.on("accept", () => {
+        localValue = inputMask.unmaskedValue;
+        updateIsComplete();
+        lastEdit = new Date();
+      });
+
+      inputMask.on("complete", () => {
+        isComplete = true;
+      });
+    } catch (e) {
+      console.error("Error initializing IMask:", e);
+      // Fallback to plain input without masking
+      const handleInput = (e) => {
+        localValue = node.value;
+        lastEdit = new Date();
+      };
+      node.addEventListener("input", handleInput);
+      node.value = localValue || "";
+      return {
+        destroy() {
+          node.removeEventListener("input", handleInput);
+        },
+      };
+    }
 
     return {
       destroy() {
@@ -236,6 +331,8 @@
       },
     };
   }
+
+  $: console.log(value, localValue, isComplete);
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -302,7 +399,7 @@
       on:focusin={cellState.focus}
     >
       <span>
-        {applyMask(localValue) || placeholder}
+        {displayValue || placeholder}
       </span>
     </div>
   {/if}

package/src/lib/SuperTabs/SuperTabs.svelte

@@ -74,7 +74,7 @@
           {#if container.icon}
             <i
               class={container.icon}
-              style:font-size={tabsIconsOnly ? "20px" : null}
+              style:font-size={tabsIconsOnly ? "20px" : "inherit"}
               style:color={container.color}
             ></i>
           {/if}
@@ -121,13 +121,12 @@
     flex: auto;
     display: flex;
     gap: 1rem;
-    padding: 0.35rem 0.5rem;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-200);
-    border-top: 1px solid var(--spectrum-global-color-gray-200);
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
   }
 
   .tabs.buttons {
-    gap: 0.5rem;
+    gap: 0.25rem;
   }
 
   .tabs.list {
@@ -170,8 +169,12 @@
   }
 
   .tab.button {
-    border-radius: 4px;
-    padding: 0.35rem 1rem;
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem;
+    font-weight: 600;
+    line-height: 14px;
+    border: 1px solid transparent;
+    height: 1.85rem;
   }
 
   .tab.button.vertical {
@@ -179,12 +182,17 @@
   }
 
   .tab.button:active:not(.disabled):not(.list-section) {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: rgb(
+      from var(--spectrum-global-color-gray-200) r g b / 0.85
+    );
   }
 
   .tab.button.selected {
     color: var(--spectrum-global-color-gray-800);
-    background-color: var(--spectrum-global-color-gray-300);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    background-color: rgb(
+      from var(--spectrum-global-color-gray-200) r g b / 0.85
+    );
   }
 
   .tab.list {
@@ -234,11 +242,13 @@
 
   .tab:hover:not(.disabled):not(.list-title):not(.list-section) {
     cursor: pointer;
-    color: var(--spectrum-global-color-gray-800);
   }
 
   .tab.button:hover:not(.selected) {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: rgb(
+      from var(--spectrum-global-color-gray-200) r g b / 0.65
+    );
+    border-color: var(--spectrum-global-color-gray-200);
   }
 
   .tab.selected {