@humandialog/forms.svelte 0.4.13 → 0.4.15

package/components/date.svelte

@@ -1,60 +1,105 @@
 <script>import { getContext } from "svelte";
 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 { parse_width_directive, is_device_smaller_than } from "../utils.js";
 export let self = null;
 export let a = "";
 export let context = "";
 export let typename = "";
 export let date = null;
+export let on_select = void 0;
+export let type = "date";
+export let changed = void 0;
 export let s = "sm";
 export let c = "";
-let is_table_component = getContext("rIs-table-component");
+export let compact = false;
+export let in_context = "sel";
+let on_hide_callback = void 0;
+export function show(event, hide_callback) {
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  if (!!hide_callback)
+    on_hide_callback = hide_callback;
+  else
+    on_hide_callback = void 0;
+  if (input_element) {
+    input_element.focus();
+    if (is_device_smaller_than("sm")) {
+      input_element.click();
+    }
+    if ("showPicker" in HTMLInputElement.prototype) {
+      input_element.showPicker();
+    }
+  }
+}
+let is_compact = getContext("rIs-table-component") || compact;
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
+let font_size = "text-sm";
+let line_h = "h-4";
 switch (s) {
   case "md":
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
+    font_size = "text-sm";
+    line_h = "h-5";
+    break;
+  case "xs":
+    input_pt = "pt-0.5";
+    input_pb = "pb-0.5";
+    font_size = "text-xs";
+    line_h = "h-4";
     break;
 }
 let item = null;
-let additional_class = $$restProps.class ?? "";
+let user_class = $$restProps.class ?? "";
 let value = null;
 let rValue = "";
 let ctx = context ? context : getContext("ctx");
 let cs = parse_width_directive(c);
 let style;
