@humandialog/forms.svelte 0.5.7 → 0.5.8

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

@@ -53,8 +53,8 @@ export function _scrollViewToCard() {
   card?.scrollIntoView(
     {
       behavior: "smooth",
-      block: "start",
-      inline: "center"
+      block: "nearest",
+      inline: "nearest"
     }
   );
 }
@@ -131,7 +131,7 @@ export async function editProperty(field) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass}"
+<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass} scroll-mt-[50px] sm:scroll-mt-[40px]"
      class:cursor-pointer={!isCardActive}
      on:click={activate}
      use:selectable={item} 

package/components/kanban/kanban.svelte

@@ -150,6 +150,13 @@ afterUpdate(() => {
     }
   }
 });
+export function scrollViewToCard(item) {
+  columns.forEach((c2) => {
+    const card = c2.findCardByItem(item);
+    if (card)
+      card._scrollViewToCard();
+  });
+}
 export function moveUp(item) {
   const columnIdx = getColumnIdx(item);
   let allItems = definition.getItems();

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

@@ -13,6 +13,7 @@ declare const __propDef: {
         reload?: ((data: object | object[], selectElement?: number) => Promise<void>) | undefined;
         getColumnIdx?: ((item: any) => number) | undefined;
         edit?: ((item: object, field: string) => void) | undefined;
+        scrollViewToCard?: ((item: any) => void) | undefined;
         moveUp?: ((item: object) => void) | undefined;
         moveDown?: ((item: object) => void) | undefined;
         replace?: ((item: any, toColumnIdx: any, afterElement: any) => void) | undefined;
@@ -51,6 +52,7 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get reload(): (data: object | object[], selectElement?: number) => Promise<void>;
     get getColumnIdx(): (item: any) => number;
     get edit(): (item: object, field: string) => void;
+    get scrollViewToCard(): (item: any) => void;
     get moveUp(): (item: object) => void;
     get moveDown(): (item: object) => void;
     get replace(): (item: any, toColumnIdx: any, afterElement: any) => void;

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

@@ -189,16 +189,27 @@ function setSelectionAtEnd(element) {
   sel.removeAllRanges();
   sel.addRange(range);
 }
+let rootElement;
+export function scrollToView() {
+  rootElement.scrollIntoView(
+    {
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    }
+  );
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if item}
 {@const element_title = item[title]}
 
-<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}"
+<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} scroll-mt-[50px] sm:scroll-mt-[40px]"
             on:contextmenu={on_contextmenu}
             role="menu"
-            tabindex="-1">
+            tabindex="-1"
+            bind:this={rootElement}>
 
     <slot name="left" element={item}/>
     

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         contextMenu: any;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
+        scrollToView?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,5 +26,6 @@ export type ListSlots = typeof __propDef.slots;
 export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
     get activate(): () => void;
     get editProperty(): (field: string) => void;
+    get scrollToView(): () => void;
 }
 export {};

package/components/list/list.svelte

@@ -135,7 +135,7 @@ export function reload(data, selectElement = KEEP_SELECTION) {
   if (!activate_after_dom_update)
     activateItem("props", null, []);
 }
-export function moveUp(element) {
+export async function moveUp(element) {
   if (!orderAttrib)
     return;
   let prev = getPrev(items, element);
@@ -143,11 +143,13 @@ export function moveUp(element) {
     return;
   items = swapElements(items, element, prev);
   [element[orderAttrib], prev[orderAttrib]] = [prev[orderAttrib], element[orderAttrib]];
+  await tick();
+  scrollToSelectedElement();
   informModification(element, orderAttrib);
   informModification(prev, orderAttrib);
   pushChanges();
 }
-export function moveDown(element) {
+export async function moveDown(element) {
   if (!orderAttrib)
     return;
   let next = getNext(items, element);
@@ -155,6 +157,8 @@ export function moveDown(element) {
     return;
   items = swapElements(items, element, next);
   [element[orderAttrib], next[orderAttrib]] = [next[orderAttrib], element[orderAttrib]];
+  await tick();
+  scrollToSelectedElement();
   informModification(element, orderAttrib);
   informModification(next, orderAttrib);
   pushChanges();
@@ -182,6 +186,15 @@ export async function addRowAfter(after = null) {
     }
   });
 }
+function scrollToSelectedElement() {
+  const activeItem = getActive("props");
+  if (!activeItem)
+    return;
+  const activeItemKey = getItemKey(activeItem);
+  const activeIdx = items?.findIndex((i) => getItemKey(i) == activeItemKey);
+  if (activeIdx >= 0)
+    rows[activeIdx].scrollToView();
+}
 export function remove(element) {
   let removing_idx = items?.findIndex((e) => e == element);
   if (removing_idx < 0)

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

@@ -21,8 +21,8 @@ declare const __propDef: {
         MIN_ORDER?: 0 | undefined;
         rereder?: (() => void) | undefined;
         reload?: ((data: object | object[], selectElement?: number) => void) | undefined;
-        moveUp?: ((element: object) => void) | undefined;
-        moveDown?: ((element: object) => void) | undefined;
+        moveUp?: ((element: object) => Promise<void>) | undefined;
+        moveDown?: ((element: object) => Promise<void>) | undefined;
         addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
@@ -50,8 +50,8 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get MIN_ORDER(): 0;
     get rereder(): () => void;
     get reload(): (data: object | object[], selectElement?: number) => void;
-    get moveUp(): (element: object) => void;
-    get moveDown(): (element: object) => void;
+    get moveUp(): (element: object) => Promise<void>;
+    get moveDown(): (element: object) => Promise<void>;
     get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;

package/package.json

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