@poirazis/supercomponents-shared 1.2.16 → 1.2.18

package/src/lib/SuperTableCells/CellBoolean.svelte

@@ -1,6 +1,8 @@
 <script>
-  import { createEventDispatcher, getContext } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import fsm from "svelte-fsm";
+  import Switch from "../UI/elements/Switch.svelte";
+  import Checkbox from "../UI/elements/Checkbox.svelte";
   import "./CellCommon.css";
 
   export let value;
@@ -21,20 +23,20 @@
     View: {
       focus() {
         if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
-        editor?.focus();
       },
     },
     Editing: {
       _enter() {
         originalValue = value;
-        editor?.focus();
         dispatch("enteredit");
       },
       _exit() {
         dispatch("exitedit");
       },
-      focus() {
-        editor?.focus();
+      focus() {},
+      toggle() {
+        value = !value;
+        dispatch("change", value);
       },
       change(e) {
         if (cellOptions.debounce) dispatch("change", value);
@@ -56,15 +58,10 @@
   $: inline = cellOptions.role == "inlineInput";
   $: inEdit = $cellState == "Editing";
   $: isDirty = inEdit && originalValue !== value;
-  $: checkbox = cellOptions?.controlType == "checkbox";
   $: tableCell = cellOptions.role == "tableCell";
   $: inlineLabel = cellOptions.inlineLabel;
   $: icon = cellOptions.error ? "ri-error-warning-line" : cellOptions.icon;
   $: error = cellOptions.error;
-
-  const focus = (node) => {
-    if (cellOptions.role == "tableCell") node.focus();
-  };
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -72,6 +69,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="superCell"
+  tabindex={cellOptions.disabled || cellOptions.readonly ? undefined : "1"}
   class:inEdit
   class:isDirty={isDirty && cellOptions.showDirty}
   class:inline
@@ -84,6 +82,11 @@
     ? "var(--spectrum-global-color-gray-50)"
     : cellOptions.background}
   style:font-weight={cellOptions.fontWeight}
+  on:keydown={(e) => {
+    if (e.code == "Space") cellState.toggle();
+  }}
+  on:focusin={cellState.focus}
+  on:focusout={cellState.submit}
 >
   {#if icon}
     <i class={icon + " field-icon"} class:with-error={error}></i>
@@ -95,48 +98,40 @@
       class:naked-field={!tableCell}
       style:justify-content={cellOptions.align ?? "center"}
     >
-      {#if !checkbox}
-        <div class="spectrum-Switch spectrum-Switch--emphasized">
-          <input
-            class="spectrum-Switch-input"
-            bind:checked={value}
-            bind:this={editor}
-            type="checkbox"
+      {#if cellOptions.controlType == "switch"}
+        <div class="switch-wrapper">
+          <Switch
+            checked={value}
             disabled={cellOptions.disabled || cellOptions.readonly}
-            on:focusin={cellState.focus}
-            on:focusout={cellState.submit}
-            on:change={cellState.change}
-            use:focus
+            size="medium"
+            on:change={(e) => {
+              value = e.detail.checked;
+              cellState.change();
+            }}
           />
-          <span class="spectrum-Switch-switch"></span>
           {#if inlineLabel}
-            <span class="spectrum-Switch-label">{inlineLabel}</span>
+            <span class="switch-label">{inlineLabel}</span>
           {/if}
         </div>
       {:else}
-        <input
-          class="checkbox"
-          bind:checked={value}
-          bind:this={editor}
-          type="checkbox"
-          disabled={cellOptions.disabled || cellOptions.readonly}
-          on:focusin={cellState.focus}
-          on:focusout={cellState.submit}
-          on:change={cellState.change}
-          use:focus
-        />
-        {#if inlineLabel}
-          <span class="checkbox-label">{inlineLabel}</span>
-        {/if}
+        <div class="checkbox-wrapper">
+          <Checkbox
+            checked={value}
+            size="medium"
+            disabled={cellOptions.disabled || cellOptions.readonly}
+            on:change={(e) => {
+              value = e.detail.checked;
+              cellState.change();
+            }}
+          />
+          {#if inlineLabel}
+            <span class="checkbox-label">{inlineLabel}</span>
+          {/if}
+        </div>
       {/if}
     </div>
   {:else}
-    <div
-      class="value"
-      tabIndex="0"
-      style:justify-content={cellOptions.align ?? "center"}
-      on:focusin={cellState.focus}
-    >
+    <div class="value" style:justify-content={cellOptions.align ?? "center"}>
       {#if value}
         <i class="ri-check-line valueicon"></i>
       {:else if cellOptions.showFalse}
@@ -147,8 +142,20 @@
 </div>
 
 <style>
-  .spectrum-Switch {
-    margin-left: 0.25rem !important;
+  .switch-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .switch-label {
+    margin-left: 0.25rem;
   }
 
   .checkbox-label {

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)
-        : undefined;
+    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>
 
@@ -197,45 +309,45 @@
   style:color={cellOptions.color}
   style:background={cellOptions.background}
   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)}
-    >
-      <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>
-        {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}
@@ -244,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>
@@ -283,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 {