Merge pull request #51 from invopop/table_redesign

show checkboxes on hover
invopop · Oct 24, 2024 · af86067 · af86067
2 parents 4977e51 + 29a8356
commit af86067
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

diff --git a/svelte/lib/BaseTable.svelte b/svelte/lib/BaseTable.svelte
@@ -177,18 +177,20 @@
           <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md">
             {#if !hideSelectAll}
               <button
-                class="pl-5 pr-3 h-[40px] flex items-center outline-none"
+                class="pl-5 pr-3 h-[40px] flex items-center outline-none group"
                 on:click|stopPropagation={() => {
                   toggleAllSelected(!selectedRows.length)
                 }}
               >
-                <InputCheckbox
-                  checked={allChecked}
-                  {indeterminate}
-                  on:change={(event) => {
-                    toggleAllSelected(event.detail)
-                  }}
-                />
+                <div class:invisible={!selectedRows.length} class="group-hover:visible">
+                  <InputCheckbox
+                    checked={allChecked}
+                    {indeterminate}
+                    on:change={(event) => {
+                      toggleAllSelected(event.detail)
+                    }}
+                  />
+                </div>
               </button>
             {/if}
           </th>

diff --git a/svelte/lib/BaseTableRow.svelte b/svelte/lib/BaseTableRow.svelte
@@ -43,17 +43,19 @@
   {#if selectable}
     <td>
       <button
-        class="pl-5 pr-1.5 h-[40px] flex items-center outline-none"
+        class="pl-5 pr-1.5 h-[40px] flex items-center outline-none group"
         on:click|stopPropagation={() => {
           dispatch('checked', !checked)
         }}
       >
-        <InputCheckbox
-          {checked}
-          on:change={(event) => {
-            dispatch('checked', event.detail)
-          }}
-        />
+        <div class:invisible={!checked} class="group-hover:visible">
+          <InputCheckbox
+            {checked}
+            on:change={(event) => {
+              dispatch('checked', event.detail)
+            }}
+          />
+        </div>
       </button>
     </td>
   {/if}