@poirazis/supercomponents-shared 1.0.26 → 1.0.28

package/src/lib/SuperTableCells/CellDatetime.svelte

@@ -6,8 +6,6 @@
   const { processStringSync } = getContext("sdk");
   import fsm from "svelte-fsm";
 
-  const context = getContext("context");
-
   export let value;
   export let formattedValue;
   export let cellOptions;
@@ -54,7 +52,10 @@
         }
       },
       focusout(e) {
-        if (!picker?.contains(e.relatedTarget)) {
+        const isInPicker = picker?.contains(e.relatedTarget);
+        const isInTimePicker = timePicker?.contains(e.relatedTarget);
+
+        if (!isInPicker && !isInTimePicker) {
           open = false;
           if (value != originalValue) {
             dispatch("change", value);
@@ -73,10 +74,81 @@
 
   let anchor;
   let picker;
+  let timePicker;
   let open;
 
+  // Current date format and showTime - extracted to ensure reactivity
+  $: currentDateFormat = cellOptions?.dateFormat;
+  $: currentShowTime = cellOptions?.showTime;
+
+  // Time value (format: HH:mm)
+  $: timeValue = currentShowTime && value ? getTimeFromValue() : "00:00";
+
   $: innerDate = value ? new Date(value) : new Date();
 
+  // Extract time from current value if it exists
+  function getTimeFromValue() {
+    if (!value) return "00:00";
+    const date = new Date(value);
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+  }
+
+  // Date formatting helper function
+  function formatDate(date, dateFormat) {
+    if (!dateFormat || dateFormat === "default") {
+      return date.toDateString();
+    }
+
+    // Manual formatting for specific formats to ensure exact order
+    if (dateFormat === "MM/DD/YYYY") {
+      return `${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}/${date.getFullYear()}`;
+    }
+
+    if (dateFormat === "DD/MM/YYYY") {
+      return `${date.getDate().toString().padStart(2, "0")}/${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getFullYear()}`;
+    }
+
+    if (dateFormat === "YYYY-MM-DD") {
+      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+    }
+
+    // For shorter formats, still use locale-specific formatting
+    const options = {
+      "MMM DD, YYYY": {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        timeZone: "UTC",
+      },
+      "DD MMM YYYY": {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        timeZone: "UTC",
+      },
+    };
+
+    const formatOption = options[dateFormat];
+    if (formatOption) {
+      return date.toLocaleDateString("en-US", formatOption);
+    }
+
+    // Fallback to default
+    return date.toDateString();
+  }
+
+  // DateTime formatting helper function
+  function formatDateTime(date, dateFormat, showTime) {
+    if (!showTime) {
+      return formatDate(date, dateFormat);
+    }
+
+    const formattedDate = formatDate(date, dateFormat);
+    const timeString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+
+    return `${formattedDate} ${timeString}`;
+  }
+
   $: formattedValue =
     cellOptions.template && value
       ? processStringSync(cellOptions.template, { value })
@@ -98,6 +170,22 @@
         editor?.focus();
       }, 30);
   });
+
+  // Handle time picker changes
+  const handleTimeChange = (e) => {
+    if (!value || !currentShowTime) return;
+
+    const newTime = e.target.value;
+    const currentDate = new Date(value);
+    const [hours, minutes] = newTime.split(":").map(Number);
+
+    // Update the date with the new time
+    currentDate.setHours(hours, minutes, 0, 0);
+    value = currentDate.toISOString();
+
+    // Keep the popover open for time changes
+    dispatch("change", value);
+  };
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -131,11 +219,19 @@
       class="editor"
       class:with-icon={cellOptions.icon}
       class:placeholder={!value && !formattedValue}
-      {value}
-      placeholder={cellOptions?.placeholder ?? ""}
       on:click={() => (open = !open)}
     >
