@humandialog/forms.svelte 0.4.45 → 0.5.1

package/components/date.svelte

@@ -1,20 +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) {
@@ -27,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) {
@@ -40,18 +41,21 @@ 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;
@@ -60,26 +64,26 @@ 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;
 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;
@@ -96,9 +100,9 @@ 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
@@ -244,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);
@@ -268,13 +273,15 @@ function blur(e) {
 
 {#if is_compact}
     <div class="inline-block relative {line_h}">
-       <span class="dark:text-gray-300 {font_size} truncate  
-                    pl-2.5 pr-5
-                    absolute left-0 top-0 h-full" >
-            {pretty_value}
+       <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="w-3 h-3 absolute right-0 top-1.5 sm:top-0.5 text-gray-700 dark:text-gray-300">
+                <div class="no-print ml-auto w-3 h-3 {chevron_mt} text-stone-700 dark:text-stone-300">
                     <FaChevronDown/>
                 </div>
             {/if}
@@ -283,12 +290,14 @@ function blur(e) {
                 {#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}
@@ -297,7 +306,7 @@ function blur(e) {
 
                 
             {/if}
-        </span>
+        </div>
 
         
     </div>
@@ -351,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;