@poirazis/supercomponents-shared 1.2.16 → 1.2.19

package/src/lib/SuperTableCells/CellSQLLink.svelte

@@ -108,9 +108,7 @@
   $: pills = cellOptions.relViewMode == "pills";
   $: ownId = ownId || cellOptions?.ownId;
 
-  $: if (!isLoading) {
-    localValue = enrichValue(value);
-  }
+  $: localValue = enrichValue(value);
 
   $: inEdit = $cellState == "Editing";
   $: isDirty = inEdit && originalValue != JSON.stringify(localValue);
@@ -246,36 +244,38 @@
     {/if}
 
     <div class="value" class:placeholder={localValue?.length < 1}>
-      {#if localValue?.length < 1}
-        <span> {placeholder} </span>
-      {:else if pills}
-        <div
-          class="items"
-          class:pills
-          class:withCount={localValue.length > 5}
-          class:inEdit
-        >
-          {#each localValue as val, idx}
-            {#if idx < 5}
-              <div class="item">
-                <span>{val.primaryDisplay}</span>
-              </div>
+      {#key localValue}
+        {#if localValue?.length < 1}
+          <span> {placeholder} </span>
+        {:else if pills}
+          <div
+            class="items"
+            class:pills
+            class:withCount={localValue.length > 5}
+            class:inEdit
+          >
+            {#each localValue as val, idx}
+              {#if idx < 5}
+                <div class="item">
+                  <span>{val.primaryDisplay}</span>
+                </div>
+              {/if}
+            {/each}
+            {#if localValue.length > 5}
+              <span class="count">
+                (+ {localValue.length - 5})
+              </span>
             {/if}
-          {/each}
-          {#if localValue.length > 5}
-            <span class="count">
-              (+ {localValue.length - 5})
-            </span>
-          {/if}
-        </div>
-      {:else}
-        <span>
-          {#if cellOptions.role == "formInput" && localValue.length > 1}
-            ({localValue.length})
-          {/if}
-          {localValue.map((v) => v.primaryDisplay).join(", ")}
-        </span>
-      {/if}
+          </div>
+        {:else}
+          <span>
+            {#if cellOptions.role == "formInput" && localValue.length > 1}
+              ({localValue.length})
+            {/if}
+            {localValue.map((v) => v.primaryDisplay).join(", ")}
+          </span>
+        {/if}
+      {/key}
     </div>
     {#if !readonly && (cellOptions.role == "formInput" || inEdit)}
       <i class="ph ph-caret-down control-icon"></i>
@@ -313,7 +313,9 @@
         bind:api={pickerApi}
         on:change={handleChange}
         on:focusout={cellState.popupfocusout}
-      />
+      >
+        <slot />
+      </CellSQLLinkPicker>
     {/if}
   </SuperPopover>
 {/if}

package/src/lib/SuperTableCells/CellSQLLinkPicker.svelte

@@ -343,12 +343,13 @@
               on:mouseleave={() => (focusIdx = -1)}
               on:mousedown|preventDefault|stopPropagation={() => selectRow(row)}
             >
+              <slot />
               <span>{row.primaryDisplay || row[primaryDisplay]}</span>
               <i class="ri-check-line"></i>
             </div>
           {/each}
 
-          {#if $optionsFetch && $optionsFetch.loaded}
+          {#if $optionsFetch}
             <!-- Unselected rows -->
             {#key localValue.length}
               {#each $optionsFetch.rows as row, idx (row[relatedField])}
@@ -361,6 +362,7 @@
                     on:mouseleave={() => (focusIdx = -1)}
                     on:mousedown|preventDefault={() => selectRow(row)}
                   >
+                    <slot />
                     <span>{row.primaryDisplay || row[primaryDisplay]}</span>
                     <i class="ri-check-line"></i>
                   </div>
@@ -370,14 +372,9 @@
             {#if $optionsFetch?.loading}
               <div class="option loading">
                 <i class="ri-loader-2-line rotating"></i>
-                Loading more...
+                Loading...
               </div>
             {/if}
-          {:else if $optionsFetch?.loading && !$optionsFetch.loaded}
-            <div class="option loading">
-              <i class="ri-loader-2-line rotating"></i>
-              Loading...
-            </div>
           {:else}
             <div class="option">No Results Found</div>
           {/if}

package/src/lib/SuperTableCells/CellString.svelte

@@ -38,7 +38,6 @@
   $: ({
     controlType,
     role,
-    disabled,
     readonly,
     error: optionError,
     icon: optionIcon,
@@ -60,6 +59,7 @@
     : (value ?? undefined);
   $: placeholder = placeholderText ?? "";
   $: textarea = controlType === "textarea";
+  $: disabled = cellOptions?.disabled;
 
   // Reset when value changes externally
   $: cellState.reset(value);
@@ -201,54 +201,56 @@
   style:background
   on:focusin={cellState.focus}
 >
-  {#if icon && !textarea}
-    <i class={icon + " field-icon"} class:with-error={error}></i>
-  {/if}
-  {#if inEdit}
-    {#if textarea}
-      <textarea
-        tabindex="0"
-        class:placeholder={!value && !formattedValue && !localValue}
-        placeholder={cellOptions?.placeholder ?? ""}
-        value={localValue ?? ""}
-        on:input={cellState.debounce}
-        on:focusout={cellState.focusout}
-        on:keydown={cellState.handleKeyboard}
-        use:focus
-      ></textarea>
+  {#key inEdit}
+    {#if icon && !textarea}
+      <i class={icon + " field-icon"} class:with-error={error}></i>
+    {/if}
+    {#if inEdit}
+      {#if textarea}
+        <textarea
+          tabindex="0"
+          class:placeholder={!value && !formattedValue && !localValue}
+          placeholder={cellOptions?.placeholder ?? ""}
+          value={localValue ?? ""}
+          on:input={cellState.debounce}
+          on:focusout={cellState.focusout}
+          on:keydown={cellState.handleKeyboard}
+          use:focus
+        ></textarea>
+      {:else}
+        <input
+          tabindex="0"
+          class="editor"
+          class:placeholder={!value && !formattedValue && !localValue}
+          value={localValue ?? ""}
+          placeholder={cellOptions?.placeholder ?? ""}
+          style:text-align={cellOptions.align == "center"
+            ? "center"
+            : cellOptions.align == "flex-end"
+              ? "right"
+              : "left"}
+          on:input={cellState.debounce}
+          on:focusout={cellState.focusout}
+          on:keydown={cellState.handleKeyboard}
+          use:focus
+        />
+        <i
+          class="ri-close-line clear-icon"
+          class:visible={localValue && cellOptions?.clearIcon !== false}
+          on:mousedown|self|preventDefault={cellState.clear}
+        ></i>
+      {/if}
     {:else}
-      <input
-        tabindex="0"
-        class="editor"
-        class:placeholder={!value && !formattedValue && !localValue}
-        value={localValue ?? ""}
-        placeholder={cellOptions?.placeholder ?? ""}
-        style:text-align={cellOptions.align == "center"
-          ? "center"
-          : cellOptions.align == "flex-end"
-            ? "right"
-            : "left"}
-        on:input={cellState.debounce}
-        on:focusout={cellState.focusout}
-        on:keydown={cellState.handleKeyboard}
-        use:focus
-      />
-      <i
-        class="ri-close-line clear-icon"
-        class:visible={localValue && cellOptions?.clearIcon !== false}
-        on:mousedown|self|preventDefault={cellState.clear}
-      ></i>
+      <div
+        class="value"
+        class:textarea
+        class:placeholder={!value && !formattedValue}
+        style:justify-content={cellOptions.align}
+      >
+        <span>{formattedValue || value || placeholder}</span>
+      </div>
     {/if}
-  {:else}
-    <div
-      class="value"
-      class:textarea
-      class:placeholder={!value && !formattedValue}
-      style:justify-content={cellOptions.align}
-    >
-      <span>{formattedValue || value || placeholder}</span>
-    </div>
-  {/if}
+  {/key}
 </div>
 
 <style>

package/src/lib/SuperTableCells/CellStringMask.svelte

@@ -354,49 +354,50 @@
     : cellOptions.background}
   style:font-weight={cellOptions.fontWeight}
 >
-  {#if icon}
-    <i class={icon + " field-icon"} class:with-error={error}></i>
-  {/if}
+  {#key $cellState}
+    {#if icon}
+      <i class={icon + " field-icon"} class:with-error={error}></i>
+    {/if}
 
-  {#if inEdit}
-    <input
-      bind:this={inputElement}
-      tabindex="0"
-      class="editor"
-      {placeholder}
-      style:color={!isComplete
-        ? "var(--spectrum-global-color-gray-700)"
-        : cellOptions.color}
-      style:text-align={cellOptions.align == "center"
-        ? "center"
-        : cellOptions.align == "flex-end"
-          ? "right"
-          : "left"}
-      style:padding-right={cellOptions.align != "flex-start"
-        ? "2rem"
-        : "0.75rem"}
-      on:focusout={cellState.focusout}
-      on:keydown={cellState.handleKeyboard}
-      use:focus
-      use:initIMask={mask}
-    />
-    {#if localValue && cellOptions?.clearIcon !== false}
+    {#if inEdit}
+      <input
+        bind:this={inputElement}
+        tabindex="0"
+        class="editor"
+        {placeholder}
+        style:color={!isComplete
+          ? "var(--spectrum-global-color-gray-700)"
+          : cellOptions.color}
+        style:text-align={cellOptions.align == "center"
+          ? "center"
+          : cellOptions.align == "flex-end"
+            ? "right"
+            : "left"}
+        style:padding-right={cellOptions.align != "flex-start"
+          ? "2rem"
+          : "0.75rem"}
+        on:focusout={cellState.focusout}
+        on:keydown={cellState.handleKeyboard}
+        use:focus
+        use:initIMask={mask}
+      />
       <i
-        class="ri-close-line clearIcon"
+        class="ri-close-line clear-icon"
+        class:visible={localValue && cellOptions?.clearIcon !== false}
         on:mousedown|self|preventDefault={cellState.clear}
       ></i>
+    {:else}
+      <div
+        class="value"
+        tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
+        class:placeholder={!value}
+        style:justify-content={cellOptions.align}
+        on:focusin={cellState.focus}
+      >
+        <span>
+          {displayValue || placeholder}
+        </span>
+      </div>
     {/if}
-  {:else}
-    <div
-      class="value"
-      tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
-      class:placeholder={!value}
-      style:justify-content={cellOptions.align}
-      on:focusin={cellState.focus}
-    >
-      <span>
-        {displayValue || placeholder}
-      </span>
-    </div>
-  {/if}
+  {/key}
 </div>

package/src/lib/SuperTableColumn/SuperTableColumn.svelte

@@ -192,6 +192,7 @@
       startResizing(e) {
         e.stopPropagation();
         e.preventDefault();
+        stbAPI.startResize();
         resizing = true;
         startPoint = e.clientX;
         startWidth = viewport.clientWidth;
@@ -203,6 +204,7 @@
       stopResizing(e) {
         e.preventDefault();
         e.stopPropagation();
+        stbAPI.endResize();
         resizing = false;
         startPoint = undefined;
         width = $lockWidth;

package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte

@@ -32,6 +32,7 @@
   class:inserting
   class:filtered={$columnState == "Filtered"}
   class:is-editing={editing}
+  class:is-last={isLast}
 >
   {#each $stbVisibleRows as index (index)}
     <SuperColumnRow

package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte

@@ -108,51 +108,53 @@
   on:mouseenter={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}
 >
-  {#if $columnState == "Entering" || $columnState == "Filtered"}
-    {#if $columnOptions.canFilter == "advanced"}
-      <i
-        class="ri-filter-3-line"
-        tabindex="0"
-        style="align-self: center; font-size: 14px;"
-        on:click|preventDefault={() =>
-          (showFilteringOptions = !showFilteringOptions)}
-      ></i>
-    {/if}
-    <svelte:component
-      this={$columnOptions.headerComponent}
-      cellOptions={{
-        ...$cellOptions,
-        placeholder: filterOperator,
-        disabled: filterOperator == "empty" || filterOperator == "notEmpty",
-      }}
-      value={filterValue}
-      fieldSchema={$columnOptions.schema}
-      multi={filterOperator == "containsAny" || filterOperator == "oneOf"}
-      on:change={handleValueChange}
-      on:focusout={handleBlur}
-    />
-  {:else}
-    <div
-      class="headerLabel"
-      style:justify-content={$columnOptions?.headerAlign}
-      on:click={columnState.headerClicked}
-    >
-      <div class="innerText" class:sortable={$columnOptions.canSort}>
-        {$columnOptions.displayName ?? $columnOptions.name}
-      </div>
-    </div>
-  {/if}
-
-  {#if $columnOptions.canSort && $columnState == "Idle"}
-    <span class="placeholder" on:click={columnState.sort}>
-      {#if hovered || sorted}
+  {#key $columnState}
+    {#if $columnState == "Entering" || $columnState == "Filtered"}
+      {#if $columnOptions.canFilter == "advanced"}
         <i
-          class={sorted == "ascending" ? "ri-sort-asc" : "ri-sort-desc"}
-          class:sorted
+          class="ri-filter-3-line"
+          tabindex="0"
+          style="align-self: center; font-size: 14px;"
+          on:click|preventDefault={() =>
+            (showFilteringOptions = !showFilteringOptions)}
         ></i>
       {/if}
-    </span>
-  {/if}
+      <svelte:component
+        this={$columnOptions.headerComponent}
+        cellOptions={{
+          ...$cellOptions,
+          placeholder: filterOperator,
+          disabled: filterOperator == "empty" || filterOperator == "notEmpty",
+        }}
+        value={filterValue}
+        fieldSchema={$columnOptions.schema}
+        multi={filterOperator == "containsAny" || filterOperator == "oneOf"}
+        on:change={handleValueChange}
+        on:focusout={handleBlur}
+      />
+    {:else}
+      <div
+        class="headerLabel"
+        style:justify-content={$columnOptions?.headerAlign}
+        on:click={columnState.headerClicked}
+      >
+        <div class="innerText" class:sortable={$columnOptions.canSort}>
+          {$columnOptions.displayName ?? $columnOptions.name}
+        </div>
+      </div>
+    {/if}
+
+    {#if $columnOptions.canSort && $columnState == "Idle"}
+      <span class="placeholder" on:click={columnState.sort}>
+        {#if hovered || sorted}
+          <i
+            class={sorted == "ascending" ? "ri-sort-asc" : "ri-sort-desc"}
+            class:sorted
+          ></i>
+        {/if}
+      </span>
+    {/if}
+  {/key}
 </div>
 
 {#if $columnOptions.canFilter == "advanced" && $columnState != "Idle"}

package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte

@@ -72,7 +72,7 @@
         }
       }
       return obj;
-    } else return obj[path] ?? undefined;
+    } else return obj[path];
   };
 
   const onClick = () => {

package/src/lib/SuperTabs/SuperTabs.svelte

@@ -16,6 +16,7 @@
   export let list_icon;
   export let list_title;
   export let tabsWidth = "200px";
+  export let listBackground = "var(--spectrum-global-color-gray-50)";
 
   export let quietTabs;
 
@@ -44,11 +45,12 @@
       style:justify-content={buttonsAlignment}
       style:--tab-alignment={tabsAlignment}
       style:--tab-track-thickness="1px"
+      style:--list-background={listBackground}
     >
       {#if theme === "list" && list_title}
         <div class="tab list-title">
           {#if list_icon}
-            <i class={list_icon}></i>
+            <i class={"ph ph-" + list_icon}></i>
           {/if}
           {list_title}
         </div>
@@ -73,7 +75,7 @@
           {#if container.icon}
             <i
               class={container.icon}
-              style:font-size={tabsIconsOnly ? "20px" : "inherit"}
+              style:font-size={tabsIconsOnly ? "20px" : "12px"}
               style:color={container.color}
             ></i>
           {/if}
@@ -110,6 +112,14 @@
     margin-bottom: unset;
     --selected-tab: var(--spectrum-global-color-gray-200);
   }
+  .outer-tabs.vertical.list {
+    padding-left: unset;
+    padding-right: unset;
+    flex-direction: column;
+    align-items: stretch;
+    --selected-tab: var(--spectrum-global-color-gray-200);
+    border-right: 1px solid var(--spectrum-global-color-gray-300);
+  }
 
   .tabs {
     flex: auto;
@@ -125,20 +135,29 @@
 
   .tabs.list {
     gap: 0;
-    background-color: var(--spectrum-global-color-gray-50);
+    background-color: var(
+      --list-background,
+      var(--spectrum-global-color-gray-50)
+    );
     border: unset;
     padding: unset;
+    padding-bottom: 0.5rem;
   }
 
   .tabs.vertical {
     flex-direction: column;
     border-bottom: unset;
     border-top: unset;
+    border-right: 1px solid var(--spectrum-global-color-gray-300);
+    padding-right: 0.25rem;
     gap: 0.25rem;
   }
 
   .tabs.vertical.list {
     border-right: unset;
+    gap: 2px;
+    padding: 2px;
+    padding-top: 0rem;
   }
 
   .tab {
@@ -165,10 +184,9 @@
   .tab.button {
     border-radius: 0.25rem;
     padding: 0.5rem 1rem;
-    font-weight: 600;
     line-height: 14px;
     border: 1px solid transparent;
-    height: 1.85rem;
+    height: 1.75rem;
   }
 
   .tab.button.vertical {
@@ -184,51 +202,49 @@
 
   .tab.button.selected {
     color: var(--spectrum-global-color-gray-700);
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    font-weight: 500;
+    border: 1px solid
+      rgb(from var(--spectrum-global-color-gray-400) r g b / 0.75);
     background-color: rgb(
       from var(--spectrum-global-color-gray-200) r g b / 0.85
     );
   }
 
   .tab.list {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.25rem;
     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:hover:not(.disabled):not(.list-section):not(.selected) {
+    background-color: var(--spectrum-global-color-gray-100);
   }
 
   .tab.list-title {
-    padding: 0.75rem 1rem;
+    padding: 0.75rem 0.5rem;
     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;
+    color: var(--spectrum-global-color-gray-600);
     background-color: transparent;
   }
 
   .tab.list-section.vertical {
-    margin-top: 12px;
+    margin-top: 4px;
   }
 
   .tab.list-section:hover {