Merge pull request #9 from appwrite/feat-route-transition

draft: route transition and global cover component

Author: TorstenDittmann

package-lock.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",

package.json

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

src/lib/components/card.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/empty.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/modal.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/components/pagination.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/forms/button.svelte

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

src/lib/elements/table/cellHead.svelte

@@ -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/helpers/date.ts

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