@humandialog/forms.svelte 1.7.18 → 1.7.20

package/components/date_utils.d.ts

@@ -1,5 +1,5 @@
 export function getFormattedStringDate(d: any, type?: string): string;
-export function getNiceStringDateTime(d: any): string;
-export function getNiceStringDate(d: any): any;
+export function getNiceStringDateTime(dat: any): string;
+export function getNiceStringDate(dat: any): any;
 export function dayName(d: any): any;
 export function monthName(m: any): any;

package/components/date_utils.js

@@ -30,8 +30,14 @@ export function getFormattedStringDate(d, type = "datetime")
         return `${year}-${month}-${day}`;
 }
 
-export function getNiceStringDateTime(d)
+export function getNiceStringDateTime(dat)
 {
+    let d
+    if(typeof dat == 'string')
+        d = new Date(dat)
+    else
+        d = dat
+    
     const dt = getNiceStringDate(d);
     const tm = d.toLocaleTimeString(undefined, {
         timeStyle: 'short'
@@ -40,8 +46,14 @@ export function getNiceStringDateTime(d)
 }
 
 
-export function getNiceStringDate(d)
+export function getNiceStringDate(dat)
 {
+    let d
+    if(typeof dat == 'string')
+        d = new Date(dat)
+    else
+        d = dat
+
     if(!d)
         return '';
 

package/components/prose.editable.p.svelte

@@ -0,0 +1,55 @@
+<script>
+    import EditableSpan from './prose.editable.span.svelte'
+
+    export let tooltip = ''
+    export let val = ''
+    export let invalid = false
+    export let placeholder = ''
+    export let required = false;
+    export let readonly = false;
+    export let multiline = false;
+    export let validation = undefined;
+
+    let userClass = $$restProps.class ?? '';
+
+    let spanElement;
+
+    export function setValue(v)
+    {
+        spanElement.setValue(v)
+    }
+
+    export function getValue()
+    {
+        return spanElement.getValue()
+    }
+
+    export function validate()
+    {
+        return spanElement.validate()
+    }
+
+    function onClick(e)
+    {
+        spanElement.runEditing(e)
+    }
+
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
+
+<p class="cursor-text {userClass}"
+    on:click={onClick}>
+    <EditableSpan bind:this={spanElement}
+        {tooltip}
+        {val}
+        {invalid}
+        {placeholder}
+        {required}
+        {readonly}
+        {multiline}
+        {validation}
+    />
+</p>

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

@@ -0,0 +1,48 @@
+/** @typedef {typeof __propDef.props}  ProseProps */
+/** @typedef {typeof __propDef.events}  ProseEvents */
+/** @typedef {typeof __propDef.slots}  ProseSlots */
+export default class Prose extends SvelteComponentTyped<{
+    [x: string]: any;
+    invalid?: boolean | undefined;
+    placeholder?: string | undefined;
+    val?: string | undefined;
+    required?: boolean | undefined;
+    readonly?: boolean | undefined;
+    validation?: any;
+    validate?: (() => any) | undefined;
+    tooltip?: string | undefined;
+    multiline?: boolean | undefined;
+    setValue?: ((v: any) => void) | undefined;
+    getValue?: (() => any) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get setValue(): (v: any) => void;
+    get getValue(): () => any;
+    get validate(): () => any;
+}
+export type ProseProps = typeof __propDef.props;
+export type ProseEvents = typeof __propDef.events;
+export type ProseSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        invalid?: boolean | undefined;
+        placeholder?: string | undefined;
+        val?: string | undefined;
+        required?: boolean | undefined;
+        readonly?: boolean | undefined;
+        validation?: any;
+        validate?: (() => any) | undefined;
+        tooltip?: string | undefined;
+        multiline?: boolean | undefined;
+        setValue?: ((v: any) => void) | undefined;
+        getValue?: (() => any) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/prose.editable.span.svelte

@@ -0,0 +1,114 @@
+<script>
+    import {tick} from 'svelte'
+    import {startEditing, editable} from '../utils'
+
+    export let tooltip = ''
+    export let val = ''
+    export let invalid = false
+    export let placeholder = ''
+    export let required = false;
+    export let readonly = false;
+    export let multiline = false;
+    export let validation = undefined;
+
+    let userClass = $$restProps.class ?? '';
+
+    export function setValue(v)
+    {
+        val = v;
+    }
+
+    export function getValue()
+    {
+        return val;
+    }
+
+    export function validate()
+    {
+        if(!validation)
+        {
+            if(required)
+            {
+                invalid = !val;
+                return !invalid;   
+            }
+            else
+            {
+                invalid = false;
+                return true;
+            }
+        }
+
+        invalid = !validation(val);
+        return !invalid;
+    }
+
+    let fieldElement
+    let fieldPlaceholder = false
+    export async function runEditing(e)
+    {
+        if(fieldElement)
+            startEditing(fieldElement, () => fieldPlaceholder=false)
+        else
+        {
+            fieldPlaceholder = true;
+            await tick();
+            startEditing(fieldElement, () => fieldPlaceholder=false)
+        }
+    }
+
+    async function onFieldChanged(text)
+    {
+        if(text.startsWith('\u200B'))
+            text = text.substring(1)
+        
+        val = text
+        validate()
+    }
+
+    function onSingleChange(text)
+    {
+        if(!text)
+            text = '\u200B'
+        else if(text.startsWith('\u200B'))
+            text = text.substring(1)
+        
+        val = text
+        if(invalid)
+            validate();
+    }
+    
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
+
+<span class="{userClass}"
+    on:click={runEditing}
+    title={tooltip}
+    tabindex="0">
+        {#if val || fieldPlaceholder}
+            <span   class:text-red-500={invalid}
+                    bind:this={fieldElement}
+                    use:editable={{
+                        action: (text) => onFieldChanged(text), 
+                        active: false,
+                        onSingleChange: onSingleChange,
+                        enterAsNewLine: multiline,
+                        readonly: readonly}}>
+                {#if val}
+                    {val}
+                {:else}
+                    &ZeroWidthSpace;
+                {/if}
+            </span>
+        {:else if placeholder}
+            <span class="text-zinc-600 dark:text-zinc-400"
+                  class:dark:!text-red-400={invalid}
+                  class:!text-red-600={invalid}>
+                {placeholder}
+            </span>
+        {/if}
+</span>
+

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

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  ProseProps */
+/** @typedef {typeof __propDef.events}  ProseEvents */
+/** @typedef {typeof __propDef.slots}  ProseSlots */
+export default class Prose extends SvelteComponentTyped<{
+    [x: string]: any;
+    invalid?: boolean | undefined;
+    placeholder?: string | undefined;
+    val?: string | undefined;
+    required?: boolean | undefined;
+    readonly?: boolean | undefined;
+    validation?: any;
+    validate?: (() => boolean) | undefined;
+    tooltip?: string | undefined;
+    multiline?: boolean | undefined;
+    setValue?: ((v: any) => void) | undefined;
+    getValue?: (() => string) | undefined;
+    runEditing?: ((e: any) => Promise<void>) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get setValue(): (v: any) => void;
+    get getValue(): () => string;
+    get validate(): () => boolean;
+    get runEditing(): (e: any) => Promise<void>;
+}
+export type ProseProps = typeof __propDef.props;
+export type ProseEvents = typeof __propDef.events;
+export type ProseSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        invalid?: boolean | undefined;
+        placeholder?: string | undefined;
+        val?: string | undefined;
+        required?: boolean | undefined;
+        readonly?: boolean | undefined;
+        validation?: any;
+        validate?: (() => boolean) | undefined;
+        tooltip?: string | undefined;
+        multiline?: boolean | undefined;
+        setValue?: ((v: any) => void) | undefined;
+        getValue?: (() => string) | undefined;
+        runEditing?: ((e: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/tags.palette.svelte

@@ -174,8 +174,9 @@
 
     function onNewTagColorSelected(color)
     {
+        const label = inputText.trim()
         if(inputText && onNewTag)
-            onNewTag(inputText, inputText, color)
+            onNewTag(label, label, color)
         
         inputText = ''
 

package/console.svelte

@@ -24,6 +24,7 @@
         {
             prevLines = [...prevLines, `${prompt} ${input}`];
 
+            const orgInput = input
             if(input.startsWith('self'))
             {
                 let navItem = getNav('props');
@@ -37,12 +38,14 @@
             const req = input;
             input = "";
 
+        //    console.log('console', req)
+
             const apiVer = $session.configuration.api_version;
             const result = await reef.fetch(`/${protocol}/${apiVer}/${req}`)
             const res = await result.text();
             prevLines = [...prevLines, res]
             
-            updateHistory(req)
+            updateHistory(orgInput)
         }
         else if(e.key == 'Esc' || e.key == 'Escape')
         {

package/index.d.ts

@@ -62,7 +62,9 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
+export { default as EditableSpan } from './components/prose.editable.span.svelte';
+export { default as EditableParagraph } from './components/prose.editable.p.svelte';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, setSelectionAtEnd, isValidEmail } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/index.js

@@ -68,7 +68,9 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements } from './utils';
+export { default as EditableSpan } from './components/prose.editable.span.svelte';
+export { default as EditableParagraph } from './components/prose.editable.p.svelte';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, setSelectionAtEnd, isValidEmail } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.18",
+  "version": "1.7.20",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -137,6 +137,8 @@
     "./components/list/List": "./components/list/List.js",
     "./components/menu": "./components/menu.js",
     "./components/paginator.svelte": "./components/paginator.svelte",
+    "./components/prose.editable.p.svelte": "./components/prose.editable.p.svelte",
+    "./components/prose.editable.span.svelte": "./components/prose.editable.span.svelte",
     "./components/radio.svelte": "./components/radio.svelte",
     "./components/react-aria/chain": "./components/react-aria/chain.js",
     "./components/react-aria/getScrollParent": "./components/react-aria/getScrollParent.js",
@@ -177,6 +179,7 @@
     "./page.svelte": "./page.svelte",
     "./paper.svelte": "./paper.svelte",
     "./stores": "./stores.js",
+    "./tenant.members.invite.svelte": "./tenant.members.invite.svelte",
     "./tenant.members.svelte": "./tenant.members.svelte",
     "./tile.svelte": "./tile.svelte",
     "./tiles.row.svelte": "./tiles.row.svelte",