@humandialog/forms.svelte 0.4.45 → 0.5.1

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         text?: string | undefined;
         placeholder?: boolean | undefined;
         editable: any;
-        click_edit: any;
+        clickEdit: any;
     };
     events: {
         click: MouseEvent;

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

@@ -1,39 +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 { showGridMenu, showMenu } from "../../menu";
+import { pushChanges, informModification } from "../../../updates";
 import Summary from "./list.element.summary.svelte";
 import Properties from "./list.element.props.svelte";
-import { is_device_smaller_than } from "../../../utils";
+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_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_small = is_device_smaller_than("sm");
+  is_link_like = is_row_selected && (!!definition.title_href || !!definition.title_href_func);
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -55,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) {
@@ -74,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;
@@ -101,59 +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 {
-    if (part == "top" && !definition.title_readonly)
-      force_editing("Title");
-    else if (part == "bottom" && !definition.summary_readonly)
-      force_editing("Summary");
   }
 }
 function activate_row(e, item2) {
-  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();
 }
-export function edit_property(field) {
+export function editProperty(field) {
   if (field == title)
     force_editing("Title");
   else if (field == summary)
     force_editing("Summary");
   else {
-    if (is_device_smaller_than("sm"))
-      props_sm.edit_property(field);
+    if (isDeviceSmallerThan("sm"))
+      props_sm.editProperty(field);
     else
-      props_md.edit_property(field);
+      props_md.editProperty(field);
   }
 }
 async function force_editing(field) {
@@ -169,7 +176,7 @@ async function force_editing(field) {
   if (!element_node.classList.contains("editable")) {
     return;
   }
-  start_editing(element_node, () => {
+  startEditing(element_node, () => {
     placeholder = "";
   });
 }
@@ -179,15 +186,20 @@ async function force_editing(field) {
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="mt-3 flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-300 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="block sm:flex sm:flex-row" on:click={(e) => edit_row_property(e, 'top')}>
+    <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]
@@ -219,12 +231,12 @@ async function force_editing(field) {
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
             <Summary
                     id={element_id}
-                    on:click={(e) => edit_row_property(e, 'bottom')}
+                    on:click={(e) => on_active_row_clicked(e, 'bottom')}
                     text={item[summary]}
                     readonly={definition.summary_readonly}
                     placeholder={placeholder == 'Summary'}
                     editable={(text) => {change_summary(text)}}
-                    click_edit={edit}
+                    clickEdit={edit}
                 />
         {/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>

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        oninsert: any;
+        onInsert: any;
         icon?: boolean | undefined;
         run?: ((onclose: any) => void) | undefined;
     };

package/components/list/list.combo.svelte

@@ -3,7 +3,7 @@ import { rList_property_combo } from "./List";
 import {} from "../combo/combo";
 export let name;
 export let a = "";
-export let on_select = void 0;
+export let onSelect = void 0;
 export let association = false;
 let definition = getContext("rList-definition");
 let combo_property = new rList_property_combo();
@@ -11,7 +11,7 @@ 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.onSelect = onSelect;
 combo_property.association = association;
 definition.properties.push(combo_property);
 setContext("rCombo-definition", combo_property.combo_definition);

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         name: string;
         a?: string | undefined;
-        on_select?: undefined;
+        onSelect?: undefined;
         association?: boolean | undefined;
     };
     events: {

package/components/list/list.date.svelte

@@ -2,13 +2,13 @@
 import { rList_property_type, rList_property } from "./List";
 export let name;
 export let a = "";
-export let on_select = void 0;
+export let onSelect = 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;
+date_property.onSelect = onSelect;
 definition.properties.push(date_property);
 </script>

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         name: string;
         a?: string | undefined;
-        on_select?: undefined;
+        onSelect?: undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.inserter.svelte

@@ -3,6 +3,6 @@ export let action;
 export let icon = false;
 let definition = getContext("rList-definition");
 definition.can_insert = true;
-definition.oninsert = action;
+definition.onInsert = action;
 definition.inserter_icon = icon;
 </script>

package/components/list/list.summary.svelte

@@ -1,11 +1,11 @@
 <script>import { getContext } from "svelte";
 export let a;
 export let editable = false;
-export let on_change = void 0;
+export let onChange = void 0;
 export let readonly = false;
 let definition = getContext("rList-definition");
 definition.summary = a;
 definition.summary_editable = editable;
-definition.on_summary_changed = on_change;
+definition.on_summary_changed = onChange;
 definition.summary_readonly = readonly;
 </script>

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         a: string;
         editable?: boolean | undefined;
-        on_change?: Function | undefined;
+        onChange?: Function | undefined;
         readonly?: boolean | undefined;
     };
     events: {