@poirazis/supercomponents-shared 1.2.16 → 1.2.18

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 {

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>

package/src/lib/SuperTableCells/CellSQLLinkPicker.svelte

@@ -348,7 +348,7 @@
             </div>
           {/each}
 
-          {#if $optionsFetch && $optionsFetch.loaded}
+          {#if $optionsFetch}
             <!-- Unselected rows -->
             {#key localValue.length}
               {#each $optionsFetch.rows as row, idx (row[relatedField])}
@@ -370,14 +370,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;