@poirazis/supercomponents-shared 1.2.13 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poirazis/supercomponents-shared",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "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.29.0",
+    "@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.51.3",
     "typescript": "^5.9.3",
     "vite": "^5.4.21",
     "vite-plugin-css-injected-by-js": "^3.5.2"

package/src/lib/SuperField/SuperField.svelte

@@ -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,13 +106,14 @@
 
 <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);
@@ -141,7 +142,6 @@
   }
 
   .inline-cells {
-    flex: auto;
     display: flex;
     align-items: stretch;
     min-height: 2rem;

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";
         }
       },
@@ -1594,6 +1595,8 @@
     // 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 -->

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

@@ -12,6 +12,7 @@
   const stbMenuID = getContext("stbMenuID");
   const rowMetadata = getContext("stbRowMetadata");
   const stbVisibleRows = getContext("stbVisibleRows");
+  const data = getContext("data");
 
   const stbAPI = getContext("stbAPI");
 
@@ -69,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 -->
@@ -79,7 +80,7 @@
         >
           {#if rowMenu && inlineButtons?.length}
             {#each inlineButtons as { conditions, disabledTemplate, onClick, disabled, ...rest }}
-              {#if stbAPI.shouldShowButton(conditions || [], stbAPI.enrichContext($stbData?.rows?.[visibleRow]))}
+              {#if stbAPI.shouldShowButton(conditions || [], stbAPI.enrichContext($data[visibleRow]))}
                 <SuperButton
                   {...rest}
                   disabled={disabled ||
@@ -87,7 +88,7 @@
                     $rowMetadata[visibleRow].disabled ||
                     stbAPI.shouldDisableButton(
                       disabledTemplate,
-                      stbAPI.enrichContext($stbData?.rows?.[visibleRow]),
+                      stbAPI.enrichContext($data[visibleRow]),
                     )}
                   onClick={() => {
                     stbAPI.executeRowButtonAction(visibleRow, onClick);

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/CellOptions.svelte

@@ -1,6 +1,8 @@
 <script>
   import { getContext, createEventDispatcher, onMount, tick } from "svelte";
   import SuperPopover from "../SuperPopover/SuperPopover.svelte";
+  import "./CellCommon.css";
+
   import fsm from "svelte-fsm";
 
   const dispatch = createEventDispatcher();
@@ -82,8 +84,7 @@
     },
     Loading: {
       _enter() {
-        if (cellOptions.optionsSource != "data" || $fetch?.loaded)
-          this.goTo.debounce(15, cellOptions.initialState || "View");
+        if (cellOptions.optionsSource != "data") return "View";
       },
       _exit() {
         if (cellOptions.optionsSource == "custom") this.loadCustomOptions();
@@ -475,7 +476,7 @@
   $: query = QueryUtils.buildQuery(cellOptions.filter);
   $: inputSelect = controlType == "inputSelect";
 
-  $: if (cellOptions.optionsSource == "data")
+  $: if (optionsSource == "data")
     fetch?.update?.({
       query,
       sortColumn: cellOptions.sortColumn,

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -27,13 +27,14 @@
   let picker;
   let inactive = true;
   let allSelected = false;
+  let fetch;
 
   const colors = derivedMemo(options, ($options) => {
     let obj = {};
     if (cellOptions.optionsSource == "custom") return obj;
     $options.forEach(
       (option, index) =>
-        (obj[option] = optionColors[option] ?? colorsArray[index % 14])
+        (obj[option] = optionColors[option] ?? colorsArray[index % 14]),
     );
     return obj;
   });
@@ -57,7 +58,7 @@
   ];
 
   let originalValue = JSON.stringify(
-    Array.isArray(value) ? value : value ? [value] : []
+    Array.isArray(value) ? value : value ? [value] : [],
   );
 
   $: ({
@@ -79,10 +80,6 @@
   // Handle Options from Data Source
   const dataSourceStore = memo(cellOptions?.datasource ?? {});
   $: dataSourceStore.set(cellOptions.datasource);
-  $: fetch =
-    optionsSource == "data"
-      ? createFetch($dataSourceStore)
-      : memo({ loaded: true });
   $: fullSelection =
     filteredOptions.length == localValue.length && filteredOptions.length > 0;
 
@@ -94,7 +91,7 @@
     valueColumn,
     iconColumn,
     colorColumn,
-    $dataSourceStore
+    $dataSourceStore,
   );
 
   $: cellState.syncFetch($fetch);
@@ -107,6 +104,19 @@
   $: isButtons = controlType == "buttons";
   $: allSelected = filteredOptions.length == localValue.length;
 
+  const createFetch = (datasource) => {
+    return fetchData({
+      API,
+      datasource,
+      options: {
+        query: QueryUtils.buildQuery(cellOptions.filter),
+        sortColumn: cellOptions.sortColumn,
+        sortOrder: cellOptions.sortOrder,
+        limit: cellOptions.limit || 1000,
+      },
+    });
+  };
+
   export let cellState = fsm("Loading", {
     "*": {
       goTo(state) {
@@ -147,18 +157,23 @@
     },
     Loading: {
       _enter() {
-        if (cellOptions.optionsSource != "data" || $fetch?.loaded)
+        if (cellOptions.optionsSource != "data")
           this.goTo.debounce(10, cellOptions.initialState || "View");
+        else {
+          fetch = createFetch($dataSourceStore);
+        }
       },
       _exit() {
         if (optionsSource == "custom") this.loadCustomOptions();
-        else if (optionsSource == "data") this.loadDataOptions($fetch?.rows);
         else this.loadSchemaOptions();
 
         filteredOptions = $options;
       },
-      syncFetch() {
-        if ($fetch?.loaded) {
+      syncFetch(fetch) {
+        console.log("syncFetch", fetch.loaded);
+        if (fetch.loaded) {
+          this.loadDataOptions(fetch.rows);
+          console.log("loaded options from data", $options);
           return cellOptions.initialState || "View";
         }
       },
@@ -174,7 +189,7 @@
     Editing: {
       _enter() {
         originalValue = JSON.stringify(
-          Array.isArray(value) ? value : value ? [value] : []
+          Array.isArray(value) ? value : value ? [value] : [],
         );
 
         dispatch("enteredit");
@@ -284,7 +299,7 @@
       filterOptions(e) {
         if (e && e.target.value != "") {
           filteredOptions = $options.filter((x) =>
-            x?.startsWith(e.target.value)
+            x?.startsWith(e.target.value),
           );
         } else filteredOptions = $options;
       },
@@ -332,19 +347,6 @@
     },
   });
 
-  const createFetch = (datasource) => {
-    return fetchData({
-      API,
-      datasource,
-      options: {
-        query: QueryUtils.buildQuery(cellOptions.filter),
-        sortColumn: cellOptions.sortColumn,
-        sortOrder: cellOptions.sortOrder,
-        limit: cellOptions.limit || 1000,
-      },
-    });
-  };
-
   onMount(() => {
     if (autofocus)
       setTimeout(() => {
@@ -447,6 +449,8 @@
         {/each}
       </div>
     {/if}
+
+    View
   {:else if controlType == "switch"}
     <div
       class="radios"
@@ -498,6 +502,8 @@
       {/each}
     </div>
   {/if}
+
+  {$cellState}
 </div>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -382,7 +382,7 @@
   {#if $columnOptionsStore.showHeader && $columnOptionsStore.canResize}
     <div
       class="grabber"
-      style:height={$columnOptionsStore.headerHeight - 16}
+      style:height={$columnOptionsStore.headerHeight - 16 + "px"}
       on:mousedown={columnState.startResizing}
       on:dblclick={columnState.resetSize}
       on:mouseenter={() => (considerResizing = true)}

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -25,7 +25,7 @@
 
   // Get Row overrides from metadata or fallback to column settings
   $: color = $rowMetadata[index]?.color;
-  $: height = $rowMetadata[index]?.height;
+  $: height = $rowMetadata[index]?.height + "px";
   $: bgcolor = $rowMetadata[index]?.bgcolor;
 
   $: id = row?.[idField] ?? index;
@@ -88,6 +88,8 @@
   const onContextMenu = (e) => {
     stbAPI.showContextMenu(index, e.__root);
   };
+
+  $: console.log(height);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -100,7 +102,7 @@
   class:isEditing
   class:disabled
   class:isLast
-  style:height
+  style:min-height={height}
   style:color
   style:background-color={bgcolor}
   style:justify-content={$columnSettings.align}