@humandialog/forms.svelte 0.4.45 → 0.5.1

package/components/icon.svelte

@@ -1,7 +1,7 @@
 <svelte:options accessors={true}/>
 <script>import { icons } from "../utils.js";
 export let component = null;
-export let module_name = "fa/FaQuestion";
+export let moduleName = "fa/FaQuestion";
 export let img = "";
 export let label = "";
 export let symbol = "";
@@ -89,7 +89,7 @@ $: {
     {#if component != null}
         <svelte:component this={component} />
     {:else if txt}
-        <div   class="m-0 p-0 font-sans font-bold flex flex-col justify-center text-center w-full h-full text-slate-900"
+        <div   class="m-0 p-0 font-sans font-bold flex flex-col justify-center text-center w-full h-full text-stone-900"
                style:font-size={`${size/8}rem`}
                >
             <div>{txt}</div>

package/components/icon.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         component?: null | undefined;
-        module_name?: string | undefined;
+        moduleName?: string | undefined;
         img?: string | undefined;
         label?: string | undefined;
         symbol?: string | undefined;
@@ -34,9 +34,9 @@ export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, Ic
     get component(): null | undefined;
     /**accessor*/
     set component(_: null | undefined);
-    get module_name(): string | undefined;
+    get moduleName(): string | undefined;
     /**accessor*/
-    set module_name(_: string | undefined);
+    set moduleName(_: string | undefined);
     get img(): string | undefined;
     /**accessor*/
     set img(_: string | undefined);

package/components/input.text.svelte

@@ -30,8 +30,8 @@
 
 {#if i!= null}
 <input  type=text value={value} on:input={()=> ($data_tick_store = $data_tick_store + 1)}
-class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
-focus:ring-primary-600 focus:border-primary-600 block w-full  {input_pb} {input_pt} px-2.5 dark:bg-gray-700
-dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" 
+class="bg-stone-50 border border-stone-300 text-stone-900 text-sm rounded-lg 
+focus:ring-primary-600 focus:border-primary-600 block w-full  {input_pb} {input_pt} px-2.5 dark:bg-stone-700
+dark:border-stone-600 dark:placeholder-stone-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" 
 placeholder={placeholder}>
 {/if}

package/components/inputbox.ltop.svelte

@@ -1,7 +1,7 @@
 <script>
-    import {data_tick_store, context_items_store, context_types_store} from '../stores.js' 
-    import {inform_modification, push_changes} from '../updates.js'
-    import {parse_width_directive} from '../utils.js'
+    import {data_tick_store, contextItemsStore, contextTypesStore} from '../stores.js' 
+    import {informModification, pushChanges} from '../updates.js'
+    import {parseWidthDirective} from '../utils.js'
     import {getContext} from 'svelte';
     import Rich_edit from './document/rich.edit.svelte'
     
@@ -18,19 +18,20 @@
     export let val = ''
         
     export let placeholder = 'pl'
+    export let pushChangesImmediately = true;
 
     export  let s = 'sm'
     export  let c = ''
-    export  let validate_cb = undefined;
+    export  let validateCb = undefined;
     export function validate()
     {
-        if(!validate_cb)
+        if(!validateCb)
         {
             invalid = false;
             return true;
         }
 
-        invalid = !validate_cb(val);
+        invalid = !validateCb(val);
         return !invalid;
     } 
 
@@ -50,11 +51,11 @@
             break;
     }
    
-    let cs =  c ? parse_width_directive(c) : 'col-span-1';
+    let cs =  c ? parseWidthDirective(c) : 'col-span-1';
     let ctx = context ? context : getContext('ctx');
         
     let  last_tick = -1    
-    let border_style = "border-gray-300  dark:border-gray-600"
+    let border_style = "border-stone-300  dark:border-stone-600"
 
     $:{ 
         if($data_tick_store > last_tick)
@@ -64,10 +65,10 @@
     function setup()
     {
         last_tick = $data_tick_store;
-        item = self ?? $context_items_store[ctx];    
+        item = self ?? $contextItemsStore[ctx];    
 
         if(!typename)
-            typename = $context_types_store[ctx];
+            typename = $contextTypesStore[ctx];
 
         if(item && a)    
             val = item[a]
@@ -86,14 +87,15 @@
             item[a] = val
             
             if(typename)
-                inform_modification(item, a, typename);
+                informModification(item, a, typename);
         }
     }
 
     function accept_change()
     {
         $data_tick_store = $data_tick_store + 1;
-        push_changes();
+        if(pushChangesImmediately)
+            pushChanges();
             
     }
 
@@ -107,9 +109,9 @@
 </script>    
 
 {#if itype == 'text'}
-    {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-gray-300 dark:border-gray-600" }
+    {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-stone-300 dark:border-stone-600" }
     <div class={cs}>
-        <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
+        <label for="name" class="block {label_mb} text-xs font-small text-stone-900 dark:text-white">{label}</label>
         
         <input  type=text name="name" id="name" 
                 bind:value={val} 
@@ -117,12 +119,12 @@
                 on:blur={() => { accept_change();} }
                 on:keydown={(e)=>{check_validity();}}
                 
-                class="     bg-gray-50 dark:bg-gray-700
+                class="     bg-stone-50 dark:bg-stone-700
                             border {border_style} rounded-lg 
                             focus:ring-primary-600 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500
-                            text-gray-900 dark:text-white text-sm  
+                            text-stone-900 dark:text-white text-sm  
                             block w-full {input_pb} {input_pt} px-2.5 
-                            dark:placeholder-gray-400" 
+                            dark:placeholder-stone-400" 
                 
                 placeholder={placeholder}>
     </div>

package/components/inputbox.ltop.svelte.d.ts

@@ -10,11 +10,12 @@ export default class Inputbox extends SvelteComponentTyped<{
     c?: string | undefined;
     typename?: string | undefined;
     a?: string | undefined;
+    pushChangesImmediately?: boolean | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
     itype?: string | undefined;
     val?: string | undefined;
-    validate_cb?: any;
+    validateCb?: any;
     validate?: (() => boolean) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -35,11 +36,12 @@ declare const __propDef: {
         c?: string | undefined;
         typename?: string | undefined;
         a?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;
         itype?: string | undefined;
         val?: string | undefined;
-        validate_cb?: any;
+        validateCb?: any;
         validate?: (() => boolean) | undefined;
     };
     events: {

package/components/kanban/Kanban.d.ts

@@ -0,0 +1,23 @@
+export declare class rKanban_column {
+    id: number;
+    title: string;
+    width: string;
+    self: object | undefined;
+    a: string;
+    objects: object[] | undefined;
+    context: string;
+}
+export declare class rKanban_definition {
+    columns: rKanban_column[];
+    titleAttrib: string;
+    titleOnChange: Function | undefined;
+    summaryAttrib: string;
+    onUp: Function | undefined;
+    onDown: Function | undefined;
+    onAdd: Function | undefined;
+    onRemove: Function | undefined;
+    onReplace: Function | undefined;
+    onOpen: Function | undefined;
+}
+export declare const KanbanColumnTop = -1;
+export declare const KanbanColumnBottom = -2;

package/components/kanban/Kanban.js

@@ -0,0 +1,23 @@
+export class rKanban_column {
+    id;
+    title = '';
+    width = 'w-[240px]';
+    self = undefined;
+    a = '';
+    objects = undefined;
+    context = '';
+}
+export class rKanban_definition {
+    columns = [];
+    titleAttrib = '';
+    titleOnChange = undefined;
+    summaryAttrib = '';
+    onUp = undefined;
+    onDown = undefined;
+    onAdd = undefined;
+    onRemove = undefined;
+    onReplace = undefined;
+    onOpen = undefined;
+}
+export const KanbanColumnTop = -1;
+export const KanbanColumnBottom = -2;

package/components/kanban/internal/kanban.card.svelte

@@ -0,0 +1,158 @@
+<script>import { getContext } from "svelte";
+import {
+  contextItemsStore,
+  isActive,
+  isSelected,
+  activateItem,
+  selectable,
+  editable,
+  showFloatingToolbar
+} from "../../..";
+import { FaArrowsAlt, FaTrash, FaPlus, FaAlignLeft } from "svelte-icons/fa";
+import MoveOperations from "./kanban.move.menu.svelte";
+export let item;
+export let showMoveOperationsForItem = void 0;
+export let scrollViewToCard = void 0;
+export let runInserter = void 0;
+let definition = getContext("rKanban-definition");
+$:
+  is_row_active = calculate_active(item, $contextItemsStore);
+$:
+  is_row_selected = selected(item, $contextItemsStore);
+$:
+  selected_class = is_row_selected ? "!border-blue-300" : "";
+$:
+  focused_class = is_row_active ? "bg-stone-100 dark:bg-stone-700" : "";
+function calculate_active(...args) {
+  return isActive("props", item);
+}
+function selected(...args) {
+  return isSelected(item);
+}
+export function activate(e) {
+  if (e)
+    e.stopPropagation();
+  if (isActive("props", item)) {
+    return;
+  }
+  activateItem("props", item, operations);
+}
+let operations = [
+  {
+    caption: "",
+    icon: FaPlus,
+    action: (f) => {
+      if (runInserter)
+        runInserter(item);
+    }
+  },
+  {
+    caption: "",
+    icon: FaArrowsAlt,
+    toolbar: MoveOperations,
+    props: {
+      definition,
+      item,
+      afterActionOperation: scrollViewToCard
+    }
+  },
+  {
+    caption: "",
+    icon: FaTrash,
+    action: (f) => definition.onRemove(item)
+  }
+];
+let moveButton;
+let card;
+export function showMoveOperations() {
+  let rect = moveButton.getBoundingClientRect();
+  showFloatingToolbar(
+    rect,
+    MoveOperations,
+    {
+      definition,
+      item,
+      afterActionOperation: showMoveOperationsForItem
+    }
+  );
+}
+export function _scrollViewToCard() {
+  card?.scrollIntoView(
+    {
+      behavior: "smooth",
+      block: "start",
+      inline: "center"
+    }
+  );
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selected_class} {focused_class}"
+     class:cursor-pointer={!is_row_active}
+     on:click={activate}
+     use:selectable={item} 
+     bind:this={card}>
+
+    <!--  -->
+    <!--section class="h-6 w-full flex flex-row ">
+        <button class="h-3 w-3"
+                class:hidden={!is_row_active}
+                on:click={(e) => showMoveOperations()}
+                bind:this={moveButton}>
+            <FaArrowsAlt/>
+        </button>
+        
+        {#if $$slots.kanbanCardTopProps}
+            <div class="ml-auto flex flex-row gap-2">
+                <slot name="kanbanCardTopProps" element={item}/>
+            </div>
+        {/if}
+    </section-->
+
+    {#if $$slots.kanbanCardTopProps}
+        <section class="flex flex-row justify-between">
+            <slot name="kanbanCardTopProps" element={item}/>
+        </section>
+    {/if}
+    
+
+    <h3  class=" text-lg font-semibold min-h-[1.75rem]
+                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                whitespace-nowrap overflow-clip truncate w-full sm:flex-none
+                relative"
+                use:editable={{
+                    action: (text) => definition.titleOnChange(text, item), 
+                    active: true}}>
+        {item[definition.titleAttrib]}
+        
+        {#if definition.onOpen}
+            <button class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3"
+                    class:hidden={!is_row_active}
+                    on:click={(e) => definition.onOpen(item)}>
+                <FaAlignLeft/>
+            </button>
+        {/if}
+    </h3>
+
+    {#if $$slots.kanbanCardMiddleProps}
+        <section class="w-full flex flex-row">
+             <slot name="kanbanCardMiddleProps" element={item} />
+        </section>
+    {/if}
+
+    {#if item[definition.summaryAttrib]}
+        <summary class="  sm:text-xs sm:min-h-[1rem]
+                    text-base min-h-[1.5rem]
+                    text-stone-400
+                    max-h-[75px] sm:max-h-[64px]
+                    text-ellipsis overflow-hidden">
+            {item[definition.summaryAttrib]}
+        </summary>
+    {/if}
+
+    {#if $$slots.kanbanCardBottomProps}
+        <slot name="kanbanCardBottomProps" element={item} />
+    {/if}
+</li>

package/components/kanban/internal/kanban.card.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        item: object;
+        showMoveOperationsForItem?: Function | undefined;
+        scrollViewToCard?: Function | undefined;
+        runInserter?: Function | undefined;
+        activate?: ((e: any) => void) | undefined;
+        showMoveOperations?: (() => void) | undefined;
+        _scrollViewToCard?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        kanbanCardTopProps: {
+            element: object;
+        };
+        kanbanCardMiddleProps: {
+            element: object;
+        };
+        kanbanCardBottomProps: {
+            element: object;
+        };
+    };
+};
+export type KanbanProps = typeof __propDef.props;
+export type KanbanEvents = typeof __propDef.events;
+export type KanbanSlots = typeof __propDef.slots;
+export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
+    get activate(): (e: any) => void;
+    get showMoveOperations(): () => void;
+    get _scrollViewToCard(): () => void;
+}
+export {};

package/components/kanban/internal/kanban.column.svelte

@@ -0,0 +1,181 @@
+<script>import { getContext, afterUpdate, tick } from "svelte";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../../../stores";
+import { getActive, activateItem } from "../../../utils.js";
+import Card from "./kanban.card.svelte";
+import { KanbanColumnTop, KanbanColumnBottom } from "../Kanban";
+import Inserter from "./kanban.inserter.svelte";
+import { FaPlus } from "svelte-icons/fa";
+export let title = "";
+export let width = "w-[240px]";
+export let self = void 0;
+export let a = "";
+export let objects = void 0;
+export let context = "";
+export let key = "";
+export let currentColumnIdx;
+export let showMoveOperationsForItem = void 0;
+export let scrollViewToCard = void 0;
+let column_element;
+export function getHeight() {
+  return column_element.getBoundingClientRect().height;
+}
+export const SET_LEFT = 0;
+export const SET_RIGHT = 1;
+export const CLEAR_LEFT = 2;
+export const CLEAR_RIGHT = 3;
+export function setBorder(what_to_do) {
+  switch (what_to_do) {
+    case SET_LEFT:
+      column_element.classList.add("border-l");
+      break;
+    case SET_RIGHT:
+      column_element.classList.add("border-r");
+      break;
+    case CLEAR_LEFT:
+      column_element.classList.remove("border-l");
+      break;
+    case CLEAR_RIGHT:
+      column_element.classList.remove("border-r");
+      break;
+  }
+}
+let definition = getContext("rKanban-definition");
+let item = null;
+let items = void 0;
+let ctx = context ? context : getContext("ctx");
+let last_tick = -1;
+let item_key = "";
+let width_class = width ? `w-11/12 sm:${width}` : "w-11/12 sm:w-[240px]";
+$:
+  setup($data_tick_store, $contextItemsStore);
+function setup(...args) {
+  last_tick = $data_tick_store;
+  item = self ?? $contextItemsStore[ctx];
+  items = void 0;
+  if (objects) {
+    items = objects;
+  } else if (item && a)
+    items = item[a];
+  if (items == void 0)
+    items = [];
+  if (items.length > 0) {
+    let first_element = items[0];
+    let keys = Object.keys(first_element);
+    if (key)
+      item_key = key;
+    else if (keys.includes("Id"))
+      item_key = "Id";
+    else if (keys.includes("$ref"))
+      item_key = "$ref";
+    else if (keys.length > 0)
+      item_key = keys[0];
+    else
+      item_key = "";
+  }
+}
+let cards = [];
+export function findCardByItem(item2) {
+  if (!cards)
+    return null;
+  const item_idx = items?.findIndex((i) => i == item2);
+  if (item_idx >= 0) {
+    return cards[item_idx];
+  } else
+    return null;
+}
+let inserter;
+const None = 0;
+let showInserterAfter = None;
+let activateAfterDomUpdate = null;
+let lastActivatedElement = null;
+export async function add(after = KanbanColumnTop) {
+  if (!definition.onAdd)
+    return;
+  showInserterAfter = after ?? KanbanColumnTop;
+  if (activateAfterDomUpdate)
+    activateAfterDomUpdate = null;
+  lastActivatedElement = getActive("props");
+  let fakeItem = {};
+  activateItem("props", fakeItem);
+  await tick();
+  if (!inserter)
+    return;
+  inserter.run(async (detail) => {
+    showInserterAfter = None;
+    if (detail.cancel)
+      activateAfterDomUpdate = lastActivatedElement;
+    else {
+      if (detail.incremental) {
+        let currentActive = activateAfterDomUpdate ?? getActive("props");
+        await add(currentActive);
+      }
+    }
+  });
+}
+async function insert(title2, after) {
+  let newElement = await definition.onAdd(title2, currentColumnIdx, after);
+  if (!newElement)
+    return;
+  activateAfterDomUpdate = newElement;
+}
+afterUpdate(() => {
+  if (activateAfterDomUpdate) {
+    let activateAfterDomUpdateIdx = items.findIndex((e) => e == activateAfterDomUpdate);
+    activateAfterDomUpdate = null;
+    if (activateAfterDomUpdateIdx >= 0) {
+      cards[activateAfterDomUpdateIdx].activate();
+    }
+  }
+});
+</script>
+
+
+<section class="flex-none sm:flex-1 sm:min-w-[180px] sm:max-w-[240px] {width_class}">
+    <header>
+        <h2 class="mb-2 text-lg sm:text-xs uppercase w-full text-center whitespace-nowrap relative">{title}
+            <button class="absolute right-2 w-4 sm:w-2.5"
+                    on:click={(e) => add(KanbanColumnTop)}>
+                <FaPlus/>
+            </button>
+        </h2>
+    </header>
+    <ul class="w-full border-stone-700" bind:this={column_element}>
+        {#if showInserterAfter === KanbanColumnTop}
+            <Inserter   onInsert={async (text) => {await insert(text, KanbanColumnTop)}}
+                        bind:this={inserter} />
+        {/if}
+
+        {#if items && items.length > 0}
+            {#each items as element, item_idx (element[item_key])}
+                <Card   item={element} 
+                        {showMoveOperationsForItem}
+                        {scrollViewToCard}
+                        runInserter={add}
+                        bind:this={cards[item_idx]}>
+                    <svelte:fragment slot="kanbanCardTopProps" let:element>
+                        <slot name="kanbanCardTopProps" {element}/>
+                    </svelte:fragment>
+                
+                    <svelte:fragment slot="kanbanCardMiddleProps" let:element>
+                        <slot name="kanbanCardMiddleProps" {element}/>
+                    </svelte:fragment>
+                
+                    <svelte:fragment slot="kanbanCardBottomProps" let:element>
+                        <slot name="kanbanCardBottomProps" {element}/>
+                    </svelte:fragment>
+                </Card>
+
+                {#if showInserterAfter == element}
+                    <Inserter   onInsert={async (text) => {await insert(text, showInserterAfter)}}
+                                bind:this={inserter} />
+                {/if}
+            {/each}
+        {/if}
+
+        {#if showInserterAfter === KanbanColumnBottom}
+            <Inserter   onInsert={async (text) => {await insert(text, KanbanColumnBottom)}}
+                        bind:this={inserter} />
+        {/if}
+
+    </ul>
+</section>

package/components/kanban/internal/kanban.column.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        width?: string | undefined;
+        self?: object | undefined;
+        a?: string | undefined;
+        objects?: object[] | undefined;
+        context?: string | undefined;
+        key?: string | undefined;
+        currentColumnIdx: number;
+        showMoveOperationsForItem?: Function | undefined;
+        scrollViewToCard?: Function | undefined;
+        getHeight?: (() => number) | undefined;
+        SET_LEFT?: 0 | undefined;
+        SET_RIGHT?: 1 | undefined;
+        CLEAR_LEFT?: 2 | undefined;
+        CLEAR_RIGHT?: 3 | undefined;
+        setBorder?: ((what_to_do: number) => void) | undefined;
+        findCardByItem?: ((item: object) => any) | undefined;
+        add?: ((after?: object | number) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        kanbanCardTopProps: {
+            element: object;
+        };
+        kanbanCardMiddleProps: {
+            element: object;
+        };
+        kanbanCardBottomProps: {
+            element: object;
+        };
+    };
+};
+export type KanbanProps = typeof __propDef.props;
+export type KanbanEvents = typeof __propDef.events;
+export type KanbanSlots = typeof __propDef.slots;
+export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEvents, KanbanSlots> {
+    get getHeight(): () => number;
+    get SET_LEFT(): 0;
+    get SET_RIGHT(): 1;
+    get CLEAR_LEFT(): 2;
+    get CLEAR_RIGHT(): 3;
+    get setBorder(): (what_to_do: number) => void;
+    get findCardByItem(): (item: object) => any;
+    get add(): (after?: number | object) => Promise<void>;
+}
+export {};

package/components/kanban/internal/kanban.inserter.svelte

@@ -0,0 +1,24 @@
+<script>import {
+  startEditing,
+  editable
+} from "../../..";
+export let onInsert;
+export function run(onclose) {
+  startEditing(insertion_paragraph, onclose);
+}
+let insertion_paragraph;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
+            bg-stone-100 dark:bg-stone-700">
+
+    <h3  class=" text-lg font-semibold min-h-[1.75rem]
+                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                use:editable={onInsert}
+                bind:this={insertion_paragraph}>
+        
+    </h3>
+</li>