@poirazis/supercomponents-shared 1.2.12 → 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/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,26 +255,22 @@
     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) {
@@ -308,24 +279,18 @@
   }
 
   &.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 {
@@ -341,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);
@@ -369,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;
@@ -389,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;
@@ -427,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) {
@@ -437,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

@@ -334,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"}
@@ -352,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)}
     >
@@ -380,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}

package/src/lib/SuperTableCells/CellLink.svelte

@@ -50,15 +50,17 @@
         dispatch("exitedit");
       },
       focusout(e) {
-        if (
-          anchor?.contains(e?.relatedTarget) ||
-          popup?.contains(e?.relatedTarget)
-        )
-          return;
-
+        if (popup?.contains(e?.relatedTarget)) return;
         this.submit();
       },
-
+      popupfocusout(e) {
+        if (anchor != e?.relatedTarget) {
+          this.submit();
+        }
+      },
+      toggle(e) {
+        editorState.toggle();
+      },
       clear() {
         localValue = [];
       },
@@ -71,9 +73,9 @@
 
         return "View";
       },
-      cancel() {
+      cancel(e) {
         localValue = JSON.parse(originalValue);
-        anchor?.blur();
+        anchor.blur();
         return "View";
       },
     },
@@ -176,7 +178,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="superCell"
+  class="superCell has-popup"
   tabindex={cellOptions?.disabled ? -1 : 0}
   bind:this={anchor}
   class:isDirty={isDirty && cellOptions.showDirty}
@@ -188,18 +190,13 @@
   class:disabled={cellOptions.disabled}
   class:readonly
   class:error={cellOptions.error}
+  class:open-popup={$editorState == "Open"}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
   on:focusin={cellState.focus}
   on:keydown|self={handleKeyboard}
   on:focusout={cellState.focusout}
-  on:mousedown={(e) => {
-    if (inEdit) {
-      // Prevent losing focus when clicking to open the picker
-      e.preventDefault();
-      editorState.toggle();
-    }
-  }}
+  on:mousedown={cellState.toggle}
 >
   {#if cellOptions?.icon}
     <i class={cellOptions.icon + " field-icon"}></i>
@@ -227,7 +224,9 @@
                   }
                 : null}
             >
-              <i class={valueIcon}></i>
+              {#if isUser}
+                <i class={valueIcon}></i>
+              {/if}
               <span>{val.primaryDisplay}</span>
             </div>
           {/if}
@@ -253,16 +252,11 @@
 </div>
 
 {#if inEdit}
-  <SuperPopover
-    {anchor}
-    useAnchorWidth
-    open={$editorState == "Open"}
-    on:close={cellState.cancel}
-    bind:popup
-  >
+  <SuperPopover {anchor} useAnchorWidth open={$editorState == "Open"}>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="picker-container"
+      bind:this={popup}
       on:keydown={(e) => {
         if (e.key == "Escape" || e.key == "Tab") {
           anchor.focus();
@@ -294,6 +288,7 @@
           {search}
           wide={cellOptions.wide && !singleSelect}
           on:change={handleChange}
+          on:focusout={cellState.popupfocusout}
         />
       {/if}
     </div>

package/src/lib/SuperTableCells/CellLinkAdvanced.svelte

@@ -58,7 +58,7 @@
         if (isDirty)
           dispatch(
             "change",
-            returnSingle && localValue ? localValue[0] : localValue
+            returnSingle && localValue ? localValue[0] : localValue,
           );
         editorState.close();
         return "View";
@@ -178,14 +178,10 @@
   on:mousedown={editorState.toggle}
 >
   {#if cellOptions?.icon}
-    <i class={cellOptions.icon + " icon"}></i>
+    <i class={cellOptions.icon + " field-icon"}></i>
   {/if}
 
-  <div
-    class="value"
-    class:with-icon={cellOptions?.icon}
-    class:placeholder={localValue?.length < 1}
-  >
+  <div class="value" class:placeholder={localValue?.length < 1}>
     {#if localValue?.length < 1}
       <span>
         {cellOptions.placeholder ?? null}