@poirazis/supercomponents-shared 1.2.15 → 1.2.18

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -4,16 +4,17 @@
   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 } = getContext("sdk");
+  const { API, QueryUtils, fetchData, memo, derivedMemo, builderStore } =
+    getContext("sdk");
 
   export let cellOptions;
   export let value;
   export let fieldSchema;
   export let multi = true;
   export let autofocus;
-  export let label;
 
   let anchor;
   let editor;
@@ -72,11 +73,14 @@
     role,
     readonly,
     disabled,
+    direction,
     error,
     color,
     background,
   } = cellOptions);
 
+  $: inBuilder = $builderStore.inBuilder;
+
   // Handle Options from Data Source
   const dataSourceStore = memo(cellOptions?.datasource ?? {});
   $: dataSourceStore.set(cellOptions.datasource);
@@ -84,17 +88,19 @@
     filteredOptions.length == localValue.length && filteredOptions.length > 0;
 
   // React to property changes
-  $: cellState.refresh(
-    fieldSchema,
-    optionsSource,
-    labelColumn,
-    valueColumn,
-    iconColumn,
-    colorColumn,
-    $dataSourceStore,
-  );
+  $: if (inBuilder)
+    cellState.refresh(
+      fieldSchema,
+      optionsSource,
+      customOptions,
+      labelColumn,
+      valueColumn,
+      iconColumn,
+      colorColumn,
+    );
 
   $: cellState.syncFetch($fetch);
+  $: cellState.refresh($dataSourceStore);
 
   // We always keep an internal value as an array
   $: localValue = Array.isArray(value) ? value : value ? [value] : [];
@@ -103,6 +109,7 @@
   $: radios = controlType == "radio";
   $: isButtons = controlType == "buttons";
   $: allSelected = filteredOptions.length == localValue.length;
