@poirazis/supercomponents-shared 1.2.16 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "Shared Svelte components library",
   "type": "module",
   "packageManager": "bun@1.0.0",
@@ -40,23 +40,23 @@
     "@phosphor-icons/web": "^2.1.2",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
     "date-picker-svelte": "^2.17.0",
-    "imask": "^6.6.3",
+    "imask": "^7.6.1",
     "shortid": "^2.2.17",
     "svelte-carousel": "^1.0.25",
     "svelte-dnd-action": "^0.9.69",
     "svelte-fsm": "^1.2.0",
-    "zod": "4.3.5"
+    "zod": "4.4.3"
   },
   "devDependencies": {
-    "@budibase/types": "^3.30.1",
+    "@budibase/types": "^3.38.4",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tsconfig/svelte": "^5.0.8",
-    "postcss": "^8.5.6",
-    "sass": "^1.97.3",
-    "svelte": "^5.53.0",
-    "typescript": "^5.9.3",
-    "vite": "^5.4.21",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
+    "postcss": "^8.5.14",
+    "sass": "^1.99.0",
+    "svelte": "^5.55.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.13",
+    "vite-plugin-css-injected-by-js": "^5.0.1"
   }
 }

package/src/lib/SuperButton/SuperButton.svelte

@@ -1,18 +1,22 @@
 <script>
-  import { onDestroy, onMount } from "svelte";
+  import { onDestroy, onMount, getContext } from "svelte";
   import Tooltip from "../UI/elements/Tooltip.svelte";
 
+  const { enrichButtonActions } = getContext("sdk");
+  const context = getContext("context");
+
   export let size = "M";
   export let menuItem = false;
   export let menuAlign = "right";
   export let icon = undefined;
   export let iconAfterText = undefined;
   export let iconColor = undefined;
+  export let filledIcon = undefined;
   export let text = "";
   export let quiet = undefined;
   export let selected = undefined;
   export let disabled = undefined;
-  export let onClick = undefined;
+  export let onClick;
   export let buttonClass = "actionButton";
   export let type = "primary";
   export let tooltip;
@@ -38,13 +42,16 @@
   export let onFalseCondition = undefined;
 
   $: loop = safeParse(loopSource);
+  $: buttonText = text || (actionsMode == "timer" ? timerDuration : "");
   $: icon_class = working
     ? "ph ph-spinner-gap ph-spin"
     : icon && !icon.startsWith("ri-")
       ? "ph ph-" + icon
       : icon
         ? icon
-        : undefined;
+        : actionsMode == "timer"
+          ? "ph ph-timer"
+          : undefined;
 
   let working = false;
   let ui_timer = undefined;
@@ -55,24 +62,31 @@
   let tooltipTimer;
 
   const showTooltip = () => {
-    if (disabled) return;
+    if (disabled || tooltipShow || !tooltip) return;
     if (tooltipTimer) clearTimeout(tooltipTimer);
     tooltipTimer = setTimeout(() => {
       tooltipShow = true;
-    }, 750);
+    }, 500);
   };
 
