@humandialog/forms.svelte 0.5.13 → 0.5.15

package/components/combo/combo.svelte

@@ -244,7 +244,6 @@ function selected_item(itm, a2) {
     let found = definition.source.find((e) => e.Key == choosed_value);
     if (!found)
       found = definition.source.find((e) => e.Name == choosed_value);
-    console.log("found: ", found);
     if (found)
       return found;
     else

package/components/document/internal/h1.icon.svelte

@@ -0,0 +1,16 @@
+
+<svg viewBox="100 150 800 550" xmlns="http://www.w3.org/2000/svg" {...$$props}>
+    <path
+        d="m673 708.144c-10 0-24 0-44-1s-34-1-43-1c-10 0-24 0-43 1s-33 1-43 1c-5 0-9-2-12-6s-4-10-4-15c0-7 1-12 5-15s8-5 13-6 10-1 16-2 12-3 15-5c7-4 11-19 11-45l-1-127v-10c-3-1-8-2-16-2h-219c-9 0-14 1-17 2-1 2-1 5-1 10v120c0 31 4 49 12 54 3 2 9 4 16 4s13 1 19 1 10 2 14 5 7 8 7 15c0 6-1 11-4 16s-7 6-12 6c-10 0-26 0-46-1s-35-1-45-1c-9 0-23 0-41 1s-32 1-42 1c-5 0-8-2-11-6s-4-10-4-15c0-7 1-11 5-15s7-5 11-5 10-2 16-3 10-3 13-5c7-5 11-20 11-47v-282-9-12s-1-7-1-12 0-10-1-14-1-8-2-12-2-8-4-11-3-4-5-5c-3-3-8-4-14-4s-12-1-17-1-10-2-14-5-6-8-6-14 2-11 4-16 7-7 12-7c10 0 25 0 45 1s35 1 45 1c9 0 23 0 41-1s32-1 41-1c6 0 10 3 12 7s5 10 5 16c0 7-2 11-6 14s-8 5-12 5-10 1-17 1-10 2-14 4c-7 5-11 22-11 52v105c0 4 0 8 1 10 3 1 7 1 12 1h228c5 0 9-1 12-1 1-2 1-6 1-10v-105c0-30-4-47-11-52-4-2-10-3-19-4s-16-1-22-4-8-8-8-16c0-6 1-11 4-16s7-7 12-7c10 0 24 0 43 1s33 1 43 1c9 0 23 0 42-1s32-1 42-1c5 0 10 2 12 7s4 10 4 16-2 11-6 14-8 5-12 5h-17s-11 2-14 5c-8 5-12 22-12 52l1 307c0 26 4 41 11 46 3 2 8 3 15 4s13 1 18 2 9 2 13 5 6 8 6 14-1 11-4 16-7 7-12 7zm40-244-18-30 114-84h31v290s0 8-1 12 0 8 0 11-1 6-1 8l37-2v39h-143v-33c5 0 10-1 15-2 4-1 8-2 11-5s5-7 7-13 3-14 3-24v-200z" />
+</svg>
+
+<style>
+    svg {
+        stroke: currentColor;
+        fill: currentColor;
+        stroke-width: 0;
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }  
+</style>

package/components/document/internal/h1.icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  H1Props */
+/** @typedef {typeof __propDef.events}  H1Events */
+/** @typedef {typeof __propDef.slots}  H1Slots */
+export default class H1 extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type H1Props = typeof __propDef.props;
+export type H1Events = typeof __propDef.events;
+export type H1Slots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/document/internal/h2.icon.svelte

@@ -0,0 +1,16 @@
+
+<svg viewBox="100 150 800 550" xmlns="http://www.w3.org/2000/svg" {...$$props}>
+    <path
+        d="M631 708.144c-10 0-24 0-43-1s-34-1-44-1c-9 0-24 0-43 1s-33 1-43 1c-5 0-9-2-12-6s-4-10-4-15c0-7 2-12 6-15s7-5 12-6 10-1 17-2 11-3 14-5c7-4 11-19 11-45v-127c0-5 0-8-1-10-3-1-8-2-16-2H266c-8 0-14 1-17 2v10l-1 120c0 31 5 49 12 54 4 2 9 4 16 4s14 1 19 1 10 2 15 5 6 8 6 15c0 6-1 11-4 16s-7 6-12 6c-10 0-25 0-45-1s-35-1-45-1-24 0-42 1-32 1-41 1c-5 0-9-2-12-6s-4-10-4-15c0-7 2-11 5-15s7-5 12-5 9-2 15-3 10-3 14-5c7-5 11-20 11-47l-1-18v-264-9-12-12s-1-10-2-14-1-8-2-12-2-8-3-11-4-4-5-5c-4-3-9-4-15-4s-12-1-17-1-10-2-13-5-6-8-6-14 1-11 4-16 6-7 11-7c10 0 25 0 45 1s35 1 45 1c9 0 23 0 41-1s33-1 42-1c5 0 9 3 12 7s4 10 4 16c0 7-2 11-5 14s-8 5-13 5-10 1-16 1-11 2-14 4c-8 5-12 22-12 52l1 105v10c3 1 7 1 13 1h227c6 0 10-1 13-1v-10l1-105c0-30-4-47-12-52-3-2-10-3-19-4s-16-1-22-4-8-8-8-16c0-6 1-11 4-16s7-7 12-7c10 0 24 0 43 1s34 1 43 1 24 0 42-1 33-1 42-1c6 0 10 2 12 7s5 10 5 16-2 11-6 14-9 5-13 5h-17s-11 2-14 5c-7 5-11 22-11 52v307c0 26 4 41 11 46 4 2 9 3 15 4s13 1 18 2 10 2 13 5 6 8 6 14-1 11-4 16-7 7-12 7zm152-322c-9 0-17 2-24 6s-13 9-16 15c3 3 6 8 7 13s2 9 2 12 0 7-2 11-3 7-5 10c-3 4-7 6-11 8s-9 4-16 4c-5 0-9-2-13-4s-7-4-10-8c-3-3-5-7-7-11s-2-10-2-14c0-5 2-11 4-16s5-12 9-18 9-11 16-17c6-5 13-10 21-14s17-7 27-10 21-3 32-3c14 0 27 1 40 5s26 8 37 16 19 17 26 29 10 27 10 44c0 8-2 17-5 26s-9 20-17 31-19 24-33 38-33 30-56 48c-9 8-17 15-24 22s-12 13-16 20-8 11-11 16-4 9-4 12l98 3h3c5 0 10-1 14-2s8-2 11-5 5-6 7-10 2-9 2-16h32l-4 81H686c0-17 2-32 7-46s10-26 17-37 16-21 25-31 19-18 29-27c12-12 22-22 31-32s15-20 20-30c6-9 10-18 12-27s4-18 4-27c0-8-1-16-2-24s-4-15-8-21-8-11-14-15c-7-3-14-5-24-5z" />
+</svg>
+
+<style>
+    svg {
+        stroke: currentColor;
+        fill: currentColor;
+        stroke-width: 0;
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }  
+</style>

package/components/document/internal/h2.icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  H2Props */
+/** @typedef {typeof __propDef.events}  H2Events */
+/** @typedef {typeof __propDef.slots}  H2Slots */
+export default class H2 extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type H2Props = typeof __propDef.props;
+export type H2Events = typeof __propDef.events;
+export type H2Slots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/document/internal/h3.icon.svelte

@@ -0,0 +1,16 @@
+
+<svg viewBox="100 150 800 550" xmlns="http://www.w3.org/2000/svg" {...$$props}>
+    <path
+        d="M631 708.144c-10 0-24 0-43-1-20-1-34-1-44-1-9 0-24 0-43 1s-33 1-43 1c-5 0-9-2-12-6-3-5-4-10-4-15 0-7 2-12 6-15 3-4 7-5 12-6 5 0 10-1 17-2 6-1 11-3 14-5 7-4 11-19 11-45v-127c0-5 0-8-1-10-3-1-8-2-16-2H266c-8 0-14 1-17 2v10l-1 120c0 31 5 49 12 54 4 2 9 4 16 4 7 1 14 1 19 1s10 2 15 5c4 4 6 8 6 15 0 6-1 11-4 16s-7 7-12 7c-10 0-25 0-45-1s-35-1-45-1-24 0-42 1-32 1-41 1c-5 0-9-2-12-7-3-4-4-9-4-14 0-7 2-11 5-15 3-3 7-5 12-6 4 0 9-1 15-2s10-3 14-5c7-5 11-20 11-47l-1-18v-265-9-12-12c-1-6-1-10-2-14 0-4-1-8-2-12 0-4-2-8-3-11l-5-5c-4-3-9-4-15-4-7-1-12-1-17-1s-10-2-13-5c-4-3-6-8-6-14s1-11 4-16c2-5 6-7 11-7 10 0 25 0 45 1s35 1 45 1c9 0 23 0 41-1 19-1 33-1 42-1 5 0 9 2 12 7s4 10 4 16-2 11-5 14c-4 3-8 5-13 5s-10 0-16 1-11 2-14 4c-8 5-12 22-12 52l1 104v11h253v-11l1-104c0-30-4-47-12-52-3-3-10-4-19-4s-16-2-22-4c-5-3-8-8-8-17 0-5 1-10 4-15s7-8 12-8c10 0 24 1 43 2s34 1 43 1 24 0 42-1c19-1 33-2 42-2 6 0 10 3 12 8 3 4 5 10 5 15 0 7-2 12-6 15-4 2-9 4-13 4-5 0-11 1-17 1s-11 2-14 4c-7 5-11 23-11 53v307c0 26 4 41 11 45 4 2 9 4 15 5 7 1 13 1 18 1 5 1 10 2 13 5 4 4 6 8 6 15 0 6-1 11-4 16s-7 7-12 7zm53-61c0-5 1-10 3-15 1-5 4-9 7-12s6-6 11-8c4-2 9-3 14-3 6 0 11 1 15 3s7 5 9 8 5 7 6 10c1 4 1 8 1 11s0 7-1 11c-1 5-4 9-6 12 2 3 4 6 7 8 3 3 7 5 11 7 4 1 8 3 13 3 4 1 9 2 14 2 10 0 20-2 27-5 8-4 15-8 20-14s9-13 12-21 4-17 4-26-1-18-3-26c-2-9-6-17-12-24s-13-12-23-16c-10-5-21-7-36-7h-12c-3 0-5 1-8 1h-6v-36c2 1 4 1 5 1h4c24 0 43-5 56-16 13-12 20-28 20-49 0-9-1-16-3-23-1-7-4-13-8-18s-9-8-15-11-12-4-21-4c-4 0-9 0-13 1s-8 3-11 5l-9 6c-3 3-5 5-6 8 3 4 5 8 6 13 1 4 2 9 2 12s-1 7-2 10-3 7-6 10c-2 4-6 6-10 9-5 2-10 3-16 3s-10-1-14-3-7-5-10-8c-2-4-5-7-6-12-1-4-2-9-2-14 0-7 2-15 6-24 5-9 11-17 20-25s20-14 33-19 28-8 46-8c15 0 30 1 43 4 14 3 26 9 36 16s18 16 24 27c5 11 8 25 8 41 0 7-1 14-4 22-2 8-7 16-13 23-6 8-13 14-23 20s-21 11-35 14v1c16 3 30 7 42 13 11 6 21 13 29 21 7 9 13 18 17 27 4 10 5 20 5 31 0 17-3 32-10 46s-16 24-28 33-25 16-42 20-34 7-54 7c-19 0-35-2-49-6s-25-10-33-17-16-15-20-24-6-18-6-26z" />
+</svg>
+
+<style>
+    svg {
+        stroke: currentColor;
+        fill: currentColor;
+        stroke-width: 0;
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }  
+</style>

package/components/document/internal/h3.icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  H3Props */
+/** @typedef {typeof __propDef.events}  H3Events */
+/** @typedef {typeof __propDef.slots}  H3Slots */
+export default class H3 extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type H3Props = typeof __propDef.props;
+export type H3Events = typeof __propDef.events;
+export type H3Slots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/document/internal/h4.icon.svelte

@@ -0,0 +1,16 @@
+
+<svg viewBox="100 150 800 550" xmlns="http://www.w3.org/2000/svg" {...$$props}>
+    <path
+        d="m631 708.144c-10 0-24 0-43-1s-34-1-44-1c-9 0-24 0-43 1s-33 1-43 1c-5 0-9-2-12-6s-4-10-4-15c0-7 2-12 6-15s7-5 12-6 10-1 17-2 11-3 14-5c7-4 11-19 11-45v-127c0-5 0-8-1-10-3-1-8-2-16-2h-219c-8 0-14 1-17 2v10l-1 120c0 31 5 49 12 54 4 2 9 4 16 4s14 1 19 1 10 2 15 5 6 8 6 15c0 6-1 11-4 16s-7 6-12 6c-10 0-25 0-45-1s-35-1-45-1-24 0-42 1-32 1-41 1c-5 0-9-2-12-6s-4-10-4-15c0-7 2-11 5-15s7-5 12-5 9-2 15-3 10-3 14-5c7-5 11-20 11-47l-1-18v-264-9-12-12s-1-10-2-14-1-8-2-12-2-8-3-11-4-4-5-5c-4-3-9-4-15-4s-12-1-17-1-10-2-13-5-6-8-6-14 1-11 4-16 6-7 11-7c10 0 25 0 45 1s35 1 45 1c9 0 23 0 41-1s33-1 42-1c5 0 9 3 12 7s4 10 4 16c0 7-2 11-5 14s-8 5-13 5-10 1-16 1-11 2-14 4c-8 5-12 22-12 52l1 105v10c3 1 7 1 13 1h227c6 0 10-1 13-1v-10l1-105c0-30-4-47-12-52-3-2-10-3-19-4s-16-1-22-4-8-8-8-16c0-6 1-11 4-16s7-7 12-7c10 0 24 0 43 1s34 1 43 1 24 0 42-1 33-1 42-1c6 0 10 2 12 7s5 10 5 16-2 11-6 14-9 5-13 5h-17s-11 2-14 5c-7 5-11 22-11 52v307c0 26 4 41 11 46 4 2 9 3 15 4s13 1 18 2 10 2 13 5 6 8 6 14-1 11-4 16-7 7-12 7zm244-90v22s0 8-1 12 0 8 0 11-1 6-1 8l37-2v39h-142v-33c5 0 10-1 15-2s8-2 11-5 5-7 7-13 2-14 2-24v-14h-130v-46l172-221h30v222h49v46zm-156-47h84v-110z" />
+</svg>
+
+<style>
+    svg {
+        stroke: currentColor;
+        fill: currentColor;
+        stroke-width: 0;
+        width: 100%;
+        height: auto;
+        max-height: 100%;
+    }  
+</style>

package/components/document/internal/h4.icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  H4Props */
+/** @typedef {typeof __propDef.events}  H4Events */
+/** @typedef {typeof __propDef.slots}  H4Slots */
+export default class H4 extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type H4Props = typeof __propDef.props;
+export type H4Events = typeof __propDef.events;
+export type H4Slots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/document/internal/palette.svelte

@@ -18,11 +18,11 @@ let toolboxY;
 export function showAsToolbox(rect) {
   isToolbox = true;
   visible = true;
-  const margin = 15;
+  const margin = 0;
   const windowWidth = window.innerWidth - 2 * margin;
   toolboxX = margin;
   toolboxY = rect.bottom + margin;
-  css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
+  css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
   dispatch("palette_shown");
 }
 export function show(x, y, up = false) {
@@ -171,7 +171,8 @@ function mouseup(e) {
                     <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
                         {#if cmd.icon}
                             {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
+                            {@const default_icon_size = icon_placeholder_size - cc}
+                            {@const icon_size = cmd.icon_size ? cmd.icon_size : default_icon_size}
                             <Icon size={icon_size} component={cmd.icon}/>
                         {/if}
                     </div>

package/components/document/rich.edit.svelte

@@ -1,5 +1,5 @@
 <script>import { Selection_helper } from "./internal/Selection_helper";
-import { afterUpdate, getContext, onDestroy, onMount } from "svelte";
+import { beforeUpdate, afterUpdate, getContext, onDestroy, onMount } from "svelte";
 import { Selection_range, Selection_edge } from "./internal/Selection_range";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
@@ -13,6 +13,10 @@ import FaComments from "svelte-icons/fa/FaComment.svelte";
 import FaQuote from "svelte-icons/fa/FaQuoteRight.svelte";
 import FaWarn from "svelte-icons/fa/FaExclamationTriangle.svelte";
 import FaInfo from "svelte-icons/fa/FaInfo.svelte";
+import IcH1 from "./internal/h1.icon.svelte";
+import IcH2 from "./internal/h2.icon.svelte";
+import IcH3 from "./internal/h3.icon.svelte";
+import IcH4 from "./internal/h4.icon.svelte";
 import { showMenu } from "../menu";
 export let value = "";
 export let placeholder = "";
@@ -85,8 +89,6 @@ function setup_source() {
   if (!value)
     value = "<p>\u200B</p>";
   has_changed_value = false;
-  if (stored_selection)
-    set_selection(stored_selection);
 }
 onMount(() => {
   if (!editable_div)
@@ -114,6 +116,19 @@ onDestroy(() => {
   if (is_command_palette_visible)
     hide_command_palette();
 });
+let storedSelection = null;
+beforeUpdate(() => {
+  if (editable_div && document.activeElement == editable_div)
+    storedSelection = Selection_helper.get_selection(editable_div);
+  else
+    storedSelection = null;
+});
+afterUpdate(() => {
+  if (storedSelection) {
+    const range = Selection_helper.create_range(editable_div, storedSelection.begin.absolute_index, storedSelection.end.absolute_index);
+    set_selection(range);
+  }
+});
 function content_changed(checkZeroWitdhSpaces) {
   if (document.activeElement != editable_div)
     return;
@@ -755,7 +770,7 @@ function set_tag_and_class_for_paragraph(node, tag, css_class) {
 function do_format(tag, css_class) {
   const elem = editable_div;
   const editableElem = editable_div;
-  let stored_selection2 = Selection_helper.get_selection(elem);
+  let stored_selection = Selection_helper.get_selection(elem);
   let sel = window.getSelection();
   let should_restore_selection = false;
   if (sel.isCollapsed || sel.focusNode === sel.anchorNode) {
@@ -784,7 +799,7 @@ function do_format(tag, css_class) {
     } while (node);
   }
   if (should_restore_selection) {
-    const range = Selection_helper.create_range(editableElem, stored_selection2.begin.absolute_index, stored_selection2.end.absolute_index);
+    const range = Selection_helper.create_range(editableElem, stored_selection.begin.absolute_index, stored_selection.end.absolute_index);
     set_selection(range);
   }
 }
@@ -941,10 +956,7 @@ function navigate_command_palette(key) {
   else if (key == "ArrowUp")
     palette.navigate_up();
 }
-let stored_selection = void 0;
 function on_selection_changed() {
-  let active_range = Selection_helper.get_selection(editable_div);
-  stored_selection = window.getSelection()?.getRangeAt(0);
 }
 let intervalId = 0;
 function on_focus() {
@@ -952,7 +964,7 @@ function on_focus() {
 function on_blur() {
   let active_range = Selection_helper.get_selection(editable_div);
   console.log("rich.edit: on_blur", active_range?.begin?.absolute_index);
-  stored_selection = void 0;
+  storedSelection = null;
   if (onBlur) {
     onBlur();
     onBlur = void 0;
@@ -989,10 +1001,10 @@ let commands = [
   //   {   caption: 'Heading 1',    description: 'Big section heading',            tags: 'h1',      icon: FaHead,    icon_size: 6,      on_choice: () => { do_format('h2', '') } } ,
   //   {   caption: 'Heading 2',    description: 'Medium section heading',         tags: 'h2',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
   //   {   caption: 'Heading 3',    description: 'Small section heading',          tags: 'h3',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
-  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: FaHead, icon_size: 6, on_choice: () => {
+  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: IcH1, on_choice: () => {
     do_format("h1", "");
   } },
-  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: FaHead, icon_size: 6, on_choice: () => {
+  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: IcH2, on_choice: () => {
     do_format("h2", "");
   } },
   //   {   caption: 'Heading 2',      description: 'Medium description heading',     tags: 'h3',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -61,6 +61,10 @@
     "./components/date.svelte": "./components/date.svelte",
     "./components/delayed.spinner.svelte": "./components/delayed.spinner.svelte",
     "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",
+    "./components/document/internal/h1.icon.svelte": "./components/document/internal/h1.icon.svelte",
+    "./components/document/internal/h2.icon.svelte": "./components/document/internal/h2.icon.svelte",
+    "./components/document/internal/h3.icon.svelte": "./components/document/internal/h3.icon.svelte",
+    "./components/document/internal/h4.icon.svelte": "./components/document/internal/h4.icon.svelte",
     "./components/document/internal/palette.row.svelte": "./components/document/internal/palette.row.svelte",
     "./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
     "./components/document/internal/Selection_helper": "./components/document/internal/Selection_helper.js",