@poirazis/supercomponents-shared 1.1.8 → 1.2.1

package/src/lib/SuperField/SuperField.svelte

@@ -69,9 +69,6 @@
 
     &.multirow {
       max-height: var(--height);
-      & > .inline-cells.inline-buttons {
-        flex-direction: column;
-      }
     }
 
     &.left-label {
@@ -82,9 +79,6 @@
     &.tall {
       height: 100%;
       justify-content: stretch;
-      & > .inline-cells > .inline-buttons {
-        flex-direction: column;
-      }
     }
 
     &.tall.left-label {
@@ -111,11 +105,6 @@
       align-items: stretch;
       justify-content: flex;
     }
-
-    & > .inline-buttons {
-      display: flex;
-      padding-left: 0.5rem;
-    }
   }
 
   .superlabel {

package/src/lib/SuperForm/InnerForm.svelte

@@ -41,7 +41,7 @@
   export let disabled: boolean = false;
   export let readonly: boolean = false;
   export let initialValues: Record<string, any> | undefined = undefined;
-  export let size: "Medium" | "Large" | undefined = undefined;
+  export const size: "Medium" | "Large" | undefined = undefined;
   export let schema: TableSchema | undefined = undefined;
   export let definition: Table | undefined = undefined;
   export let disableSchemaValidation: boolean = false;

package/src/lib/SuperList/SuperList.svelte

@@ -150,14 +150,14 @@
         class:showColors
         style:--option-color={itemsColors[draggableItem.item]}
       >
-        <i class="ri-checkbox-blank-fill" />
+        <i class="ri-checkbox-blank-fill"></i>
         <span>{itemsLabels[draggableItem.item] || draggableItem.item}</span>
       </div>
       {#if !reorderOnly && inEdit}
         <i
           class="ph ph-trash-simple"
           on:mousedown|preventDefault={() => removeItem(draggableItem.id)}
-        />
+        ></i>
       {/if}
     </li>
   {/each}

package/src/lib/SuperList/drag-handle.svelte

@@ -6,26 +6,26 @@
 >
   <path
     d="m1,11c0.55228,0 1,-0.4477 1,-1c0,-0.5523 -0.44772,-1 -1,-1c-0.55228,0 -1,0.4477 -1,1c0,0.5523 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m1,8c0.55228,0 1,-0.4477 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.5523 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m1,5c0.55228,0 1,-0.44772 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m1,2c0.55228,0 1,-0.44772 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m4,11c0.5523,0 1,-0.4477 1,-1c0,-0.5523 -0.4477,-1 -1,-1c-0.55228,0 -1,0.4477 -1,1c0,0.5523 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m4,8c0.5523,0 1,-0.4477 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.5523 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m4,5c0.5523,0 1,-0.44772 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
-  />
+  ></p>
   <path
     d="m4,2c0.5523,0 1,-0.44772 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
-  />
+  ></p>
 </svg>

package/src/lib/SuperPopover/SuperPopover.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Portal from "svelte-portal";
+  import { Portal } from "@jsrob/svelte-portal";
   import { createEventDispatcher } from "svelte";
   import positionDropdown from "../Actions/position_dropdown";
   import clickOutside from "../Actions/click_outside";
@@ -53,7 +53,7 @@
   };
 
   export const hasFocus = () => {
-    return viewport.matches(":focus-within");
+    return viewport?.matches(":focus-within");
   };
 
   const handleOutsideClick = (e) => {

package/src/lib/SuperTable/SuperTable.css

@@ -135,10 +135,10 @@
   }
 }
 
-.super-column-header,
-.control-column-header {
+.super-column-header {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   background: var(--spectrum-global-color-gray-100);
   border-bottom: 1px solid var(--spectrum-global-color-gray-200);
   height: var(--super-table-header-height);
@@ -170,7 +170,12 @@
 }
 
 .control-column-header {
-  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: var(--spectrum-global-color-gray-100);
+  border-bottom: 1px solid var(--spectrum-global-color-gray-200);
+  min-height: var(--super-table-header-height);
   padding: 0 0.75rem;
   gap: 1rem;
 

package/src/lib/SuperTable/SuperTable.svelte

@@ -15,6 +15,7 @@
     supportSortingMap,
     supportEditingMap,
   } from "./constants.js";
+  import "./SuperTable.css";
 
   // Overlays
   import ScrollbarsOverlay from "./overlays/ScrollbarsOverlay.svelte";
@@ -724,8 +725,6 @@
             confirmText:
               "Are you sure you want to delete this " +
               (entitySingular || "Row") +
-              "ID" +
-              id +
               " ?",
             tableId: tableId,
             rowId: id,
@@ -898,8 +897,9 @@
       if (fetchState?.definition?.primary?.length === 1)
         return fetchState.definition.primary[0];
       const schema = fetchState?.definition?.schema || fetchState?.schema || {};
+
       if ("id" in schema) return "id";
-      if ("_id" in schema) return "_id";
+      if ("_id" in schema || $dataSourceStore.type == "viewV2") return "_id";
       return null;
     },
     loadPreSelections: (ids) => {

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

@@ -9,6 +9,7 @@
   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;
@@ -56,6 +57,7 @@
     <div class="pagination-controls">
       <button
         class="pagination-btn"
+        style:margin-right="-0.25rem"
         on:click={goToFirst}
         disabled={currentPage <= 1}
         title="First Page"

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

@@ -2,6 +2,7 @@
   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");
@@ -54,15 +55,15 @@
           />
         {/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}
@@ -96,15 +97,19 @@
             <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)}
+            <IconButton
+              icon="trash"
+              size="small"
+              variant="warning"
+              disabled={$stbRowMetadata[visibleRow]?.disabled}
+              tooltip="Delete Row"
+              on:click={() => stbAPI.deleteRow(visibleRow)}
             />
           {/if}
         </div>
