@poirazis/supercomponents-shared 1.2.14 → 1.2.16

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -6,7 +6,8 @@
   import CellSkeleton from "./CellSkeleton.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;
@@ -27,13 +28,14 @@
   let picker;
   let inactive = true;
   let allSelected = false;
+  let fetch;
 
   const colors = derivedMemo(options, ($options) => {
     let obj = {};
     if (cellOptions.optionsSource == "custom") return obj;
     $options.forEach(
       (option, index) =>
-        (obj[option] = optionColors[option] ?? colorsArray[index % 14])
+        (obj[option] = optionColors[option] ?? colorsArray[index % 14]),
     );
     return obj;
   });
@@ -57,7 +59,7 @@
   ];
 
   let originalValue = JSON.stringify(
-    Array.isArray(value) ? value : value ? [value] : []
+    Array.isArray(value) ? value : value ? [value] : [],
   );
 
   $: ({
@@ -71,33 +73,34 @@
     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);
-  $: fetch =
-    optionsSource == "data"
-      ? createFetch($dataSourceStore)
-      : memo({ loaded: true });
   $: fullSelection =
     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] : [];
@@ -106,6 +109,20 @@
   $: radios = controlType == "radio";
   $: isButtons = controlType == "buttons";
   $: allSelected = filteredOptions.length == localValue.length;
+  $: loading = $cellState == "Loading";
+
+  const createFetch = (datasource) => {
+    return fetchData({
+      API,
+      datasource,
+      options: {
+        query: QueryUtils.buildQuery(cellOptions.filter),
+        sortColumn: cellOptions.sortColumn,
+        sortOrder: cellOptions.sortOrder,
+        limit: cellOptions.limit || 1000,
+      },
+    });
+  };
 
   export let cellState = fsm("Loading", {
     "*": {
@@ -116,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) {
@@ -131,6 +154,7 @@
           });
         }
         $options = $options;
