@humandialog/forms.svelte 0.6.1 → 1.1.0

package/components/checkbox.svelte

@@ -44,12 +44,19 @@ function on_changed() {
 }
 </script>
 
-<div class="ml-1 h-6 text-sm font-medium {cs} {color_style} {additional_class} flex items-center">
+<div class="ml-1 h-6 text-sm font-medium {cs} {additional_class} flex items-center"
+    class:text-stone-400={!disabled}
+    class:text-stone-900={disabled}
+    class:dark:text-stone-300={!disabled}
+    class:dark:text-stone-500={disabled}>
     <input  type="checkbox" 
             bind:checked={value} 
             on:change={on_changed}
             {disabled} 
-            class="w-4 h-4 bg-stone-100 border-stone-300 dark:ring-offset-stone-800 focus:ring-2 mr-2 dark:bg-stone-700 dark:border-stone-600 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
+            class=" w-4 h-4 
+                    bg-stone-100 border-stone-300 dark:bg-stone-700 dark:border-stone-600 
+                    dark:ring-offset-stone-800 
+                    focus:ring-2 mr-2 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
     <span class="ml-1">
         <slot/>
     </span>

package/components/combo/combo.svelte

@@ -27,6 +27,7 @@ export let cached = false;
 export let filtered = false;
 export let pushChangesImmediately = true;
 export let hasNone = isAssociation;
