@humandialog/forms.svelte 0.4.13 → 0.4.15

package/components/list/list.combo.svelte

@@ -0,0 +1,20 @@
+<script>import { getContext, setContext } from "svelte";
+import { rList_property_combo } from "./List";
+import {} from "../combo/combo";
+export let name;
+export let a = "";
+export let on_select = void 0;
+export let association = false;
+let definition = getContext("rList-definition");
+let combo_property = new rList_property_combo();
+combo_property.name = name;
+combo_property.a = a;
+if (!combo_property.a)
+  combo_property.a = combo_property.name;
+combo_property.on_select = on_select;
+combo_property.association = association;
+definition.properties.push(combo_property);
+setContext("rCombo-definition", combo_property.combo_definition);
+</script>
+
+<slot/>

package/components/list/list.combo.svelte.d.ts

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

package/components/list/list.date.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from "svelte";
+import { rList_property_type, rList_property } from "./List";
+export let name;
+export let a = "";
+export let on_select = void 0;
+let definition = getContext("rList-definition");
+let date_property = new rList_property(rList_property_type.Date);
+date_property.name = name;
+date_property.a = a;
+if (!date_property.a)
+  date_property.a = date_property.name;
+date_property.on_select = on_select;
+definition.properties.push(date_property);
+</script>

package/components/list/list.date.svelte.d.ts

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

package/components/list/list.inserter.svelte

@@ -0,0 +1,6 @@
+<script>import { getContext } from "svelte";
+export let action;
+let definition = getContext("rList-definition");
+definition.can_insert = true;
+definition.oninsert = action;
+</script>

package/components/list/list.inserter.svelte.d.ts

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

package/components/list/list.summary.svelte

@@ -0,0 +1,7 @@
+<script>import { getContext } from "svelte";
+export let a;
+export let editable = false;
+let definition = getContext("rList-definition");
+definition.summary = a;
+definition.summary_editable = editable;
+</script>

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

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

package/components/list/list.svelte

