sveltacular 0.0.40 → 0.0.42

package/dist/forms/combo/new-or-existing-combo.svelte

@@ -0,0 +1,74 @@
+<script>import {
+  FlexRow,
+  ListBox,
+  RadioBox,
+  TextBox
+} from "../../index.js";
+import FlexCol from "../../layout/flex-col.svelte";
+export let mode = "existing";
+export let newValue = "";
+export let existingValue = "";
+export let items = [];
+export let size = "full";
+export let disabled = false;
+export let required = false;
+export let searchable = false;
+export let search = void 0;
+export let searchPlaceholder = "Search";
+export let newPlaceholder = "New";
+</script>
+
+<div class="group">
+	<FlexRow>
+		<div class="labels">
+			<FlexCol>
+				<div class="radio">
+					<RadioBox value="existing" bind:group={mode}>Existing:</RadioBox>
+				</div>
+				<div class="radio">
+					<RadioBox value="new" bind:group={mode}>New:</RadioBox>
+				</div>
+			</FlexCol>
+		</div>
+		<div class="inputs">
+			<FlexCol>
+				<div class="input">
+					<ListBox
+						bind:value={existingValue}
+						{searchable}
+						{search}
+						{required}
+						{items}
+						{size}
+						placeholder={searchPlaceholder}
+						disabled={disabled || mode == 'new'}
+					/>
+				</div>
+				<div class="input">
+					<TextBox
+						bind:value={newValue}
+						{size}
+						placeholder={newPlaceholder}
+						disabled={disabled || mode == 'existing'}
+					/>
+				</div>
+			</FlexCol>
+		</div>
+	</FlexRow>
+</div>
+
+<style>
+	.labels {
+		flex-shrink: 1;
+	}
+	.inputs {
+		flex-grow: 1;
+	}
+	.radio,
+	.input {
+		height: 2.5rem;
+	}
+	.radio {
+		padding-top: 0.1rem;
+	}
+</style>

