@humandialog/forms.svelte 0.5.20 → 0.5.21

package/components/combo/combo.svelte

@@ -26,6 +26,7 @@ export let inContext = "sel";
 export let cached = false;
 export let filtered = false;
 export let pushChangesImmediately = true;
+export let hasNone = isAssociation;
 let is_compact = getContext("rIs-table-component") || compact;
 if (!definition) {
   definition = new rCombo_definition();
@@ -265,14 +266,18 @@ async function on_choose(itm) {
   if (onSelect) {
     if (itm == new_item_option)
       await onNewItemCreated(itm.Key, itm.Name);
-    else
-      await onSelect(item, itm.Key, itm.Name);
+    else {
+      if (itm)
+        await onSelect(item, itm.Key, itm.Name);
+      else
+        await onSelect(item, null, null);
+    }
     tick_request_internal = tick_request_internal + 1;
   } else {
     if (isAssociation) {
       if (choiceCallback) {
         let body = {
-          choice: itm.Key
+          choice: itm ? itm.Key : null
         };
         let path;
         if (item.$ref)
@@ -297,15 +302,19 @@ async function on_choose(itm) {
         let result = await reef.post(
           path,
           {
-            [a]: itm.Key
+            [a]: itm ? itm.Key : null
           }
         );
         if (result) {
-          let name = definition.element_name ?? "$display";
-          item[a] = {
-            $ref: itm.Key,
-            [name]: itm.Name
-          };
+          if (itm) {
+            let name = definition.element_name ?? "$display";
+            item[a] = {
+              $ref: itm.Key,
+              [name]: itm.Name
+            };
+          } else {
+            item[a] = null;
+          }
           tick_request_internal = tick_request_internal + 1;
         }
       }
@@ -319,14 +328,14 @@ async function on_choose(itm) {
         let fields = calc_path_fields_param();
         if (fields)
           path += fields;
-        let value = itm.Key ?? itm.Name;
+        let value = itm ? itm.Key ?? itm.Name : null;
         let result = await reef.post(path, { choice: value });
         if (result) {
           item[a] = result;
           tick_request_internal = tick_request_internal + 1;
         }
       } else {
-        item[a] = itm.Key ?? itm.Name;
+        item[a] = itm ? itm.Key ?? itm.Name : null;
         tick_request_internal = tick_request_internal + 1;
         if (item && a && typename) {
           informModification(item, a, typename);
@@ -336,8 +345,12 @@ async function on_choose(itm) {
       }
     }
   }
-  if (!!changed)
-    changed(itm.Key, itm.Name);
+  if (!!changed) {
+    if (itm)
+      changed(itm.Key, itm.Name);
+    else
+      changed(null, null);
+  }
 }
 function on_keydown(e) {
   switch (e.key) {
@@ -588,6 +601,22 @@ function on_focus_out(e) {
         <ul class="py-1">
 
             {#if definition.source && definition.source.length}
+                {#if hasNone}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <li class="rounded p-2 flex flex-row items-center {font_size}" 
+                        class:bg-stone-100={highlighted_option == null}
+                        class:dark:bg-stone-700={highlighted_option == null}
+                        class:dark:hover:bg-stone-700={highlighted_option == null}
+                        on:mousemove={() => on_mouse_move(null)}
+                        on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
+                        tabindex="-1">
+
+                        <div class="ml-2">
+                            &lt;none&gt;
+                        </div>
+                    </li>
+                {/if}
+
                 {@const _filtered_source = filtered_source ? filtered_source : definition.source}
                 {#if _filtered_source.length > 0}
                     {#each _filtered_source as item (item.Key)}

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

@@ -22,6 +22,7 @@ declare const __propDef: {
         cached?: boolean | undefined;
         filtered?: boolean | undefined;
         pushChangesImmediately?: boolean | undefined;
+        hasNone?: boolean | undefined;
         show?: ((event: any, hide_callback: any) => void) | undefined;
         hide?: (() => void) | undefined;
     };

package/components/kanban/Kanban.d.ts

@@ -18,6 +18,7 @@ export declare class rKanban_definition {
     titleReadOnly: boolean;
     titleHref: string | undefined;
     titleHrefFunc: Function | undefined;
+    titleHasAttachment: Function | undefined;
     summaryAttrib: string;
     summaryOnChange: Function | undefined;
     summaryReadOnly: boolean;

package/components/kanban/Kanban.js

@@ -17,6 +17,7 @@ export class rKanban_definition {
     titleReadOnly = false;
     titleHref = undefined;
     titleHrefFunc = undefined;
+    titleHasAttachment = undefined;
     summaryAttrib = '';
     summaryOnChange = undefined;
     summaryReadOnly = false;

package/components/kanban/internal/kanban.card.svelte

@@ -12,8 +12,7 @@ import {
   pushChanges,
   startEditing
 } from "../../..";
-import { FaArrowsAlt, FaTrash, FaPlus, FaExternalLinkAlt } from "svelte-icons/fa";
-import MoveOperations from "./kanban.move.menu.svelte";
+import { FaRegFileAlt } from "svelte-icons/fa";
 import Properties from "./kanban.props.svelte";
 import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "../Kanban";
 export let item;
@@ -148,6 +147,28 @@ function getHRef() {
   else
     return "";
 }
+function performOpen(e) {
+  e.stopPropagation();
+  if (isLinkLike)
+    followDefinedHRef();
+  else
+    definition.onOpen(item);
+}
+function conditionalClick(node, { condition, callback }) {
+  if (condition) {
+    node.addEventListener("click", callback);
+    return {
+      destroy() {
+        node.removeEventListener("click", callback);
+      }
+    };
+  }
+}
+function showAttachementIcon() {
+  if (!definition.titleHasAttachment)
+    return false;
+  return definition.titleHasAttachment(item);
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -183,43 +204,36 @@ function getHRef() {
     
 
     {#if isCardActive}
-        {#if isLinkLike}
+        {@const hasOpen = !!definition.onOpen}
+        {@const canOpen = isLinkLike || hasOpen}
+        {@const openableClass = canOpen ? "sm:hover:cursor-pointer underline" : ""}
+        {@const showIcon = showAttachementIcon()}
             <h3 class=" text-lg font-semibold min-h-[1.75rem]
                         sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
                         whitespace-nowrap overflow-clip truncate w-full sm:flex-none
-                        relative 
-                        sm:hover:cursor-pointer underline"
-                on:click|stopPropagation={followDefinedHRef}
+                        relative {openableClass}"
                 use:editable={{
                     action: (text) => onTitleChanged(text), 
                     active: false,
                     readonly: definition.titleReadOnly,
                     onFinish: (d) => {titleElement.blur()}}}
+                use:conditionalClick={{
+                    condition: canOpen, 
+                    callback: performOpen}}
                 bind:this={titleElement}>
                     {item[definition.titleAttrib]}
-            </h3>
-        {:else}
-            <h3  class=" text-lg font-semibold min-h-[1.75rem]
-                        sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                        whitespace-nowrap overflow-clip truncate w-full sm:flex-none
-                        relative"
-                        use:editable={{
-                            action: (text) => onTitleChanged(text), 
-                            active: true,
-                            readonly: definition.titleReadOnly,
-                            onFinish: (d) => {titleElement.blur()}}}
-                        bind:this={titleElement}>
-                {item[definition.titleAttrib]}
 
-                {#if definition.onOpen}
-                <button class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3"
-                        on:click={(e) => definition.onOpen(item)}>
-                    <FaExternalLinkAlt/>
-                </button>
+                {#if showIcon}
+                    <span id="attachement" class="absolute top-1 right-0 w-5 h-5 sm:w-3 sm:h-3">
+                        <FaRegFileAlt/>
+                    </span>
                 {/if}
             </h3>
-        {/if}
+
+            <!--Tooltip type='light' triggeredBy="#attachement">Has attachement</Tooltip-->
         
+          
+                        
     {:else}
         <h3  class=" text-lg font-semibold min-h-[1.75rem]
                     sm:text-sm sm:font-semibold sm:min-h-[1.25rem]

package/components/kanban/internal/kanban.column.svelte

@@ -9,6 +9,8 @@ export let currentColumnIdx;
 export let onInsert;
 let column_element;
 export function getHeight() {
+  if (!column_element)
+    return 0;
   return column_element.getBoundingClientRect().height;
 }
 let titleElement;
@@ -20,6 +22,8 @@ export const SET_RIGHT = 1;
 export const CLEAR_LEFT = 2;
 export const CLEAR_RIGHT = 3;
 export function setBorder(what_to_do) {
+  if (!column_element)
+    return;
   switch (what_to_do) {
     case SET_LEFT:
       column_element.classList.add("border-l");
@@ -52,8 +56,31 @@ $:
   force_rerender($data_tick_store, $contextItemsStore);
 export function reload() {
   let allItems = definition.getItems();
-  if (definition.stateAttrib)
-    column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
+  if (definition.stateAttrib) {
+    if (columnDef.state < 0) {
+      const isExplicitState = (e) => {
+        const elementState = e[definition.stateAttrib];
+        const colsNo = definition.columns.length;
+        for (let i = 0; i < colsNo; i++) {
+          const def = definition.columns[i];
+          if (def.state >= 0 && def.state == elementState)
+            return true;
+        }
+        return false;
+      };
+      column_items = allItems.filter((e) => !isExplicitState(e));
+    } else
+      column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
+  }
+}
+export function isVisible() {
+  if (columnDef.state < 0) {
+    if (column_items && column_items.length > 0)
+      return true;
+    else
+      return false;
+  } else
+    return true;
 }
 function setup_data(...args) {
   reload();
@@ -187,6 +214,8 @@ function getWidthStyle() {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
+{#if (columnDef.state >=0) || ((column_items && column_items.length > 0))}
+
 <section class="    snap-center 
                     sm:snap-align-none 
                     flex-none sm:flex-1
@@ -194,6 +223,8 @@ function getWidthStyle() {
                     min-h-[calc(100vh-5rem)] 
                     rounded-md border border-transparent  
                     {selected_class} {focused_class}"
+                    
+                    
         style={styleWidth}
         use:selectable={columnDef}
         on:click={activate}>
@@ -256,4 +287,4 @@ function getWidthStyle() {
 
     </ul>
 </section>
-
+{/if}

package/components/kanban/internal/kanban.column.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         CLEAR_RIGHT?: 3 | undefined;
         setBorder?: ((what_to_do: number) => void) | undefined;
         reload?: (() => void) | undefined;
+        isVisible?: (() => boolean) | undefined;
         findCardByItem?: ((item: object) => any) | undefined;
         activateByItemId?: ((id: number) => void) | undefined;
         add?: ((after?: object | number) => Promise<void>) | undefined;
@@ -43,6 +44,7 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get CLEAR_RIGHT(): 3;
     get setBorder(): (what_to_do: number) => void;
     get reload(): () => void;
+    get isVisible(): () => boolean;
     get findCardByItem(): (item: object) => any;
     get activateByItemId(): (id: number) => void;
     get add(): (after?: number | object) => Promise<void>;

package/components/kanban/internal/kanban.props.svelte

@@ -107,9 +107,11 @@ async function editTags(field, propIdx) {
                         a={prop.a}
                         onSelect={prop.onSelect}
                         isAssociation={prop.association}
+                        hasNone={prop.hasNone}
                         icon={false}
                         definition={prop.combo_definition}
                         s="xs"
+                        changed={(k,n) => { /*fake assignment for component rer-ender*/ item[prop.a] = item[prop.a]; }} 
                         bind:this={propElements[idx]}/>
             {:else if prop.type == rList_property_type.Static}
                 <p

package/components/kanban/kanban.combo.svelte

@@ -6,6 +6,7 @@ export let name = "";
 export let a = "";
 export let onSelect = void 0;
 export let association = false;
+export let hasNone = association;
 export let top = false;
 export let middle = true;
 export let bottom = false;
@@ -23,6 +24,7 @@ if (!a && name) {
 }
 combo_property.onSelect = onSelect;
 combo_property.association = association;
+combo_property.hasNone = hasNone;
 if (top)
   combo_property.position = KanbanCardTop;
 else if (bottom)

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         a?: string | undefined;
         onSelect?: undefined;
         association?: boolean | undefined;
+        hasNone?: boolean | undefined;
         top?: boolean | undefined;
         middle?: boolean | undefined;
         bottom?: boolean | undefined;

package/components/kanban/kanban.svelte

@@ -125,7 +125,12 @@ export async function reload(data, selectElement = KEEP_SELECTION) {
   }
 }
 export function getColumnIdx(item) {
-  return definition.columns.findIndex((c2) => c2.state == item[definition.stateAttrib]);
+  let idx = definition.columns.findIndex((c2) => c2.state == item[definition.stateAttrib]);
+  if (idx >= 0)
+    return idx;
+  else {
+    return definition.columns.findIndex((c2) => c2.state < 0);
+  }
 }
 export function edit(item, field) {
   const columnIdx = getColumnIdx(item);

package/components/kanban/kanban.title.svelte

@@ -4,11 +4,13 @@ export let onChange = void 0;
 export let readOnly = false;
 export let href = void 0;
 export let hrefFunc = void 0;
+export let hasAttachment = void 0;
 let definition = getContext("rKanban-definition");
 definition.titleAttrib = a;
 definition.titleOnChange = onChange;
 definition.titleReadOnly = readOnly;
 definition.titleHref = href;
 definition.titleHrefFunc = hrefFunc;
+definition.titleHasAttachment = hasAttachment;
 </script>
 

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         readOnly?: boolean | undefined;
         href?: string | undefined;
         hrefFunc?: Function | undefined;
+        hasAttachment?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/List.d.ts

@@ -19,6 +19,7 @@ export declare class rList_property_combo extends rList_property {
     constructor();
     association: boolean;
     combo_definition: rCombo_definition;
+    hasNone: boolean;
 }
 export declare class rList_property_tags extends rList_property {
     constructor();

package/components/list/List.js

@@ -25,6 +25,7 @@ export class rList_property_combo extends rList_property {
     }
     association = false;
     combo_definition;
+    hasNone = false;
 }
 export class rList_property_tags extends rList_property {
     constructor() {

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

@@ -90,6 +90,7 @@ async function edit_date(field, prop_idx) {
                                 a={prop.a}
                                 onSelect={prop.onSelect}
                                 isAssociation={prop.association}
+                                hasNone={prop.hasNone}
                                 icon={false} 
                                 bind:this={props[prop_index]}
                                 definition={prop.combo_definition}

package/components/list/list.combo.svelte

@@ -5,6 +5,7 @@ export let name;
 export let a = "";
 export let onSelect = void 0;
 export let association = false;
+export let hasNone = association;
 let definition = getContext("rList-definition");
 let combo_property = new rList_property_combo();
 combo_property.name = name;
@@ -13,6 +14,7 @@ if (!combo_property.a)
   combo_property.a = combo_property.name;
 combo_property.onSelect = onSelect;
 combo_property.association = association;
+combo_property.hasNone = hasNone;
 definition.properties.push(combo_property);
 setContext("rCombo-definition", combo_property.combo_definition);
 </script>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         a?: string | undefined;
         onSelect?: undefined;
         association?: boolean | undefined;
+        hasNone?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/sidebar/sidebar.item.svelte

@@ -8,6 +8,7 @@ import {
   editable as _editable,
   handleSelect,
   activateItem,
+  startEditing,
   getActive
 } from "../../utils";
 import { showMenu } from "../menu";
@@ -18,11 +19,48 @@ export let selectable = void 0;
 export let editable = void 0;
 export let operations = void 0;
 export let item = void 0;
+export let summary = void 0;
 let isOnPage = getContext("rIs-page-component");
+let summaryElement = null;
+let summaryPlaceholder = false;
+let summaryEditable = void 0;
 $:
   context_data = $contextItemsStore;
 $:
   isRowActive = calculateIsRowActive($contextItemsStore);
+$:
+  summaryText = calculateSummary(summary);
+function calculateSummary(...args) {
+  if (!summary) {
+    summaryEditable = void 0;
+    return "";
+  }
+  if (summary instanceof Object) {
+    summaryEditable = summary.editable;
+    if (summary.content)
+      return summary.content;
+    else
+      return "";
+  } else {
+    summaryEditable = void 0;
+    return summary;
+  }
+}
+export async function editSummary() {
+  if (!summaryEditable)
+    return;
+  if (!!summaryElement)
+    startEditing(summaryElement, (d) => {
+      summaryPlaceholder = false;
+    });
+  else {
+    summaryPlaceholder = true;
+    await tick();
+    startEditing(summaryElement, (d) => {
+      summaryPlaceholder = false;
+    });
+  }
+}
 let user_class = $$props.class ?? "";
 let root;
 function calculateIsRowActive(...args) {
@@ -130,34 +168,50 @@ function activateRow(e) {
         class="     border border-transparent rounded-lg
                     text-lg sm:text-base font-normal 
                     text-stone-900 sm:hover:bg-stone-100  
-                    dark:text-white sm:dark:hover:bg-stone-700 {user_class}
-                    flex flex-row justify-between"
+                    dark:text-white sm:dark:hover:bg-stone-700 {user_class}"
         class:bg-stone-200={isRowActive}
         class:dark:bg-stone-700={isRowActive}
         class:selected={selected(selectable, context_data)}>
-            <a  href={href} 
-                on:click={on_link_clicked} 
-                class="flex-1 ml-2 my-3 sm:my-2 inline-flex items-center group">
-                {#if icon}
-                    <Icon size={5} component={icon}/>
-                {/if}
-                <span   class="ml-3 group-hover:underline"
-                        use:editable_if_needed={editable}>
-                    <slot/>
-                </span>
-            </a>
+            <div class="flex flex-row justify-between">
+                <a  href={href} 
+                    on:click={on_link_clicked} 
+                    class="flex-1 ml-2 mt-3 sm:mt-2 inline-flex items-center group"
+                    class:mb-3={!summary}
+                    class:sm:mb-2={!summary}
+                    >
+                    {#if icon}
+                        <Icon size={5} component={icon}/>
+                    {/if}
+                    <span   class="ml-3 group-hover:underline"
+                            use:editable_if_needed={editable}>
+                        <slot/>
+                    </span>
+                </a>
 
-            {#if !isOnPage}
-            <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
-                        use:selectable_if_needed={selectable}>
-                {#if can_show_context_menu(selectable, context_data)}
-                    <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
-                        <FaBars/>
-                    </button>
+                {#if !isOnPage}
+                <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
+                            use:selectable_if_needed={selectable}>
+                    {#if can_show_context_menu(selectable, context_data)}
+                        <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
+                            <FaBars/>
+                        </button>
+                    {/if}
+                </section>
                 {/if}
-            </section>
+            </div>
+
+            {#if summary}
+                <p class="text-xs ml-10 mb-2 mr-2
+                        text-stone-900 dark:text-stone-400
+                        cursor-default"
+                    use:selectable_if_needed={selectable}
+                    use:editable_if_needed={summaryEditable}
+                    bind:this={summaryElement}>
+                    {summaryText}
+                </p>
             {/if}
-        </div>
+
+    </div>
 </li>
 
 

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         editable?: any | undefined;
         operations?: any | undefined;
         item?: object | undefined;
+        summary?: string | object | undefined;
+        editSummary?: (() => Promise<void>) | undefined;
     };
     events: {
         click: MouseEvent;
@@ -25,5 +27,6 @@ export type SidebarProps = typeof __propDef.props;
 export type SidebarEvents = typeof __propDef.events;
 export type SidebarSlots = typeof __propDef.slots;
 export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+    get editSummary(): () => Promise<void>;
 }
 export {};

package/components/sidebar/sidebar.list.svelte

@@ -73,9 +73,9 @@ function onBlurInserter() {
 }
 </script>
 
-{#each objects as item (item.Id)}
+{#each objects as item, idx (item.Id)}
     {#key item}             <!-- Forces to fully rerender when item changed to fire use: callbacks again -->
-        <slot {item}/>
+        <slot {item} {idx}/>
     {/key}
 {/each }
 

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

@@ -18,6 +18,7 @@ declare const __propDef: {
     slots: {
         default: {
             item: object;
+            idx: any;
         };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.20",
+  "version": "0.5.21",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",