sveltacular 0.0.9 → 0.0.11

package/dist/icons/hamburger-icon.svelte

@@ -0,0 +1,15 @@
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 17 14"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M1 1h15M1 7h15M1 13h15"
+	/>
+</svg>

package/dist/icons/hamburger-icon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HamburgerIconProps */
+/** @typedef {typeof __propDef.events}  HamburgerIconEvents */
+/** @typedef {typeof __propDef.slots}  HamburgerIconSlots */
+export default class HamburgerIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HamburgerIconProps = typeof __propDef.props;
+export type HamburgerIconEvents = typeof __propDef.events;
+export type HamburgerIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -1,7 +1,14 @@
-<script>export let isFixed = true;
+<script>import { setContext } from "svelte";
+export let isFixed = true;
 export let position = "top";
 export let size = "md";
 export let padding = "md";
+setContext("app-bar", {
+  isFixed,
+  position,
+  size,
+  padding
+});
 </script>
 
 <header class="{position} {size} padding-{padding} {isFixed ? 'fixed' : 'absolute'}">
@@ -9,10 +16,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 +59,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,51 @@
+<script>import { getContext } from "svelte";
+export let href;
+export let title;
+const open = getContext("app-nav-state");
+</script>
+
+<a {href} class={$open ? 'open' : 'closed'}>
+	{#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;
+}
+
+@media (max-width: 640px) {
+  a.open {
+    flex-direction: row;
+    gap: 1rem;
+    width: 100%;
+    padding: 1rem;
+  }
+  a.open:hover {
+    text-decoration: none;
+    background-color: #bbb;
+  }
+  a.open .title {
+    flex-grow: 1;
+  }
+  a.open .icon {
+    width: 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,110 @@
+<script>import HamburgerIcon from "../../icons/hamburger-icon.svelte";
+import { getContext, setContext } from "svelte";
+import { get, writable } from "svelte/store";
+export let align = "right";
+export let spacing = "medium";
+const open = writable(false);
+setContext("app-nav-state", open);
+const toggle = () => open.set(!get(open));
+const context = getContext("app-bar");
+const collapse = context.position !== "bottom" ? "collapse" : "";
+</script>
+
+<div class="icon {$open ? 'open' : 'closed'} {collapse}">
+	<button on:click={toggle}>
+		<HamburgerIcon />
+	</button>
+</div>
+<nav class="{align} {spacing} {collapse} {$open ? 'open' : 'closed'}">
+	<slot />
+</nav>
+
+<style>.icon {
+  display: none;
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  gap: 1rem;
+  margin: 1rem;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+nav.left, nav.start {
+  justify-content: flex-start;
+}
+nav.center {
+  justify-content: center;
+}
+nav.right {
+  justify-content: flex-end;
+}
+nav.none {
+  gap: 0;
+}
+nav.tight {
+  gap: 0.5rem;
+}
+nav.medium {
+  gap: 1rem;
+}
+nav.loose {
+  gap: 2rem;
+}
+nav.space-evenly {
+  justify-content: space-evenly;
+}
+nav.space-between {
+  justify-content: space-between;
+}
+nav.space-around {
+  justify-content: space-around;
+}
+
+/* Small screens */
+@media (max-width: 640px) {
+  .icon.collapse {
+    display: block;
+    justify-content: flex-end;
+    align-content: center;
+    width: 30%;
+    height: 100%;
+    text-align: right;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .icon.collapse button {
+    appearance: none;
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    height: 100%;
+    max-width: 2.5rem;
+    cursor: pointer;
+  }
+  .icon.collapse.open {
+    opacity: 0.3;
+  }
+  nav.collapse {
+    display: none;
+  }
+  nav.collapse.open {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: auto;
+    min-width: 50%;
+    box-shadow: -2px 4px 3px 0px black;
+    background: var(--nav-bg, #fff);
+    color: var(--nav-fg, #000);
+    margin: 0;
+    padding: 0;
+    gap: 0;
+  }
+}</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        align?: "center" | "end" | "start" | "left" | "right" | undefined;
+        spacing?: "none" | "medium" | "tight" | "loose" | "space-evenly" | "space-around" | "space-between" | 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/package.json

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