-  const hideTooltip = () => {
+  const hideTooltip = (e) => {
     if (tooltipTimer) {
       clearTimeout(tooltipTimer);
-      tooltipTimer = null;
     }
     tooltipShow = false;
   };
 
   async function handleClick(e) {
+    let enrichedAction;
+    if (Array.isArray(onClick)) {
+      enrichedAction = enrichButtonActions(onClick, $context);
+    } else {
+      enrichedAction = onClick;
+    }
+
     if (disabled || working || actionsMode == "timer") return;
     working = true;
+    tooltipShow = false;
     if (actionsMode == "loop") {
       if (onLoopStart) await onLoopStart({ iterations: loopSource?.length });
       if (Array.isArray(loop) && loopEvent) {
@@ -85,8 +99,8 @@
     } else if (actionsMode == "conditional") {
       if (condition == true) await onTrueCondition?.();
       else await onFalseCondition?.();
-    } else if (onClick) {
-      await onClick?.(e);
+    } else if (enrichedAction) {
+      await enrichedAction?.(e);
     }
     working = false;
   }
@@ -161,11 +175,12 @@
 >
   <i
     class={icon_class}
+    class:ph-fill={filledIcon}
     style:order={iconAfterText ? 1 : 0}
     style:color={disabled ? "var(--spectrum-global-color-gray-400)" : iconColor}
   ></i>
 
-  <span>{actionsMode !== "timer" ? text : elapsed + "s"}</span>
+  <span>{buttonText}</span>
 </button>
 
 {#if tooltip}
@@ -181,31 +196,47 @@
     align-items: center;
     justify-content: center;
     padding: 0rem 1rem;
-    min-width: 5rem;
-    gap: 0.5rem;
+    min-width: 4rem;
+    gap: 0.75rem;
     height: 2rem;
 
+    &.spectrum-ActionButton {
+      padding: 0rem 0.75rem !important;
+      border-radius: 4px !important;
+    }
+    &.spectrum-ActionButton.xsmall {
+      padding: 0rem 0.5rem !important;
+      border-radius: 4px !important;
+    }
     &.xsmall {
       height: 1.5rem;
-      font-size: 10px;
-      padding: 0rem 0.5rem;
+      padding: 0rem 0.75rem;
       min-width: unset;
+      gap: 0.5rem;
+      font-size: 12px;
+      border-radius: 1rem;
     }
 
     &.small {
       min-width: 4rem;
-      padding: 0rem 1rem;
+      padding: 0rem 0.75rem;
       gap: 0.5rem;
-      height: 1.85rem;
+      height: 1.75rem;
+      font-size: 13px;
     }
 
     &.large {
       height: 2.25rem;
+      font-size: 16px;
+      padding: 0rem 1.25rem;
+
+      & > i {
+        font-size: 18px;
+      }
     }
 
     & > span {
       white-space: nowrap;
-      font-size: 14px;
       font-weight: 600;
     }
 
@@ -228,6 +259,7 @@
       display: none;
       opacity: 0.9;
       font-weight: 400;
+      font-size: 15px;
     }
   }
 
@@ -254,6 +286,7 @@
   i {
     color: var(--iconColor);
     transition: all 230ms ease-in-out;
+    font-size: 16px;
   }
 
   .cta {
@@ -311,13 +344,13 @@
   .primary {
     &:hover,
     &:focus {
-      border: 1px solid var(--spectrum-global-color-gray-600);
-      background-color: var(--spectrum-global-color-gray-800);
-      color: var(--spectrum-global-color-gray-50);
+      border: 1px solid var(--spectrum-global-color-gray-500);
+      background-color: var(--spectrum-global-color-gray-200);
+      color: var(--spectrum-global-color-gray-900);
     }
     &:active {
       background-color: var(--spectrum-global-color-gray-100);
-      border: 1px solid var(--spectrum-global-color-gray-600);
+      border: 1px solid var(--spectrum-global-color-gray-500);
     }
 
     &.quiet {
@@ -340,7 +373,7 @@
       background-color: transparent;
 
       &:hover {
-        background-color: var(--spectrum-global-color-gray-200);
+        background-color: var(--spectrum-global-color-gray-300);
       }
     }
 
@@ -365,6 +398,8 @@
 
       &:hover {
         border-color: var(--spectrum-global-color-red-400);
+        background-color: var(--spectrum-global-color-red-400);
+        color: white;
         font-weight: bolder;
       }
 

package/src/lib/SuperField/SuperField.svelte

@@ -155,9 +155,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-weight: 300;
     line-height: 1.65rem;
-    letter-spacing: 0.35px;
     color: var(--spectrum-global-color-gray-700);
     font-family: "inter", sans-serif;
     gap: 1rem;

package/src/lib/SuperForm/InnerForm.svelte

@@ -118,6 +118,11 @@
     __editing: !readonly && !disabled,
   };
 
+  $: scope =
+    provideContextScope === "local"
+      ? ContextScopes.Local
+      : ContextScopes.Global;
+
   const deriveFieldProperty = (
     fieldStores: Readable<FieldInfo>[],
     getProp: (_field: FieldInfo) => any,
@@ -584,18 +589,12 @@
 
 {#key labelPosition}
   {#if provideContext}
-    <Provider
-      {actions}
-      data={dataContext}
-      scope={provideContextScope === "local"
-        ? ContextScopes.Local
-        : ContextScopes.Global}
-    >
+    <Provider {actions} data={dataContext} {scope}>
       <div
         class="super-form-inner-form"
         class:labels-left={labelPosition === "left"}
         class:no-labels={labelPosition === false || labelPosition === "none"}
-        class:field-group={true}
+        class:field-group={columns > 1}
         style:grid-template-columns={`repeat(${columns * 6}, 1fr)`}
         style:row-gap={rowGap}
         style:column-gap={columnGap}

package/src/lib/SuperTable/SuperTable.css

@@ -8,12 +8,14 @@
   border-radius: 0.25rem;
   overflow: hidden;
   height: 360px;
-  --row-selection-color: rgba(75, 117, 255, 0.15);
-  --row-hover-color: rgba(75, 117, 255, 0.05);
+  --row-selection-color: rgb(from var(--primaryColor) r g b / 0.25);
+  --row-hover-color: rgb(from var(--primaryColor) r g b / 0.05);
 
   &.quiet {
-    background: transparent;
+    background: rgb(from var(--spectrum-global-color-gray-50) r g b / 0.75);
+    color: var(--spectrum-global-color-gray-700);
     --row-selection-color: var(--spectrum-global-color-gray-200);
+    --row-hover-color: var(--spectrum-global-color-gray-100);
     border-color: var(--spectrum-global-color-gray-200);
   }
 
@@ -86,7 +88,7 @@
   flex: auto;
   position: relative;
   flex-direction: column;
-  border-right: var(--super-table-vertical-dividers);
+
   overflow: hidden;
   scrollbar-width: none;
 
@@ -134,6 +136,10 @@
       cursor: col-resize;
     }
   }
+
+  &:last-child .super-column-body {
+    border-right: unset;
+  }
 }
 
 .super-column-header {
@@ -193,6 +199,7 @@
   flex: auto;
   overflow: hidden;
   max-height: var(--super-table-body-height);
+  border-right: var(--super-table-vertical-dividers);
   height: 100%;
 
   &.zebra:not(.sticky) > .super-row:nth-child(even) {
@@ -251,8 +258,8 @@
   }
 
   &.disabled {
-    color: var(--spectrum-global-color-gray-500) !important;
-    font-style: italic;
+    color: var(--spectrum-global-color-gray-600) !important;
+    font-style: italic !important;
   }
 
   &.isLast {

package/src/lib/SuperTable/SuperTable.svelte

@@ -29,6 +29,7 @@
   import ControlSection from "./controls/ControlSection.svelte";
   import ColumnsSection from "./controls/ColumnsSection.svelte";
   import PaginationLimitOffset from "./controls/PaginationLimitOffset.svelte";
+  import { ta } from "zod/v4/locales";
 
   const {
     API,
@@ -132,6 +133,7 @@
   const filterStore = memo(filter);
   const cachedRows = writable([]);
   const loading = writable(false);
+  const resizing = writable(false);
 
   $: dataSourceStore.set(dataSource);
   $: filterStore.set(filter);
@@ -659,11 +661,12 @@
           // Clear errors on success
           $new_row.errors = {};
           $new_row = $new_row;
-          stbState.refresh();
+
           let richContext = { ...$context, [comp_id]: { row: saved_row } };
           let cmd_after = enrichButtonActions(afterInsert, richContext);
           await cmd_after?.({ row: saved_row });
           stbState.endSave(); // Only on success
+          stbState.refresh();
           return saved_row;
         } catch (e) {
           // Auto-clear errors after 2 seconds
@@ -691,6 +694,13 @@
           } else {
             // Fallback for generic errors
             $new_row.errors = { general: e.message || "Save failed" };
+            stbState.endSave(); // End save state on generic errors as well
+            notificationStore.actions.error(
+              "Failed to insert " +
+                (entitySingular || "Row") +
+                ": " +
+                (e.message || "Unknown error"),
+            );
           }
         }
       }
@@ -896,6 +906,15 @@
             ? [ids]
             : [];
     },
+    refreshColumns: () => {
+      columnStates?.forEach(({ state }) => state.unlockWidth());
+    },
+    startResize: () => {
+      resizing.set(true);
+    },
+    endResize: () => {
+      resizing.set(false);
+    },
   };
 
   // Super Table State Machine
