@poirazis/supercomponents-shared 1.2.11 → 1.2.13

package/src/lib/SuperTableCells/CellLink.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { getContext, createEventDispatcher } from "svelte";
   import fsm from "svelte-fsm";
   import SuperPopover from "../SuperPopover/SuperPopover.svelte";
   import CellLinkPickerSelect from "./CellLinkPickerSelect.svelte";
@@ -50,15 +50,17 @@
         dispatch("exitedit");
       },
       focusout(e) {
-        if (
-          anchor?.contains(e?.relatedTarget) ||
-          popup?.contains(e?.relatedTarget)
-        )
-          return;
-
+        if (popup?.contains(e?.relatedTarget)) return;
         this.submit();
       },
-
+      popupfocusout(e) {
+        if (anchor != e?.relatedTarget) {
+          this.submit();
+        }
+      },
+      toggle(e) {
+        editorState.toggle();
+      },
       clear() {
         localValue = [];
       },
@@ -66,14 +68,14 @@
         if (isDirty)
           dispatch(
             "change",
-            returnSingle && localValue ? localValue[0] : localValue
+            returnSingle && localValue ? localValue[0] : localValue,
           );
 
         return "View";
       },
-      cancel() {
+      cancel(e) {
         localValue = JSON.parse(originalValue);
-        anchor?.blur();
+        anchor.blur();
         return "View";
       },
     },
@@ -176,7 +178,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="superCell"
+  class="superCell has-popup"
   tabindex={cellOptions?.disabled ? -1 : 0}
   bind:this={anchor}
   class:isDirty={isDirty && cellOptions.showDirty}
@@ -188,12 +190,13 @@
   class:disabled={cellOptions.disabled}
   class:readonly
   class:error={cellOptions.error}
+  class:open-popup={$editorState == "Open"}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  on:mousedown={editorState.toggle}
   on:focusin={cellState.focus}
   on:keydown|self={handleKeyboard}
   on:focusout={cellState.focusout}
+  on:mousedown={cellState.toggle}
 >
   {#if cellOptions?.icon}
     <i class={cellOptions.icon + " field-icon"}></i>
@@ -221,7 +224,9 @@
                   }
                 : null}
             >