+let userClass = $$restProps.class ?? "";
 let is_compact = getContext("rIs-table-component") || compact;
 if (!definition) {
   definition = new rCombo_definition();
@@ -113,6 +114,7 @@ onMount(() => {
     get_source_collection(definition.collection_path, `${definition.collection_path}`).then((source) => source_fetched(source));
   else if (definition.collection)
     source_fetched(definition.collection);
+  tick_request_internal = tick_request_internal + 1;
   return () => {
   };
 });
@@ -188,6 +190,10 @@ export function show(event, hide_callback) {
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
+  console.log("dropdown_position", dropdown_position, rect, client_rect);
+  console.log("preferred_palette_height", preferred_palette_height);
+  console.log("bottom_space", bottom_space);
+  console.log("top_space", top_space);
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -261,14 +267,20 @@ function get_combo_text() {
 }
 async function on_choose(itm) {
   hide();
+  let success = true;
   if (onSelect) {
-    if (itm == new_item_option)
-      await onNewItemCreated(itm.Key, itm.Name);
-    else {
+    if (itm == new_item_option) {
+      let res = await onNewItemCreated(itm.Key, itm.Name);
+      if (res !== void 0)
+        success = !!res;
+    } else {
+      let res;
       if (itm)
-        await onSelect(item, itm.Key, itm.Name);
+        res = await onSelect(item, itm.Key, itm.Name);
       else
-        await onSelect(item, null, null);
+        res = await onSelect(item, null, null);
+      if (res !== void 0)
+        success = !!res;
     }
     tick_request_internal = tick_request_internal + 1;
   } else {
@@ -343,7 +355,7 @@ async function on_choose(itm) {
       }
     }
   }
-  if (!!changed) {
+  if (!!changed && success) {
     if (itm)
       changed(itm.Key, itm.Name);
     else
@@ -544,7 +556,7 @@ function on_focus_out(e) {
 {#if true}
     {@const c = setup_view(item, a, tick_request_internal) }
     
-<div class="{cs} max-w-full inline-block"
+<div class="{cs} max-w-full inline-block {userClass}"
     on:focusout={on_focus_out}
     bind:this={root_element}>
     {#if !is_compact && label.length > 0}

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { rCombo_definition } from './combo';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string | undefined;
         self?: null | undefined;
         a?: string | undefined;

package/components/contextmenu.svelte

@@ -61,7 +61,7 @@ export async function show(around, _operations) {
   }
   visible = true;
   operations = [..._operations];
-  focused_index = 0;
+  focused_index = operations.findIndex((o) => !o.disabled);
   const is_root_menu = owner_menu_item == void 0;
   if (is_root_menu) {
     hide_window_indicator = 0;
@@ -170,6 +170,9 @@ function execute_action(operation, index) {
   operation.action(context_item);
 }
 function focus_menu_item(index) {
+  const operation = operations[index];
+  if (operation.disabled)
+    return;
   focused_index = index;
   let element = menu_items[focused_index];
   element.focus();
@@ -224,7 +227,11 @@ function mousedown(e) {
             {@const icon_placeholder_with_desc = mobile ? 14 : 12}
             {@const icon_placeholder_size = operation.description ? icon_placeholder_with_desc : icon_placeholder_without_desc}
             {@const menu_item_id = menu_items_id_prefix + index}
-            {@const active = ((!mobile) && (focused_index == index)) ? 'bg-stone-200 dark:bg-stone-600' : ''}
+            {@const isTop = index==0}
+            {@const isBottom = index == operations.length-1}
+            {@const isFocused = index == focused_index}
+            {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
+            {@const active = ((!mobile) && isFocused) ? `bg-stone-200 dark:bg-stone-600 ${clipFocusedBorder}` : ''}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
             
             <button class="font-medium m-0 py-2 pr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
@@ -233,7 +240,9 @@ function mousedown(e) {
                     on:click|stopPropagation={(e) => { execute_action(operation, index) } } 
                     on:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
-                    on:mousedown={mousedown}>
+                    on:mousedown={mousedown}
+                    disabled={operation.disabled}
+                    class:opacity-60={operation.disabled}>
                     
                 <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
                     {#if operation.icon}
@@ -243,7 +252,7 @@ function mousedown(e) {
                     {/if}
                 </div>
                 <div class="">
-                    <p>{operation.caption}</p>
+                    <p> {operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}
                         <p  class="text-sm font-normal text-stone-900 dark:text-stone-500 truncate inline-block"

package/components/input.text.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
+    i?: null | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
-    i?: null | undefined;
     fld?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -16,9 +16,9 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        i?: null | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;
-        i?: null | undefined;
         fld?: string | undefined;
     };
     events: {

package/components/inputbox.ltop.svelte

@@ -20,32 +20,42 @@
     export let placeholder = 'pl'
     export let pushChangesImmediately = true;
 
+    export let required = false;
+
     export  let s = 'sm'
     export  let c = ''
-    export  let validateCb = undefined;
+    export  let validation = undefined;
     export function validate()
     {
-        if(!validateCb)
+        if(!validation)
         {
-            invalid = false;
-            return true;
+            if(required)
+            {
+                invalid = !val;
+                return !invalid;   
+            }
+            else
+            {
+                invalid = false;
+                return true;
+            }
         }
 
-        invalid = !validateCb(val);
+        invalid = !validation(val);
         return !invalid;
     } 
 
     
     let   item = null
 
-    let     label_mb = 'mb-1' //
+    let     labelMargins = 'mt-1 mb-0.5' //
     let input_pt = 'pt-0.5'
     let input_pb = 'pb-1'
     
     switch (s)
     {
         case 'md':
-            label_mb = 'mb-2';
+            labelMargins = 'mt-1 mb-1';
             input_pt = 'pt-2.5'
             input_pb = 'pb-2.5';           
             break;
@@ -111,7 +121,7 @@
 {#if itype == 'text'}
     {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-stone-300 dark:border-stone-500" }
     <div class={cs}>
-        <label for="name" class="block {label_mb} text-xs font-small text-stone-900 dark:text-white">{label}</label>
+        <label for="name" class="block {labelMargins} text-xs font-small text-stone-900 dark:text-white">{label}</label>
         
         <input  type=text name="name" id="name" 
                 bind:value={val} 

package/components/inputbox.ltop.svelte.d.ts

@@ -6,16 +6,17 @@ export default class Inputbox extends SvelteComponentTyped<{
     self?: null | undefined;
     invalid?: boolean | undefined;
     label?: string | undefined;
-    context?: string | undefined;
-    c?: string | undefined;
-    typename?: string | undefined;
     a?: string | undefined;
-    pushChangesImmediately?: boolean | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
+    context?: string | undefined;
+    typename?: string | undefined;
+    c?: string | undefined;
+    pushChangesImmediately?: boolean | undefined;
     itype?: string | undefined;
     val?: string | undefined;
-    validateCb?: any;
+    required?: boolean | undefined;
+    validation?: any;
     validate?: (() => boolean) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -32,16 +33,17 @@ declare const __propDef: {
         self?: null | undefined;
         invalid?: boolean | undefined;
         label?: string | undefined;
-        context?: string | undefined;
-        c?: string | undefined;
-        typename?: string | undefined;
         a?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
         itype?: string | undefined;
         val?: string | undefined;
-        validateCb?: any;
+        required?: boolean | undefined;
+        validation?: any;
         validate?: (() => boolean) | undefined;
     };
     events: {

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

@@ -57,6 +57,22 @@ if (!title)
   title = definition.title;
 if (!summary)
   summary = definition.summary;
+let [name_w, props_w] = calc_horz_division();
+function calc_horz_division() {
+  const props_no = definition.properties.length;
+  switch (props_no) {
+    case 0:
+      return ["w-full", ""];
+    case 1:
+      return ["w-2/3", "w-1/3"];
+    case 2:
+      return ["w-2/3", "w-1/3"];
+    case 3:
+      return ["w-1/2", "w-1/2"];
+    default:
+      return ["w-1/3", "w-2/3"];
+  }
+}
 function calculate_active(...args) {
   return isActive("props", item);
 }
@@ -230,6 +246,8 @@ export function scrollToView() {
 
     <slot name="left" element={item}/>
     
+    <i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i>   <!-- just to force tailwind classes including -->
+    
     <div    class="ml-3 w-full py-1" 
             use:selectable={item} 
             on:click={(e) => {activate_row(e, item)}} 
@@ -242,7 +260,7 @@ export function scrollToView() {
                     {#if is_link_like}
                         <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
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}
                                     sm:hover:cursor-pointer underline"
                                     id="__hd_list_ctrl_{item[item_key]}_Title"
                                     on:click|stopPropagation={followDefinedHRef}
@@ -258,7 +276,7 @@ export function scrollToView() {
                     {:else}
                         <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"
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
                             id="__hd_list_ctrl_{item[item_key]}_Title"
                             use:editable={{
                                 action: (text) => {change_name(text)},
@@ -279,14 +297,14 @@ export function scrollToView() {
             {:else}
                 <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"
+                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
                     id="__hd_list_ctrl_{item[item_key]}_Title"> 
                     {element_title}
                 </p>
             {/if}
            
 
-            <section class="hidden sm:block w-full sm:flex-none sm:w-1/3">
+            <section class="hidden sm:block w-full sm:flex-none sm:{props_w}">
                 <Properties {definition} {item} {placeholder} bind:this={props_md}/>
             </section>
         </div>

package/components/list/list.svelte

@@ -286,33 +286,35 @@ async function insert(title2, summary, after) {
 
 <!--div class="w-full h-full overflow-y-auto"-->
 
-{#if items && items.length > 0 }
-    {#each items as element, i (getItemKey(element))}
-        
-        <List_element   item={element} 
-                        {toolbarOperations}
-                        {contextMenu}
-                        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 (title, summary) => {await insert(title, summary, show_insertion_row_after_element)}}
-                        icon={definition.inserter_icon}
-                        bind:this={inserter}    />
-        {/if}
-    {/each}
-{/if}
 
-{#if show_insertion_row_after_element == END_OF_LIST}
-    <Inserter   onInsert={async (title, summary) => {await insert(title, summary, null)}}
-                icon={definition.inserter_icon}
-                bind:this={inserter}    />
-{/if}
+    {#if items && items.length > 0 }
+        {#each items as element, i (getItemKey(element))}
+            
+            <List_element   item={element} 
+                            {toolbarOperations}
+                            {contextMenu}
+                            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 (title, summary) => {await insert(title, summary, show_insertion_row_after_element)}}
+                            icon={definition.inserter_icon}
+                            bind:this={inserter}    />
+            {/if}
+        {/each}
+    {/if}
+
+    {#if show_insertion_row_after_element == END_OF_LIST}
+        <Inserter   onInsert={async (title, summary) => {await insert(title, summary, null)}}
+                    icon={definition.inserter_icon}
+                    bind:this={inserter}    />
+    {/if}
+
 
 <!--/div-->
 

package/components/sidebar/sidebar.brand.svelte

@@ -7,8 +7,8 @@
 
 </script>
 
-<section class={user_class}>
-    <a href={href} class="flex items-center pl-2.5 mb-5">
+<section class="mb-5 {user_class}">
+    <a href={href} class="flex items-center pl-2.5 ">
         {#if img}
             <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
         {/if}
@@ -17,4 +17,7 @@
             <slot/>
         </span>
     </a>
+    {#if $$slots.summary}
+        <slot name="summary"/>
+    {/if}
 </section>

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

@@ -9,6 +9,7 @@ export default class Sidebar extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
+    summary: {};
 }> {
 }
 export type SidebarProps = typeof __propDef.props;
@@ -26,6 +27,7 @@ declare const __propDef: {
     };
     slots: {
         default: {};
+        summary: {};
     };
 };
 export {};

package/components/simple.table.svelte.d.ts

@@ -5,8 +5,8 @@ export default class Simple extends SvelteComponentTyped<{
     focus?: boolean | undefined;
     select?: string | undefined;
     self?: null | undefined;
-    context?: string | undefined;
     nav?: boolean | undefined;
+    context?: string | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
     headers?: any[] | undefined;
@@ -25,8 +25,8 @@ declare const __propDef: {
         focus?: boolean | undefined;
         select?: string | undefined;
         self?: null | undefined;
-        context?: string | undefined;
         nav?: boolean | undefined;
+        context?: string | undefined;
         collection?: string | undefined;
         objects?: null | undefined;
         headers?: any[] | undefined;

package/components/table/_template.table.svelte.d.ts

@@ -5,8 +5,8 @@ export default class Template extends SvelteComponentTyped<{
     focus?: boolean | undefined;
     select?: string | undefined;
     self?: null | undefined;
-    context?: string | undefined;
     nav?: boolean | undefined;
+    context?: string | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
     headers?: any[] | undefined;
@@ -33,8 +33,8 @@ declare const __propDef: {
         focus?: boolean | undefined;
         select?: string | undefined;
         self?: null | undefined;
-        context?: string | undefined;
         nav?: boolean | undefined;
+        context?: string | undefined;
         collection?: string | undefined;
         objects?: null | undefined;
         headers?: any[] | undefined;

package/components/textarea.ltop.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
     label?: string | undefined;
-    c?: string | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
+    c?: string | undefined;
     val?: string | undefined;
     sy?: string | undefined;
     r?: number | undefined;
@@ -20,9 +20,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string | undefined;
-        c?: string | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;
+        c?: string | undefined;
         val?: string | undefined;
         sy?: string | undefined;
         r?: number | undefined;

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

@@ -4,8 +4,8 @@
 export default class Tile extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string | undefined;
-    c?: string | undefined;
     a?: string | undefined;
+    c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -18,8 +18,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string | undefined;
-        c?: string | undefined;
         a?: string | undefined;
+        c?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;