@humandialog/forms.svelte 0.4.45 → 0.5.2

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        onInsert: any;
+        run?: ((onclose: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 run(): (onclose: any) => void;
+}
+export {};

package/components/kanban/internal/kanban.move.menu.svelte

@@ -0,0 +1,146 @@
+<script>import { FaAngleUp, FaAngleDown, FaAngleDoubleUp, FaAngleDoubleDown } from "svelte-icons/fa";
+import { KanbanColumnTop, KanbanColumnBottom, rKanban_definition } from "../Kanban";
+export let definition;
+export let item;
+export let afterActionOperation = void 0;
+function replaceMenu() {
+  if (afterActionOperation)
+    setTimeout(() => {
+      afterActionOperation(item);
+    }, 0);
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<menu class="hidden sm:flex flex-row gap-3">
+    <section class="flex flex-col gap-1">
+        <p class="text-xs h-4 w-[100px] truncate"></p>
+        <button class=" h-8 w-full
+                        text-xs font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
+                        bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                        border rounded border-stone-200 dark:border-stone-600 focus:outline-none
+                        inline-flex items-center justify-center"
+                        on:click={(e) => { definition.onUp(item); replaceMenu()}}>
+            <div class="w-3 h-3"><FaAngleUp/></div>
+        </button>
+
+        <button class=" h-8 w-full
+                        text-xs font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
+                        bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                        border rounded border-stone-200 dark:border-stone-600 focus:outline-none
+                        inline-flex items-center justify-center"
+                        on:click={(e) => { definition.onDown(item); replaceMenu()}}>
+            <div class="w-3 h-3"><FaAngleDown/></div>
+        </button>
+    </section>
+
+    {#if definition && definition.columns && definition.columns.length > 0}
+    {#each definition.columns as column, idx}
+        <section class="flex flex-col gap-1">
+            <p class="text-xs h-4 w-[100px] ml-1 truncate">{column.title}</p>
+            <button class=" h-8 w-full
+                            text-base font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
+                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                            border rounded border-stone-200 dark:border-stone-600 focus:outline-none
+                            inline-flex items-center justify-center"
+                            on:click={(e) => { definition.onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
+                <div class="w-3 h-3"><FaAngleDoubleUp/></div>
+            </button>
+
+            <button class=" h-8 w-full
+                            text-base font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
+                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                            border rounded border-stone-200 dark:border-stone-600 focus:outline-none
+                            inline-flex items-center justify-center"
+                            on:click={(e) => { definition.onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
+                <div class="w-3 h-3"><FaAngleDoubleDown/></div>
+            </button>
+        </section>
+    {/each}
+    {/if}
+</menu>
+
+<menu class="flex sm:hidden flex-col gap-3">
+    <section class="flex flex-row">
+        <p class="text-base truncate "></p>
+        <div class="flex flex-row ml-auto gap-3">
+            <button class=" bg-transparent
+                            w-[55px] h-[55px] 
+                            m-0
+                            flex items-center justify-center
+                            disable-dbl-tap-zoom"
+                            on:click={(e) => { definition.onUp(item); replaceMenu()}}>
+                <div class="    w-10 h-10
+                                text-white bg-zinc-500 hover:bg-zinc-500 
+                                font-medium rounded-full text-sm text-center shadow-md
+                                dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                flex items-center justify-center">
+                    <div class="w-5 h-5">
+                        <FaAngleUp/>
+                    </div>
+                </div>
+            </button>
+
+            <button class=" bg-transparent
+                            w-[55px] h-[55px] 
+                            m-0
+                            flex items-center justify-center
+                            disable-dbl-tap-zoom"
+                            on:click={(e) => { definition.onDown(item); replaceMenu()}}>
+                <div class="    w-10 h-10
+                                text-white bg-zinc-500 hover:bg-zinc-500 
+                                font-medium rounded-full text-sm text-center shadow-md
+                                dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                flex items-center justify-center">
+                    <div class="w-5 h-5">
+                        <FaAngleDown/>
+                    </div>
+                </div>
+            </button>
+        </div>
+    </section>
+
+    {#if definition && definition.columns && definition.columns.length > 0}
+    {#each definition.columns as column, idx}
+        <section class="flex flex-row">
+            <p class="text-base mt-4 truncate w-[120px]">{column.title}</p>
+            <div class="flex flex-row ml-auto gap-3">
+                <button class=" bg-transparent
+                                w-[55px] h-[55px] 
+                                m-0
+                                flex items-center justify-center
+                                disable-dbl-tap-zoom"
+                                on:click={(e) => { definition.onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
+                    <div class="    w-10 h-10
+                                    text-white bg-zinc-500 hover:bg-zinc-500 
+                                    font-medium rounded-full text-sm text-center shadow-md
+                                    dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                    flex items-center justify-center">
+                        <div class="w-5 h-5">
+                            <FaAngleDoubleUp/>
+                        </div>
+                    </div>
+                </button>
+
+                <button class=" bg-transparent
+                                w-[55px] h-[55px] 
+                                m-0
+                                flex items-center justify-center
+                                disable-dbl-tap-zoom"
+                                on:click={(e) => { definition.onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
+                    <div class="    w-10 h-10
+                                    text-white bg-zinc-500 hover:bg-zinc-500 
+                                    font-medium rounded-full text-sm text-center shadow-md
+                                    dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                    flex items-center justify-center">
+                        <div class="w-5 h-5">
+                            <FaAngleDoubleDown/>
+                        </div>
+                    </div>
+                </button>
+            </div>
+        </section>
+    {/each}
+    {/if}
+</menu>

package/components/kanban/internal/kanban.move.menu.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { rKanban_definition } from '../Kanban';
+declare const __propDef: {
+    props: {
+        definition: rKanban_definition;
+        item: object;
+        afterActionOperation?: Function | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/components/kanban/kanban.callbacks.svelte

@@ -0,0 +1,15 @@
+<script>import { getContext } from "svelte";
+export let onUp = void 0;
+export let onDown = void 0;
+export let onAdd = void 0;
+export let onRemove = void 0;
+export let onReplace = void 0;
+export let onOpen = void 0;
+let definition = getContext("rKanban-definition");
+definition.onUp = onUp;
+definition.onDown = onDown;
+definition.onAdd = onAdd;
+definition.onRemove = onRemove;
+definition.onReplace = onReplace;
+definition.onOpen = onOpen;
+</script>

package/components/kanban/kanban.callbacks.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        onUp?: Function | undefined;
+        onDown?: Function | undefined;
+        onAdd?: Function | undefined;
+        onRemove?: Function | undefined;
+        onReplace?: Function | undefined;
+        onOpen?: Function | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/components/kanban/kanban.column.svelte

@@ -0,0 +1,20 @@
+<script>import { getContext } from "svelte";
+import { rKanban_column } from "./Kanban";
+export let title = "";
+export let width = "w-[240px]";
+export let self = void 0;
+export let a = "";
+export let objects = void 0;
+export let context = "";
+let definition = getContext("rKanban-definition");
+let column = new rKanban_column();
+column.id = definition.columns.length + 1;
+column.title = title;
+column.width = width;
+column.self = self;
+column.a = a;
+column.objects = objects;
+column.context = context;
+definition.columns.push(column);
+</script>
+

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

@@ -0,0 +1,21 @@
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/components/kanban/kanban.summary.svelte

@@ -0,0 +1,5 @@
+<script>import { getContext } from "svelte";
+export let a;
+let definition = getContext("rKanban-definition");
+definition.summaryAttrib = a;
+</script>

package/components/kanban/kanban.summary.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        a: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/components/kanban/kanban.svelte

@@ -0,0 +1,156 @@
+<script>import { setContext, getContext, afterUpdate } from "svelte";
+import { rKanban_definition } from "./Kanban";
+import { parseWidthDirective, clearActiveItem } from "../../utils";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
+import Column from "./internal/kanban.column.svelte";
+export let title = "";
+export let self = void 0;
+export let context = "";
+export let typename = "";
+export let c = "";
+export let key = "";
+let user_class = $$props.class ?? "";
+let definition = new rKanban_definition();
+setContext("rKanban-definition", definition);
+setContext("rIs-table-component", true);
+let item = null;
+let ctx = context ? context : getContext("ctx");
+let cs = c ? parseWidthDirective(c) : "w-full min-w-full";
+clearActiveItem("props");
+let last_tick = -1;
+$:
+  setup($data_tick_store, $contextItemsStore);
+function setup(...args) {
+  last_tick = $data_tick_store;
+  if (self && ctx)
+    $contextItemsStore[ctx] = self;
+  if (!typename)
+    typename = $contextTypesStore[ctx];
+}
+export function refresh() {
+  setup();
+}
+export function updateSelf(_self) {
+  self = _self;
+  setup();
+}
+export function getColumnIdx(item2) {
+  for (let idx = 0; idx < columns.length; idx++) {
+    let card = columns[idx].findCardByItem(item2);
+    if (card)
+      return idx;
+  }
+  return -1;
+}
+let columns = [];
+afterUpdate(() => {
+  for (let i = 1; i < columns.length; i++) {
+    let left_column = columns[i - 1];
+    let right_column = columns[i];
+    const left_column_height = left_column.getHeight();
+    const right_column_height = right_column.getHeight();
+    if (left_column_height > right_column_height) {
+      left_column.setBorder(left_column.SET_RIGHT);
+      right_column.setBorder(right_column.CLEAR_LEFT);
+    } else {
+      left_column.setBorder(left_column.CLEAR_RIGHT);
+      right_column.setBorder(right_column.SET_LEFT);
+    }
+  }
+});
+export function showMoveOperationsForItem(item2) {
+  columns.forEach((c2) => {
+    const card = c2.findCardByItem(item2);
+    if (card)
+      card.showMoveOperations();
+  });
+}
+export function scrollViewToCard(item2) {
+  columns.forEach((c2) => {
+    const card = c2.findCardByItem(item2);
+    if (card)
+      card._scrollViewToCard();
+  });
+}
+</script>
+
+<slot/> <!-- Launch definition settings -->
+
+
+<section class="h-full mt-5 flex flex-row no-wrap  sm:justify-center  overflow-x-auto {user_class}">
+    {#each definition.columns as column, idx (column.id)}
+        <Column title={column.title}
+                width={column.width}
+                self={column.self}
+                a={column.a}
+                objects={column.objects}
+                context={column.context}
+                key={key}
+                currentColumnIdx={idx}
+                {showMoveOperationsForItem}
+                {scrollViewToCard}
+                bind:this={columns[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>
+            
+        </Column>
+    {/each}
+</section>
+
+<style>
+    .grid-1
+    {
+        display: grid;
+        grid-template-columns: 100%;
+    }
+
+    .grid-2
+    {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    .grid-3
+    {
+        display: grid;
+        grid-template-columns: 33% 33% 33%;
+    }
+
+    .grid-4
+    {
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+    }
+    .grid-5
+    {
+        display: grid;
+        grid-template-columns: 20% 20% 20% 20% 20%;
+    }
+    .grid-6
+    {
+        display: grid;
+        grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6;
+    }
+    .grid-7
+    {
+        display: grid;
+        grid-template-columns: 14.3% 14.3% 14.3% 14.3% 14.3% 14.3% 14.3%;
+    }
+    .grid-8
+    {
+        display: grid;
+        grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
+    }
+
+</style>

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

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title?: string | undefined;
+        self?: object | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+        key?: string | undefined;
+        refresh?: (() => void) | undefined;
+        updateSelf?: ((_self: object) => void) | undefined;
+        getColumnIdx?: ((item: any) => number) | undefined;
+        showMoveOperationsForItem?: ((item: any) => void) | undefined;
+        scrollViewToCard?: ((item: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        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 refresh(): () => void;
+    get updateSelf(): (_self: object) => void;
+    get getColumnIdx(): (item: any) => number;
+    get showMoveOperationsForItem(): (item: any) => void;
+    get scrollViewToCard(): (item: any) => void;
+}
+export {};

package/components/kanban/kanban.title.svelte

@@ -0,0 +1,8 @@
+<script>import { getContext } from "svelte";
+export let a;
+export let onChange = void 0;
+let definition = getContext("rKanban-definition");
+definition.titleAttrib = a;
+definition.titleOnChange = onChange;
+</script>
+

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        a: string;
+        onChange?: Function | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/components/list/List.d.ts

@@ -11,7 +11,7 @@ export declare class rList_property {
     type: rList_property_type;
     name: string;
     a: string;
-    on_select: Function | undefined;
+    onSelect: Function | undefined;
 }
 export declare class rList_property_combo extends rList_property {
     constructor();
@@ -23,12 +23,14 @@ export declare class rList_definition {
     title_editable: boolean;
     on_title_changed: Function | undefined;
     title_readonly: boolean;
+    title_href: string | undefined;
+    title_href_func: Function | undefined;
     summary: string;
     summary_editable: boolean;
     on_summary_changed: Function | undefined;
     summary_readonly: boolean;
     can_insert: boolean;
-    oninsert: Function | undefined;
+    onInsert: Function | undefined;
     inserter_icon: boolean;
     properties: rList_property[];
 }

package/components/list/List.js

@@ -14,7 +14,7 @@ export class rList_property {
     type = rList_property_type.Hidden;
     name = '';
     a = '';
-    on_select = undefined;
+    onSelect = undefined;
 }
 export class rList_property_combo extends rList_property {
     constructor() {
@@ -29,12 +29,14 @@ export class rList_definition {
     title_editable = false;
     on_title_changed = undefined;
     title_readonly = false;
+    title_href = undefined;
+    title_href_func = undefined;
     summary = '';
     summary_editable = false;
     on_summary_changed = undefined;
     summary_readonly = false;
     can_insert = false;
-    oninsert = undefined;
+    onInsert = undefined;
     inserter_icon = false;
     properties = [];
 }

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

@@ -6,7 +6,7 @@ export let definition;
 export let item;
 export let placeholder = "";
 let props = [];
-export function edit_property(field) {
+export function editProperty(field) {
   let prop_idx = definition.properties.findIndex((p) => p.name == field);
   if (prop_idx < 0)
     return;
@@ -54,7 +54,6 @@ async function edit_combo(field, prop_idx) {
 }
 async function edit_date(field, prop_idx) {
   let combo = props[prop_idx];
-  console.log("edit_propery", field, combo);
   if (!!combo)
     combo.show();
   else {
@@ -78,26 +77,26 @@ async function edit_date(field, prop_idx) {
                         <DatePicker self={item} 
                                     a={prop.a}
                                     compact={true}
-                                    on_select={prop.on_select}
+                                    onSelect={prop.onSelect}
                                     s="xs"
-                                    in_context="props sel"
+                                    inContext="props sel"
                                     bind:this={props[prop_index]}
                                     changed={(value)=>{on_date_changed(value, prop.a)}}
                         />
                     {:else if prop.type == rList_property_type.Combo}
                         <Combo  self={item} 
-                                in_context="props sel" 
+                                inContext="props sel" 
                                 compact={true} 
                                 a={prop.a}
-                                on_select={prop.on_select}
-                                is_association={prop.association}
+                                onSelect={prop.onSelect}
+                                isAssociation={prop.association}
                                 icon={false} 
                                 bind:this={props[prop_index]}
                                 definition={prop.combo_definition}
                                 changed={(key,name)=>{on_combo_changed(key, name, prop)}}
                                 s='xs'/>
                     {:else if prop.type == rList_property_type.Static}
-                        <span class="dark:text-white text-gray-400 truncate px-2.5 bg-slate-900/10 dark:bg-slate-100/10 rounded-lg">
+                        <span class="dark:text-white text-stone-400 truncate px-2.5 bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
                             {item[prop.a]}
                         </span>
                     {/if}

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         definition: rList_definition;
         item: object;
         placeholder?: string | undefined;
-        edit_property?: ((field: string) => void) | undefined;
+        editProperty?: ((field: string) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +16,6 @@ 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> {
-    get edit_property(): (field: string) => void;
+    get editProperty(): (field: string) => void;
 }
 export {};

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

@@ -6,7 +6,7 @@ export let readonly = false;
 export let text = "";
 export let placeholder = false;
 export let editable;
-export let click_edit;
+export let clickEdit;
 let user_class = $$props.class ?? "";
 </script>
 
@@ -14,7 +14,7 @@ let user_class = $$props.class ?? "";
 {#if readonly}
     <p {id} class="  sm:text-xs sm:min-h-[1rem]
                     text-base min-h-[1.5rem]
-                    text-slate-400 
+                    text-stone-400 
                     {user_class}"
                     on:click>
         {text}
@@ -22,7 +22,7 @@ let user_class = $$props.class ?? "";
 {:else if text}
     <p {id} class=" sm:text-xs sm:min-h-[1rem]
                     text-base min-h-[1.5rem]
-                    text-slate-400 
+                    text-stone-400 
                     {user_class}"
             use:_editable={editable}
             on:click>
@@ -31,7 +31,7 @@ let user_class = $$props.class ?? "";
 {:else if placeholder}
     <p   {id} class="sm:text-xs sm:min-h-[1rem]
                      text-base min-h-[1.5rem]
-                     text-slate-400 
+                     text-stone-400 
                      {user_class}"
             use:_editable={editable}
             on:click>