Merge pull request #89 from appwrite/feat-layout-endpoints

draft: new layout endpoints

package.json

@@ -8,6 +8,7 @@
         "dev": "vite dev",
         "build": "vite build",
         "preview": "vite preview",
+        "sync": "svelte-kit sync",
         "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
@@ -19,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-64",
-        "@aw-labs/ui": "0.0.0-64",
+        "@aw-labs/icons": "0.0.0-66",
+        "@aw-labs/ui": "0.0.0-66",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
@@ -29,19 +30,19 @@
     },
     "devDependencies": {
         "@playwright/test": "^1.27.1",
-        "@sveltejs/adapter-static": "1.0.0-next.44",
-        "@sveltejs/kit": "1.0.0-next.516",
-        "@sveltejs/vite-plugin-svelte": "^1.0.9",
+        "@sveltejs/adapter-static": "1.0.0-next.46",
+        "@sveltejs/kit": "1.0.0-next.525",
+        "@sveltejs/vite-plugin-svelte": "^1.1.0",
         "@testing-library/dom": "^8.19.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/svelte": "3.1.3",
+        "@testing-library/svelte": "^3.2.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/gtag.js": "^0.0.12",
         "@types/prismjs": "^1.26.0",
-        "@typescript-eslint/eslint-plugin": "^5.40.0",
-        "@typescript-eslint/parser": "^5.40.0",
+        "@typescript-eslint/eslint-plugin": "^5.41.0",
+        "@typescript-eslint/parser": "^5.41.0",
         "@vitest/ui": "^0.24.3",
-        "eslint": "^8.25.0",
+        "eslint": "^8.26.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
@@ -54,7 +55,7 @@
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.8.4",
-        "vite": "^3.1.8",
+        "vite": "^3.2.1",
         "vitest": "^0.24.3"
     },
     "type": "module",

src/lib/actions/analytics.ts

@@ -3,21 +3,23 @@ import type { Action } from 'svelte/action';
 export type AnalyticsActionParam = {
     name: string;
     action: string;
+    category?: string;
+    label?: string;
     parameters?: Record<string, string>;
     event?: keyof HTMLElementEventMap;
 };
 
-export const event: Action<HTMLElement, AnalyticsActionParam> = (node, param) => {
+export const event: Action<HTMLElement, Partial<AnalyticsActionParam>> = (node, param) => {
     if (!isTrackingAllowed()) {
         return;
     }
 
-    node.addEventListener(param.event ?? 'click', () =>
+    node.addEventListener(param.event ?? 'click', () => {
         gtag('event', param.name, {
             ...param.parameters,
             action: param.action
-        })
-    );
+        });
+    });
 };
 
 const isTrackingAllowed = () => {

src/lib/components/dropListLink.svelte

@@ -3,10 +3,11 @@
 
     export let href: string;
     export let icon: string = null;
+    export let disabled = false;
 </script>
 
 <li class="drop-list-item" on:click on:keyup={clickOnEnter}>
-    <a {href} class="drop-button">
+    <a {href} class="drop-button" {disabled}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />

src/lib/components/dropTabsLink.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let href: string;
+    export let disabled = false;
+</script>
+
+<li class="drop-tabs-item">
+    {#if disabled}
+        <span class="drop-tabs-button is-disabled">
+            <span class="text"><slot /></span>
+        </span>
+    {:else}
+        <a class="drop-tabs-button" {href}>
+            <span class="text"><slot /></span>
+        </a>
+    {/if}
+</li>

src/lib/components/emptySearch.svelte

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