sveltacular 0.0.28 → 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 Headline from "../typography/headline.svelte";
-export let title;
 export let level = 4;
+export let underline = true;
 </script>
 
-<div>
-	<Headline {level}>{title}</Headline>
+<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

@@ -2,13 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { SectionLevel } from '../types/generic.js';
 declare const __propDef: {
     props: {
-        title: string;
         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/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/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/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';

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';

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/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/package.json

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