@invopop/popui 0.0.3 → 0.0.5

package/dist/BaseTable.svelte

@@ -4,6 +4,7 @@ import { createEventDispatcher } from "svelte";
 import BaseCounter from "./BaseCounter.svelte";
 import BaseTableRow from "./BaseTableRow.svelte";
 import BaseTableCell from "./BaseTableCell.svelte";
+import InputCheckbox from "./InputCheckbox.svelte";
 const dispatch = createEventDispatcher();
 const callback = (entry) => {
   if (entry.intersectionRatio && entry.isIntersecting) {
@@ -21,6 +22,9 @@ export let groupLabel = void 0;
 export let disableRowClick = false;
 export let hideCounter = false;
 export let freeWrap = false;
+export let selectable = false;
+export let selectedRows = [];
+export let selectedTrackedBy = "id";
 $:
   groupedData = groupData(data);
 $:
@@ -40,6 +44,12 @@ function groupData(rows) {
   });
   return groups;
 }
+function toggleAllSelected(selected) {
+  selectedRows = [];
+  if (!selected)
+    return;
+  selectedRows = data;
+}
 </script>
 
 <svelte:window
@@ -55,6 +65,16 @@ function groupData(rows) {
   <table class="hidden md:table w-full rounded-md">
     <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
+              on:change={(event) => {
+                toggleAllSelected(event.detail)
+              }}
+            />
+          </th>
+        {/if}
         {#each fields as field, i (i)}
           <BaseTableHeader
             isFirst={i === 0}
@@ -94,6 +114,9 @@ function groupData(rows) {
             {getActions}
             {disableRowClick}
             {freeWrap}
+            {selectable}
+            {selectedRows}
+            {selectedTrackedBy}
             on:click={() => {
               if (disableRowClick) return
 
@@ -106,6 +129,15 @@ function groupData(rows) {
             on:contextmenu={() => {
               dispatch('rowRightClick', row)
             }}
+            on:checked={(event) => {
+              if (event.detail) {
+                selectedRows = [...selectedRows, row]
+              } else {
+                selectedRows = selectedRows.filter(
+                  (r) => r[selectedTrackedBy] !== row[selectedTrackedBy]
+                )
+              }
+            }}
             on:action
             on:copied
           />

package/dist/BaseTable.svelte.d.ts

@@ -11,6 +11,9 @@ declare const __propDef: {
         disableRowClick?: boolean | undefined;
         hideCounter?: boolean | undefined;
         freeWrap?: boolean | undefined;
+        selectable?: boolean | undefined;
+        selectedRows?: TableDataRow[] | undefined;
+        selectedTrackedBy?: string | undefined;
     };
     events: {
         orderBy: CustomEvent<any>;

package/dist/BaseTableRow.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import BaseTableActions from "./BaseTableActions.svelte";
 import BaseTableCell from "./BaseTableCell.svelte";
+import InputCheckbox from "./InputCheckbox.svelte";
 const dispatch = createEventDispatcher();
 let actionsDropdown;
 export let row;
@@ -8,8 +9,18 @@ export let getActions = void 0;
 export let fields = [];
 export let disableRowClick = false;
 export let freeWrap = false;
+export let selectable = false;
+export let selectedTrackedBy = "id";
+export let selectedRows = [];
 $:
   actions = getActions instanceof Function ? getActions(row) : [];
+$:
+  checked = !!selectedRows.find((r) => {
+    const field = r[selectedTrackedBy];
+    if (field === void 0)
+      return false;
+    return field === row[selectedTrackedBy];
+  });
 </script>
 
 <tr
@@ -22,6 +33,16 @@ $:
     actionsDropdown.toggle()
   }}
 >
+  {#if selectable}
+    <td class="pl-1.5">
+      <InputCheckbox
+        {checked}
+        on:change={(event) => {
+          dispatch('checked', event.detail)
+        }}
+      />
+    </td>
+  {/if}
   {#each fields as field, i (i)}
     <BaseTableCell
       currentIndex={i}

package/dist/BaseTableRow.svelte.d.ts

@@ -7,10 +7,14 @@ declare const __propDef: {
         fields?: TableField[] | undefined;
         disableRowClick?: boolean | undefined;
         freeWrap?: boolean | undefined;
+        selectable?: boolean | undefined;
+        selectedTrackedBy?: string | undefined;
+        selectedRows?: TableDataRow[] | undefined;
     };
     events: {
         click: MouseEvent;
         copied: CustomEvent<any>;
+        checked: CustomEvent<any>;
         action: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/InputCheckbox.svelte

@@ -17,4 +17,5 @@ function updateInput(event) {
   {checked}
   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

@@ -4,6 +4,7 @@ declare const __propDef: {
         checked?: boolean | undefined;
     };
     events: {
+        click: MouseEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package.json

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