feat: miscellaneous fixes

src/lib/components/cardContainer.svelte

@@ -12,7 +12,7 @@
     style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}>
     <slot />
 
-    {#if limit + offset > total && (total % 2 !== 0 || total % 4 === 0)}
+    {#if total > 3 ? total < limit + offset : total % 2 !== 0}
         <Empty isButton on:click>
             <slot name="empty" />
         </Empty>

src/lib/components/emptySearch.svelte

@@ -3,6 +3,8 @@
     import Light from '$lib/images/search-light.svg';
     import Dark from '$lib/images/search-dark.svg';
     import PaginationInline from './paginationInline.svelte';
+
+    export let hidePages = false;
 </script>
 
 <article class="card u-grid u-cross-center u-width-full-line common-section">
@@ -18,5 +20,5 @@
 
 <div class="u-flex u-margin-block-start-32 u-main-space-between">
     <p class="text">Total results: 0</p>
-    <PaginationInline limit={1} offset={0} sum={0} />
+    <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
 </div>

src/lib/components/permissions/actions.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem } from '..';
     import Custom from './custom.svelte';
     import Team from './team.svelte';
@@ -22,10 +21,7 @@
 </script>
 
 <DropList bind:show={showDropdown} placement="bottom-end">
-    <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-        <span class="icon-plus" aria-hidden="true" />
-        <span class="text">Add role</span>
-    </Button>
+    <slot />
     <svelte:fragment slot="list">
         <DropListItem disabled={$groups.has('any')} on:click={() => dispatch('create', ['any'])}>
             Any

src/lib/components/permissions/index.ts

@@ -1,3 +1,4 @@
 export { default as Permissions } from './permissions.svelte';
+export { default as Roles } from './roles.svelte';
 export { default as Team } from './team.svelte';
 export { default as User } from './user.svelte';

src/lib/components/permissions/permissions.svelte

@@ -10,26 +10,23 @@
 </script>
 
 <script lang="ts">
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
         TableCell,
         TableCellHead,
-        TableCellText,
         TableHeader,
         TableRow
     } from '$lib/elements/table';
     import { difference } from '$lib/helpers/array';
     import { onDestroy, onMount } from 'svelte';
     import { writable, type Unsubscriber } from 'svelte/store';
-    import { Empty } from '../';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
 
     export let withCreate = false;
-    export let withCrud = true;
     export let permissions: string[] = [];
-    export let executeAccess: string[] = [];
 
     let showUser = false;
     let showTeam = false;
@@ -145,76 +142,61 @@
 
         return a.localeCompare(b);
     }
