@poirazis/supercomponents-shared 1.2.15 → 1.2.18

package/src/lib/SuperTableCells/CellDatetime.svelte

@@ -12,6 +12,11 @@
   export let autofocus;
 
   let originalValue;
+  let anchor;
+  let picker;
+  let timePicker;
+  let open;
+  let selection = false;
 
   export let cellState = fsm("View", {
     "*": {
@@ -20,6 +25,10 @@
       },
     },
     View: {
+      _enter() {
+        open = false;
+        selection = false;
+      },
       focus() {
         if (!cellOptions.readonly) return "Editing";
       },
@@ -33,125 +42,176 @@
       _exit() {
         dispatch("exitedit");
       },
+      toggle(e) {
+        open = !open;
+      },
       handleKeyboard(e) {
         if (e.keyCode == 32) {
           e.stopPropagation();
           e.preventDefault();
           open = !open;
         }
+
+        if (e.code == "Delete" || e.code == "Backspace") {
+          e.stopPropagation();
+          e.preventDefault();
+          value = null;
+          dispatch("change", value);
+        }
       },
       focusout(e) {
         const isInPicker = picker?.contains(e.relatedTarget);
         const isInTimePicker = timePicker?.contains(e.relatedTarget);
 
+        if (isInPicker || isInTimePicker) return;
+
         if (!isInPicker && !isInTimePicker) {
           open = false;
-          if (value != originalValue) {
-            dispatch("change", value);
+          let outputValue = innerDate.toISOString();
+          if (!currentShowTime) {
+            outputValue = innerDate.toLocaleDateString("en-CA"); // YYYY-MM-DD format without time
           }
+
+          if (ignoreTimeZone) {
+            outputValue = innerDate.toISOString().slice(0, -1);
+          }
+
+          if (selection) dispatch("change", outputValue);
           return "View";
         }
       },
+      submit() {
+        dispatch("change", innerDate.toISOString());
+        return "View";
+      },
       cancel() {
-        value = Array.isArray(originalValue)
-          ? [...originalValue]
-          : originalValue;
+        value = originalValue;
         return "View";
       },
     },
   });
 
-  let anchor;
-  let picker;
-  let timePicker;
-  let open;
-
   // Current date format and showTime - extracted to ensure reactivity
   $: currentDateFormat = cellOptions?.dateFormat;
   $: currentShowTime = cellOptions?.showTime;
+  $: ignoreTimeZone = cellOptions?.ignoreTimezone;
+  $: show24HTime = cellOptions?.show24HTime;
+  $: innerDate = parseValueToDate(value);
+  $: timeValue = innerDate.toLocaleTimeString("en-US", {
+    hour12: !show24HTime,
+    hour: "2-digit",
+    minute: "2-digit",
+  });
 
-  // Time value (format: HH:mm)
-  $: timeValue = currentShowTime && value ? getTimeFromValue() : "00:00";
-  $: innerDate = value ? new Date(value) : new Date();
+  // Helper function to create a Date object that properly handles UTC when ignoreTimezone is true
+  function parseValueToDate(valueStr) {
+    if (!valueStr) return new Date();
+    if (valueStr instanceof Date) {
+      valueStr = valueStr;
+    }
 
-  // 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")}`;
+    return new Date(valueStr);
   }
 
-  // Date formatting helper function
-  function formatDate(date, dateFormat) {
-    if (!date) return "";
-
-    if (!dateFormat || dateFormat === "default") {
-      return date?.toDateString();
-    }
+  // Parse 12-hour time format to 24-hour format
+  function parse12HourTime(timeStr) {
+    const match = timeStr.match(/(\d{1,2}):(\d{2})\s*(AM|PM)/i);
+    if (!match) return null;
+    let hours = parseInt(match[1]);
+    const minutes = parseInt(match[2]);
+    const ampm = match[3].toUpperCase();
 
-    // 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 (ampm === "PM" && hours !== 12) hours += 12;
+    if (ampm === "AM" && hours === 12) hours = 0;
 
-    if (dateFormat === "DD/MM/YYYY") {
-      return `${date.getDate().toString().padStart(2, "0")}/${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getFullYear()}`;
-    }
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }
 
-    if (dateFormat === "YYYY-MM-DD") {
-      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
-    }
+  // Format date/datetime helper function
+  // Only applies formatting - timezone handling is done in parseValueToDate
+  // If showTime is false (default), returns formatted date only
+  // If showTime is true, returns formatted date + time
+  function formatDateTime(date, dateFormat, showTime = false) {
+    if (!date) return "";
 
-    // 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",
-      },
-    };
+    // Format the date part
+    let dateResult = "";
 
