@poirazis/supercomponents-shared 1.0.40 → 1.0.41

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

@@ -1,5 +1,5 @@
 <script>
-  import { getContext, createEventDispatcher, beforeUpdate } from "svelte";
+  import { getContext, createEventDispatcher, afterUpdate } from "svelte";
 
   const stbScrollPos = getContext("stbScrollPos");
   const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
@@ -42,6 +42,7 @@
 
   export const calculate = () => {
     if (!anchor) return;
+
     verticalRange = Math.max(scrollHeight - clientHeight, 0);
     horizontalRange = anchor?.scrollWidth - anchor?.clientWidth;
     visible = verticalRange;
@@ -50,8 +51,8 @@
     width = (anchor?.clientWidth / anchor?.scrollWidth) * 100 + "%";
   };
 
-  beforeUpdate(() => {
-    calculate();
+  afterUpdate(() => {
+    calculate?.();
   });
 </script>
 

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

@@ -42,7 +42,7 @@
       quiet={true}
       size="S"
       type="secondary"
-      on:click={() => (hidden = true)}
+      onClick={() => (hidden = true)}
     />
     <span class="text">
       {$stbSelected.length == 1
@@ -57,7 +57,7 @@
         {type}
         {disabled}
         {size}
-        on:click={tableAPI.executeSelectedRowsAction(onClick)}
+        onClick={tableAPI.executeSelectedRowsAction(onClick)}
       />
     {/each}
   </div>

package/src/lib/SuperTableCells/CellCommon.css

@@ -254,7 +254,7 @@
     background-color: unset !important;
     padding-left: 2px !important;
     border-color: transparent !important;
-    border-width: 0px !important;
+    border-width: 1px !important;
 
     &.with-icon {
       padding-left: 32px !important;
@@ -269,11 +269,11 @@
   background: var(--spectrum-global-color-gray-50);
   min-height: 2rem;
 
-  &:focus-within {
+  &:focus-within:not(.naked-field) {
     border: 1px solid var(--spectrum-global-color-blue-400) !important;
   }
 
-  &.inEdit {
+  &.inEdit:not(.naked-field) {
     border: 1px solid var(--spectrum-global-color-blue-400) !important;
   }
 
@@ -283,6 +283,7 @@
 
   &.disabled {
     background-color: var(--spectrum-global-color-gray-100) !important;
+    border: 1px solid var(--spectrum-global-color-gray-200);
     color: var(--spectrum-global-color-gray-600) !important;
     cursor: not-allowed !important;
 
@@ -304,6 +305,10 @@
   &.error {
     border-color: var(--spectrum-global-color-red-400) !important;
   }
+
+  &.naked-field:focus-within {
+    border: 1px solid transparent !important;
+  }
 }
 
 .superCell.tableCell {
@@ -323,6 +328,7 @@
 }
 
 .superCell > .editor {
+  min-width: none;
   width: 100%;
   height: 100%;
   display: flex;

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -30,10 +30,9 @@
 
   const colors = derivedMemo(options, ($options) => {
     let obj = {};
-    if (!colorColumn) return obj;
     $options.forEach(
       (option, index) =>
-        (obj[option] = optionColors[option] || colorsArray[index % 14])
+        (obj[option] = optionColors[option] ?? colorsArray[index % 14])
     );
     return obj;
   });
@@ -364,8 +363,8 @@
 <div
   bind:this={anchor}
   class="superCell multirow"
-  tabindex={cellOptions?.disabled ? "-1" : "0"}
-  class:inEdit
+  tabindex={cellOptions?.disabled ? -1 : 0}
+  class:inEdit={inEdit && controlType != "buttons"}
   class:isDirty={isDirty && cellOptions.showDirty}
   class:disabled
   class:readonly
@@ -376,6 +375,7 @@
   class:inline={role == "inlineInput"}
   class:tableCell={role == "tableCell"}
   class:formInput={role == "formInput"}
+  class:naked-field={controlType == "buttons"}
   on:focusin={cellState.focus}
   on:focusout={cellState.focusout}
   on:keydown={editorState.handleKeyboard}
@@ -406,9 +406,9 @@
         anchor.focus();
       }}
     />
-  {:else if controlType == "checkbox" || controlType == "radio" || controlType == "buttons"}
+  {:else if controlType == "radio" || controlType == "buttons"}
     {#if isButtons}
-      <div class="buttons">
+      <div class="buttons" class:vertical={cellOptions.direction == "column"}>
         {#each $options as option, idx (idx)}
           <div
             class="button"
@@ -463,7 +463,7 @@
           on:click={cellOptions.toggleAll ? editorState.toggleAll : undefined}
           on:mouseenter
         >
-          <div class="text title">{label ?? ""}</div>
+          <div class="text title">{label ?? "Toggle All"}</div>
           {#if cellOptions.toggleAll && !(readonly || disabled)}
             <div class="spectrum-Switch spectrum-Switch--emphasized">
               <input
@@ -599,15 +599,20 @@
     gap: 0.5rem;
     justify-items: flex-start;
   }
+
+  .buttons.vertical {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
   .buttons .button {
     padding: 0.25rem 0.75rem;
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-100);
-    color: var(--spectrum-global-color-gray-700);
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-global-color-gray-500);
     cursor: pointer;
     user-select: none;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
     transition: all 0.15s ease-in-out;
     white-space: nowrap;
@@ -622,7 +627,7 @@
       var(--spectrum-global-color-gray-300)
     );
     border-color: var(--option-color, var(--spectrum-global-color-gray-300));
-    color: var(--spectrum-global-color-gray-100);
+    color: var(--spectrum-global-color-gray-800);
   }
 
   .radios {

package/src/lib/SuperTableCells/CellString.svelte

@@ -171,7 +171,7 @@
   class:readonly={cellOptions.readonly}
   class:error={cellOptions.error}
   style:color={cellOptions.color}
-  style:background={$cellState == "Editing" && cellOptions.role != "inline"
+  style:background={$cellState == "Editing" && cellOptions.role != "inlineInput"
     ? "var(--spectrum-global-color-gray-50)"
     : cellOptions.background}
   style:font-weight={cellOptions.fontWeight}

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -185,7 +185,7 @@
         }
       },
       lockWidth() {
-        if (!resizing) $lockWidth = viewport.clientWidth;
+        if (!resizing) $lockWidth = viewport?.clientWidth;
       },
       unlockWidth() {
         if (resizing) return;

package/src/lib/SuperTabs/SuperTabs.svelte

@@ -18,6 +18,10 @@
   export let wide = true;
 
   export let quietTabs;
+
+  // Computed for repeated logic
+  $: isVertical = direction === "column" || theme === "list";
+  $: justify = direction === "row" ? hAlign : vAlign;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -26,21 +30,21 @@
   <div
     class="outer-tabs"
     class:quietTabs
-    class:list={theme == "list"}
-    class:vertical={direction == "column"}
-    style:justify-content={direction == "row" ? hAlign : vAlign}
+    class:list={theme === "list"}
+    class:vertical={isVertical}
+    style:justify-content={justify}
   >
     <div
       class="tabs"
-      class:vertical={direction == "column" || theme == "list"}
-      class:buttons={theme == "buttons"}
-      class:list={theme == "list"}
+      class:vertical={isVertical}
+      class:buttons={theme === "buttons"}
+      class:list={theme === "list"}
       class:wide
-      style:justify-content={direction == "row" ? hAlign : vAlign}
+      style:justify-content={justify}
       style:--tab-alignment={tabsAlignment}
       style:--tab-track-thickness="1px"
     >
-      {#if theme == "list" && list_title}
+      {#if theme === "list" && list_title}
         <div class="tab list-title">
           {#if list_icon}
             <i class={list_icon} />
@@ -53,10 +57,10 @@
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <button
           class="tab"
-          class:vertical={direction == "column"}
-          class:button={theme == "buttons"}
-          class:list={theme == "list"}
-          class:selected={container.id == selectedTab}
+          class:vertical={isVertical}
+          class:button={theme === "buttons"}
+          class:list={theme === "list"}
+          class:selected={container.id === selectedTab}
           class:disabled={container.disabled}
           class:list-section={container.isTabSection}
           on:click={() => {
@@ -94,16 +98,16 @@
     justify-content: stretch;
     --selected-tab: var(--spectrum-global-color-gray-200);
     margin-bottom: 0.5rem;
+  }
 
-    &.vertical {
-      flex: none;
-      width: auto;
-      flex-direction: column;
-      align-items: stretch;
-      margin-right: 0.5rem;
-      margin-bottom: unset;
-    }
+  .outer-tabs.vertical {
+    flex-direction: column;
+    align-items: stretch;
+    margin-right: 1rem;
+    margin-bottom: unset;
+    width: 14rem;
   }
+
   .tabs {
     flex: auto;
     display: flex;
@@ -111,34 +115,29 @@
     padding: 0.35rem 0.5rem;
     border-bottom: 1px solid var(--spectrum-global-color-gray-200);
     border-top: 1px solid var(--spectrum-global-color-gray-200);
+  }
 
-    &.buttons {
-      gap: 0.5rem;
-    }
-
-    &.list {
-      gap: 0rem;
-      background-color: var(--spectrum-global-color-gray-50);
-      border: unset;
-      padding: unset;
-    }
+  .tabs.buttons {
+    gap: 0.5rem;
+  }
 
-    &.vertical {
-      height: 100%;
-      flex-direction: column;
-      border-bottom: unset;
-      border-top: unset;
-      border-right: 1px solid var(--spectrum-global-color-gray-200);
-      width: 10rem;
+  .tabs.list {
+    gap: 0;
+    background-color: var(--spectrum-global-color-gray-50);
+    border: unset;
+    padding: unset;
+  }
 
-      &.wide {
-        width: 12rem;
-      }
+  .tabs.vertical {
+    flex-direction: column;
+    border-bottom: unset;
+    border-top: unset;
+    border-right: 1px solid var(--spectrum-global-color-gray-300);
+    gap: 0.25rem;
+  }
 
-      &.list {
-        border-right: unset;
-      }
-    }
+  .tabs.vertical.list {
+    border-right: unset;
   }
 
   .tab {
@@ -152,95 +151,95 @@
     font-size: 13px;
     background: transparent;
     border: none;
+  }
+
+  .tab.disabled {
+    color: var(--spectrum-global-color-gray-400);
+  }
+
+  .tab.disabled:hover {
+    cursor: not-allowed;
+  }
+
+  .tab.button {
+    border-radius: 4px;
+    padding: 0.35rem 1rem;
+  }
+
+  .tab.button.vertical {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .tab.button:active:not(.disabled):not(.list-section) {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+
+  .tab.button.selected {
+    color: var(--spectrum-global-color-gray-800);
+    background-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .tab.list {
+    padding: 0.5rem 1rem;
+    max-width: 100%;
+    color: var(--spectrum-global-color-gray-700);
+    font-weight: 400;
+  }
+
+  .tab.list.selected {
+    color: var(--tab-selected-color);
+    background-color: var(--selected-tab);
+    font-weight: 500;
+  }
+
+  .tab.list:hover:not(.disabled):not(.list-section) {
+    background-color: var(--spectrum-global-color-gray-75);
+  }
+
+  .tab.list-title {
+    padding: 0.75rem 1rem;
+    max-width: 100%;
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-800);
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    font-weight: 500;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    height: 3rem;
+  }
+
+  .tab.list-section {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 1.2px;
+    background-color: transparent;
+  }
+
+  .tab.list-section.vertical {
+    margin-top: 12px;
+  }
+
+  .tab.list-section:hover {
+    cursor: default;
+  }
+
+  .tab:hover:not(.disabled):not(.list-title):not(.list-section) {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-800);
+  }
+
+  .tab.button:hover:not(.selected) {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+
+  .tab.selected {
+    color: var(--tab-selected-color);
+  }
 
-    &.disabled {
-      color: var(--spectrum-global-color-gray-400) !important;
-      &:hover {
-        cursor: not-allowed;
-      }
-    }
-
-    &.button {
-      border-radius: 4px;
-      padding: 0.35rem 1rem;
-      border: none;
-      background: transparent;
-
-      &:active:not(.list-section):not(.disabled) {
-        background-color: var(--spectrum-global-color-gray-200);
-      }
-      &.selected {
-        color: var(--spectrum-global-color-gray-800);
-        background-color: var(--spectrum-global-color-gray-200);
-      }
-    }
-
-    &.list {
-      display: flex;
-      align-items: center;
-      padding: 0.5rem 1rem;
-      max-width: 100%;
-      color: var(--spectrum-global-color-gray-700);
-      font-weight: 400;
-
-      &.selected {
-        color: var(--tab-selected-color);
-        background-color: var(--selected-tab) !important;
-        font-weight: 500;
-      }
-
-      &:hover:not(.disabled):not(.list-section) {
-        background-color: var(--spectrum-global-color-gray-75);
-      }
-    }
-
-    &.list-title {
-      display: flex;
-      align-items: center;
-      padding: 0.75rem 1rem;
-      max-width: 100%;
-      font-size: 12px;
-      color: var(--spectrum-global-color-gray-800);
-      text-transform: uppercase;
-      letter-spacing: 1.2px;
-      font-weight: 500;
-      border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-      height: 3rem;
-    }
-
-    &.list-section {
-      text-transform: uppercase;
-      font-size: 11px;
-      font-weight: 400;
-      letter-spacing: 1.2px;
-      background-color: transparent;
-
-      &.vertical {
-        margin-top: 12px;
-      }
-
-      &:hover {
-        cursor: default;
-      }
-    }
-
-    &:hover:not(.disabled):not(.list-title):not(.list-section) {
-      cursor: pointer;
-      color: var(--spectrum-global-color-gray-800);
-
-      &.button:not(.selected) {
-        background-color: var(--spectrum-global-color-gray-100);
-      }
-    }
-
-    &.selected {
-      color: var(--tab-selected-color);
-
-      &:hover {
-        color: var(--tab-selected-color);
-        cursor: default;
-      }
-    }
+  .tab.selected:hover {
+    cursor: default;
   }
 
   .tab-text {