-if (!is_table_component) {
+let input_element = void 0;
+let background_class = is_compact ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
+if (!is_compact) {
   style = `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`;
 } else {
-  style = `bg-transparent text-sm block w-full  ${input_pb} ${input_pt} px-2.5`;
+  style = `${font_size}`;
 }
 let can_be_activated = true;
 let last_tick = -1;
 $:
-  setup($data_tick_store);
-function setup(data_tick_store2) {
-  if (data_tick_store2 <= last_tick)
-    return;
-  last_tick = data_tick_store2;
+  setup($data_tick_store, $context_items_store);
+function setup(...args) {
+  last_tick = data_tick_store;
   if (!date) {
     item = self ?? $context_items_store[ctx];
     if (!typename)
       typename = $context_types_store[ctx];
+    if (!typename) {
+      if (item.$type)
+        typename = item.$type;
+      else if (item.$ref) {
+        let s2 = item.$ref.split("/");
+        typename = s2[0];
+      }
+    }
     if (!item[a])
       value = null;
     else
       value = new Date(item[a]);
   } else
     value = date;
-  if (is_table_component) {
-    if ($context_items_store["sel"] != self)
-      can_be_activated = false;
-    else
-      can_be_activated = true;
+  if (is_compact) {
+    can_be_activated = false;
+    let contexts = in_context.split(" ");
+    contexts.forEach((ctx2) => {
+      if ($context_items_store[ctx2] == item)
+        can_be_activated = true;
+    });
   } else
     can_be_activated = true;
   rValue = get_formatted_date(value);
@@ -75,14 +120,19 @@ function get_formatted_date(d) {
     hour = "0" + hour;
   if (minutes.length < 2)
     minutes = "0" + minutes;
-  return `${year}-${month}-${day} ${hour}:${minutes}`;
+  if (type == "datetime-local")
+    return `${year}-${month}-${day} ${hour}:${minutes}`;
+  else
+    return `${year}-${month}-${day}`;
 }
-function on_changed() {
+async function on_changed() {
   if (!rValue)
     value = null;
   else
     value = new Date(rValue);
-  if (item != null) {
+  if (on_select) {
+    await on_select(value);
+  } else if (item != null) {
     if (value)
       item[a] = value.toISOString();
     else
@@ -92,22 +142,89 @@ function on_changed() {
       $data_tick_store = $data_tick_store + 1;
       push_changes();
     }
+    if (!!changed)
+      changed(value);
   }
 }
+function blur(e) {
+  if (!!on_hide_callback)
+    on_hide_callback();
+}
 </script>
 
-{#if !can_be_activated}
-    <span class="{style} ml-0.5 h-7" >{rValue}</span>
+{#if is_compact}
+    <div class="inline-block relative {line_h}">
+        <span class="dark:text-white {font_size} truncate  px-2.5 {background_class}
+                    absolute left-0 top-0 h-full" >
+            {rValue}
+        
+            {#if can_be_activated}
+                {#if type == "datetime-local"}
+                    <input  type="datetime-local" 
+                            class="datepicker-input"
+                            on:change={on_changed}
+                            bind:value={rValue}
+                            bind:this={input_element}>
+                {:else}
+                    <input  type="date" 
+                            class="datepicker-input"
+                            on:change={on_changed}
+                            bind:value={rValue}
+                            bind:this={input_element}
+                            on:blur={blur}>
+                {/if}
+            {/if}
+        </span>
+    </div>
+
 {:else}
-    <input class="  {cs} {style} {additional_class}" 
-                    type="datetime-local" 
-                    on:change={on_changed}
-                    bind:value={rValue}/>
+    {#if type == "datetime-local"}
+        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {background_class} {user_class}" 
+                type="datetime-local" 
+                on:change={on_changed}
+                bind:value={rValue}
+                bind:this={input_element}
+        />
+    {:else}
+        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {background_class} {user_class}" 
+                type="date" 
+                on:change={on_changed}
+                bind:value={rValue}
+                bind:this={input_element}
+        />
+    {/if}
 {/if}
 
 
+   
+
+
 <style>
     input:focus {
     outline: 0px solid transparent;
     }
-</style>
+
+    .datepicker-input{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        box-sizing: border-box;
+    }
+
+    .datepicker-input::-webkit-calendar-picker-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+    }
+
+</style>
+

package/components/date.svelte.d.ts

@@ -7,8 +7,14 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         date?: Date | undefined;
+        on_select?: undefined;
+        type?: string | undefined;
+        changed?: undefined;
         s?: string | undefined;
         c?: string | undefined;
+        compact?: boolean | undefined;
+        in_context?: string | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,5 +25,6 @@ export type DateProps = typeof __propDef.props;
 export type DateEvents = typeof __propDef.events;
 export type DateSlots = typeof __propDef.slots;
 export default class Date extends SvelteComponentTyped<DateProps, DateEvents, DateSlots> {
+    get show(): (event: any, hide_callback: any) => void;
 }
 export {};

package/components/list/List.d.ts

@@ -0,0 +1,28 @@
+import { rCombo_definition } from '../combo/combo';
+export declare enum rList_property_type {
+    Hidden = 0,
+    Text = 1,
+    Date = 2,
+    Combo = 3
+}
+export declare class rList_property {
+    constructor(type: rList_property_type);
+    type: rList_property_type;
+    name: string;
+    a: string;
+    on_select: Function | undefined;
+}
+export declare class rList_property_combo extends rList_property {
+    constructor();
+    association: boolean;
+    combo_definition: rCombo_definition;
+}
+export declare class rList_definition {
+    title: string;
+    title_editable: boolean;
+    summary: string;
+    summary_editable: boolean;
+    can_insert: boolean;
+    oninsert: Function | undefined;
+    properties: rList_property[];
+}

package/components/list/List.js

@@ -0,0 +1,34 @@
+import { rCombo_definition } from '../combo/combo';
+export var rList_property_type;
+(function (rList_property_type) {
+    rList_property_type[rList_property_type["Hidden"] = 0] = "Hidden";
+    rList_property_type[rList_property_type["Text"] = 1] = "Text";
+    rList_property_type[rList_property_type["Date"] = 2] = "Date";
+    rList_property_type[rList_property_type["Combo"] = 3] = "Combo";
+})(rList_property_type || (rList_property_type = {}));
+export class rList_property {
+    constructor(type) {
+        this.type = type;
+    }
+    type = rList_property_type.Hidden;
+    name = '';
+    a = '';
+    on_select = undefined;
+}
+export class rList_property_combo extends rList_property {
+    constructor() {
+        super(rList_property_type.Combo);
+        this.combo_definition = new rCombo_definition;
+    }
+    association = false;
+    combo_definition;
+}
+export class rList_definition {
+    title = '';
+    title_editable = false;
+    summary = '';
+    summary_editable = false;
+    can_insert = false;
+    oninsert = undefined;
+    properties = [];
+}

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 {};