package/dist/forms/combo/new-or-existing-combo.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import { type DropdownOption, type FormFieldSizeOptions } from '../../index.js';
+import type { SearchFunction } from '../list-box/list-box.js';
+declare const __propDef: {
+    props: {
+        mode?: "new" | "existing" | undefined;
+        newValue?: string | undefined;
+        existingValue?: string | undefined;
+        items?: DropdownOption[] | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+        searchable?: boolean | undefined;
+        search?: SearchFunction | undefined;
+        searchPlaceholder?: string | undefined;
+        newPlaceholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NewOrExistingComboProps = typeof __propDef.props;
+export type NewOrExistingComboEvents = typeof __propDef.events;
+export type NewOrExistingComboSlots = typeof __propDef.slots;
+export default class NewOrExistingCombo extends SvelteComponent<NewOrExistingComboProps, NewOrExistingComboEvents, NewOrExistingComboSlots> {
+}
+export {};

package/dist/forms/list-box/list-box.d.ts

@@ -0,0 +1,2 @@
+import type { DropdownOption } from '../../index.js';
+export type SearchFunction = (text: string) => Promise<DropdownOption[]>;

package/dist/forms/list-box/list-box.js

@@ -0,0 +1 @@
+export {};

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

@@ -13,11 +13,12 @@ export let disabled = false;
 export let required = false;
 export let searchable = false;
 export let search = void 0;
+export let placeholder = "";
 const id = uniqueId();
 const dispatch = createEventDispatcher();
 const getText = () => items.find((item) => item.value == value)?.name || "";
 let text = getText();
-let open = false;
+let isMenuOpen = false;
 let highlightIndex = -1;
 let filteredItems = [];
 $:
@@ -27,29 +28,29 @@ const onSelect = (e) => {
   dispatch("change", value);
   text = getText();
   applyFilter();
-  open = false;
+  isMenuOpen = false;
 };
 const focusOnInput = () => {
   if (browser)
     document.getElementById(id)?.focus();
 };
-const toggle = () => open = !open;
+const toggle = () => isMenuOpen = !open;
 const clickArrow = () => {
   if (disabled)
     return;
   toggle();
-  if (open)
+  if (isMenuOpen)
     focusOnInput();
 };
 const onInputKeyPress = (e) => {
   if (disabled)
     return;
   if (e.key == "Escape") {
-    open = false;
+    isMenuOpen = false;
     return;
   }
   if (e.key == "Enter" || e.key == "Tab") {
-    open = false;
+    isMenuOpen = false;
     if (highlightIndex > -1) {
       onSelect(new CustomEvent("select", { detail: filteredItems[highlightIndex] }));
     }
@@ -57,17 +58,17 @@ const onInputKeyPress = (e) => {
   }
   if (e.key == "ArrowDown") {
     highlightIndex = Math.min(highlightIndex + 1, filteredItems.length - 1);
-    open = true;
+    isMenuOpen = true;
     return;
   }
   if (e.key == "ArrowUp") {
     highlightIndex = Math.max(highlightIndex - 1, -1);
     if (highlightIndex == -1)
-      open = false;
+      isMenuOpen = false;
     return;
   }
   if (e.key.length == 1 || e.key == "Backspace" || e.key == "Delete") {
-    open = true;
+    isMenuOpen = true;
     highlightIndex = 0;
     triggerSearch();
   }
@@ -99,6 +100,8 @@ const updateText = async () => {
   }
 };
 triggerSearch();
+$:
+  open = isMenuOpen && !disabled;
 </script>
 
 <FormField {size}>
@@ -112,8 +115,9 @@ triggerSearch();
 			bind:value={text}
 			{required}
 			{disabled}
+			{placeholder}
 			readonly={!isSeachable}
-			on:focus={() => (open = true)}
+			on:focus={() => (isMenuOpen = true)}
 			on:keyup={onInputKeyPress}
 			data-value={value}
 			data-text={text}

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+import type { SearchFunction } from './list-box.js';
 declare const __propDef: {
     props: {
         value?: string | undefined;
@@ -8,7 +9,8 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         required?: boolean | undefined;
         searchable?: boolean | undefined;
-        search?: ((text: string) => Promise<DropdownOption[]>) | undefined;
+        search?: SearchFunction | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         change: CustomEvent<string>;

package/dist/forms/radio-group/radio-box.svelte

@@ -56,6 +56,7 @@ label .checkbox .checkmark {
 label input {
   width: 0;
   height: 0;
+  position: absolute;
 }
 label input:checked + .checkbox {
   background-color: var(--form-input-selected-bg, #3182ce);

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

@@ -46,7 +46,7 @@ const onInput = (e) => {
 	{#if $$slots.default}
 		<FormLabel {id} {required}><slot /></FormLabel>
 	{/if}
-	<div class="input">
+	<div class="input {disabled ? 'disabled' : 'enabled'}">
 		{#if prefix}
 			<div class="prefix">{prefix}</div>
 		{/if}
@@ -91,6 +91,9 @@ const onInput = (e) => {
   user-select: none;
   white-space: nowrap;
 }
+.input.disabled {
+  opacity: 0.5;
+}
 .input input {
   background-color: transparent;
   border: none;

package/dist/generic/empty/empty.svelte

@@ -0,0 +1,38 @@
+<script>export let text = "No data to display";
+</script>
+
+<div class="empty">
+	{#if $$slots.default}
+		<div class="icon">
+			<slot />
+		</div>
+	{/if}
+	<div class="text">
+		{text}
+	</div>
+</div>
+
+<style>.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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 {
+  height: 2rem;
+  width: 2rem;
+  margin-bottom: 1rem;
+}
+
+.text {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 2rem;
+}</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EmptyProps = typeof __propDef.props;
+export type EmptyEvents = typeof __propDef.events;
+export type EmptySlots = typeof __propDef.slots;
+export default class Empty extends SvelteComponent<EmptyProps, EmptyEvents, EmptySlots> {
+}
+export {};

package/dist/icons/folder-open-icon.svelte

@@ -0,0 +1,12 @@
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	viewBox="0 0 20 18"
+>
+	<path
+		d="M4.09 7.586A1 1 0 0 1 5 7h13V6a2 2 0 0 0-2-2h-4.557L9.043.8a2.009 2.009 0 0 0-1.6-.8H2a2 2 0 0 0-2 2v14c.001.154.02.308.058.457L4.09 7.586Z"
+	/>
+	<path d="M6.05 9 2 17.952c.14.031.281.047.424.048h12.95a.992.992 0 0 0 .909-.594L20 9H6.05Z" />
+</svg>

package/dist/icons/folder-open-icon.svelte.d.ts

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

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { default as FormFooter } from './forms/form-footer.svelte';
 export { default as FormSection } from './forms/form-section.svelte';
 export { default as InfoBox } from './forms/info-box/info-box.svelte';
 export { default as UrlBox } from './forms/url-box/url-box.svelte';
+export { default as NewOrExistingCombo } from './forms/combo/new-or-existing-combo.svelte';
 export { default as Card } from './generic/card/card.svelte';
 export { default as CardContainer } from './generic/card/card-container.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';
@@ -36,6 +37,7 @@ export { default as Section } from './generic/section/section.svelte';
 export { default as Header } from './generic/header/header.svelte';
 export { default as Dot } from './generic/dot/dot.svelte';
 export { default as Notice } from './generic/notice/notice.svelte';
+export { default as Empty } from './generic/empty/empty.svelte';
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';

package/dist/index.js

@@ -21,6 +21,7 @@ export { default as FormFooter } from './forms/form-footer.svelte';
 export { default as FormSection } from './forms/form-section.svelte';
 export { default as InfoBox } from './forms/info-box/info-box.svelte';
 export { default as UrlBox } from './forms/url-box/url-box.svelte';
+export { default as NewOrExistingCombo } from './forms/combo/new-or-existing-combo.svelte';
 // Generic
 export { default as Card } from './generic/card/card.svelte';
 export { default as CardContainer } from './generic/card/card-container.svelte';
@@ -38,6 +39,7 @@ export { default as Section } from './generic/section/section.svelte';
 export { default as Header } from './generic/header/header.svelte';
 export { default as Dot } from './generic/dot/dot.svelte';
 export { default as Notice } from './generic/notice/notice.svelte';
+export { default as Empty } from './generic/empty/empty.svelte';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';

package/dist/navigation/tabs/tab-context.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="svelte" />
-import type { TabStyle } from '../../types/generic.js';
-import type { Writable } from 'svelte/store';
+import type { Subscribable } from '../../index.js';
+export type TabStyle = 'traditional' | 'underline' | 'outline' | 'overline';
+export type TabDefinition = {
+    id: string;
+    name: string;
+};
 export interface TabContext {
-    active: Writable<string | null>;
+    active: Subscribable<string | null>;
     style: TabStyle;
-    squared: boolean;
+    register: (id: string, name: string, isActive: boolean) => void;
 }
 export declare const tabContext = "tabContext";

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

@@ -1,23 +1,157 @@
 <script>import { writable } from "svelte/store";
 import { setContext } from "svelte";
 import { tabContext } from "./tab-context.js";
+import { subscribable } from "../../index.js";
 export let style = "traditional";
-export let squared = false;
+const tabs = writable([]);
+const register = (id, name, isActive) => {
+  tabs.update((value) => [...value, { id, name }]);
+  if (isActive)
+    active.set(id);
+};
+const active = writable(null);
+const selectTab = (id) => {
+  active.set(id);
+};
 const ctx = {
-  active: writable(null),
+  active: subscribable(active),
   style,
-  squared
+  register
 };
 setContext(tabContext, ctx);
 </script>
 
-<div>
-	<slot />
-</div>
+<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>div {
+<style>.tab-head {
+  height: 2rem;
   position: relative;
-  display: block;
+}
+.tab-head nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  height: 2rem;
+  overflow: hidden;
   width: 100%;
-  font-family: var(--base-font-family, sans-serif);
+}
+.tab-head li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.tab-head li.active button {
+  font-weight: 700;
+  cursor: default;
+}
+.tab-head button {
+  appearance: none;
+  border: none 0;
+  background: transparent;
+  line-height: 1.8rem;
+  height: 2rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+}
+.tab-head button:focus {
+  outline: none;
+}
+
+.tab-content {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.traditional button {
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+.traditional .inactive button {
+  background: var(--tab-traditional-inactive-bg, transparent);
+  color: var(--tab-traditional-inactive-fg, rgb(150, 150, 150));
+}
+.traditional .inactive button:hover {
+  background: var(--tab-traditional-hover-bg, transparent);
+  color: var(--tab-traditional-hover-fg, rgb(220, 220, 220));
+}
+.traditional .active button {
+  background: var(--tab-traditional-active-bg, rgb(220, 220, 230));
+  color: var(--tab-traditional-active-fg, rgb(50, 50, 50));
+}
+.traditional .tab-head {
+  border-bottom: solid 0.2rem var(--tab-traditional-border, rgb(220, 220, 230));
+}
+
+.underline button {
+  border-bottom: solid 0.2rem var(--tab-underline-inactive-fg, rgb(100, 100, 100));
+}
+.underline .tab-head {
+  border-bottom: solid 0.2rem var(--tab-underline-inactive-fg, rgb(100, 100, 100));
+}
+.underline .inactive button {
+  background: var(--tab-underline-inactive-bg, transparent);
+  color: var(--tab-underline-inactive-fg, rgb(150, 150, 150));
+}
+.underline .inactive button:hover {
+  background: var(--tab-underline-hover-bg, transparent);
+  color: var(--tab-underline-hover-fg, rgb(220, 220, 220));
+}
+.underline .active button {
+  color: var(--tab-underline-active-fg, rgb(255, 134, 78));
+  border-color: var(--tab-underline-active-fg, rgb(255, 134, 78));
+  background: var(--tab-underline-active-bg, rgb(80, 80, 80));
+}
+
+.outline button {
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+.outline .tab-head {
+  border-bottom: solid 0.1rem var(--tab-outline-border, rgb(220, 220, 220));
+}
+.outline .inactive button {
+  color: var(--tab-outline-inactive-fg, rgb(120, 120, 120));
+}
+.outline .active button {
+  border-style: solid;
+  border-width: 0.1rem 0.1rem 0.1rem 0.1rem;
+  border-color: var(--tab-outline-border, rgb(220, 220, 220));
+  color: var(--base-fg, rgb(220, 220, 220));
+  border-bottom-color: var(--base-bg, rgb(50, 50, 50));
+  line-height: 1.7rem;
+}
+
+.overline .tab-head {
+  background: var(--tab-overline-bg, rgb(100, 100, 100));
+}
+.overline button {
+  border-top: solid 0.2rem;
+}
+.overline .active button {
+  color: var(--tab-overline-active-fg, rgb(255, 134, 78));
+  border-color: var(--tab-overline-active-fg, rgb(255, 134, 78));
+  background: var(--tab-overline-active-bg, rgb(50, 50, 50));
+}
+.overline .inactive button {
+  border-style: none;
+  color: var(--tab-overline-fg, rgb(180, 180, 180));
 }</style>

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

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { TabStyle } from '../../types/generic.js';
+import { type TabStyle } from './tab-context.js';
 declare const __propDef: {
     props: {
         style?: TabStyle | undefined;
-        squared?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/navigation/tabs/tab.svelte

@@ -1,130 +1,28 @@
 <script>import { createEventDispatcher, getContext, onDestroy } from "svelte";
 import { tabContext } from "./tab-context.js";
+import { uniqueId } from "../../index.js";
 export let title;
 export let active = false;
 const dispatch = createEventDispatcher();
 const ctx = getContext(tabContext);
 const tabStyle = ctx.style || "traditional";
-const selectThisTab = () => {
-  dispatch("selectTab", title);
-  ctx.active.set(title);
-};
-if (active)
-  selectThisTab();
-const unsubscribe = ctx.active.subscribe((value) => {
-  active = value === title;
+const id = uniqueId();
+ctx.register(id, title, active);
+const unsubscribe = ctx.active.subscribe((selectedId) => {
+  active = selectedId === id;
 });
-onDestroy(() => {
-  unsubscribe();
-});
-$:
-  classes = `${active ? "active" : "inactive"} ${tabStyle} ${ctx.squared ? "squared" : "rounded"}`;
+onDestroy(() => unsubscribe());
 </script>
 
-<section class={classes}>
-	<header class="tabTitle">
-		<button type="button" on:click={selectThisTab}>
-			{title}
-		</button>
-	</header>
-	<div class="tabContent">
-		{#if active}
-			<slot />
-		{/if}
-	</div>
-</section>
-
-<style>section {
-  display: inline;
-}
-
-.tabTitle {
-  display: inline-block;
-  cursor: pointer;
-  height: 2.2rem;
-  overflow: hidden;
-  position: relative;
-  z-index: 2;
-}
-.tabTitle button {
-  appearance: none;
-  background: transparent;
-  border-style: solid;
-  border-width: 0 0 0.2rem 0;
-  border-color: transparent;
-  border-radius: 0.5rem 0.5rem 0 0;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  font-size: 1rem;
-  line-height: 1.8rem;
-  height: 2.2rem;
-  font-weight: 300;
-  padding: 0 1rem;
-}
-.tabTitle button:focus {
-  outline: none;
-}
+<article class:active>
+	{#if active}
+		<slot />
+	{/if}
+</article>
 
-.tabContent {
+<style>article {
   display: none;
-  width: 100%;
-  position: absolute;
-  top: 2rem;
-  left: 0;
-  border-top: solid 0.2rem var(--tab-content-border, rgb(220, 220, 230));
-  padding-top: 1rem;
-  font-size: 1rem;
 }
-
-.active button {
-  font-weight: 700;
-  cursor: default;
-}
-
-.inactive button {
-  color: var(--tab-inactive-fg, #999);
-}
-.inactive button:hover {
-  color: var(--tab-hover-fg, #ccc);
-}
-
-.active .tabContent {
+article.active {
   display: block;
-}
-
-.squared button {
-  border-radius: 0.2rem 0.2rem 0 0;
-}
-
-.traditional.inactive button {
-  background: var(--tab-traditional-inactive-bg, transparent);
-  color: var(--tab-traditional-inactive-fg, rgb(100, 100, 100));
-}
-.traditional.inactive button:hover {
-  background: var(--tab-traditional-hover-bg, transparent);
-  color: var(--tab-traditional-hover-fg, rgb(160, 160, 160));
-}
-.traditional.active button {
-  background: var(--tab-traditional-active-bg, rgb(220, 220, 230));
-  color: var(--tab-traditional-active-fg, rgb(51, 51, 51));
-}
-
-.underline.inactive button {
-  background: var(--tab-underline-inactive-bg, transparent);
-  color: var(--tab-underline-inactive-fg, rgb(100, 100, 100));
-}
-.underline.inactive button:hover {
-  background: var(--tab-underline-hover-bg, transparent);
-  color: var(--tab-underline-hover-fg, rgb(150, 150, 150));
-}
-.underline.active button {
-  color: var(--tab-underline-active-fg, rgb(255, 134, 78));
-  border-color: var(--tab-underline-active-fg, rgb(255, 134, 78));
-}
-
-.outline.active button {
-  border-width: 0.1rem 0.1rem 0 0.1rem;
-  border-color: var(--tab-content-border, rgb(220, 220, 230));
 }</style>

package/dist/navigation/wizard/wizard.svelte

@@ -1,12 +1,13 @@
 <script>import { createEventDispatcher, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { subscribable } from "../../helpers/subscribable.js";
-import Section from "../../generic/section/section.svelte";
 import Header from "../../generic/header/header.svelte";
 import Button from "../../forms/button/button.svelte";
 export let title;
 export let level = 3;
 export let disabled = false;
+export let onNext = async () => [];
+export let onSubmit = async () => [];
 let currentStep = 0;
 const dispatch = createEventDispatcher();
 const steps = {};
@@ -26,9 +27,19 @@ const register = (stepNumber, subtitle2) => {
   steps[stepNumber] = subtitle2;
   publish();
 };
-const next = () => {
+const validate = async (callback) => {
+  disabled = true;
+  const errors = await callback();
+  disabled = false;
+  dispatch("errors", errors);
+  return errors;
+};
+const next = async () => {
   if (currentStep >= Object.values(steps).length || disabled)
     return;
+  const errors = await validate(() => onNext(currentStep));
+  if (errors.length)
+    return;
   currentStep++;
   dispatch("next", currentStep);
   publish();
@@ -40,9 +51,17 @@ const previous = () => {
   dispatch("previous", currentStep);
   publish();
 };
-const done = () => {
-  disabled = true;
-  dispatch("submit");
+const reset = () => {
+  disabled = false;
+  currentStep = 1;
+  publish();
+};
+const done = async () => {
+  const errors = await validate(onSubmit);
+  if (errors.length)
+    return;
+  dispatch("done");
+  reset();
 };
 setContext("wizard", {
   state: subscribable(wizardStore),
@@ -92,4 +111,8 @@ footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: nowrap;
+}
+footer div {
+  width: 100%;
 }</style>

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

@@ -5,11 +5,14 @@ declare const __propDef: {
         title: string;
         level?: SectionLevel | undefined;
         disabled?: boolean | undefined;
+        onNext?: ((step: number) => Promise<string[]>) | undefined;
+        onSubmit?: (() => Promise<string[]>) | undefined;
     };
     events: {
-        submit: CustomEvent<void>;
+        done: CustomEvent<void>;
         next: CustomEvent<number>;
         previous: CustomEvent<number>;
+        errors: CustomEvent<string[]>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/tables/data-grid.svelte

@@ -8,6 +8,8 @@ import TableHeaderRow from "./table-header-row.svelte";
 import TableHeader from "./table-header.svelte";
 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 Loading from "../placeholders/loading.svelte";
 import Text from "../typography/text.svelte";
 import TableCaption from "./table-caption.svelte";
@@ -72,7 +74,9 @@ $:
 						{#if rows === undefined}
 							<Loading />
 						{:else}
-							<Text>No data</Text>
+							<Empty>
+								<FolderOpenIcon />
+							</Empty>
 						{/if}
 					</div>
 				</TableCell>

package/dist/types/generic.d.ts

@@ -1,4 +1,3 @@
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type HttpProtocol = 'http' | 'https';
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-export type TabStyle = 'traditional' | 'underline' | 'outline';

package/package.json

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