+  $: loading = $cellState == "Loading";
 
   const createFetch = (datasource) => {
     return fetchData({
@@ -126,9 +133,15 @@
         $options = [];
         return "Loading";
       },
+      loadOptions() {
+        if (optionsSource == "schema") this.loadSchemaOptions();
+        else if (optionsSource == "data") this.loadDataOptions($fetch?.rows);
+        else if (optionsSource == "custom") this.loadCustomOptions();
+      },
       loadSchemaOptions() {
         optionColors = fieldSchema?.optionColors || {};
         $options = fieldSchema?.constraints?.inclusion || [];
+        filteredOptions = $options;
       },
       loadDataOptions(rows) {
         if (rows && rows.length) {
@@ -141,6 +154,7 @@
           });
         }
         $options = $options;
+        filteredOptions = $options;
       },
       loadCustomOptions() {
         if (customOptions?.length) {
@@ -164,16 +178,10 @@
         }
       },
       _exit() {
-        if (optionsSource == "custom") this.loadCustomOptions();
-        else this.loadSchemaOptions();
-
-        filteredOptions = $options;
+        this.loadOptions();
       },
       syncFetch(fetch) {
-        console.log("syncFetch", fetch.loaded);
-        if (fetch.loaded) {
-          this.loadDataOptions(fetch.rows);
-          console.log("loaded options from data", $options);
+        if (fetch?.loaded) {
           return cellOptions.initialState || "View";
         }
       },
@@ -363,147 +371,141 @@
   bind:this={anchor}
   class="superCell multirow"
   tabindex={cellOptions?.disabled ? -1 : 0}
-  class:inEdit={inEdit && controlType != "buttons"}
+  class:inEdit={inEdit && !isButtons}
   class:isDirty={isDirty && cellOptions.showDirty}
   class:disabled
   class:readonly
   class:error
   style:color
   style:background
-  style:font-weight={cellOptions.fontWeight}
   class:inline={role == "inlineInput"}
   class:tableCell={role == "tableCell"}
   class:formInput={role == "formInput"}
-  class:naked-field={controlType == "buttons"}
+  class:naked-field={isButtons || role == "inlineInput"}
   on:focusin={cellState.focus}
   on:focusout={cellState.focusout}
   on:keydown={editorState.handleKeyboard}
 >
-  {#if $cellState == "Loading"}
-    <CellSkeleton>Initializing ..</CellSkeleton>
-  {:else 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 controlType == "radio" || controlType == "buttons"}
-    {#if isButtons}
-      <div class="buttons">
-        {#each $options as option, idx (idx)}
+  {#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="button"
-            class:selected={localValue?.includes(option)}
-            style:--option-color={$colors[option]}
-            on:click={() => editorState.toggleOption(idx)}
+            class="radios"
+            class:inline={role == "inlineInput"}
+            class:column={direction == "column"}
+            on:mouseleave={() => (focusedOptionIdx = -1)}
           >
-            {labels[option] || option}
+            {#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>
-        {/each}
-      </div>
-    {:else if radios}
-      <div
-        class="radios"
-        class:column={cellOptions.direction == "column"}
-        on:mouseleave={() => (focusedOptionIdx = -1)}
-      >
-        {#each $options as option, idx (idx)}
+        {: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="radio"
-            class:selected={localValue?.includes(option)}
-            class:focused={focusedOptionIdx === idx}
-            style:--option-color={$colors[option]}
-            on:mousedown={(e) => editorState.toggleOption(idx)}
-            on:mouseenter={() => (focusedOptionIdx = idx)}
+            class="switches"
+            class:inline={role == "inlineInput"}
+            class:column={cellOptions.direction == "column"}
+            on:mouseleave={() => (focusedOptionIdx = -1)}
           >
-            <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}
+            {#if cellOptions.toggleAll}
+              <div
+                class="switch toggle-all"
+                on:mouseenter={() => (focusedOptionIdx = -1)}
+              >
+                <div class="text">All</div>
+                {#if !(readonly || disabled)}
+                  <Switch
+                    checked={allSelected}
+                    disabled={readonly || disabled}
+                    size="small"
+                    on:change={() => editorState.toggleAll()}
+                  />
+                {/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>
+                <Switch
+                  checked={localValue.includes(option)}
+                  disabled={readonly || disabled}
+                  size="small"
+                  on:change={() => editorState.toggleOption(idx)}
+                />
+              </div>
+            {/each}
           </div>
-        {/each}
-      </div>
+        {/if}
+      {/key}
     {/if}
-
-    View
-  {:else if controlType == "switch"}
-    <div
-      class="radios"
-      class:formInput={role == "formInput"}
-      class:inlineInput={role == "inlineInput"}
-      class:column={cellOptions.direction == "column"}
-      on:mouseleave={() => (focusedOptionIdx = -1)}
-    >
-      {#if label || cellOptions.toggleAll}
-        <div
-          class="switch toggleAll"
-          on:click={cellOptions.toggleAll ? editorState.toggleAll : undefined}
-          on:mouseenter
-        >
-          <div class="text title">{label ?? "Toggle All"}</div>
-          {#if cellOptions.toggleAll && !(readonly || disabled)}
-            <div class="spectrum-Switch spectrum-Switch--emphasized">
-              <input
-                checked={allSelected}
-                type="checkbox"
-                class="spectrum-Switch-input"
-              />
-              <span class="spectrum-Switch-switch"></span>
-            </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
-              checked={localValue.includes(option)}
-              type="checkbox"
-              class="spectrum-Switch-input"
-              id={idx}
-            />
-            <span class="spectrum-Switch-switch small"> </span>
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
-
-  {$cellState}
+  {/key}
 </div>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -600,7 +602,7 @@
     flex: auto;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    gap: 0.25rem;
     justify-items: flex-start;
   }
 
@@ -608,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,
@@ -651,26 +659,15 @@
     display: flex;
     flex-wrap: wrap;
     justify-items: flex-start;
-    color: var(--spectrum-global-color-gray-700);
-    font-size: 13px;
-
-    &.formInput {
-      & > .switch {
-        padding: 0 0.5rem;
-      }
-    }
+    padding: 0.25rem 0.25rem;
+  }
 
-    &.inlineInput {
-      & > .switch {
-        padding: 0rem 0.25rem;
-        &.toggleAll {
-          margin-bottom: 0.25rem;
-          padding-bottom: 0.25rem;
-          border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-        }
-      }
-    }
+  .radios.inline {
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    padding: 0.25rem 0.25rem;
   }
+
   .radios.column {
     gap: 0rem;
     flex-direction: column;
@@ -683,25 +680,50 @@
     align-items: center;
     cursor: pointer;
     padding: 0 0.5rem;
+    opacity: 0.75;
+    border-radius: 0.25rem;
     &.focused {
       background-color: var(--spectrum-global-color-gray-200) !important;
       color: var(--spectrum-global-color-gray-800);
     }
 
+    &:hover > i {
+      color: var(--option-color, var(--spectrum-global-color-gray-700));
+      opacity: 1;
+    }
+
     &.selected {
       color: var(--spectrum-global-color-gray-800);
-      background-color: var(--spectrum-global-color-gray-100);
-      font-weight: 600;
+      opacity: 1;
     }
   }
 
+  .switches {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0.25rem 0.25rem;
+    overflow-y: auto;
+  }
+
+  .switches.inline {
+    padding: 0rem;
+  }
+
+  .switches.inline > .switch {
+    padding: 0.25rem 0.5rem;
+  }
+
   .switch {
     width: 100%;
     display: flex;
     gap: 0.35rem;
     align-items: center;
+    justify-content: space-between;
     cursor: pointer;
     height: 1.75rem;
+    padding: 0.25rem 0.5rem;
+    color: var(--spectrum-global-color-gray-700);
 
     & > i {
       color: var(--spectrum-global-color-gray-600);
@@ -717,17 +739,6 @@
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-      opacity: 0.95;
-
-      &.title {
-        font-size: 14px;
-        font-weight: 600;
-      }
-    }
-
-    &.toggleAll {
-      border-bottom: 1px solid var(--spectrum-global-color-gray-200);
-      height: 2rem;
     }
     &.focused {
       background-color: var(--spectrum-global-color-gray-200) !important;
@@ -747,8 +758,16 @@
     }
   }
 
+  .switch.toggle-all .text {
+    font-weight: 600;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   .switch > .spectrum-Switch {
     margin-right: unset !important;
+    --spectrum-switch-m-handle-border-color: var(
+      --spectrum-global-color-gray-500
+    ) !important;
   }
 
   .radio > i {

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/CellSkeleton.svelte

@@ -3,7 +3,7 @@
   export let minHeight = "2rem";
 </script>
 
-{#if active}
+{#if active == true}
   <div class="skeleton" style:min-height={minHeight}>
     <div class="children"></div>
   </div>