sveltacular 0.0.43 → 0.0.45

package/dist/forms/info-box/info-box.svelte

@@ -1,7 +1,10 @@
-<script>import FormField from "../form-field.svelte";
+<script>import LinkIcon from "../../icons/link-icon.svelte";
+import Icon from "../../images/icon.svelte";
+import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
 export let size = "md";
 export let value;
+export let href = void 0;
 </script>
 
 <FormField {size}>
@@ -9,17 +12,45 @@ export let value;
 		<FormLabel><slot /></FormLabel>
 	{/if}
 	<div class="input">
-		{value}
+		{#if href}
+			<span class="icon">
+				<LinkIcon />
+			</span>
+			<a {href} class="text">{value}</a>
+		{:else}
+			<span class="text">{value}</span>
+		{/if}
 	</div>
 </FormField>
 
-<style>
-	.input {
-		background-color: transparent;
-		line-height: 2rem;
-		font-size: 1rem;
-		width: 100%;
-		padding-left: 1rem;
-		border-bottom: solid 1px var(--form-input-border, black);
-	}
-</style>
+<style>.input {
+  background-color: var(--form-input-disabled-bg, #ccc);
+  color: var(--form-input-fg, #000);
+  font-size: 1rem;
+  width: 100%;
+  padding-left: 0.5rem;
+  border: solid 1px var(--form-input-border, black);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+}
+.input .icon {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  position: relative;
+}
+.input .text {
+  line-height: 2rem;
+  flex-grow: 1;
+  font-size: 1rem;
+}
+.input a {
+  color: var(--form-input-fg, #000);
+  text-decoration: none;
+  display: block;
+}
+.input a:hover {
+  text-decoration: underline;
+}</style>

package/dist/forms/info-box/info-box.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         size?: FormFieldSizeOptions | undefined;
         value: string;
+        href?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/generic/notice/notice.svelte

@@ -2,7 +2,7 @@
 const dispatch = createEventDispatcher();
 export let title = void 0;
 export let style = "info";
-export let size = "full";
+export let size = "md";
 export let dismissable = false;
 let visible = true;
 let fading = false;
@@ -54,9 +54,9 @@ const onClick = (e) => {
   max-width: 100%;
   padding: 1rem;
   border-radius: 0.2rem;
-  border: 2px solid var(--base-fg, black);
-  background: var(--base-bg, white);
-  color: var(--base-fg, black);
+  border: 2px solid var(--base-bg, black);
+  background: var(--base-fg, white);
+  color: var(--base-bg, black);
   position: relative;
   opacity: 1;
   transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
@@ -101,11 +101,12 @@ const onClick = (e) => {
   color: rgb(100, 0, 0);
   border-color: rgb(218, 40, 40);
 }
-.notice.xl {
-  width: 60rem;
+.notice.xl .icon {
+  width: 3rem;
+  min-width: 3rem;
 }
-.notice.lg {
-  width: 40rem;
+.notice.xl .content {
+  font-size: 1.15rem;
 }
 .notice.lg .icon {
   width: 2.5rem;
@@ -115,7 +116,6 @@ const onClick = (e) => {
   font-size: 0.95rem;
 }
 .notice.md {
-  width: 25rem;
   border-width: 1px;
   border-radius: 3px;
 }
@@ -127,7 +127,6 @@ const onClick = (e) => {
   font-size: 0.85rem;
 }
 .notice.sm {
-  width: 15rem;
   border-width: 1px;
   border-radius: 2px;
 }

package/dist/generic/notice/notice.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         title?: string | undefined;
         style?: ("outline" | "attention" | "success" | "error" | "info") | undefined;
-        size?: ("sm" | "md" | "lg" | "xl" | "full") | undefined;
+        size?: ("sm" | "md" | "lg" | "xl") | undefined;
         dismissable?: boolean | undefined;
     };
     events: {

package/dist/icons/link-icon.svelte

@@ -0,0 +1,15 @@
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 19 19"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"
+	/>
+</svg>

package/dist/icons/link-icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LinkIconProps */
+/** @typedef {typeof __propDef.events}  LinkIconEvents */
+/** @typedef {typeof __propDef.slots}  LinkIconSlots */
+export default class LinkIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LinkIconProps = typeof __propDef.props;
+export type LinkIconEvents = typeof __propDef.events;
+export type LinkIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/navigation/pagination/pagination.svelte

@@ -2,6 +2,8 @@
 export let currentPage = 1;
 export let totalPages = 1;
 export let align = "center";
+export let style = "default";
+export let size = "md";
 const dispatch = createEventDispatcher();
 const changePage = (page) => {
   if (page < 1 || page > totalPages)
@@ -31,79 +33,97 @@ $:
   showLast = currentPage < totalPages - 3;
 </script>
 
-<nav class={align}>
+<nav class="{align} {style} {size}">
 	{#if currentPage > 1}
-		<button on:click={() => changePage(currentPage - 1)} class="previous">Previous</button>
+		<button on:click={() => changePage(currentPage - 1)} class="previous page">Previous</button>
 	{/if}
 	{#if showFirst}
-		<button on:click={() => changePage(1)} class="first">1</button>
-		<div class="ellipsis">...</div>
+		<button on:click={() => changePage(1)} class="first page">1</button>
+		<div class="ellipsis page">···</div>
 	{/if}
 	{#each previousPages as page}
-		<button on:click={() => changePage(page)}>{page}</button>
+		<button on:click={() => changePage(page)} class="pre page">{page}</button>
 	{/each}
-	<div class="current">{currentPage}</div>
+	<div class="current page">{currentPage}</div>
 	{#each nextPages as page}
-		<button on:click={() => changePage(page)}>{page}</button>
+		<button on:click={() => changePage(page)} class="pro numbered page">{page}</button>
 	{/each}
 	{#if showLast}
-		<div class="ellipsis">...</div>
-		<button on:click={() => changePage(totalPages)} class="last">{totalPages}</button>
+		<div class="ellipsis page">···</div>
+		<button on:click={() => changePage(totalPages)} class="last page">{totalPages}</button>
 	{/if}
 	{#if currentPage < totalPages}
-		<button on:click={() => changePage(currentPage + 1)} class="next">Next</button>
+		<button on:click={() => changePage(currentPage + 1)} class="next page">Next</button>
 	{/if}
 </nav>
 
 <style>nav {
   display: flex;
+  flex-direction: row;
+  gap: 0.2rem;
   align-items: center;
   justify-content: center;
-  gap: 0rem;
 }
-nav button {
-  appearance: none;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: 1rem;
-  line-height: 1.4rem;
-  height: 1.5rem;
+nav .page {
   border: none;
-  cursor: pointer;
-  background-color: var(--form-input-background, white);
-  color: var(--form-input-text, black);
-}
-nav button:hover {
-  background-color: var(--form-input-border, black);
-  color: var(--form-input-background, white);
+  background: none;
+  margin: 0;
+  color: var(--base-fg, #ccc);
+  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
 }
-nav button.previous {
-  border-radius: 0.5rem 0 0 0.5rem;
-  border-right: solid 1px var(--form-input-border, black);
-}
-nav button.next {
-  border-radius: 0 0.5rem 0.5rem 0;
-  border-left: solid 1px var(--form-input-border, black);
-}
-nav .ellipsis {
-  height: 1.5rem;
-  font-size: 1rem;
-  line-height: 1rem;
-  padding-left: 0.1rem;
-  padding-right: 0.1rem;
-  background-color: var(--form-input-background, white);
-  color: var(--form-input-text, black);
+nav button {
+  cursor: pointer;
 }
 nav .current {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--form-input-border, black);
-  border-radius: 0.5rem;
-  background-color: var(--form-input-background, white);
-  color: var(--form-input-text, black);
+  font-weight: 700;
 }
 nav.start {
   justify-content: flex-start;
 }
 nav.end {
   justify-content: flex-end;
+}
+nav.sm .page {
+  font-size: 0.75rem;
+  padding: 0.5rem 0.65rem 0.5rem 0.65rem;
+}
+nav.sm .current {
+  font-size: 0.95rem;
+}
+nav.md .page {
+  font-size: 0.85rem;
+  padding: 0.5rem 0.65rem 0.5rem 0.65rem;
+}
+nav.md .current {
+  font-size: 1.05rem;
+}
+nav.lg .page {
+  font-size: 0.95rem;
+  padding: 0.5rem 0.65rem 0.5rem 0.65rem;
+}
+nav.lg .current {
+  font-size: 1.15rem;
+}
+nav.xl .page {
+  font-size: 1.05rem;
+  padding: 0.5rem 0.65rem 0.5rem 0.65rem;
+}
+nav.xl .current {
+  font-size: 1.25rem;
+}
+
+nav.flat button:hover {
+  color: var(--form-input-bg, #fff);
+  background: var(--form-input-fg, #000);
+  border-radius: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  nav {
+    gap: 0rem;
+  }
+  nav .pre,
+  nav .pro {
+    display: none;
+  }
 }</style>

package/dist/navigation/pagination/pagination.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         currentPage?: number | undefined;
         totalPages?: number | undefined;
         align?: "center" | "end" | "start" | undefined;
+        style?: "default" | "flat" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | undefined;
     };
     events: {
         page: CustomEvent<number>;

package/dist/navigation/wizard/wizard-step.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, onDestroy } from "svelte";
+<script>import { getContext } from "svelte";
 import Notice from "../../generic/notice/notice.svelte";
 const wizard = getContext("wizard");
 const state = wizard.state;
@@ -14,9 +14,7 @@ $:
 <div class="step {isCurrentStep ? 'current' : ''}">
 	{#if errors.length}
 		<div class="errors">
-			{#each errors as error}
-				<Notice style="error">{error}</Notice>
-			{/each}
+			<Notice style="error" size="md">{errors.join(' ')}</Notice>
 		</div>
 	{/if}
 	<slot />

package/dist/navigation/wizard/wizard.svelte

@@ -40,9 +40,11 @@ const validate = async (callback) => {
 const next = async () => {
   if (currentStep >= Object.values(steps).length || disabled)
     return;
-  const errors2 = await validate(() => onNext(currentStep));
-  if (errors2.length)
-    return publish();
+  if (currentStep) {
+    const errors2 = await validate(() => onNext(currentStep));
+    if (errors2.length)
+      return publish();
+  }
   currentStep++;
   dispatch("next", currentStep);
   publish();

package/dist/tables/data-grid.svelte

@@ -10,8 +10,8 @@ import TableRow from "./table-row.svelte";
 import Table from "./table.svelte";
 import Empty from "../generic/empty/empty.svelte";
 import FolderOpenIcon from "../icons/folder-open-icon.svelte";
+import Pagination from "../navigation/pagination/pagination.svelte";
 import Loading from "../placeholders/loading.svelte";
-import Text from "../typography/text.svelte";
 import TableCaption from "./table-caption.svelte";
 export let caption = "";
 export let rows = void 0;
@@ -19,6 +19,7 @@ export let cols;
 export let pagination = void 0;
 export let editRow = void 0;
 export let deleteRow = void 0;
+export let onPageChange = null;
 const getColType = (col) => {
   if (col.type)
     return col.type;
@@ -42,12 +43,37 @@ const format = (row, key) => {
     return col.format(row, key);
   return row[key];
 };
+const calculateTotalPages = () => {
+  if (!pagination || !rows)
+    return 1;
+  const totalRows = Math.max(pagination.total || rows.length);
+  return Math.ceil(totalRows / pagination.perPage);
+};
+const changePage = async (e) => {
+  pagination = { page: e.detail, perPage: pagination?.perPage || 5 };
+  if (onPageChange) {
+    rows = await onPageChange(pagination);
+  }
+};
+const filterRows = () => {
+  if (!rows?.length || !pagination)
+    return rows;
+  if (onPageChange)
+    return rows;
+  const currentPage = pagination.page || 1;
+  const perPage = pagination.perPage || 5;
+  const startIndex = currentPage * perPage - perPage;
+  const endIndex = startIndex + perPage;
+  return rows.filter((_row, index) => index >= startIndex && index < endIndex);
+};
 $:
   hasActionRow = editRow || deleteRow;
 $:
   colCount = Math.max(1, cols.filter((col) => !col.hide).length) + (hasActionRow ? 1 : 0);
 $:
-  totalPages = pagination && rows ? Math.ceil((pagination.total || rows.length) / pagination.perPage) : 1;
+  totalPages = pagination && rows ? calculateTotalPages() : 1;
+$:
+  filteredRows = rows && pagination ? filterRows() : rows;
 </script>
 
 <Table>
@@ -58,7 +84,7 @@ $:
 		<TableHeaderRow>
 			{#each cols as col}
 				{#if !col.hide}
-					<TableHeaderCell type={getColType(col)}>{col.label}</TableHeaderCell>
+					<TableHeaderCell type={getColType(col)} width={col.width}>{col.label}</TableHeaderCell>
 				{/if}
 			{/each}
 			{#if hasActionRow}
@@ -67,7 +93,7 @@ $:
 		</TableHeaderRow>
 	</TableHeader>
 	<TableBody>
-		{#if !rows?.length}
+		{#if !filteredRows?.length}
 			<TableRow>
 				<TableCell colspan={colCount}>
 					<div class="empty">
@@ -82,11 +108,11 @@ $:
 				</TableCell>
 			</TableRow>
 		{:else}
-			{#each rows as row}
+			{#each filteredRows as row}
 				<TableRow>
 					{#each cols as col}
 						{#if !col.hide}
-							<TableCell type={col.type || typeof row[col.key]}>
+							<TableCell type={col.type || typeof row[col.key]} width={col.width}>
 								{#if col.link}
 									<a href={col.link(row, col.key)}>{format(row, col.key)}</a>
 								{:else}
@@ -113,9 +139,14 @@ $:
 		<TableFooter>
 			<TableFooterRow>
 				<TableFooterCell colspan={colCount}>
-					<Text transform="uppercase">
-						Page {pagination.page} of {totalPages}
-					</Text>
+					<Pagination
+						currentPage={pagination.page}
+						{totalPages}
+						style="flat"
+						size="sm"
+						align="center"
+						on:page={changePage}
+					/>
 				</TableFooterCell>
 			</TableFooterRow>
 		</TableFooter>

package/dist/tables/data-grid.svelte.d.ts

@@ -1,13 +1,16 @@
 import { SvelteComponent } from "svelte";
-import type { DataCol, DataRow, Pagination } from '../types/data.js';
+import type { DataCol, DataRow, PaginationProperties } from '../types/data.js';
 declare const __propDef: {
     props: {
         caption?: string | undefined;
         rows?: DataRow[] | undefined;
         cols: DataCol[];
-        pagination?: Pagination | undefined;
+        pagination?: PaginationProperties | undefined;
         editRow?: ((row: DataRow) => unknown) | undefined;
         deleteRow?: ((row: DataRow) => unknown) | undefined;
+        /**
+             * Handle page change, which should return the new filtered/fetched rows.
+             */ onPageChange?: ((pagination: PaginationProperties) => Promise<DataRow[]>) | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/tables/table-cell.svelte

@@ -1,13 +1,19 @@
 <script>export let colspan = 1;
 export let type = void 0;
+export let width = void 0;
+$:
+  styleProperties = [
+    `text-align: ${type === "currency" || type === "number" ? "right" : type === "boolean" ? "center" : "left"}`,
+    `width: ${width ? width : "auto"}`
+  ];
 </script>
 
-<td {colspan} class={type}>
+<td {colspan} class={type} style={styleProperties.join('; ')}>
 	<slot />
 </td>
 
 <style>td {
-  padding: 0.5rem;
+  padding: 0.25rem;
   font-size: 1rem;
 }
 td.currency, td.number {

package/dist/tables/table-cell.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         colspan?: number | undefined;
         type?: string | undefined;
+        width?: number | string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/tables/table-footer-cell.svelte

@@ -2,7 +2,9 @@
 </script>
 
 <td {colspan}>
-	<slot />
+	<div>
+		<slot />
+	</div>
 </td>
 
 <style>
@@ -12,4 +14,10 @@
 		font-family: sans-serif;
 		text-shadow: 1px 1px 1px black;
 	}
+
+	div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>

package/dist/tables/table-header-cell.svelte

@@ -1,8 +1,16 @@
 <script>export let colspan = 1;
 export let type = void 0;
+export let width = void 0;
+$:
+  styleProperties = [
+    `text-align: ${type === "currency" || type === "number" ? "right" : type === "boolean" ? "center" : "left"}`,
+    "text-overflow: ellipsis",
+    "overflow: hidden",
+    `width: ${width ? width : "auto"}`
+  ];
 </script>
 
-<th {colspan} class={type}>
+<th {colspan} class={type} style={styleProperties.join('; ')}>
 	<slot />
 </th>
 

package/dist/tables/table-header-cell.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         colspan?: number | undefined;
         type?: string | undefined;
+        width?: number | string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/types/data.d.ts

@@ -6,8 +6,9 @@ export type DataCol<T extends DataRow = DataRow> = {
     format?: (row: T, key: keyof T) => string;
     link?: (row: T, key: keyof T) => string;
     hide?: boolean;
+    width?: number | string;
 };
-export type Pagination = {
+export type PaginationProperties = {
     page: number;
     perPage: number;
     total?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.43",
+	"version": "0.0.45",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",