sveltacular 0.0.56 → 0.0.57

package/dist/generic/notice/notice.svelte

@@ -4,11 +4,20 @@ export let title = void 0;
 export let style = "info";
 export let size = "md";
 export let dismissable = false;
+export let dismissMilliseconds = 0;
 let visible = true;
-let fading = false;
+let going = false;
+let coming = false;
+const hello = () => {
+  dispatch("show");
+  coming = true;
+  setTimeout(() => {
+    coming = false;
+  }, 500);
+};
 const goodbye = () => {
   dispatch("dismiss");
-  fading = true;
+  going = true;
   setTimeout(() => {
     visible = false;
     dispatch("hidden");
@@ -19,9 +28,14 @@ const onClick = (e) => {
   e.stopPropagation();
   goodbye();
 };
+$:
+  if (dismissMilliseconds > 0) {
+    setTimeout(goodbye, dismissMilliseconds);
+  }
+hello();
 </script>
 
-<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {fading ? 'fading' : ''}">
+<div class="notice {style} {size} {visible ? 'visible' : 'hidden'} {going ? 'going' : ''} {coming ? 'coming' : ''}">
 	{#if $$slots.icon}
 		<div class="icon">
 			<slot name="icon" />
@@ -64,10 +78,13 @@ const onClick = (e) => {
 .notice.hidden {
   display: none;
 }
-.notice.fading {
+.notice.going {
   transform: translateY(-100%);
   opacity: 0;
 }
+.notice.coming {
+  opacity: 0;
+}
 .notice .icon {
   position: relative;
   width: 3rem;

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

@@ -5,10 +5,12 @@ declare const __propDef: {
         style?: ("outline" | "attention" | "success" | "error" | "info") | undefined;
         size?: ("sm" | "md" | "lg" | "xl") | undefined;
         dismissable?: boolean | undefined;
+        dismissMilliseconds?: number | undefined;
     };
     events: {
         dismiss: CustomEvent<void>;
         hidden: CustomEvent<void>;
+        show: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/generic/toaster/toaster.svelte

@@ -0,0 +1,17 @@
+<script></script>
+
+<section>
+    <slot />
+</section>
+
+<style>section {
+  display: flex;
+  flex-direction: column-reverse;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  gap: 1rem;
+  z-index: 9999;
+  max-width: 100%;
+  width: 20rem;
+}</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToasterProps = typeof __propDef.props;
+export type ToasterEvents = typeof __propDef.events;
+export type ToasterSlots = typeof __propDef.slots;
+export default class Toaster extends SvelteComponent<ToasterProps, ToasterEvents, ToasterSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { default as Empty } from './generic/empty/empty.svelte';
 export { default as Email } from './generic/email/email.svelte';
 export { default as Phone } from './generic/phone/phone.svelte';
 export { default as Address } from './generic/address/address.svelte';
+export { default as Toaster } from './generic/toaster/toaster.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

@@ -44,6 +44,7 @@ export { default as Empty } from './generic/empty/empty.svelte';
 export { default as Email } from './generic/email/email.svelte';
 export { default as Phone } from './generic/phone/phone.svelte';
 export { default as Address } from './generic/address/address.svelte';
+export { default as Toaster } from './generic/toaster/toaster.svelte';
 // Layout
 export { default as FlexCol } from './layout/flex-col.svelte';
 export { default as FlexRow } from './layout/flex-row.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.56",
+	"version": "0.0.57",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -30,7 +30,7 @@
 		"helpers"
 	],
 	"scripts": {
-		"watch": "npm run dev -- --open",
+		"watch": "storybook dev -p 6006",
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",