sveltacular 0.0.42 → 0.0.43

package/dist/generic/empty/empty.svelte

@@ -1,7 +1,11 @@
 <script>export let text = "No data to display";
+export let size = "md";
+export let orientation = "vertical";
+export let reverse = false;
+export let align = "center";
 </script>
 
-<div class="empty">
+<div class="empty {size} {orientation} {reverse ? 'reverse' : ''} {align}">
 	{#if $$slots.default}
 		<div class="icon">
 			<slot />
@@ -19,20 +23,61 @@
   justify-content: center;
   text-align: center;
   color: var(--color-text-secondary, rgba(150, 150, 150, 0.5));
-  font-size: 1.5rem;
   font-weight: 500;
-  line-height: 2rem;
-  margin: 2rem 0;
 }
 
-.icon {
+.start {
+  justify-content: flex-start;
+}
+
+.end {
+  justify-content: flex-end;
+}
+
+.horizontal {
+  flex-direction: row;
+  gap: 1rem;
+}
+.horizontal.reverse {
+  flex-direction: row-reverse;
+}
+
+.vertical.reverse {
+  flex-direction: column-reverse;
+}
+
+.sm {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.sm .icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.md {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.md .icon {
   height: 2rem;
   width: 2rem;
-  margin-bottom: 1rem;
 }
 
-.text {
+.lg {
   font-size: 1.5rem;
-  font-weight: 500;
   line-height: 2rem;
+}
+.lg .icon {
+  height: 3rem;
+  width: 3rem;
+}
+
+.xl {
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+.xl .icon {
+  height: 4rem;
+  width: 4rem;
 }</style>

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

@@ -2,6 +2,10 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         text?: string | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+        reverse?: boolean | undefined;
+        align?: "center" | "end" | "start" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export { default as AppNavItem } from './navigation/app-bar/app-nav-item.svelte'
 export { default as AppBranding } from './navigation/app-bar/app-branding.svelte';
 export { default as Wizard } from './navigation/wizard/wizard.svelte';
 export { default as WizardStep } from './navigation/wizard/wizard-step.svelte';
+export { default as Pagination } from './navigation/pagination/pagination.svelte';
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';
 export { default as TableBody } from './tables/table-body.svelte';

package/dist/index.js

@@ -66,6 +66,7 @@ export { default as AppNavItem } from './navigation/app-bar/app-nav-item.svelte'
 export { default as AppBranding } from './navigation/app-bar/app-branding.svelte';
 export { default as Wizard } from './navigation/wizard/wizard.svelte';
 export { default as WizardStep } from './navigation/wizard/wizard-step.svelte';
+export { default as Pagination } from './navigation/pagination/pagination.svelte';
 // Tables
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';

package/dist/navigation/pagination/pagination.svelte

@@ -0,0 +1,109 @@
+<script>import { createEventDispatcher } from "svelte";
+export let currentPage = 1;
+export let totalPages = 1;
+export let align = "center";
+const dispatch = createEventDispatcher();
+const changePage = (page) => {
+  if (page < 1 || page > totalPages)
+    return;
+  currentPage = page;
+  dispatch("page", page);
+};
+$:
+  previousPages = currentPage > 1 ? (() => {
+    const pages = [];
+    for (let i = currentPage - 1; i > 0 && i >= currentPage - 3; i--) {
+      pages.push(i);
+    }
+    return pages.reverse();
+  })() : [];
+$:
+  nextPages = currentPage < totalPages ? (() => {
+    const pages = [];
+    for (let i = currentPage + 1; i <= totalPages && i <= currentPage + 3; i++) {
+      pages.push(i);
+    }
+    return pages;
+  })() : [];
+$:
+  showFirst = currentPage > 4;
+$:
+  showLast = currentPage < totalPages - 3;
+</script>
+
+<nav class={align}>
+	{#if currentPage > 1}
+		<button on:click={() => changePage(currentPage - 1)} class="previous">Previous</button>
+	{/if}
+	{#if showFirst}
+		<button on:click={() => changePage(1)} class="first">1</button>
+		<div class="ellipsis">...</div>
+	{/if}
+	{#each previousPages as page}
+		<button on:click={() => changePage(page)}>{page}</button>
+	{/each}
+	<div class="current">{currentPage}</div>
+	{#each nextPages as page}
+		<button on:click={() => changePage(page)}>{page}</button>
+	{/each}
+	{#if showLast}
+		<div class="ellipsis">...</div>
+		<button on:click={() => changePage(totalPages)} class="last">{totalPages}</button>
+	{/if}
+	{#if currentPage < totalPages}
+		<button on:click={() => changePage(currentPage + 1)} class="next">Next</button>
+	{/if}
+</nav>
+
+<style>nav {
+  display: flex;
+  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;
+  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);
+}
+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 .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);
+}
+nav.start {
+  justify-content: flex-start;
+}
+nav.end {
+  justify-content: flex-end;
+}</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        currentPage?: number | undefined;
+        totalPages?: number | undefined;
+        align?: "center" | "end" | "start" | undefined;
+    };
+    events: {
+        page: CustomEvent<number>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PaginationProps = typeof __propDef.props;
+export type PaginationEvents = typeof __propDef.events;
+export type PaginationSlots = typeof __propDef.slots;
+export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
+}
+export {};

package/dist/navigation/wizard/wizard-context.d.ts

@@ -3,6 +3,7 @@ export type WizardState = {
     currentStep: number;
     totalSteps: number;
     disabled: boolean;
+    errors: string[];
 };
 export interface WizardContext {
     state: Subscribable<WizardState>;

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

@@ -1,4 +1,5 @@
 <script>import { getContext, onDestroy } from "svelte";
+import Notice from "../../generic/notice/notice.svelte";
 const wizard = getContext("wizard");
 const state = wizard.state;
 export let step;
@@ -6,9 +7,18 @@ export let subtitle;
 wizard.register(step, subtitle);
 $:
   isCurrentStep = $state.currentStep === step;
+$:
+  errors = $state.errors;
 </script>
 
 <div class="step {isCurrentStep ? 'current' : ''}">
+	{#if errors.length}
+		<div class="errors">
+			{#each errors as error}
+				<Notice style="error">{error}</Notice>
+			{/each}
+		</div>
+	{/if}
 	<slot />
 </div>
 
@@ -17,4 +27,10 @@ $:
 }
 .step.current {
   display: block;
+}
+.step .errors {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }</style>

package/dist/navigation/wizard/wizard.svelte

@@ -9,18 +9,21 @@ export let disabled = false;
 export let onNext = async () => [];
 export let onSubmit = async () => [];
 let currentStep = 0;
+let errors = [];
 const dispatch = createEventDispatcher();
 const steps = {};
 const wizardStore = writable({
   currentStep,
   totalSteps: 0,
-  disabled
+  disabled,
+  errors
 });
 const publish = () => {
   wizardStore.set({
     currentStep,
     totalSteps: Object.values(steps).length,
-    disabled
+    disabled,
+    errors
   });
 };
 const register = (stepNumber, subtitle2) => {
@@ -29,7 +32,7 @@ const register = (stepNumber, subtitle2) => {
 };
 const validate = async (callback) => {
   disabled = true;
-  const errors = await callback();
+  errors = await callback() || [];
   disabled = false;
   dispatch("errors", errors);
   return errors;
@@ -37,9 +40,9 @@ const validate = async (callback) => {
 const next = async () => {
   if (currentStep >= Object.values(steps).length || disabled)
     return;
-  const errors = await validate(() => onNext(currentStep));
-  if (errors.length)
-    return;
+  const errors2 = await validate(() => onNext(currentStep));
+  if (errors2.length)
+    return publish();
   currentStep++;
   dispatch("next", currentStep);
   publish();
@@ -48,6 +51,7 @@ const previous = () => {
   if (currentStep <= 1 || disabled)
     return;
   currentStep--;
+  errors = [];
   dispatch("previous", currentStep);
   publish();
 };
@@ -57,9 +61,9 @@ const reset = () => {
   publish();
 };
 const done = async () => {
-  const errors = await validate(onSubmit);
-  if (errors.length)
-    return;
+  const errors2 = await validate(onSubmit);
+  if (errors2.length)
+    return publish();
   dispatch("done");
   reset();
 };

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

@@ -5,8 +5,8 @@ declare const __propDef: {
         title: string;
         level?: SectionLevel | undefined;
         disabled?: boolean | undefined;
-        onNext?: ((step: number) => Promise<string[]>) | undefined;
-        onSubmit?: (() => Promise<string[]>) | undefined;
+        onNext?: ((step: number) => Promise<string[] | void>) | undefined;
+        onSubmit?: (() => Promise<string[] | void>) | undefined;
     };
     events: {
         done: CustomEvent<void>;

package/package.json

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