@poirazis/supercomponents-shared 1.2.11 → 1.2.13

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

@@ -7,7 +7,6 @@
   export let columnsViewport;
   export let showActionColumn;
   export let canScroll;
-  export let stbData;
 </script>
 
 <div bind:this={columnsViewport} class="st-master-columns" tabIndex="-1">
@@ -15,24 +14,17 @@
     <slot />
   {/if}
 
-  {#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}
+  {#each $superColumns as column, idx (idx)}
+    <SuperTableColumn
+      columnOptions={{
+        ...$commonColumnOptions,
+        ...column,
+        isFirst: idx == 0,
+        isLast:
+          idx == $superColumns.length - 1 && !showActionColumn && canScroll,
+      }}
+    />
+  {/each}
 
   {#if $stbSettings.superColumnsPos == "last"}
     <slot />

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

@@ -65,10 +65,10 @@
         class="super-row"
         on:mouseenter={() => ($stbHovered = visibleRow)}
         on:mouseleave={() => ($stbHovered = null)}
-        class:is-selected={$rowMetadata[visibleRow].selected}
-        class:is-hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
+        class:selected={$rowMetadata[visibleRow].selected}
+        class:hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
         class:is-editing={$stbEditing == visibleRow}
-        class:is-disabled={$rowMetadata[visibleRow].disabled}
+        class:disabled={$rowMetadata[visibleRow].disabled}
         style:min-height={$rowMetadata[visibleRow].height}
         style:padding-right={canScroll && right ? "1.5rem" : "0.5rem"}
       >
@@ -87,7 +87,7 @@
                     $rowMetadata[visibleRow].disabled ||
                     stbAPI.shouldDisableButton(
                       disabledTemplate,
-                      stbAPI.enrichContext($stbData?.rows?.[visibleRow])
+                      stbAPI.enrichContext($stbData?.rows?.[visibleRow]),
                     )}
                   onClick={() => {
                     stbAPI.executeRowButtonAction(visibleRow, onClick);

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

@@ -13,22 +13,21 @@
   const stbAPI = getContext("stbAPI");
   const stbVisibleRows = getContext("stbVisibleRows");
   const stbRowMetadata = getContext("stbRowMetadata");
+  const data = getContext("data");
 
   export let sticky;
   export let hideSelectionColumn;
-  export let stbData;
 
   $: partialSelection =
-    $stbSelected.length && $stbSelected.length != $stbData?.rows?.length;
+    $stbSelected.length && $stbSelected.length != $data.length;
 
-  $: fullSelection =
-    $stbSelected.length == $stbData?.rows?.length && $stbData?.rows?.length > 0;
+  $: fullSelection = $stbSelected.length == $data.length && $data.length > 0;
 
   $: numbering = $stbSettings.appearance.numberingColumn;
   $: checkBoxes = $stbSettings.features.canSelect && !hideSelectionColumn;
   $: canDelete = $stbSettings.features.canDelete;
   $: sticky = $stbHorizontalScrollPos > 0;
-  $: visible = numbering || checkBoxes || canDelete;
+  $: visible = (numbering || checkBoxes || canDelete) && !hideSelectionColumn;
   $: zebra = $stbSettings.appearance.zebraColors;
   $: quiet = $stbSettings.appearance.quiet;
   $: headerCheckbox =
@@ -74,16 +73,16 @@
       class:quiet
       class:sticky
       style:margin-top={"var(--super-column-top-offset)"}
+      style:border-right={"1px solid var(--spectrum-global-color-gray-200)"}
     >
       {#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}
+          class:selected
+          class:hovered={$stbHovered == visibleRow || $stbMenuID == visibleRow}
+          class:disabled={$stbRowMetadata[visibleRow]?.disabled}
+          style:height={$stbRowMetadata[visibleRow]?.height}
           on:mouseenter={() => ($stbHovered = visibleRow)}
           on:mouseleave={() => ($stbHovered = null)}
         >

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

@@ -45,7 +45,7 @@
     class="overlay-button filter-row-overlay"
     class:highlighted
     class:footer
-    on:click={stbState.clear()}
+    on:click={stbState.clear}
   >
     <i class="ri-filter-off-line"></i>
   </div>

package/src/lib/SuperTableCells/CellAttachmentExpanded.svelte

@@ -589,7 +589,6 @@
     bind:open={showModal}
     bind:currentIndex
     bind:selectedIndices
-    on:close={() => console.log("closed")}
     {canSelect}
     {canDelete}
   />

package/src/lib/SuperTableCells/CellAttachmentSlider.svelte

@@ -320,7 +320,6 @@
     bind:open={showModal}
     bind:currentIndex={modalImageIndex}
     bind:selectedIndices
-    on:close={() => console.log("lightbox closed")}
     on:delete={(e) => {
       handleDelete(e.detail.index);
     }}

package/src/lib/SuperTableCells/CellBoolean.svelte

@@ -135,7 +135,6 @@
       class="value"
       tabIndex="0"
       style:justify-content={cellOptions.align ?? "center"}
-      class:with-icon={cellOptions.icon}
       on:focusin={cellState.focus}
     >
       {#if value}

package/src/lib/SuperTableCells/CellCommon.css

@@ -1,16 +1,20 @@
 .superCell {
   flex: auto;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   position: relative;
   overflow: hidden;
   transition: all 130ms;
   transition: border 75ms ease-out;
   width: 100%;
   max-height: 2rem;
+  font-size: 13px;
+  padding: 0 0.5rem 0 0.75rem;
+  gap: 0.5rem;
 
   &.multirow {
-    max-height: unset;
+    padding: unset;
+    max-height: 15rem;
     align-items: stretch;
   }
 
@@ -37,26 +41,11 @@
     border-left: 2px solid var(--spectrum-global-color-orange-400) !important;
   }
 
-  .icon {
-    position: absolute;
-    left: 0.5rem;
-    font-size: 16px;
-    color: var(--spectrum-global-color-gray-500);
-  }
-
-  .clearIcon {
-    position: absolute;
-    right: 8px;
-    color: var(--spectrum-global-color-red-500);
-
-    &:hover {
-      color: var(--spectrum-global-color-red-700);
-      cursor: pointer;
-    }
-  }
-
   .field-icon {
-    padding-left: 0.5rem;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
     color: var(--spectrum-global-color-gray-600);
   }
 
@@ -75,7 +64,6 @@
     align-items: center;
     min-width: 0;
     overflow: hidden;
-    padding: 0.25rem 0.5rem;
     gap: 0.5rem;
 
     &:focus {
@@ -85,7 +73,6 @@
     &.placeholder {
       font-weight: 400;
       color: var(--spectrum-global-color-gray-500);
-      justify-content: space-between;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -95,10 +82,6 @@
       }
     }
 
-    &.with-icon {
-      padding-left: 2rem !important;
-    }
-
     & > span {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -112,18 +95,6 @@
       }
     }
 
-    .clearIcon,
-    .endIcon {
-      color: var(--spectrum-global-color-red-500);
-      cursor: pointer;
-      z-index: 1;
-    }
-
-    & > .valueicon {
-      font-size: 16px;
-      color: var(--spectrum-global-color-green-700);
-    }
-
     .items {
       flex: auto;
       display: flex;
@@ -131,7 +102,7 @@
       align-items: stretch;
       align-self: stretch;
       gap: 0.5rem;
-      padding: 0.15rem 0rem;
+      padding: 0.4rem 0rem;
 
       .item {
         display: flex;
@@ -139,7 +110,7 @@
         overflow: hidden;
         padding: 0.15rem 0.5rem;
 
-        i {
+        .loope {
           display: none;
         }
 
@@ -159,10 +130,6 @@
         );
         gap: 0.5rem;
         border-radius: 4px;
-
-        i {
-          display: none;
-        }
       }
     }
 
@@ -188,13 +155,12 @@
       }
     }
 
-    .items.colorText {
+    .items.bullets {
       .item {
         gap: 0.5rem;
         padding: unset;
 
-        i {
-          color: var(--option-color);
+        .loope {
           display: block;
         }
       }
@@ -231,21 +197,30 @@
 
   .clear-icon {
     display: none;
-    color: var(--spectrum-global-color-red-400);
-    cursor: pointer;
+    transition: all 130ms;
   }
 
   .clear-icon.visible {
-    display: block;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
     color: var(--spectrum-global-color-red-400);
-    padding-right: 0.5rem;
+    cursor: pointer;
+  }
+
+  .clear-icon.visible:hover {
+    color: var(--spectrum-global-color-red-600);
+    font-size: larger;
   }
 
   .control-icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
     color: var(--spectrum-global-color-gray-600);
+    font-size: 14px;
     cursor: pointer;
-    padding: 0.5rem;
-    padding-left: 0.25rem;
   }
 
   &.error {
@@ -280,51 +255,42 @@
     padding-left: 2px !important;
     border-color: transparent !important;
     border-width: 1px !important;
-
-    &.with-icon {
-      padding-left: 32px !important;
-    }
   }
 }
 
 .superCell.formInput {
-  border-radius: 2px;
+  border-radius: 4px;
   color: var(--spectrum-global-color-gray-800);
   border: 1px solid var(--spectrum-global-color-gray-300);
   background: var(--spectrum-global-color-gray-50);
   min-height: 2rem;
 
-  &:focus-within:not(.naked-field) {
+  &.inEdit:not(.naked-field):not(.has-popup) {
     border: 1px solid var(--spectrum-global-color-blue-400);
-  }
 
-  &.inEdit:not(.naked-field) {
-    border: 1px solid var(--spectrum-global-color-blue-400);
+    &:focus-within:not(.naked-field):not(.has-popup) {
+      border: 1px solid var(--spectrum-global-color-blue-400);
+    }
   }
 
   &:hover:not(.disabled):not(.readonly):not(.inEdit) {
     border: 1px solid var(--spectrum-global-color-gray-400);
+    cursor: pointer;
   }
 
   &.disabled {
-    background-color: var(--spectrum-global-color-gray-100) !important;
+    background-color: var(--spectrum-global-color-gray-200) !important;
     border: 1px solid var(--spectrum-global-color-gray-200);
     color: var(--spectrum-global-color-gray-600) !important;
-    cursor: not-allowed !important;
-
-    &:focus-within {
-      border: 1px dashed var(--spectrum-global-color-gray-500) !important;
-    }
   }
 
   &.readonly:not(.disabled) {
-    background-color: var(--spectrum-global-color-gray-50);
-    border: 1px solid var(--spectrum-global-color-gray-200);
+    background-color: rgb(
+      from var(--spectrum-global-color-gray-50) r g b / 0.75
+    );
+    border: 1px solid
+      rgb(from var(--spectrum-global-color-gray-200) r g b / 0.75);
     color: var(--spectrum-global-color-gray-700);
-
-    &:focus-within {
-      border: 1px dashed var(--spectrum-global-color-blue-500) !important;
-    }
   }
 
   &.error {
@@ -340,10 +306,23 @@
   }
 }
 
+.superCell.formInput.has-popup {
+  &.inEdit {
+    border: 1px solid var(--spectrum-global-color-blue-400) !important;
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    cursor: pointer !important;
+  }
+  &.inEdit.open-popup {
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    border: 1px solid var(--spectrum-global-color-gray-200) !important;
+  }
+}
+
 .superCell.tableCell {
   min-height: unset;
   max-height: unset;
   border: 1px solid transparent;
+  padding: 0 0.5rem;
 
   &:hover:not(.readonly):not(.inEdit) {
     border: 1px dashed var(--spectrum-global-color-blue-400);
@@ -368,13 +347,12 @@
   white-space: nowrap;
   overflow: hidden;
   gap: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
   background-color: transparent;
   outline: none;
   border: none;
   color: inherit;
   letter-spacing: inherit;
+  font-size: inherit;
 
   &:focus {
     outline: none;
@@ -388,18 +366,11 @@
     font-style: italic !important;
   }
 
-  &.with-icon {
-    padding-left: 2rem;
-  }
-
-  i {
-    font-size: 18px;
-  }
-
   &.textarea {
     flex: 1 1 auto;
+    padding: 0.5rem 0rem;
+    justify-content: flex-start;
     align-items: stretch;
-    padding: 0.5rem;
     white-space: normal;
     overflow: auto;
     resize: none;
@@ -426,6 +397,7 @@
   min-height: 1.8rem;
   min-width: unset;
   transition: all 130ms;
+  align-items: center !important;
 }
 
 .superCell.inline:hover:not(.disabled):not(.readonly):not(.inEdit) {
@@ -436,12 +408,12 @@
 
 .superCell.inline.inEdit {
   background-color: var(--spectrum-global-color-gray-50);
-  border: 1px solid var(--spectrum-global-color-blue-400);
+  border: 1px solid var(--spectrum-global-color-gray-400);
   cursor: text;
 }
 
 .superCell.inline.disabled {
-  background-color: var(--spectrum-global-color-gray-100) !important;
+  background-color: var(--spectrum-global-color-gray-200) !important;
   color: var(--spectrum-global-color-gray-600);
   cursor: not-allowed;
 }

package/src/lib/SuperTableCells/CellDateRange.svelte

@@ -101,7 +101,7 @@
     dateFormat,
     fromTime,
     toTime,
-    showTime
+    showTime,
   ) {
     if (!showTime) {
       return {
@@ -120,14 +120,7 @@
 
   // Date formatting helper function
   function formatDateRange(fromDate, toDate, dateFormat) {
-    console.log("🔍 formatDateRange called with:", {
-      fromDate,
-      toDate,
-      dateFormat,
-    });
-
     if (!dateFormat || dateFormat === "default") {
-      console.log("➡️ Using default format");
       return {
         from: fromDate.toDateString(),
         to: toDate.toDateString(),
@@ -138,30 +131,18 @@
     if (dateFormat === "MM/DD/YYYY") {
       const fromFormatted = `${(fromDate.getMonth() + 1).toString().padStart(2, "0")}/${fromDate.getDate().toString().padStart(2, "0")}/${fromDate.getFullYear()}`;
       const toFormatted = `${(toDate.getMonth() + 1).toString().padStart(2, "0")}/${toDate.getDate().toString().padStart(2, "0")}/${toDate.getFullYear()}`;
-      console.log("✅ MM/DD/YYYY formatted:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return { from: fromFormatted, to: toFormatted };
     }
 
     if (dateFormat === "DD/MM/YYYY") {
       const fromFormatted = `${fromDate.getDate().toString().padStart(2, "0")}/${(fromDate.getMonth() + 1).toString().padStart(2, "0")}/${fromDate.getFullYear()}`;
       const toFormatted = `${toDate.getDate().toString().padStart(2, "0")}/${(toDate.getMonth() + 1).toString().padStart(2, "0")}/${toDate.getFullYear()}`;
-      console.log("✅ DD/MM/YYYY formatted:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return { from: fromFormatted, to: toFormatted };
     }
 
     if (dateFormat === "YYYY-MM-DD") {
       const fromFormatted = `${fromDate.getFullYear()}-${(fromDate.getMonth() + 1).toString().padStart(2, "0")}-${fromDate.getDate().toString().padStart(2, "0")}`;
       const toFormatted = `${toDate.getFullYear()}-${(toDate.getMonth() + 1).toString().padStart(2, "0")}-${toDate.getDate().toString().padStart(2, "0")}`;
-      console.log("✅ YYYY-MM-DD formatted:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return { from: fromFormatted, to: toFormatted };
     }
 
@@ -182,22 +163,16 @@
     };
 
     const format = options[dateFormat];
-    console.log("📅 Format object:", format);
 
     if (format) {
       const fromFormatted = fromDate.toLocaleDateString("en-US", format);
       const toFormatted = toDate.toLocaleDateString("en-US", format);
-      console.log("✅ Formatted result:", {
-        from: fromFormatted,
-        to: toFormatted,
-      });
       return {
         from: fromFormatted,
         to: toFormatted,
       };
     }
 
-    console.log("⚠️ Format not found, using fallback");
     // Fallback to default
     return {
       from: fromDate.toDateString(),
@@ -240,7 +215,7 @@
             dateFormat,
             fromTime,
             fromTime,
-            true
+            true,
           );
           fromFormatted = formatted.from;
         } else {
@@ -263,7 +238,7 @@
             dateFormat,
             toTime,
             toTime,
-            true
+            true,
           );
           toFormatted = formatted.to;
         } else {
@@ -359,9 +334,10 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={anchor}
-  class="superCell"
+  class="superCell has-popup"
   tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
   class:inEdit
+  class:open-popup={open}
   class:isDirty={isDirty && cellOptions.showDirty}
   class:inline
   class:tableCell={cellOptions.role == "tableCell"}
@@ -377,13 +353,12 @@
   on:focusout={cellState.focusout}
 >
   {#if cellOptions.icon}
-    <i class={cellOptions.icon + " icon"}></i>
+    <i class={cellOptions.icon + " field-icon"}></i>
   {/if}
 
   {#if inEdit}
     <div
       class="editor"
-      class:with-icon={cellOptions.icon}
       class:placeholder={!value}
       on:click={() => (open = !open)}
     >
@@ -405,7 +380,6 @@
   {:else}
     <div
       class="value"
-      class:with-icon={cellOptions.icon}
       class:placeholder={!value}
       style:justify-content={cellOptions.align}
     >

package/src/lib/SuperTableCells/CellDatetime.svelte

@@ -183,7 +183,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={anchor}
-  class="superCell"
+  class="superCell has-popup"
   tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
   class:inEdit
   class:isDirty={isDirty && cellOptions.showDirty}
@@ -193,6 +193,7 @@
   class:disabled={cellOptions.disabled}
   class:readonly={cellOptions.readonly}
   class:error={cellOptions.error}
+  class:open-popup={open}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
   style:font-weight={cellOptions.fontWeight}
@@ -201,13 +202,12 @@
   on:focusout={cellState.focusout}
 >
   {#if cellOptions.icon}
-    <i class={cellOptions.icon + " icon"}></i>
+    <i class={cellOptions.icon + " field-icon"}></i>
   {/if}
 
   {#if inEdit}
     <div
       class="editor"
-      class:with-icon={cellOptions.icon}
       class:placeholder={!formattedValue}
       on:click={() => (open = !open)}
     >
@@ -220,7 +220,6 @@
   {:else}
     <div
       class="value"
-      class:with-icon={cellOptions.icon}
       class:placeholder={!formattedValue}
       style:justify-content={cellOptions.align}
     >

package/src/lib/SuperTableCells/CellJSON.svelte

@@ -172,7 +172,7 @@
   style:font-weight={cellOptions.fontWeight}
 >
   {#if cellOptions.icon && !cellOptions.multiline}
-    <i class={cellOptions.icon + " icon"}></i>
+    <i class={cellOptions.icon + " field-icon"}></i>
   {/if}
 
   {#if inEdit}
@@ -181,7 +181,6 @@
         bind:this={editor}
         tabindex="0"
         class="editor"
-        class:with-icon={cellOptions.icon}
         class:placeholder={!value && !formattedValue && !localValue}
         value={displayValue}
         placeholder={cellOptions?.placeholder ?? ""}
@@ -208,7 +207,6 @@
         bind:this={editor}
         tabindex="0"
         class="editor"
-        class:with-icon={cellOptions.icon}
         class:placeholder={!value && !formattedValue && !localValue}
         value={localValue ?? ""}
         placeholder={cellOptions?.placeholder ?? ""}
@@ -237,7 +235,6 @@
       class="value"
       class:multiline={cellOptions.multiline}
       tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
-      class:with-icon={cellOptions.icon}
       class:placeholder={!value}
       style:justify-content={cellOptions.align}
       on:focusin={cellState.focus}