-      {formattedValue || innerDate?.toDateString() || cellOptions?.placeholder}
+      {#if formattedValue}
+        {formattedValue}
+      {:else if value}
+        {currentDateFormat
+          ? formatDateTime(innerDate, currentDateFormat, currentShowTime)
+          : currentShowTime
+            ? innerDate?.toDateString() + " " + timeValue
+            : innerDate?.toDateString()}
+      {:else}
+        {cellOptions?.placeholder}
+      {/if}
       <i
         class="ri-calendar-line"
         style="font-size: 16px; justify-self: flex-end"
@@ -152,7 +248,11 @@
         {formattedValue
           ? formattedValue
           : value
-            ? innerDate?.toDateString()
+            ? currentDateFormat
+              ? formatDateTime(innerDate, currentDateFormat, currentShowTime)
+              : currentShowTime
+                ? innerDate?.toDateString() + " " + timeValue
+                : innerDate?.toDateString()
             : placeholder}
       </span>
     </div>
@@ -163,7 +263,8 @@
   <SuperPopover {anchor} dismissible={false} {open} align="right">
     <div
       bind:this={picker}
-      style:--date-picker-background="var(--spectrum-alias-background-color-default)"
+      class="datetime-picker-container"
+      style:--date-picker-background="var(--spectrum-global-color-gray-75)"
       style:--date-picker-foreground="var(--spectrum-global-color-gray-800)"
       style:--date-picker-selected-background="var(--accent-color)"
     >
@@ -175,6 +276,58 @@
           open = false;
         }}
       />
+
+      {#if currentShowTime}
+        <div class="time-section">
+          <!-- svelte-ignore a11y-label-has-associated-control -->
+          <input
+            bind:this={timePicker}
+            type="time"
+            bind:value={timeValue}
+            on:change={handleTimeChange}
+            class="time-input"
+            step="900"
+          />
+        </div>
+      {/if}
     </div>
   </SuperPopover>
 {/if}
+
+<style>
+  .datetime-picker-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0.5rem;
+    border-radius: 8px;
+    z-index: 1000;
+  }
+  .time-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .time-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .time-input {
+    padding: 6px 8px;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    font-size: 14px;
+    min-width: 120px;
+    background: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-global-color-gray-800);
+  }
+
+  .time-input:focus {
+    outline: none;
+    border-color: var(--spectrum-global-color-blue-500);
+    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
+  }
+</style>

package/src/lib/SuperTableCells/CellLink.svelte

@@ -28,6 +28,9 @@
       goTo(state) {
         return state;
       },
+      reset(val) {
+        localValue = undefined;
+      },
     },
     View: {
       _enter() {},
@@ -57,6 +60,8 @@
         dispatch("exitedit");
       },
       focusout(e) {
+        console.log("Focus out", e, popup);
+
         if (popup?.contains(e?.relatedTarget)) return;
         this.submit();
       },
@@ -106,6 +111,7 @@
   $: links = cellOptions.relViewMode == "links" && !isUser;
 
   $: localValue = enrichValue(value);
+
   $: inEdit = $cellState == "Editing";
   $: isDirty = inEdit && originalValue != JSON.stringify(localValue);
   $: simpleView = cellOptions.relViewMode == "text";
@@ -118,10 +124,7 @@
     !multi;
 
   $: returnSingle = isUser && !multi;