@@ -130,41 +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;
-    }
   }
 </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/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();

package/src/lib/SuperTableCells/CellAttachmentSlider.svelte

@@ -12,7 +12,6 @@
   export let tableid: string;
   export let API;
   export let inBuilder;
-  export let height;
 
   const dispatch = createEventDispatcher();
 
@@ -244,7 +243,7 @@
             on:click={showPrevPage}
             class="slider-navbutton"
           >
-            <i class="ph ph-caret-left" />
+            <i class="ph ph-caret-left"></i>
           </div>
           {#each localvalue as attachment, idx (idx)}
             <div
@@ -284,7 +283,7 @@
             on:click={showNextPage}
             class="slider-navbutton"
           >
-            <i class="ph ph-caret-right" />
+            <i class="ph ph-caret-right"></i>
           </div>
         </Carousel>
       {/key}

package/src/lib/SuperTableCells/CellBoolean.svelte

@@ -108,7 +108,7 @@
             on:change={cellState.change}
             use:focus
           />
-          <span class="spectrum-Switch-switch" />
+          <span class="spectrum-Switch-switch"></span>
           {#if inlineLabel}
             <span class="spectrum-Switch-label">{inlineLabel}</span>
           {/if}

package/src/lib/SuperTableCells/CellColor.svelte

@@ -6,8 +6,7 @@
   export let size = "M";
   export let spectrumTheme;
   export let offset;
-  export let align;
-  export let cellState;
+
   export let cellOptions = {};
 
   let open = false;
@@ -213,7 +212,7 @@
     class:circle
     style={value ? `background: ${value};` : ""}
     class:placeholder={!value}
-  />
+  ></div>
 </div>
 
 {#if inEdit}
@@ -238,7 +237,7 @@
                   style="background: var(--spectrum-global-color-{color});"
                 >
                   {#if value === `var(--spectrum-global-color-${color})`}
-                    <i class="ri-check-line" style="color: {checkColor};" />
+                    <i class="ri-check-line" style="color: {checkColor};"></i>
                   {/if}
                 </div>
               </div>
@@ -249,7 +248,7 @@
       {#if customCategory.colors.length > 0}
         <div class="category">
           <div class="heading">
-            <i class="ri-palette-line heading-icon" />
+            <i class="ri-palette-line heading-icon"></i>
             {customCategory.label}
           </div>
           <div class="colors">
@@ -267,7 +266,7 @@
                   style="background: {color};"
                 >
                   {#if value === color}
-                    <i class="ri-check-line" style="color: {checkColor};" />
+                    <i class="ri-check-line" style="color: {checkColor};"></i>
                   {/if}
                 </div>
               </div>
@@ -288,8 +287,9 @@
               }}
               placeholder="Enter custom color"
             />
+            <!-- svelte-ignore a11y_consider_explicit_label -->
             <button class="clear-value" on:click={() => onChange(null)}>
-              <i class="ri-close-line" />
+              <i class="ri-close-line"></i>
             </button>
           </div>
         </div>

package/src/lib/SuperTableCells/CellCommon.css

@@ -412,7 +412,7 @@
   transition: all 130ms;
 }
 
-.superCell.inline:hover:not(.disabled):not(.readonly) {
+.superCell.inline:hover:not(.disabled):not(.readonly):not(.inEdit) {
   background-color: var(--spectrum-global-color-gray-50);
   border: 1px solid var(--spectrum-global-color-gray-300);
   cursor: pointer;

package/src/lib/SuperTableCells/CellIcon.svelte

@@ -153,10 +153,10 @@
   aria-label="Select icon"
 >
   {#if value}
-    <i class="ph ph-{iconName}" />
+    <i class="ph ph-{iconName}"></i>
   {:else}
     <div class="empty-state">
-      <i class="ph ph-image" />
+      <i class="ph ph-image"></i>
     </div>
   {/if}
 </div>
@@ -188,7 +188,7 @@
         </div>
       {/if}
       <div class="search-container">
-        <i class="ph ph-magnifying-glass search-icon" />
+        <i class="ph ph-magnifying-glass search-icon"></i>
         <input
           type="text"
           bind:value={searchQuery}
@@ -202,7 +202,7 @@
             on:click={() => (searchQuery = "")}
             aria-label="Clear search"
           >
-            <i class="ph ph-x" />
+            <i class="ph ph-x"></i>
           </button>
         {/if}
       </div>
@@ -231,14 +231,14 @@
                 aria-label={`Select ${icon} icon`}
                 tabindex="0"
               >
-                <i class="ph ph-{icon}" />
+                <i class="ph ph-{icon}"></i>
               </button>
             {/each}
           </div>
         </VirtualList>
       {:else}
         <div class="no-results">
-          <i class="ph ph-magnifying-glass" />
+          <i class="ph ph-magnifying-glass"></i>
           <p>No icons found</p>
         </div>
       {/if}
@@ -247,7 +247,7 @@
     <div class="footer">
       {#if value}
         <button class="clear-button" on:click={clearSelection}>
-          <i class="ph ph-x" /> Clear
+          <i class="ph ph-x"></i> Clear
         </button>
       {/if}
     </div>

package/src/lib/SuperTableCells/CellJSON.svelte

@@ -202,7 +202,7 @@
         on:focusout={cellState.focusout}
         on:keydown={cellState.handleKeyboard}
         use:focus
-      />
+      ></textarea>
     {:else}
       <input
         bind:this={editor}
@@ -230,7 +230,7 @@
       <i
         class="ri-close-line clearIcon"
         on:mousedown|self|preventDefault={cellState.clear}
-      />
+      ></i>
     {/if}
   {:else}
     <div