@poirazis/supercomponents-shared 1.2.15 → 1.2.18

package/src/lib/SuperTableCells/CellString.svelte

@@ -25,7 +25,7 @@
 
   // Local state
   let timer;
-  let editor;
+
   let lastEdit;
   let localValue = value;
   let state =
@@ -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);
@@ -90,25 +90,20 @@
     },
     Editing: {
       _enter() {
-        setTimeout(() => {
-          editor?.focus();
-        }, 50);
         dispatch("enteredit");
       },
       _exit() {
         lastEdit = undefined;
         dispatch("exitedit");
       },
-      focus() {
-        editor?.focus();
-      },
+      focus() {},
       clear() {
         if (debounceDelay) {
           dispatch("change", null);
         }
         lastEdit = new Date();
         localValue = null;
-        editor?.focus();
+
         dispatch("clear", null);
       },
       focusout(e) {
@@ -206,84 +201,71 @@
   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
-        bind:this={editor}
-        tabindex="0"
-        class="editor textarea"
-        class:placeholder={!value && !formattedValue && !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>{localValue ?? ""}</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
-        bind:this={editor}
-        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 if textarea}
-    <div
-      class="value textarea"
-      class:placeholder={!value && !formattedValue}
-      style:justify-content={cellOptions.align}
-    >
-      {formattedValue || value || placeholder}
-    </div>
-  {:else}
-    <div
-      class="value"
-      class:placeholder={!value}
-      style:justify-content={cellOptions.align}
-    >
-      <span>
-        {formattedValue || value || placeholder}
-      </span>
-    </div>
-  {/if}
+  {/key}
 </div>
 
 <style>
-  .value.textarea {
-    flex: 1 0 auto;
-    display: flex;
-    align-items: flex-start;
-    white-space: pre-wrap;
-    padding: 0.5rem 0rem;
+  textarea {
+    all: inherit;
+    flex: 1;
+    min-height: 100%;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background-color: transparent;
     overflow-y: auto;
   }
 
-  .textarea.placeholder {
-    color: var(--spectrum-global-color-gray-500);
-    font-style: italic;
+  textarea:focus {
+    outline: none;
+    border: none;
   }
 </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/SuperTableCells/CellStringSimple.svelte

@@ -35,7 +35,6 @@
   class:error={cellOptions.error}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  style:font-weight={cellOptions.fontWeight}
 >
   {#if cellOptions.icon}
     <i class={cellOptions.icon + " field-icon"}></i>
@@ -46,8 +45,6 @@
     class:placeholder={!value}
     style:justify-content={cellOptions.align}
   >
-    <span>
-      {formattedValue || value || placeholder}
-    </span>
+    <span>{formattedValue || value || placeholder}</span>
   </div>
 </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;
@@ -259,7 +261,7 @@
     },
     EditingCell: {
       _enter() {
-        $lockWidth = Math.max(viewport.clientWidth, 160);
+        $lockWidth = Math.max(viewport.clientWidth, 80);
         stbState.edit.debounce(30);
       },
       patchRow(index, id, rev, field, change) {

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

@@ -21,6 +21,8 @@
     $columnState == "EditingCell" &&
     ($columnSettings.highlighters == "vertical" ||
       $columnSettings.highlighters == "both");
+
+  $: console.log(isLast);
 </script>
 
 <div
@@ -32,6 +34,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 = () => {
@@ -88,8 +88,6 @@
   const onContextMenu = (e) => {
     stbAPI.showContextMenu(index, e.__root);
   };
-
-  $: console.log(height);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -102,7 +100,7 @@
   class:isEditing
   class:disabled
   class:isLast
-  style:min-height={height}
+  style:height
   style:color
   style:background-color={bgcolor}
   style:justify-content={$columnSettings.align}

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 {