@poirazis/supercomponents-shared 1.2.15 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.15",
+  "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.29.0",
+    "@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.51.3",
-    "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}
@@ -175,40 +190,54 @@
 <style>
   .super-button {
     border: 1px solid var(--spectrum-global-color-gray-400);
-    background-color: var(--spectrum-global-color-gray-75);
+    background-color: var(--spectrum-global-color-gray-50);
     color: var(--spectrum-global-color-gray-800);
     display: flex;
     align-items: center;
-    font-weight: 600;
-    min-width: 5rem;
-    padding: 0rem 0.75rem;
-    gap: 0.5rem;
+    justify-content: center;
+    padding: 0rem 1rem;
+    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 0.5rem;
+      padding: 0rem 0.75rem;
       gap: 0.5rem;
-      height: 1.85rem;
-
-      &.ink {
-        height: 1.5rem;
-      }
+      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-weight: 600;
     }
 
     &.icon {
@@ -229,6 +258,8 @@
     & > i {
       display: none;
       opacity: 0.9;
+      font-weight: 400;
+      font-size: 15px;
     }
   }
 
@@ -255,6 +286,7 @@
   i {
     color: var(--iconColor);
     transition: all 230ms ease-in-out;
+    font-size: 16px;
   }
 
   .cta {
@@ -286,12 +318,9 @@
     }
   }
   .ink {
-    background-color: var(--spectrum-global-color-gray-700);
-    border: 1px solid var(--spectrum-global-color-gray-700);
+    background-color: var(--spectrum-global-color-gray-800);
+    border: 1px solid transparent;
     color: var(--spectrum-global-color-gray-50);
-    font-weight: 700;
-    opacity: 0.9;
-    max-height: 1.35rem;
 
     &.quiet {
       border-color: transparent !important;
@@ -300,12 +329,12 @@
       &:hover,
       &:focus {
         color: var(--spectrum-global-color-gray-50);
-        background-color: var(--spectrum-global-color-gray-800);
+        background-color: var(--spectrum-global-color-gray-900);
       }
     }
     &:hover,
     &:focus {
-      background-color: var(--spectrum-global-color-gray-800);
+      background-color: var(--spectrum-global-color-gray-900);
     }
 
     &:active {
@@ -316,18 +345,19 @@
     &:hover,
     &:focus {
       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 {
       border-color: transparent;
       background-color: transparent;
       &:hover {
-        background-color: var(--spectrum-global-color-gray-200);
+        background-color: var(--spectrum-global-color-gray-400);
         color: var(--spectrum-global-color-gray-900);
       }
     }
@@ -340,12 +370,10 @@
     font-weight: 500;
 
     &.quiet {
-      border-color: transparent;
       background-color: transparent;
 
       &:hover {
-        background-color: transparent;
-        border-color: var(--spectrum-global-color-gray-400);
+        background-color: var(--spectrum-global-color-gray-300);
       }
     }
 
@@ -370,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

@@ -52,7 +52,7 @@
     showTooltip = false;
   };
 
-  $: width = labelPos == "left" ? (labelWidth ? labelWidth : "5rem") : "auto";
+  $: width = labelPos == "left" ? (labelWidth ? labelWidth : "6rem") : "auto";
   $: isLabelTruncated = checkIfTruncated(labelElement);
 </script>
 
@@ -116,7 +116,7 @@
     min-height: var(--field-height, 2rem);
 
     &.multirow {
-      max-height: var(--height);
+      max-height: var(--field-height);
     }
 
     &.left-label {
@@ -133,39 +133,35 @@
       flex-direction: row;
       align-items: stretch;
     }
-
-    &:focus-within {
-      & > .superlabel {
-        color: var(--spectrum-global-golor-gray-700);
-      }
-    }
   }
 
   .inline-cells {
+    flex: 1;
     display: flex;
     align-items: stretch;
     min-height: 2rem;
     overflow: hidden;
 
     &.multirow {
+      flex: 1;
       flex-direction: column;
       align-items: stretch;
-      justify-content: flex;
     }
   }
 
   .superlabel {
-    flex: 0 0 auto;
     width: var(--label-width);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-weight: 400;
     line-height: 1.65rem;
     color: var(--spectrum-global-color-gray-700);
+    font-family: "inter", sans-serif;
     gap: 1rem;
     transition: 130ms;
+    padding-left: 2px;
+    opacity: 0.9;
 
     &.left {
       flex-direction: column;
@@ -173,6 +169,7 @@
       justify-content: center;
       line-height: 1rem;
       gap: 0px;
+      padding-left: unset;
 
       &.tall {
         justify-content: flex-start;

package/src/lib/SuperForm/InnerForm.svelte

@@ -52,6 +52,8 @@
   export let formValue: Record<string, any> = {};
   export let labelPosition: string | boolean = "above";
   export let columns: number = 1;
+  export let rowGap: string = "0.5rem";
+  export let columnGap: string = "0.5rem";
 
   const {
     Provider,
@@ -116,6 +118,11 @@
     __editing: !readonly && !disabled,
   };
 
+  $: scope =
+    provideContextScope === "local"
+      ? ContextScopes.Local
+      : ContextScopes.Global;
+
   const deriveFieldProperty = (
     fieldStores: Readable<FieldInfo>[],
     getProp: (_field: FieldInfo) => any,
@@ -582,19 +589,15 @@
 
 {#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={columns > 1}
         style:grid-template-columns={`repeat(${columns * 6}, 1fr)`}
+        style:row-gap={rowGap}
+        style:column-gap={columnGap}
       >
         <slot />
       </div>
@@ -614,6 +617,8 @@
     flex: auto;
     display: grid;
     column-gap: 0.5rem;
+    row-gap: 0.5rem;
+    align-content: flex-start;
   }
 
   :global(.super-form-inner-form.field-group > .component > *) {
@@ -621,7 +626,8 @@
   }
 
   .super-form-inner-form.labels-left {
-    row-gap: 0.25rem;
+    row-gap: 0.5rem;
+    column-gap: 1rem;
   }
   .super-form-inner-form.no-labels {
     row-gap: 0.25rem;

package/src/lib/SuperForm/SuperForm.svelte

@@ -30,6 +30,8 @@
   export let provideContext: boolean = true;
   export let provideContextScope: "local" | "global" = "global";
   export let labelPosition: "above" | "left" | false;
+  export let rowGap: string = "0.5rem";
+  export let columnGap: string = "0.5rem";
 
   // Export the full form API to be used by parents
   export let form;
@@ -67,11 +69,7 @@
     row,
   );
   $: resetKey = hashString(
-    schemaKey +
-      JSON.stringify(initialValues) +
-      actionType +
-      readonly +
-      disabled,
+    schemaKey + JSON.stringify(initialValues) + actionType,
   );
 
   const getInitialValues = (
@@ -152,6 +150,8 @@
       {provideContext}
       {provideContextScope}
       {labelPosition}
+      {rowGap}
+      {columnGap}
       on:change
       on:reset
     >

package/src/lib/SuperPopover/SuperPopover.svelte

@@ -110,7 +110,7 @@
       class:hide-popover={open && !showPopover}
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
-      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      transition:fly|local={{ y: -20, duration: animate ? 350 : 0 }}
     >
       <slot />
     </div>

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,19 +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());
-  }
-
-  $: console.log($stbSchema);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -1606,15 +1615,15 @@
   <div
     class="super-table"
     class:quiet
-    class:initializing
+    class:initializing={initializing || $stbData.loading}
     bind:this={viewport}
     bind:clientWidth={tableWidth}
     bind:clientHeight
     style:font-size={sizingMap[size].rowFontSize}
     style:--super-table-devider-color={$tableStyles.color}
     style:--super-table-body-height={maxBodyHeight}
-    style:--super-table-header-height={$tableStyles.headerHeight}
-    style:--super-table-footer-height={$tableStyles.footerHeight}
+    style:--super-table-header-height={$tableStyles.headerHeight + "px"}
+    style:--super-table-footer-height={$tableStyles.footerHeight + "px"}
     style:--super-table-horizontal-dividers={$tableStyles.horizontal}
     style:--super-table-vertical-dividers={$tableStyles.vertical}
     style:--super-table-cell-padding={sizingMap[size].cellPadding}
@@ -1637,7 +1646,7 @@
         hideSelectionColumn={hideSelectionColumn || $superColumns.length === 0}
       />
 
-      {#if showButtonColumnLeft}
+      {#if showButtonColumnLeft && $superColumns.length > 0 && $stbData.loaded}
         <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
       {/if}
 
@@ -1692,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: {