@invopop/popui 0.0.13 → 0.0.15

package/dist/BaseTable.svelte

@@ -98,6 +98,13 @@ function selectRange(to) {
     metaKeyPressed = event.metaKey
     shiftKeyPressed = event.shiftKey
 
+    if (event.key === 'Enter') {
+      if (lastSelectedIndex >= 0) {
+        dispatch('rowClick', lastSelected)
+      }
+      return
+    }
+
     if (event.key === 'Shift') {
       selectWithArrowPosition = lastSelectedIndex
       return

package/dist/BaseTable.svelte.d.ts

@@ -20,8 +20,8 @@ declare const __propDef: {
         orderBy: CustomEvent<any>;
         action: CustomEvent<any>;
         copied: CustomEvent<any>;
-        rowNewTabClick: CustomEvent<any>;
         rowClick: CustomEvent<any>;
+        rowNewTabClick: CustomEvent<any>;
         rowRightClick: CustomEvent<any>;
         tableEndReached: CustomEvent<any>;
     } & {

package/dist/BaseTableRow.svelte

@@ -4,6 +4,7 @@ import BaseTableCell from "./BaseTableCell.svelte";
 import InputCheckbox from "./InputCheckbox.svelte";
 const dispatch = createEventDispatcher();
 let actionsDropdown;
+let checkboxButton;
 export let row;
 export let getActions = void 0;
 export let fields = [];
@@ -21,6 +22,30 @@ $:
       return false;
     return field === row[selectedTrackedBy];
   });
+$:
+  if (checked) {
+    scrollIntoView();
+  }
+function scrollIntoView() {
+  const offset = 40;
+  const elementRect = checkboxButton.getBoundingClientRect();
+  const elementTop = elementRect.top + offset;
+  const elementBottom = elementRect.bottom + offset;
+  const viewportHeight = window.innerHeight;
+  const isAboveView = elementRect.top - offset < 0;
+  const isBelowView = elementRect.bottom + offset > viewportHeight;
+  if (isAboveView) {
+    window.scrollTo({
+      top: elementTop - offset,
+      behavior: "smooth"
+    });
+  } else if (isBelowView) {
+    window.scrollTo({
+      top: elementBottom - viewportHeight + offset,
+      behavior: "smooth"
+    });
+  }
+}
 </script>
 
 <tr
@@ -37,9 +62,10 @@ $:
   {#if selectable}
     <td>
       <button
+        bind:this={checkboxButton}
         class="pl-5 pr-1.5 h-[40px] flex items-center outline-none group cursor-default"
         on:click|stopPropagation={() => {
-          dispatch('checked', !checked)
+          dispatch('checked', checked)
         }}
       >
         <div class:invisible={!checked} class="group-hover:visible">

package/package.json

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