sveltacular 0.0.28 → 0.0.30

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

@@ -20,6 +20,8 @@ let text = getText();
 let open = false;
 let highlightIndex = -1;
 let filteredItems = [];
+$:
+  isSeachable = searchable || !!search;
 const onSelect = (e) => {
   value = e.detail.value;
   dispatch("change", value);
@@ -67,7 +69,7 @@ const onInputKeyPress = (e) => {
   }
 };
 const triggerSearch = debounce(async () => {
-  if (search && searchable) {
+  if (search && isSeachable) {
     items = await search(text);
   }
   updateText();
@@ -75,7 +77,7 @@ const triggerSearch = debounce(async () => {
 }, 300);
 const applyFilter = () => {
   const searchText = text.trim().toLowerCase();
-  filteredItems = searchText && searchable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
+  filteredItems = searchText && isSeachable ? items.map((item, index) => ({ ...item, index })).filter((item) => item.name.toLowerCase().includes(searchText)) : items.map((item, index) => ({ ...item, index }));
 };
 const clear = () => {
   text = "";
@@ -104,7 +106,7 @@ triggerSearch();
 			bind:value={text}
 			{required}
 			{disabled}
-			readonly={!searchable}
+			readonly={!isSeachable}
 			on:focus={() => (open = true)}
 			on:keyup={onInputKeyPress}
 			data-value={value}
@@ -113,7 +115,7 @@ triggerSearch();
 		<button type="button" class="icon" on:click={clickArrow} on:keydown={clickArrow}>
 			<AngleUpIcon />
 		</button>
-		{#if text}
+		{#if text && isSeachable}
 			<button type="button" class="clear" on:click={clear} on:keydown={clear}> X </button>
 		{/if}
 		<div class="dropdown">
@@ -177,5 +179,5 @@ div .dropdown {
   top: 100%;
   left: 0;
   width: 100%;
-  z-index: 1;
+  z-index: 3;
 }</style>

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

@@ -1,7 +1,9 @@
 <script>import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
+import { createEventDispatcher } from "svelte";
 const id = uniqueId();
+const dipatch = createEventDispatcher();
 export let value = "";
 export let placeholder = "";
 export let helperText = "";
@@ -36,6 +38,7 @@ const onInput = (e) => {
   } else if (textCase === "upper") {
     value = value.toUpperCase();
   }
+  dipatch("input", value);
 };
 </script>
 

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

@@ -21,6 +21,9 @@ declare const __propDef: {
         textCase?: 'lower' | 'upper' | undefined;
     };
     events: {
+        change: CustomEvent<string>;
+        input: CustomEvent<string>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -0,0 +1,26 @@
+<script>import TextBox from "../text-box/text-box.svelte";
+export let protocol = "https";
+export let value = "";
+export let size = "lg";
+export let placeholder = "example.com";
+const onInput = () => {
+  const urlParts = value.split("://");
+  if (["http", "https"].includes(urlParts[0])) {
+    protocol = urlParts[0];
+    value = urlParts[1];
+  }
+};
+</script>
+
+<TextBox
+	bind:value
+	type="text"
+	{placeholder}
+	prefix={protocol + '://'}
+	{size}
+	on:input={onInput}
+	on:change={onInput}
+	allowSpaces={false}
+>
+	<slot />
+</TextBox>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../index.js';
+import type { HttpProtocol } from '../../types/generic.js';
+declare const __propDef: {
+    props: {
+        protocol?: HttpProtocol | undefined;
+        value?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type UrlBoxProps = typeof __propDef.props;
+export type UrlBoxEvents = typeof __propDef.events;
+export type UrlBoxSlots = typeof __propDef.slots;
+export default class UrlBox extends SvelteComponent<UrlBoxProps, UrlBoxEvents, UrlBoxSlots> {
+}
+export {};

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,9 @@ 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 UrlBox } from './forms/url-box/url-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,9 @@ 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 UrlBox } from './forms/url-box/url-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/placeholders/progress.svelte

@@ -0,0 +1,36 @@
+<script>export let value = 0;
+</script>
+
+<div class="progress-bar" style="--progress-value: {value}%">
+	<div class="progress">
+		<div class="progress-value">{value}%</div>
+	</div>
+</div>
+
+<style>.progress-bar {
+  height: 2rem;
+  background-color: var(--base-color-fg, #ccc);
+  border-radius: 1rem;
+  margin-bottom: 1rem;
+}
+.progress-bar .progress {
+  height: 100%;
+  background-color: var(--primary-color, #00a);
+  color: white;
+  border-radius: 1rem;
+  transition: width 0.5s ease-in-out;
+  width: var(--progress-value, 0%);
+  min-width: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.progress-bar .progress-value {
+  color: var(--base-color-bg, #fff);
+  font-size: 1rem;
+  font-family: var(--base-font-family, sans-serif);
+  font-weight: 500;
+  line-height: 1.5rem;
+  padding: 0 0.5rem;
+  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+}</style>

package/dist/placeholders/progress.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ProgressProps = typeof __propDef.props;
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
+}
+export {};

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

@@ -1 +1,3 @@
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HttpProtocol = 'http' | 'https';
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';

package/package.json

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