sveltacular 0.0.35 → 0.0.37

package/dist/forms/button/button.svelte

@@ -8,7 +8,12 @@ export let block = false;
 export let flex = false;
 export let disabled = false;
 const dispatch = createEventDispatcher();
-const click = () => {
+const click = (e) => {
+  if (disabled) {
+    e.preventDefault();
+    e.stopPropagation();
+    return;
+  }
   dispatch("click");
   if (href) {
     navigateTo(href);
@@ -44,6 +49,10 @@ const click = () => {
   font-family: var(--base-font-family, sans-serif);
   text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
 }
+button[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 button.flex {
   flex-grow: 1;
 }

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

@@ -11,6 +11,6 @@ $:
   decimals = allowCents ? 2 : 0;
 </script>
 
-<NumberBox bind:value {symbol} {decimals} {placeholder} {size} {min} {max} {step}
+<NumberBox bind:value prefix={symbol} {decimals} {placeholder} {size} {min} {max} {step}
 	><slot /></NumberBox
 >

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

@@ -1,4 +1,4 @@
-<script>import { roundToDecimals } from "../../helpers/round-to-decimals.js";
+<script>import { formatNumber, roundToDecimals } from "../../helpers/round-to-decimals.js";
 import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
@@ -7,12 +7,12 @@ export let value = 0;
 export let placeholder = "";
 export let size = "full";
 export let type = "number";
-export let step = 1;
 export let min = 0;
 export let max = 1e6;
 export let decimals = 0;
 export let prefix = null;
 export let suffix = null;
+export let step = 1;
 const valueChanged = () => {
   value = roundToDecimals(value, decimals);
 };

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

@@ -6,12 +6,12 @@ declare const __propDef: {
         placeholder?: string | undefined;
         size?: FormFieldSizeOptions | undefined;
         type?: ("number" | "currency") | undefined;
-        step?: number | undefined;
         min?: number | undefined;
         max?: number | undefined;
         decimals?: number | undefined;
         prefix?: string | null | undefined;
         suffix?: string | null | undefined;
+        step?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/generic/header/header.svelte

@@ -25,7 +25,7 @@ export let underline = false;
 
 <style>header {
   margin-bottom: 1rem;
-  font-family: var(--base-head-font-family, sans-serif);
+  font-family: var(--base-headline-font-family, sans-serif);
 }
 header.underline {
   padding-bottom: 0.5rem;

package/dist/generic/notice/notice.svelte

@@ -0,0 +1,159 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let title = void 0;
+export let style = "info";
+export let size = "full";
+export let dismissable = false;
+let visible = true;
+let fading = false;
+const goodbye = () => {
+  dispatch("dismiss");
+  fading = true;
+  setTimeout(() => {
+    visible = false;
+    dispatch("hidden");
+  }, 500);
+};
+const onClick = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  goodbye();
+};
+</script>
+
+<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {fading ? 'fading' : ''}">
+	{#if $$slots.icon}
+		<div class="icon">
+			<slot name="icon" />
+		</div>
+	{/if}
+	<div class="content">
+		{#if title}
+			<strong>{title}</strong>
+		{/if}
+		<div class="message">
+			<slot />
+		</div>
+	</div>
+
+	{#if dismissable}
+		<div class="dismiss">
+			<button type="button" on:click={onClick}>X</button>
+		</div>
+	{/if}
+</div>
+
+<style>.notice {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  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);
+  position: relative;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out;
+}
+.notice.hidden {
+  display: none;
+}
+.notice.fading {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+.notice .icon {
+  position: relative;
+  width: 3rem;
+  min-width: 3rem;
+  height: 100%;
+}
+.notice .content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.notice.info {
+  background-color: rgb(225, 225, 225);
+  color: rgb(78, 78, 78);
+  border-color: rgb(144, 144, 144);
+}
+.notice.attention {
+  background-color: rgb(255, 248, 219);
+  color: rgb(117, 82, 0);
+  border-color: rgb(181, 129, 5);
+}
+.notice.success {
+  background-color: rgb(229, 248, 230);
+  color: rgb(0, 100, 0);
+  border-color: rgb(30, 188, 47);
+}
+.notice.error {
+  background-color: rgb(255, 232, 230);
+  color: rgb(100, 0, 0);
+  border-color: rgb(218, 40, 40);
+}
+.notice.xl {
+  width: 60rem;
+}
+.notice.lg {
+  width: 40rem;
+}
+.notice.lg .icon {
+  width: 2.5rem;
+  min-width: 2.5rem;
+}
+.notice.lg .content {
+  font-size: 0.95rem;
+}
+.notice.md {
+  width: 25rem;
+  border-width: 1px;
+  border-radius: 3px;
+}
+.notice.md .icon {
+  width: 2rem;
+  min-width: 2rem;
+}
+.notice.md .content {
+  font-size: 0.85rem;
+}
+.notice.sm {
+  width: 15rem;
+  border-width: 1px;
+  border-radius: 2px;
+}
+.notice.sm .icon {
+  width: 1.5rem;
+  min-width: 1.5rem;
+}
+.notice.sm .content {
+  font-size: 0.75rem;
+}
+
+button {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font-size: 1rem;
+  cursor: pointer;
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+  width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+button:hover {
+  font-weight: bold;
+}</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        style?: ("outline" | "attention" | "success" | "error" | "info") | undefined;
+        size?: ("sm" | "md" | "lg" | "xl" | "full") | undefined;
+        dismissable?: boolean | undefined;
+    };
+    events: {
+        dismiss: CustomEvent<void>;
+        hidden: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export type NoticeProps = typeof __propDef.props;
+export type NoticeEvents = typeof __propDef.events;
+export type NoticeSlots = typeof __propDef.slots;
+export default class Notice extends SvelteComponent<NoticeProps, NoticeEvents, NoticeSlots> {
+}
+export {};

package/dist/helpers/round-to-decimals.d.ts

@@ -6,3 +6,7 @@
  * @returns
  */
 export declare const roundToDecimals: (value: number, decimals: number) => number;
+/**
+ * Format a number to a string with a specific number of decimals
+ */
+export declare const formatNumber: (value: number, decimals: number) => string;

package/dist/helpers/round-to-decimals.js

@@ -10,3 +10,9 @@ export const roundToDecimals = (value, decimals) => {
         return Math.round(value);
     return Number(Math.round(Number(`${value}e${decimals}`)) + `e-${decimals}`);
 };
+/**
+ * Format a number to a string with a specific number of decimals
+ */
+export const formatNumber = (value, decimals) => {
+    return roundToDecimals(value, decimals).toLocaleString();
+};

package/dist/helpers/subscribable.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+import type { Writable } from 'svelte/store';
+export declare const subscribable: <T>(subject: Writable<T>) => {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<T>, invalidate?: import("svelte/store").Invalidator<T> | undefined) => import("svelte/store").Unsubscriber;
+};
+export type Subscribable<T> = ReturnType<typeof subscribable<T>>;

package/dist/helpers/subscribable.js

@@ -0,0 +1,3 @@
+export const subscribable = (subject) => {
+    return { subscribe: subject.subscribe };
+};

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Panel } from './generic/panel/panel.svelte';
 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 FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
 export { default as FlexItem } from './layout/flex-item.svelte';
@@ -55,6 +56,8 @@ export { default as AppLogo } from './navigation/app-bar/app-logo.svelte';
 export { default as AppNav } from './navigation/app-bar/app-nav.svelte';
 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 DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';
 export { default as TableBody } from './tables/table-body.svelte';
@@ -82,4 +85,5 @@ export * from './helpers/date.js';
 export * from './helpers/navigate-to.js';
 export * from './helpers/round-to-decimals.js';
 export * from './helpers/unique-id.js';
+export * from './helpers/subscribable.js';
 export * as Data from './data/index.js';

package/dist/index.js

@@ -36,6 +36,7 @@ export { default as Panel } from './generic/panel/panel.svelte';
 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';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';
@@ -60,6 +61,8 @@ export { default as AppLogo } from './navigation/app-bar/app-logo.svelte';
 export { default as AppNav } from './navigation/app-bar/app-nav.svelte';
 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';
 // Tables
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';
@@ -93,5 +96,6 @@ export * from './helpers/date.js';
 export * from './helpers/navigate-to.js';
 export * from './helpers/round-to-decimals.js';
 export * from './helpers/unique-id.js';
+export * from './helpers/subscribable.js';
 // Data
 export * as Data from './data/index.js';

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

@@ -0,0 +1,10 @@
+import type { Subscribable } from '../../helpers/subscribable.js';
+export type WizardState = {
+    currentStep: number;
+    totalSteps: number;
+    disabled: boolean;
+};
+export interface WizardContext {
+    state: Subscribable<WizardState>;
+    register: (step: number, title: string) => void;
+}

package/dist/navigation/wizard/wizard-context.js

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

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

@@ -0,0 +1,20 @@
+<script>import { getContext, onDestroy } from "svelte";
+const wizard = getContext("wizard");
+const state = wizard.state;
+export let step;
+export let subtitle;
+wizard.register(step, subtitle);
+$:
+  isCurrentStep = $state.currentStep === step;
+</script>
+
+<div class="step {isCurrentStep ? 'current' : ''}">
+	<slot />
+</div>
+
+<style>.step {
+  display: none;
+}
+.step.current {
+  display: block;
+}</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        step: number;
+        subtitle: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WizardStepProps = typeof __propDef.props;
+export type WizardStepEvents = typeof __propDef.events;
+export type WizardStepSlots = typeof __propDef.slots;
+export default class WizardStep extends SvelteComponent<WizardStepProps, WizardStepEvents, WizardStepSlots> {
+}
+export {};

package/dist/navigation/wizard/wizard.svelte

@@ -0,0 +1,95 @@
+<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;
+let currentStep = 0;
+const dispatch = createEventDispatcher();
+const steps = {};
+const wizardStore = writable({
+  currentStep,
+  totalSteps: 0,
+  disabled
+});
+const publish = () => {
+  wizardStore.set({
+    currentStep,
+    totalSteps: Object.values(steps).length,
+    disabled
+  });
+};
+const register = (stepNumber, subtitle2) => {
+  steps[stepNumber] = subtitle2;
+  publish();
+};
+const next = () => {
+  if (currentStep >= Object.values(steps).length || disabled)
+    return;
+  currentStep++;
+  dispatch("next", currentStep);
+  publish();
+};
+const previous = () => {
+  if (currentStep <= 1 || disabled)
+    return;
+  currentStep--;
+  dispatch("previous", currentStep);
+  publish();
+};
+const done = () => {
+  disabled = true;
+  dispatch("submit");
+};
+setContext("wizard", {
+  state: subscribable(wizardStore),
+  register
+});
+setTimeout(next, 100);
+$:
+  isFirstStep = currentStep <= 1;
+$:
+  isLastStep = currentStep >= Object.values(steps).length;
+$:
+  subtitle = steps[currentStep - 1];
+$:
+  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>
+
+<style>section.disabled {
+  opacity: 0.5;
+}
+
+footer {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../../types/generic.js';
+declare const __propDef: {
+    props: {
+        title: string;
+        level?: SectionLevel | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        submit: CustomEvent<void>;
+        next: CustomEvent<number>;
+        previous: CustomEvent<number>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WizardProps = typeof __propDef.props;
+export type WizardEvents = typeof __propDef.events;
+export type WizardSlots = typeof __propDef.slots;
+export default class Wizard extends SvelteComponent<WizardProps, WizardEvents, WizardSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,34 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.35",
+	"version": "0.0.37",
+	"description": "A Svelte component library",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/jasonbyrne/sveltacular.git"
+	},
+	"bugs": {
+		"url": "https://github.com/jasonbyrne/sveltacular/issues"
+	},
+	"homepage": "https://github.com/jasonbyrne/sveltacular#readme",
+	"license": "Apache-2.0",
+	"author": "Jason Byrne <jasonbyrne662@gmail.com>",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"component",
+		"library",
+		"ui",
+		"kit",
+		"storybook",
+		"vite",
+		"typescript",
+		"css",
+		"scss",
+		"helpers"
+	],
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",
@@ -69,6 +97,5 @@
 		"vitest": "^0.34.0"
 	},
 	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
 	"type": "module"
 }