-              <i class={valueIcon}></i>
+              {#if isUser}
+                <i class={valueIcon}></i>
+              {/if}
               <span>{val.primaryDisplay}</span>
             </div>
           {/if}
@@ -247,16 +252,11 @@
 </div>
 
 {#if inEdit}
-  <SuperPopover
-    {anchor}
-    useAnchorWidth
-    open={$editorState == "Open"}
-    on:close={cellState.cancel}
-    bind:popup
-  >
+  <SuperPopover {anchor} useAnchorWidth open={$editorState == "Open"}>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="picker-container"
+      bind:this={popup}
       on:keydown={(e) => {
         if (e.key == "Escape" || e.key == "Tab") {
           anchor.focus();
@@ -288,6 +288,7 @@
           {search}
           wide={cellOptions.wide && !singleSelect}
           on:change={handleChange}
+          on:focusout={cellState.popupfocusout}
         />
       {/if}
     </div>

package/src/lib/SuperTableCells/CellLinkAdvanced.svelte

@@ -58,7 +58,7 @@
         if (isDirty)
           dispatch(
             "change",
-            returnSingle && localValue ? localValue[0] : localValue
+            returnSingle && localValue ? localValue[0] : localValue,
           );
         editorState.close();
         return "View";
@@ -178,14 +178,10 @@
   on:mousedown={editorState.toggle}
 >
   {#if cellOptions?.icon}
-    <i class={cellOptions.icon + " icon"}></i>
+    <i class={cellOptions.icon + " field-icon"}></i>
   {/if}
 
-  <div
-    class="value"
-    class:with-icon={cellOptions?.icon}
-    class:placeholder={localValue?.length < 1}
-  >
+  <div class="value" class:placeholder={localValue?.length < 1}>
     {#if localValue?.length < 1}
       <span>
         {cellOptions.placeholder ?? null}

package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte

@@ -76,7 +76,7 @@
   const unselectRow = (val) => {
     localValue.splice(
       localValue.findIndex((e) => e._id === val._id),
-      1
+      1,
     );
     localValue = localValue;
     dispatch("change", localValue);
@@ -132,7 +132,9 @@
   };
 
   const handleNavigation = (e) => {
-    if (e.key == "ArrowDown") {
+    if (e.key == "Escape") {
+      dispatch("close");
+    } else if (e.key == "ArrowDown") {
       e.preventDefault();
       focusIdx += 1;
       if (focusIdx > $fetch.rows.length - 1) focusIdx = 0;
@@ -191,6 +193,7 @@
         : "Search"}
       on:input={handleSearch}
       on:keydown={handleNavigation}
+      on:focusout
     />
   </div>
 
@@ -209,7 +212,7 @@
                       on:mouseenter={() => (focusIdx = idx)}
                       on:mouseleave={() => (focusIdx = -1)}
                       on:mousedown|preventDefault|stopPropagation={selectRow(
-                        row
+                        row,
                       )}
                     >
                       {row[primaryDisplay]}
@@ -243,7 +246,7 @@
                     transition:fly={{ x: -20, duration: 130 }}
                     class="option wide selected"
                     on:mousedown|stopPropagation|preventDefault={unselectRow(
-                      val
+                      val,
                     )}
                   >
                     {val.primaryDisplay}

package/src/lib/SuperTableCells/CellNumber.svelte

@@ -7,18 +7,11 @@
   } from "svelte";
   import fsm from "svelte-fsm";
 
-  /**
-   * @typedef {import('./types.js').CellOptions} CellOptions
-   * @typedef {import('./types.js').CellApi} CellApi
-   */
-
   const { processStringSync } = getContext("sdk");
   const context = getContext("context");
   const dispatch = createEventDispatcher();
 
-  /** @type {number | null} */
   export let value;
-  /** @type {CellOptions} */
   export let cellOptions = {};
   export let autofocus = false;
 
@@ -48,15 +41,10 @@
     decimals,
     thousandsSeparator,
     role,
+    calculated,
   } = cellOptions ?? {});
 
   // Helper function to format number with thousands separator
-  /**
-   * @param {number | string | null | undefined} num
-   * @param {string | undefined} separator
-   * @param {number | undefined} decimals
-   * @returns {string}
-   */
   function formatNumber(num, separator, decimals) {
     // Parse string to number if needed
     const parsedNum = typeof num === "string" ? parseFloat(num) : num;
@@ -90,11 +78,12 @@
   $: formattedValue = template
     ? processStringSync(template, {
         ...$context,
-        value,
+        value: formatNumber(displayValue, thousandsSeparator, decimals),
       })
     : formatNumber(displayValue, thousandsSeparator, decimals);
 
   $: stepValue = stepSize ?? 1;
+  $: clearValue = cellOptions.clearValue && cellOptions.role != "tableCell";
 
   // Reset when value changes externally
   $: cellState.reset(value);
@@ -119,7 +108,7 @@
         return state;
       },
       focus() {
-        if (!readonly && !disabled) return "Editing";
+        if (!readonly && !disabled && !calculated) return "Editing";
       },
     },
     Editing: {
@@ -275,7 +264,6 @@
     },
   });
 
-  /** @type {CellApi} */
   export const cellApi = {
     focus: () => cellState.focus(),
     reset: () => cellState.reset(value),
@@ -320,7 +308,7 @@
   class:formInput={role == "formInput"}
   style:color
   style:background
-  tabIndex={disabled ? -1 : 0}
+  tabIndex={disabled ? -1 : (cellOptions.order ?? 0)}
   on:focusin={cellState.focus}
 >
   {#if icon}
@@ -344,12 +332,15 @@
       on:wheel={(e) => cellState.handleWheel(e)}
       use:focus
     />
+
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <i
-      class="ri-close-line clear-icon visible"
+      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 -->
@@ -369,7 +360,6 @@
   {:else}
     <div
       class="value"
-      style:padding-right={"12px"}
       class:placeholder={!value && value !== 0}
       style:justify-content={cellOptions.align ?? "flex-end"}
     >
@@ -380,22 +370,27 @@
 
 <style>
   .controls {
+    height: 100%;
     display: flex;
     flex-direction: row;
+    align-items: stretch;
     gap: 0.25rem;
-    padding-right: 0.5rem;
-    margin-left: -0.25rem;
+    padding: 0.25rem 0rem;
   }
 
   .controls i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    padding: 0.15rem;
+    padding: 0.25rem;
     background-color: var(--spectrum-global-color-gray-100);
     border-radius: 0.25rem;
     transition: all 0.2s ease-in-out;
   }
 
   .controls i:hover {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-300);
+    color: var(--spectrum-global-color-gray-900);
   }
 </style>

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -106,6 +106,7 @@
     View: {
       _enter() {
         searchTerm = null;
+        editorState.filterOptions();
       },
       focus(e) {
         if (!readonly && !disabled) {
@@ -115,23 +116,22 @@
     },
     Editing: {
       _enter() {
+        editorState.open();
         originalValue = JSON.stringify(
-          Array.isArray(value) ? value : value ? [value] : []
+          Array.isArray(value) ? value : value ? [value] : [],
         );
         inputValue = multi ? "" : labels[localValue[0]] || localValue[0] || "";
-        // Open the popup if the focus in came from a TAB
-        editorState.open();
+
         dispatch("enteredit");
       },
       _exit() {
         editorState.close();
-        editorState.filterOptions();
         dispatch("exitedit");
       },
+      toggle(e) {
+        editorState.toggle();
+      },
       focusout(e) {
-        // If the focus is moving to the search input inside the popup, ignore
-        if (anchor.contains(e.relatedTarget)) return;
-
         dispatch("focusout");
 
         // For debounced inputs, dispatch the current value immediately on focusout
@@ -144,6 +144,12 @@
 
         return "View";
       },
+      popupfocusout(e) {
+        if (anchor != e?.relatedTarget) {
+          this.submit();
+          return "View";
+        }
+      },
       submit() {
         if (isDirty && !cellOptions.debounce) {
           if (multi) dispatch("change", localValue);
@@ -230,7 +236,7 @@
           // Client-side filtering for non-datasource
           if (term) {
             filteredOptions = $options.filter((x) =>
-              x?.toLocaleLowerCase().startsWith(term.toLocaleLowerCase())
+              x?.toLocaleLowerCase().startsWith(term.toLocaleLowerCase()),
             );
           } else {
             filteredOptions = $options;
@@ -344,11 +350,8 @@
         searchTerm = null;
         focusedOptionIdx = -1;
       },
-      toggle(e) {
-        if (inEdit) {
-          e.preventDefault();
-          return "Open";
-        }
+      toggle() {
+        return "Open";
       },
       open() {
         return "Open";
@@ -403,7 +406,7 @@
     $options.forEach(
       (option, index) =>
         (obj[option] =
-          optionColors[option] ?? colorsArray[index % colorsArray.length])
+          optionColors[option] ?? colorsArray[index % colorsArray.length]),
     );
     return obj;
   });
@@ -441,7 +444,7 @@
   ];
 
   let originalValue = JSON.stringify(
-    Array.isArray(value) ? value : value ? [value] : []
+    Array.isArray(value) ? value : value ? [value] : [],
   );
 
   $: ({
@@ -492,7 +495,7 @@
     iconColumn,
     colorColumn,
     $dataSourceStore,
-    customOptions
+    customOptions,
   );
 
   // We always keep an internal value as an array
@@ -505,6 +508,8 @@
   $: isDirty = inEdit && originalValue !== JSON.stringify(localValue);
   $: inEdit = $cellState == "Editing";
   $: pills = optionsViewMode == "pills";
+  $: bullets = optionsViewMode == "bullets";
+
   $: multi =
     fieldSchema && fieldSchema.type ? fieldSchema.type == "array" : multi;
 
@@ -542,11 +547,12 @@
   class:inline={role == "inlineInput"}
   class:tableCell={role == "tableCell"}
   class:formInput={role == "formInput"}
-  style:cursor={inEdit ? "pointer" : "default"}
+  class:has-popup={controlType == "select"}
+  class:open-popup={open}
   on:focusin={cellState.focus}
   on:focusout={cellState.focusout}
   on:keydown={editorState.handleKeyboard}
-  on:mousedown={editorState.toggle}
+  on:mousedown={cellState.toggle}
 >
   {#if icon}
     <i class={icon + " field-icon"} class:active={searchTerm}></i>
@@ -593,7 +599,7 @@
       use:focus
       {placeholder}
     />
-    <div class="action-icon" on:click={editorState.toggle}>
+    <div class="control-icon" on:click={editorState.toggle}>
       <i class="ph ph-caret-down"></i>
     </div>
   {:else}
@@ -612,7 +618,7 @@
         <div
           class="items"
           class:pills
-          class:colorText={optionsViewMode == "colorText"}
+          class:bullets
           style:justify-content={cellOptions.align ?? "flex-start"}
         >
           {#each localValue as val, idx (val)}
@@ -621,7 +627,7 @@
               style:--option-color={$colors[val] ||
                 colorsArray[idx % colorsArray.length]}
             >
-              <i class={"ph-fill ph-square"}></i>
+              <div class="loope"></div>
               <span> {isObjects ? "JSON" : labels[val] || val} </span>
             </div>
           {/each}
@@ -629,7 +635,7 @@
       {/if}
     </div>
     {#if !readonly && (role == "formInput" || inEdit)}
-      <i class="ph ph-caret-down control-icon"></i>
+      <i class="ph ph-caret-down control-icon" on:mousedown></i>
     {/if}
   {/if}
 </div>
@@ -772,21 +778,6 @@
     font-style: italic;
   }
 
-  .action-icon {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-left: 1px solid var(--spectrum-global-color-blue-500);
-    min-width: 2rem;
-    font-size: 16px;
-  }
-  .action-icon:hover {
-    cursor: pointer;
-    background-color: var(--spectrum-global-color-gray-75);
-    font-weight: 800;
-  }
-
   .search-icon {
     font-size: 16px;
     color: var(--spectrum-global-color-gray-500);
@@ -813,4 +804,15 @@
     width: 100%;
     overflow: hidden;
   }
+
+  .loope {
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    background-color: var(
+      --option-color,
+      var(--spectrum-global-color-gray-300)
+    );
+    flex-shrink: 0;
+  }
 </style>