@poirazis/supercomponents-shared 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "Shared Svelte components library",
   "type": "module",
   "packageManager": "bun@1.0.0",
@@ -48,13 +48,13 @@
     "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",
-    "postcss": "^8.4.35",
-    "sass": "^1.90.2",
-    "svelte": "^5.46.4",
+    "@budibase/types": "^3.30.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@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"

package/src/lib/SuperButton/SuperButton.svelte

@@ -175,13 +175,13 @@
 <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;
+    justify-content: center;
+    padding: 0rem 1rem;
     min-width: 5rem;
-    padding: 0rem 0.75rem;
     gap: 0.5rem;
     height: 2rem;
 
@@ -194,13 +194,9 @@
 
     &.small {
       min-width: 4rem;
-      padding: 0rem 0.5rem;
+      padding: 0rem 1rem;
       gap: 0.5rem;
       height: 1.85rem;
-
-      &.ink {
-        height: 1.5rem;
-      }
     }
 
     &.large {
@@ -209,6 +205,8 @@
 
     & > span {
       white-space: nowrap;
+      font-size: 14px;
+      font-weight: 600;
     }
 
     &.icon {
@@ -229,6 +227,7 @@
     & > i {
       display: none;
       opacity: 0.9;
+      font-weight: 400;
     }
   }
 
@@ -286,12 +285,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 +296,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 {
@@ -315,8 +311,9 @@
   .primary {
     &:hover,
     &:focus {
-      border: 1px solid var(--spectrum-global-color-gray-500);
-      color: var(--spectrum-global-color-gray-900);
+      border: 1px solid var(--spectrum-global-color-gray-600);
+      background-color: var(--spectrum-global-color-gray-800);
+      color: var(--spectrum-global-color-gray-50);
     }
     &:active {
       background-color: var(--spectrum-global-color-gray-100);
@@ -327,7 +324,7 @@
       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 +337,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-200);
       }
     }
 

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>
 
@@ -61,7 +61,7 @@
   class:left-label={labelPos == "left"}
   class:multirow
   class:tall
-  style:--height={height}
+  style:--field-height={height}
   style:--max-height={maxHeight}
 >
   {#if labelPos}
@@ -106,16 +106,17 @@
 
 <style>
   .super-field {
+    flex: 1;
     min-width: 80px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     overflow: hidden;
-    min-height: var(--height);
+    min-height: var(--field-height, 2rem);
 
     &.multirow {
-      max-height: var(--height);
+      max-height: var(--field-height);
     }
 
     &.left-label {
@@ -132,40 +133,37 @@
       flex-direction: row;
       align-items: stretch;
     }
-
-    &:focus-within {
-      & > .superlabel {
-        color: var(--spectrum-global-golor-gray-700);
-      }
-    }
   }
 
   .inline-cells {
-    flex: auto;
+    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;
+    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;
     transition: 130ms;
+    padding-left: 2px;
+    opacity: 0.9;
 
     &.left {
       flex-direction: column;
@@ -173,6 +171,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,
@@ -593,8 +595,10 @@
         class="super-form-inner-form"
         class:labels-left={labelPosition === "left"}
         class:no-labels={labelPosition === false || labelPosition === "none"}
-        class:field-group={columns > 1}
+        class:field-group={true}
         style:grid-template-columns={`repeat(${columns * 6}, 1fr)`}
+        style:row-gap={rowGap}
+        style:column-gap={columnGap}
       >
         <slot />
       </div>
@@ -614,6 +618,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 +627,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.svelte

@@ -135,7 +135,6 @@
 
   $: dataSourceStore.set(dataSource);
   $: filterStore.set(filter);
-  $: stbSchema.set($stbData?.definition?.schema);
 
   // Update columnsStore when columnList changes
   $: columnsStore.set(columnList || []);
@@ -1193,6 +1192,7 @@
         $stbSelected = [];
         $cachedRows = [];
         $stbVisibleRows = [];
+        $stbSchema = {};
 
         stbData = createFetch($dataSourceStore);
 
@@ -1214,6 +1214,7 @@
           }
 
           $cachedRows = [...fetchState.rows];
+          $stbSchema = fetchState.definition?.schema || {};
           return "Idle";
         }
       },
@@ -1610,8 +1611,8 @@
     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}

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

