@invopop/popui 0.0.7 → 0.0.9

package/dist/BaseTable.svelte

@@ -151,27 +151,32 @@ function selectRange(to) {
   }}
 />
 
-<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">
+          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md">
             {#if !hideSelectAll}
-              <InputCheckbox
-                checked={allChecked}
-                {indeterminate}
-                on:change={(event) => {
-                  toggleAllSelected(event.detail)
-                }}
-              />
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <!-- svelte-ignore a11y-label-has-associated-control -->
+              <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+              <label class="pl-5 pr-3 h-[40px] flex items-center" on:click|stopPropagation>
+                <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}
@@ -191,8 +196,8 @@ function selectRange(to) {
           <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}
@@ -261,7 +266,6 @@ function selectRange(to) {
           {#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

@@ -17,6 +17,7 @@ declare const __propDef: {
         hideSelectAll?: boolean | undefined;
     };
     events: {
+        click: MouseEvent;
         orderBy: CustomEvent<any>;
         action: CustomEvent<any>;
         copied: 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

@@ -35,20 +35,28 @@ $:
   }}
 >
   {#if selectable}
-    <td class="pl-1.5">
-      <InputCheckbox
-        {checked}
-        on:change={(event) => {
-          dispatch('checked', event.detail)
-        }}
-      />
+    <td>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-label-has-associated-control -->
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <label class="pl-5 pr-1.5 h-[40px] flex items-center" on:click|stopPropagation>
+        <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}
@@ -57,7 +65,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.7",
+  "version": "0.0.9",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",