sveltacular 0.0.8 → 0.0.10

package/dist/images/icon.svelte

@@ -0,0 +1,28 @@
+<script>export let href;
+export let color = "rgb(0, 0, 0)";
+</script>
+
+<span style={`--icon-path: url("${href}"); --icon-color: ${color};`} />
+
+<style>span {
+  display: block;
+  background-color: var(--icon-color, rgb(0, 0, 0));
+  width: 100%;
+  height: 100%;
+  -moz-mask-size: contain;
+  -moz-mask-image: var(--icon-path);
+  -moz-mask-repeat: no-repeat;
+  -moz-mask-position: center;
+  -ms-mask-size: contain;
+  -ms-mask-image: var(--icon-path);
+  -ms-mask-repeat: no-repeat;
+  -ms-mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-image: var(--icon-path);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  mask-image: var(--icon-path);
+  mask-repeat: no-repeat;
+  mask-position: center;
+}</style>

package/dist/images/icon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        href: string;
+        color?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/dist/images/image.svelte

@@ -1,16 +1,31 @@
-<script>export let sources;
+<script>export let src = "";
 export let alt = "";
+export let href = void 0;
+export let align = "center";
+$:
+  sources = Array.isArray(src) ? src : typeof src === "string" ? [{ url: src }] : [src];
 $:
   finalSource = sources[sources.length - 1];
 </script>
 
