sveltacular 0.0.27 → 0.0.29

package/dist/forms/form-footer.svelte

@@ -2,6 +2,14 @@
 	import FlexRow from '../layout/flex-row.svelte';
 </script>
 
-<FlexRow layout="stretch">
-	<slot />
-</FlexRow>
+<div>
+	<FlexRow layout="stretch">
+		<slot />
+	</FlexRow>
+</div>
+
+<style>
+	div {
+		margin-top: 1.5rem;
+	}
+</style>

package/dist/forms/form-header.svelte

@@ -1,12 +1,18 @@
-<script>import Heading from "../typography/heading.svelte";
-export let title;
+<script>import Headline from "../typography/headline.svelte";
 export let level = 4;
+export let underline = true;
 </script>
 
-<div>
-	<Heading {level}>{title}</Heading>
+<div class:underline>
+	<Headline {level}>
+		<slot />
+	</Headline>
 </div>
 
 <style>div {
   margin-bottom: 1rem;
+}
+div.underline {
+  padding-bottom: 0.5rem;
+  border-bottom: solid 1px var(--divider-color, rgba(127, 127, 127, 0.5));
 }</style>

package/dist/forms/form-header.svelte.d.ts

@@ -1,13 +1,16 @@
 import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../types/generic.js';
 declare const __propDef: {
     props: {
-        title: string;
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+        level?: SectionLevel | undefined;
+        underline?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type FormHeaderProps = typeof __propDef.props;
 export type FormHeaderEvents = typeof __propDef.events;

package/dist/forms/form-label.svelte

@@ -1,4 +1,4 @@
-<script>export let id;
+<script>export let id = void 0;
 export let required = false;
 </script>
 

package/dist/forms/form-label.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id: string;
+        id?: string | undefined;
         required?: boolean | undefined;
     };
     events: {

package/dist/forms/form-section.svelte

@@ -0,0 +1,17 @@
+<script>import FormHeader from "./form-header.svelte";
+export let title = void 0;
+export let level = 4;
+</script>
+
+<section>
+	{#if title}
+		<FormHeader {level}>{title}</FormHeader>
+	{/if}
+	<slot />
+</section>
+
+<style>
+	section {
+		margin-bottom: 1rem;
+	}
+</style>

package/dist/forms/form-section.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../types/generic.js';
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        level?: SectionLevel | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormSectionProps = typeof __propDef.props;
+export type FormSectionEvents = typeof __propDef.events;
+export type FormSectionSlots = typeof __propDef.slots;
+export default class FormSection extends SvelteComponent<FormSectionProps, FormSectionEvents, FormSectionSlots> {
+}
+export {};

package/dist/forms/form.svelte

@@ -1,5 +1,8 @@
 <script>import { createEventDispatcher } from "svelte";
-export let action = "get";
+import Section from "../generic/section/section.svelte";
+export let method = "get";
+export let title = void 0;
+export let action = void 0;
 const dispatch = createEventDispatcher();
 const onSubmit = (e) => {
   e.preventDefault();
@@ -7,6 +10,8 @@ const onSubmit = (e) => {
 };
 </script>
 
-<form {action} on:submit={onSubmit}>
-	<slot />
-</form>
+<Section {title}>
+	<form {method} {action} on:submit={onSubmit}>
+		<slot />
+	</form>
+</Section>

package/dist/forms/form.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        action?: "get" | "post" | "put" | "delete" | undefined;
+        method?: "get" | "post" | "put" | "delete" | undefined;
+        title?: string | undefined;
+        action?: string | undefined;
     };
     events: {
         submit: CustomEvent<void>;

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

@@ -0,0 +1,25 @@
+<script>import FormField from "../form-field.svelte";
+import FormLabel from "../form-label.svelte";
+export let size = "md";
+export let value;
+</script>
+
+<FormField {size}>
+	{#if $$slots.default}
+		<FormLabel><slot /></FormLabel>
+	{/if}
+	<div class="input">
+		{value}
+	</div>
+</FormField>
+
+<style>
+	.input {
+		background-color: transparent;
+		line-height: 2rem;
+		font-size: 1rem;
+		width: 100%;
+		padding-left: 1rem;
+		border-bottom: solid 1px var(--form-input-border, black);
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../index.js';
+declare const __propDef: {
+    props: {
+        size?: FormFieldSizeOptions | undefined;
+        value: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type InfoBoxProps = typeof __propDef.props;
+export type InfoBoxEvents = typeof __propDef.events;
+export type InfoBoxSlots = typeof __propDef.slots;
+export default class InfoBox extends SvelteComponent<InfoBoxProps, InfoBoxEvents, InfoBoxSlots> {
+}
+export {};

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

@@ -113,7 +113,7 @@ triggerSearch();
 		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
 			<AngleUpIcon />
 		</button>
-		{#if text}
+		{#if text && searchable}
 			<button type="button" class="clear" on:click={clear} on:keydown={clear}> X </button>
 		{/if}
 		<div class="dropdown">

package/dist/generic/divider/divider.svelte

@@ -3,8 +3,7 @@
 <style>hr {
   border: 0;
   height: 0.1rem;
-  background: #333;
-  background-image: linear-gradient(to right, #ccc, #333, #ccc);
+  background: var(--divider-color, rgba(127, 127, 127, 0.5));
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }</style>

package/dist/generic/header/header.svelte

@@ -1,16 +1,18 @@
 <script>import FlexRow from "../../layout/flex-row.svelte";
-import Heading from "../../typography/heading.svelte";
+import Headline from "../../typography/headline.svelte";
 import Subtitle from "../../typography/subtitle.svelte";
-export let level = 1;
-export let title;
+import { getContext } from "svelte";
+const section = getContext("section");
+export let level = section?.level || 2;
+export let title = section?.title || "";
 export let subtitle = "";
 export let underline = false;
 </script>
 
-<header class:underline>
+<header class:underline data-level={level}>
 	<FlexRow>
 		<hgroup>
-			<Heading {level}>{title}</Heading>
+			<Headline {level}>{title}</Headline>
 			{#if subtitle}
 				<Subtitle {level}>{subtitle}</Subtitle>
 			{/if}

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

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../../types/generic.js';
 declare const __propDef: {
     props: {
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-        title: string;
+        level?: SectionLevel | undefined;
+        title?: string | undefined;
         subtitle?: string | undefined;
         underline?: boolean | undefined;
     };

package/dist/generic/panel/panel.svelte

@@ -1,4 +1,4 @@
-<script>export let title;
+<script>export let title = void 0;
 export let border = true;
 </script>
 

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        title: string;
+        title?: string | undefined;
         border?: boolean | undefined;
     };
     events: {

package/dist/generic/section/section.svelte

@@ -1,9 +1,20 @@
-<section>
+<script>import { setContext } from "svelte";
+import Header from "../header/header.svelte";
+export let title = void 0;
+export let level = 2;
+setContext("section", { level, title });
+</script>
+
+<section class="level-{level}">
+	{#if title}
+		<Header />
+	{/if}
 	<slot />
 </section>
 
 <style>section {
   padding: 0;
-  margin: 1rem 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   font-family: var(--base-font-family, sans-serif);
 }</style>

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

@@ -1,21 +1,9 @@
-/** @typedef {typeof __propDef.props}  SectionProps */
-/** @typedef {typeof __propDef.events}  SectionEvents */
-/** @typedef {typeof __propDef.slots}  SectionSlots */
-export default class Section extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type SectionProps = typeof __propDef.props;
-export type SectionEvents = typeof __propDef.events;
-export type SectionSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../../types/generic.js';
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        title?: string | undefined;
+        level?: SectionLevel | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type SectionProps = typeof __propDef.props;
+export type SectionEvents = typeof __propDef.events;
+export type SectionSlots = typeof __propDef.slots;
+export default class Section extends SvelteComponent<SectionProps, SectionEvents, SectionSlots> {
+}
 export {};

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as FormLabel } from './forms/form-label.svelte';
 export { default as Form } from './forms/form.svelte';
 export { default as FormHeader } from './forms/form-header.svelte';
 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 Card } from './generic/card/card.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';
 export { default as Link } from './generic/link/link.svelte';
@@ -62,7 +64,7 @@ export { default as TableFooter } from './tables/table-footer.svelte';
 export { default as TableFooterCell } from './tables/table-footer-cell.svelte';
 export { default as TableFooterRow } from './tables/table-footer-row.svelte';
 export { default as TableRow } from './tables/table-row.svelte';
-export { default as Heading } from './typography/heading.svelte';
+export { default as Headline } from './typography/headline.svelte';
 export { default as Subtitle } from './typography/subtitle.svelte';
 export { default as Text } from './typography/text.svelte';
 export { default as CodeBlock } from './typography/code-block.svelte';

package/dist/index.js

@@ -17,6 +17,8 @@ export { default as FormLabel } from './forms/form-label.svelte';
 export { default as Form } from './forms/form.svelte';
 export { default as FormHeader } from './forms/form-header.svelte';
 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';
 // Generic
 export { default as Card } from './generic/card/card.svelte';
 export { default as Divider } from './generic/divider/divider.svelte';
@@ -69,7 +71,7 @@ export { default as TableFooterCell } from './tables/table-footer-cell.svelte';
 export { default as TableFooterRow } from './tables/table-footer-row.svelte';
 export { default as TableRow } from './tables/table-row.svelte';
 // Typography
-export { default as Heading } from './typography/heading.svelte';
+export { default as Headline } from './typography/headline.svelte';
 export { default as Subtitle } from './typography/subtitle.svelte';
 export { default as Text } from './typography/text.svelte';
 export { default as CodeBlock } from './typography/code-block.svelte';

package/dist/modals/alert.svelte

@@ -6,12 +6,17 @@ 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";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
 export let open = false;
 export let title = void 0;
 export let size = "md";
 export let buttonText = "OK";
 export let showCloseButton = true;
-const close = () => open = false;
+const close = () => {
+  dispatch("close");
+  open = false;
+};
 </script>
 
 {#if open}

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         showCloseButton?: boolean | undefined;
     };
     events: {
+        close: CustomEvent<void>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/modals/confirm.svelte

@@ -15,12 +15,12 @@ export let noText = "No";
 export let showCloseButton = true;
 const dispatch = createEventDispatcher();
 const no = () => {
-  open = false;
   dispatch("no");
+  open = false;
 };
 const yes = () => {
-  open = false;
   dispatch("yes");
+  open = false;
 };
 </script>
 

package/dist/modals/dialog-window.svelte

@@ -1,7 +1,10 @@
 <script>export let size = "md";
+const captureClick = (e) => {
+  e.stopPropagation();
+};
 </script>
 
-<div class={size}>
+<div class={size} on:click={captureClick}>
 	<slot />
 </div>
 

package/dist/modals/modal.svelte

@@ -2,10 +2,15 @@
 import Dialog from "./dialog-window.svelte";
 import Overlay from "../generic/overlay.svelte";
 import DialogCloseButton from "./dialog-close-button.svelte";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
 export let open = false;
 export let size = "md";
 export let showCloseButton = true;
-const close = () => open = false;
+const close = () => {
+  dispatch("close");
+  open = false;
+};
 </script>
 
 {#if open}

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         showCloseButton?: boolean | undefined;
     };
     events: {
+        close: CustomEvent<void>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/tables/data-grid.svelte

@@ -8,10 +8,11 @@ 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 Loading from "../placeholders/loading.svelte";
 import Text from "../typography/text.svelte";
 import TableCaption from "./table-caption.svelte";
 export let caption = "";
-export let rows;
+export let rows = void 0;
 export let cols;
 export let pagination = void 0;
 export let editRow = void 0;
@@ -19,7 +20,7 @@ export let deleteRow = void 0;
 const getColType = (col) => {
   if (col.type)
     return col.type;
-  if (rows.length === 0)
+  if (!rows?.length)
     return "string";
   return typeof rows[0][col.key];
 };
@@ -44,7 +45,7 @@ $:
 $:
   colCount = Math.max(1, cols.filter((col) => !col.hide).length) + (hasActionRow ? 1 : 0);
 $:
-  totalPages = pagination ? Math.ceil((pagination.total || rows.length) / pagination.perPage) : 1;
+  totalPages = pagination && rows ? Math.ceil((pagination.total || rows.length) / pagination.perPage) : 1;
 </script>
 
 <Table>
@@ -64,11 +65,15 @@ $:
 		</TableHeaderRow>
 	</TableHeader>
 	<TableBody>
-		{#if rows.length == 0}
+		{#if !rows?.length}
 			<TableRow>
 				<TableCell colspan={colCount}>
 					<div class="empty">
-						<Text>No data</Text>
+						{#if rows === undefined}
+							<Loading />
+						{:else}
+							<Text>No data</Text>
+						{/if}
 					</div>
 				</TableCell>
 			</TableRow>

package/dist/tables/data-grid.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DataCol, DataRow, Pagination } from '../types/data.js';
 declare const __propDef: {
     props: {
         caption?: string | undefined;
-        rows: DataRow[];
+        rows?: DataRow[] | undefined;
         cols: DataCol[];
         pagination?: Pagination | undefined;
         editRow?: ((row: DataRow) => unknown) | undefined;

package/dist/types/generic.d.ts

@@ -0,0 +1 @@
+export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/types/generic.js

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

package/dist/typography/headline.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { SectionLevel } from '../types/generic.js';
+declare const __propDef: {
+    props: {
+        transform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+        level?: SectionLevel | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeadlineProps = typeof __propDef.props;
+export type HeadlineEvents = typeof __propDef.events;
+export type HeadlineSlots = typeof __propDef.slots;
+export default class Headline extends SvelteComponent<HeadlineProps, HeadlineEvents, HeadlineSlots> {
+}
+export {};

package/package.json

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

package/dist/typography/heading.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        transform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HeadingProps = typeof __propDef.props;
-export type HeadingEvents = typeof __propDef.events;
-export type HeadingSlots = typeof __propDef.slots;
-export default class Heading extends SvelteComponent<HeadingProps, HeadingEvents, HeadingSlots> {
-}
-export {};