@humandialog/forms.svelte 0.4.44 → 0.5.1

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

@@ -0,0 +1,134 @@
+<script>import { tick } from "svelte";
+import { rList_definition, rList_property_type } from "../List";
+import Combo from "../../combo/combo.svelte";
+import DatePicker from "../../date.svelte";
+export let definition;
+export let item;
+export let placeholder = "";
+let props = [];
+export function editProperty(field) {
+  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;
+  }
+}
+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 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>
+
+<div class="text-xs grid-{definition.properties.length}">
+    {#each definition.properties as prop, prop_index}
+        <p class="col-span-1 w-full mr-auto mt-0.5">
+            {#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}
+                                    onSelect={prop.onSelect}
+                                    s="xs"
+                                    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} 
+                                inContext="props sel" 
+                                compact={true} 
+                                a={prop.a}
+                                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-stone-400 truncate px-2.5 bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
+                            {item[prop.a]}
+                        </span>
+                    {/if}
+                </span>
+            {/if}
+        </p>
+    {/each}
+</div>
+
+<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.props.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import { rList_definition } from '../List';
+declare const __propDef: {
+    props: {
+        definition: rList_definition;
+        item: object;
+        placeholder?: string | undefined;
+        editProperty?: ((field: string) => 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 editProperty(): (field: string) => void;
+}
+export {};

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

@@ -0,0 +1,40 @@
+<script>import {
+  editable as _editable
+} from "../../../utils";
+export let id;
+export let readonly = false;
+export let text = "";
+export let placeholder = false;
+export let editable;
+export let clickEdit;
+let user_class = $$props.class ?? "";
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if readonly}
+    <p {id} class="  sm:text-xs sm:min-h-[1rem]
+                    text-base min-h-[1.5rem]
+                    text-stone-400 
+                    {user_class}"
+                    on:click>
+        {text}
+    </p>
+{:else if text}
+    <p {id} class=" sm:text-xs sm:min-h-[1rem]
+                    text-base min-h-[1.5rem]
+                    text-stone-400 
+                    {user_class}"
+            use:_editable={editable}
+            on:click>
+        {text}
+</p>
+{:else if placeholder}
+    <p   {id} class="sm:text-xs sm:min-h-[1rem]
+                     text-base min-h-[1.5rem]
+                     text-stone-400 
+                     {user_class}"
+            use:_editable={editable}
+            on:click>
+    </p>
+{/if}
+    

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        readonly?: boolean | undefined;
+        text?: string | undefined;
+        placeholder?: boolean | undefined;
+        editable: any;
+        clickEdit: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [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/internal/list.element.svelte

@@ -1,35 +1,40 @@
 <script>import { tick, getContext } from "svelte";
-import { context_items_store } from "../../../stores";
+import { contextItemsStore } from "../../../stores";
 import {
-  is_selected,
+  isSelected,
   selectable,
-  activate_item,
-  is_active,
+  activateItem,
+  isActive,
   editable,
-  start_editing
+  startEditing
 } 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 { showGridMenu, showMenu } from "../../menu";
+import { pushChanges, informModification } from "../../../updates";
+import Summary from "./list.element.summary.svelte";
+import Properties from "./list.element.props.svelte";
+import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
+import { push } from "svelte-spa-router";
 export let item;
 export let title = "";
 export let summary = "";
 export let typename = void 0;
-export let toolbar_operations;
-export let context_menu;
+export let toolbarOperations;
+export let contextMenu;
 let definition = getContext("rList-definition");
 let placeholder = "";
-let props = [];
+let props_sm;
+let props_md;
 $:
-  is_row_active = calculate_active(item, $context_items_store);
+  is_row_active = calculate_active(item, $contextItemsStore);
 $:
-  is_row_selected = selected(item, $context_items_store);
+  is_row_selected = selected(item, $contextItemsStore);
 $:
   selected_class = is_row_selected ? "!border-blue-300" : "";
 $:
-  focused_class = is_row_active ? "bg-gray-200 dark:bg-gray-700" : "";
+  focused_class = is_row_active ? "bg-stone-200 dark:bg-stone-700" : "";
+$:
+  is_link_like = is_row_selected && (!!definition.title_href || !!definition.title_href_func);
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -51,18 +56,18 @@ if (!title)
 if (!summary)
   summary = definition.summary;
 function calculate_active(...args) {
-  return is_active("props", item);
+  return isActive("props", item);
 }
 function selected(...args) {
-  return is_selected(item);
+  return isSelected(item);
 }
 async function change_name(text) {
   if (definition.on_title_changed) {
     definition.on_title_changed(item, text, title);
   } else {
     item[title] = text;
-    inform_modification(item, title, typename);
-    push_changes();
+    informModification(item, title, typename);
+    pushChanges();
   }
 }
 async function change_summary(text) {
@@ -70,19 +75,19 @@ async function change_summary(text) {
     definition.on_summary_changed(item, text, summary);
   } else {
     item[summary] = text;
-    inform_modification(item, summary, typename);
-    push_changes();
+    informModification(item, summary, typename);
+    pushChanges();
   }
 }
 function edit(e) {
   if (!is_row_active)
     return;
-  start_editing(e.target);
+  startEditing(e.target);
 }
 export function activate() {
   activate_row(null, item);
 }
-function edit_row_property(e, part) {
+function on_active_row_clicked(e, part) {
   if (!is_row_active)
     return;
   let click_on_empty_space = true;
@@ -97,82 +102,65 @@ function edit_row_property(e, part) {
   }
   let can_show_context_menu = click_on_empty_space;
   can_show_context_menu = false;
-  if (can_show_context_menu && context_menu) {
+  if (can_show_context_menu && contextMenu) {
     const pt = new DOMPoint(e.clientX, e.clientY);
-    let context_operations = context_menu(item);
+    let context_operations = contextMenu(item);
     if (context_operations !== null) {
       if (typeof context_operations === "object") {
         if (Array.isArray(context_operations))
-          show_menu(pt, context_operations);
+          showMenu(pt, context_operations);
         else if (context_operations.grid)
-          show_grid_menu(pt, context_operations.grid);
+          showGridMenu(pt, context_operations.grid);
       }
     }
   } else if (click_on_empty_space) {
-    if (part == "top" && !definition.title_readonly)
-      force_editing("Title");
-    else if (part == "bottom" && !definition.summary_readonly)
-      force_editing("Summary");
+    if (definition.title_href || definition.title_href_func) {
+      let link = "";
+      if (definition.title_href)
+        link = definition.title_href;
+      else if (definition.title_href_func)
+        link = definition.title_href_func(item);
+      if (link)
+        push(link);
+    } else {
+      if (part == "top" && !definition.title_readonly)
+        force_editing("Title");
+      else if (part == "bottom" && !definition.summary_readonly)
+        force_editing("Summary");
+    }
+  } else {
   }
 }
 function activate_row(e, item2) {
-  if (is_row_active) {
-  }
-  activate_item("props", item2, toolbar_operations(item2));
+  activateItem("props", item2, toolbarOperations(item2));
   if (e)
     e.stopPropagation();
 }
 function on_contextmenu(e) {
-  if (!context_menu)
+  if (!contextMenu)
     return;
   const pt = new DOMPoint(e.clientX, e.clientY);
-  let context_operations = context_menu(item);
+  let context_operations = contextMenu(item);
   if (context_operations !== null) {
     if (typeof context_operations === "object") {
       if (Array.isArray(context_operations))
-        show_menu(pt, context_operations);
+        showMenu(pt, context_operations);
       else if (context_operations.grid)
-        show_grid_menu(pt, context_operations.grid);
+        showGridMenu(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) {
+export function editProperty(field) {
   if (field == title)
     force_editing("Title");
   else 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;
-    }
+    if (isDeviceSmallerThan("sm"))
+      props_sm.editProperty(field);
+    else
+      props_md.editProperty(field);
   }
 }
 async function force_editing(field) {
@@ -188,135 +176,74 @@ async function force_editing(field) {
   if (!element_node.classList.contains("editable")) {
     return;
   }
-  start_editing(element_node, () => {
+  startEditing(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 -->
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
+<section    class="mt-3 flex flex-row my-0  w-full text-sm text-stone-700 dark:text-stone-300 cursor-default rounded-md border 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" on:click={(e) => edit_row_property(e, 'top')}>
-            <p  class=" text-lg font-semibold min-h-[1.75rem]
-                        sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                        whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3">
-                {#if definition.title_readonly}
-                <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"> 
+    <div    class="ml-3 w-full py-1" 
+            class:sm:hover:cursor-pointer={is_link_like}
+            use:selectable={item} 
+            on:click={(e) => {activate_row(e, item)}} 
+            role="row" 
+            tabindex="0">
+        <div class="block sm:flex sm:flex-row" on:click={(e) => on_active_row_clicked(e, 'top')}>
+           
+            {#if definition.title_readonly}
+                <p  class=" text-lg font-semibold min-h-[1.75rem]
+                            sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                    id="__hd_list_ctrl_{item[item_key]}_Title"> 
                     {element_title}
-                </span>
-                {:else}
-                    {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
-                    <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"
+                </p>
+            {:else}
+                {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
+                    <p  class=" text-lg font-semibold min-h-[1.75rem]
+                                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                                whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                        id="__hd_list_ctrl_{item[item_key]}_Title"
                         use:editable={(text) => {change_name(text)}}
                         on:click={edit}> 
                             {element_title}
-                    </span>
-                    {/key}
-                {/if}
-            </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 mt-0.5">
-                        {#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'/>
-                                {: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">
-                                        {item[prop.a]}
-                                    </span>
-                                {/if}
-                            </span>
-                        {/if}
                     </p>
-                {/each}
-            </div>
+                {/key}
+            {/if}
+           
+
+            <section class="hidden sm:block w-full sm:flex-none sm:w-1/3">
+                <Properties {definition} {item} {placeholder} bind:this={props_md}/>
+            </section>
         </div>
 
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
-            <p class="  sm:text-xs sm:min-h-[1rem]
-                        text-base min-h-[1.5rem]
-                        text-slate-400 " 
-                    on:click={(e) => edit_row_property(e, 'bottom')}>
-                {#if definition.summary_readonly}
-                    <span   id={element_id} role="gridcell" tabindex="0">
-                        {item[summary]}
-                    </span>
-                {:else 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>
+            <Summary
+                    id={element_id}
+                    on:click={(e) => on_active_row_clicked(e, 'bottom')}
+                    text={item[summary]}
+                    readonly={definition.summary_readonly}
+                    placeholder={placeholder == 'Summary'}
+                    editable={(text) => {change_summary(text)}}
+                    clickEdit={edit}
+                />
         {/if}
+
+        <section class="block sm:hidden w-full sm:flex-none sm:w-2/3">
+            <Properties {definition} {item} {placeholder} bind:this={props_sm}/>
+        </section>
+
     </div>
 </section>
 {/if}

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

@@ -5,10 +5,10 @@ declare const __propDef: {
         title?: string | undefined;
         summary?: string | undefined;
         typename?: string | undefined;
-        toolbar_operations: any;
-        context_menu: any;
+        toolbarOperations: any;
+        contextMenu: any;
         activate?: (() => void) | undefined;
-        edit_property?: ((field: string) => void) | undefined;
+        editProperty?: ((field: string) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,6 +24,6 @@ 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;
+    get editProperty(): (field: string) => void;
 }
 export {};

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

@@ -1,15 +1,15 @@
-<script>import { editable, start_editing } from "../../../utils";
+<script>import { editable, startEditing } from "../../../utils";
 import Icon from "../../icon.svelte";
 import { FaPlus } from "svelte-icons/fa";
-export let oninsert;
+export let onInsert;
 export let icon = false;
 export function run(onclose) {
-  start_editing(insertion_paragraph, onclose);
+  startEditing(insertion_paragraph, onclose);
 }
 let insertion_paragraph;
 </script>
 
-<section    class="flex flex-row my-0  w-full text-lg sm:text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
+<section    class="mt-3 flex flex-row my-0  w-full text-lg sm:text-sm text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
     {#if icon}
         <!--Icon   size={3} 
                 component={FaPlus}  
@@ -17,8 +17,11 @@ let insertion_paragraph;
         <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm:mt-1.5 ml-2"></div>
     {/if}
 
-    <p  class="ml-3 py-1 font-semibold sm:font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
+    <p  class=" ml-3 py-1
+                text-lg font-semibold min-h-[1.75rem]
+                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
         bind:this={insertion_paragraph}
-        use:editable={oninsert} >
+        use:editable={onInsert} >
     </p>
 </section>