@humandialog/forms.svelte 1.6.9 → 1.7.0

package/components/list/List.d.ts

@@ -48,6 +48,8 @@ export declare class rList_definition {
     onInsert: Function | undefined;
     inserter_icon: boolean;
     onOpen: Function | undefined;
+    downloadable: boolean;
+    downloadableFunc: Function | undefined;
     properties: rList_property[];
     tags: rList_property_tags | null;
 }

package/components/list/List.js

@@ -56,6 +56,8 @@ export class rList_definition {
     onInsert = undefined;
     inserter_icon = false;
     onOpen = undefined;
+    downloadable = false;
+    downloadableFunc = undefined;
     properties = [];
     tags = null;
 }

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

@@ -16,6 +16,7 @@ import Summary from "./list.element.summary.svelte";
 import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
 import Icon from "../../icon.svelte";
+import Spinner from "../../delayed.spinner.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
 import { FaExternalLinkAlt, FaRegSquare, FaRegCheckSquare } from "svelte-icons/fa/";
@@ -44,7 +45,9 @@ $:
 $:
   focused_class = is_row_active ? "bg-stone-200 dark:bg-stone-700" : "";
 $:
-  is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func);
+  download = is_row_active && (definition.downloadable || (definition.downloadableFunc ? definition.downloadableFunc(item) : false));
+$:
+  is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func || download);
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -272,6 +275,15 @@ function onToggleMultiSelect(e) {
   if (e)
     e.stopPropagation();
 }
+let isDownloading = false;
+async function onDownloadFile(e) {
+  isDownloading = true;
+  e.preventDefault();
+  e.stopPropagation();
+  if (definition.onOpen)
+    await definition.onOpen(item);
+  isDownloading = false;
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -290,7 +302,11 @@ function onToggleMultiSelect(e) {
                 on:click={onToggleMultiSelect}/>
     {/if}
     
-    <slot name="left" element={item}/>
+    {#if isDownloading}
+        <Spinner class="mt-0.5  ml-2  mr-1" size={5} delay={0}/>
+    {:else}
+        <slot name="left" element={item}/>
+    {/if}
     
     <i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i>   <!-- just to force tailwind classes including -->
     
@@ -315,10 +331,19 @@ function onToggleMultiSelect(e) {
                                         onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
                                     }}
                             >  <!--on:click|stopPropagation={followDefinedHRef}-->
-                            <a  class="sm:hover:cursor-pointer underline" 
-                                href={getHRef()} use:link>
-                                {element_title}
-                            </a>
+                            {#if download}
+                                <a  class="sm:hover:cursor-pointer underline" 
+                                    download
+                                    href={getHRef()}
+                                    on:click={onDownloadFile}>
+                                    {element_title}
+                                </a>
+                            {:else}
+                                <a  class="sm:hover:cursor-pointer underline" 
+                                    href={getHRef()} use:link>
+                                    {element_title}
+                                </a>
+                            {/if}
                         </p>
                     {:else}
                         <p  class=" text-base font-semibold 

package/components/list/list.svelte

@@ -252,34 +252,40 @@ function reorderElements(items2, from = null) {
   }
   pushChanges();
 }
-async function insert(title2, summary, after) {
-  let newElement = {
-    [definition.title]: title2,
-    [definition.summary]: summary
-  };
-  if (after && orderAttrib) {
+export function assignOrder(after) {
+  if (!orderAttrib)
+    return 0;
+  if (after) {
     const leftElement = after;
     const leftOrder = leftElement[orderAttrib];
     const rightElement = getNext(items, leftElement);
     if (rightElement) {
       let rightOrder = rightElement[orderAttrib];
       if (rightOrder - leftOrder >= 2)
-        newElement[orderAttrib] = leftOrder + Math.floor((rightOrder - leftOrder) / 2);
+        return leftOrder + Math.floor((rightOrder - leftOrder) / 2);
       else {
         reorderElements(items, leftElement);
         rightOrder = rightElement[orderAttrib];
-        newElement[orderAttrib] = leftOrder + Math.floor((rightOrder - leftOrder) / 2);
+        return leftOrder + Math.floor((rightOrder - leftOrder) / 2);
       }
     } else
-      newElement[orderAttrib] = leftOrder + ORDER_STEP;
-  } else if (orderAttrib) {
+      return leftOrder + ORDER_STEP;
+  } else {
     const lastElement = getLast(items);
     if (lastElement) {
       const lastOrder = lastElement[orderAttrib];
-      newElement[orderAttrib] = lastOrder + ORDER_STEP;
+      return lastOrder + ORDER_STEP;
     } else
-      newElement[orderAttrib] = MIN_ORDER;
+      return MIN_ORDER;
   }
+}
+async function insert(title2, summary, after) {
+  let newElement = {
+    [definition.title]: title2,
+    [definition.summary]: summary
+  };
+  if (orderAttrib)
+    newElement[orderAttrib] = assignOrder(after);
   await definition.onInsert(newElement);
   return;
   let insertedElement = await definition.onInsert(newElement);

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

@@ -30,6 +30,7 @@ declare const __propDef: {
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
         toggleMultiselection?: (() => void) | undefined;
+        assignOrder?: ((after: object | null) => number) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -60,5 +61,6 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;
     get toggleMultiselection(): () => void;
+    get assignOrder(): (after: object | null) => number;
 }
 export {};

package/components/list/list.title.svelte

@@ -6,6 +6,8 @@ export let onOpen = void 0;
 export let readonly = false;
 export let href = void 0;
 export let hrefFunc = void 0;
+export let downloadable = false;
+export let downloadableFunc = void 0;
 let definition = getContext("rList-definition");
 definition.title = a;
 definition.title_editable = editable;
@@ -14,4 +16,6 @@ definition.title_readonly = readonly;
 definition.title_href = href;
 definition.title_href_func = hrefFunc;
 definition.onOpen = onOpen;
+definition.downloadable = downloadable;
+definition.downloadableFunc = downloadableFunc;
 </script>

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

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

package/package.json

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