@humandialog/forms.svelte 1.3.11 → 1.3.13

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

@@ -26,7 +26,7 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
-import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, toolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -46,7 +46,8 @@ import {
   FaArrowLeft,
   FaGripLines,
   FaListUl,
-  FaTable
+  FaTable,
+  FaTimes
 } from "svelte-icons/fa";
 import IcH1 from "./internal/h1.icon.svelte";
 import IcH2 from "./internal/h2.icon.svelte";
@@ -186,6 +187,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();
@@ -573,9 +575,31 @@ function on_palette_mouse_click() {
 }
 function on_palette_shown() {
   is_command_palette_visible = true;
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Palette",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                palette.hide();
+                editor?.commands.focus();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 function on_palette_hidden() {
   is_command_palette_visible = false;
+  $toolsActionsOperations = [];
 }
 function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();
@@ -585,10 +609,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 +687,7 @@ 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;
+}