-<div>
-	<picture>
-		{#each sources as source}
-			<source srcset={source.url} media={source.media} />
-		{/each}
-		<img src={finalSource.url} {alt} />
-	</picture>
+<div class={align}>
+	{#if href}
+		<a {href}>
+			<picture>
+				{#each sources as source}
+					<source srcset={source.url} media={source.media} />
+				{/each}
+				<img src={finalSource.url} {alt} />
+			</picture>
+		</a>
+	{:else}
+		<picture>
+			{#each sources as source}
+				<source srcset={source.url} media={source.media} />
+			{/each}
+			<img src={finalSource.url} {alt} />
+		</picture>
+	{/if}
 	{#if $$slots.default}
 		<div class="caption">
 			<slot />
@@ -18,31 +33,43 @@ $:
 	{/if}
 </div>
 
-<style>
-	div {
-		position: relative;
-	}
-
-	.caption {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 1rem;
-		background: rgba(0, 0, 0, 0.5);
-		color: white;
-	}
-
-	picture {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	img {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-</style>
+<style>div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+div .caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+}
+div picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+div img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+div.left picture,
+div.left img {
+  object-position: left;
+}
+div.right picture,
+div.right img {
+  object-position: right;
+}</style>

package/dist/images/image.svelte.d.ts

@@ -1,11 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        sources: Array<{
+        src?: string | {
             url: string;
-            media?: string;
-        }>;
+            media?: string | undefined;
+        } | {
+            url: string;
+            media?: string | undefined;
+        }[] | undefined;
         alt?: string | undefined;
+        href?: string | undefined;
+        align?: "center" | "left" | "right" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as Pill } from './generic/pill/pill.svelte';
 export { default as Scorecard } from './generic/scorecard/scorecard.svelte';
 export { default as Overlay } from './generic/overlay.svelte';
 export { default as Image } from './images/image.svelte';
+export { default as Icon } from './images/icon.svelte';
 export { default as Menu } from './generic/menu/menu.svelte';
 export { default as Date } from './generic/date/date.svelte';
 export { default as Panel } from './generic/panel/panel.svelte';
@@ -43,6 +44,9 @@ export { default as Breadcrumbs } from './navigation/breadcrumbs/breadcrumbs.sve
 export { default as SideBar } from './navigation/side-bar/side-bar.svelte';
 export { default as TabGroup } from './navigation/tabs/tab-group.svelte';
 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 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

@@ -23,6 +23,7 @@ export { default as Pill } from './generic/pill/pill.svelte';
 export { default as Scorecard } from './generic/scorecard/scorecard.svelte';
 export { default as Overlay } from './generic/overlay.svelte';
 export { default as Image } from './images/image.svelte';
+export { default as Icon } from './images/icon.svelte';
 export { default as Menu } from './generic/menu/menu.svelte';
 export { default as Date } from './generic/date/date.svelte';
 export { default as Panel } from './generic/panel/panel.svelte';
@@ -48,6 +49,9 @@ export { default as Breadcrumbs } from './navigation/breadcrumbs/breadcrumbs.sve
 export { default as SideBar } from './navigation/side-bar/side-bar.svelte';
 export { default as TabGroup } from './navigation/tabs/tab-group.svelte';
 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';
 // Tables
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';

package/dist/navigation/app-bar/app-bar.svelte

@@ -9,10 +9,12 @@ export let padding = "md";
 </header>
 
 <style>header {
-  display: block;
-  background: #fff;
-  color: #000;
-  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: var(--nav-bg, #fff);
+  color: var(--nav-fg, #000);
   position: absolute;
   top: 0;
   left: 0;
@@ -50,4 +52,8 @@ header.padding-lg {
 }
 header.padding-xl {
   padding: 1.5rem;
+}
+header.isTransparent {
+  background: transparent;
+  color: inherit;
 }</style>

package/dist/navigation/app-bar/app-logo.svelte

@@ -0,0 +1,7 @@
+<script>import Image from "../../images/image.svelte";
+export let src;
+export let alt;
+export let href;
+</script>
+
+<Image {src} {alt} {href} align="left" />

package/dist/navigation/app-bar/app-logo.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        src: string;
+        alt: string;
+        href: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppLogoProps = typeof __propDef.props;
+export type AppLogoEvents = typeof __propDef.events;
+export type AppLogoSlots = typeof __propDef.slots;
+export default class AppLogo extends SvelteComponent<AppLogoProps, AppLogoEvents, AppLogoSlots> {
+}
+export {};

package/dist/navigation/app-bar/app-nav-item.svelte

@@ -0,0 +1,30 @@
+<script>export let href;
+export let title;
+</script>
+
+<a {href}>
+	{#if $$slots.default}
+		<div class="icon">
+			<slot />
+		</div>
+	{/if}
+	<div class="title">{title}</div>
+</a>
+
+<style>a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  align-items: center;
+  height: 100%;
+  color: var(--nav-link-color, black);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--nav-link-hover-color, black);
+  text-decoration: underline;
+}
+a .icon {
+  width: 100%;
+  height: 1.5rem;
+}</style>

package/dist/navigation/app-bar/app-nav-item.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        href: string;
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AppNavItemProps = typeof __propDef.props;
+export type AppNavItemEvents = typeof __propDef.events;
+export type AppNavItemSlots = typeof __propDef.slots;
+export default class AppNavItem extends SvelteComponent<AppNavItemProps, AppNavItemEvents, AppNavItemSlots> {
+}
+export {};

package/dist/navigation/app-bar/app-nav.svelte

@@ -0,0 +1,57 @@
+<script>export let grow = false;
+export let align = "right";
+export let spacing = "medium";
+</script>
+
+<nav class="{grow ? 'grow' : ''} {align} {spacing}">
+	<slot />
+</nav>
+
+<style>
+	nav {
+		display: flex;
+		flex-grow: 0;
+		gap: 1rem;
+		margin: 1rem;
+		width: 100%;
+
+		&.grow {
+			flex-grow: 1;
+		}
+
+		&.left {
+			justify-content: left;
+			align-items: left;
+		}
+
+		&.center {
+			justify-content: center;
+			align-items: center;
+		}
+
+		&.right {
+			justify-content: right;
+			align-items: right;
+		}
+
+		&.none {
+			gap: 0;
+		}
+
+		&.tight {
+			gap: 0.5rem;
+		}
+
+		&.medium {
+			gap: 1rem;
+		}
+
+		&.loose {
+			gap: 2rem;
+		}
+
+		&.spread {
+			justify-content: space-evenly;
+		}
+	}
+</style>

package/dist/navigation/app-bar/app-nav.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        grow?: boolean | undefined;
+        align?: "center" | "left" | "right" | undefined;
+        spacing?: "none" | "medium" | "tight" | "loose" | "spread" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AppNavProps = typeof __propDef.props;
+export type AppNavEvents = typeof __propDef.events;
+export type AppNavSlots = typeof __propDef.slots;
+export default class AppNav extends SvelteComponent<AppNavProps, AppNavEvents, AppNavSlots> {
+}
+export {};

package/dist/navigation/breadcrumbs/breadcrumbs.svelte

@@ -3,9 +3,15 @@ import AngleRightIcon from "../../icons/angle-right-icon.svelte";
 import HomeIcon from "../../icons/home-icon.svelte";
 export let homeUrl = null;
 export let crumbs = [];
+export let size = "md";
+const getCrumLabel = (crumb) => {
+  if (typeof crumb === "string")
+    return crumb;
+  return crumb.label;
+};
 </script>
 
-<nav>
+<nav class={size}>
 	{#if homeUrl}
 		<li class="icon">
 			<Link href={homeUrl} display="block">
@@ -14,8 +20,8 @@ export let crumbs = [];
 		</li>
 	{/if}
 	{#each crumbs as crumb, i}
-		{#if typeof crumb === 'string'}
-			<li>{crumb}</li>
+		{#if typeof crumb === 'string' || !crumb.href}
+			<li>{getCrumLabel(crumb)}</li>
 		{:else}
 			<li>
 				<Link href={crumb.href}>
@@ -44,13 +50,23 @@ nav li {
   align-items: center;
   vertical-align: middle;
   margin-left: 0.5rem;
-  font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.5);
-  min-width: 12px;
 }
 nav li:first-child {
   margin-left: 0;
 }
 nav li.icon {
   padding-top: 2px;
+}
+nav.sm li {
+  font-size: 0.75rem;
+  min-width: 12px;
+}
+nav.md li {
+  font-size: 0.875rem;
+  min-width: 14px;
+}
+nav.lg li {
+  font-size: 1rem;
+  min-width: 16px;
 }</style>

package/dist/navigation/breadcrumbs/breadcrumbs.svelte.d.ts

@@ -4,8 +4,9 @@ declare const __propDef: {
         homeUrl?: string | null | undefined;
         crumbs?: (string | {
             label: string;
-            href: string;
+            href?: string | undefined;
         })[] | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/tables/data-grid.svelte

@@ -64,31 +64,41 @@ $:
 		</TableHeaderRow>
 	</TableHeader>
 	<TableBody>
-		{#each rows as row}
+		{#if rows.length == 0}
 			<TableRow>
-				{#each cols as col}
-					{#if !col.hide}
-						<TableCell type={col.type || typeof row[col.key]}>
-							{#if col.link}
-								<a href={col.link(row, col.key)}>{format(row, col.key)}</a>
-							{:else}
-								{format(row, col.key)}
+				<TableCell colspan={colCount}>
+					<div class="empty">
+						<Text>No data</Text>
+					</div>
+				</TableCell>
+			</TableRow>
+		{:else}
+			{#each rows as row}
+				<TableRow>
+					{#each cols as col}
+						{#if !col.hide}
+							<TableCell type={col.type || typeof row[col.key]}>
+								{#if col.link}
+									<a href={col.link(row, col.key)}>{format(row, col.key)}</a>
+								{:else}
+									{format(row, col.key)}
+								{/if}
+							</TableCell>
+						{/if}
+					{/each}
+					{#if hasActionRow}
+						<TableCell type="actions">
+							{#if editRow}
+								<button on:click={() => clickEdit(row)}>Edit</button>
+							{/if}
+							{#if deleteRow}
+								<button on:click={() => clickDelete(row)}>Delete</button>
 							{/if}
 						</TableCell>
 					{/if}
-				{/each}
-				{#if hasActionRow}
-					<TableCell type="actions">
-						{#if editRow}
-							<button on:click={() => clickEdit(row)}>Edit</button>
-						{/if}
-						{#if deleteRow}
-							<button on:click={() => clickDelete(row)}>Delete</button>
-						{/if}
-					</TableCell>
-				{/if}
-			</TableRow>
-		{/each}
+				</TableRow>
+			{/each}
+		{/if}
 	</TableBody>
 	{#if pagination}
 		<TableFooter>
@@ -102,3 +112,13 @@ $:
 		</TableFooter>
 	{/if}
 </Table>
+
+<style>
+	.empty {
+		text-align: center;
+		padding: 2rem;
+		text-transform: uppercase;
+		color: rgba(100, 100, 100, 0.5);
+		letter-spacing: 0.2rem;
+	}
+</style>

package/dist/types/data.d.ts

@@ -1,10 +1,10 @@
 export type DataRow = Record<string, unknown>;
-export type DataCol = {
+export type DataCol<T extends DataRow = DataRow> = {
     key: string;
     label: string;
     type?: string;
-    format?: (row: DataRow, key: string) => string;
-    link?: (row: DataRow, key: string) => string;
+    format?: (row: T, key: keyof T) => string;
+    link?: (row: T, key: keyof T) => string;
     hide?: boolean;
 };
 export type Pagination = {

package/package.json

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