@humandialog/forms.svelte 1.3.16 → 1.4.0

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

@@ -16,9 +16,69 @@ declare const __propDef: {
         onRemoveImage?: undefined;
         c?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
+        chat?: object | undefined;
+        readOnly?: boolean | undefined;
+        extraFrontPaletteCommands?: any[] | undefined;
+        extraBackPaletteCommands?: any[] | undefined;
+        extraInsertPaletteCommands?: any[] | undefined;
         run?: ((onStop?: undefined) => void) | undefined;
         getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
+        getMarksOperations?: ((tbr?: string) => {
+            caption: string;
+            operations: any[];
+            preAction: (f: any) => void;
+            tbr: string;
+        }) | undefined;
+        getStylesOperations?: ((tbr?: string) => {
+            caption: string;
+            operations: any[];
+            preAction: (f: any) => void;
+            tbr: string;
+        }) | undefined;
+        getInsertOperations?: ((tbr?: string) => {
+            caption: string;
+            operations: any[];
+            preAction: (f: any) => void;
+            tbr: string;
+        }) | undefined;
+        scrollIntoView?: ((param: any) => void) | undefined;
         save?: (() => void) | undefined;
+        addTemporaryImage?: ((src: any) => void) | undefined;
+        replaceTemporaryImage?: ((temporarySrc: any, dataPath: any) => void) | undefined;
+        removeTemporaryImage?: ((temporarySrc: any) => void) | undefined;
+        getInnerHtml?: (() => any) | undefined;
+        setInnerHtml?: ((content: any) => void) | undefined;
+        setBold?: (() => void) | undefined;
+        setItalic?: (() => void) | undefined;
+        setUnderline?: (() => void) | undefined;
+        setStrikethrough?: (() => void) | undefined;
+        setNormal?: (() => void) | undefined;
+        setHeading?: ((level: any) => void) | undefined;
+        setCode?: (() => void) | undefined;
+        setComment?: (() => void) | undefined;
+        setQuote?: (() => void) | undefined;
+        setWarning?: (() => void) | undefined;
+        setInfo?: (() => void) | undefined;
+        setBulletList?: (() => void) | undefined;
+        setImage?: (() => void) | undefined;
+        setTable?: (() => void) | undefined;
+        setHorizontalRule?: (() => void) | undefined;
+        isActiveBold?: (() => any) | undefined;
+        isActiveItalic?: (() => any) | undefined;
+        isActiveUnderlie?: (() => any) | undefined;
+        isActiveStrikethrough?: (() => any) | undefined;
+        isActiveNormal?: (() => any) | undefined;
+        isActiveHeading?: ((level: any) => any) | undefined;
+        isActiveCode?: (() => any) | undefined;
+        isActiveComment?: (() => any) | undefined;
+        isActiveQuote?: (() => any) | undefined;
+        isActiveWarning?: (() => any) | undefined;
+        isActiveInfo?: (() => any) | undefined;
+        isActiveBulletList?: (() => any) | undefined;
+        isActiveImage?: (() => boolean) | undefined;
+        isActiveTable?: (() => void) | undefined;
+        isActiveHorizontalRule?: (() => boolean) | undefined;
+        preventBlur?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -31,6 +91,61 @@ 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 getMarksOperations(): (tbr?: string) => {
+        caption: string;
+        operations: any[];
+        preAction: (f: any) => void;
+        tbr: string;
+    };
+    get getStylesOperations(): (tbr?: string) => {
+        caption: string;
+        operations: any[];
+        preAction: (f: any) => void;
+        tbr: string;
+    };
+    get getInsertOperations(): (tbr?: string) => {
+        caption: string;
+        operations: any[];
+        preAction: (f: any) => void;
+        tbr: string;
+    };
+    get scrollIntoView(): (param: any) => void;
     get save(): () => void;
+    get addTemporaryImage(): (src: any) => void;
+    get replaceTemporaryImage(): (temporarySrc: any, dataPath: any) => void;
+    get removeTemporaryImage(): (temporarySrc: any) => void;
+    get getInnerHtml(): () => any;
+    get setInnerHtml(): (content: any) => void;
+    get setBold(): () => void;
+    get setItalic(): () => void;
+    get setUnderline(): () => void;
+    get setStrikethrough(): () => void;
+    get setNormal(): () => void;
+    get setHeading(): (level: any) => void;
+    get setCode(): () => void;
+    get setComment(): () => void;
+    get setQuote(): () => void;
+    get setWarning(): () => void;
+    get setInfo(): () => void;
+    get setBulletList(): () => void;
+    get setImage(): () => void;
+    get setTable(): () => void;
+    get setHorizontalRule(): () => void;
+    get isActiveBold(): () => any;
+    get isActiveItalic(): () => any;
+    get isActiveUnderlie(): () => any;
+    get isActiveStrikethrough(): () => any;
+    get isActiveNormal(): () => any;
+    get isActiveHeading(): (level: any) => any;
+    get isActiveCode(): () => any;
+    get isActiveComment(): () => any;
+    get isActiveQuote(): () => any;
+    get isActiveWarning(): () => any;
+    get isActiveInfo(): () => any;
+    get isActiveBulletList(): () => any;
+    get isActiveImage(): () => boolean;
+    get isActiveTable(): () => void;
+    get isActiveHorizontalRule(): () => boolean;
+    get preventBlur(): () => void;
 }
 export {};

