@poirazis/supercomponents-shared 1.1.7 → 1.2.0

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

@@ -8,7 +8,6 @@
   export let showActionColumn;
   export let canScroll;
   export let stbData;
-  let overflow;
 </script>
 
 <div bind:this={columnsViewport} class="st-master-columns" tabIndex="-1">
@@ -16,19 +15,24 @@
     <slot />
   {/if}
 
-  {#each $superColumns as column, idx (idx)}
-    <SuperTableColumn
-      {stbData}
-      columnOptions={{
-        ...$commonColumnOptions,
-        ...column,
-        overflow,
-        isFirst: idx == 0,
-        isLast:
-          idx == $superColumns.length - 1 && !showActionColumn && canScroll,
-      }}
-    />
-  {/each}
+  {#if $superColumns.length === 0}
+    <div class="no-columns-placeholder">
+      No columns defined. Please add columns to the Super Table.
+    </div>
+  {:else}
+    {#each $superColumns as column, idx (idx)}
+      <SuperTableColumn
+        {stbData}
+        columnOptions={{
+          ...$commonColumnOptions,
+          ...column,
+          isFirst: idx == 0,
+          isLast:
+            idx == $superColumns.length - 1 && !showActionColumn && canScroll,
+        }}
+      />
+    {/each}
+  {/if}
 
   {#if $stbSettings.superColumnsPos == "last"}
     <slot />

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

@@ -0,0 +1,133 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  export let limit = 50;
+  export let pagination = "none";
+  export let currentOffset = 0;
+  export let dataSource = null;
+  export let fetch = null;
+
+  $: valid = hasParams($dataSource) && pagination === "limitOffset";
+  $: currentOffset = $dataSource?.queryParams?.offset || 0;
+
+  $: currentPage = Math.floor(currentOffset / limit) + 1;
+  $: hasMorePages = $fetch?.rows?.length >= limit;
+
+  function goToPrevious() {
+    if (currentOffset > 0) {
+      currentOffset = Math.max(0, currentOffset - limit);
+      updateDataSource();
+    }
+  }
+
+  function goToNext() {
+    if (hasMorePages) {
+      currentOffset += limit;
+      updateDataSource();
+    }
+  }
+
+  function goToFirst() {
+    currentOffset = 0;
+    updateDataSource();
+  }
+
+  function updateDataSource() {
+    if (dataSource) {
+      $dataSource = {
+        ...$dataSource,
+        queryParams: {
+          ...$dataSource.queryParams,
+          offset: currentOffset,
+        },
+      };
+    }
+  }
+
+  const hasParams = (ds) => {
+    if (!ds || !ds.parameters) return false;
+    const paramNames = ds.parameters.map((p) => p.name.toLowerCase());
+    return paramNames.includes("offset") && paramNames.includes("limit");
+  };
+</script>
+
+{#if valid}
+  <div class="pagination-limit-offset">
+    <div class="pagination-controls">
+      <button
+        class="pagination-btn"
+        style:margin-right="-0.25rem"
+        on:click={goToFirst}
+        disabled={currentPage <= 1}
+        title="First Page"
+      >
+        <i class="ph ph-caret-double-left"></i>
+      </button>
+
+      <button
+        class="pagination-btn"
+        on:click={goToPrevious}
+        disabled={currentPage <= 1}
+        title="Previous Page"
+      >
+        <i class="ph ph-caret-left"></i>
+      </button>
+
+      <span class="pagination-info">
+        Page {currentPage}
+        ( {currentOffset} - {currentOffset + ($fetch?.rows?.length || 0)} )
+      </span>
+
+      <button
+        class="pagination-btn"
+        on:click={goToNext}
+        disabled={!hasMorePages}
+        title="Next Page"
+      >
+        <i class="ph ph-caret-right"></i>
+      </button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .pagination-limit-offset {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.25rem 0rem;
+  }
+
+  .pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .pagination-btn {
+    aspect-ratio: 1 / 1;
+    border-radius: 0.25rem;
+    color: var(--spectrum-global-color-gray-700);
+    background-color: transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    outline: none;
+    border: none;
+  }
+
+  .pagination-btn:hover:not(:disabled) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+
+  .pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .pagination-info {
+    color: var(--spectrum-global-color-gray-700);
+    white-space: nowrap;
+    opacity: 0.9;
+  }
+</style>

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

@@ -8,7 +8,6 @@
   const stbData = getContext("stbData");
   const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
   const stbHovered = getContext("stbHovered");
-  const stbSelected = getContext("stbSelected");
   const stbEditing = getContext("stbEditing");
   const stbMenuID = getContext("stbMenuID");
   const rowMetadata = getContext("stbRowMetadata");
@@ -16,8 +15,6 @@
 
   const stbAPI = getContext("stbAPI");
 
-  const { processStringSync } = getContext("sdk");
-
   export let right;
   export let rowMenu;
   export let rowMenuItems;
@@ -29,7 +26,6 @@
 
   $: quiet = $stbSettings.appearance.quiet;
   $: menuIcon = $stbSettings.rowMenuIcon;
-  $: idColumn = $stbSettings.data.idColumn;
   $: sticky = $stbHorizontalScrollPos > 0 && !right;
   $: inInsert = $stbState == "Inserting";
 
@@ -65,12 +61,11 @@
     class:zebra={$stbSettings.appearance.zebraColors}
   >
     {#each $stbVisibleRows as visibleRow}
-      {@const row = $stbData?.rows?.[visibleRow]}
       <div
         class="super-row"
         on:mouseenter={() => ($stbHovered = visibleRow)}
         on:mouseleave={() => ($stbHovered = null)}
-        class:is-selected={$stbSelected?.includes(row[idColumn] ?? visibleRow)}
+        class:is-selected={$rowMetadata[visibleRow].selected}
         class:is-hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
         class:is-editing={$stbEditing == visibleRow}
         class:is-disabled={$rowMetadata[visibleRow].disabled}
@@ -83,17 +78,17 @@
           style:gap={inlineButtons.length > 1 ? "0.5rem" : "0rem"}
         >
           {#if rowMenu && inlineButtons?.length}
-            {#each inlineButtons as { text, icon, disabled, onClick, quiet, type, conditions }}
-              {#if stbAPI.shouldShowButton(conditions || [], stbAPI.enrichContext(row))}
+            {#each inlineButtons as { conditions, disabledTemplate, onClick, disabled, ...rest }}
+              {#if stbAPI.shouldShowButton(conditions || [], stbAPI.enrichContext($stbData?.rows?.[visibleRow]))}
                 <SuperButton
-                  size="S"
-                  {icon}
-                  {text}
+                  {...rest}
                   disabled={disabled ||
                     $stbEditing == visibleRow ||
-                    $rowMetadata[visibleRow].disabled}
-                  {quiet}
-                  type={type == "primary" ? "ink" : type}
+                    $rowMetadata[visibleRow].disabled ||
+                    stbAPI.shouldDisableButton(
+                      disabledTemplate,
+                      stbAPI.enrichContext($stbData?.rows?.[visibleRow])
+                    )}
                   onClick={() => {
                     stbAPI.executeRowButtonAction(visibleRow, onClick);
                   }}
@@ -105,7 +100,6 @@
             <SuperButton
               size="S"
               icon={menuIcon}
-              fillOnHover="true"
               text=""
               quiet="true"
               type="secondary"

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

@@ -1,6 +1,9 @@
 <script>
   import { getContext } from "svelte";
 
+  import Checkbox from "../../UI/elements/Checkbox.svelte";
+  import IconButton from "../..//UI/elements/IconButton.svelte";
+
   const stbState = getContext("stbState");
   const stbSettings = getContext("stbSettings");
   const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
@@ -15,7 +18,6 @@
   export let hideSelectionColumn;
   export let stbData;
 
-  $: idColumn = $stbSettings.data.idColumn;
   $: partialSelection =
     $stbSelected.length && $stbSelected.length != $stbData?.rows?.length;
 
@@ -25,12 +27,14 @@
   $: numbering = $stbSettings.appearance.numberingColumn;
   $: checkBoxes = $stbSettings.features.canSelect && !hideSelectionColumn;
   $: canDelete = $stbSettings.features.canDelete;
-
   $: sticky = $stbHorizontalScrollPos > 0;
-
   $: visible = numbering || checkBoxes || canDelete;
   $: zebra = $stbSettings.appearance.zebraColors;
   $: quiet = $stbSettings.appearance.quiet;
+  $: headerCheckbox =
+    checkBoxes &&
+    $stbSettings.features.maxSelected != 1 &&
+    $stbVisibleRows.length > 0;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -43,26 +47,23 @@
           <span class="row-number"></span>
         {/if}
 
-        {#if checkBoxes && $stbSettings.features.maxSelected != 1 && $stbVisibleRows.length > 0}
-          <div
-            class="checkbox"
-            class:selected={fullSelection}
-            class:partialSelection
-            on:click={stbAPI.selectAllRows}
-          >
-            <i class="ri-check-line" style:visibility={"hidden"} />
-          </div>
+        {#if headerCheckbox}
+          <Checkbox
+            checked={fullSelection}
+            partial={partialSelection}
+            on:change={stbAPI.selectAllRows}
+          />
         {/if}
 
-        {#if canDelete}
-          {#if $stbSelected.length}
-            <i
-              class="ri-delete-bin-line delete"
-              on:click={stbAPI.deleteSelectedRows}
-            />
-          {:else}
-            <i class="ri-delete-bin-line disabled" />
-          {/if}
+        {#if canDelete && $stbSelected.length > 1}
+          <IconButton
+            icon="trash"
+            size="small"
+            variant="warning"
+            disabled={$stbSelected.length == 0}
+            tooltip="Delete Selected Rows"
+            on:click={stbAPI.deleteSelectedRows}
+          />
         {/if}
       </div>
     {/if}
@@ -74,45 +75,44 @@
       class:sticky
       style:margin-top={"var(--super-column-top-offset)"}
     >
-      {#each $stbVisibleRows as visibleRow}
-        {@const row = $stbData?.rows?.[visibleRow]}
-        {@const selected = $stbSelected?.includes(row[idColumn] ?? visibleRow)}
-        {#if row}
-          <div
-            class="super-row selection"
-            class:is-selected={selected}
-            class:is-hovered={$stbHovered == visibleRow ||
-              $stbMenuID == visibleRow}
-            class:is-disabled={$stbRowMetadata[visibleRow]?.disabled}
-            style:min-height={$stbRowMetadata[visibleRow]?.height}
-            on:mouseenter={() => ($stbHovered = visibleRow)}
-            on:mouseleave={() => ($stbHovered = null)}
-          >
-            {#if numbering}
-              <div class="row-number">
-                {visibleRow + 1}
-              </div>
-            {/if}
+      {#each $stbVisibleRows as visibleRow (visibleRow)}
+        {@const selected = $stbRowMetadata[visibleRow]?.selected}
+        <div
+          class="super-row selection"
+          class:is-selected={selected}
+          class:is-hovered={$stbHovered == visibleRow ||
+            $stbMenuID == visibleRow}
+          class:is-disabled={$stbRowMetadata[visibleRow]?.disabled}
+          style:min-height={$stbRowMetadata[visibleRow]?.height}
+          on:mouseenter={() => ($stbHovered = visibleRow)}
+          on:mouseleave={() => ($stbHovered = null)}
+        >
+          {#if numbering}
+            <div class="row-number">
+              {visibleRow + 1}
+            </div>
+          {/if}
 
-            {#if $stbSettings.features.canSelect && !hideSelectionColumn}
-              <div
-                class="checkbox"
-                class:selected
-                on:click={() => stbAPI.selectRow(visibleRow)}
-              >
-                <i class="ri-check-line" style:visibility={"hidden"} />
-              </div>
-            {/if}
+          {#if $stbSettings.features.canSelect && !hideSelectionColumn}
+            <Checkbox
+              checked={selected}
+              disabled={$stbRowMetadata[visibleRow]?.disabled}
+              hovered={$stbHovered == visibleRow}
+              on:change={() => stbAPI.selectRow(visibleRow)}
+            />
+          {/if}
 
-            {#if canDelete}
-              <i
-                class="ri-delete-bin-line delete"
-                class:selected
-                on:click={(e) => stbAPI.deleteRow(visibleRow)}
-              />
-            {/if}
-          </div>
-        {/if}
+          {#if canDelete}
+            <IconButton
+              icon="trash"
+              size="small"
+              variant="warning"
+              disabled={$stbRowMetadata[visibleRow]?.disabled}
+              tooltip="Delete Row"
+              on:click={() => stbAPI.deleteRow(visibleRow)}
+            />
+          {/if}
+        </div>
       {/each}
 
       {#if $stbState == "Inserting"}
@@ -135,65 +135,5 @@
     font-size: 13px;
     font-weight: 500;
     align-items: center;
-    &.is-hovered > .delete {
-      color: var(--spectrum-global-color-red-700) !important;
-    }
-    &.is-selected > .delete {
-      color: var(--spectrum-global-color-red-400);
-    }
-    &.is-hovered > i:not(.delete) {
-      color: var(--spectrum-global-color-gray-700);
-    }
-  }
-
-  i {
-    font-size: 14px;
-    color: var(--spectrum-global-color-gray-500);
-
-    &.disabled {
-      color: var(--spectrum-global-color-gray-100);
-    }
-
-    &.delete {
-      &.selected {
-        color: var(--spectrum-global-color-red-400);
-      }
-
-      &:hover {
-        color: var(--spectrum-global-color-red-700);
-      }
-    }
-
-    &.full {
-      color: var(--spectrum-global-color-gray-900);
-    }
-
-    &:hover:not(.disabled) {
-      cursor: pointer;
-    }
-  }
-
-  .checkbox {
-    width: 14px;
-    height: 14px;
-    border: 1px solid var(--spectrum-global-color-gray-500);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &.selected {
-      border: 1px solid var(--spectrum-global-color-gray-600);
-      & > i {
-        visibility: visible !important;
-        color: var(--spectrum-global-color-gray-700);
-      }
-    }
-
-    &.partialSelection {
-      border-color: var(--spectrum-global-color-green-700);
-    }
   }
 </style>

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

@@ -27,7 +27,7 @@
       /><path
         class="fill"
         d="M16.5,1H1.5a.5.5,0,0,0-.5.5v15a.5.5,0,0,0,.5.5h15a.5.5,0,0,0,.5-.5V1.5A.5.5,0,0,0,16.5,1ZM6,16H2V14H6Zm0-3H2V11H6Zm0-3H2V8H6Zm10,6H7V14h9Zm0-3H7V11h9Zm0-3H7V8h9Zm0-3H2V2H16Z"
-      />
+      ></p>
     </svg>
   </div>
 

package/src/lib/SuperTable/overlays/AddNewRowOverlay.svelte

@@ -31,9 +31,9 @@
     on:click={tableAPI.insertRow}
   >
     {#if $stbState == "Saving"}
-      <i class="ri-loader-2-line" />
+      <i class="ri-loader-2-line"></i>
     {:else}
-      <i class="ri-save-fill"> </i>
+      <i class="ri-save-fill"></i>
     {/if}
   </div>
 {/if}
@@ -47,6 +47,6 @@
     class:footer
     on:click={stbState.clear()}
   >
-    <i class="ri-filter-off-line" />
+    <i class="ri-filter-off-line"></i>
   </div>
 {/if}

package/src/lib/SuperTable/overlays/EmptyResultSetOverlay.svelte

@@ -7,7 +7,7 @@
 
 {#if isEmpty}
   <div class="emptyTable" style:top style:bottom>
-    <i class="ri-search-line" />
+    <i class="ri-search-line"></i>
     {message}
   </div>
 {/if}

package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte

@@ -28,7 +28,6 @@
   let mouseoffset = 0;
   let width;
   let left;
-  let localWidth;
 
   // Positioning Offsets
   $: verticalTopOffset = $stbSettings.appearance.headerHeight + 8 + "px";
@@ -91,50 +90,47 @@
     : () => {}}
 />
 
-{#if verticalRange}
-  <div
-    class="stb-scrollbar"
-    class:highlighted
-    style:--offset={verticalTopOffset}
-    style:--bottomOffset={verticalBottomOffset}
-  >
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      class="stb-scrollbar-indicator"
-      class:dragging
-      style:top
-      style:height
-      on:mousedown|self={(e) => {
-        dragging = true;
-        startPos = e.clientY;
-        startScrollPos = $stbScrollPos;
-      }}
-    />
-  </div>
-{/if}
-
-{#if horizontalRange}
+<div
+  class="stb-scrollbar"
+  class:hidden={!verticalRange}
+  class:highlighted={highlighted || dragging}
+  style:--offset={verticalTopOffset}
+  style:--bottomOffset={verticalBottomOffset}
+>
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    bind:clientWidth={localWidth}
-    class="stb-scrollbar horizontal"
-    class:highlighted
-    style:--horizontalOffset={horizontalOffset}
-    style:--horizontalBottomOffset={horizontalBotttomOffset}
-  >
-    <div
-      class="stb-scrollbar-indicator horizontal"
-      style:left
-      style:width
-      class:dragging={horizontalDragging}
-      on:mousedown|self={(e) => {
-        horizontalDragging = true;
-        horizontalStartPos = e.clientX;
-        startScrollPos = $stbHorizontalScrollPos;
-      }}
-    />
-  </div>
-{/if}
+    class="stb-scrollbar-indicator"
+    class:dragging
+    style:top
+    style:height
+    on:mousedown|stopPropagation|preventDefault={(e) => {
+      dragging = true;
+      startPos = e.clientY;
+      startScrollPos = $stbScrollPos;
+    }}
+  ></div>
+</div>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="stb-scrollbar horizontal"
+  class:hidden={!horizontalRange}
+  class:highlighted={highlighted || horizontalDragging}
+  style:--horizontalOffset={horizontalOffset}
+  style:--horizontalBottomOffset={horizontalBotttomOffset}
+>
+  <div
+    class="stb-scrollbar-indicator horizontal"
+    style:left
+    style:width
+    class:dragging={horizontalDragging}
+    on:mousedown|stopPropagation|preventDefault={(e) => {
+      horizontalDragging = true;
+      horizontalStartPos = e.clientX;
+      startScrollPos = $stbHorizontalScrollPos;
+    }}
+  ></div>
+</div>
 
 <style>
   .stb-scrollbar {
@@ -150,6 +146,10 @@
     overflow: hidden;
   }
 
+  .stb-scrollbar.hidden {
+    display: none;
+  }
+
   .stb-scrollbar.horizontal {
     top: unset;
     bottom: var(--horizontalBottomOffset);

package/src/lib/SuperTableCells/CellAttachment.svelte

@@ -40,17 +40,6 @@
         if (!cellOptions.readonly) return "Editing";
       },
     },
-    Hovered: {
-      cancel: () => {
-        return "View";
-      },
-    },
-    Focused: {
-      unfocus() {
-        return "View";
-      },
-    },
-    Error: { check: "View" },
     Editing: {
       _enter() {
         originalValue = value;

package/src/lib/SuperTableCells/CellAttachmentExpanded.svelte

@@ -9,7 +9,7 @@
   export let fieldSchema: any;
   export let tableid: string;
   export let API;
-  export let height = "auto";
+  export const height = "auto";
   export let inBuilder;
 
   const dispatch = createEventDispatcher();
@@ -57,17 +57,6 @@
         if (!cellOptions.readonly) return "Editing";
       },
     },
-    Hovered: {
-      cancel: () => {
-        return "View";
-      },
-    },
-    Focused: {
-      unfocus() {
-        return "View";
-      },
-    },
-    Error: { check: "View" },
     Editing: {
       _enter() {
         originalValue = value;