@@ -70,7 +70,7 @@
         class:hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
         class:is-editing={$stbEditing == visibleRow}
         class:disabled={$rowMetadata[visibleRow].disabled}
-        style:min-height={$rowMetadata[visibleRow].height}
+        style:min-height={$rowMetadata[visibleRow].height + "px"}
         style:padding-right={canScroll && right ? "1.5rem" : "0.5rem"}
       >
         <!-- svelte-ignore a11y-click-events-have-key-events -->

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

@@ -82,7 +82,7 @@
           class:selected
           class:hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
           class:disabled={$stbRowMetadata[visibleRow]?.disabled}
-          style:height={$stbRowMetadata[visibleRow]?.height}
+          style:height={$stbRowMetadata[visibleRow]?.height + "px"}
           on:mouseenter={() => ($stbHovered = visibleRow)}
           on:mouseleave={() => ($stbHovered = null)}
         >

package/src/lib/SuperTableCells/CellCommon.css

@@ -9,8 +9,11 @@
   width: 100%;
   max-height: 2rem;
   font-size: 13px;
-  padding: 0 0.5rem 0 0.75rem;
+  padding: 0 0.75rem 0 0.75rem;
   gap: 0.5rem;
+  font-family:
+    var(--spectrum-textfield-text-font-family),
+    var(--spectrum-global-font-family-base);
 
   &.multirow {
     padding: unset;
@@ -66,32 +69,43 @@
     overflow: hidden;
     gap: 0.5rem;
 
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     &:focus {
       outline: none;
     }
 
     &.placeholder {
-      font-weight: 400;
-      color: var(--spectrum-global-color-gray-500);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-500);
+      font-style: italic !important;
 
-      & > span {
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 400;
+        color: var(--spectrum-global-color-gray-500);
         font-style: italic !important;
       }
     }
 
-    & > span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding: unset !important;
+    &.textarea {
+      flex: 1;
+      padding: 0.5rem 0.75rem !important;
+      display: flex;
+      align-items: flex-start;
+      overflow-y: auto;
 
-      &.multiline {
-        overflow: auto;
-        white-space: normal;
-        text-overflow: unset;
+      span {
+        white-space: pre-wrap;
       }
     }
 
@@ -108,7 +122,7 @@
         display: flex;
         align-items: center;
         overflow: hidden;
-        padding: 0.15rem 0.5rem;
+        padding: 0rem 0.5rem;
 
         .loope {
           display: none;
@@ -258,6 +272,42 @@
   }
 }
 