package/components/document/internal/palette.svelte

@@ -98,6 +98,26 @@ export function filter(key) {
     else
       return true;
   });
+  let lastSeparatorIdx = -1;
+  let commandsNo = filtered_commands.length;
+  for (let i = 0; i < commandsNo; i++) {
+    if (filtered_commands[i].separator == true) {
+      if (i == 0) {
+        filtered_commands.splice(i, 1);
+        commandsNo--;
+        i--;
+      } else if (lastSeparatorIdx < 0)
+        lastSeparatorIdx = i;
+      else if (lastSeparatorIdx == i - 1) {
+        filtered_commands.splice(i, 1);
+        commandsNo--;
+        i--;
+      } else
+        lastSeparatorIdx = i;
+    }
+  }
+  if (filtered_commands[commandsNo - 1].separator == true)
+    filtered_commands.splice(commandsNo - 1, 1);
   if (!current_command || filtered_commands.every((v) => v != current_command)) {
     if (filtered_commands.length)
       current_command = get_operation_or_next_valid(0);

package/components/list/List.d.ts

@@ -14,6 +14,11 @@ export declare class rList_property {
     a: string;
     onSelect: Function | undefined;
     position: number | string | undefined;
+    readOnly: boolean;
+    detailed: boolean;
+    prefix: string;
+    postfix: string;
+    getter: Function | undefined;
 }
 export declare class rList_property_combo extends rList_property {
     constructor();
@@ -44,4 +49,5 @@ export declare class rList_definition {
     inserter_icon: boolean;
     onOpen: Function | undefined;
     properties: rList_property[];
+    tags: rList_property_tags | null;
 }

package/components/list/List.js

@@ -17,6 +17,11 @@ export class rList_property {
     a = '';
     onSelect = undefined;
     position = undefined;
+    readOnly = false;
+    detailed = false;
+    prefix = '';
+    postfix = '';
+    getter = undefined;
 }
 export class rList_property_combo extends rList_property {
     constructor() {
@@ -52,4 +57,5 @@ export class rList_definition {
     inserter_icon = false;
     onOpen = undefined;
     properties = [];
+    tags = null;
 }

package/components/list/internal/list.element.props.svelte

@@ -70,10 +70,11 @@ async function edit_date(field, prop_idx) {
 
 <div class="text-base grid-{definition.properties.length}">
     {#each definition.properties as prop, prop_index}
-        <p class="col-span-1 w-full mr-auto mt-0.5">
-            {#if item[prop.a] || placeholder == prop.name}
-                <span role="gridcell" tabindex="0">
+        <div class="col-span-1 w-full mr-auto mt-0.5">
+            {#if item[prop.a] || placeholder == prop.name || prop.getter}
+                <div role="gridcell" tabindex="0">
                     {#if prop.type == rList_property_type.Date}
+                        {@const pickerType = prop.detailed ? 'datetime-local' : 'date'}
                         <DatePicker self={item} 
                                     a={prop.a}
                                     compact={true}
@@ -82,6 +83,8 @@ async function edit_date(field, prop_idx) {
                                     inContext="props sel"
                                     bind:this={props[prop_index]}
                                     changed={(value)=>{on_date_changed(value, prop.a)}}
+                                    readOnly={prop.readOnly}
+                                    type={pickerType}
                         />
                     {:else if prop.type == rList_property_type.Combo}
                         <Combo  self={item} 
@@ -95,15 +98,27 @@ async function edit_date(field, prop_idx) {
                                 bind:this={props[prop_index]}
                                 definition={prop.combo_definition}
                                 changed={(key,name)=>{on_combo_changed(key, name, prop)}}
+                                readOnly={prop.readOnly}
                                 s="sm"/>
                     {:else if prop.type == rList_property_type.Static}
-                        <span class="dark:text-white text-stone-400 truncate  bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
-                            {item[prop.a]}
-                        </span>
+                        {@const value = prop.getter ? prop.getter(item) : item[prop.a]}
+                        <p class="truncate text-sm">
+                            {#if prop.prefix}
+                                <span>{prop.prefix}</span>
+                            {/if}
+
+                            {value}
+
+                            {#if prop.postfix}
+                                <span>{prop.postfix}</span>
+                            {/if}
+
+                        </p>
                     {/if}
-                </span>
+
+                    </div>
             {/if}
-        </p>
+            </div>
     {/each}
 </div>
 

package/components/list/internal/list.element.svelte

@@ -5,6 +5,7 @@ import {
   selectable,
   activateItem,
   isActive,
+  getActive,
   editable,
   startEditing
 } from "../../../utils";
@@ -16,13 +17,14 @@ import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
 import { push } from "svelte-spa-router";
 import { FaExternalLinkAlt } from "svelte-icons/fa/";
-import { readonly } from "svelte/store";
+import Tags from "../../tags.svelte";
 export let item;
 export let title = "";
 export let summary = "";
 export let typename = void 0;
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
+export let key = "";
 let definition = getContext("rList-definition");
 let placeholder = "";
 let props_sm;
@@ -45,14 +47,6 @@ if (!typename) {
     typename = s[1];
   }
 }
-let item_key = "";
-let keys = Object.keys(item);
-if (keys.includes("$ref"))
-  item_key = "$ref";
-else if (keys.includes("Id"))
-  item_key = "Id";
-else if (keys.length > 0)
-  item_key = keys[0];
 if (!title)
   title = definition.title;
 if (!summary)
@@ -74,11 +68,29 @@ function calc_horz_division() {
   }
 }
 function calculate_active(...args) {
-  return isActive("props", item);
+  const activeItem = getActive("props");
+  if (!activeItem)
+    return false;
+  const activeKey = getItemKey(activeItem);
+  const itemKey = getItemKey(item);
+  if (activeKey == itemKey) {
+    return true;
+  } else
+    return false;
 }
 function selected(...args) {
   return isSelected(item);
 }
+function getItemKey(item2) {
+  if (key)
+    return item2[key];
+  else if (item2.$ref)
+    return item2.$ref;
+  else if (item2.Id)
+    return item2.Id;
+  else
+    return 0;
+}
 async function change_name(text) {
   if (definition.on_title_changed) {
     definition.on_title_changed(item, text, title);
@@ -186,7 +198,7 @@ export function editProperty(field) {
   }
 }
 async function force_editing(field) {
-  let element_id = `__hd_list_ctrl_${item[item_key]}_${field}`;
+  let element_id = `__hd_list_ctrl_${getItemKey(item)}_${field}`;
   let element_node = document.getElementById(element_id);
   if (!element_node) {
     placeholder = field;
@@ -241,10 +253,9 @@ export function scrollToView() {
 {@const element_title = item[title]}
 
 <section    class="my-1 flex flex-row w-full  text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
-            on:contextmenu={on_contextmenu}
             role="menu"
             tabindex="-1"
-            bind:this={rootElement}>
+            bind:this={rootElement}> <!--  on:contextmenu={on_contextmenu} -->
 
     <slot name="left" element={item}/>
     
@@ -264,7 +275,7 @@ export function scrollToView() {
                                    
                                     whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}
                                     sm:hover:cursor-pointer underline"
-                                    id="__hd_list_ctrl_{item[item_key]}_Title"
+                                    id="__hd_list_ctrl_{getItemKey(item)}_Title"
                                     on:click|stopPropagation={followDefinedHRef}
                                     use:editable={{
                                         action: (text) => {change_name(text)},
@@ -279,7 +290,7 @@ export function scrollToView() {
                         <p  class=" text-base font-semibold 
                                     
                                     whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                            id="__hd_list_ctrl_{item[item_key]}_Title"
+                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
                             use:editable={{
                                 action: (text) => {change_name(text)},
                                 active: true,
@@ -300,7 +311,7 @@ export function scrollToView() {
                 <p  class=" text-base font-semibold 
                              
                             whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                    id="__hd_list_ctrl_{item[item_key]}_Title"> 
+                    id="__hd_list_ctrl_{getItemKey(item)}_Title"> 
                     {element_title}
                 </p>
             {/if}
@@ -316,7 +327,7 @@ export function scrollToView() {
         </section>
 
         {#if summary && (item[summary] || placeholder=='Summary')}
-            {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
+            {@const element_id = `__hd_list_ctrl_${getItemKey(item)}_Summary`}
             {#key item[summary] }           
                 {#if is_row_active}
                     <p  id={element_id} 
@@ -342,7 +353,21 @@ export function scrollToView() {
                 
         {/if}
 
-        
+        {#if definition.tags}
+                <Tags
+                    class="mt-1 mb-1"
+                    compact
+                    inContext="props"
+                    self={item}
+                    a={definition.tags.a}
+                    getGlobalTags={definition.tags.getAllTags}
+                    s="sm"
+                    onSelect={definition.tags.onSelect}
+                    onUpdateAllTags={definition.tags.onUpdateAllTags}
+                    canChangeColor={definition.tags.canChangeColor}
+                    readOnly={definition.tags.readOnly}
+                />
+            {/if}
 
     </div>
 </section>

package/components/list/internal/list.element.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         typename?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
+        key?: string | undefined;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
         scrollToView?: (() => void) | undefined;

package/components/list/list.combo.svelte

@@ -6,6 +6,9 @@ export let a = "";
 export let onSelect = void 0;
 export let association = false;
 export let hasNone = association;
+export let editable = true;
+export let prefix = "";
+export let postfix = "";
 let definition = getContext("rList-definition");
 let combo_property = new rList_property_combo();
 combo_property.name = name;
@@ -15,6 +18,9 @@ if (!combo_property.a)
 combo_property.onSelect = onSelect;
 combo_property.association = association;
 combo_property.hasNone = hasNone;
+combo_property.readOnly = !editable;
+combo_property.prefix = prefix;
+combo_property.postfix = postfix;
 definition.properties.push(combo_property);
 setContext("rCombo-definition", combo_property.combo_definition);
 </script>

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

@@ -6,6 +6,9 @@ declare const __propDef: {
         onSelect?: undefined;
         association?: boolean | undefined;
         hasNone?: boolean | undefined;
+        editable?: boolean | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.date.svelte

@@ -3,6 +3,10 @@ import { rList_property_type, rList_property } from "./List";
 export let name;
 export let a = "";
 export let onSelect = void 0;
+export let editable = true;
+export let detailed = false;
+export let prefix = "";
+export let postfix = "";
 let definition = getContext("rList-definition");
 let date_property = new rList_property(rList_property_type.Date);
 date_property.name = name;
@@ -10,5 +14,9 @@ date_property.a = a;
 if (!date_property.a)
   date_property.a = date_property.name;
 date_property.onSelect = onSelect;
+date_property.readOnly = !editable;
+date_property.detailed = detailed;
+date_property.prefix = prefix;
+date_property.postfix = postfix;
 definition.properties.push(date_property);
 </script>

package/components/list/list.date.svelte.d.ts

@@ -4,6 +4,10 @@ declare const __propDef: {
         name: string;
         a?: string | undefined;
         onSelect?: undefined;
+        editable?: boolean | undefined;
+        detailed?: boolean | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.static.svelte

@@ -2,11 +2,17 @@
 import { rList_property_type, rList_property } from "./List";
 export let name;
 export let a = "";
+export let prefix = "";
+export let postfix = "";
+export let getter = void 0;
 let definition = getContext("rList-definition");
 let date_property = new rList_property(rList_property_type.Static);
 date_property.name = name;
 date_property.a = a;
 if (!date_property.a)
   date_property.a = date_property.name;
+date_property.prefix = prefix;
+date_property.postfix = postfix;
+date_property.getter = getter;
 definition.properties.push(date_property);
 </script>

package/components/list/list.static.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         name: string;
         a?: string | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
+        getter?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.svelte

@@ -79,42 +79,43 @@ export function rereder() {
 }
 export function reload(data, selectElement = KEEP_SELECTION) {
   let currentSelectedItem = getActive("props");
-  let selectElementId = 0;
-  let altSelectElementId = 0;
+  let currentSelectedItemKey = currentSelectedItem ? getItemKey(currentSelectedItem) : null;
+  let selectElementId = null;
+  let altSelectElementId = null;
   switch (selectElement) {
     case CLEAR_SELECTION:
       selectElementId = 0;
       break;
     case KEEP_SELECTION:
-      selectElementId = currentSelectedItem?.Id ?? 0;
+      selectElementId = currentSelectedItemKey;
       break;
     case SELECT_PREVIOUS:
       if (currentSelectedItem) {
-        const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+        const selectedItemIdx = items?.findIndex((e) => getItemKey(e) == currentSelectedItemKey);
         if (selectedItemIdx != void 0 && selectedItemIdx > 0)
-          selectElementId = items[selectedItemIdx - 1].Id ?? 0;
+          selectElementId = getItemKey(items[selectedItemIdx - 1]) ?? null;
       }
       break;
     case SELECT_NEXT:
       if (currentSelectedItem) {
-        const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+        const selectedItemIdx = items?.findIndex((e) => getItemKey(e) == currentSelectedItemKey);
         if (selectedItemIdx != void 0 && selectedItemIdx >= 0 && selectedItemIdx < items.length - 1)
-          selectElementId = items[selectedItemIdx + 1].Id ?? 0;
+          selectElementId = getItemKey(items[selectedItemIdx + 1]) ?? null;
       }
       break;
     case KEEP_OR_SELECT_NEXT:
       {
         if (currentSelectedItem) {
-          selectElementId = currentSelectedItem.Id ?? 0;
-          const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+          selectElementId = currentSelectedItemKey;
+          const selectedItemIdx = items?.findIndex((e) => getItemKey(e) == currentSelectedItemKey);
           if (selectedItemIdx != void 0 && selectedItemIdx >= 0 && selectedItemIdx < items.length - 1)
-            altSelectElementId = items[selectedItemIdx + 1].Id ?? 0;
+            altSelectElementId = getItemKey(items[selectedItemIdx + 1]) ?? null;
         }
       }
       break;
     default:
       if (typeof selectElement === "object" && !Array.isArray(selectElement) && selectElement !== null)
-        selectElementId = selectElement.Id;
+        selectElementId = getItemKey(selectElement);
       else
         selectElementId = selectElement;
   }
@@ -123,19 +124,17 @@ export function reload(data, selectElement = KEEP_SELECTION) {
   else
     self = data;
   rereder();
-  if (selectElementId > 0) {
-    let itemToActivate = items?.find((e) => e.Id == selectElementId);
+  if (selectElementId != null) {
+    let itemToActivate = items?.find((e) => getItemKey(e) == selectElementId);
     if (itemToActivate) {
       activate_after_dom_update = itemToActivate;
-    } else if (altSelectElementId > 0) {
-      itemToActivate = items?.find((e) => e.Id == altSelectElementId);
+    } else if (altSelectElementId != null) {
+      itemToActivate = items?.find((e) => getItemKey(e) == altSelectElementId);
       if (itemToActivate) {
         activate_after_dom_update = itemToActivate;
       }
     }
   }
-  if (!activate_after_dom_update)
-    activateItem("props", null, []);
 }
 export async function moveUp(element) {
   if (!orderAttrib)
@@ -295,6 +294,7 @@ async function insert(title2, summary, after) {
             <List_element   item={element} 
                             {toolbarOperations}
                             {contextMenu}
+                            {key}
                             bind:this={rows[i]}
                             >
             

package/components/list/list.tags.svelte

@@ -0,0 +1,32 @@
+<script>import { getContext } from "svelte";
+import { rList_property_tags } from "./List";
+export let name = "";
+export let a = "";
+export let prefix = "";
+export let postfix = "";
+export let readOnly = false;
+export let getAllTags = void 0;
+export let onUpdateAllTags = void 0;
+export let onSelect = void 0;
+export let canChangeColor = false;
+let definition = getContext("rList-definition");
+let tags = new rList_property_tags();
+tags.prefix = prefix;
+tags.postfix = postfix;
+if (!a && name) {
+  tags.a = name;
+  tags.name = name;
+} else if (!name && a) {
+  tags.a = a;
+  tags.name = a;
+} else {
+  tags.a = a;
+  tags.name = name;
+}
+tags.onSelect = onSelect;
+tags.onUpdateAllTags = onUpdateAllTags;
+tags.canChangeColor = canChangeColor;
+tags.getAllTags = getAllTags;
+tags.readOnly = readOnly;
+definition.tags = tags;
+</script>

package/components/list/list.tags.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        a?: string | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
+        readOnly?: boolean | undefined;
+        getAllTags?: Function | undefined;
+        onUpdateAllTags?: Function | undefined;
+        onSelect?: Function | undefined;
+        canChangeColor?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};