sveltacular 0.0.14 → 0.0.16

package/dist/generic/overlay.svelte

@@ -1,8 +1,18 @@
-<script>
-	export let show = true;
+<script>import { createEventDispatcher } from "svelte";
+export let show = true;
+const dispatch = createEventDispatcher();
+const onClick = () => {
+  dispatch("click");
+};
+const onKeyPress = (event) => {
+  if (event.key === "Escape") {
+    onClick();
+  }
+};
 </script>
 
-<div class:show>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class:show on:click={onClick} on:keypress={onKeyPress}>
 	<slot />
 </div>
 

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

@@ -1,27 +1,20 @@
-/** @typedef {typeof __propDef.props}  OverlayProps */
-/** @typedef {typeof __propDef.events}  OverlayEvents */
-/** @typedef {typeof __propDef.slots}  OverlaySlots */
-export default class Overlay extends SvelteComponent<{
-    show?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type OverlayProps = typeof __propDef.props;
-export type OverlayEvents = typeof __propDef.events;
-export type OverlaySlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         show?: boolean | undefined;
     };
     events: {
+        click: CustomEvent<void>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
+export type OverlayProps = typeof __propDef.props;
+export type OverlayEvents = typeof __propDef.events;
+export type OverlaySlots = typeof __propDef.slots;
+export default class Overlay extends SvelteComponent<OverlayProps, OverlayEvents, OverlaySlots> {
+}
 export {};

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export { default as DialogBody } from './modals/dialog-body.svelte';
 export { default as DialogFooter } from './modals/dialog-footer.svelte';
 export { default as DialogHeader } from './modals/dialog-header.svelte';
 export { default as DialogWindow } from './modals/dialog-window.svelte';
+export { default as Modal } from './modals/modal.svelte';
 export { default as Accordian } from './navigation/accordian/accordian.svelte';
 export { default as AppBar } from './navigation/app-bar/app-bar.svelte';
 export { default as Breadcrumbs } from './navigation/breadcrumbs/breadcrumbs.svelte';
@@ -47,6 +48,7 @@ export { default as Tab } from './navigation/tabs/tab.svelte';
 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 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

@@ -42,6 +42,7 @@ export { default as DialogBody } from './modals/dialog-body.svelte';
 export { default as DialogFooter } from './modals/dialog-footer.svelte';
 export { default as DialogHeader } from './modals/dialog-header.svelte';
 export { default as DialogWindow } from './modals/dialog-window.svelte';
+export { default as Modal } from './modals/modal.svelte';
 // Navigation
 export { default as Accordian } from './navigation/accordian/accordian.svelte';
 export { default as AppBar } from './navigation/app-bar/app-bar.svelte';
@@ -52,6 +53,7 @@ export { default as Tab } from './navigation/tabs/tab.svelte';
 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';
 // Tables
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';

package/dist/modals/alert.svelte

@@ -5,6 +5,7 @@ import Dialog from "./dialog-window.svelte";
 import Divider from "../generic/divider/divider.svelte";
 import Overlay from "../generic/overlay.svelte";
 import Button from "../forms/button/button.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
 export let open = false;
 export let title = void 0;
 export let size = "md";
@@ -14,14 +15,15 @@ const close = () => open = false;
 </script>
 
 {#if open}
-	<Overlay>
+	<Overlay on:click={close}>
 		<Dialog {size}>
 			{#if title}
-				<DialogHeader on:close={close} {showCloseButton}>
+				<DialogHeader>
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={close} />
 			<DialogBody>
 				<slot />
 			</DialogBody>

package/dist/modals/confirm.svelte

@@ -6,6 +6,7 @@ import Overlay from "../generic/overlay.svelte";
 import { createEventDispatcher } from "svelte";
 import Button from "../forms/button/button.svelte";
 import Divider from "../generic/divider/divider.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
 export let open = false;
 export let title = void 0;
 export let size = "md";
@@ -24,14 +25,15 @@ const yes = () => {
 </script>
 
 {#if open}
-	<Overlay>
+	<Overlay on:click={no}>
 		<Dialog {size}>
 			{#if title}
-				<DialogHeader on:close={no} {showCloseButton}>
+				<DialogHeader>
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={no} />
 			<DialogBody>
 				<slot />
 			</DialogBody>

package/dist/modals/dialog-close-button.svelte

@@ -0,0 +1,32 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let show = true;
+const onClick = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  dispatch("click");
+};
+</script>
+
+{#if show}
+	<button on:click={onClick}>X</button>
+{/if}
+
+<style>button {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font-size: 1rem;
+  cursor: pointer;
+  position: absolute;
+  top: 0.7rem;
+  right: 0.7rem;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+button:hover {
+  background-color: #eee;
+}</style>

package/dist/modals/dialog-close-button.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DialogCloseButtonProps = typeof __propDef.props;
+export type DialogCloseButtonEvents = typeof __propDef.events;
+export type DialogCloseButtonSlots = typeof __propDef.slots;
+export default class DialogCloseButton extends SvelteComponent<DialogCloseButtonProps, DialogCloseButtonEvents, DialogCloseButtonSlots> {
+}
+export {};

package/dist/modals/dialog-header.svelte

@@ -1,15 +1,5 @@
-<script>import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let showCloseButton = true;
-</script>
-
 <header>
 	<h1><slot /></h1>
-	{#if showCloseButton}
-		<div>
-			<button on:click={() => dispatch('close')}>X</button>
-		</div>
-	{/if}
 </header>
 
 <style>header {
@@ -25,14 +15,4 @@ header h1 {
   flex-grow: 1;
   font-size: 1.25rem;
   line-height: 1.75rem;
-}
-header div {
-  text-align: right;
-}
-header div button {
-  appearance: none;
-  border: none;
-  background-color: transparent;
-  font-size: 1.5rem;
-  cursor: pointer;
 }</style>

package/dist/modals/dialog-header.svelte.d.ts

@@ -1,20 +1,27 @@
+/** @typedef {typeof __propDef.props}  DialogHeaderProps */
+/** @typedef {typeof __propDef.events}  DialogHeaderEvents */
+/** @typedef {typeof __propDef.slots}  DialogHeaderSlots */
+export default class DialogHeader extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DialogHeaderProps = typeof __propDef.props;
+export type DialogHeaderEvents = typeof __propDef.events;
+export type DialogHeaderSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        showCloseButton?: boolean | undefined;
+        [x: string]: never;
     };
     events: {
-        close: CustomEvent<void>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
-export type DialogHeaderProps = typeof __propDef.props;
-export type DialogHeaderEvents = typeof __propDef.events;
-export type DialogHeaderSlots = typeof __propDef.slots;
-export default class DialogHeader extends SvelteComponent<DialogHeaderProps, DialogHeaderEvents, DialogHeaderSlots> {
-}
 export {};

package/dist/modals/modal.svelte

@@ -0,0 +1,20 @@
+<script>import DialogBody from "./dialog-body.svelte";
+import Dialog from "./dialog-window.svelte";
+import Overlay from "../generic/overlay.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
+export let open = false;
+export let size = "md";
+export let showCloseButton = true;
+const close = () => open = false;
+</script>
+
+{#if open}
+	<Overlay on:click={close}>
+		<Dialog {size}>
+			<DialogCloseButton show={showCloseButton} on:click={close} />
+			<DialogBody>
+				<slot />
+			</DialogBody>
+		</Dialog>
+	</Overlay>
+{/if}

package/dist/modals/modal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../types/form.js';
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        showCloseButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/dist/modals/prompt.svelte

@@ -7,6 +7,7 @@ import { createEventDispatcher } from "svelte";
 import Button from "../forms/button/button.svelte";
 import Divider from "../generic/divider/divider.svelte";
 import TextBox from "../forms/text-box/text-box.svelte";
+import DialogCloseButton from "./dialog-close-button.svelte";
 export let open = false;
 export let title = void 0;
 export let size = "md";
@@ -19,6 +20,7 @@ export let required = false;
 let value = "";
 const dispatch = createEventDispatcher();
 const no = () => {
+  console.log("no");
   open = false;
   dispatch("cancel");
 };
@@ -31,14 +33,15 @@ const yes = () => {
 </script>
 
 {#if open}
-	<Overlay>
+	<Overlay on:click={no}>
 		<Dialog {size}>
 			{#if title}
-				<DialogHeader on:close={no} {showCloseButton}>
+				<DialogHeader>
 					{title}
 				</DialogHeader>
 				<Divider />
 			{/if}
+			<DialogCloseButton show={showCloseButton} on:click={no} />
 			<DialogBody>
 				<TextBox bind:value {placeholder} {type} {required} size="full">
 					<slot />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.14",
+	"version": "0.0.16",
 	"scripts": {
 		"watch": "npm run dev -- --open",
 		"dev": "vite dev",