@poirazis/supercomponents-shared 1.2.11 → 1.2.13

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.unmaskedValue = localValue || "";
 
-    inputMask.on("accept", () => {
-      localValue = inputMask.unmaskedValue;
-      updateIsComplete();
-      lastEdit = new Date();
-    });
+      inputMask.on("accept", () => {
+        localValue = inputMask.unmaskedValue;
+        updateIsComplete();
+        lastEdit = new Date();
+      });
 
-    inputMask.on("complete", () => {
-      isComplete = true;
-    });
+      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() {
@@ -268,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)"
@@ -296,13 +390,12 @@
     <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}
     >
       <span>
-        {applyMask(localValue) || placeholder}
+        {displayValue || placeholder}
       </span>
     </div>
   {/if}

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"
@@ -74,7 +73,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}
@@ -104,30 +103,24 @@
   }
 
   .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;
     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,21 +163,31 @@
   }
 
   .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 {
     width: 100%;
+    padding: 0.5rem 0.75rem;
   }
 
   .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);
+    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
+    );
   }
 
   .tab.list {
@@ -234,11 +237,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 {

package/src/lib/SuperTable/controls/SuperTableWelcome.svelte

@@ -1,58 +0,0 @@
-<script>
-  function autoSetup() {}
-</script>
-
-<div class="welcome">
-  <div class="welcome-icon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-      viewBox="0 0 18 18"
-    >
-      <defs>
-        <style>
-          .fill {
-            fill: #1da1f2;
-          }
-        </style>
-      </defs>
-      <title>S Table 18 N</title>
-      <rect
-        id="Canvas"
-        fill="#ff13dc"
-        opacity="0"
-        width="18"
-        height="18"
-      /><path
-        class="fill"
-        d="M16.5,1H1.5a.5.5,0,0,0-.5.5v15a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5V1.5A.5.5,0,0,0,16.5,1ZM6,16H2V14H6Zm0-3H2V11H6Zm0-3H2V8H6Zm10,6H7V14h9Zm0-3H7V11h9Zm0-3H7V8h9Zm0-3H2V2H16Z"
-      ></p>
-    </svg>
-  </div>
-
-  <div class="welcome-text">
-    <h2>Welcome to the Super Table Component</h2>
-    <p>You need to connect your Super Table to a Data Provider</p>
-    <p>and select the <strong>Unique ID Column</strong></p>
-    <p>Then add some Super Columns to start designing you table</p>
-  </div>
-</div>
-
-<style>
-  h2 {
-    padding-top: none;
-    margin-top: unset;
-  }
-  .welcome {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-content: middle;
-    gap: 20px;
-  }
-
-  .welcome-text,
-  .welcome-icon {
-  }
-</style>