feat: permissions for 1.0.0

src/lib/components/dropListItem.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+    export let disabled = false;
     export let icon: string = null;
 </script>
 
 <li class="drop-list-item">
-    <button class="drop-button" on:click|preventDefault>
+    <button class="drop-button" on:click|preventDefault {disabled}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />

src/lib/components/modal.svelte

@@ -34,8 +34,8 @@
     };
     const closeModal = () => {
         if (closable) {
-            show = false;
             dispatch('close');
+            show = false;
         }
     };
 

src/lib/components/pagination.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+
     export let sum: number;
     export let limit: number;
     export let offset: number;
+    export let hidePages = false;
 
     const dispatch = createEventDispatcher();
+
     $: totalPages = Math.ceil(sum / limit);
     $: currentPage = Math.floor(offset / limit + 1);
     $: pages = pagination(currentPage, totalPages);
@@ -50,56 +53,63 @@
 {#if totalPages > 1}
     <nav class="pagination">
         <button
+            type="button"
             on:click={() => handleButtonPage('prev')}
             class:is-disabled={currentPage <= 1}
             class="button is-text"
             aria-label="prev page">
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
         </button>
-        <ol class="pagination-list is-only-desktop">
-            {#each pages as page}
-                {#if typeof page === 'number'}
-                    <li class="pagination-item">
-                        <button
-                            class="button"
-                            on:click={() => handleOptionClick(page)}
-                            class:is-disabled={currentPage === page}
-                            class:is-text={currentPage !== page}
-                            aria-label="page">
-                            <span class="text">{page}</span>
-                        </button>
-                    </li>
-                {:else}
-                    <li class="li is-text">
-                        <span class="icon">...</span>
-                    </li>
-                {/if}
-            {/each}
-        </ol>
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                {#each pages as page}
+                    {#if typeof page === 'number'}
+                        <li class="pagination-item">
+                            <button
+                                type="button"
+                                class="button"
+                                on:click={() => handleOptionClick(page)}
+                                class:is-disabled={currentPage === page}
+                                class:is-text={currentPage !== page}
+                                aria-label="page">
+                                <span class="text">{page}</span>
+                            </button>
+                        </li>
+                    {:else}
+                        <li class="li is-text">
+                            <span class="icon">...</span>
+                        </li>
+                    {/if}
+                {/each}
+            </ol>
+        {/if}
         <button
             on:click={() => handleButtonPage('next')}
             class:is-disabled={currentPage === totalPages}
             class="button is-text"
+            type="button"
             aria-label="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
         </button>
     </nav>
 {:else}
     <nav class="pagination">
-        <button class="button is-text is-disabled" aria-label="prev page">
+        <button type="button" class="button is-text is-disabled" aria-label="prev page">
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
         </button>
-        <ol class="pagination-list is-only-desktop">
-            <li class="pagination-item">
-                <button class="button is-disabled" aria-label="page">
-                    <span class="text">1</span>
-                </button>
-            </li>
-        </ol>
-        <button class="button is-text is-disabled" aria-label="next page">
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                <li class="pagination-item">
+                    <button type="button" class="button is-disabled" aria-label="page">
+                        <span class="text">1</span>
+                    </button>
+                </li>
+            </ol>
+        {/if}
+        <button type="button" class="button is-text is-disabled" aria-label="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
         </button>

src/lib/components/permissions/custom.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Button, Form, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { Modal } from '..';
+    import type { Writable } from 'svelte/store';
+    import type { Permission } from './permissions.svelte';
+
+    export let show: boolean;
+    export let groups: Writable<Map<string, Permission>>;
+
+    const dispatch = createEventDispatcher();
+
+    let value = '';
+
+    function reset() {
+        value = '';
+        show = false;
+    }
+
+    function create() {
+        dispatch('create', [value]);
+        reset();
+    }
+
+    $: disabled = !value || $groups.has(value);
+</script>
+
+<Form on:submit={create} noMargin>
+    <Modal bind:show on:close={reset}>
+        <svelte:fragment slot="header">Custom permission</svelte:fragment>
+
+        <FormList>
+            <InputText
+                showLabel={false}
+                id="custom-permission"
+                label="Custom permission"
+                placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+                bind:value />
+            <Helper type="neutral">
+                A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
+            </Helper>
+        </FormList>
+
+        <svelte:fragment slot="footer">
+            <Button submit {disabled}>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>

src/lib/components/permissions/index.ts

@@ -0,0 +1 @@
+export { default as Permissions } from './permissions.svelte';