diff options
Diffstat (limited to 'apps/web-shared/src/components/table')
| -rw-r--r-- | apps/web-shared/src/components/table/index.ts | 15 | ||||
| -rw-r--r-- | apps/web-shared/src/components/table/paginator.svelte | 101 | ||||
| -rw-r--r-- | apps/web-shared/src/components/table/table.svelte | 3 | ||||
| -rw-r--r-- | apps/web-shared/src/components/table/tbody.svelte | 3 | ||||
| -rw-r--r-- | apps/web-shared/src/components/table/tcell.svelte | 23 | ||||
| -rw-r--r-- | apps/web-shared/src/components/table/thead.svelte | 10 | ||||
| -rw-r--r-- | apps/web-shared/src/components/table/trow.svelte | 6 |
7 files changed, 161 insertions, 0 deletions
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> |