@humandialog/forms.svelte 0.5.4 → 0.5.6

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

@@ -3,144 +3,147 @@ import { KanbanColumnTop, KanbanColumnBottom, rKanban_definition } from "../Kanb
 export let definition;
 export let item;
 export let afterActionOperation = void 0;
+export let onMoveUp;
+export let onMoveDown;
+export let onReplace;
 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>
+</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) => { onMoveUp(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) => { onMoveDown(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) => { 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) => { 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) => { onMoveUp(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) => { onMoveDown(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) => { 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) => { 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

@@ -1,19 +1,22 @@
-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 {};
+import { SvelteComponentTyped } from "svelte";
+import { rKanban_definition } from '../Kanban';
+declare const __propDef: {
+    props: {
+        definition: rKanban_definition;
+        item: object;
+        afterActionOperation?: Function | undefined;
+        onMoveUp: Function;
+        onMoveDown: Function;
+        onReplace: Function;
+    };
+    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/internal/kanban.props.svelte

@@ -0,0 +1,140 @@
+<script>import { getContext, tick } from "svelte";
+import { rList_property_type } from "../../list/List";
+import Combo from "../../combo/combo.svelte";
+import DatePicker from "../../date.svelte";
+import Tags from "../../tags.svelte";
+export let position;
+export let item;
+let definition = getContext("rKanban-definition");
+let properties = definition.properties.filter((p) => p.position == position);
+let propElements = [];
+let placeholder = "";
+export function editProperty(field) {
+  let propIdx = properties.findIndex((p) => p.name == field);
+  if (propIdx < 0)
+    return;
+  let property = properties[propIdx];
+  switch (property.type) {
+    case rList_property_type.Date:
+      editDate(field, propIdx);
+      break;
+    case rList_property_type.Combo:
+      editCombo(field, propIdx);
+      break;
+    case rList_property_type.Tags:
+      editTags(field, propIdx);
+      break;
+  }
+}
+function on_date_changed(value, a) {
+  if (!value)
+    item[a] = "";
+  else
+    item[a] = value.toJSON();
+}
+function on_combo_changed(key, name, prop) {
+  if (prop.association) {
+    let iname = prop.combo_definition.element_name ?? "$display";
+    item[prop.a] = {
+      $ref: key,
+      [iname]: name
+    };
+  } else {
+    let value = key ?? name;
+    item[prop.a] = value;
+  }
+}
+async function editCombo(field, propIdx) {
+  let combo = propElements[propIdx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = propElements[propIdx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+async function editDate(field, propIdx) {
+  let combo = propElements[propIdx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = propElements[propIdx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+async function editTags(field, propIdx) {
+  let tags = propElements[propIdx];
+  if (!!tags)
+    tags.show();
+  else {
+    placeholder = field;
+    await tick();
+    tags = propElements[propIdx];
+    if (!!tags)
+      tags.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+</script>
+
+<section class="flex flex-row justify-between">
+    {#each properties as prop, idx}
+        {#if item[prop.a] || placeholder==prop.name}
+            {#if prop.type == rList_property_type.Date}
+                <DatePicker
+                    self={item}
+                    a={prop.a}
+                    compact={true}
+                    s="xs"
+                    inContext="props"
+                    bind:this={propElements[idx]}/>
+            {:else if prop.type == rList_property_type.Combo}
+                <Combo
+                        compact={true}
+                        inContext="props"
+                        self={item}
+                        a={prop.a}
+                        onSelect={prop.onSelect}
+                        isAssociation={prop.association}
+                        icon={false}
+                        definition={prop.combo_definition}
+                        s="xs"
+                        bind:this={propElements[idx]}/>
+            {:else if prop.type == rList_property_type.Static}
+                <p
+                    class="     h-6
+                                sm:text-xs sm:min-h-[1rem]
+                                text-base min-h-[1.5rem]
+                                text-stone-400
+                                text-right"
+                                bind:this={propElements[idx]}>
+                    {item[prop.a]}
+                </p>
+            {:else if prop.type == rList_property_type.Tags}
+                <Tags
+                    class="mt-2"
+                    compact
+                    inContext="props"
+                    self={item}
+                    a={prop.a}
+                    getGlobalTags={prop.getAllTags}
+                    s="xs"
+                    onSelect={prop.onSelect}
+                    onCreate={prop.onCreate}
+                    bind:this={propElements[idx]}
+                />
+            {/if}
+        {/if}
+    {/each}
+</section>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        position: number;
+        item: object;
+        editProperty?: ((field: string) => 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 editProperty(): (field: string) => void;
+}
+export {};

package/components/kanban/kanban.callbacks.svelte

@@ -1,15 +1,9 @@
 <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;
+export let getCardOperations = 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>
+definition.getCardOperations = getCardOperations;
+</script>

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

@@ -1,21 +1,18 @@
-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 {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        onAdd?: Function | undefined;
+        onOpen?: Function | undefined;
+        getCardOperations?: 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

@@ -2,19 +2,19 @@
 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 = "";
+export let state = "";
+export let finishing = false;
+export let operations = void 0;
+export let onTitleChanged = void 0;
 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;
+column.state = state;
+column.finishing = finishing;
+column.operations = operations;
+column.onTitleChanged = onTitleChanged;
 definition.columns.push(column);
-</script>
-
+</script>
+

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

@@ -1,21 +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 {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        width?: string | undefined;
+        state?: any;
+        finishing?: boolean | undefined;
+        operations?: object[] | undefined;
+        onTitleChanged?: 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.combo.svelte

@@ -0,0 +1,36 @@
+<script>import { getContext, setContext } from "svelte";
+import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "./Kanban";
+import { rList_property_combo } from "../list/List";
+import {} from "../combo/combo";
+export let name = "";
+export let a = "";
+export let onSelect = void 0;
+export let association = false;
+export let top = false;
+export let middle = true;
+export let bottom = false;
+let definition = getContext("rKanban-definition");
+let combo_property = new rList_property_combo();
+if (!a && name) {
+  combo_property.a = name;
+  combo_property.name = name;
+} else if (!name && a) {
+  combo_property.a = a;
+  combo_property.name = a;
+} else {
+  combo_property.a = a;
+  combo_property.name = name;
+}
+combo_property.onSelect = onSelect;
+combo_property.association = association;
+if (top)
+  combo_property.position = KanbanCardTop;
+else if (bottom)
+  combo_property.position = KanbanCardBottom;
+else
+  combo_property.position = KanbanCardMiddle;
+definition.properties.push(combo_property);
+setContext("rCombo-definition", combo_property.combo_definition);
+</script>
+
+<slot/>