+.superCell.loading {
+  pointer-events: none;
+  background-color: rgb(
+    from var(--spectrum-global-color-gray-200) r g b / 0.75
+  ) !important;
+  border: 1px solid rgb(from var(--spectrum-global-color-gray-200) r g b / 0.75) !important;
+}
+.superCell.loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.65;
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.15) 20%,
+    rgba(255, 255, 255, 0.2) 60%,
+    rgba(255, 255, 255, 0.15) 80%,
+    rgba(255, 255, 255, 0)
+  ) !important;
+  animation: loadingShimmer 2s infinite;
+  pointer-events: none;
+}
+
+@keyframes loadingShimmer {
+  0% {
+    transform: translateX(-80%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 .superCell.formInput {
   border-radius: 4px;
   color: var(--spectrum-global-color-gray-800);
@@ -266,15 +316,18 @@
   min-height: 2rem;
 
   &.inEdit:not(.naked-field):not(.has-popup) {
-    border: 1px solid var(--spectrum-global-color-blue-400);
+    border: 1px solid var(--primaryColor, --spectrum-global-color-blue-400);
 
     &:focus-within:not(.naked-field):not(.has-popup) {
-      border: 1px solid var(--spectrum-global-color-blue-400);
+      border: 1px solid var(--primaryColor, --spectrum-global-color-blue-400);
     }
   }
 
-  &:hover:not(.disabled):not(.readonly):not(.inEdit) {
-    border: 1px solid var(--spectrum-global-color-gray-400);
+  &:hover:not(.disabled):not(.readonly):not(.inEdit):not(.naked-field) {
+    border: 1px solid
+      rgb(
+        from var(--primaryColor, --spectrum-global-color-blue-400) r g b / 0.5
+      ) !important;
     cursor: pointer;
   }
 
@@ -307,8 +360,15 @@
 }
 
 .superCell.formInput.has-popup {
+  background-color: var(--spectrum-global-color-gray-50);
+
+  &:hover:not(.disabled):not(.readonly):not(.inEdit) {
+    border-color: var(--spectrum-global-color-gray-100) !important;
+    cursor: pointer;
+  }
+
   &.inEdit {
-    border: 1px solid var(--spectrum-global-color-blue-400) !important;
+    border: 1px solid var(--spectrum-global-color-gray-200) !important;
     background-color: var(--spectrum-global-color-gray-200) !important;
     cursor: pointer !important;
   }
@@ -322,7 +382,7 @@
   min-height: unset;
   max-height: unset;
   border: 1px solid transparent;
-  padding: 0 0.5rem;
+  padding: 0 0.5rem !important;
 
   &:hover:not(.readonly):not(.inEdit) {
     border: 1px dashed var(--spectrum-global-color-blue-400);
@@ -353,6 +413,10 @@
   color: inherit;
   letter-spacing: inherit;
   font-size: inherit;
+  padding: unset !important;
+  font-family:
+    var(--spectrum-textfield-text-font-family),
+    var(--spectrum-global-font-family-base);
 
   &:focus {
     outline: none;
@@ -363,22 +427,20 @@
   }
 
   &.placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    color: var(--spectrum-global-color-gray-500);
     font-style: italic !important;
-  }
-
-  &.textarea {
-    flex: 1 1 auto;
-    padding: 0.5rem 0rem;
-    justify-content: flex-start;
-    align-items: stretch;
-    white-space: normal;
-    overflow: auto;
-    resize: none;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    height: unset;
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-500);
+      font-style: italic !important;
+    }
   }
 }
 

package/src/lib/SuperTableCells/CellDatetime.svelte

@@ -146,7 +146,7 @@
       ? processStringSync(cellOptions.template, { value })
       : value
         ? formatDate(innerDate, currentDateFormat)
-        : "";
+        : undefined;
 
   $: placeholder = cellOptions?.placeholder || "";
   $: inEdit = $cellState == "Editing";
@@ -196,7 +196,6 @@
   class:open-popup={open}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  style:font-weight={cellOptions.fontWeight}
   on:focus={cellState.focus}
   on:keypress={cellState.handleKeyboard}
   on:focusout={cellState.focusout}
@@ -211,7 +210,7 @@
       class:placeholder={!formattedValue}
       on:click={() => (open = !open)}
     >
-      {formattedValue || placeholder}
+      <span>{formattedValue || placeholder}</span>
       <i
         class="ri-calendar-line"
         style="font-size: 16px; justify-self: flex-end"

package/src/lib/SuperTableCells/CellLink.svelte

@@ -205,7 +205,14 @@
   <div class="value" class:placeholder={localValue?.length < 1}>
     {#if localValue?.length < 1}
       <span> {placeholder} </span>
-    {:else if pills || links}
+    {:else if simpleView}
+      <span>
+        {#if cellOptions.role == "formInput" && localValue.length > 1}
+          ({localValue.length})
+        {/if}
+        {localValue.map((v) => v.primaryDisplay).join(", ")}
+      </span>
+    {:else}
       <div
         class="items"
         class:pills
@@ -237,13 +244,6 @@
           </span>
         {/if}
       </div>
-    {:else}
-      <span>
-        {#if cellOptions.role == "formInput" && localValue.length > 1}
-          ({localValue.length})
-        {/if}
-        {localValue.map((v) => v.primaryDisplay).join(", ")}
-      </span>
     {/if}
   </div>
   {#if !readonly && (cellOptions.role == "formInput" || inEdit)}