@humandialog/forms.svelte 1.4.6 → 1.4.8

package/components/tags.palette.svelte

@@ -0,0 +1,237 @@
+<script>
+    import Tag from './tag.svelte'
+    import {FaPlus} from 'svelte-icons/fa'
+    import TagColorsPalette from './tag.colors.svelte'
+	import { tick } from 'svelte';
+	import { isDeviceSmallerThan } from '../utils';
+
+    export let usedTags = []
+    export let allTags  = []
+    
+    export let onSelect;
+    export let onNewTag = undefined;
+
+    export let onHide = undefined
+    export let onSizeChanged = undefined
+
+    let allowNewTags = onNewTag != undefined;
+
+    let userClass = $$props.class ?? '';
+
+    const TAGS_PALETTE = 0
+    const COLORS_PALETTE = 1
+    let view = TAGS_PALETTE;
+
+    $: notUsedTags = getNotUsedTags() 
+    $: filteredTags = filterTags(notUsedTags, '')
+
+    export function reload(props)
+    {
+        if(props && props.usedTags)
+            usedTags = props.usedTags
+
+        if(props && props.allTags)
+            allTags = props.allTags
+
+        if(props && props.onSelect)
+            onSelect = props.onSelect
+
+        if(props && props.onNewTag)
+            onNewTag = props.onNewTag
+
+        allowNewTags = onNewTag != undefined;
+
+        view = TAGS_PALETTE;
+        inputText = ''
+        
+        notUsedTags = getNotUsedTags() 
+        filteredTags = filterTags(notUsedTags, '')
+    }
+
+    let gap = 'gap-2';
+    let s = "md"
+    switch(s)
+    {
+    case 'md':
+        gap = 'gap-3 sm:gap-2'
+        break;
+
+    case 'sm':
+        gap = 'gap-2 sm:gap-2'
+        break;
+
+    case 'xs':
+        gap = 'gap-2 sm:gap-1'
+        break;
+    }
+
+    function getNotUsedTags()
+    {
+        let result = allTags.filter(e => {
+            const label = e.label;
+            let idx = usedTags.findIndex(f => f.label == label)
+            if(idx < 0)
+                return true;
+            else
+                return false;
+        });
+
+        return result;
+    }
+
+    function onTagSelected(tag)
+    {
+        if(onSelect)
+            onSelect(tag, tag.label, tag.label)
+    }
+
+    let inputText = '';
+    function onTextInput(e)
+    {
+        filteredTags = filterTags(notUsedTags, inputText)
+
+        // don't know if needed. we'll see
+        //await tick();
+        //if(onSizeChanged)
+        //    onSizeChanged();
+    }
+
+    function filterTags(tags, inputText)
+    {
+        if(!inputText)
+            return [...tags];
+        else
+        {
+            const filterText = inputText.toLowerCase()
+            return tags.filter(e => e.label && e.label.toLowerCase().includes( filterText ))
+        }
+    }
+
+    function onKeyDown(e)
+    {
+        switch(e.key)
+        {
+        case 'Enter':
+            if(filteredTags.length > 0)
+            {
+                inputText = ''
+                onTagSelected(filteredTags[0])
+                if(onHide)
+                    onHide()
+            }
+            else if(allowNewTags)
+            {
+                onAddTag(undefined)
+            }
+            break;
+
+        case 'Escape':
+            if(inputText)
+            {
+                inputText = ''
+                filteredTags = filterTags(notUsedTags, inputText)
+            }
+            else
+            {
+                if(onHide)
+                    onHide()
+            }
+            break;
+        
+        }
+    }
+
+    
+
+    function onTextBlur(e)
+    {
+        if(isDeviceSmallerThan("sm"))   // blur when virtual keyboard is visible means 'OK' button pressed
+        {
+            if((filteredTags.length == 0) && allowNewTags)
+            {
+                onAddTag(undefined)
+            }
+        }
+        else
+        {
+
+        }
+    }
+
+    async function onAddTag(e)
+    {
+        if(inputText && onNewTag)
+        {
+            view = COLORS_PALETTE
+            await tick();
+            if(onSizeChanged)
+                onSizeChanged();
+        }
+        else if(onHide)
+            onHide();
+    }
+
+    function onNewTagColorSelected(color)
+    {
+        if(inputText && onNewTag)
+            onNewTag(inputText, inputText, color)
+        
+        inputText = ''
+
+        if(onHide)
+            onHide();
+    }
+
+</script>
+
+{#if view==TAGS_PALETTE}
+<menu class="{userClass} flex flex-column {gap} flex-wrap mr-1 sm:mr-0 sm:w-72">
+    <p class="flex flex-row {gap} flex-wrap ">
+        {#key filteredTags}
+            {#if filteredTags.length > 0}
+                {#each filteredTags as tag (tag.label)}
+                    <Tag name={tag.label} color={tag.color} {s}
+                        onCustomClick={(e) => onTagSelected(tag)}/>
+                {/each}
+            {:else if allowNewTags}
+                <p>Create tag:</p>
+            {:else}
+                <p>No tags</p>
+            {/if}
+
+        {/key}
+    </p>
+
+    <section class="flex flex-row {gap} w-full">
+
+    <input  type="text" name="text" id="text"
+            autocomplete="off" 
+            class="block bg-stone-100 dark:bg-stone-800 flex-1"
+            bind:value={inputText}
+            on:input={onTextInput}
+            on:blur={onTextBlur}
+            on:keydown={onKeyDown}
+            placeholder="Type to filter or create tag">
+        {#if allowNewTags}
+            <button class="block w-5 h-5 mt-0.5 ml-auto mr-2
+                    text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
+                    dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600"
+                    class:hidden={inputText.length == 0}
+                    on:click={onAddTag}>
+                <FaPlus/>
+            </button>
+        {/if}
+    </section>
+</menu>
+
+{:else if view == COLORS_PALETTE}
+    <TagColorsPalette onSelect={onNewTagColorSelected}/>
+{/if}
+
+<style>
+
+input:focus {
+    outline: 0px solid transparent;
+  }
+
+  </style>

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

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  TagsProps */
+/** @typedef {typeof __propDef.events}  TagsEvents */
+/** @typedef {typeof __propDef.slots}  TagsSlots */
+export default class Tags extends SvelteComponentTyped<{
+    [x: string]: any;
+    onSelect: any;
+    onHide?: any;
+    onSizeChanged?: any;
+    reload?: ((props: any) => void) | undefined;
+    usedTags?: any[] | undefined;
+    allTags?: any[] | undefined;
+    onNewTag?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get reload(): (props: any) => void;
+}
+export type TagsProps = typeof __propDef.props;
+export type TagsEvents = typeof __propDef.events;
+export type TagsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        onSelect: any;
+        onHide?: any;
+        onSizeChanged?: any;
+        reload?: ((props: any) => void) | undefined;
+        usedTags?: any[] | undefined;
+        allTags?: any[] | undefined;
+        onNewTag?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/tags.svelte

@@ -3,8 +3,10 @@ import Tag from "./tag.svelte";
 import FaPlus from "svelte-icons/fa/FaPlus.svelte";
 import Combo from "./combo/combo.svelte";
 import ComboItem from "./combo/combo.item.svelte";
+import TagsPalette from "./tags.palette.svelte";
 import { contextItemsStore, data_tick_store, contextTypesStore, tagsReloader } from "../stores.js";
 import { informModification, pushChanges } from "../updates.js";
+import { showFloatingToolbar } from "./menu";
 export let tags = "";
 export let getGlobalTags;
 export let self = null;
@@ -67,6 +69,7 @@ function setup(...args) {
 }
 let addComboVisible = false;
 let addCombo;
+let rootElement;
 export async function show(event, hideCallback) {
   if (event) {
     event.stopPropagation();
@@ -79,7 +82,25 @@ export async function show(event, hideCallback) {
     if (hideCallback)
       hideCallback();
   };
-  addCombo?.show(void 0, onAfterCloseCombo);
+  let owner = rootElement;
+  let rect = owner.getBoundingClientRect();
+  if (tagsTable.length == 0) {
+    const m = 15;
+    rect.x -= m;
+    rect.width += 2 * m;
+    rect.y -= m;
+    rect.height += 2 * m;
+  }
+  showFloatingToolbar(
+    rect,
+    TagsPalette,
+    {
+      usedTags: tagsTable,
+      allTags: globalTagsTable,
+      onSelect: onSelectTag,
+      onNewTag: getCreateTagCallback()
+    }
+  );
 }
 function applyChange() {
   if (onSelect)
@@ -97,6 +118,9 @@ function applyChange() {
     changed(value);
 }
 function onSelectTag(itm, key, name) {
+  const idx = tagsTable.findIndex((e) => e.label == key);
+  if (idx >= 0)
+    return;
   tags += `#${key} `;
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
@@ -106,10 +130,13 @@ function onRemoveTag(tag) {
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
 }
-function onNewTagCreated(key, name) {
+function onNewTagCreated(key, name, color = "") {
   tags += `#${key} `;
   let globalTags = getGlobalTags();
-  globalTags += `#${key} `;
+  if (color)
+    globalTags += `#${key}:${color} `;
+  else
+    globalTags += `#${key} `;
   globalTagsTable = decomposeTags(globalTags);
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
@@ -201,17 +228,21 @@ switch (s) {
 }
 </script>
 
-<section class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
+<section class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0" bind:this={rootElement}>
     <p class="flex flex-row {gap} flex-wrap ">
-        {#each tagsTable as tag}
-            {#if isEditable}
-                <Tag name={tag.label} color={tag.color} {s}
-                    onRemove={(e) => {onRemoveTag(tag.label)}}
-                    onColor={canChangeColor ? onColorizeTag : null}/>
-            {:else}
-                <Tag name={tag.label} color={tag.color} {s}/>
-            {/if}
-        {/each}
+        {#if tagsTable.length > 0}
+            {#each tagsTable as tag}
+                {#if isEditable}
+                    <Tag name={tag.label} color={tag.color} {s}
+                        onRemove={(e) => {onRemoveTag(tag.label)}}
+                        onColor={canChangeColor ? onColorizeTag : null}/>
+                {:else}
+                    <Tag name={tag.label} color={tag.color} {s}/>
+                {/if}
+            {/each}
+        {:else}
+            <!--p>&ZeroWidthSpace;</p-->
+        {/if}
     </p>
 
     {#if isEditable}
@@ -223,7 +254,7 @@ switch (s) {
                 </button>
             {/if}
         {:else}
-            <Combo  compact={true} 
+            <!--Combo  compact={true} 
                     inContext='data'
                     onSelect={onSelectTag}
                     onNewItemCreated={getCreateTagCallback()}
@@ -234,7 +265,7 @@ switch (s) {
                 {#each not_used_tags as tag}
                     <ComboItem key={tag.label}/>
                 {/each}
-            </Combo>
+            </Combo-->
         {/if}
     {/if}
 </section>

package/console.svelte

@@ -9,6 +9,8 @@
     let inputElement;
     let protocol = 'cons';
     let protoButtonBorderClass = ''
+    let history = []
+    let currentHistoryElementIdx = -1
 
     async function onKeyDown(e)
     {
@@ -32,18 +34,74 @@
                     input = input.replace('self', navItem)
             }
 
+            const req = input;
+            input = "";
+
             const apiVer = $session.configuration.api_version;
-            const result = await reef.fetch(`/${protocol}/${apiVer}/${input}`)
+            const result = await reef.fetch(`/${protocol}/${apiVer}/${req}`)
             const res = await result.text();
             prevLines = [...prevLines, res]
-
             
-            input = "";
+            updateHistory(req)
         }
         else if(e.key == 'Esc' || e.key == 'Escape')
         {
             input = "";
         }
+        else if(e.key == 'ArrowUp')
+        {
+            if(history.length > 0)
+            {
+                if(currentHistoryElementIdx < 0)
+                {
+                    currentHistoryElementIdx = history.length-1
+                    input = history[currentHistoryElementIdx]
+                }
+                else if(currentHistoryElementIdx > 0)
+                {
+                    currentHistoryElementIdx--;
+                    input = history[currentHistoryElementIdx]
+                }
+                else
+                {
+                    
+                }
+                moveCursorAtEnd()
+            }
+        }
+        else if(e.key == 'ArrowDown')
+        {
+            if(history.length > 0)
+            {
+                if(currentHistoryElementIdx >= 0)
+                {
+                    currentHistoryElementIdx++
+                    if(currentHistoryElementIdx >= history.length)
+                    {
+                        currentHistoryElementIdx = -1
+                        input = ''
+                    }
+                    else
+                        input = history[currentHistoryElementIdx]
+                }  
+                moveCursorAtEnd()
+            }
+        }
+    }
+
+    
+    function updateHistory(command)
+    {
+        const idx = history.findIndex(c => c == command)
+        if(idx < 0)
+            history.push(command)
+        else
+        {
+            history.splice(idx, 1)
+            history.push(command)
+        }
+
+        currentHistoryElementIdx = -1
     }
 
     function getNav(contextLevel)
@@ -67,9 +125,30 @@
         return navItem;
     }
 
+    function moveCursorAtEnd()
+    {
+        return;
+        setTimeout( () => 
+        {
+            const sel = window.getSelection();
+            if(!sel)
+                return;
+            if(sel.focusNode == inputElement)
+                console.log(sel.focusOffset)    
+            //sel.setPosition(inputElement, input.length)        
+        }, 100)
+    } 
+
     afterUpdate(() =>
     {
         inputElement?.scrollIntoView();
+        
+            //const selection = window.getSelection()
+            //if(selection?.focusNode == inputElement)
+            //{
+            //    selection?.setPosition(inputElement, input.length-1)        
+            //}
+           
     })
 
 

package/desk.svelte

@@ -17,12 +17,13 @@
             set_dark_mode_default,
             sidebar_left_pos,
             wholeAppReloader,
-            alerts, removeAlert } from './stores.js'
+            alerts, removeAlert, showFABAlways} from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
     import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
     import { afterUpdate, onMount } from 'svelte';
     import {location} from 'svelte-spa-router'
+    import {FaCopy, FaTimes} from 'svelte-icons/fa'
     
     export let layout;
 
@@ -129,17 +130,31 @@
 
         if(tools_visible)
         {
-            tools_visibility = "hidden sm:block sm:fixed"
-            //fab_base_visibility = "fixed sm:hidden"
-            fab_visibility_mode = FAB_VISIBLE_ON_MOBILE
-
-            content_top = 'top-[50px] sm:top-[40px]'
             
-            if(bottom_bar_visible)
-                content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`
-            else    
-                content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
-               
+            const alwaysShowFAB = (!is_small) && $showFABAlways
+
+            if(alwaysShowFAB)
+            {
+                fab_visibility_mode = FAB_VISIBLE_ALWAYS
+                tools_visibility = "hidden"
+                content_top = 'top-[50px] sm:top-[0px]'
+                
+                if(bottom_bar_visible)
+                    content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`
+                else    
+                    content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-0px)]` 
+            }
+            else
+            {
+                fab_visibility_mode = FAB_VISIBLE_ON_MOBILE
+                tools_visibility = "hidden sm:block sm:fixed"
+                content_top = 'top-[50px] sm:top-[40px]'
+                
+                if(bottom_bar_visible)
+                    content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`
+                else    
+                    content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
+            }
         }
         else
         {
@@ -413,11 +428,7 @@
                         <Operations bind:this={operationsComponent} />
                     </div>
 
-                    {#if is_fab_visible}
-                    <!--div class="{fab_visibility} left-3 {fab_bottom} mb-1 cursor-pointer z-10"-->
-                        <Fab bind:this={fabComponent}/>
-                    <!---/div-->
-                    {/if}
+                   
 
                     <!--#######################################################-->
                     <!--##  CONTENT                          ##################-->
@@ -437,7 +448,11 @@
                             </Configurable>
                     </div>    
 
-
+                     {#if is_fab_visible}
+                    <!--div class="{fab_visibility} left-3 {fab_bottom} mb-1 cursor-pointer z-10"-->
+                        <Fab bind:this={fabComponent} />
+                    <!---/div-->
+                    {/if}
 
                     <!--###########################################################-->
                     <!--##  BOTTOM SIDEBAR          ###############################-->
@@ -457,17 +472,19 @@
                     <section class="fixed left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
                         {#if $alerts && $alerts.length > 0}
                             {#each $alerts as alert, idx}
-                                <Alert class="bg-red-900/40  shadow-lg shadow-stone-400 dark:shadow-black flex flex-row">
-                                    <button class="sm:hidden font-bold  ml-auto"
-                                            on:click={() => {removeAlert(alert)}}>
-                                        x
-                                    </button>
-                                    <p>
+                                <Alert class="bg-red-900/40  shadow-lg shadow-stone-400 dark:shadow-black flex flex-row-reverse sm:flex-row">
+                                    {@const text_max_width = is_small ? '60vw' : '75vw'}
+                                    
+                                    <p class="flex-none truncate" style="max-width: {text_max_width}">
                                         {alert.msg}
                                     </p>
-                                    <button class="hidden sm:block font-bold  ml-auto"
+                                    <button class="block sm:ml-auto w-3 mx-1"
+                                            on:click={() => {navigator.clipboard.writeText(alert.msg)}}>
+                                        <FaCopy/>
+                                    </button>
+                                    <button class="block w-3 mx-1"
                                             on:click={() => {removeAlert(alert)}}>
-                                        x
+                                        <FaTimes/>
                                     </button>
                                 </Alert>    
                             {/each}
@@ -477,7 +494,7 @@
                     <!-- #########################################################-->
                     <!-- ## MODAL DIALOG #########################################-->
                     <!-- #########################################################-->
-                    <div id="__hd_svelte_modal_root" class="z-30">
+                    <div id="__hd_svelte_modal_root" class="z-30 sm:z-40">
                         <!-- after <Modal/> component is shown it's rettached to above div
                             see: modal.svelte afterUpdate -->
                     </div>

package/horizontal.toolbar.svelte

@@ -3,7 +3,7 @@
     //import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import {showMenu} from './components/menu'
     import {push, pop, location} from 'svelte-spa-router'
-    import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store} from './stores.js'
+    import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store, leftHandedFAB} from './stores.js'
     //import Menu from './components/contextmenu.svelte'
 
     import {
@@ -238,6 +238,12 @@
                 });
         }
 
+         options.push({
+                caption: 'Left-handed floating actions',
+                icon: $leftHandedFAB ? FaToggleOn : FaToggleOff,
+                action: (f) => { $leftHandedFAB = !$leftHandedFAB; }
+            })
+
         if(has_selection_details)
         {
             options.push( {
@@ -305,12 +311,12 @@
         {#if definedTabs && definedTabs.length > 0}
             {#each definedTabs as tab}
                 <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={tab.onclick}>
-                    <Icon class="w-5 h-5" component={tab.icon}/>
+                    <Icon s="xl" component={tab.icon}/>
                 </button>    
             {/each}
         {:else}
             <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
-                <Icon class="w-5 h-5" component={icon}/>
+                <Icon s="xl" component={icon}/>
             </button>
         {/if}
     </div>
@@ -324,7 +330,7 @@
         {#if user_is_in_multiple_groups}
             <button class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
                     on:click|stopPropagation={show_groups}>
-                <Icon class="w-5  h-5 " component={FaUsers} />
+                <Icon s="xl" component={FaUsers} />
             </button>
         {/if}
 
@@ -332,7 +338,7 @@
             class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
             on:click|stopPropagation={show_options}>
 
-            <Icon class="w-5  h-5 " component={FaCog} />
+            <Icon s="xl" component={FaCog} />
         </button>
     </div>