@invopop/popui 0.0.32 → 0.0.34

package/dist/BaseCounter.svelte

@@ -10,7 +10,7 @@ $:
 </script>
 
 <div
-  class="{styles} inline-flex items-center justify-center rounded p-[3px] text-neutral-500 text-sm font-medium h-4 min-w-[16px] tracking-wide tabular-nums slashed-zero lining-nums"
+  class="{styles} inline-flex items-center justify-center rounded p-1 text-neutral-500 text-sm font-medium h-4 min-w-[16px] tracking-wide tabular-nums slashed-zero lining-nums box-border"
 >
   {content}
 </div>

package/dist/BaseTable.svelte

@@ -198,59 +198,71 @@ function handleKeydown(event) {
 <div class="w-full font-sans">
   <table class="hidden md:table w-full">
     <thead>
-      <tr class="border-b border-neutral-100 relative">
+      <tr class="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">
-            {#if !hideSelectAll}
-              <button
-                class="pl-5 pr-3 h-[40px] flex items-center outline-none group cursor-default"
-                on:click|stopPropagation={() => {
-                  toggleAllSelected(!selectedRows.length)
-                }}
-              >
-                <div class:invisible={!selectedRows.length} class="group-hover:visible">
-                  <InputCheckbox
-                    checked={allChecked}
-                    {indeterminate}
-                    on:change={(event) => {
-                      toggleAllSelected(event.detail)
-                    }}
-                  />
-                </div>
-              </button>
-            {/if}
+          <th scope="col" class="bg-white sticky top-0 z-10 p-0">
+            <div class="border-b border-neutral-100">
+              {#if !hideSelectAll}
+                <button
+                  class="px-5 h-[36px] flex items-center outline-none group cursor-default"
+                  on:click|stopPropagation={() => {
+                    toggleAllSelected(!selectedRows.length)
+                  }}
+                >
+                  <div class:invisible={!selectedRows.length} class="group-hover:visible">
+                    <InputCheckbox
+                      checked={allChecked}
+                      {indeterminate}
+                      on:change={(event) => {
+                        toggleAllSelected(event.detail)
+                      }}
+                    />
+                  </div>
+                </button>
+              {/if}
+            </div>
           </th>
         {/if}
         {#each fields as field, i (i)}
           <BaseTableHeader
-            isFirst={i === 0 && !selectable}
+            isFirst={i === 0}
             isLast={!addExtraCell && i === fields.length - 1}
             {sortBy}
             {sortDirection}
             {field}
+            {selectable}
             on:orderBy
           />
         {/each}
         {#if addExtraCell}
           <!-- if table has actions cell we need to add an extra header -->
-          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md" />
+          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md">
+            <div class="border-b border-neutral-100 h-9" />
+          </th>
         {/if}
       </tr>
     </thead>
     <tbody>
-      {#each groupedData as group}
+      {#each groupedData as group, i (i)}
         {#if group.label}
           <tr>
             <th
               scope="colgroup"
               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"
+              class="bg-white text-left text-sm font-medium text-neutral-500 sticky top-9 tracking-normal h-8"
             >
-              <span>{group.label}</span>
-              {#if !hideCounter}
-                <BaseCounter content={group.rows.length} />
-              {/if}
+              <span
+                class:border-t={i > 0}
+                class:pl-14={selectable}
+                class:pl-5={!selectable}
+                class="flex items-center space-x-1 box-border border-b border-neutral-100 h-8"
+              >
+                <span>{group.label}</span>
+                {#if !hideCounter}
+                  <BaseCounter content={group.rows.length} />
+                {/if}
+              </span>
             </th>
           </tr>
         {/if}
@@ -265,7 +277,9 @@ function handleKeydown(event) {
             {selectedRows}
             {selectedTrackedBy}
             {selectionMode}
-            selected={lastSelected && row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
+            selected={selectable &&
+              lastSelected &&
+              row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
             on:click={() => {
               if (disableRowClick) return
 

package/dist/BaseTableCell.svelte

@@ -17,6 +17,8 @@ export let freeWrap = false;
 export let tag = "td";
 export let selectable = false;
 export let hasActions = false;
+$:
+  isSelectableFirst = isFirst && selectable;
 $:
   cellStyles = clsx(
     { "tabular-nums slashed-zero lining-nums": field.monospacedNums },
@@ -25,13 +27,11 @@ $:
     { "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 },
+    { "pl-3": !isFirst && !isSelectableFirst },
     { "pr-5": isLast && !hasActions },
     { "pr-3": !isLast || hasActions },
-    { "px-3": !field.noPadding },
+    { "px-3": (!isFirst || !selectable) && !field.noPadding },
     { "px-0": field.noPadding },
     { "whitespace-nowrap truncate": !freeWrap }
   );
@@ -41,7 +41,7 @@ $:
 
 <svelte:element
   this={tag}
-  class="{cellStyles} text-base tracking-normal"
+  class="{cellStyles} text-base tracking-normal py-2"
   style:min-width={field.width}
   style:max-width={isMobile ? `${Viewport.Width}px` : field.width}
 >

package/dist/BaseTableHeader.svelte

@@ -9,15 +9,16 @@ export let sortBy = "";
 export let sortDirection;
 export let isFirst = false;
 export let isLast = false;
+export let selectable = false;
 $:
   outerStyles = clsx({
     "w-full": field.fullWidth
   });
 $:
   headerStyles = clsx({
-    "justify-end": field.rightAlign,
+    "self-end": field.rightAlign,
     "hover:bg-neutral-50 focus:bg-neutral-100": field.sortable,
-    "pl-5": isFirst,
+    "pl-5": isFirst && !selectable,
     "pl-3": !isFirst,
     "pr-5": isLast,
     "pr-3": !isLast
@@ -31,18 +32,18 @@ function handleSortBy(event) {
 
 <th
   scope="col"
-  class="{outerStyles} bg-white text-neutral-500 group sticky z-10 top-0"
+  class="{outerStyles} bg-white text-neutral-500 group sticky z-10 top-0 h-9 box-border p-0"
   style:min-width={field.width}
   style:max-width={field.width}
 >
-  <span class="flex">
+  <span class="flex border-b border-neutral-100">
     {#if field.sortable}
       <BaseDropdown bind:this={sortDropdown} fullWidth>
         <span
           slot="trigger"
-          class="{headerStyles} w-full py-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+          class="{headerStyles} w-full py-2 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
         >
-          <span>{field.headerLabel}</span>
+          <span class="min-h-5" />
           {#if sortBy === field.slug}
             <svg
               viewBox="0 0 12 12"
@@ -68,7 +69,7 @@ function handleSortBy(event) {
       </BaseDropdown>
     {:else}
       <div
-        class="{headerStyles} p-3 text-left text-base font-normal tracking-normal whitespace-nowrap"
+        class="{headerStyles} py-2 text-left text-base font-normal tracking-normal whitespace-nowrap"
       >
         {field.headerLabel}
       </div>

package/dist/BaseTableHeader.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         sortDirection: TableSortBy;
         isFirst?: boolean | undefined;
         isLast?: boolean | undefined;
+        selectable?: boolean | undefined;
     };
     events: {
         orderBy: CustomEvent<any>;

package/dist/BaseTableRow.svelte

@@ -56,7 +56,7 @@ function scrollIntoView() {
     <td>
       <button
         bind:this={checkboxButton}
-        class="pl-5 pr-1.5 h-[40px] flex items-center outline-none group cursor-default"
+        class="px-5 h-[40px] flex items-center outline-none group cursor-default"
         on:click|stopPropagation={() => {
           dispatch('checked', checked)
         }}

package/dist/InputCheckbox.svelte

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

package/dist/TagStatus.svelte

@@ -36,7 +36,7 @@ $:
   });
 </script>
 
-<span class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1">
+<span class="{tagStyles} rounded text-sm inline-flex items-center font-medium gap-1 box-border h-5">
   {#if dot}
     <span class="{dotStyles} w-2 h-2 rounded-sm" />
   {/if}

package/package.json

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