-
-    $: if (executeAccess.length && !permissions.length) {
-        executeAccess.forEach((permission) => {
-            addRole(permission);
-        });
-    }
-    $: if ([...$groups]?.length && !permissions.length) {
-        executeAccess = [...$groups].sort(sortRoles).map(([role]) => role);
-    }
-
-    //TODO: click on Empty components opens the dropdown
 </script>
 
 {#if [...$groups]?.length}
     <Table noMargin noStyles noMobile>
         <TableHeader>
             <TableCellHead>Role</TableCellHead>
-            {#if withCrud}
-                {#if withCreate}
-                    <TableCellHead width={70}>Create</TableCellHead>
-                {/if}
-                <TableCellHead width={70}>Read</TableCellHead>
-                <TableCellHead width={70}>Update</TableCellHead>
-                <TableCellHead width={70}>Delete</TableCellHead>
+            {#if withCreate}
+                <TableCellHead width={70}>Create</TableCellHead>
             {/if}
+            <TableCellHead width={70}>Read</TableCellHead>
+            <TableCellHead width={70}>Update</TableCellHead>
+            <TableCellHead width={70}>Delete</TableCellHead>
             <TableCellHead width={40} />
         </TableHeader>
         <TableBody>
             {#each [...$groups].sort(sortRoles) as [role, permission]}
                 <TableRow>
-                    <TableCellText title="Role">
+                    <TableCell title="Role">
                         <Row {role} />
-                    </TableCellText>
-
-                    {#if withCrud}
-                        {#if withCreate}
-                            <TableCell title="Create">
-                                <input
-                                    type="checkbox"
-                                    class="icon-check"
-                                    aria-label="Create"
-                                    checked={permission.create}
-                                    on:change={() => togglePermission(role, 'create')} />
-                            </TableCell>
-                        {/if}
-                        <TableCell title="Read">
-                            <input
-                                type="checkbox"
-                                class="icon-check"
-                                aria-label="Read"
-                                checked={permission.read}
-                                on:change={() => togglePermission(role, 'read')} />
-                        </TableCell>
-                        <TableCell title="Update">
-                            <input
-                                type="checkbox"
-                                class="icon-check"
-                                aria-label="Update"
-                                checked={permission.update}
-                                on:change={() => togglePermission(role, 'update')} />
-                        </TableCell>
-                        <TableCell title="Delete">
+                    </TableCell>
+
+                    {#if withCreate}
+                        <TableCell title="Create">
                             <input
                                 type="checkbox"
                                 class="icon-check"
-                                aria-label="Delete"
-                                checked={permission.delete}
-                                on:change={() => togglePermission(role, 'delete')} />
+                                aria-label="Create"
+                                checked={permission.create}
+                                on:change={() => togglePermission(role, 'create')} />
                         </TableCell>
                     {/if}
+                    <TableCell title="Read">
+                        <input
+                            type="checkbox"
+                            class="icon-check"
+                            aria-label="Read"
+                            checked={permission.read}
+                            on:change={() => togglePermission(role, 'read')} />
+                    </TableCell>
+                    <TableCell title="Update">
+                        <input
+                            type="checkbox"
+                            class="icon-check"
+                            aria-label="Update"
+                            checked={permission.update}
+                            on:change={() => togglePermission(role, 'update')} />
+                    </TableCell>
+                    <TableCell title="Delete">
+                        <input
+                            type="checkbox"
+                            class="icon-check"
+                            aria-label="Delete"
+                            checked={permission.delete}
+                            on:change={() => togglePermission(role, 'delete')} />
+                    </TableCell>
 
                     <TableCell title="Remove" width={40}>
                         <div class="u-flex">
@@ -231,18 +213,38 @@
             {/each}
         </TableBody>
     </Table>
-{:else}
-    <span class="eyebrow-heading-3 u-sep-block-end">ROLE</span>
 
-    <Empty isButton on:click={() => (showDropdown = !showDropdown)}>
-        Add a role to get started
-    </Empty>
+    <Actions
+        bind:showCustom
+        bind:showDropdown
+        bind:showTeam
+        bind:showUser
+        {groups}
+        on:create={create}>
+        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add role</span>
+        </Button>
+    </Actions>
+{:else}
+    <article class="card u-grid u-cross-center u-width-full-line dashed">
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <div class="common-section">
+                <Actions
+                    bind:showCustom
+                    bind:showDropdown
+                    bind:showTeam
+                    bind:showUser
+                    {groups}
+                    on:create={create}>
+                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </Actions>
+            </div>
+            <div class="common-section">
+                <span class="text"> Add a role to get started </span>
+            </div>
+        </div>
+    </article>
 {/if}
-
-<Actions
-    bind:showCustom
-    bind:showDropdown
-    bind:showTeam
-    bind:showUser
-    {groups}
-    on:create={create} />

src/lib/components/permissions/roles.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
+        TableCell,
         TableCellHead,
         TableCellText,
         TableHeader,
@@ -71,37 +73,64 @@
     }
 </script>
 
-<Table noMargin noStyles noMobile>
-    <TableHeader>
-        <TableCellHead>Role</TableCellHead>
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each [...$groups.keys()] as role}
-            <TableRow>
-                <TableCellText title="Role">
-                    <Row {role} />
-                </TableCellText>
-                <TableCellText title="Remove">
-                    <div class="u-flex">
-                        <button
-                            class="button is-text is-only-icon"
-                            type="button"
-                            aria-label="delete"
-                            on:click={() => deleteRole(role)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    </div>
-                </TableCellText>
-            </TableRow>
-        {/each}
-    </TableBody>
-</Table>
-
-<Actions
-    bind:showCustom
-    bind:showDropdown
-    bind:showTeam
-    bind:showUser
-    {groups}
-    on:create={create} />
+{#if roles?.length}
+    <Table noMargin noStyles noMobile>
+        <TableHeader>
+            <TableCellHead>Role</TableCellHead>
+            <TableCellHead width={40} />
+        </TableHeader>
+        <TableBody>
+            {#each [...$groups.keys()] as role}
+                <TableRow>
+                    <TableCell title="Role">
+                        <Row {role} />
+                    </TableCell>
+                    <TableCellText title="Remove">
+                        <div class="u-flex">
+                            <button
+                                class="button is-text is-only-icon"
+                                type="button"
+                                aria-label="delete"
+                                on:click={() => deleteRole(role)}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        </div>
+                    </TableCellText>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+    <Actions
+        bind:showCustom
+        bind:showDropdown
+        bind:showTeam
+        bind:showUser
+        {groups}
+        on:create={create}>
+        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add role</span>
+        </Button>
+    </Actions>
+{:else}
+    <article class="card u-grid u-cross-center u-width-full-line dashed">
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <div class="common-section">
+                <Actions
+                    bind:showCustom
+                    bind:showDropdown
+                    bind:showTeam
+                    bind:showUser
+                    {groups}
+                    on:create={create}>
+                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </Actions>
+            </div>
+            <div class="common-section">
+                <span class="text"> Add a role to get started </span>
+            </div>
+        </div>
+    </article>
+{/if}