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/copyInput.svelte

@@ -22,21 +22,23 @@
     };
 </script>
 
-<div class="input-text-wrapper is-with-end-button">
+<div>
     <label class:u-hide={!showLabel} class="label" for={label}>{label}</label>
-    <div class="input-text-wrapper">
+    <div class="input-text-wrapper" style="--amount-of-buttons:1">
         <input {value} id={label} type="text" class="input-text" readonly />
-        <button
-            type="button"
-            class="input-button"
-            aria-label="Click to copy."
-            on:click={copy}
-            on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
-            use:tooltip={{
-                content,
-                hideOnClick: false
-            }}>
-            <span class="icon-duplicate" aria-hidden="true" />
-        </button>
+        <div class="options-list">
+            <button
+                type="button"
+                class="input-button"
+                aria-label="Click to copy."
+                on:click={copy}
+                on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
+                use:tooltip={{
+                    content,
+                    hideOnClick: false
+                }}>
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </div>
     </div>
 </div>

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/innerModal.svelte

@@ -1,27 +1,33 @@
 <script>
+    import { FormItem } from '$lib/elements/forms';
+
     export let show = false;
 </script>
 
 {#if show}
-    <section class="modal is-inner-modal">
-        <header class="modal-header u-flex-wrap">
-            <h4 class="modal-title body-text-1">
-                <slot name="title" />
-            </h4>
-            <button
-                type="button"
-                class="x-button"
-                aria-label="Close"
-                title="Close"
-                on:click={() => (show = false)}>
-                <span class="icon-x" aria-hidden="true" />
-            </button>
-            <p class="u-flex-basis-100-percent">
-                <slot name="subtitle" />
-            </p>
-        </header>
-        <div class="modal-content">
-            <slot name="content" />
-        </div>
-    </section>
+    <FormItem>
+        <section class="modal is-inner-modal">
+            <div class="modal-form">
+                <header class="modal-header u-flex-wrap">
+                    <h4 class="modal-title body-text-1">
+                        <slot name="title" />
+                    </h4>
+                    <button
+                        type="button"
+                        class="x-button"
+                        aria-label="Close"
+                        title="Close"
+                        on:click={() => (show = false)}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                    <p class="u-flex-basis-100-percent">
+                        <slot name="subtitle" />
+                    </p>
+                </header>
+                <div class="modal-content">
+                    <slot name="content" />
+                </div>
+            </div>
+        </section>
+    </FormItem>
 {/if}

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} />