+        filteredOptions = $options;
       },
       loadCustomOptions() {
         if (customOptions?.length) {
@@ -147,18 +171,17 @@
     },
     Loading: {
       _enter() {
-        if (cellOptions.optionsSource != "data" || $fetch?.loaded)
+        if (cellOptions.optionsSource != "data")
           this.goTo.debounce(10, cellOptions.initialState || "View");
+        else {
+          fetch = createFetch($dataSourceStore);
+        }
       },
       _exit() {
-        if (optionsSource == "custom") this.loadCustomOptions();
-        else if (optionsSource == "data") this.loadDataOptions($fetch?.rows);
-        else this.loadSchemaOptions();
-
-        filteredOptions = $options;
+        this.loadOptions();
       },
-      syncFetch() {
-        if ($fetch?.loaded) {
+      syncFetch(fetch) {
+        if (fetch?.loaded) {
           return cellOptions.initialState || "View";
         }
       },
@@ -174,7 +197,7 @@
     Editing: {
       _enter() {
         originalValue = JSON.stringify(
-          Array.isArray(value) ? value : value ? [value] : []
+          Array.isArray(value) ? value : value ? [value] : [],
         );
 
         dispatch("enteredit");
@@ -284,7 +307,7 @@
       filterOptions(e) {
         if (e && e.target.value != "") {
           filteredOptions = $options.filter((x) =>
-            x?.startsWith(e.target.value)
+            x?.startsWith(e.target.value),
           );
         } else filteredOptions = $options;
       },
@@ -332,19 +355,6 @@
     },
   });
 
-  const createFetch = (datasource) => {
-    return fetchData({
-      API,
-      datasource,
-      options: {
-        query: QueryUtils.buildQuery(cellOptions.filter),
-        sortColumn: cellOptions.sortColumn,
-        sortOrder: cellOptions.sortOrder,
-        limit: cellOptions.limit || 1000,
-      },
-    });
-  };
-
   onMount(() => {
     if (autofocus)
       setTimeout(() => {
@@ -361,142 +371,142 @@
   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)}
-          <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 radios}
-      <div
-        class="radios"
-        class:column={cellOptions.direction == "column"}
-        on:mouseleave={() => (focusedOptionIdx = -1)}
-      >
-        {#each $options as option, idx (idx)}
-          <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)}
-          >
-            <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>
-    {/if}
-  {: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}
+  {#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="switch toggleAll"
-          on:click={cellOptions.toggleAll ? editorState.toggleAll : undefined}
-          on:mouseenter
+          class="radios"
+          class:inline={role == "inlineInput"}
+          class:column={direction == "column"}
+          on:mouseleave={() => (focusedOptionIdx = -1)}
         >
-          <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>
+          {#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>
-          {/if}
+          {/each}
         </div>
-      {/if}
-      {#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="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)}
+          class="switches"
+          class:inline={role == "inlineInput"}
+          class:column={cellOptions.direction == "column"}
+          on:mouseleave={() => (focusedOptionIdx = -1)}
         >
-          <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>
+          {#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
+                    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>
-      {/each}
-    </div>
+      {/if}
+    {/key}
   {/if}
 </div>
 
@@ -645,26 +655,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;
@@ -677,25 +676,52 @@
     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 {
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    padding: 0.25rem 0.25rem;
+  }
+
+  .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);
@@ -711,17 +737,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;
@@ -741,8 +756,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/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>

package/src/lib/SuperTableCells/CellString.svelte

@@ -25,7 +25,7 @@
 
   // Local state
   let timer;
-  let editor;
+
   let lastEdit;
   let localValue = value;
   let state =
@@ -90,25 +90,20 @@
     },
     Editing: {
       _enter() {
-        setTimeout(() => {
-          editor?.focus();
-        }, 50);
         dispatch("enteredit");
       },
       _exit() {
         lastEdit = undefined;
         dispatch("exitedit");
       },
-      focus() {
-        editor?.focus();
-      },
+      focus() {},
       clear() {
         if (debounceDelay) {
           dispatch("change", null);
         }
         lastEdit = new Date();
         localValue = null;
-        editor?.focus();
+
         dispatch("clear", null);
       },
       focusout(e) {
@@ -212,24 +207,17 @@
   {#if inEdit}
     {#if textarea}
       <textarea
-        bind:this={editor}
         tabindex="0"
-        class="editor textarea"
         class:placeholder={!value && !formattedValue && !localValue}
         placeholder={cellOptions?.placeholder ?? ""}
-        style:text-align={cellOptions.align == "center"
-          ? "center"
-          : cellOptions.align == "flex-end"
-            ? "right"
-            : "left"}
+        value={localValue ?? ""}
         on:input={cellState.debounce}
         on:focusout={cellState.focusout}
         on:keydown={cellState.handleKeyboard}
-        use:focus>{localValue ?? ""}</textarea
-      >
+        use:focus
+      ></textarea>
     {:else}
       <input
-        bind:this={editor}
         tabindex="0"
         class="editor"
         class:placeholder={!value && !formattedValue && !localValue}
@@ -251,39 +239,31 @@
         on:mousedown|self|preventDefault={cellState.clear}
       ></i>
     {/if}
-  {:else if textarea}
-    <div
-      class="value textarea"
-      class:placeholder={!value && !formattedValue}
-      style:justify-content={cellOptions.align}
-    >
-      {formattedValue || value || placeholder}
-    </div>
   {:else}
     <div
       class="value"
-      class:placeholder={!value}
+      class:textarea
+      class:placeholder={!value && !formattedValue}
       style:justify-content={cellOptions.align}
     >
-      <span>
-        {formattedValue || value || placeholder}
-      </span>
+      <span>{formattedValue || value || placeholder}</span>
     </div>
   {/if}
 </div>
 
 <style>
-  .value.textarea {
-    flex: 1 0 auto;
-    display: flex;
-    align-items: flex-start;
-    white-space: pre-wrap;
-    padding: 0.5rem 0rem;
+  textarea {
+    all: inherit;
+    flex: 1;
+    min-height: 100%;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background-color: transparent;
     overflow-y: auto;
   }
 
-  .textarea.placeholder {
-    color: var(--spectrum-global-color-gray-500);
-    font-style: italic;
+  textarea:focus {
+    outline: none;
+    border: none;
   }
 </style>