@@ -0,0 +1,148 @@
+<script>import { setContext, getContext, afterUpdate, tick } from "svelte";
+import { data_tick_store, context_items_store, context_types_store } from "../../stores";
+import { activate_item, get_active, clear_active_item, parse_width_directive } from "../../utils";
+import { rList_definition } from "./List";
+import List_element from "./internal/list.element.svelte";
+import Inserter from "./internal/list.inserter.svelte";
+export let title = "";
+export let self = null;
+export let a = "";
+export let objects = void 0;
+export let context = "";
+export let typename = "";
+export let c = "";
+export let toolbar_operations;
+export let context_menu;
+let definition = new rList_definition();
+setContext("rList-definition", definition);
+setContext("rIs-table-component", true);
+let item = null;
+let items = null;
+let ctx = context ? context : getContext("ctx");
+let cs = c ? parse_width_directive(c) : "w-full min-w-full";
+let show_insertion_row_after_element = null;
+const END_OF_LIST = {};
+let rows = [];
+let activate_after_dom_update = null;
+let inserter;
+clear_active_item("props");
+let last_tick = -1;
+$:
+  setup($data_tick_store, $context_items_store);
+function setup(...args) {
+  last_tick = $data_tick_store;
+  item = self ?? $context_items_store[ctx];
+  if (objects)
+    items = objects;
+  else if (item && a)
+    items = item[a];
+  else
+    items = [];
+  if (!typename)
+    typename = $context_types_store[ctx];
+}
+afterUpdate(() => {
+  if (activate_after_dom_update) {
+    let row_to_activate_idx = items.findIndex((e) => e == activate_after_dom_update);
+    activate_after_dom_update = null;
+    if (row_to_activate_idx >= 0) {
+      rows[row_to_activate_idx].activate();
+    }
+  }
+});
+export function refresh() {
+  setup();
+}
+export function update_objects(_objects) {
+  objects = _objects;
+  setup();
+}
+export function update_self(_self) {
+  self = _self;
+  setup();
+}
+let last_activated_element = null;
+export async function add(after = null) {
+  if (!definition.can_insert)
+    return;
+  show_insertion_row_after_element = after ?? END_OF_LIST;
+  last_activated_element = get_active("props");
+  let fake_item = {};
+  activate_item("props", fake_item);
+  await tick();
+  if (!inserter)
+    return;
+  inserter.run(async (detail) => {
+    show_insertion_row_after_element = null;
+    if (detail.cancel)
+      activate_after_dom_update = last_activated_element;
+    else {
+      if (detail.incremental) {
+        let current_active = get_active("props");
+        await add(current_active);
+      }
+    }
+  });
+}
+async function insert(title2, after) {
+  let new_element = await definition.oninsert(title2, after);
+  if (!new_element)
+    return;
+  activate_after_dom_update = new_element;
+  refresh();
+}
+export function remove(element) {
+  let removing_idx = items?.findIndex((e) => e == element);
+  if (removing_idx < 0)
+    return;
+  let active_element = get_active("props");
+  if (active_element == element) {
+    if (removing_idx + 1 < items.length)
+      rows[removing_idx + 1].activate();
+    else
+      activate_item("props", null, []);
+  }
+  items = items.filter((t) => t != element);
+}
+export function edit(element, property_name) {
+  let editing_idx = items?.findIndex((e) => e == element);
+  if (editing_idx < 0)
+    return;
+  rows[editing_idx].edit_property(property_name);
+}
+</script>
+
+<slot/> <!-- Launch definition settings -->
+
+
+{#if title}
+    <p class="mt-3 uppercase text-sm text-center">{title}</p>
+    <hr class="w-full">
+{/if}
+
+
+{#if items && items.length > 0 }
+    {#each items as element, i (element.Id)}
+        
+        <List_element   item={element} 
+                        {toolbar_operations}
+                        {context_menu}
+                        bind:this={rows[i]}
+                        >
+            <span slot="left" let:element>
+                <slot name="left" {element}/>
+            </span>
+        </List_element>
+
+        {#if show_insertion_row_after_element == element}
+            <Inserter   oninsert={async (text) => {await insert(text, show_insertion_row_after_element)}}
+                        bind:this={inserter}    />
+        {/if}
+    {/each}
+{/if}
+
+{#if show_insertion_row_after_element == END_OF_LIST}
+    <Inserter   oninsert={async (text) => {await insert(text, null)}}
+                bind:this={inserter}    />
+{/if}
+

package/components/list/list.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        self?: object | null | undefined;
+        a?: string | undefined;
+        objects?: object[] | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+        toolbar_operations: any;
+        context_menu: any;
+        refresh?: (() => void) | undefined;
+        update_objects?: ((_objects: object[]) => void) | undefined;
+        update_self?: ((_self: object) => void) | undefined;
+        add?: ((after?: object | null) => Promise<void>) | undefined;
+        remove?: ((element: object) => void) | undefined;
+        edit?: ((element: object, property_name: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        left: {
+            element: object;
+        };
+    };
+};
+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 refresh(): () => void;
+    get update_objects(): (_objects: object[]) => void;
+    get update_self(): (_self: object) => void;
+    get add(): (after?: object | null) => Promise<void>;
+    get remove(): (element: object) => void;
+    get edit(): (element: object, property_name: string) => void;
+}
+export {};

package/components/list/list.title.svelte

@@ -0,0 +1,7 @@
+<script>import { getContext } from "svelte";
+export let a;
+export let editable = false;
+let definition = getContext("rList-definition");
+definition.title = a;
+definition.title_editable = editable;
+</script>

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

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

package/components/menu.d.ts

@@ -1,3 +1,3 @@
-export declare function show_menu(x: number, y: number, operations: any): void;
-export declare function show_floating_toolbar(x: number, y: number, toolbar: any, props?: {}): void;
-export declare function show_grid_menu(x: number, y: number, operations: any): void;
+export declare function show_menu(around: DOMRect | DOMPoint, operations: any): void;
+export declare function show_floating_toolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): void;
+export declare function show_grid_menu(around: DOMRect | DOMPoint, operations: any): void;

package/components/menu.js

@@ -3,7 +3,7 @@ import Floating_container from './Floating_container.svelte';
 import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;
 let toolbar_component = null;
-export function show_menu(x, y, operations) {
+export function show_menu(around, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!!!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -11,14 +11,18 @@ export function show_menu(x, y, operations) {
             target: app_div,
             props: {}
         });
-        menu_comopnent.show(x, y, operations);
+        menu_comopnent.show(around, operations);
+    }
+    else if (menu_comopnent) {
+        if (menu_comopnent.is_visible())
+            menu_comopnent.hide();
+        else
+            menu_comopnent.show(around, operations);
     }
-    else if (menu_comopnent)
-        menu_comopnent.show(x, y, operations);
     else
         console.error('what now?');
 }
-export function show_floating_toolbar(x, y, toolbar, props = {}) {
+export function show_floating_toolbar(around, toolbar, props = {}) {
     let floating_container = document.getElementById("__hd_svelte_floating_container");
     if (!!!floating_container) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -26,13 +30,19 @@ export function show_floating_toolbar(x, y, toolbar, props = {}) {
             target: app_div,
             props: {}
         });
-        toolbar_component.show(x, y, toolbar, props);
+        toolbar_component.show(around, toolbar, props);
+    }
+    else if (toolbar_component) {
+        if (toolbar_component.is_visible()) {
+            toolbar_component.hide();
+        }
+        else {
+            toolbar_component.show(around, toolbar, props);
+        }
     }
-    else if (toolbar_component)
-        toolbar_component.show(x, y, toolbar, props);
     else
         console.error('what now?');
 }
-export function show_grid_menu(x, y, operations) {
-    show_floating_toolbar(x, y, Grid, { operations: operations });
+export function show_grid_menu(around, operations) {
+    show_floating_toolbar(around, Grid, { operations: operations });
 }

package/components/sidebar/sidebar.item.svelte

@@ -3,7 +3,8 @@ import { context_items_store, auto_hide_sidebar } from "../../stores";
 import {
   selectable as _selectable,
   is_selected,
-  editable as _editable
+  editable as _editable,
+  handle_select
 } from "../../utils";
 export let href;
 export let icon = void 0;
@@ -27,27 +28,38 @@ function editable_if_needed(node, editable2) {
   if (editable2)
     _editable(node, editable2);
 }
+function on_link_clicked(e) {
+  auto_hide_sidebar();
+  if (selectable)
+    handle_select(e);
+  e.stopPropagation();
+}
 </script>
 
 <li>
-    <a
-        href={href}
-        on:click={ (e) => auto_hide_sidebar() } 
+    <!--svelte-ignore a11y-click-events-have-key-events -->
+    <div
+        on:click
         on:contextmenu
-        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent {user_class}"
+        on:keydown
+        on:keyup
+        class="p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent {user_class}"
         class:bg-gray-200={active}
         class:dark:bg-gray-700={active}
         use:selectable_if_needed={selectable}
-        class:selected={selected(selectable, context_data)}
-                            >
-            {#if icon}
-                <Icon size={5} component={icon}/>
-            {/if}
-            <span   class="ml-3"
-                    use:editable_if_needed={editable}>
-                <slot/>
-            </span>
-    </a>
+        class:selected={selected(selectable, context_data)}>
+            <a  href={href} 
+                on:click={on_link_clicked} 
+                class="inline-flex items-center group">
+                {#if icon}
+                    <Icon size={5} component={icon}/>
+                {/if}
+                <span   class="ml-3 group-hover:underline"
+                        use:editable_if_needed={editable}>
+                    <slot/>
+                </span>
+            </a>
+        </div>
 </li>
 
 

package/components/sidebar/sidebar.item.svelte.d.ts

@@ -9,7 +9,10 @@ declare const __propDef: {
         editable?: any | undefined;
     };
     events: {
+        click: MouseEvent;
         contextmenu: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/table/table.svelte

@@ -86,7 +86,7 @@ function show_context_menu(e, itm, cinfo2) {
     return;
   e.stopPropagation();
   e.preventDefault();
-  show_menu(e.clientX, e.clientY, menu_operations);
+  show_menu(new DOMPoint(e.clientX, e.clientY), menu_operations);
 }
 </script>