-  $: placeholder =
-    cellOptions.disabled || cellOptions.readonly
-      ? ""
-      : cellOptions.placeholder || "";
+  $: placeholder = cellOptions.placeholder || "";
 
   const handleKeyboard = (e) => {
     if (e.key == "Escape" && $editorState == "Open") {
@@ -146,13 +149,18 @@
   };
 
   const enrichValue = (x) => {
-    if (fieldSchema.relationshipType == "self" && x) {
+    if (fieldSchema.relationshipType == "self" && x && !Array.isArray(x)) {
       API.fetchRow(fieldSchema.tableId, x).then((row) => {
         localValue = [
-          { _id: row.id, primaryDisplay: row.name ?? Object.values(row)[0] },
+          {
+            _id: row.id,
+            primaryDisplay: fieldSchema.primaryDisplay
+              ? row[fieldSchema.primaryDisplay]
+              : row.name || row.id,
+          },
         ];
       });
-      return [];
+      return localValue || [];
     } else if (multi) {
       return value ? [...value] : [];
     } else {
@@ -194,10 +202,17 @@
     class:with-icon={cellOptions?.icon}
     class:placeholder={localValue?.length < 1}
   >
-    {#if localValue?.length < 1 && placeholder}
+    {#if localValue?.length < 1}
       <span> {placeholder} </span>
-    {:else}
-      <div class="items" class:pills class:links class:isUser>
+    {:else if pills || links}
+      <div
+        class="items"
+        class:pills
+        class:links
+        class:isUser
+        class:withCount={localValue.length > 5}
+        class:inEdit
+      >
         {#each localValue as val, idx}
           {#if idx < 5}
             <div
@@ -213,13 +228,19 @@
             </div>
           {/if}
         {/each}
-
         {#if localValue.length > 5}
-          <span class="item-count">
-            {localValue.length}
+          <span class="count">
+            (+ {localValue.length - 5})
           </span>
         {/if}
       </div>
+    {:else}
+      <span>
+        {#if cellOptions.role == "formInput"}
+          ({localValue.length})
+        {/if}
+        {localValue.map((v) => v.primaryDisplay).join(", ")}
+      </span>
     {/if}
 
     {#if inEdit && localValue?.length}
@@ -229,6 +250,7 @@
         on:mousedown|preventDefault={cellState.clear}
       ></i>
     {/if}
+
     {#if !cellOptions.readonly && (cellOptions.role == "formInput" || inEdit)}
       <i class="ri-arrow-down-s-line controlIcon"></i>
     {/if}
@@ -242,7 +264,7 @@
     bind:popup
     open={$editorState == "Open"}
   >
-    {#if fieldSchema.recursiveTable || ownId}
+    {#if fieldSchema.recursiveTable}
       <CellLinkPickerTree
         {fieldSchema}
         filter={filter ?? []}

package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte

@@ -145,7 +145,7 @@
     />
   </div>
 
-  {#if $fetch?.loaded}
+  {#if $fetch?.rows}
     {#if wide}
       <div class="listWrapper" on:mousedown|preventDefault={() => {}}>
         <div class="list">
@@ -159,7 +159,9 @@
                       class:highlighted={focusIdx == idx}
                       on:mouseenter={() => (focusIdx = idx)}
                       on:mouseleave={() => (focusIdx = -1)}
-                      on:mousedown|preventDefault={selectRow(row)}
+                      on:mousedown|preventDefault|stopPropagation={selectRow(
+                        row
+                      )}
                     >
                       {row[primaryDisplay]}
                       <i class="ri-add-line" />
@@ -200,7 +202,7 @@
         <div class="list">
           <div class="options">
             {#key localValue}
-              {#if $fetch?.rows.length}
+              {#if $fetch?.rows?.length}
                 {#each $fetch?.rows as row, idx (idx)}
                   <div
                     class="option"
@@ -208,10 +210,10 @@
                     class:highlighted={focusIdx == idx}
                     on:mouseenter={() => (focusIdx = idx)}
                     on:mouseleave={() => (focusIdx = -1)}
-                    on:mousedown|preventDefault={selectRow(row)}
+                    on:mousedown|preventDefault|stopPropagation={selectRow(row)}
                   >
                     {row[primaryDisplay]}
-                    <i class="ri-checkbox-circle-fill" />
+                    <i class="ri-check-line" />
                   </div>
                 {/each}
               {:else}
@@ -325,8 +327,6 @@
     }
 
     &.selected {
-      background-color: var(--spectrum-global-color-gray-75);
-      color: var(--spectrum-global-color-gray-900);
       & > i {
         visibility: visible;
         color: var(--spectrum-global-color-green-500);
@@ -334,7 +334,7 @@
     }
 
     &.highlighted {
-      background-color: var(--spectrum-global-color-gray-200);
+      background-color: var(--spectrum-global-color-gray-75);
     }
   }
 
@@ -348,7 +348,7 @@
   }
 
   .option:hover {
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-75);
     border-radius: 4px;
     cursor: pointer;
   }

package/src/lib/SuperTableCells/CellNumber.svelte

@@ -32,13 +32,23 @@
     View: {
       _enter() {
         localValue = value;
+        originalValue = value;
+        lastEdit = undefined;
       },
       reset() {
-        originalValue = value;
         localValue = value;
+        originalValue = value;
         lastEdit = undefined;
+        formattedValue = cellOptions.template
+          ? processStringSync(cellOptions.template, {
+              ...$context,
+              value: localValue,
+            })
+          : value || localValue || cellOptions.placeholder;
+
         return cellOptions.initialState ?? "View";
       },
+
       focus() {
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
       },
@@ -63,6 +73,7 @@
         this.submit();
       },
       submit() {
+        localValue = editor.value;
         if (isDirty) {
           dispatch("change", localValue);
         }
@@ -74,18 +85,53 @@
         return "View";
       },
       debounce(e: KeyboardEvent) {
+        lastEdit = new Date();
+        if (cellOptions?.debounce) {
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            dispatch("change", localValue);
+          }, cellOptions.debounce ?? 0);
+        }
+      },
+      handleKeyboard(e: KeyboardEvent) {
+        const input = e.target as HTMLInputElement;
+        const key = e.key;
+
+        // Handle control keys
         if (
-          (e.key.length === 1 &&
-            e.key !== "." &&
-            isNaN(Number(e.key)) &&
-            !e.ctrlKey) ||
-          e.keyCode == 32 ||
-          (e.key === "." && e.target.value.toString().indexOf(".") > -1)
+          ["Enter", "Escape", "ArrowLeft", "ArrowRight", "Tab"].includes(key)
+        ) {
+          if (key === "Enter") return this.submit();
+          if (key === "Escape") return this.cancel();
+          return;
+        }
+
+        // Prevent non-numeric input, except one decimal point and negative sign at start
+        if (
+          (key.length === 1 && !/[\d.-]/.test(key)) || // Allow digits, decimal, negative sign
+          (key === "." && input.value.includes(".")) || // Prevent multiple decimal points
+          (key === "-" &&
+            (input.value.includes("-") || input.selectionStart !== 0)) // Negative sign only at start
         ) {
           e.preventDefault();
+        }
+      },
+      handleInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        const newValue = input.value;
+
+        // Validate full input
+        if (
+          newValue !== "" &&
+          newValue !== "-" &&
+          !/^-?\d*\.?\d*$/.test(newValue)
+        ) {
+          input.value = localValue?.toString() ?? ""; // Revert to last valid value
           return;
         }
-        localValue = Number(e.target.value);
+
+        localValue =
+          newValue === "" || newValue === "-" ? null : Number(newValue);
         lastEdit = new Date();
         if (cellOptions?.debounce) {
           clearTimeout(timer);
@@ -94,27 +140,19 @@
           }, cellOptions.debounce ?? 0);
         }
       },
-      handleKeyboard(e: KeyboardEvent) {
-        if (e.key == "Enter") this.submit();
-        if (e.key == "Escape") this.cancel();
-      },
     },
   });
 
   $: inEdit = $cellState == "Editing";
   $: inline = cellOptions.role == "inlineInput";
-  $: isDirty = inEdit && originalValue != localValue;
+  $: isDirty = lastEdit && originalValue != localValue;
+
   $: formattedValue = cellOptions.template
     ? processStringSync(cellOptions.template, {
         ...$context,
         value: localValue,
       })
-    : undefined;
-
-  $: placeholder =
-    cellOptions.readonly || cellOptions.disabled
-      ? ""
-      : cellOptions.placeholder || "";
+    : value || localValue || cellOptions.placeholder;
 
   $: cellState.reset(value);
 
@@ -145,7 +183,7 @@
   class:readonly={cellOptions.readonly}
   class:disabled={cellOptions.disabled}
   class:inEdit
-  class:isDirty
+  class:isDirty={isDirty && cellOptions?.showDirty}
   class:inline
   class:tableCell={cellOptions?.role == "tableCell"}
   class:formInput={cellOptions?.role == "formInput"}
@@ -164,19 +202,20 @@
   {#if $cellState == "Editing"}
     <input
       class="editor"
+      bind:this={editor}
       class:placeholder={!localValue}
-      type="text"
       style:padding-right={"32px"}
+      class:with-icon={cellOptions.icon}
       style:text-align={cellOptions.align == "flex-start"
         ? "left"
         : cellOptions.align == "center"
           ? "center"
           : "right "}
       placeholder={cellOptions?.placeholder}
-      bind:value={localValue}
-      on:keydown={(e) => cellState.debounce(e)}
+      value={localValue || null}
+      on:keydown={(e) => cellState.handleKeyboard(e)}
+      on:input={(e) => cellState.handleInput(e)}
       on:focusout={(e) => cellState.focusout(e)}
-      on:keyup={(e) => cellState.handleKeyboard(e)}
       use:focus
     />
     <i class="ri-close-line clearIcon" on:mousedown|self={cellState.clear}> </i>
@@ -184,23 +223,11 @@
     <div
       class="value"
       style:padding-right={"12px"}
-      class:placeholder={!value && !formattedValue}
-      style:justify-content={cellOptions.align}
+      class:placeholder={!value}
+      class:with-icon={cellOptions.icon}
+      style:justify-content={cellOptions.align ?? "flex-end"}
     >
-      {formattedValue || value || placeholder}
+      {formattedValue ?? ""}
     </div>
   {/if}
 </div>
-
-<style>
-  .value {
-    flex: auto;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    box-sizing: border-box;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-</style>

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -28,7 +28,7 @@
     let obj = {};
     $options.forEach(
       (option, index) =>
-        (obj[option] = optionColors[option] || colorsArray[index % 14])
+        (obj[option] = optionColors[option] ?? colorsArray[index % 14])
     );
     return obj;
   });
@@ -112,9 +112,8 @@
   $: inEdit = $cellState == "Editing";
   $: pills = optionsViewMode == "pills";
   $: multi =
-    fieldSchema && fieldSchema.type
-      ? fieldSchema.type == "array" && multi
-      : multi;
+    fieldSchema && fieldSchema.type ? fieldSchema.type == "array" : multi;
+
   $: placeholder = disabled || readonly ? "" : cellOptions.placeholder || "";
 
   export let cellState = fsm("Loading", {
@@ -499,7 +498,7 @@
       {:else if optionsViewMode == "text"}
         <div style:flex={"auto"}>
           <span>
-            {multi
+            {multi || localValue.length > 1
               ? localValue.join(", ")
               : labels[localValue[0]] || localValue[0]}
           </span>
@@ -511,8 +510,12 @@
           class:colorText={optionsViewMode == "colorText"}
           style:justify-content={cellOptions.align ?? "flex-start"}
         >
-          {#each localValue as val (val)}
-            <div class="item" style:--option-color={$colors[val]}>
+          {#each localValue as val, idx (val)}
+            <div
+              class="item"
+              style:--option-color={$colors[val] ||
+                colorsArray[idx % colorsArray.length]}
+            >
               <i class="ri-checkbox-blank-fill" />
               <span> {isObjects ? "JSON" : labels[val] || val} </span>
             </div>
@@ -634,7 +637,7 @@
     }
 
     &.focused {
-      background-color: var(--spectrum-global-color-gray-200);
+      background-color: var(--spectrum-global-color-gray-75);
       color: var(--spectrum-global-color-gray-800);
     }
 
@@ -652,7 +655,7 @@
 
       & > i {
         font-size: 16px;
-        color: var(--option-color);
+        color: var(--option-color, var(--spectrum-global-color-gray-300));
       }
     }
   }