@poirazis/supercomponents-shared 1.2.16 → 1.2.18

package/src/lib/SuperTableCells/CellLink.svelte

@@ -145,7 +145,13 @@
 
     if (singleSelect) {
       editorState.close();
-      anchor.focus();
+    }
+
+    if (cellOptions.debounced) {
+      dispatch(
+        "change",
+        returnSingle && localValue ? localValue[0] : localValue,
+      );
     }
   };
 
@@ -193,7 +199,7 @@
   class:open-popup={$editorState == "Open"}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  on:focusin={cellState.focus}
+  on:focus={cellState.focus}
   on:keydown|self={handleKeyboard}
   on:focusout={cellState.focusout}
   on:mousedown={cellState.toggle}
@@ -203,14 +209,12 @@
   {/if}
 
   <div class="value" class:placeholder={localValue?.length < 1}>
-    {#if localValue?.length < 1}
-      <span> {placeholder} </span>
-    {:else if simpleView}
+    {#if simpleView}
       <span>
         {#if cellOptions.role == "formInput" && localValue.length > 1}
           ({localValue.length})
         {/if}
-        {localValue.map((v) => v.primaryDisplay).join(", ")}
+        {localValue.map((v) => v.primaryDisplay).join(", ") || placeholder}
       </span>
     {:else}
       <div
@@ -221,7 +225,7 @@
         class:withCount={localValue.length > 5}
         class:inEdit
       >
-        {#each localValue as val, idx}
+        {#each localValue as val, idx (val)}
           {#if idx < 5}
             <div
               class="item"
@@ -238,6 +242,11 @@
             </div>
           {/if}
         {/each}
+
+        {#if localValue.length == 0}
+          <span>{placeholder}</span>
+        {/if}
+
         {#if localValue.length > 5}
           <span class="count">
             (+ {localValue.length - 5})

package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte

@@ -265,34 +265,38 @@
         <div class="list" bind:this={listElement} on:scroll={handleScroll}>
           <div class="options">
             {#key localValue}
-              {#if $fetch?.rows?.length || ($fetch?.loading && !$fetch?.loaded)}
-                {#each $fetch?.rows || [] as row, idx (idx)}
-                  <div
-                    class="option"
-                    class:selected={rowSelected(row)}
-                    class:highlighted={focusIdx == idx}
-                    on:mouseenter={() => (focusIdx = idx)}
-                    on:mouseleave={() => (focusIdx = -1)}
-                    on:mousedown|preventDefault|stopPropagation={selectRow(row)}
-                  >
-                    {row[primaryDisplay]}
-                    <i class="ri-check-line"></i>
-                  </div>
-                {/each}
-                {#if $fetch?.loading && $fetch.loaded}
+              {#key $fetch?.rows}
+                {#if $fetch?.rows?.length || ($fetch?.loading && !$fetch?.loaded)}
+                  {#each $fetch?.rows || [] as row, idx (idx)}
+                    <div
+                      class="option"
+                      class:selected={rowSelected(row)}
+                      class:highlighted={focusIdx == idx}
+                      on:mouseenter={() => (focusIdx = idx)}
+                      on:mouseleave={() => (focusIdx = -1)}
+                      on:mousedown|preventDefault|stopPropagation={selectRow(
+                        row,
+                      )}
+                    >
+                      {row[primaryDisplay]}
+                      <i class="ri-check-line"></i>
+                    </div>
+                  {/each}
+                  {#if $fetch?.loading && $fetch.loaded}
+                    <div class="option loading">
+                      <i class="ri-loader-2-line rotating"></i>
+                      Loading more...
+                    </div>
+                  {/if}
+                {:else if $fetch?.loading}
                   <div class="option loading">
                     <i class="ri-loader-2-line rotating"></i>
-                    Loading more...
+                    Loading...
                   </div>
+                {:else}
+                  <div class="option">No Results Found</div>
                 {/if}
-              {:else if $fetch?.loading}
-                <div class="option loading">
-                  <i class="ri-loader-2-line rotating"></i>
-                  Loading...
-                </div>
-              {:else}
-                <div class="option">No Results Found</div>
-              {/if}
+              {/key}
             {/key}
           </div>
         </div>

package/src/lib/SuperTableCells/CellLinkPickerTree.svelte

@@ -108,7 +108,7 @@
         $selectedNodes = [e.detail];
       } else {
         notificationStore.actions.warning(
-          "Cannot select more than " + maxNodeSelection + " items"
+          "Cannot select more than " + maxNodeSelection + " items",
         );
       }
     } else {
@@ -123,7 +123,7 @@
         "change",
         $selectedNodes.map((x) => {
           return { _id: x.id, primaryDisplay: x.label };
-        })
+        }),
       );
   };
 
@@ -183,24 +183,26 @@
     style="margin: unset;"
     class:spectrum-TreeView--quiet={quiet}
   >
-    {#if $fetch.loaded && $fetch.rows?.length}
-      {#each tree?.children as node, idx (idx)}
-        <SuperTree
-          tree={node}
-          nodeSelection
-          {selectedNodes}
-          on:nodeSelect={handleNodeSelect}
-        />
-      {/each}
-    {:else if $fetch.loading}
-      <li class="spectrum-TreeView-item" class:is-open={true}>
-        <div class="spectrum-TreeView-itemLink">Loading</div>
-      </li>
-    {:else}
-      <li class="spectrum-TreeView-item" class:is-open={true}>
-        <div class="spectrum-TreeView-itemLink">No Matches</div>
-      </li>
-    {/if}
+    {#key $fetch.rows}
+      {#if $fetch.loaded && $fetch.rows?.length}
+        {#each tree?.children as node, idx (idx)}
+          <SuperTree
+            tree={node}
+            nodeSelection
+            {selectedNodes}
+            on:nodeSelect={handleNodeSelect}
+          />
+        {/each}
+      {:else if $fetch.loading}
+        <li class="spectrum-TreeView-item" class:is-open={true}>
+          <div class="spectrum-TreeView-itemLink">Loading</div>
+        </li>
+      {:else}
+        <li class="spectrum-TreeView-item" class:is-open={true}>
+          <div class="spectrum-TreeView-itemLink">No Matches</div>
+        </li>
+      {/if}
+    {/key}
   </ul>
 </div>
 

package/src/lib/SuperTableCells/CellNumber.svelte

@@ -311,61 +311,63 @@
   tabIndex={disabled ? -1 : (cellOptions.order ?? 0)}
   on:focusin={cellState.focus}
 >
-  {#if icon}
-    <i class={icon + " field-icon"} class:with-error={error}></i>
-  {/if}
-
-  {#if $cellState == "Editing"}
-    <input
-      class="editor"
-      bind:this={editor}
-      class:placeholder={!localValue}
-      style:text-align={cellOptions.align == "flex-start"
-        ? "left"
-        : cellOptions.align == "center"
-          ? "center"
-          : "right "}
-      value={localValue || ""}
-      on:keydown={(e) => cellState.handleKeyboard(e)}
-      on:input={(e) => cellState.handleInput(e)}
-      on:focusout={(e) => cellState.focusout(e)}
-      on:wheel={(e) => cellState.handleWheel(e)}
-      use:focus
-    />
-
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <i
-      class="ri-close-line clear-icon"
-      class:visible={clearValue}
-      on:mousedown|preventDefault|stopPropagation={cellState.clear}
-    >
-    </i>
-
-    {#if showStepper}
-      <div class="controls">
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <i
-          class="ph ph-minus"
-          on:mousedown|preventDefault|stopPropagation={(e) =>
-            cellState.decrement(e)}
-        ></i>
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <i
-          class="ph ph-plus"
-          on:mousedown|preventDefault|stopPropagation={(e) =>
-            cellState.increment(e)}
-        ></i>
+  {#key $cellState}
+    {#if icon}
+      <i class={icon + " field-icon"} class:with-error={error}></i>
+    {/if}
+
+    {#if $cellState == "Editing"}
+      <input
+        class="editor"
+        bind:this={editor}
+        class:placeholder={!localValue}
+        style:text-align={cellOptions.align == "flex-start"
+          ? "left"
+          : cellOptions.align == "center"
+            ? "center"
+            : "right "}
+        value={localValue || ""}
+        on:keydown={(e) => cellState.handleKeyboard(e)}
+        on:input={(e) => cellState.handleInput(e)}
+        on:focusout={(e) => cellState.focusout(e)}
+        on:wheel={(e) => cellState.handleWheel(e)}
+        use:focus
+      />
+
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <i
+        class="ri-close-line clear-icon"
+        class:visible={clearValue}
+        on:mousedown|preventDefault|stopPropagation={cellState.clear}
+      >
+      </i>
+
+      {#if showStepper}
+        <div class="controls">
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <i
+            class="ph ph-minus"
+            on:mousedown|preventDefault|stopPropagation={(e) =>
+              cellState.decrement(e)}
+          ></i>
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <i
+            class="ph ph-plus"
+            on:mousedown|preventDefault|stopPropagation={(e) =>
+              cellState.increment(e)}
+          ></i>
+        </div>
+      {/if}
+    {:else}
+      <div
+        class="value"
+        class:placeholder={!value && value !== 0}
+        style:justify-content={cellOptions.align ?? "flex-end"}
+      >
+        {value != null ? formattedValue : placeholder || ""}
       </div>
     {/if}
-  {:else}
-    <div
-      class="value"
-      class:placeholder={!value && value !== 0}
-      style:justify-content={cellOptions.align ?? "flex-end"}
-    >
-      {value != null ? formattedValue : placeholder || ""}
-    </div>
-  {/if}
+  {/key}
 </div>
 
 <style>

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -100,6 +100,12 @@
           clearTimeout(timer);
           timer = setTimeout(() => {
             dispatch("change", multi ? localValue : localValue[0]);
+            dispatch(
+              "labelChange",
+              multi
+                ? localValue.map((val) => $labels[val] || val)
+                : $labels[localValue[0]] || localValue[0],
+            );
           }, cellOptions.debounce ?? 0);
         }
 
@@ -196,7 +202,6 @@
       },
       handleKeyboard(e) {
         if (e.key === "Backspace" || e.key === "Delete") {
-          console.log(searchTerm, "before deletion");
           searchTerm = searchTerm.slice(0, -1);
           this.filterOptions(searchTerm);
         } else if (e.key.length === 1 && /[a-zA-Z0-9]/.test(e.key)) {
@@ -379,6 +384,8 @@
         filteredOptions = $options;
       },
       loadCustomOptions() {
+        $options = [];
+        $labels = {};
         if (customOptions?.length) {
           customOptions.forEach((row) => {
             $options.push(row.value || row);
@@ -469,6 +476,12 @@
         if (cellOptions.debounce && isDirty) {
           clearTimeout(timer);
           dispatch("change", multi ? localValue : localValue[0]);
+          dispatch(
+            "labelChange",
+            multi
+              ? localValue.map((val) => $labels[val] || val)
+              : $labels[localValue[0]] || localValue[0],
+          );
         } else {
           this.submit();
         }
@@ -485,12 +498,24 @@
         if (isDirty && !cellOptions.debounce) {
           if (multi) dispatch("change", localValue);
           else dispatch("change", localValue[0]);
+
+          if (multi) {
+            dispatch(
+              "labelChange",
+              localValue.map((val) => $labels[val] || val),
+            );
+          } else {
+            dispatch("labelChange", $labels[localValue[0]] || localValue[0]);
+          }
         }
       },
       clear() {
         localValue = [];
         anchor?.focus();
-        if (cellOptions.debounce) dispatch("change", null);
+        if (cellOptions.debounce) {
+          dispatch("change", null);
+          dispatch("labelChange", null);
+        }
       },
       cancel() {
         localValue = JSON.parse(originalValue);
@@ -674,38 +699,40 @@
     </div>
   {:else}
     <div class="value" class:placeholder={isEmpty && !searchTerm}>
-      {#if isEmpty}
-        {#if open}
-          {searchTerm ? searchTerm : "Type to search..."}
-        {:else}
-          {loading ? "Loading..." : placeholder}
-        {/if}
-      {:else}
-        <div
-          class="items"
-          class:pills
-          class:bullets
-          style:justify-content={cellOptions.align ?? "flex-start"}
-        >
-          {#if plaintext}
-            {#each localValue as val, idx (val)}
-              {$labels[val] || val}
-              {idx < localValue.length - 1 ? ", " : ""}
-            {/each}
+      {#key isEmpty}
+        {#if localValue?.length < 1}
+          {#if open}
+            {searchTerm ? searchTerm : "Type to search..."}
           {:else}
-            {#each localValue as val, idx}
-              <div
-                class="item"
-                style:--option-color={$colors[val] ||
-                  colorsArray[idx % colorsArray.length]}
-              >
-                <div class="loope"></div>
-                <span> {isObjects ? "JSON" : $labels[val] || val} </span>
-              </div>
-            {/each}
+            {loading ? "Loading..." : placeholder}
           {/if}
-        </div>
-      {/if}
+        {:else}
+          <div
+            class="items"
+            class:pills
+            class:bullets
+            style:justify-content={cellOptions.align ?? "flex-start"}
+          >
+            {#if plaintext}
+              {#each localValue as val, idx (val)}
+                {$labels[val] || val}
+                {idx < localValue.length - 1 ? ", " : ""}
+              {/each}
+            {:else}
+              {#each localValue as val, idx (val)}
+                <div
+                  class="item"
+                  style:--option-color={$colors[val] ||
+                    colorsArray[idx % colorsArray.length]}
+                >
+                  <div class="loope"></div>
+                  <span> {isObjects ? "JSON" : $labels[val] || val} </span>
+                </div>
+              {/each}
+            {/if}
+          </div>
+        {/if}
+      {/key}
     </div>
     {#if !readonly && (role == "formInput" || inEdit)}
       <i class="ph ph-caret-down control-icon"></i>