draft: route transition and global cover component

package.json

@@ -19,7 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/ui": "*"
+        "@aw-labs/ui": "^0.0.0-4",
+        "@aw-labs/icons": "^0.0.0-4"
     },
     "devDependencies": {
         "@playwright/test": "^1.22.1",

src/lib/components/card.svelte

@@ -1,3 +1,3 @@
-<article class="card">
+<article class="card common-section">
     <slot />
 </article>

src/lib/components/empty.svelte

@@ -1,12 +1,11 @@
 <script>
-    import { Card } from '.';
+    export let dashed = false;
+    export let centered = false;
 </script>
 
-<Card>
-    <b>
-        <slot name="header" />
-    </b>
-    <p>
-        <slot />
-    </p>
-</Card>
+<article
+    class="card common-section u-flex u-flex-vertical"
+    class:is-border-dashed={dashed}
+    class:u-cross-center={centered}>
+    <slot />
+</article>

src/lib/components/modal.svelte

@@ -48,14 +48,14 @@
                     aria-label="Close Modal"
                     title="Close Modal"
                     on:click={closeModal}>
-                    <span class="icon-cancel" aria-hidden="true" />
+                    <span class="icon-x" aria-hidden="true" />
                 </button>
             </header>
             <div class="modal-content">
                 <slot />
             </div>
             <div class="modal-footer">
-                <div class="u-flex u-gap-10">
+                <div class="u-flex u-main-space-end u-gap-12">
                     <slot name="footer" />
                 </div>
             </div>

src/lib/components/pagination.svelte

@@ -13,6 +13,7 @@
             offset = limit * (page - 1);
             currentPage = page;
             dispatch('change');
+            pages = pagination(currentPage, totalPages);
         }
     }
 
@@ -21,36 +22,32 @@
             currentPage += 1;
             offset = limit * (currentPage - 1);
             dispatch('change');
+            pages = pagination(currentPage, totalPages);
         } else if (direction === 'prev' && currentPage > 1) {
             currentPage -= 1;
             offset = limit * (currentPage - 1);
             dispatch('change');
+            pages = pagination(currentPage, totalPages);
         }
     }
 
     let pages = pagination(currentPage, totalPages);
 
-    function pagination(current: number, total: number) {
-        let delta = 2,
-            left = current - delta,
-            right = current + delta + 1,
-            range = [],
-            rangeWithDots = [];
-
-        for (let i = 1; i <= total; i++) {
-            if (i == 1 || i == total || (i >= left && i < right)) {
-                range.push(i);
-            }
-        }
-
-        rangeWithDots = range.reduce((prev, current, index) => {
-            if (current - prev[index - 1] > delta) {
-                prev.push('...');
-            }
-            prev.push(current);
-            return prev;
-        }, []);
-        return rangeWithDots;
+    function pagination(page: number, total: number) {
+        const pagesShown = 5;
+        const start = Math.max(
+            1,
+            Math.min(page - Math.floor((pagesShown - 3) / 2), total - pagesShown + 2)
+        );
+        const end = Math.min(
+            total,
+            Math.max(page + Math.floor((pagesShown - 2) / 2), pagesShown - 1)
+        );
+        return [
+            ...(start > 2 ? [1, '...'] : start > 1 ? [1] : []),
+            ...Array.from({ length: end + 1 - start }, (_, i) => i + start),
+            ...(end < total - 1 ? ['...', total] : end < total ? [total] : [])
+        ];
     }
 </script>
 
@@ -93,4 +90,22 @@
             <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">
+            <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">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </button>
+    </nav>
 {/if}

src/lib/elements/forms/button.svelte

@@ -4,6 +4,7 @@
     export let outline = false;
     export let danger = false;
     export let disabled = false;
+    export let round = false;
     export let href: string = null;
 </script>
 
@@ -12,6 +13,7 @@
         {disabled}
         {href}
         class="button"
+        class:is-only-icon={round}
         class:is-secondary={secondary}
         class:is-outline={outline}
         class:is-danger={danger}>
@@ -22,6 +24,7 @@
         on:click
         {disabled}
         class="button"
+        class:is-only-icon={round}
         class:is-secondary={secondary}
         class:is-outline={outline}
         class:is-danger={danger}

src/lib/elements/table/cellHead.svelte

@@ -7,3 +7,9 @@
         <slot />
     </span>
 </th>
+
+<style>
+    th {
+        text-transform: uppercase;
+    }
+</style>

src/lib/helpers/date.ts

@@ -4,3 +4,16 @@ export const toLocaleDate = (timestamp: number) => {
 
     return date.toLocaleDateString('en', options);
 };
+
+export const toLocaleDateTime = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
+    };
+
+    return date.toLocaleDateString('en', options);
+};

