sveltacular 0.0.48 → 0.0.50

package/dist/navigation/side-bar/side-bar.svelte

@@ -1,14 +1,14 @@
 <script>import Overlay from "../../generic/overlay.svelte";
 export let open = false;
-</script>
-
-<div class:open>
-	<Overlay show={open} />
-	<aside>
-		<slot />
-	</aside>
-</div>
-
+</script>
+
+<div class:open>
+	<Overlay show={open} />
+	<aside>
+		<slot />
+	</aside>
+</div>
+
 <style>div aside {
   width: 300px;
   padding: 0;
@@ -33,4 +33,4 @@ div.open {
 }
 div.open aside {
   left: 0;
-}</style>
+}</style>

package/dist/navigation/tabs/tab-group.svelte

@@ -19,25 +19,25 @@ const ctx = {
   register
 };
 setContext(tabContext, ctx);
-</script>
-
-<section class="tab-group {style}">
-	<div class="tab-head">
-		<nav>
-			{#each $tabs as tab}
-				<li class={$active == tab.id ? 'active' : 'inactive'}>
-					<button on:click={() => selectTab(tab.id)}>
-						{tab.name}
-					</button>
-				</li>
-			{/each}
-		</nav>
-	</div>
-	<div class="tab-content">
-		<slot />
-	</div>
-</section>
-
+</script>
+
+<section class="tab-group {style}">
+	<div class="tab-head">
+		<nav>
+			{#each $tabs as tab}
+				<li class={$active == tab.id ? 'active' : 'inactive'}>
+					<button on:click={() => selectTab(tab.id)}>
+						{tab.name}
+					</button>
+				</li>
+			{/each}
+		</nav>
+	</div>
+	<div class="tab-content">
+		<slot />
+	</div>
+</section>
+
 <style>.tab-head {
   height: 2rem;
   position: relative;
@@ -154,4 +154,4 @@ setContext(tabContext, ctx);
 .overline .inactive button {
   border-style: none;
   color: var(--tab-overline-fg, rgb(180, 180, 180));
-}</style>
+}</style>

package/dist/navigation/tabs/tab.svelte

@@ -1,7 +1,9 @@
 <script>import { createEventDispatcher, getContext, onDestroy } from "svelte";
 import { tabContext } from "./tab-context.js";
-import { uniqueId } from "../../index.js";
+import { navigateTo, uniqueId } from "../../index.js";
+import Loading from "../../placeholders/loading.svelte";
 export let title;
+export let href = void 0;
 export let active = false;
 const dispatch = createEventDispatcher();
 const ctx = getContext(tabContext);
@@ -10,19 +12,27 @@ const id = uniqueId();
 ctx.register(id, title, active);
 const unsubscribe = ctx.active.subscribe((selectedId) => {
   active = selectedId === id;
+  if (active && href) {
+    console.log("Navigating to", href);
+    navigateTo(href);
+  }
 });
 onDestroy(() => unsubscribe());
-</script>
-
-<article class:active>
-	{#if active}
-		<slot />
-	{/if}
-</article>
-
+</script>
+
+<article class:active>
+	{#if active}
+		{#if $$slots.default}
+			<slot />
+		{:else}
+			<Loading />
+		{/if}
+	{/if}
+</article>
+
 <style>article {
   display: none;
 }
 article.active {
   display: block;
-}</style>
+}</style>

package/dist/navigation/tabs/tab.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         title: string;
+        href?: string | undefined;
         active?: boolean | undefined;
     };
     events: {

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

@@ -9,17 +9,17 @@ $:
   isCurrentStep = $state.currentStep === step;
 $:
   errors = $state.errors;
-</script>
-
-<div class="step {isCurrentStep ? 'current' : ''}">
-	{#if errors.length}
-		<div class="errors">
-			<Notice style="error" size="md">{errors.join(' ')}</Notice>
-		</div>
-	{/if}
-	<slot />
-</div>
-
+</script>
+
+<div class="step {isCurrentStep ? 'current' : ''}">
+	{#if errors.length}
+		<div class="errors">
+			<Notice style="error" size="md">{errors.join(' ')}</Notice>
+		</div>
+	{/if}
+	<slot />
+</div>
+
 <style>.step {
   display: none;
 }
@@ -31,4 +31,4 @@ $:
   display: flex;
   flex-direction: column;
   gap: 1rem;
-}</style>
+}</style>

package/dist/navigation/wizard/wizard.svelte

@@ -82,32 +82,32 @@ $:
   subtitle = steps[currentStep];
 $:
   total = Object.values(steps).length;
-</script>
-
-<section class:disabled>
-	<Header {title} {subtitle} {level} />
-	<div class="content">
-		<slot />
-	</div>
-	<footer>
-		<div>
-			{#if !isFirstStep}
-				<Button type="button" style="secondary" on:click={previous} {disabled}>Previous</Button>
-			{/if}
-		</div>
-		<div>
-			<div>Step {currentStep} of {total}</div>
-		</div>
-		<div>
-			{#if isLastStep}
-				<Button type="submit" style="primary" on:click={done} {disabled}>Done</Button>
-			{:else}
-				<Button type="button" style="primary" on:click={next} {disabled}>Next</Button>
-			{/if}
-		</div>
-	</footer>
-</section>
-
+</script>
+
+<section class:disabled>
+	<Header {title} {subtitle} {level} />
+	<div class="content">
+		<slot />
+	</div>
+	<footer>
+		<div>
+			{#if !isFirstStep}
+				<Button type="button" style="secondary" on:click={previous} {disabled}>Previous</Button>
+			{/if}
+		</div>
+		<div>
+			<div>Step {currentStep} of {total}</div>
+		</div>
+		<div>
+			{#if isLastStep}
+				<Button type="submit" style="primary" on:click={done} {disabled}>Done</Button>
+			{:else}
+				<Button type="button" style="primary" on:click={next} {disabled}>Next</Button>
+			{/if}
+		</div>
+	</footer>
+</section>
+
 <style>section.disabled {
   opacity: 0.5;
 }
@@ -121,4 +121,4 @@ footer {
 }
 footer div {
   width: 100%;
-}</style>
+}</style>

package/dist/placeholders/loading.svelte

@@ -1,12 +1,12 @@
 <script>export let type = "spinner";
-</script>
-
-<div class={type}>
-	<span>
-		<slot />
-	</span>
-</div>
-
+</script>
+
+<div class={type}>
+	<span>
+		<slot />
+	</span>
+</div>
+
 <style>div {
   text-align: center;
 }
@@ -53,4 +53,4 @@ div.block {
     opacity: 1;
     transform: scale(1);
   }
-}</style>
+}</style>

package/dist/placeholders/progress.svelte

@@ -1,12 +1,12 @@
 <script>export let value = 0;
-</script>
-
-<div class="progress-bar" style="--progress-value: {value}%">
-	<div class="progress">
-		<div class="progress-value">{value}%</div>
-	</div>
-</div>
-
+</script>
+
+<div class="progress-bar" style="--progress-value: {value}%">
+	<div class="progress">
+		<div class="progress-value">{value}%</div>
+	</div>
+</div>
+
 <style>.progress-bar {
   height: 2rem;
   background-color: var(--base-color-fg, #ccc);
@@ -33,4 +33,4 @@
   line-height: 1.5rem;
   padding: 0 0.5rem;
   text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
-}</style>
+}</style>

package/dist/placeholders/skeleton-text.svelte

@@ -3,16 +3,16 @@ export let min = 50;
 export let max = 100;
 $:
   width = randomInt(min, max);
-</script>
-
-<div style="width: {width}%" />
-
-<style>
-	div {
-		height: 1rem;
-		background-color: var(--base-color-fg, #ccc);
-		opacity: 0.5;
-		border-radius: 1rem;
-		margin-bottom: 1rem;
-	}
-</style>
+</script>
+
+<div style="width: {width}%" />
+
+<style>
+	div {
+		height: 1rem;
+		background-color: var(--base-color-fg, #ccc);
+		opacity: 0.5;
+		border-radius: 1rem;
+		margin-bottom: 1rem;
+	}
+</style>

package/dist/tables/data-grid.svelte

@@ -74,85 +74,85 @@ $:
   totalPages = pagination && rows ? calculateTotalPages() : 1;
 $:
   filteredRows = rows && pagination ? filterRows() : rows;
-</script>
-
-<Table>
-	{#if caption}
-		<TableCaption>{caption}</TableCaption>
-	{/if}
-	<TableHeader>
-		<TableHeaderRow>
-			{#each cols as col}
-				{#if !col.hide}
-					<TableHeaderCell type={getColType(col)} width={col.width}>{col.label}</TableHeaderCell>
-				{/if}
-			{/each}
-			{#if hasActionRow}
-				<TableHeaderCell type="string" />
-			{/if}
-		</TableHeaderRow>
-	</TableHeader>
-	<TableBody>
-		{#if !filteredRows?.length}
-			<TableRow>
-				<TableCell colspan={colCount}>
-					<div class="empty">
-						{#if rows === undefined}
-							<Loading />
-						{:else}
-							<Empty>
-								<FolderOpenIcon />
-							</Empty>
-						{/if}
-					</div>
-				</TableCell>
-			</TableRow>
-		{:else}
-			{#each filteredRows as row}
-				<TableRow>
-					{#each cols as col}
-						{#if !col.hide}
-							<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}
-									{format(row, col.key)}
-								{/if}
-							</TableCell>
-						{/if}
-					{/each}
-					{#if hasActionRow}
-						<TableCell type="actions">
-							{#if editRow}
-								<button type="button" on:click={() => clickEdit(row)}>Edit</button>
-							{/if}
-							{#if deleteRow}
-								<button type="button" on:click={() => clickDelete(row)}>Delete</button>
-							{/if}
-						</TableCell>
-					{/if}
-				</TableRow>
-			{/each}
-		{/if}
-	</TableBody>
-	{#if pagination}
-		<TableFooter>
-			<TableFooterRow>
-				<TableFooterCell colspan={colCount}>
-					<Pagination
-						currentPage={pagination.page}
-						{totalPages}
-						style="flat"
-						size="sm"
-						align="center"
-						on:page={changePage}
-					/>
-				</TableFooterCell>
-			</TableFooterRow>
-		</TableFooter>
-	{/if}
-</Table>
-
+</script>
+
+<Table>
+	{#if caption}
+		<TableCaption>{caption}</TableCaption>
+	{/if}
+	<TableHeader>
+		<TableHeaderRow>
+			{#each cols as col}
+				{#if !col.hide}
+					<TableHeaderCell type={getColType(col)} width={col.width}>{col.label}</TableHeaderCell>
+				{/if}
+			{/each}
+			{#if hasActionRow}
+				<TableHeaderCell type="string" />
+			{/if}
+		</TableHeaderRow>
+	</TableHeader>
+	<TableBody>
+		{#if !filteredRows?.length}
+			<TableRow>
+				<TableCell colspan={colCount}>
+					<div class="empty">
+						{#if rows === undefined}
+							<Loading />
+						{:else}
+							<Empty>
+								<FolderOpenIcon />
+							</Empty>
+						{/if}
+					</div>
+				</TableCell>
+			</TableRow>
+		{:else}
+			{#each filteredRows as row}
+				<TableRow>
+					{#each cols as col}
+						{#if !col.hide}
+							<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}
+									{format(row, col.key)}
+								{/if}
+							</TableCell>
+						{/if}
+					{/each}
+					{#if hasActionRow}
+						<TableCell type="actions">
+							{#if editRow}
+								<button type="button" on:click={() => clickEdit(row)}>Edit</button>
+							{/if}
+							{#if deleteRow}
+								<button type="button" on:click={() => clickDelete(row)}>Delete</button>
+							{/if}
+						</TableCell>
+					{/if}
+				</TableRow>
+			{/each}
+		{/if}
+	</TableBody>
+	{#if pagination}
+		<TableFooter>
+			<TableFooterRow>
+				<TableFooterCell colspan={colCount}>
+					<Pagination
+						currentPage={pagination.page}
+						{totalPages}
+						style="flat"
+						size="sm"
+						align="center"
+						on:page={changePage}
+					/>
+				</TableFooterCell>
+			</TableFooterRow>
+		</TableFooter>
+	{/if}
+</Table>
+
 <style>.empty {
   padding: 2rem;
   text-transform: uppercase;
@@ -176,4 +176,4 @@ button {
 }
 button:hover {
   text-decoration: underline;
-}</style>
+}</style>

package/dist/tables/table-body.svelte

@@ -1,3 +1,3 @@
-<tbody>
-	<slot />
-</tbody>
+<tbody>
+	<slot />
+</tbody>

package/dist/tables/table-caption.svelte

@@ -1,7 +1,7 @@
-<caption>
-	<slot />
-</caption>
-
+<caption>
+	<slot />
+</caption>
+
 <style>caption {
   padding: 0.5rem 0.75rem;
   font-weight: 600;
@@ -11,4 +11,4 @@
   text-transform: uppercase;
   font-family: sans-serif;
   text-shadow: 1px 1px 1px black;
-}</style>
+}</style>

package/dist/tables/table-cell.svelte

@@ -3,12 +3,12 @@ export let type = void 0;
 export let width = void 0;
 $:
   styleProperties = [`width: ${width ? width : "auto"}`];
-</script>
-
-<td {colspan} class={type} style={styleProperties.join('; ')}>
-	<slot />
-</td>
-
+</script>
+
+<td {colspan} class={type} style={styleProperties.join('; ')}>
+	<slot />
+</td>
+
 <style>td {
   padding-left: 0.5rem;
   font-size: 0.9rem;
@@ -26,4 +26,4 @@ td.actions {
 }
 td:last-child {
   padding-right: 0.5rem;
-}</style>
+}</style>

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

@@ -1,22 +1,22 @@
 <script>export let colspan = 1;
-</script>
-
-<td {colspan}>
-	<div>
-		<slot />
-	</div>
-</td>
-
-<style>
-	td {
-		font-size: 0.8rem;
-		font-family: sans-serif;
-		text-shadow: 1px 1px 1px black;
-	}
-
-	div {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
+</script>
+
+<td {colspan}>
+	<div>
+		<slot />
+	</div>
+</td>
+
+<style>
+	td {
+		font-size: 0.8rem;
+		font-family: sans-serif;
+		text-shadow: 1px 1px 1px black;
+	}
+
+	div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

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

@@ -1,3 +1,3 @@
-<tr>
-	<slot />
-</tr>
+<tr>
+	<slot />
+</tr>

package/dist/tables/table-footer.svelte

@@ -1,13 +1,13 @@
-<tfoot>
-	<slot />
-</tfoot>
-
-<style>
-	tfoot {
-		background: var(--table-footer-bg, #333);
-		color: var(--table-footer-fg, #fff);
-		border-top: solid 0.1rem var(--table-footer-border, #000);
-		border-bottom: solid 0.1rem var(--table-footer-border, #000);
-		font-size: 0.8rem;
-	}
-</style>
+<tfoot>
+	<slot />
+</tfoot>
+
+<style>
+	tfoot {
+		background: var(--table-footer-bg, #333);
+		color: var(--table-footer-fg, #fff);
+		border-top: solid 0.1rem var(--table-footer-border, #000);
+		border-bottom: solid 0.1rem var(--table-footer-border, #000);
+		font-size: 0.8rem;
+	}
+</style>

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

@@ -8,12 +8,12 @@ $:
     "overflow: hidden",
     `width: ${width ? width : "auto"}`
   ];
-</script>
-
-<th {colspan} class={type} style={styleProperties.join('; ')}>
-	<slot />
-</th>
-
+</script>
+
+<th {colspan} class={type} style={styleProperties.join('; ')}>
+	<slot />
+</th>
+
 <style>th {
   padding-left: 0.5rem;
   font-size: 0.8rem;
@@ -33,4 +33,4 @@ th.boolean {
 }
 th:last-child {
   padding-right: 0.5rem;
-}</style>
+}</style>

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

@@ -1,4 +1,4 @@
-<tr>
-	<slot />
-</tr>
-
+<tr>
+	<slot />
+</tr>
+