@humandialog/forms.svelte 1.3.11 → 1.3.12

package/components/combo/combo.svelte

@@ -54,8 +54,8 @@ switch (s) {
     label_mb = "mb-2";
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
-    font_size = "text-lg";
-    line_h = "h-7 sm:h-5";
+    font_size = "text-base";
+    line_h = "h-5 sm:h-5";
     chevron_mt = "mt-2 sm:mt-1";
     break;
   case "xs":
@@ -75,11 +75,11 @@ switch (s) {
     chevron_mt = "";
     break;
   default:
-    label_mb = "mb-0.5";
-    input_pt = "pt-0.5";
-    input_pb = "pb-0.5";
-    font_size = "text-base";
-    line_h = "h-6";
+    label_mb = "";
+    input_pt = "";
+    input_pb = "";
+    font_size = "";
+    line_h = "";
     chevron_mt = "";
 }
 let background_class = is_compact && !icon ? "" : "";
@@ -153,7 +153,7 @@ let on_hide_callback = void 0;
 export function show(event, hide_callback) {
   if (!can_be_activated)
     return;
-  if (!combo)
+  if (!textbox)
     return;
   if (is_dropdown_open)
     return;
@@ -171,7 +171,7 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect = combo.getBoundingClientRect();
+  let rect = textbox.getBoundingClientRect();
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
   let palette_max_height_px = 500;
@@ -579,13 +579,14 @@ function on_focus_out(e) {
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    bind:this={combo}    
-            on:click={(e) => { show(e, undefined) }}
-            class:cursor-pointer={can_be_activated && is_compact}
             class="max-w-full {appearance_class} flex flex-row content-between items-center"
          >
             
-        <div class="max-w-full flex-1 flex flex-row items-center">
-            {#if !is_dropdown_open}
+        <p  class="max-w-full flex-1 flex flex-row items-center"
+            on:click={(e) => { show(e, undefined) }}
+            class:cursor-pointer={can_be_activated && is_compact}>
+            
+            {#if true || !is_dropdown_open}
                 {#if icon && sel_item}
                     {#if sel_item.Color}
                         <Icon size={5} circle={true} color={sel_item.Color}/>
@@ -600,7 +601,7 @@ function on_focus_out(e) {
             {/if}
 
             
-            <p  bind:this={textbox}
+            <span  bind:this={textbox}
                 class="dark:text-stone-300 {line_h} truncate pl-0 pr-2.5 {background_class} min-w-[2.5rem]"
                 class:ml-2={icon}
                 class:text-stone-400={ (!is_dropdown_open) && (!sel_item)}
@@ -609,18 +610,20 @@ function on_focus_out(e) {
                 contenteditable={is_dropdown_open && filtered}
                 on:keydown={on_keydown}
                 tabindex="0">
-                {combo_text}</p>
-        </div>
+                {combo_text}</span>
+
+            {#if can_be_activated }
+                <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}">
+                    <FaChevronDown/>
+                </div>
+            {/if}
+        </p>
+        
         
-        {#if can_be_activated }
-            <div class="w-3 h-3 no-print flex-none text-stone-700 dark:text-stone-300 {chevron_mt}">
-                <FaChevronDown/>
-            </div>
-        {/if}
     </div>
 
     <div    hidden={!is_dropdown_open} 
-            class="{cs} 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 overflow-y-auto cursor-pointer z-30"
+            class="not-prose {cs} 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 overflow-y-auto cursor-pointer z-30"
             style={dropdown_position}
             use:dropdown_action>
         <ul class="py-1">

package/components/combo/combo.svelte.d.ts

@@ -1,44 +1,44 @@
-import { SvelteComponentTyped } from "svelte";
-import { rCombo_definition } from './combo';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string | undefined;
-        self?: null | undefined;
-        a?: string | undefined;
-        isAssociation?: boolean | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        choiceCallback?: string | undefined;
-        onSelect?: undefined;
-        definition?: rCombo_definition | null | undefined;
-        changed?: undefined;
-        onNewItemCreated?: undefined;
-        icon?: boolean | undefined;
-        placeholder?: string | undefined;
-        s?: string | undefined;
-        c?: string | undefined;
-        compact?: boolean | undefined;
-        inContext?: string | undefined;
-        cached?: boolean | undefined;
-        filtered?: boolean | undefined;
-        pushChangesImmediately?: boolean | undefined;
-        hasNone?: boolean | undefined;
-        show?: ((event: any, hide_callback: any) => void) | undefined;
-        hide?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ComboProps = typeof __propDef.props;
-export type ComboEvents = typeof __propDef.events;
-export type ComboSlots = typeof __propDef.slots;
-export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
-    get show(): (event: any, hide_callback: any) => void;
-    get hide(): () => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+import { rCombo_definition } from './combo';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        isAssociation?: boolean | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        choiceCallback?: string | undefined;
+        onSelect?: undefined;
+        definition?: rCombo_definition | null | undefined;
+        changed?: undefined;
+        onNewItemCreated?: undefined;
+        icon?: boolean | undefined;
+        placeholder?: string | undefined;
+        s?: string | undefined;
+        c?: string | undefined;
+        compact?: boolean | undefined;
+        inContext?: string | undefined;
+        cached?: boolean | undefined;
+        filtered?: boolean | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        hasNone?: boolean | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ComboProps = typeof __propDef.props;
+export type ComboEvents = typeof __propDef.events;
+export type ComboSlots = typeof __propDef.slots;
+export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+    get show(): (event: any, hide_callback: any) => void;
+    get hide(): () => void;
+}
+export {};

package/components/contextmenu.svelte.d.ts

@@ -1,26 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        widthPx?: number | undefined;
-        menu_items_id_prefix?: string | undefined;
-        owner_menu_item?: HTMLElement | undefined;
-        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
-        isVisible?: (() => boolean) | undefined;
-        hide?: (() => void) | undefined;
-        getRenderedRect?: (() => DOMRect | undefined) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ContextmenuProps = typeof __propDef.props;
-export type ContextmenuEvents = typeof __propDef.events;
-export type ContextmenuSlots = typeof __propDef.slots;
-export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
-    get show(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
-    get isVisible(): () => boolean;
-    get hide(): () => void;
-    get getRenderedRect(): () => DOMRect | undefined;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        widthPx?: number | undefined;
+        menu_items_id_prefix?: string | undefined;
+        owner_menu_item?: HTMLElement | undefined;
+        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
+        isVisible?: (() => boolean) | undefined;
+        hide?: (() => void) | undefined;
+        getRenderedRect?: (() => DOMRect | undefined) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextmenuProps = typeof __propDef.props;
+export type ContextmenuEvents = typeof __propDef.events;
+export type ContextmenuSlots = typeof __propDef.slots;
+export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
+    get show(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
+    get isVisible(): () => boolean;
+    get hide(): () => void;
+    get getRenderedRect(): () => DOMRect | undefined;
+}
+export {};

package/components/date.svelte

@@ -73,6 +73,12 @@ switch (s) {
       line_h = "h-6 sm:h-6";
     chevron_mt = "mt-1.5 sm:mt-0.5";
     break;
+  default:
+    input_pt = "";
+    input_pb = "";
+    font_size = "";
+    line_h = "";
+    chevron_mt = "";
 }
 let item = null;
 let user_class = $$restProps.class ?? "";
@@ -291,40 +297,44 @@ function blur(e) {
 </script>
 
 {#if is_compact}
-    <div class="inline-block relative {line_h}">
+    <div class="inline-block  {line_h}">
        <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>
+                    h-full " >
+            <p >
+                <span class="inline-block relative flex flex-row  items-center">
+                    <span class="grow-1 pr-2.5 ">
+                        {pretty_value}
+                    </span>
 
-            {#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 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>
+            </p>
 
-                
-            {/if}
         </div>
 
         

package/components/date.svelte.d.ts

@@ -1,33 +1,33 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        self?: null | undefined;
-        a?: string | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        date?: Date | undefined;
-        onSelect?: undefined;
-        type?: string | undefined;
-        changed?: undefined;
-        s?: string | undefined;
-        c?: string | undefined;
-        compact?: boolean | undefined;
-        inContext?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
-        show?: ((event: any, hide_callback: any) => void) | undefined;
-        refresh?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DateProps = typeof __propDef.props;
-export type DateEvents = typeof __propDef.events;
-export type DateSlots = typeof __propDef.slots;
-export default class Date extends SvelteComponentTyped<DateProps, DateEvents, DateSlots> {
-    get show(): (event: any, hide_callback: any) => void;
-    get refresh(): () => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        date?: Date | undefined;
+        onSelect?: undefined;
+        type?: string | undefined;
+        changed?: undefined;
+        s?: string | undefined;
+        c?: string | undefined;
+        compact?: boolean | undefined;
+        inContext?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
+        refresh?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateProps = typeof __propDef.props;
+export type DateEvents = typeof __propDef.events;
+export type DateSlots = typeof __propDef.slots;
+export default class Date extends SvelteComponentTyped<DateProps, DateEvents, DateSlots> {
+    get show(): (event: any, hide_callback: any) => void;
+    get refresh(): () => void;
+}
+export {};

package/components/delayed.spinner.svelte.d.ts

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        color?: string | undefined;
-        size?: number | undefined;
-        delay?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DelayedProps = typeof __propDef.props;
-export type DelayedEvents = typeof __propDef.events;
-export type DelayedSlots = typeof __propDef.slots;
-export default class Delayed extends SvelteComponentTyped<DelayedProps, DelayedEvents, DelayedSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: string | undefined;
+        size?: number | undefined;
+        delay?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DelayedProps = typeof __propDef.props;
+export type DelayedEvents = typeof __propDef.events;
+export type DelayedSlots = typeof __propDef.slots;
+export default class Delayed extends SvelteComponentTyped<DelayedProps, DelayedEvents, DelayedSlots> {
+}
+export {};

package/components/document/editor.svelte

@@ -186,6 +186,7 @@ const suggestion = {
           editor.commands.blur();
           palette.set_current_editor_range(props.range);
           const cursorRect = props.clientRect();
+          palette.filter("");
           setTimeout(() => show_command_palette(cursorRect), 100);
         } else {
           const cursorRect = props.clientRect();
@@ -585,10 +586,12 @@ function show_command_palette(cursor_rect) {
     show_big_command_palette(cursor_rect, client_rect);
 }
 function show_small_command_palette(client_rect) {
-  palette.max_height_px = client_rect.height - 64;
-  palette.width_px = client_rect.width - 96;
-  let x = 64, y = 32;
-  let show_above = false;
+  const margin = 5;
+  palette.max_height_px = client_rect.height / 2 - margin;
+  palette.width_px = client_rect.width - 2 * margin;
+  let x = margin;
+  let y = client_rect.bottom - margin;
+  let show_above = true;
   palette.show(x, y, show_above);
 }
 function show_big_command_palette(cursor_rect, client_rect) {
@@ -661,6 +664,9 @@ function handleImagesChanges(transaction) {
 }
 let commands = [
   //{    caption: 'Styles',       separator: true },
+  { caption: "Back to edit", description: "Escape", icon: FaArrowLeft, on_choice: () => {
+    editor?.commands.focus();
+  }, is_visible: () => isDeviceSmallerThan("sm") },
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();

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

@@ -1,35 +1,35 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | undefined;
-        placeholder?: string | undefined;
-        self?: null | undefined;
-        a?: string | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        compact?: boolean | undefined;
-        onFocusCb?: undefined;
-        onBlurCb?: undefined;
-        onAddImage?: undefined;
-        onRemoveImage?: undefined;
-        c?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
-        run?: ((onStop?: undefined) => void) | undefined;
-        getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
-        save?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type EditorProps = typeof __propDef.props;
-export type EditorEvents = typeof __propDef.events;
-export type EditorSlots = typeof __propDef.slots;
-export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
-    get run(): (onStop?: undefined) => void;
-    get getFormattingOperations(): (withCaptions?: boolean) => any[];
-    get save(): () => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        compact?: boolean | undefined;
+        onFocusCb?: undefined;
+        onBlurCb?: undefined;
+        onAddImage?: undefined;
+        onRemoveImage?: undefined;
+        c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        run?: ((onStop?: undefined) => void) | undefined;
+        getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
+        save?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
+export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
+    get run(): (onStop?: undefined) => void;
+    get getFormattingOperations(): (withCaptions?: boolean) => any[];
+    get save(): () => void;
+}
+export {};

package/components/document/internal/Document_command.d.ts

@@ -1,11 +1,12 @@
-export declare class Document_command {
-    caption: string;
-    description: string;
-    tags?: string;
-    shortcut?: string;
-    icon: any;
-    icon_size?: number;
-    on_choice: any;
-    is_active: any;
-    separator?: boolean;
-}
+export declare class Document_command {
+    caption: string;
+    description: string;
+    tags?: string;
+    shortcut?: string;
+    icon: any;
+    icon_size?: number;
+    on_choice: any;
+    is_active: any;
+    is_visible: any;
+    separator?: boolean;
+}

package/components/document/internal/Document_command.js

@@ -1,11 +1,12 @@
-export class Document_command {
-    caption;
-    description;
-    tags;
-    shortcut;
-    icon;
-    icon_size = 6;
-    on_choice;
-    is_active;
-    separator = false;
-}
+export class Document_command {
+    caption;
+    description;
+    tags;
+    shortcut;
+    icon;
+    icon_size = 6;
+    on_choice;
+    is_active;
+    is_visible;
+    separator = false;
+}

package/components/document/internal/Selection_helper.d.ts

@@ -1,7 +1,7 @@
-import { Selection_range } from "./Selection_range";
-export declare class Selection_helper {
-    private static nodewalk;
-    static create_cursor_range(elem: HTMLElement, nrOfChars: number): [Range, Node];
-    static create_range(elem: HTMLElement, start: number, end: number): Range;
-    static get_selection(elem: HTMLElement): Selection_range;
-}
+import { Selection_range } from "./Selection_range";
+export declare class Selection_helper {
+    private static nodewalk;
+    static create_cursor_range(elem: HTMLElement, nrOfChars: number): [Range, Node];
+    static create_range(elem: HTMLElement, start: number, end: number): Range;
+    static get_selection(elem: HTMLElement): Selection_range;
+}