@humandialog/forms.svelte 1.7.27 → 1.8.0

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         item: object;
-        title?: string | undefined;
-        summary?: string | undefined;
+        element_title?: string | undefined;
+        list_properties?: object | undefined;
         typename?: string | undefined;
         toolbarOperations?: undefined;
         contextMenu?: undefined;
@@ -11,6 +11,8 @@ declare const __propDef: {
         key?: string | undefined;
         selectionKey?: string | undefined;
         multiselect?: boolean | undefined;
+        layout_demo_mode?: boolean | undefined;
+        show_prev_interface?: boolean | undefined;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
         scrollToView?: (() => void) | undefined;
@@ -18,11 +20,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        left: {
-            element: object;
-        };
-    };
+    slots: {};
 };
 export type ListProps = typeof __propDef.props;
 export type ListEvents = typeof __propDef.events;

package/components/list/internal/list.inserter.svelte

@@ -26,12 +26,44 @@ async function onSummaryChanged(text) {
 }
 </script>
 
-<section    class=" my-1 w-full text-base text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
+
+<figure class="pl-8
+            bg-stone-200 dark:bg-stone-700
+            outline outline-8
+            outline-stone-200 dark:outline-stone-700
+            ring-1 ring-offset-8
+            ring-stone-300 dark:ring-stone-700
+            ">
+        <h4 class="-indent-8">
+            <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
+                    text-stone-700 dark:text-stone-400 ">
+             </div>
+             <span
+                bind:this={titleElement}
+                use:editable={{
+                    action: (text) => onInsert(text, ''),
+                    active: false,
+                    onSoftEnter: softEnter
+                    }} ></span>
+        </h4>
+
+        {#if editSummary}
+            <figcaption
+                    bind:this={summaryElement}
+                    use:editable={{
+                    action: onSummaryChanged,
+                    active: false,
+                    onFinish: (d) => {editSummary=false}
+                }}
+                >{summary}</figcaption>
+        {/if}
+</figure>
+
+
+<!--section    class=" my-1 w-full text-base text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
     <div class="flex flex-row">
         {#if icon}
-            <!--Icon   size={3} 
-                    component={FaPlus}  
-                    class="mt-1.5 ml-2 "/-->
+
             <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm:mt-1.5 ml-2"></div>
         {/if}
 
@@ -50,7 +82,7 @@ async function onSummaryChanged(text) {
 
     {#if editSummary}
         <p  bind:this={summaryElement}
-            class="     ml-10 sm:ml-9 
+            class="     ml-10 sm:ml-9
                         sm:min-h-[1rem]
                         text-sm min-h-[1.5rem]
                         text-stone-400"
@@ -62,4 +94,4 @@ async function onSummaryChanged(text) {
             {summary}
         </p>
     {/if}
-</section>
+</section-->

package/components/list/internal/note.txt

@@ -0,0 +1,5 @@
+
+
+
+class="pl-8 bg-stone-100 dark:bg-stone-900 outline outline-8 outline-stone-900 ring-1 ring-stone-700 ring-offset-8"
+class="pl-8 bg-stone-900 rounded outline outline-4 outline-stone-800 ring-1 ring-stone-700 ring-offset-4"

package/components/list/list.svelte

@@ -4,10 +4,11 @@ import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev,
 import Icon from "../icon.svelte";
 import { FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
 import { rList_definition } from "./List";
-import List_element from "./internal/list.element.svelte";
+import ListElement from "./internal/list.element.svelte";
 import Inserter from "./internal/list.inserter.svelte";
 import { informModification, pushChanges } from "../../updates";
 export let title = "";
+export let list_properties = void 0;
 export let self = null;
 export let a = "";
 export let objects = void 0;
@@ -21,6 +22,7 @@ export let multiselectOperations = (items2) => [];
 export let key = "";
 export let selectionKey = "props";
 export let multiselect = false;
+export let component_id;
 export const CLEAR_SELECTION = 0;
 export const KEEP_SELECTION = -1;
 export const SELECT_PREVIOUS = -2;
@@ -269,6 +271,7 @@ export function toggleMultiselection() {
     } else
       clearActiveItem(selectionKey);
   }
+  return multiselect;
 }
 export function isMultiselectionEnabled() {
   return multiselect;
@@ -320,9 +323,11 @@ export function assignOrder(after) {
   }
 }
 async function insert(title2, summary, after) {
+  let title_attr = read_from_def("Title");
+  let summary_attr = read_from_def("Summary");
   let newElement = {
-    [definition.title]: title2,
-    [definition.summary]: summary
+    [title_attr]: title2,
+    [summary_attr]: summary
   };
   if (orderAttrib)
     newElement[orderAttrib] = assignOrder(after);
@@ -358,29 +363,46 @@ export function toggleSelectAll(e) {
   if (e)
     e.stopPropagation();
 }
+function read_from_def(propName) {
+  if (!list_properties)
+    return void 0;
+  if (list_properties.context) {
+    const contextProps = list_properties.context[item.$type];
+    if (contextProps && contextProps.hasOwnProperty(propName))
+      return contextProps[propName];
+  }
+  const elementProps = list_properties.element;
+  if (elementProps && elementProps.hasOwnProperty(propName))
+    return elementProps[propName];
+  return void 0;
+}
 </script>
 
 <slot/> <!-- Launch definition settings -->
 
 
 {#if title}
-    <p class="hidden sm:block mt-3 ml-3 pb-5 text-lg text-left">{title}</p>
+    <p class="hidden sm:block mt-3 ml-3 pb-5 text-lg text-left">##ListTitle: {title}</p>
     <!--hr class="hidden sm:block w-full"-->
 {/if}
 
+
 <!--div class="w-full h-full overflow-y-auto overscroll-contain"-->
 
 
     {#if items && items.length > 0 }
+    <!--
         {#if false && multiselect}
             {@const icon = (multiselectionMode == SELECT_ALL) ? FaRegCircle : FaRegCheckCircle}
             <Icon component={icon} class="h-5 w-5 sm:h-4 sm:w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-2 sm:mt-1.5 ml-2 mr-3"
                     on:click={toggleSelectAll}/>
         {/if}
-        
+    -->
+
         {#each items as element, i (getItemKey(element))}
-            
-            <List_element   item={element} 
+
+            <ListElement   item={element}
+                            {list_properties}
                             {toolbarOperations}
                             {contextMenu}
                             {key}
@@ -389,12 +411,12 @@ export function toggleSelectAll(e) {
                             {selectionKey}
                             bind:this={rows[i]}
                             >
-            
+
                 <span slot="left" let:element>
                     <slot name="left" {element}/>
                 </span>
-            </List_element>
-            
+            </ListElement>
+
             {#if show_insertion_row_after_element == element}
                 <Inserter   onInsert={async (title, summary) => {await insert(title, summary, show_insertion_row_after_element)}}
                             icon={definition.inserter_icon}
@@ -411,4 +433,3 @@ export function toggleSelectAll(e) {
 
 
 <!--/div-->
-

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title?: string | undefined;
+        list_properties?: object | undefined;
         self?: object | null | undefined;
         a?: string | undefined;
         objects?: object[] | undefined;
@@ -15,6 +16,7 @@ declare const __propDef: {
         key?: string | undefined;
         selectionKey?: string | undefined;
         multiselect?: boolean | undefined;
+        component_id: string;
         CLEAR_SELECTION?: 0 | undefined;
         KEEP_SELECTION?: -1 | undefined;
         SELECT_PREVIOUS?: -2 | undefined;
@@ -31,7 +33,7 @@ declare const __propDef: {
         addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
-        toggleMultiselection?: (() => void) | undefined;
+        toggleMultiselection?: (() => boolean) | undefined;
         isMultiselectionEnabled?: (() => boolean) | undefined;
         assignOrder?: ((after: object | null) => number) | undefined;
         toggleSelectAll?: ((e: any) => void) | undefined;
@@ -42,7 +44,7 @@ declare const __propDef: {
     slots: {
         default: {};
         left: {
-            element: object;
+            element: any;
         };
     };
 };
@@ -66,7 +68,7 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;
-    get toggleMultiselection(): () => void;
+    get toggleMultiselection(): () => boolean;
     get isMultiselectionEnabled(): () => boolean;
     get assignOrder(): (after: object | null) => number;
     get toggleSelectAll(): (e: any) => void;

package/components/list/list.title.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from "svelte";
 export let a;
+export let icon;
 export let editable = false;
 export let onChange = void 0;
 export let onOpen = void 0;
@@ -10,6 +11,7 @@ export let downloadable = false;
 export let downloadableFunc = void 0;
 let definition = getContext("rList-definition");
 definition.title = a;
+definition.icon = icon;
 definition.title_editable = editable;
 definition.on_title_changed = onChange;
 definition.title_readonly = readonly;

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         a: string;
+        icon: string;
         editable?: boolean | undefined;
         onChange?: Function | undefined;
         onOpen?: Function | undefined;

package/components/menu.d.ts

@@ -3,7 +3,7 @@ export declare const SHOW_MENU_BELOW = 0;
 export declare const SHOW_MENU_ABOVE = 1;
 export declare const SHOW_MENU_RIGHT = 2;
 export declare const SHOW_MENU_LEFT = 3;
-export declare function showMenu(around: DOMRect | DOMPoint, operations: any, preference?: number): void;
+export declare function showMenu(around: DOMRect | DOMPoint, operations: any, preference?: number, onHideCallback?: Function | undefined): void;
 export declare function hideWholeContextMenu(): void;
 export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): Floating_container | null;
 export declare function hideFloatingToolbar(): void;

package/components/menu.js

@@ -7,7 +7,7 @@ export const SHOW_MENU_BELOW = 0;
 export const SHOW_MENU_ABOVE = 1;
 export const SHOW_MENU_RIGHT = 2;
 export const SHOW_MENU_LEFT = 3;
-export function showMenu(around, operations, preference = SHOW_MENU_BELOW) {
+export function showMenu(around, operations, preference = SHOW_MENU_BELOW, onHideCallback = undefined) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -17,13 +17,13 @@ export function showMenu(around, operations, preference = SHOW_MENU_BELOW) {
             target: app_div,
             props: {}
         });
-        menu_comopnent.show(around, operations, preference);
+        menu_comopnent.show(around, operations, preference, onHideCallback);
     }
     else if (menu_comopnent) {
         if (menu_comopnent.isVisible())
             menu_comopnent.hide();
         else
-            menu_comopnent.show(around, operations, preference);
+            menu_comopnent.show(around, operations, preference, onHideCallback);
     }
     else
         console.error('what now?');

package/components/paginator.svelte

@@ -1,5 +1,5 @@
 <script>
-    
+
     import {i18n} from '../i18n.js'
 
     export let pageNo
@@ -9,6 +9,9 @@
 
     let visiblePages = []
     $: update()
+    
+    let ui24 = false
+
 
     export function updateParams(p, allP)
     {
@@ -55,7 +58,7 @@
         for(let p=visStart; p<= visEnd; p++)
             visiblePages.push(p)
     }
-    
+
     function onPrevPage(e)
     {
         if(pageNo > 0)
@@ -65,16 +68,82 @@
     function onNextPage(e)
     {
         if(pageNo <= allPagesNo-2)
-           onPage(pageNo+1) 
+           onPage(pageNo+1)
     }
-    
+
 </script>
 
+{#if !ui24}
+
+    {#if visiblePages.length > 1}
+        <div class="flex items-center -space-x-px">
+            <div>
+                <button on:click={onPrevPage}
+                        class=" flex items-center justify-center
+                                px-3 was-h-8 ms-0
+                                leading-tight
+                                text-stone-500
+                                bg-white border border-e-0
+                                border-stone-300
+                                rounded-s-lg
+                                hover:bg-stone-100 hover:text-stone-700
+
+                                dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
+                    <span class="sr-only">
+                        { i18n({en: 'Previous', es: 'Anterior', pl: 'Wcześniejsze'}) }
+                    </span>
+                    <span>&nbsp</span>
+                    <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
+                    </svg>
+                </button>
+            </div>
+
+
+            {#each visiblePages as p (p)}
+                <div>
+                    {#if p == pageNo}
+                        <button disabled
+                            class="z-10 flex items-center justify-center
+                                px-3 was-h-8
+                                leading-tight text-blue-600 border border-blue-300
+                                bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-stone-700 dark:bg-stone-700 dark:text-white">
+                                {p+1}
+                        </button>
+                    {:else}
+                        <button on:click={(e) => onPage(p)}
+                            class="flex items-center justify-center
+                            px-3 was-h-8
+                            leading-tight text-stone-500 bg-white border border-stone-300 hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
+                            {p+1}
+                        </button>
+                    {/if}
+                </div>
+
+            {/each}
+
+
+            <!--a href="#" aria-current="page" class="">3</a-->
+            <div>
+                <button on:click={onNextPage} class="flex items-center justify-center px-3 was-h-8 leading-tight text-stone-500 bg-white border border-stone-300 rounded-e-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
+                    <span class="sr-only">
+                        { i18n({en: 'Next', es: 'Siguiente', pl: 'Następne'}) }
+                    </span>
+                    <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                    </svg>
+                    <span>&nbsp</span>
+                </button>
+            </div>
+        </div>
+    {/if}
+
+{:else}
 <nav aria-label="Page navigation example" class="">
     {#if visiblePages.length > 1}
         <ul class="flex items-center -space-x-px h-8 text-sm">
             <li>
-                <button on:click={onPrevPage} 
+                <button on:click={onPrevPage}
                     class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-stone-500 bg-white border border-e-0 border-stone-300 rounded-s-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
                     <span class="sr-only">
                         { i18n({en: 'Previous', es: 'Anterior', pl: 'Wcześniejsze'}) }
@@ -84,7 +153,7 @@
                         </svg>
                 </button>
             </li>
-            
+
 
             {#each visiblePages as p (p)}
                 <li>
@@ -98,10 +167,10 @@
                         </button>
                     {/if}
                 </li>
-                
+
             {/each}
 
-            
+
             <!--a href="#" aria-current="page" class="">3</a-->
             <li>
                 <button on:click={onNextPage} class="flex items-center justify-center px-3 h-8 leading-tight text-stone-500 bg-white border border-stone-300 rounded-e-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
@@ -117,4 +186,5 @@
             </li>
         </ul>
     {/if}
-</nav>
+</nav>
+{/if}

package/components/prose.editable.p.svelte.d.ts

@@ -5,8 +5,8 @@ export default class Prose extends SvelteComponentTyped<{
     [x: string]: any;
     invalid?: boolean | undefined;
     placeholder?: string | undefined;
-    val?: string | undefined;
     required?: boolean | undefined;
+    val?: string | undefined;
     readonly?: boolean | undefined;
     validation?: any;
     validate?: (() => any) | undefined;
@@ -30,8 +30,8 @@ declare const __propDef: {
         [x: string]: any;
         invalid?: boolean | undefined;
         placeholder?: string | undefined;
-        val?: string | undefined;
         required?: boolean | undefined;
+        val?: string | undefined;
         readonly?: boolean | undefined;
         validation?: any;
         validate?: (() => any) | undefined;

package/components/prose.editable.span.svelte.d.ts

@@ -5,8 +5,8 @@ export default class Prose extends SvelteComponentTyped<{
     [x: string]: any;
     invalid?: boolean | undefined;
     placeholder?: string | undefined;
-    val?: string | undefined;
     required?: boolean | undefined;
+    val?: string | undefined;
     readonly?: boolean | undefined;
     validation?: any;
     validate?: (() => boolean) | undefined;
@@ -32,8 +32,8 @@ declare const __propDef: {
         [x: string]: any;
         invalid?: boolean | undefined;
         placeholder?: string | undefined;
-        val?: string | undefined;
         required?: boolean | undefined;
+        val?: string | undefined;
         readonly?: boolean | undefined;
         validation?: any;
         validate?: (() => boolean) | undefined;

package/components/r.edit.svelte

@@ -0,0 +1,9 @@
+
+<script>
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
+<span >
+    AA
+</span>

package/components/r.edit.svelte.d.ts

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

package/components/r.editable.svelte

@@ -0,0 +1,74 @@
+<script>
+  import {editable, makeEditableIdFromFieldName} from '../utils'
+  import {setjItemProperty} from '../updates.js'
+	import { afterUpdate } from 'svelte';
+
+  export let self
+  export let a
+  export let id = undefined
+	export let readonly = false
+	export let focusOnClick = true
+
+  //https://developer.chrome.com/docs/web-platform/page-lifecycle-api#the-unload-event
+  //https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
+
+
+	if(!id)
+	{
+			if(a)
+				id = makeEditableIdFromFieldName(a)
+	}
+
+	const zeroWidthSpace = '\u200B'
+
+	//if(!self[a])
+	//		self[a] = "."
+
+
+	function onChange(text)
+	{
+		if(text.startsWith(zeroWidthSpace))
+			text = text.substring(zeroWidthSpace)
+
+		if(text.endsWith(zeroWidthSpace))
+			text = text.substring(0, text.length-1)
+
+		text.trim()
+
+		setjItemProperty(self, a, text)
+	}
+
+	function focus(e)
+	{
+		if(!self[a])
+			self[a] = zeroWidthSpace
+	}
+
+	function blur(e)
+	{
+
+	}
+
+
+
+</script>
+
+
+<span   {id}
+				use:editable={{
+				action: onChange,
+				onSingleChange: onChange,
+				active: focusOnClick,
+				readonly: readonly
+				}}
+				on:focus={focus}
+				on:blur={blur}
+>
+	{self[a]}
+</span>
+
+<!--style>
+	span:empty:focus::before {
+  	content: ' ';
+	}
+</style-->

package/components/r.editable.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  RProps */
+/** @typedef {typeof __propDef.events}  REvents */
+/** @typedef {typeof __propDef.slots}  RSlots */
+export default class R extends SvelteComponentTyped<{
+    a: any;
+    self: any;
+    id?: string | undefined;
+    readonly?: boolean | undefined;
+    focusOnClick?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RProps = typeof __propDef.props;
+export type REvents = typeof __propDef.events;
+export type RSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        a: any;
+        self: any;
+        id?: string | undefined;
+        readonly?: boolean | undefined;
+        focusOnClick?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/r.figcaption.svelte

@@ -0,0 +1,5 @@
+
+
+<figcaption>
+  <slot/>
+</figcaption>

package/components/r.figcaption.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  RProps */
+/** @typedef {typeof __propDef.events}  REvents */
+/** @typedef {typeof __propDef.slots}  RSlots */
+export default class R extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RProps = typeof __propDef.props;
+export type REvents = typeof __propDef.events;
+export type RSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};