-    const formatOption = options[dateFormat];
-    if (formatOption) {
-      return date.toLocaleDateString("en-US", formatOption);
+    if (!dateFormat || dateFormat === "default") {
+      dateResult = date?.toDateString();
+    } else {
+      // Use local methods to format - timezone is already handled by parseValueToDate
+      const month = date.getMonth();
+      const dayOfMonth = date.getDate();
+      const year = date.getFullYear();
+
+      // Manual formatting for specific formats to ensure exact order
+      if (dateFormat === "MM/DD/YYYY") {
+        dateResult = `${(month + 1).toString().padStart(2, "0")}/${dayOfMonth.toString().padStart(2, "0")}/${year}`;
+      } else if (dateFormat === "DD/MM/YYYY") {
+        dateResult = `${dayOfMonth.toString().padStart(2, "0")}/${(month + 1).toString().padStart(2, "0")}/${year}`;
+      } else if (dateFormat === "YYYY-MM-DD") {
+        dateResult = `${year}-${(month + 1).toString().padStart(2, "0")}-${dayOfMonth.toString().padStart(2, "0")}`;
+      } else {
+        // For shorter formats, use locale-specific formatting
+        const options = {
+          "MMM DD, YYYY": {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          },
+          "DD MMM YYYY": {
+            day: "numeric",
+            month: "short",
+            year: "numeric",
+          },
+        };
+
+        const formatOption = options[dateFormat];
+        if (formatOption) {
+          dateResult = date.toLocaleDateString("en-US", formatOption);
+        } else {
+          // Fallback to default
+          dateResult = date?.toDateString();
+        }
+      }
     }
 
-    // Fallback to default
-    return date?.toDateString();
-  }
-
-  // DateTime formatting helper function
-  function formatDateTime(date, dateFormat, showTime) {
-    if (!date) return "";
-
+    // If not showing time, return just the formatted date
     if (!showTime) {
-      return formatDate(date, dateFormat);
+      return dateResult;
     }
 
-    const formattedDate = formatDate(date, dateFormat);
-    const timeString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+    // Format the time part when showTime is true (using local time)
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+
+    // Format based on show24HTime
+    let timeString;
+    if (show24HTime) {
+      timeString = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+    } else {
+      const ampm = hours >= 12 ? "PM" : "AM";
+      const display12h = hours % 12 || 12;
+      timeString = `${display12h.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+    }
 
-    return `${formattedDate} ${timeString}`;
+    return `${dateResult} ${timeString}`;
   }
 
   $: formattedValue =
-    cellOptions.template && value
-      ? processStringSync(cellOptions.template, { value })
-      : value
-        ? formatDate(innerDate, currentDateFormat)
+    cellOptions.template && value && value != "" && value != null
+      ? processStringSync(cellOptions.template, {
+          value: innerDate,
+        })
+      : (value && value != "" && value != null) || selection
+        ? formatDateTime(innerDate, currentDateFormat, currentShowTime)
         : "";
 
   $: placeholder = cellOptions?.placeholder || "";
   $: inEdit = $cellState == "Editing";
   $: inline = cellOptions.role == "inlineInpur";
-  $: isDirty = inEdit && originalValue != value;
+  $: isDirty = inEdit && true;
 
   onMount(() => {
     if (autofocus)
@@ -161,20 +221,72 @@
       }, 30);
   });
 
-  // Handle time picker changes
+  // Handle Start button - set time to beginning of day (00:00 or 12:00 AM)
+  const handleStartTime = () => {
+    const startTime = show24HTime ? "00:00" : "12:00 AM";
+    timeValue = startTime;
+
+    innerDate.setHours(0, 0, 0, 0);
+    innerDate = innerDate;
+    selection = true;
+    anchor?.focus();
+  };
+
+  // Handle End button - set time to end of day (23:59 or 11:59 PM)
+  const handleEndTime = () => {
+    const endTime = show24HTime ? "23:59" : "11:59 PM";
+    timeValue = endTime;
+
+    innerDate.setHours(23, 59, 0, 0);
+    innerDate = innerDate;
+    selection = true;
+    anchor?.focus();
+  };
+
+  // Handle Now button - set both date and time to current date/time
+  const handleNowTime = () => {
+    innerDate = new Date();
+    selection = true;
+    anchor?.focus();
+  };
+
+  // Handle Clear button - clear the value
+  const handleClearValue = () => {
+    cellState.submit();
+  };
+
+  // Handle time picker changes - only affects the time, not timezone
   const handleTimeChange = (e) => {
-    if (!value || !currentShowTime) return;
+    if (!currentShowTime) return;
+    selection = true;
 
     const newTime = e.target.value;
-    const currentDate = new Date(value);
-    const [hours, minutes] = newTime.split(":").map(Number);
+    // Convert 12-hour format to 24-hour if needed
+    const time24h = show24HTime ? newTime : parse12HourTime(newTime);
+    if (!time24h) return;
+
+    const [hours, minutes] = time24h.split(":").map(Number);
+
+    innerDate.setHours(hours, minutes, 0, 0);
+  };
 
-    // Update the date with the new time
-    currentDate.setHours(hours, minutes, 0, 0);
-    value = currentDate.toISOString();
+  const handleDateChange = (e) => {
+    const newDate = e.detail;
+    selection = true;
+
+    if (currentShowTime) {
+      // Preserve the time from the current innerDate when appending to the selected date
+      newDate.setHours(
+        innerDate.getHours(),
+        innerDate.getMinutes(),
+        innerDate.getSeconds(),
+        innerDate.getMilliseconds(),
+      );
+    }
 
-    // Keep the popover open for time changes
-    dispatch("change", value);
+    innerDate = newDate;
+    anchor?.focus();
+    open = false;
   };
 </script>
 
@@ -196,47 +308,46 @@
   class:open-popup={open}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  style:font-weight={cellOptions.fontWeight}
   on:focus={cellState.focus}
-  on:keypress={cellState.handleKeyboard}
+  on:keydown={cellState.handleKeyboard}
   on:focusout={cellState.focusout}
+  on:mousedown={cellState.toggle}
 >
-  {#if cellOptions.icon}
-    <i class={cellOptions.icon + " field-icon"}></i>
-  {/if}
-
-  {#if inEdit}
-    <div
-      class="editor"
-      class:placeholder={!formattedValue}
-      on:click={() => (open = !open)}
-    >
-      {formattedValue || placeholder}
-      <i
-        class="ri-calendar-line"
-        style="font-size: 16px; justify-self: flex-end"
-      ></i>
-    </div>
-  {:else}
-    <div
-      class="value"
-      class:placeholder={!formattedValue}
-      style:justify-content={cellOptions.align}
-    >
-      <span>
-        {formattedValue || placeholder}
-      </span>
-    </div>
-  {/if}
+  {#key $cellState}
+    {#if cellOptions.icon}
+      <i class={cellOptions.icon + " field-icon"}></i>
+    {/if}
+
+    {#if inEdit}
+      <div class="editor" class:placeholder={!formattedValue}>
+        <span>{formattedValue || placeholder}</span>
+        <i
+          class="ri-calendar-line"
+          style="font-size: 16px; justify-self: flex-end"
+        ></i>
+      </div>
+    {:else}
+      <div
+        class="value"
+        class:placeholder={!formattedValue}
+        style:justify-content={cellOptions.align}
+      >
+        <span>
+          {value ? formattedValue : placeholder}
+        </span>
+      </div>
+    {/if}
+  {/key}
 </div>
 
 {#if inEdit}
   <SuperPopover
     {anchor}
-    dismissible={false}
     {open}
+    ignoreAnchor
     align="right"
     maxHeight={400}
+    on:close={cellState.focusout}
   >
     <div
       bind:this={picker}
@@ -245,26 +356,34 @@
       style:--date-picker-foreground="var(--spectrum-global-color-gray-800)"
       style:--date-picker-selected-background="var(--accent-color)"
     >
-      <DatePicker
-        bind:value={innerDate}
-        on:select={(e) => {
-          value = e.detail;
-          anchor?.focus();
-          open = false;
-        }}
-      />
+      <DatePicker value={innerDate} on:select={handleDateChange} />
 
       {#if currentShowTime}
         <div class="time-section">
           <!-- svelte-ignore a11y-label-has-associated-control -->
           <input
             bind:this={timePicker}
-            type="time"
+            type="text"
+            placeholder={show24HTime ? "HH:MM" : "HH:MM AM/PM"}
             bind:value={timeValue}
             on:change={handleTimeChange}
+            on:focusout={cellState.focusout}
             class="time-input"
-            step="900"
           />
+          <div class="time-buttons">
+            <button class="time-button start-button" on:click={handleStartTime}
+              >Start</button
+            >
+            <button class="time-button end-button" on:click={handleEndTime}
+              >End</button
+            >
+            <button class="time-button now-button" on:click={handleNowTime}
+              >Now</button
+            >
+            <button class="time-button clear-button" on:click={handleClearValue}
+              >Select</button
+            >
+          </div>
         </div>
       {/if}
     </div>
@@ -284,7 +403,35 @@
   .time-section {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 8px;
+  }
+
+  .time-buttons {
+    display: flex;
+    gap: 6px;
+  }
+
+  .time-button {
+    flex: 1;
+    padding: 6px 12px;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    background: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-global-color-gray-800);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .time-button:hover {
+    background: var(--spectrum-global-color-gray-100);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+
+  .time-button:active {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-500);
   }
 
   .time-label {

package/src/lib/SuperTableCells/CellLink.svelte

@@ -145,7 +145,13 @@
 
     if (singleSelect) {
       editorState.close();
-      anchor.focus();
+    }
+
+    if (cellOptions.debounced) {
+      dispatch(
+        "change",
+        returnSingle && localValue ? localValue[0] : localValue,
+      );
     }
   };
 
@@ -193,7 +199,7 @@
   class:open-popup={$editorState == "Open"}
   style:color={cellOptions.color}
   style:background={cellOptions.background}
-  on:focusin={cellState.focus}
+  on:focus={cellState.focus}
   on:keydown|self={handleKeyboard}
   on:focusout={cellState.focusout}
   on:mousedown={cellState.toggle}
@@ -203,9 +209,14 @@
   {/if}
 
   <div class="value" class:placeholder={localValue?.length < 1}>
-    {#if localValue?.length < 1}
-      <span> {placeholder} </span>
-    {:else if pills || links}
+    {#if simpleView}
+      <span>
+        {#if cellOptions.role == "formInput" && localValue.length > 1}
+          ({localValue.length})
+        {/if}
+        {localValue.map((v) => v.primaryDisplay).join(", ") || placeholder}
+      </span>
+    {:else}
       <div
         class="items"
         class:pills
@@ -214,7 +225,7 @@
         class:withCount={localValue.length > 5}
         class:inEdit
       >
-        {#each localValue as val, idx}
+        {#each localValue as val, idx (val)}
           {#if idx < 5}
             <div
               class="item"
@@ -231,19 +242,17 @@
             </div>
           {/if}
         {/each}
+
+        {#if localValue.length == 0}
+          <span>{placeholder}</span>
+        {/if}
+
         {#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>
   {#if !readonly && (cellOptions.role == "formInput" || inEdit)}

package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte

@@ -265,34 +265,38 @@
         <div class="list" bind:this={listElement} on:scroll={handleScroll}>
           <div class="options">
             {#key localValue}
-              {#if $fetch?.rows?.length || ($fetch?.loading && !$fetch?.loaded)}
-                {#each $fetch?.rows || [] as row, idx (idx)}
-                  <div
-                    class="option"
-                    class:selected={rowSelected(row)}
-                    class:highlighted={focusIdx == idx}
-                    on:mouseenter={() => (focusIdx = idx)}
-                    on:mouseleave={() => (focusIdx = -1)}
-                    on:mousedown|preventDefault|stopPropagation={selectRow(row)}
-                  >
-                    {row[primaryDisplay]}
-                    <i class="ri-check-line"></i>
-                  </div>
-                {/each}
-                {#if $fetch?.loading && $fetch.loaded}
+              {#key $fetch?.rows}
+                {#if $fetch?.rows?.length || ($fetch?.loading && !$fetch?.loaded)}
+                  {#each $fetch?.rows || [] as row, idx (idx)}
+                    <div
+                      class="option"
+                      class:selected={rowSelected(row)}
+                      class:highlighted={focusIdx == idx}
+                      on:mouseenter={() => (focusIdx = idx)}
+                      on:mouseleave={() => (focusIdx = -1)}
+                      on:mousedown|preventDefault|stopPropagation={selectRow(
+                        row,
+                      )}
+                    >
+                      {row[primaryDisplay]}
+                      <i class="ri-check-line"></i>
+                    </div>
+                  {/each}
+                  {#if $fetch?.loading && $fetch.loaded}
+                    <div class="option loading">
+                      <i class="ri-loader-2-line rotating"></i>
+                      Loading more...
+                    </div>
+                  {/if}
+                {:else if $fetch?.loading}
                   <div class="option loading">
                     <i class="ri-loader-2-line rotating"></i>
-                    Loading more...
+                    Loading...
                   </div>
+                {:else}
+                  <div class="option">No Results Found</div>
                 {/if}
-              {:else if $fetch?.loading}
-                <div class="option loading">
-                  <i class="ri-loader-2-line rotating"></i>
-                  Loading...
-                </div>
-              {:else}
-                <div class="option">No Results Found</div>
-              {/if}
+              {/key}
             {/key}
           </div>
         </div>