@humandialog/forms.svelte 0.4.44 → 0.5.1

package/components/date.svelte

@@ -1,19 +1,21 @@
 <script>import { getContext } from "svelte";
-import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
-import { inform_modification, push_changes } from "../updates.js";
-import { parse_width_directive, is_device_smaller_than } from "../utils.js";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores.js";
+import { informModification, pushChanges } from "../updates.js";
+import { parseWidthDirective, isDeviceSmallerThan } from "../utils.js";
+import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
 export let self = null;
 export let a = "";
 export let context = "";
 export let typename = "";
 export let date = null;
-export let on_select = void 0;
+export let onSelect = void 0;
 export let type = "date";
 export let changed = void 0;
 export let s = "sm";
 export let c = "";
 export let compact = false;
-export let in_context = "sel";
+export let inContext = "sel";
+export let pushChangesImmediately = true;
 let on_hide_callback = void 0;
 export function show(event, hide_callback) {
   if (event) {
@@ -26,7 +28,7 @@ export function show(event, hide_callback) {
     on_hide_callback = void 0;
   if (input_element) {
     input_element.focus();
-    if (is_device_smaller_than("sm")) {
+    if (isDeviceSmallerThan("sm")) {
       input_element.click();
     }
     if ("showPicker" in HTMLInputElement.prototype) {
@@ -39,46 +41,49 @@ let input_pt = "pt-0.5";
 let input_pb = "pb-1";
 let font_size = "text-lg sm:text-sm";
 let line_h = "h-7 sm:h-5";
+let chevron_mt = "mt-2 sm:mt-1";
 switch (s) {
   case "md":
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
     font_size = "text-lg sm:text-sm";
     line_h = "h-7 sm:h-5";
+    chevron_mt = "mt-2 sm:mt-1";
     break;
   case "xs":
     input_pt = "pt-0.5";
     input_pb = "pb-0.5";
     font_size = "text-base sm:text-xs";
     line_h = "h-6 sm:h-4";
+    chevron_mt = "mt-1.5 sm:mt-0.5";
     break;
 }
 let item = null;
 let user_class = $$restProps.class ?? "";
 let value = null;
 let rValue = "";
+let pretty_value = "";
 let ctx = context ? context : getContext("ctx");
-let cs = parse_width_directive(c);
+let cs = parseWidthDirective(c);
 let style;
 let input_element = void 0;
-let background_class = is_compact ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
 if (!is_compact) {
-  style = `bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
-                focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700
-                dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500`;
+  style = `bg-stone-50 border border-stone-300 text-stone-900 text-sm rounded-lg 
+                focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-stone-700
+                dark:border-stone-600 dark:placeholder-stone-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500`;
 } else {
   style = `${font_size}`;
 }
 let can_be_activated = true;
 let last_tick = -1;
 $:
-  setup($data_tick_store, $context_items_store);
+  setup($data_tick_store, $contextItemsStore);
 function setup(...args) {
   last_tick = data_tick_store;
   if (!date) {
-    item = self ?? $context_items_store[ctx];
+    item = self ?? $contextItemsStore[ctx];
     if (!typename)
-      typename = $context_types_store[ctx];
+      typename = $contextTypesStore[ctx];
     if (!typename) {
       if (item.$type)
         typename = item.$type;
@@ -95,14 +100,127 @@ function setup(...args) {
     value = date;
   if (is_compact) {
     can_be_activated = false;
-    let contexts = in_context.split(" ");
+    let contexts = inContext.split(" ");
     contexts.forEach((ctx2) => {
-      if ($context_items_store[ctx2] == item)
+      if ($contextItemsStore[ctx2] == item)
         can_be_activated = true;
     });
   } 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)
@@ -130,17 +248,18 @@ async function on_changed() {
     value = null;
   else
     value = new Date(rValue);
-  if (on_select) {
-    await on_select(value);
+  if (onSelect) {
+    await onSelect(value);
   } else if (item != null) {
     if (value)
       item[a] = value.toISOString();
     else
       item[a] = null;
     if (typename) {
-      inform_modification(item, a, typename);
+      informModification(item, a, typename);
       $data_tick_store = $data_tick_store + 1;
-      push_changes();
+      if (pushChangesImmediately)
+        pushChanges();
     }
     if (!!changed)
       changed(value);
@@ -154,32 +273,47 @@ function blur(e) {
 
 {#if is_compact}
     <div class="inline-block relative {line_h}">
-        <span class="dark:text-white {font_size} truncate  px-2.5 {background_class}
-                    absolute left-0 top-0 h-full" >
-            {rValue}
+       <div class="dark:text-stone-300 {font_size} truncate  
+                    pl-0 pr-0
+                    h-full flex flex-row" >
+            <div class="grow-1 pr-2.5">
+                {pretty_value}
+            </div>
+
+            {#if can_be_activated}
+                <div class="no-print ml-auto w-3 h-3 {chevron_mt} text-stone-700 dark:text-stone-300">
+                    <FaChevronDown/>
+                </div>
+            {/if}
         
             {#if can_be_activated}
                 {#if type == "datetime-local"}
                     <input  type="datetime-local" 
                             class="datepicker-input"
+                            tabindex="-1"
                             on:change={on_changed}
                             bind:value={rValue}
                             bind:this={input_element}>
                 {:else}
                     <input  type="date" 
                             class="datepicker-input"
+                            tabindex="-1"
                             on:change={on_changed}
                             bind:value={rValue}
                             bind:this={input_element}
                             on:blur={blur}>
                 {/if}
+
+                
             {/if}
-        </span>
+        </div>
+
+        
     </div>
 
 {:else}
     {#if type == "datetime-local"}
-        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {background_class} {user_class}" 
+        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {user_class}" 
                 type="datetime-local" 
                 on:change={on_changed}
                 bind:value={rValue}
@@ -226,5 +360,11 @@ function blur(e) {
         cursor: pointer;
     }
 
+    @media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
 </style>
 

package/components/date.svelte.d.ts

@@ -7,13 +7,14 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         date?: Date | undefined;
-        on_select?: undefined;
+        onSelect?: undefined;
         type?: string | undefined;
         changed?: undefined;
         s?: string | undefined;
         c?: string | undefined;
         compact?: boolean | undefined;
-        in_context?: string | undefined;
+        inContext?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
         show?: ((event: any, hide_callback: any) => void) | undefined;
     };
     events: {

package/components/delayed.spinner.svelte

@@ -29,7 +29,7 @@ const sizes = {
 let iconsize = sizes[size];
 const colors = {
   blue: "fill-blue-600",
-  gray: "fill-gray-600 dark:fill-gray-300",
+  stone: "fill-stone-600 dark:fill-stone-300",
   green: "fill-green-500",
   red: "fill-red-600",
   yellow: "fill-yellow-400",
@@ -53,7 +53,7 @@ onMount(() => {
 {#if visible}
     <svg
         role="status"
-        class='inline -mt-px animate-spin dark:text-gray-600 {iconsize} text-gray-300 {fillColorClass} {user_class}'
+        class='inline -mt-px animate-spin dark:text-stone-600 {iconsize} text-stone-300 {fillColorClass} {user_class}'
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg">

package/components/document/internal/palette.row.svelte

@@ -8,7 +8,7 @@ let icon_placeholder_size = cmd.description ? 12 : 6;
 let icon_size = cmd.icon_size ? cmd.icon_size : icon_placeholder_size - 6;
 let cl = $$props.class ? $$props.class : "";
 $:
-  active_class = is_highlighted ? "bg-gray-200 dark:bg-gray-700" : "";
+  active_class = is_highlighted ? "bg-stone-200 dark:bg-stone-700" : "";
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -22,12 +22,12 @@ $:
         <p>{cmd.caption}</p>
         {#if cmd.description}
             {@const shortcut_width_px = cmd.shortcut ? 80 : 0}
-            <p  class="text-sm font-normal text-gray-400 dark:text-gray-500 truncate inline-block"
+            <p  class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
                 style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
         {/if}
     </div>
     {#if cmd.shortcut}
-        <div class="pr-1 text-sm font-mono text-gray-500" 
+        <div class="pr-1 text-sm font-mono text-stone-500" 
              style:width={"80px"} >{cmd.shortcut}</div>
     {/if}
 </div>

package/components/document/internal/palette.svelte

@@ -102,7 +102,7 @@ function update_current_command(cmd) {
 }
 </script>
 
-<div    class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md z-30" 
+<div    class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30" 
         hidden={!visible}
         style={css_style}>
     {#if filtered_commands && filtered_commands.length}
@@ -117,7 +117,7 @@ function update_current_command(cmd) {
                             />
         {/each}
     {:else}
-        <p class="text-sm text-gray-500">No results</p>
+        <p class="text-sm text-stone-500">No results</p>
     {/if}
 
 </div>

package/components/document/internal/palette.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {}; /**accessor*/
 };
 export type PaletteProps = typeof __propDef.props;
 export type PaletteEvents = typeof __propDef.events;