@invopop/popui 0.0.5 → 0.0.7

package/dist/BaseTable.svelte

@@ -13,6 +13,9 @@ const callback = (entry) => {
 };
 const intersectOptions = { callback };
 let metaKeyPressed = false;
+let shiftKeyPressed = false;
+let lastSelected = {};
+let selectWithArrowPosition = -1;
 export let sortBy = "";
 export let sortDirection = "";
 export let fields = [];
@@ -25,10 +28,21 @@ export let freeWrap = false;
 export let selectable = false;
 export let selectedRows = [];
 export let selectedTrackedBy = "id";
+export let hideSelectAll = false;
 $:
   groupedData = groupData(data);
 $:
   addExtraCell = getActions instanceof Function;
+$:
+  indeterminate = selectedRows.length > 0 && selectedRows.length < data.length;
+$:
+  allChecked = selectedRows.length === data.length;
+$:
+  flattedData = groupedData.flatMap((d) => d.rows);
+$:
+  lastSelectedIndex = flattedData.findIndex(
+    (d) => d[selectedTrackedBy] === lastSelected[selectedTrackedBy]
+  );
 function groupData(rows) {
   if (rows.length === 0)
     return [];
@@ -46,18 +60,94 @@ function groupData(rows) {
 }
 function toggleAllSelected(selected) {
   selectedRows = [];
+  lastSelected = {};
   if (!selected)
     return;
   selectedRows = data;
 }
+function selectRow(row) {
+  selectedRows = [.../* @__PURE__ */ new Set([...selectedRows, row])];
+}
+function unselectRow(row) {
+  selectedRows = selectedRows.filter((r) => r[selectedTrackedBy] !== row[selectedTrackedBy]);
+  if (!selectedRows.length) {
+    lastSelected = {};
+  }
+}
+function selectRange(to) {
+  if (lastSelectedIndex < 0)
+    return;
+  let fromIndex = lastSelectedIndex;
+  let toIndex = flattedData.findIndex((d) => d[selectedTrackedBy] === to[selectedTrackedBy]);
+  if (fromIndex > toIndex) {
+    ;
+    [fromIndex, toIndex] = [toIndex, fromIndex];
+  }
+  const itemsToSelect = flattedData.slice(fromIndex, toIndex + 1);
+  selectedRows = [.../* @__PURE__ */ new Set([...selectedRows, ...itemsToSelect])];
+}
 </script>
 
 <svelte:window
   on:keydown={(event) => {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      selectedRows = []
+      lastSelected = {}
+    }
+
     metaKeyPressed = event.metaKey
+    shiftKeyPressed = event.shiftKey
+
+    if (event.key === 'Shift') {
+      selectWithArrowPosition = lastSelectedIndex
+      return
+    }
+
+    if (event.key === 'ArrowUp') {
+      if (!shiftKeyPressed) return
+      const toIndex = lastSelectedIndex - 1
+      const to = flattedData[toIndex]
+
+      if (!to) return
+
+      if (toIndex < selectWithArrowPosition) {
+        selectRow(to)
+      } else {
+        unselectRow(lastSelected)
+      }
+
+      lastSelected = to
+    }
+
+    if (event.key === 'ArrowDown') {
+      if (lastSelectedIndex < 0) {
+        selectRow(flattedData[0])
+        lastSelected = flattedData[0]
+      }
+
+      if (!shiftKeyPressed) return
+
+      const toIndex = lastSelectedIndex + 1
+      const to = flattedData[toIndex]
+
+      if (!to) return
+
+      if (toIndex > selectWithArrowPosition) {
+        selectRow(to)
+      } else {
+        unselectRow(lastSelected)
+      }
+
+      lastSelected = to
+    }
   }}
-  on:keyup={() => {
+  on:keyup={(event) => {
     metaKeyPressed = false
+    shiftKeyPressed = false
+
+    if (!event.shiftKey) {
+      selectWithArrowPosition = -1
+    }
   }}
 />
 
@@ -68,11 +158,15 @@ function toggleAllSelected(selected) {
         {#if selectable}
           <!-- if table is selectable we need to add an extra header with a checkbox -->
           <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md pl-1.5">
-            <InputCheckbox
-              on:change={(event) => {
-                toggleAllSelected(event.detail)
-              }}
-            />
+            {#if !hideSelectAll}
+              <InputCheckbox
+                checked={allChecked}
+                {indeterminate}
+                on:change={(event) => {
+                  toggleAllSelected(event.detail)
+                }}
+              />
+            {/if}
           </th>
         {/if}
         {#each fields as field, i (i)}
@@ -131,11 +225,14 @@ function toggleAllSelected(selected) {
             }}
             on:checked={(event) => {
               if (event.detail) {
-                selectedRows = [...selectedRows, row]
+                if (shiftKeyPressed) {
+                  selectRange(row)
+                } else {
+                  selectRow(row)
+                }
+                lastSelected = row
               } else {
-                selectedRows = selectedRows.filter(
-                  (r) => r[selectedTrackedBy] !== row[selectedTrackedBy]
-                )
+                unselectRow(row)
               }
             }}
             on:action

package/dist/BaseTable.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         selectable?: boolean | undefined;
         selectedRows?: TableDataRow[] | undefined;
         selectedTrackedBy?: string | undefined;
+        hideSelectAll?: boolean | undefined;
     };
     events: {
         orderBy: CustomEvent<any>;

package/dist/BaseTableRow.svelte

@@ -25,6 +25,7 @@ $:
 
 <tr
   class:cursor-pointer={!disableRowClick}
+  class:bg-workspace-accent-50={checked}
   class="hover:bg-neutral-50"
   on:click
   on:contextmenu|preventDefault={() => {

package/dist/InputCheckbox.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import { dispatchWcEvent } from "./wcdispatch.js";
 export let checked = false;
+export let indeterminate = false;
 const dispatch = createEventDispatcher();
 function updateInput(event) {
   if (event instanceof CustomEvent)
@@ -15,6 +16,7 @@ function updateInput(event) {
 <input
   type="checkbox"
   {checked}
+  {indeterminate}
   class="form-checkbox w-5 h-5 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 focus:ring-0 focus:ring-offset-0"
   on:change={updateInput}
   on:click|stopPropagation

package/dist/InputCheckbox.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         checked?: boolean | undefined;
+        indeterminate?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/package.json

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