From a640703f2da8815dc26ad1600a6f206be1624379 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 1 Jun 2022 22:10:32 +0200
Subject: feat: Initial after clean slate

---
 apps/web-shared/src/components/table/index.ts      |  15 +++
 .../src/components/table/paginator.svelte          | 101 +++++++++++++++++++++
 apps/web-shared/src/components/table/table.svelte  |   3 +
 apps/web-shared/src/components/table/tbody.svelte  |   3 +
 apps/web-shared/src/components/table/tcell.svelte  |  23 +++++
 apps/web-shared/src/components/table/thead.svelte  |  10 ++
 apps/web-shared/src/components/table/trow.svelte   |   6 ++
 7 files changed, 161 insertions(+)
 create mode 100644 apps/web-shared/src/components/table/index.ts
 create mode 100644 apps/web-shared/src/components/table/paginator.svelte
 create mode 100644 apps/web-shared/src/components/table/table.svelte
 create mode 100644 apps/web-shared/src/components/table/tbody.svelte
 create mode 100644 apps/web-shared/src/components/table/tcell.svelte
 create mode 100644 apps/web-shared/src/components/table/thead.svelte
 create mode 100644 apps/web-shared/src/components/table/trow.svelte

(limited to 'apps/web-shared/src/components/table')

diff --git a/apps/web-shared/src/components/table/index.ts b/apps/web-shared/src/components/table/index.ts
new file mode 100644
index 0000000..8390c0e
--- /dev/null
+++ b/apps/web-shared/src/components/table/index.ts
@@ -0,0 +1,15 @@
+import TablePaginator from "./paginator.svelte";
+import Table from "./table.svelte";
+import THead from "./thead.svelte";
+import TBody from "./tbody.svelte";
+import TCell from "./tcell.svelte";
+import TRow from "./trow.svelte";
+
+export {
+    TablePaginator,
+    Table,
+    THead,
+    TBody,
+    TCell,
+    TRow
+};
diff --git a/apps/web-shared/src/components/table/paginator.svelte b/apps/web-shared/src/components/table/paginator.svelte
new file mode 100644
index 0000000..53c6392
--- /dev/null
+++ b/apps/web-shared/src/components/table/paginator.svelte
@@ -0,0 +1,101 @@
+<script>
+	import {createEventDispatcher, onMount} from "svelte";
+	import {restrict_input_to_numbers} from "$shared/lib/helpers";
+
+	const dispatch = createEventDispatcher();
+	export let page = 1;
+	export let pageCount = 1;
+	let prevCount = page;
+	let canIncrement = false;
+	let canDecrement = false;
+	$: canIncrement = page < pageCount;
+	$: canDecrement = page > 1;
+
+	onMount(() => {
+		restrict_input_to_numbers(document.querySelector("#curr-page"));
+	});
+
+	function increment() {
+		if (canIncrement) {
+			page++;
+		}
+	}
+
+	function decrement() {
+		if (canDecrement) {
+			page--;
+		}
+	}
+
+	$: if (page) {
+		handle_change();
+	}
+
+	function handle_change() {
+		if (page === prevCount) {
+			return;
+		}
+		prevCount = page;
+		if (page > pageCount) {
+			page = pageCount;
+		}
+		dispatch("value_change", {
+			newValue: page,
+		});
+	}
+</script>
+
+<nav class="pagination"
+     aria-label="Pagination">
+    <ul class="pagination__list flex flex-wrap gap-xxxs justify-center justify-end@md">
+        <li>
+            <button on:click={decrement}
+                    class="reset pagination__item {canDecrement ? '' : 'c-disabled'}">
+                <svg class="icon icon--xs flip-x"
+                     viewBox="0 0 16 16"
+                ><title>Go to previous page</title>
+                    <polyline
+                            points="6 2 12 8 6 14"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                    />
+                </svg>
+            </button>
+        </li>
+
+        <li>
+            <span class="pagination__jumper flex items-center">
+                <input
+                        aria-label="Page number"
+                        class="form-control"
+                        id="curr-page"
+                        type="text"
+                        on:change={handle_change}
+                        value={page}
+                />
+                <em>of {pageCount}</em>
+            </span>
+        </li>
+
+        <li>
+            <button on:click={increment}
+                    class="reset pagination__item {canIncrement ? '' : 'c-disabled'}">
+                <svg class="icon icon--xs"
+                     viewBox="0 0 16 16"
+                ><title>Go to next page</title>
+                    <polyline
+                            points="6 2 12 8 6 14"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                    />
+                </svg>
+            </button>
+        </li>
+    </ul>
+</nav>
diff --git a/apps/web-shared/src/components/table/table.svelte b/apps/web-shared/src/components/table/table.svelte
new file mode 100644
index 0000000..4acbf37
--- /dev/null
+++ b/apps/web-shared/src/components/table/table.svelte
@@ -0,0 +1,3 @@
+<table class="int-table {$$restProps.class ?? ''}">
+    <slot/>
+</table>
diff --git a/apps/web-shared/src/components/table/tbody.svelte b/apps/web-shared/src/components/table/tbody.svelte
new file mode 100644
index 0000000..f0617fa
--- /dev/null
+++ b/apps/web-shared/src/components/table/tbody.svelte
@@ -0,0 +1,3 @@
+<tbody class="int-table__body {$$restProps.class ?? ''}">
+<slot/>
+</tbody>
diff --git a/apps/web-shared/src/components/table/tcell.svelte b/apps/web-shared/src/components/table/tcell.svelte
new file mode 100644
index 0000000..76f500f
--- /dev/null
+++ b/apps/web-shared/src/components/table/tcell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    export let thScope: "row"|"col"|"rowgroup"|"colgroup"|"";
+    export let colspan = "";
+    export let type: "th"|"td" = "td";
+    export let style;
+
+    $: shared_props = {
+        colspan: colspan || null,
+        style: style || null,
+        class: [type === "th" ? "int-table__cell--th" : "", "int-table__cell", $$restProps.class ?? ""].filter(Boolean).join(" "),
+    };
+</script>
+{#if type === "th"}
+    <th {thScope}
+        {...shared_props}>
+        <slot/>
+    </th>
+{/if}
+{#if type === "td"}
+    <td {...shared_props}>
+        <slot/>
+    </td>
+{/if}
diff --git a/apps/web-shared/src/components/table/thead.svelte b/apps/web-shared/src/components/table/thead.svelte
new file mode 100644
index 0000000..aa20bf0
--- /dev/null
+++ b/apps/web-shared/src/components/table/thead.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import TRow from "./trow.svelte";
+</script>
+
+
+<thead class="int-table__header {$$restProps.class ?? ''}">
+<TRow>
+    <slot/>
+</TRow>
+</thead>
diff --git a/apps/web-shared/src/components/table/trow.svelte b/apps/web-shared/src/components/table/trow.svelte
new file mode 100644
index 0000000..35b34bb
--- /dev/null
+++ b/apps/web-shared/src/components/table/trow.svelte
@@ -0,0 +1,6 @@
+<script>
+    export let dataId;
+</script>
+<tr class="int-table__row {$$restProps.class ?? ''}" data-id={dataId}>
+    <slot/>
+</tr>
-- 
cgit v1.3