@poirazis/supercomponents-shared 1.2.16 → 1.2.19

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.16",
+  "version": "1.2.19",
   "description": "Shared Svelte components library",
   "type": "module",
-  "packageManager": "bun@1.0.0",
+  "packageManager": "bun@1.3.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "svelte": "src/index.js",
@@ -21,7 +21,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/poirazis/supercomponents-shared.git"
+    "url": "https://github.com/poirazis/supercomponents_shared.git"
   },
   "keywords": [
     "svelte",
@@ -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/index.js

@@ -16,6 +16,7 @@ export { default as SuperPopover } from "./lib/SuperPopover/SuperPopover.svelte"
 // UI Elements
 export { default as Tooltip } from "./lib/UI/elements/Tooltip.svelte";
 export { default as IconButton } from "./lib/UI/elements/IconButton.svelte";
+export { default as Textbox } from "./lib/UI/elements/Textbox.svelte";
 
 // Table components
 export { default as SuperTable } from "./lib/SuperTable/SuperTable.svelte";

package/src/index.ts

@@ -15,6 +15,7 @@ export { default as SuperPopover } from "./lib/SuperPopover/SuperPopover.svelte"
 
 // UI Elements
 export { default as Tooltip } from "./lib/UI/elements/Tooltip.svelte";
+export { default as Textbox } from "./lib/UI/elements/Textbox.svelte";
 
 // Table components
 export { default as SuperTable } from "./lib/SuperTable/SuperTable.svelte";

package/src/lib/SuperButton/SuperButton.svelte

@@ -1,27 +1,31 @@
 <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;
-
+  export let confirm = false;
+  export let condition = undefined;
   // Visibility Conditions
   export const conditions = []; // Array of condition objects {field, operator, value}
 
   export let actionsMode = "normal";
-  export let condition = undefined; // For backward compatibility
   export let loopSource = undefined;
   export let loopDelay = 0;
   export let loopEvent = undefined;
@@ -36,43 +40,65 @@
   export let onLoopEnd = undefined;
   export let onTrueCondition = undefined;
   export let onFalseCondition = undefined;
+  export let workingState;
+
+  $: enrichedAction = Array.isArray(onClick)
+    ? enrichButtonActions(onClick, $context)
+    : onClick;
 
   $: loop = safeParse(loopSource);
-  $: icon_class = working
-    ? "ph ph-spinner-gap ph-spin"
-    : icon && !icon.startsWith("ri-")
-      ? "ph ph-" + icon
-      : icon
-        ? icon
-        : undefined;
+  $: buttonText = confirmMode
+    ? "Confirm"
+    : text || (actionsMode == "timer" ? timerDuration : "");
+  $: icon_class =
+    working || workingState
+      ? "ph ph-spinner-gap ph-spin"
+      : icon && !icon.startsWith("ri-")
+        ? "ph ph-" + icon
+        : icon
+          ? icon
+          : actionsMode == "timer"
+            ? "ph ph-timer"
+            : undefined;
 
   let working = false;
   let ui_timer = undefined;
   let elapsed = 0;
+  let confirmMode = false;
 
   let buttonElement;
   let tooltipShow = false;
   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;
+    confirmMode = false;
   };
 
   async function handleClick(e) {
-    if (disabled || working || actionsMode == "timer") return;
+    if (disabled || actionsMode == "timer") return;
+
+    // Handle confirmation flow
+    if (confirm && !confirmMode) {
+      confirmMode = true;
+      return;
+    }
+
+    // Reset confirm mode after executing action
+    confirmMode = false;
     working = true;
+    tooltipShow = false;
     if (actionsMode == "loop") {
       if (onLoopStart) await onLoopStart({ iterations: loopSource?.length });
       if (Array.isArray(loop) && loopEvent) {
@@ -85,8 +111,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;
   }
@@ -131,9 +157,14 @@
 
 <button
   bind:this={buttonElement}
-  on:click={handleClick}
+  on:click={(e) => {
+    handleClick(e);
+  }}
   on:mouseenter={showTooltip}
   on:mouseleave={hideTooltip}
+  on:blur={() => {
+    confirmMode = false;
+  }}
   tabindex={disabled ? -1 : 0}
   class:super-button={true}
   class:xsmall={size == "XS"}
@@ -157,15 +188,16 @@
     ? "spectrum-ActionButton spectrum-ActionButton--size" + size
     : "spectrum-Button spectrum-Button--size" + size}
   class:disabled
-  class:working
+  class:working={working || workingState}
 >
   <i
-    class={icon_class}
+    class={confirmMode ? "ph ph-check" : 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 +213,48 @@
     align-items: center;
     justify-content: center;
     padding: 0rem 1rem;
-    min-width: 5rem;
-    gap: 0.5rem;
+    min-width: 4rem;
+    gap: 0.75rem;
     height: 2rem;
+    transition: all 150ms ease-in-out;
 
+    &.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;
     }
 
@@ -227,7 +276,6 @@
     & > i {
       display: none;
       opacity: 0.9;
-      font-weight: 400;
     }
   }
 