@@ -1496,6 +1515,9 @@
     limit,
   });
 
+  // Allow Columns to resize
+  $: tableAPI.refreshColumns(tableWidth, $stbData.loaded);
+
   // Virtual List Capabilities reacting to viewport change
   $: stbState.calculateBoundaries(
     clientHeight,
@@ -1584,17 +1606,6 @@
     if (timer) clearInterval(timer);
     if (scrollLockTimeout) clearTimeout(scrollLockTimeout);
   });
-
-  // Unlock columns when table width changes to allow responsive re-rendering
-  let previousTableWidth = 0;
-  $: if (
-    (tableWidth > 0 && tableWidth !== previousTableWidth) ||
-    $columnsStore
-  ) {
-    previousTableWidth = tableWidth;
-    // Unlock all columns to allow responsive re-rendering
-    columnStates?.forEach(({ state }) => state.unlockWidth());
-  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -1604,7 +1615,7 @@
   <div
     class="super-table"
     class:quiet
-    class:initializing
+    class:initializing={initializing || $stbData.loading}
     bind:this={viewport}
     bind:clientWidth={tableWidth}
     bind:clientHeight
@@ -1635,7 +1646,7 @@
         hideSelectionColumn={hideSelectionColumn || $superColumns.length === 0}
       />
 
-      {#if showButtonColumnLeft}
+      {#if showButtonColumnLeft && $superColumns.length > 0 && $stbData.loaded}
         <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
       {/if}
 
@@ -1690,7 +1701,7 @@
     />
 
     <EmptyResultSetOverlay
-      {isEmpty}
+      isEmpty={isEmpty && !$stbData.loading}
       message={$stbSettings.data.emptyMessage}
       top={$superColumns?.length
         ? $stbSettings.appearance.headerHeight + 16

package/src/lib/SuperTable/constants.js

@@ -13,7 +13,7 @@ export const sizingMap = {
     rowFontSize: 13,
     rowHeight: 36,
     headerFontSize: 11,
-    headerHeight: 38,
+    headerHeight: 40,
     checkboxSize: 14,
   },
   L: {

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

@@ -5,7 +5,6 @@
 
   const stbSettings = getContext("stbSettings");
   const stbState = getContext("stbState");
-  const stbData = getContext("stbData");
   const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
   const stbHovered = getContext("stbHovered");
   const stbEditing = getContext("stbEditing");
@@ -16,6 +15,8 @@
 
   const stbAPI = getContext("stbAPI");
 
+  const allContext = getContext("context");
+
   export let right;
   export let rowMenu;
   export let rowMenuItems;
@@ -57,6 +58,12 @@
   <div
     class="super-column-body"
     style:margin-top={"var(--super-column-top-offset)"}
+    style:border-right={right
+      ? null
+      : "1px solid var(--super-table-devider-color, --spectrum-global-color-gray-200)"}
+    style:border-left={right
+      ? "1px solid var(--super-table-devider-color, --spectrum-global-color-gray-200)"
+      : null}
     class:quiet
     class:sticky
     class:zebra={$stbSettings.appearance.zebraColors}
@@ -76,7 +83,7 @@
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="row-buttons"
-          style:gap={inlineButtons.length > 1 ? "0.5rem" : "0rem"}
+          style:gap={inlineButtons.length > 1 ? "0.25rem" : "0rem"}
         >
           {#if rowMenu && inlineButtons?.length}
             {#each inlineButtons as { conditions, disabledTemplate, onClick, disabled, ...rest }}
@@ -89,6 +96,7 @@
                     stbAPI.shouldDisableButton(
                       disabledTemplate,
                       stbAPI.enrichContext($data[visibleRow]),
+                      $allContext,
                     )}
                   onClick={() => {
                     stbAPI.executeRowButtonAction(visibleRow, onClick);
@@ -99,7 +107,7 @@
           {/if}
           {#if rowMenu && menuItems?.length}
             <SuperButton
-              size="S"
+              size="XS"
               icon={menuIcon}
               text=""
               quiet="true"
@@ -134,20 +142,28 @@
     {#if menuItems?.length}
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="action-menu">
-        {#each menuItems as { text, icon, disabled, onClick, size }}
-          <SuperButton
-            {size}
-            {icon}
-            {text}
-            {disabled}
-            menuItem
-            menuAlign={right ? "right" : "left"}
-            onClick={() => {
-              stbAPI.executeRowButtonAction($stbMenuID, onClick);
-              openMenu = false;
-              $stbMenuID = undefined;
-            }}
-          />
+        {#each menuItems as { text, icon, disabled, onClick, size, conditions, disabledTemplate }}
+          {#if stbAPI.shouldShowButton(conditions || [], stbAPI.enrichContext($data[$stbMenuID]))}
+            <SuperButton
+              {size}
+              {icon}
+              {text}
+              disabled={disabled ||
+                $stbEditing == $stbMenuID ||
+                $rowMetadata[$stbMenuID].disabled ||
+                stbAPI.shouldDisableButton(
+                  disabledTemplate,
+                  stbAPI.enrichContext($data[$stbMenuID]),
+                )}
+              menuItem
+              menuAlign={right ? "right" : "left"}
+              onClick={() => {
+                stbAPI.executeRowButtonAction($stbMenuID, onClick);
+                openMenu = false;
+                $stbMenuID = undefined;
+              }}
+            />
+          {/if}
         {/each}
       </div>
     {/if}

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

@@ -73,7 +73,7 @@
       class:quiet
       class:sticky
       style:margin-top={"var(--super-column-top-offset)"}
-      style:border-right={"1px solid var(--spectrum-global-color-gray-200)"}
+      style:border-right={"1px solid var(--super-table-devider-color, --spectrum-global-color-gray-200)"}
     >
       {#each $stbVisibleRows as visibleRow (visibleRow)}
         {@const selected = $stbRowMetadata[visibleRow]?.selected}
@@ -95,7 +95,7 @@
           {#if $stbSettings.features.canSelect && !hideSelectionColumn}
             <Checkbox
               checked={selected}
-              disabled={$stbRowMetadata[visibleRow]?.disabled}
+              locked={$stbRowMetadata[visibleRow]?.disabled}
               hovered={$stbHovered == visibleRow}
               on:change={() => stbAPI.selectRow(visibleRow)}
             />