@poirazis/supercomponents-shared 1.2.16 → 1.2.19

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>
@@ -780,7 +807,7 @@
           {/if}
         {/if}
 
-        {#if filteredOptions?.length === 0 && $fetch.loaded}
+        {#if filteredOptions?.length === 0}
           <div class="option">
             <span>
               <i class="ri-close-line"></i>

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -4,6 +4,7 @@
   import SuperPopover from "../SuperPopover/SuperPopover.svelte";
   import SuperList from "../SuperList/SuperList.svelte";
   import CellSkeleton from "./CellSkeleton.svelte";
+  import Switch from "../UI/elements/Switch.svelte";
   import "./CellCommon.css";
   const dispatch = createEventDispatcher();
   const { API, QueryUtils, fetchData, memo, derivedMemo, builderStore } =
@@ -14,7 +15,6 @@
   export let fieldSchema;
   export let multi = true;
   export let autofocus;
-  export let label;
 
   let anchor;
   let editor;
@@ -386,128 +386,126 @@
   on:focusout={cellState.focusout}
   on:keydown={editorState.handleKeyboard}
 >
-  {#if loading}
-    <CellSkeleton />
-  {:else}
-    {#key controlType}
-      {#if controlType == "list"}
-        <SuperList
-          items={localValue}
-          itemsColors={$colors}
-          itemsLabels={labels}
-          showColors={cellOptions.optionsViewMode != "text"}
-          reorderOnly={cellOptions.reorderOnly}
-          placeholder={cellOptions.placeholder}
-          readonly={cellOptions.readonly || cellOptions.disabled}
-          {editorState}
-          {cellState}
-          {fullSelection}
-          bind:inactive
-          on:togglePicker={editorState.toggle}
-          on:clear={() => {
-            localValue = [];
-            editorState.close();
-            anchor.focus();
-          }}
-          on:change={(e) => {
-            localValue = [...e.detail];
-            anchor.focus();
-          }}
-        />
-      {:else if radios == true}
-        <div
-          class="radios"
-          class:inline={role == "inlineInput"}
-          class:column={direction == "column"}
-          on:mouseleave={() => (focusedOptionIdx = -1)}
-        >
-          {#each $options as option, idx}
-            <div
-              class="radio"
-              class:selected={localValue?.includes(option)}
-              class:focused={focusedOptionIdx === idx}
-              on:mousedown={(e) => editorState.toggleOption(idx)}
-              on:mouseenter={() => (focusedOptionIdx = idx)}
-            >
-              <i
-                style:color={$colors[option]}
-                class={radios && localValue.includes(option)
-                  ? "ph-fill ph-radio-button"
-                  : radios
-                    ? "ph ph-circle"
-                    : localValue.includes(option)
-                      ? "ph-fill ph-check-square"
-                      : "ph ph-square"}
-              ></i>
-              {labels[option] || option}
-            </div>
-          {/each}
-        </div>
-      {:else if isButtons == true}
-        <div class="buttons">
-          {#each $options as option, idx}
-            <div
-              class="button"
-              class:selected={localValue?.includes(option)}
-              style:--option-color={$colors[option]}
-              on:click={() => editorState.toggleOption(idx)}
-            >
-              {labels[option] || option}
-            </div>
-          {/each}
-        </div>
-      {:else if controlType == "switch"}
-        <div
-          class="switches"
-          class:inline={role == "inlineInput"}
-          class:column={cellOptions.direction == "column"}
-          on:mouseleave={() => (focusedOptionIdx = -1)}
-        >
-          {#if cellOptions.toggleAll}
-            <div
-              class="switch toggle-all"
-              on:click={editorState.toggleAll}
-              on:mouseenter={() => (focusedOptionIdx = -1)}
-            >
-              <div class="text">All</div>
-              {#if !(readonly || disabled)}
-                <div class="spectrum-Switch spectrum-Switch--emphasized">
-                  <input
+  {#key loading}
+    {#if loading}
+      <CellSkeleton />
+    {:else}
+      {#key controlType}
+        {#if controlType == "list"}
+          <SuperList
+            items={localValue}
+            itemsColors={$colors}
+            itemsLabels={labels}
+            showColors={cellOptions.optionsViewMode != "text"}
+            reorderOnly={cellOptions.reorderOnly}
+            placeholder={cellOptions.placeholder}
+            readonly={cellOptions.readonly || cellOptions.disabled}
+            {editorState}
+            {cellState}
+            {fullSelection}
+            bind:inactive
+            on:togglePicker={editorState.toggle}
+            on:clear={() => {
+              localValue = [];
+              editorState.close();
+              anchor.focus();
+            }}
+            on:change={(e) => {
+              localValue = [...e.detail];
+              anchor.focus();
+            }}
+          />
+        {:else if radios == true}
+          <div
+            class="radios"
+            class:inline={role == "inlineInput"}
+            class:column={direction == "column"}
+            on:mouseleave={() => (focusedOptionIdx = -1)}
+          >
+            {#each $options as option, idx}
+              <div
+                class="radio"
+                class:selected={localValue?.includes(option)}
+                class:focused={focusedOptionIdx === idx}
+                on:mousedown={(e) => editorState.toggleOption(idx)}
+                on:mouseenter={() => (focusedOptionIdx = idx)}
+              >
+                <i
+                  style:color={$colors[option]}
+                  class={radios && localValue.includes(option)
+                    ? "ph-fill ph-radio-button"
+                    : radios
+                      ? "ph ph-circle"
+                      : localValue.includes(option)
+                        ? "ph-fill ph-check-square"
+                        : "ph ph-square"}
+                ></i>
+                {labels[option] || option}
+              </div>
+            {/each}
+          </div>
+        {:else if isButtons == true}
+          <div class="buttons">
+            {#each $options as option, idx}
+              <div
+                class="button"
+                class:selected={localValue?.includes(option)}
+                style:--option-color={$colors[option]}
+                on:click={() => editorState.toggleOption(idx)}
+              >
+                {labels[option] || option}
+              </div>
+            {/each}
+          </div>
+        {:else if controlType == "switch"}
+          <div
+            class="switches"
+            class:inline={role == "inlineInput"}
+            class:column={cellOptions.direction == "column"}
+            on:mouseleave={() => (focusedOptionIdx = -1)}
+          >
+            {#if cellOptions.toggleAll}
+              <div
+                class="switch toggle-all"
+                on:mouseenter={() => (focusedOptionIdx = -1)}
+              >
+                <div class="text">All</div>
+                {#if !(readonly || disabled)}
+                  <Switch
                     checked={allSelected}
-                    type="checkbox"
-                    class="spectrum-Switch-input"
+                    disabled={readonly || disabled}
+                    size="small"
+                    on:change={() => editorState.toggleAll()}
                   />
-                  <span class="spectrum-Switch-switch"></span>
+                {/if}
+              </div>
+            {/if}
+            {#each $options as option, idx (idx)}
+              <div
+                class="switch"
+                class:selected={localValue.includes(option)}
+                class:focused={focusedOptionIdx === idx}
+                style:--option-color={$colors[option]}
+                on:mouseenter={() => (focusedOptionIdx = idx)}
+                on:click|stopPropagation={() => editorState.toggleOption(idx)}
+              >
+                <i class={optionIcons[option] || "no-icon"}></i>
+                <div class="text">
+                  {labels[option] || option}
                 </div>
-              {/if}
-            </div>
-          {/if}
-          {#each $options as option, idx (idx)}
-            <div
-              class="switch"
-              class:selected={localValue.includes(option)}
-              class:focused={focusedOptionIdx === idx}
-              style:--option-color={$colors[option]}
-              on:click={(e) => editorState.toggleOption(idx)}
-              on:mouseenter={() => (focusedOptionIdx = idx)}
-            >
-              <i class={optionIcons[option] || "no-icon"}></i>
-              <div class="text">{labels[option] || option}</div>
-              <div class="spectrum-Switch spectrum-Switch--emphasized">
-                <input
+                <Switch
                   checked={localValue.includes(option)}
-                  type="checkbox"
-                  class="spectrum-Switch-input"
-                  id={idx}
+                  disabled={readonly || disabled}
+                  size="small"
+                  on:change={() => editorState.toggleOption(idx)}
                 />
-                <span class="spectrum-Switch-switch small"> </span>
               </div>
-            </div>
-          {/each}
-        </div>
-      {/if}
-    {/key}
-  {/if}
+            {/each}
+          </div>
+        {/if}
+      {/key}
+    {/if}
+  {/key}
 </div>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -604,7 +602,7 @@
     flex: auto;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    gap: 0.25rem;
     justify-items: flex-start;
   }
 
@@ -612,34 +610,40 @@
     flex-direction: column;
     gap: 0.25rem;
   }
-  .buttons .button {
+  .buttons > .button {
     flex: none;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.25rem 0.75rem;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-75);
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 0.5rem;
+    background-color: var(--spectrum-global-color-gray-100);
     color: var(--spectrum-global-color-gray-600);
     cursor: pointer;
     user-select: none;
-    font-size: 12px;
-    font-weight: 500;
+    font-weight: 400;
     transition: all 0.15s ease-in-out;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 100%;
     gap: 0.35rem;
+    max-height: 1.75rem;
   }
 
   .button:hover {
-    background-color: var(--spectrum-global-color-gray-100);
+    background-color: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-gray-300);
-    color: var(--spectrum-global-color-gray-700);
+    color: var(--spectrum-global-color-gray-800);
     cursor: pointer;
   }
+
+  .button:active {
+    border-color: var(--spectrum-global-color-gray-500);
+    color: var(--spectrum-global-color-gray-800);
+  }
+
   .button.selected {
     background-color: var(
       --option-color,
@@ -703,9 +707,7 @@
   }
 
   .switches.inline {
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    padding: 0.25rem 0.25rem;
+    padding: 0rem;
   }
 
   .switches.inline > .switch {