@@ -300,24 +348,20 @@
       }
     }
     &:hover,
-    &:focus {
+    &:focus:not(.working) {
       background-color: var(--spectrum-global-color-gray-900);
     }
-
-    &:active {
-      border: 1px solid var(--spectrum-global-color-blue-700);
-    }
   }
   .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 +384,7 @@
       background-color: transparent;
 
       &:hover {
-        background-color: var(--spectrum-global-color-gray-200);
+        background-color: var(--spectrum-global-color-gray-300);
       }
     }
 
@@ -365,6 +409,8 @@
 
       &:hover {
         border-color: var(--spectrum-global-color-red-400);
+        background-color: var(--spectrum-global-color-red-400);
+        color: white;
         font-weight: bolder;
       }
 
@@ -411,14 +457,15 @@
 
   .working {
     cursor: progress;
-    border: 1px solid var(--spectrum-global-color-gray-300) !important;
+    border: 1px solid var(--spectrum-global-color-gray-400) !important;
+    background-color: var(--spectrum-global-color-gray-300) !important;
     & > span {
-      color: var(--spectrum-global-color-gray-600);
+      color: var(--spectrum-global-color-gray-600) !important;
     }
     & > i {
       display: block;
       animation: spin 1s linear infinite;
-      color: var(--spectrum-global-color-blue-700);
+      color: var(--spectrum-global-color-gray-700) !important;
     }
   }
 </style>

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;
@@ -200,7 +198,8 @@
 
     & > .error-message {
       color: var(--spectrum-global-color-red-400);
-      font-size: 11px;
+      font-size: 10px;
+      white-space: nowrap;
     }
   }
 </style>

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

@@ -132,6 +132,7 @@
   const filterStore = memo(filter);
   const cachedRows = writable([]);
   const loading = writable(false);
+  const resizing = writable(false);
 
   $: dataSourceStore.set(dataSource);
   $: filterStore.set(filter);
@@ -659,11 +660,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 +693,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 +905,15 @@
             ? [ids]
             : [];
     },
+    refreshColumns: () => {
+      columnStates?.forEach(({ state }) => state.unlockWidth());
+    },
+    startResize: () => {
+      resizing.set(true);
+    },
+    endResize: () => {
+      resizing.set(false);
+    },
   };
 
   // Super Table State Machine
@@ -1496,6 +1514,9 @@
     limit,
   });
 
+  // Allow Columns to resize
+  $: tableAPI.refreshColumns(tableWidth, $stbData.loaded);
+
   // Virtual List Capabilities reacting to viewport change
   $: stbState.calculateBoundaries(
     clientHeight,
@@ -1584,17 +1605,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 +1614,7 @@
   <div
     class="super-table"
     class:quiet
-    class:initializing
+    class:initializing={initializing || $stbData.loading}
     bind:this={viewport}
     bind:clientWidth={tableWidth}
     bind:clientHeight
@@ -1630,30 +1640,35 @@
   >
     <Provider {actions} data={dataContext} />
 
-    <ControlSection>
-      <SelectionColumn
-        hideSelectionColumn={hideSelectionColumn || $superColumns.length === 0}
-      />
-
-      {#if showButtonColumnLeft}
-        <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
-      {/if}
-
-      {#if stickFirstColumn && $superColumns.length > 1}
-        <SuperTableColumn
-          sticky={true}
-          scrollPos={$stbHorizontalScrollPos}
-          columnOptions={{
-            ...$superColumns[0],
-            ...$commonColumnOptions,
-            overflow,
-            isFirst: true,
-            isLast:
-              $superColumns?.length == 1 && !showButtonColumnRight && canScroll,
-          }}
+    {#if !isEmpty}
+      <ControlSection>
+        <SelectionColumn
+          hideSelectionColumn={hideSelectionColumn ||
+            $superColumns.length === 0}
         />
-      {/if}
-    </ControlSection>
+
+        {#if showButtonColumnLeft && $superColumns.length > 0 && $stbData.loaded}
+          <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
+        {/if}
+
+        {#if stickFirstColumn && $superColumns.length > 1}
+          <SuperTableColumn
+            sticky={true}
+            scrollPos={$stbHorizontalScrollPos}
+            columnOptions={{
+              ...$superColumns[0],
+              ...$commonColumnOptions,
+              overflow,
+              isFirst: true,
+              isLast:
+                $superColumns?.length == 1 &&
+                !showButtonColumnRight &&
+                canScroll,
+            }}
+          />
+        {/if}
+      </ControlSection>
+    {/if}
 
     <ColumnsSection
       {stbSettings}
@@ -1667,7 +1682,7 @@
       {/key}
     </ColumnsSection>
 
-    {#if showButtonColumnRight && $superColumns.length > 0}
+    {#if showButtonColumnRight && $superColumns.length > 0 && !isEmpty}
       <ControlSection>
         <RowButtonsColumn
           {rowMenuItems}
@@ -1690,7 +1705,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: {