@poirazis/supercomponents-shared 1.2.15 → 1.2.18

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>