@invopop/popui 0.0.18 → 0.0.20

package/dist/BaseTable.svelte

@@ -74,6 +74,13 @@ function unselectRow(row) {
     lastSelected = {};
   }
 }
+function toggleRow(row) {
+  if (selectedRows.find((r) => r[selectedTrackedBy] === row[selectedTrackedBy])) {
+    unselectRow(row);
+  } else {
+    selectRow(row);
+  }
+}
 function selectRange(to) {
   if (lastSelectedIndex < 0)
     return;
@@ -90,11 +97,17 @@ function selectRange(to) {
 
 <svelte:window
   on:keydown={(event) => {
+    event.preventDefault()
+
     if (event.key === 'Escape' || event.key === 'Esc') {
       selectedRows = []
       lastSelected = {}
     }
 
+    if ((event.code === 'Space' || event.key === ' ') && lastSelected) {
+      toggleRow(lastSelected)
+    }
+
     metaKeyPressed = event.metaKey
     shiftKeyPressed = event.shiftKey
 
@@ -111,41 +124,49 @@ function selectRange(to) {
     }
 
     if (event.key === 'ArrowUp') {
-      if (!shiftKeyPressed) return
       const toIndex = lastSelectedIndex - 1
       const to = flattedData[toIndex]
 
       if (!to) return
 
+      const previousSelected = { ...lastSelected }
+      lastSelected = to
+
+      if (!shiftKeyPressed) return
+
       if (toIndex < selectWithArrowPosition) {
+        selectRow(previousSelected)
         selectRow(to)
       } else {
         unselectRow(lastSelected)
       }
-
-      lastSelected = to
     }
 
     if (event.key === 'ArrowDown') {
       if (lastSelectedIndex < 0) {
-        selectRow(flattedData[0])
+        if (shiftKeyPressed) {
+          selectRow(flattedData[0])
+        }
         lastSelected = flattedData[0]
+        return
       }
 
-      if (!shiftKeyPressed) return
-
       const toIndex = lastSelectedIndex + 1
       const to = flattedData[toIndex]
 
       if (!to) return
 
+      const previousSelected = { ...lastSelected }
+      lastSelected = to
+
+      if (!shiftKeyPressed) return
+
       if (toIndex > selectWithArrowPosition) {
+        selectRow(previousSelected)
         selectRow(to)
       } else {
         unselectRow(lastSelected)
       }
-
-      lastSelected = to
     }
   }}
   on:keyup={(event) => {
@@ -227,6 +248,7 @@ function selectRange(to) {
             {selectable}
             {selectedRows}
             {selectedTrackedBy}
+            selected={lastSelected && row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
             on:click={() => {
               if (disableRowClick) return
 

package/dist/BaseTableRow.svelte

@@ -12,6 +12,7 @@ export let fields = [];
 export let disableRowClick = false;
 export let freeWrap = false;
 export let selectable = false;
+export let selected = false;
 export let selectedTrackedBy = "id";
 export let selectedRows = [];
 $:
@@ -24,7 +25,7 @@ $:
     return field === row[selectedTrackedBy];
   });
 $:
-  if (checked) {
+  if (selected) {
     scrollIntoView();
   }
 function scrollIntoView() {
@@ -34,7 +35,8 @@ function scrollIntoView() {
 
 <tr
   class:cursor-pointer={!disableRowClick}
-  class:bg-workspace-accent-50={checked}
+  class:bg-neutral-50={selected}
+  class:bg-workspace-accent-50={checked && !selected}
   class="hover:bg-neutral-50"
   on:click
   on:contextmenu|preventDefault={() => {

package/dist/BaseTableRow.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         disableRowClick?: boolean | undefined;
         freeWrap?: boolean | undefined;
         selectable?: boolean | undefined;
+        selected?: boolean | undefined;
         selectedTrackedBy?: string | undefined;
         selectedRows?: TableDataRow[] | undefined;
     };

package/dist/helpers.js

@@ -59,15 +59,16 @@ export function scrollIntoTableView(element) {
     const elementBottom = elementRect.bottom - containerRect.top + container.scrollTop;
     const isAboveView = elementTop - offsetTop < container.scrollTop;
     const isBelowView = elementBottom + offset > container.scrollTop + container.clientHeight;
-    if (isAboveView) {
+    if (isBelowView) {
         container.scrollTo({
-            top: elementTop - offsetTop,
+            top: elementBottom - container.clientHeight + offset,
             behavior: 'smooth'
         });
+        return;
     }
-    else if (isBelowView) {
+    if (isAboveView) {
         container.scrollTo({
-            top: elementBottom - container.clientHeight + offset,
+            top: elementTop - offsetTop,
             behavior: 'smooth'
         });
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",