src/lib/layout/cover.svelte

@@ -4,7 +4,7 @@
 
 <div class="top-cover" class:is-adjust-content-to-cover={adjustContentToCover}>
     <div class="container">
-        <h1 class="heading-level-1">
+        <h1 class="heading-level-2">
             <slot name="title" />
         </h1>
         <slot />

src/lib/layout/shell.svelte

@@ -1,13 +1,59 @@
 <script lang="ts">
-    import { navigating } from '$app/stores';
+    import { navigating, page } from '$app/stores';
+    import { tabs, title } from '$lib/stores/layout';
+    import { fade } from 'svelte/transition';
+    import { Cover } from '.';
 
     export let isOpen = false;
 
+    $: base = `/console/${$page.params.project}`;
+
+    let tabsList: HTMLUListElement;
+    let showLeft = false;
+    let showRight = false;
+
     navigating.subscribe(() => {
         if (isOpen) isOpen = false;
     });
+
+    const slide = (direction: 'left' | 'right') => {
+        let scrollCompleted = 0;
+        let slideVar = setInterval(() => {
+            if (direction == 'left') {
+                tabsList.scrollLeft -= 10;
+            } else {
+                tabsList.scrollLeft += 10;
+            }
+            scrollCompleted += 10;
+            if (scrollCompleted >= 100) {
+                clearInterval(slideVar);
+            }
+        }, 10);
+    };
+
+    const onScroll = () => {
+        const { offsetWidth, scrollLeft, scrollWidth } = tabsList;
+        showLeft = scrollLeft > 10;
+        showRight = scrollLeft < scrollWidth - offsetWidth - 10;
+    };
+
+    //TODO: implement this directly into onScroll
+    const throttle = (fn: () => void, delay: number) => {
+        let timeout = false;
+        return () => {
+            if (!timeout) {
+                timeout = true;
+                fn.apply(this);
+                setTimeout(() => {
+                    timeout = false;
+                }, delay);
+            }
+        };
+    };
 </script>
 
+<svelte:window on:resize={throttle(onScroll, 25)} />
+
 <main class="grid-with-side" class:is-open={isOpen}>
     <header class="main-header">
         <button
@@ -22,7 +68,50 @@
         <slot name="side" />
     </nav>
     <section class="main-content">
-        <slot />
+        <Cover>
+            <svelte:fragment slot="title">{$title}</svelte:fragment>
+            {#if $tabs.length}
+                <div class="tabs">
+                    {#if showLeft}
+                        <button
+                            class="tabs-button-scroll is-start"
+                            aria-label="Show items in start side"
+                            on:click={() => slide('left')}>
+                            <span class="icon-cheveron-left" aria-hidden="true" />
+                        </button>
+                    {/if}
+                    {#if showRight}
+                        <button
+                            class="tabs-button-scroll is-end"
+                            aria-label="Show items in end side"
+                            on:click={() => slide('right')}>
+                            <span class="icon-cheveron-right" aria-hidden="true" />
+                        </button>
+                    {/if}
+                    <ul
+                        class="tabs-list scroll-shadow-horizontal"
+                        bind:this={tabsList}
+                        on:scroll={throttle(onScroll, 25)}>
+                        {#each $tabs as tab}
+                            <li class="tabs-item">
+                                <a
+                                    class="tabs-button"
+                                    href={`${base}/${tab.href}`}
+                                    class:is-selected={$page.url.pathname ===
+                                        `${base}/${tab.href}`}>
+                                    <span class="text">{tab.title}</span>
+                                </a>
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            {/if}
+        </Cover>
+        {#key $page.routeId}
+            <div in:fade>
+                <slot />
+            </div>
+        {/key}
     </section>
 </main>
 

src/lib/stores/layout.ts

@@ -1,8 +1,9 @@
 import { writable } from 'svelte/store';
 
-export type Breadcrumb = {
-    name: string;
-    link?: string;
+export type Tab = {
+    href: string;
+    title: string;
 };
 
-export const breadcrumbs = writable<Breadcrumb[]>([]);
+export const title = writable<string>('');
+export const tabs = writable<Tab[]>([]);