@invopop/popui 0.0.6 → 0.0.8

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,6 +28,7 @@ export let freeWrap = false;
 export let selectable = false;
 export let selectedRows = [];
 export let selectedTrackedBy = "id";
+export let hideSelectAll = false;
 $:
   groupedData = groupData(data);
 $:
@@ -33,6 +37,12 @@ $:
   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 [];
@@ -50,40 +60,120 @@ 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
+    }
   }}
 />
 
-<div class="w-full rounded-md md:border border-neutral-100 font-sans">
-  <table class="hidden md:table w-full rounded-md">
+<div class="w-full font-sans">
+  <table class="hidden md:table w-full">
     <thead>
       <tr class="border-b border-neutral-100 relative">
         {#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
-              checked={allChecked}
-              {indeterminate}
-              on:change={(event) => {
-                toggleAllSelected(event.detail)
-              }}
-            />
+          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md">
+            {#if !hideSelectAll}
+              <label class="pl-5 pr-3 h-[40px] flex items-center" for={undefined}>
+                <InputCheckbox
+                  checked={allChecked}
+                  {indeterminate}
+                  on:change={(event) => {
+                    toggleAllSelected(event.detail)
+                  }}
+                />
+              </label>
+            {/if}
           </th>
         {/if}
         {#each fields as field, i (i)}
           <BaseTableHeader
-            isFirst={i === 0}
+            isFirst={i === 0 && !selectable}
             isLast={!addExtraCell && i === fields.length - 1}
             {sortBy}
             {sortDirection}
@@ -103,8 +193,8 @@ function toggleAllSelected(selected) {
           <tr>
             <th
               scope="colgroup"
-              colspan={fields.length + 1}
-              class="bg-neutral-50 px-3 py-1.5 text-left text-sm font-medium text-neutral-500 sticky top-11 tracking-normal border-t border-b border-neutral-100 h-8"
+              colspan={fields.length + (selectable ? 2 : 1)}
+              class="bg-neutral-50 px-5 text-left text-sm font-medium text-neutral-500 sticky top-11 tracking-normal border-t border-b border-neutral-100 h-8"
             >
               <span>{group.label}</span>
               {#if !hideCounter}
@@ -137,11 +227,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
@@ -170,7 +263,6 @@ function toggleAllSelected(selected) {
           {#each fields as field, i (i)}
             <BaseTableCell
               tag="div"
-              currentIndex={i}
               {field}
               badge={field.helperBadge ? field.helperBadge(row) : null}
               status={field.helperStatus ? field.helperStatus(row) : null}

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/BaseTableCell.svelte

@@ -7,23 +7,30 @@ import { getCountryName } from "./helpers.js";
 import UuidCopy from "./UuidCopy.svelte";
 import { Icon } from "@steeze-ui/svelte-icon";
 export let field;
-export let currentIndex;
+export let isFirst = false;
+export let isLast = false;
 export let badge = null;
 export let status = null;
 export let icons = null;
 export let data = "";
 export let freeWrap = false;
 export let tag = "td";
+export let selectable = false;
+export let hasActions = false;
 $:
   cellStyles = clsx(
     { "tabular-nums slashed-zero lining-nums": field.monospacedNums },
     { "font-mono": field.monospaced },
-    { "text-neutral-800 font-medium": currentIndex === 0 && !field.grayed },
-    { "text-neutral-800 md:text-neutral-500": currentIndex > 0 || field.grayed },
+    { "text-neutral-800 font-medium": isFirst && !field.grayed },
+    { "text-neutral-800 md:text-neutral-500": !isFirst || field.grayed },
     { "md:text-right": field.rightAlign },
     { "md:w-full md:max-w-0": field.fullWidth },
     { "py-2 md:py-[11.25px]": badge },
     { "py-2 md:py-[11.75px]": !badge },
+    { "pl-5": isFirst && !selectable },
+    { "pl-3": !isFirst || selectable },
+    { "pr-5": isLast && !hasActions },
+    { "pr-3": !isLast || hasActions },
     { "px-3": !field.noPadding },
     { "px-0": field.noPadding },
     { "whitespace-nowrap truncate": !freeWrap }

package/dist/BaseTableCell.svelte.d.ts

@@ -3,13 +3,16 @@ import type { Badge, FeedItemStatus, TableField, TableIcon } from './types.js';
 declare const __propDef: {
     props: {
         field: TableField;
-        currentIndex: number;
+        isFirst?: boolean | undefined;
+        isLast?: boolean | undefined;
         badge?: Badge | null | undefined;
         status?: FeedItemStatus | null | undefined;
         icons?: TableIcon[] | null | undefined;
         data?: unknown;
         freeWrap?: boolean | undefined;
         tag?: string | undefined;
+        selectable?: boolean | undefined;
+        hasActions?: boolean | undefined;
     };
     events: {
         copied: CustomEvent<any>;

package/dist/BaseTableHeader.svelte

@@ -11,14 +11,16 @@ export let isFirst = false;
 export let isLast = false;
 $:
   outerStyles = clsx({
-    "w-full": field.fullWidth,
-    "rounded-tl-md": isFirst,
-    "rounded-tr-md": isLast
+    "w-full": field.fullWidth
   });
 $:
   headerStyles = clsx({
     "justify-end": field.rightAlign,
-    "hover:bg-neutral-50 focus:bg-neutral-100": field.sortable
+    "hover:bg-neutral-50 focus:bg-neutral-100": field.sortable,
+    "pl-5": isFirst,
+    "pl-3": !isFirst,
+    "pr-5": isLast,
+    "pr-3": !isLast
   });
 function handleSortBy(event) {
   sortDirection = event.detail;
@@ -38,7 +40,7 @@ function handleSortBy(event) {
       <BaseDropdown bind:this={sortDropdown} fullWidth>
         <span
           slot="trigger"
-          class="{headerStyles} w-full p-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+          class="{headerStyles} w-full py-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
         >
           <span>{field.headerLabel}</span>
           {#if sortBy === field.slug}

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={() => {
@@ -34,20 +35,26 @@ $:
   }}
 >
   {#if selectable}
-    <td class="pl-1.5">
-      <InputCheckbox
-        {checked}
-        on:change={(event) => {
-          dispatch('checked', event.detail)
-        }}
-      />
+    <td>
+      <!-- for hack is needed in order to be used with the custom checkbox and silence the linter -->
+      <label class="pl-5 pr-1.5 h-[40px] flex items-center" for={undefined}>
+        <InputCheckbox
+          {checked}
+          on:change={(event) => {
+            dispatch('checked', event.detail)
+          }}
+        />
+      </label>
     </td>
   {/if}
   {#each fields as field, i (i)}
     <BaseTableCell
-      currentIndex={i}
+      isFirst={i === 0}
+      isLast={i === fields.length - 1}
       {field}
       {freeWrap}
+      {selectable}
+      hasActions={!!actions.length}
       badge={field.helperBadge ? field.helperBadge(row) : null}
       status={field.helperStatus ? field.helperStatus(row) : null}
       icons={field.helperIcons ? field.helperIcons(row) : null}
@@ -56,7 +63,7 @@ $:
     />
   {/each}
   {#if actions.length}
-    <td class="pl-1 pr-3">
+    <td class="pl-1 pr-5">
       <BaseTableActions
         bind:this={actionsDropdown}
         {actions}

package/dist/InputCheckbox.svelte

@@ -17,7 +17,7 @@ function updateInput(event) {
   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"
+  class="form-checkbox w-5 h-5 text-workspace-accent focus:text-workspace-accent rounded border border-neutral-200 hover:border-neutral-300 focus:ring-0 focus:ring-offset-0"
   on:change={updateInput}
   on:click|stopPropagation
 />

package/package.json

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