@humandialog/forms.svelte 1.3.14 → 1.3.15

package/components/date.svelte

@@ -3,6 +3,7 @@ import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores
 import { informModification, pushChanges } from "../updates.js";
 import { parseWidthDirective, isDeviceSmallerThan } from "../utils.js";
 import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
+import { getFormattedStringDate, getNiceStringDate } from "./date_utils.js";
 export let self = null;
 export let a = "";
 export let context = "";
@@ -132,141 +133,8 @@ function setup(...args) {
     });
   } else
     can_be_activated = true;
-  rValue = get_formatted_date(value);
-  pretty_value = get_pretty_value(value);
-}
-function get_pretty_value(d) {
-  if (!d)
-    return "";
-  let month = d.getMonth();
-  let day = d.getDate();
-  let year = d.getFullYear();
-  const now = new Date(Date.now());
-  let current_month = now.getMonth();
-  let current_day = now.getDate();
-  let current_year = now.getFullYear();
-  let is_far_date = true;
-  const far_date_threshold = 14 * 24 * 60 * 60 * 1e3;
-  if (Math.abs(now.getTime() - d.getTime()) < far_date_threshold)
-    is_far_date = false;
-  if (year != current_year) {
-    if (is_far_date)
-      return `${day} ${month_name(month)} ${year}`;
-    else
-      return `${day_name(d.getDay())}, ${day} ${month_name(month)}`;
-  }
-  if (month != current_month) {
-    if (is_far_date)
-      return `${day} ${month_name(month)}`;
-    else
-      return `${day_name(d.getDay())}, ${day} ${month_name(month)}`;
-  } else {
-    let day_of_week = d.getDay();
-    let current_day_of_week = now.getDay();
-    if (day_of_week == 0)
-      day_of_week = 7;
-    if (current_day_of_week == 0)
-      current_day_of_week = 7;
-    let days_diff = day - current_day;
-    if (days_diff == 0)
-      return "Today";
-    else if (days_diff == 1)
-      return "Tomorrow";
-    else if (days_diff == -1)
-      return "Yesterday";
-    else if (days_diff > 0 && days_diff <= 7) {
-      if (day_of_week > current_day_of_week)
-        return day_name(day_of_week);
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    } else if (days_diff > 0) {
-      if (is_far_date)
-        return `${d.getDate()} ${month_name(d.getMonth())}`;
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    } else if (days_diff < 0 && days_diff > -7) {
-      if (day_of_week < current_day_of_week)
-        return day_name(day_of_week);
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    } else {
-      if (is_far_date)
-        return `${d.getDate()} ${month_name(d.getMonth())}`;
-      else
-        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
-    }
-  }
-}
-function day_name(d) {
-  switch (d) {
-    case 0:
-      return "Sun";
-    case 1:
-      return "Mon";
-    case 2:
-      return "Tue";
-    case 3:
-      return "Wed";
-    case 4:
-      return "Thu";
-    case 5:
-      return "Fri";
-    case 6:
-      return "Sat";
-    case 7:
-      return "Sun";
-  }
-  return "";
-}
-function month_name(m) {
-  switch (m) {
-    case 0:
-      return "Jan";
-    case 1:
-      return "Feb";
-    case 2:
-      return "Mar";
-    case 3:
-      return "Apr";
-    case 4:
-      return "May";
-    case 5:
-      return "Jun";
-    case 6:
-      return "Jul";
-    case 7:
-      return "Aug";
-    case 8:
-      return "Sep";
-    case 9:
-      return "Oct";
-    case 10:
-      return "Nov";
-    case 11:
-      return "Dec";
-  }
-  return "";
-}
-function get_formatted_date(d) {
-  if (!d)
-    return "";
-  let month = "" + (d.getMonth() + 1);
-  let day = "" + d.getDate();
-  let year = d.getFullYear();
-  let hour = "" + d.getHours();
-  let minutes = "" + d.getMinutes();
-  if (day.length < 2)
-    day = "0" + day;
-  if (month.length < 2)
-    month = "0" + month;
-  if (hour.length < 2)
-    hour = "0" + hour;
-  if (minutes.length < 2)
-    minutes = "0" + minutes;
-  if (type == "datetime-local")
-    return `${year}-${month}-${day} ${hour}:${minutes}`;
-  else
-    return `${year}-${month}-${day}`;
+  rValue = getFormattedStringDate(value, type);
+  pretty_value = getNiceStringDate(value);
 }
 async function on_changed() {
   if (!rValue)

package/components/date_utils.d.ts

@@ -0,0 +1,4 @@
+export function getFormattedStringDate(d: any, type?: string): string;
+export function getNiceStringDate(d: any): string;
+export function dayName(d: any): "" | "Sun" | "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat";
+export function monthName(m: any): "" | "Jan" | "Feb" | "Mar" | "Apr" | "May" | "Jun" | "Jul" | "Aug" | "Sep" | "Oct" | "Nov" | "Dec";

package/components/date_utils.js

@@ -0,0 +1,178 @@
+
+export function getFormattedStringDate(d, type = "datetime")
+{
+    if(!d)
+        return '';
+
+    let month = '' + (d.getMonth() + 1);
+    let day = '' + d.getDate();
+    let year = d.getFullYear();
+    let hour = '' + d.getHours();
+    let minutes = '' + d.getMinutes();
+
+    if(day.length < 2)
+        day = '0' + day;
+
+    if(month.length < 2)
+        month = '0' + month;
+
+    if(hour.length < 2)
+        hour = '0' + hour;
+
+    if(minutes.length < 2)
+        minutes = '0' + minutes;
+
+    if(type == "datetime-local")
+        return `${year}-${month}-${day} ${hour}:${minutes}`;
+    else
+        return `${year}-${month}-${day}`;
+}
+
+export function getNiceStringDate(d)
+{
+    if(!d)
+        return '';
+
+    let month = d.getMonth();
+    let day = d.getDate();
+    let year = d.getFullYear();
+
+    const now = new Date( Date.now())
+    let current_month = now.getMonth();
+    let current_day = now.getDate();
+    let current_year = now.getFullYear();
+
+    let is_far_date = true;
+    const far_date_threshold = 14*24*60*60*1000; // 14 days
+    if(Math.abs( now.getTime() - d.getTime()) < far_date_threshold)
+        is_far_date = false;
+
+    if(year != current_year)
+    {
+        if(is_far_date)
+            return `${day} ${monthName(month)} ${year}`
+        else
+            return `${dayName(d.getDay())}, ${day} ${monthName(month)}`
+    }
+
+    if(month != current_month)
+    {
+        if(is_far_date)
+            return `${day} ${monthName(month)}`   
+        else
+            return `${dayName(d.getDay())}, ${day} ${monthName(month)}`
+    }
+    else
+    {
+        let day_of_week = d.getDay() // 0 == Sunday
+        let current_day_of_week = now.getDay()
+
+        if(day_of_week == 0)
+            day_of_week = 7
+
+        if(current_day_of_week == 0)
+            current_day_of_week = 7;
+
+        
+        let days_diff = day - current_day;
+        if(days_diff == 0)
+            return 'Today';
+        else if(days_diff == 1)
+            return 'Tomorrow';
+        else if(days_diff == -1)
+            return 'Yesterday';
+        else if(days_diff > 0 && days_diff <= 7)
+        {
+            if(day_of_week > current_day_of_week)
+                return dayName(day_of_week);
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+        else if(days_diff > 0)
+        {
+            if(is_far_date)
+                return `${d.getDate()} ${monthName(d.getMonth())}`
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+        else if(days_diff < 0 && days_diff > -7)
+        {
+            if(day_of_week < current_day_of_week)
+                return dayName(day_of_week);
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+        else
+        {
+            if(is_far_date)
+                return `${d.getDate()} ${monthName(d.getMonth())}`
+            else
+                return `${dayName(day_of_week)}, ${d.getDate()} ${monthName(d.getMonth())}`
+        }
+    }
+}
+
+export function dayName(d)
+{
+    switch(d)
+    {
+    case 0:
+        return 'Sun';
+    
+    case 1:
+        return 'Mon';
+
+    case 2:
+        return 'Tue';
+
+    case 3:
+        return 'Wed';
+
+    case 4:
+        return 'Thu';
+
+    case 5:
+        return 'Fri';
+
+    case 6:
+        return 'Sat';
+    
+    case 7:
+        return 'Sun';
+    }
+
+    return '';
+}
+
+export function monthName(m)
+{
+    switch(m)
+    {
+        case 0:
+            return "Jan";
+        case 1:
+            return "Feb";
+        case 2:
+            return "Mar";
+        case 3:
+            return "Apr";
+        case 4:
+            return "May";
+        case 5:
+            return "Jun";
+        case 6:
+            return "Jul";
+        case 7:
+            return "Aug";
+        case 8:
+            return "Sep";
+        case 9:
+            return "Oct";
+        case 10:
+            return "Nov";
+        case 11:
+            return "Dec";
+    }
+
+    return '';
+}

package/components/document/editor.svelte

@@ -62,6 +62,7 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let compact = false;
+export let onChange = void 0;
 export let onFocusCb = void 0;
 export let onBlurCb = void 0;
 export let onAddImage = void 0;
@@ -480,12 +481,16 @@ onMount(() => {
     content: value,
     injectCSS: false,
     onTransaction({ editor: editor2, transaction }) {
-      hasChangedValue = true;
-      changedValue = editor2.getHTML();
-      handleImagesChanges(transaction);
+      const wasContentChanged = transaction.steps.length > 0;
+      if (wasContentChanged) {
+        hasChangedValue = true;
+        changedValue = editor2.getHTML();
+        handleImagesChanges(transaction);
+      }
       refreshToolbarOperations();
     },
     onFocus({ editor: editor2, event }) {
+      on_focus();
       if (onFocusCb)
         onFocusCb();
     },
@@ -512,7 +517,24 @@ onDestroy(() => {
   if (is_command_palette_visible)
     palette.hide();
 });
+const isAutoSaveEnabled = false;
+let autoSaveTimerId = 0;
+function on_focus() {
+  if (isAutoSaveEnabled) {
+    autoSaveTimerId = setInterval(
+      () => {
+        if (hasChangedValue)
+          saveData();
+      },
+      1e4
+    );
+  }
+}
 function on_blur() {
+  if (autoSaveTimerId) {
+    clearInterval(autoSaveTimerId);
+    autoSaveTimerId = 0;
+  }
   if (onFinishEditing) {
     onFinishEditing();
     onFinishEditing = void 0;
@@ -529,9 +551,15 @@ export function save() {
   }
 }
 function saveData() {
-  if (item && a && hasChangedValue) {
+  if (!hasChangedValue)
+    return false;
+  hasChangedValue = false;
+  console.log("editor: saveData");
+  if (onChange) {
+    onChange(changedValue);
+    return true;
+  } else if (item && a) {
     item[a] = changedValue;
-    hasChangedValue = false;
     if (typename)
       informModification(item, a, typename);
     else

package/components/document/editor.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         compact?: boolean | undefined;
+        onChange?: undefined;
         onFocusCb?: undefined;
         onBlurCb?: undefined;
         onAddImage?: undefined;

package/components/kanban/internal/kanban.inserter.svelte

@@ -31,8 +31,8 @@ async function onSummaryChanged(text) {
 <li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
             bg-stone-100 dark:bg-stone-700">
 
-    <h3  class=" text-lg font-semibold min-h-[1.75rem]
-                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+    <h3  class=" text-base font-semibold min-h-[1.75rem]
+                 sm:min-h-[1.25rem]
                 whitespace-nowrap overflow-clip w-full sm:flex-none "
                 use:editable={{
                     action: (text) => onInsert(text, ''),
@@ -43,10 +43,9 @@ async function onSummaryChanged(text) {
     </h3>
 
     {#if editSummary}
-        <p class="  sm:text-xs sm:min-h-[1rem]
-                text-base min-h-[1.5rem]
+        <p class="  text-sm min-h-[1.25rem]
                 text-stone-400
-                max-h-[75px] sm:max-h-[64px]
+                max-h-[75px] 
                 overflow-hidden"
                 use:editable={{
                     action: (text) => onSummaryChanged(text), 

package/index.d.ts

@@ -56,6 +56,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
+export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/index.js

@@ -62,6 +62,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
+export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -74,6 +74,7 @@
     "./components/combo/combo": "./components/combo/combo.js",
     "./components/contextmenu.svelte": "./components/contextmenu.svelte",
     "./components/date.svelte": "./components/date.svelte",
+    "./components/date_utils": "./components/date_utils.js",
     "./components/delayed.spinner.svelte": "./components/delayed.spinner.svelte",
     "./components/document/editor.svelte": "./components/document/editor.svelte",
     "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",