@humandialog/forms.svelte 0.4.14 → 0.4.15

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

@@ -0,0 +1,295 @@
+<script>import { tick, getContext } from "svelte";
+import { context_items_store } from "../../../stores";
+import {
+  is_selected,
+  selectable,
+  activate_item,
+  is_active,
+  editable,
+  start_editing
+} from "../../../utils";
+import { show_grid_menu, show_menu } from "../../menu";
+import { push_changes, inform_modification } from "../../../updates";
+import Combo from "../../combo/combo.svelte";
+import DatePicker from "../../date.svelte";
+import { rList_definition, rList_property_type } from "../List";
+export let item;
+export let title = "";
+export let summary = "";
+export let typename = void 0;
+export let toolbar_operations;
+export let context_menu;
+let definition = getContext("rList-definition");
+let placeholder = "";
+let props = [];
+$:
+  is_row_active = calculate_active(item, $context_items_store);
+$:
+  is_row_selected = selected(item, $context_items_store);
+$:
+  selected_class = is_row_selected ? "!border-blue-300" : "";
+$:
+  focused_class = is_row_active ? "bg-gray-200 dark:bg-gray-700" : "";
+if (!typename) {
+  if (item.$type)
+    typename = item.$type;
+  else if (item.$ref) {
+    let s = item.$ref.split("/");
+    typename = s[0];
+  }
+}
+if (!title)
+  title = definition.title;
+if (!summary)
+  summary = definition.summary;
+function calculate_active(...args) {
+  return is_active("props", item);
+}
+function selected(...args) {
+  return is_selected(item);
+}
+async function change_name(text) {
+  item[title] = text;
+  inform_modification(item, title, typename);
+  push_changes();
+}
+async function change_summary(text) {
+  item[summary] = text;
+  inform_modification(item, summary, typename);
+  push_changes();
+}
+function edit(e) {
+  if (!is_row_active)
+    return;
+  start_editing(e.target);
+}
+export function activate() {
+  activate_row(null, item);
+}
+function activate_row(e, item2) {
+  if (is_row_active) {
+    let can_show_context_menu = true;
+    let n = e.target;
+    while (n) {
+      let is_in_cell = n.getAttribute("role") == "gridcell";
+      if (is_in_cell) {
+        can_show_context_menu = false;
+        break;
+      }
+      n = n.parentElement;
+    }
+    if (can_show_context_menu && context_menu) {
+      const pt = new DOMPoint(e.clientX, e.clientY);
+      let context_operations = context_menu(item2);
+      if (context_operations !== null) {
+        if (typeof context_operations === "object") {
+          if (Array.isArray(context_operations))
+            show_menu(pt, context_operations);
+          else if (context_operations.grid)
+            show_grid_menu(pt, context_operations.grid);
+        }
+      }
+    }
+  }
+  activate_item("props", item2, toolbar_operations(item2));
+  if (e)
+    e.stopPropagation();
+}
+function on_contextmenu(e) {
+  if (!context_menu)
+    return;
+  const pt = new DOMPoint(e.clientX, e.clientY);
+  let context_operations = context_menu(item);
+  if (context_operations !== null) {
+    if (typeof context_operations === "object") {
+      if (Array.isArray(context_operations))
+        show_menu(pt, context_operations);
+      else if (context_operations.grid)
+        show_grid_menu(pt, context_operations.grid);
+    }
+  }
+  e.preventDefault();
+}
+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;
+  }
+}
+export function edit_property(field) {
+  if (field == "Summary")
+    force_editing("Summary");
+  else {
+    let prop_idx = definition.properties.findIndex((p) => p.name == field);
+    if (prop_idx < 0)
+      return;
+    let property = definition.properties[prop_idx];
+    switch (property.type) {
+      case rList_property_type.Date:
+        edit_date(field, prop_idx);
+        break;
+      case rList_property_type.Combo:
+        edit_combo(field, prop_idx);
+        break;
+    }
+  }
+}
+async function force_editing(field) {
+  let element_id = `__hd_list_ctrl_${item.Id}_${field}`;
+  let element_node = document.getElementById(element_id);
+  if (!element_node) {
+    placeholder = field;
+    await tick();
+    element_node = document.getElementById(element_id);
+    if (!element_node)
+      return;
+  }
+  if (!element_node.classList.contains("editable")) {
+    return;
+  }
+  start_editing(element_node, () => {
+    placeholder = "";
+  });
+}
+async function edit_combo(field, prop_idx) {
+  let combo = props[prop_idx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = props[prop_idx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+async function edit_date(field, prop_idx) {
+  let combo = props[prop_idx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = props[prop_idx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent {selected_class} {focused_class}"
+            on:contextmenu={on_contextmenu}
+            role="menu"
+            tabindex="-1">
+
+    <slot name="left" element={item}/>
+    
+    <div class="ml-3 w-full py-1" use:selectable={item} on:click={(e) => {activate_row(e, item)}} role="row" tabindex="0">
+        <div class="flex flex-row">
+            <p class="font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3">
+                <span  id="__hd_list_ctrl_{item.Id}_Title" role="gridcell" tabindex="0"
+                    use:editable={(text) => {change_name(text)}}
+                    on:click={edit}> 
+                    {item[title]}
+                </span>
+            </p>
+
+            <!--div class="flex flex-row justify-between text-xs flex-none w-1/2 sm:w-2/3"-->
+            <div class="text-xs flex-none w-1/2 sm:w-2/3 grid-{definition.properties.length}">
+                {#each definition.properties as prop, prop_index}
+                    <p class="col-span-1 w-full mr-auto">
+                        {#if item[prop.a] || placeholder == prop.name}
+                            <span role="gridcell" tabindex="0">
+                                {#if prop.type == rList_property_type.Date}
+                                    <DatePicker self={item} 
+                                                a={prop.a}
+                                                compact={true}
+                                                on_select={prop.on_select}
+                                                s="xs"
+                                                in_context="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" 
+                                            compact={true} 
+                                            a={prop.a}
+                                            on_select={prop.on_select}
+                                            is_association={prop.association}
+                                            icon={false} 
+                                            bind:this={props[prop_index]}
+                                            definition={prop.combo_definition}
+                                            changed={(key,name)=>{on_combo_changed(key, name, prop)}}
+                                            s='xs'/>
+                                {/if}
+                            </span>
+                        {/if}
+                    </p>
+                {/each}
+            </div>
+        </div>
+
+        {#if summary && (item[summary] || placeholder=='Summary')}
+            {@const element_id = `__hd_list_ctrl_${item.Id}_Summary`}
+            <p class="text-xs text-slate-400" style="min-height: 1rem;">
+                {#if item[summary]}
+                    <span   id={element_id} role="gridcell" tabindex="0"
+                            use:editable={(text) => {change_summary(text)}}
+                            on:click={edit}>
+                        {item[summary]}
+                    </span>
+                {:else if placeholder == 'Summary'}
+                    <span   id={element_id}
+                            use:editable={(text) => {change_summary(text)}}>
+                    </span>
+                {/if}
+                
+            </p>
+        {/if}
+    </div>
+</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%;
+    }
+
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        item: object;
+        title?: string | undefined;
+        summary?: string | undefined;
+        typename?: string | undefined;
+        toolbar_operations: any;
+        context_menu: any;
+        activate?: (() => void) | undefined;
+        edit_property?: ((field: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        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 activate(): () => void;
+    get edit_property(): (field: string) => void;
+}
+export {};

package/components/list/internal/list.inserter.svelte

@@ -0,0 +1,20 @@
+<script>import { start_editing } from "../../../utils";
+import Icon from "../../icon.svelte";
+import { FaRegCircle } from "svelte-icons/fa";
+export let oninsert;
+export function run(onclose) {
+  start_editing(insertion_paragraph, onclose);
+}
+let insertion_paragraph;
+</script>
+
+<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
+    <Icon   size={4} 
+            component={FaRegCircle} 
+            class="cursor-pointer mt-1.5 ml-2 "/>
+
+    <p  class="ml-3 py-1 font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3"
+        bind:this={insertion_paragraph}
+        use:editable={oninsert} >
+    </p>
+</section>

package/components/list/internal/list.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 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 run(): (onclose: any) => void;
+}
+export {};

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>