@functionalcms/svelte-components 2.0.7 → 2.1.1

package/dist/components/Banner.svelte

@@ -0,0 +1,17 @@
+<script>export let background = "";
+export let css = "";
+$:
+  klasses = [
+    "flex",
+    css ? css : ""
+  ].filter((c) => c).join(" ");
+</script>
+<style>
+    div {
+        background: var(--functional-banner-background);
+    }
+</style>
+
+<div style="--functional-banner-background: {background};" class={klasses}>
+    <slot />
+</div>

package/dist/components/Banner.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        background?: string | undefined;
+        css?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BannerProps = typeof __propDef.props;
+export type BannerEvents = typeof __propDef.events;
+export type BannerSlots = typeof __propDef.slots;
+export default class Banner extends SvelteComponent<BannerProps, BannerEvents, BannerSlots> {
+}
+export {};

package/dist/components/Card.svelte

@@ -0,0 +1,137 @@
+<style>
+	/**
+	 * Cards
+	 *
+	 * I drew some inspiration from the article on media-query less cards:
+	 * https://css-tricks.com/how-to-make-a-media-query-less-card-component/
+	 */
+	.card,
+	.card-base {
+	  display: flex;
+	  flex-wrap: wrap;
+	  align-items: center;
+	  position: relative;
+	  box-sizing: border-box;
+	  width: 100%;
+	}
+	
+	.card-border {
+	  border: 1px solid var(--functional-card-border-color, var(--functional-gray-light));
+	}
+	
+	.card-rounded {
+	  border-radius: var(--functional-radius, 0.25rem);
+	}
+	
+	.card-shadow {
+	  box-shadow:
+		var(--functional-card-boxshadow1-offset-x, 0)
+		var(--functional-card-boxshadow1-offset-y, 0.375rem)
+		var(--functional-card-boxshadow1-blur, 0.5625rem)
+		var(--functional-card-boxshadow1-color, rgb(6 6 6 / 7.5%)),
+		var(--functional-card-boxshadow2-offset-x, 0) var(--functional-card-boxshadow2-offset-y, 0)
+		var(--functional-card-boxshadow2-blur, 1px)
+		var(--functional-card-boxshadow2-color, rgb(5 5 5 / 10%));
+	  border-radius: var(--functional-card-border-radius, var(--functional-radius, 0.25rem));
+	  overflow: hidden;
+	}
+	
+	.card-shadow:hover {
+	  box-shadow:
+		var(--functional-card-boxshadow1-offset-x, 0)
+		var(--functional-card-boxshadow1-offset-y, 0.375rem)
+		var(--functional-card-boxshadow1-blur, 0.875rem)
+		var(--functional-card-boxshadow1-color, rgb(4 4 4 / 10%)),
+		var(--functional-card-boxshadow2-offset-x, 0) var(--functional-card-boxshadow2-offset-y, 0)
+		var(--functional-card-boxshadow2-blur, 2px)
+		var(--functional-card-boxshadow2-color, rgb(3 3 3 / 10%));
+	}
+	
+	/**
+	 * Animates the y position and box shadow on hover
+	 */
+	.card-animated {
+	  transition:
+		box-shadow ease-out 5s,
+		transform var(--functional-timing-fast)
+		cubic-bezier(
+		  var(--functional-card-cubic-1, 0.39),
+		  var(--functional-card-cubic-2, 0.575),
+		  var(--functional-card-cubic-3, 0.565),
+		  var(--functional-card-cubic-4, 1)
+		);
+	}
+	
+	.card-animated:hover {
+	  transform: translateY(var(--functional-card-translate-y-hover, -3px));
+	  transition:
+		box-shadow ease-out var(--functional-timing-fast),
+		transform var(--functional-timing-slow)
+		cubic-bezier(
+		  var(--functional-card-cubic-1, 0.39),
+		  var(--functional-card-cubic-2, 0.575),
+		  var(--functional-card-cubic-3, 0.565),
+		  var(--functional-card-cubic-4, 1)
+		);
+	}
+	
+	@media (prefers-reduced-motion), (update: slow) {
+	  .card-animated,
+	  .card-animated:hover {
+		transition-duration: 0.001ms !important;
+	  }
+	}
+	
+	.card-stacked {
+	  flex-direction: column;
+	}
+	
+	.card-success {
+	  background: var(--functional-action-light);
+	  color: var(--functional-action-dark);
+	}
+	
+	.card-info {
+	  background: var(--functional-primary-light);
+	  color: var(--functional-primary-dark);
+	}
+	
+	.card-error {
+	  background: var(--functional-error-light);
+	  color: var(--functional-error-dark);
+	}
+	
+	.card-warning {
+	  background: var(--functional-warning-light);
+	  color: var(--functional-warning-dark);
+	}
+	
+	</style>
+	
+	<script>
+	  export let isAnimated = false;
+	  export let isSkinned = true;
+	  export let isStacked = false;
+	  export let isShadow = false;
+	  export let isBorder = false;
+	  export let isRounded = false;
+	  export let type = "";
+	  export let css = "";
+	
+	  let klasses = [
+		isSkinned ? "card" : "card-base",
+		isAnimated ? "card-animated" : "",
+		isStacked ? "card-stacked" : "",
+		isShadow ? "card-shadow" : "",
+		isRounded ? "card-rounded" : "",
+		isBorder ? "card-border" : "",
+		type ? `card-${type}` : "",
+		css ? `${css}` : "",
+	  ]
+		.filter((klass) => klass.length)
+		.join(" ");
+	</script>
+	
+	<div class={klasses} on:click on:focus on:blur>
+	  <slot />
+	</div>

package/dist/components/Card.svelte.d.ts

@@ -0,0 +1,49 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponent<{
+    type?: string | undefined;
+    css?: string | undefined;
+    isAnimated?: boolean | undefined;
+    isSkinned?: boolean | undefined;
+    isStacked?: boolean | undefined;
+    isShadow?: boolean | undefined;
+    isBorder?: boolean | undefined;
+    isRounded?: boolean | undefined;
+}, {
+    click: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+        css?: string | undefined;
+        isAnimated?: boolean | undefined;
+        isSkinned?: boolean | undefined;
+        isStacked?: boolean | undefined;
+        isShadow?: boolean | undefined;
+        isBorder?: boolean | undefined;
+        isRounded?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/components/Layout.svelte

@@ -0,0 +1,41 @@
+<style>
+    :global(html), :global(body), :global(body > div) {
+        height: 100%;
+    }
+    :global(body > div) {
+        display: flex;
+        flex-direction: column;
+    }
+    :global(body > footer) {
+        flex-shrink: 0;
+    } 
+    div {
+        flex: 1 0 auto;
+    }
+    footer {
+        flex-shrink: 0;
+    }
+</style>
+
+<div>
+    {#if $$slots.header}
+        <header>
+            <slot name="header" />
+        </header>
+    {/if}
+    <main>
+        <slot />
+    </main>
+    {#if $$slots.footer}
+        <footer>
+            <slot name="footer" />
+        </footer>
+    {/if}
+    <div id="drawer-root"></div>
+</div>
+    
+{#if $$slots.sticky_footer}
+<footer>
+    <slot name="sticky_footer" />
+</footer>
+{/if}

package/dist/components/Layout.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  LayoutProps */
+/** @typedef {typeof __propDef.events}  LayoutEvents */
+/** @typedef {typeof __propDef.slots}  LayoutSlots */
+export default class Layout extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    footer: {};
+    sticky_footer: {};
+}> {
+}
+export type LayoutProps = typeof __propDef.props;
+export type LayoutEvents = typeof __propDef.events;
+export type LayoutSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+        sticky_footer: {};
+    };
+};
+export {};

package/dist/components/Logo.svelte

@@ -1,10 +1,22 @@
-<script>import { Position } from "./Position";
-export let companyName;
+<style>
+	a {
+		display: var(--functional-logo-display, 'inline-block');
+	}	
+	a img {
+		width: 80vw;
+	}
+	
+	@media (min-width: 960px) {
+		a img {
+			width: 100%;
+		}
+	}	
+</style>
+
+<script>export let companyName;
 export let logoUrl;
 </script>
 
-<div>
-    <a href="/">
-        <img src={logoUrl} alt={companyName} />
-    </a>
-</div>
+<a href="/">
+	<img src={logoUrl} alt={companyName} />
+</a>

package/dist/components/SimpleFooter.svelte

@@ -1,20 +1,18 @@
+<style>
+    aside {
+        text-align: center;
+        font-size: smaller;
+    }
+</style>
+
 <script>export let companyName = "";
 export let motto = "";
 export let logoUrl;
 </script>
 
-<footer class="footer">
-    <aside class="items-center grid-flow-col">
-        <img src={logoUrl} alt={companyName} />
-        <p>{motto}</p>
-        <p>Copyright © 2023 - All right reserved by {companyName}</p>
-        <p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
-    </aside>
-</footer>
-
-<style>
-    footer {
-        text-align: center;
-        font-size: smaller;
-    }
-</style>
+<aside class="items-center grid-flow-col">
+    <img src={logoUrl} alt={companyName} />
+    <p>{motto}</p>
+    <p>Copyright © 2024 - All right reserved by {companyName}</p>
+    <p>Powerd by <a href="https://functional-cms.com">Functional CMS</a></p>
+</aside>

package/dist/components/Spacer.svelte

@@ -0,0 +1,18 @@
+<style>
+    div {
+        display: block;
+        height: 100%;
+    }
+</style>
+
+<script>import { Sizes } from "./Styling";
+export let width = Sizes.V0;
+export let height = Sizes.V0;
+const klasses = [
+  width ? `w${width}` : "",
+  height ? `h${height}` : ""
+].filter((c) => c).join(" ");
+</script>
+<div class={klasses}>
+
+</div>

package/dist/components/Spacer.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { Sizes } from "./Styling";
+declare const __propDef: {
+    props: {
+        width?: Sizes | undefined;
+        height?: Sizes | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpacerProps = typeof __propDef.props;
+export type SpacerEvents = typeof __propDef.events;
+export type SpacerSlots = typeof __propDef.slots;
+export default class Spacer extends SvelteComponent<SpacerProps, SpacerEvents, SpacerSlots> {
+}
+export {};

package/dist/components/Styling.d.ts

@@ -0,0 +1,47 @@
+export declare enum Justify {
+    Start = "start",
+    End = "end",
+    Center = "center",
+    Between = "between",
+    Around = "around"
+}
+export declare enum Placement {
+    Start = "start",
+    End = "end",
+    Top = "top",
+    Up = "up",
+    Bottom = "bottom",
+    Content = "content"
+}
+export declare enum Orientation {
+    Row = "row",
+    Column = "column",
+    DynamicRow = "row-dynamic"
+}
+export declare enum Position {
+    Left = 0,
+    Middle = 1,
+    Right = 2
+}
+export declare enum Sizes {
+    V0 = 0,
+    V2 = 2,
+    V4 = 4,
+    V6 = 6,
+    V8 = 8,
+    V10 = 10,
+    V12 = 12,
+    V14 = 14,
+    V16 = 16,
+    V18 = 18,
+    V20 = 20,
+    V24 = 24,
+    V32 = 32,
+    V36 = 36,
+    V40 = 40,
+    V48 = 48,
+    V56 = 56,
+    V64 = 64,
+    V72 = 72,
+    V80 = 80
+}

package/dist/components/Styling.js

@@ -0,0 +1,52 @@
+export var Justify;
+(function (Justify) {
+    Justify["Start"] = "start";
+    Justify["End"] = "end";
+    Justify["Center"] = "center";
+    Justify["Between"] = "between";
+    Justify["Around"] = "around";
+})(Justify || (Justify = {}));
+export var Placement;
+(function (Placement) {
+    Placement["Start"] = "start";
+    Placement["End"] = "end";
+    Placement["Top"] = "top";
+    Placement["Up"] = "up";
+    Placement["Bottom"] = "bottom";
+    Placement["Content"] = "content";
+})(Placement || (Placement = {}));
+export var Orientation;
+(function (Orientation) {
+    Orientation["Row"] = "row";
+    Orientation["Column"] = "column";
+    Orientation["DynamicRow"] = "row-dynamic";
+})(Orientation || (Orientation = {}));
+export var Position;
+(function (Position) {
+    Position[Position["Left"] = 0] = "Left";
+    Position[Position["Middle"] = 1] = "Middle";
+    Position[Position["Right"] = 2] = "Right";
+})(Position || (Position = {}));
+export var Sizes;
+(function (Sizes) {
+    Sizes[Sizes["V0"] = 0] = "V0";
+    Sizes[Sizes["V2"] = 2] = "V2";
+    Sizes[Sizes["V4"] = 4] = "V4";
+    Sizes[Sizes["V6"] = 6] = "V6";
+    Sizes[Sizes["V8"] = 8] = "V8";
+    Sizes[Sizes["V10"] = 10] = "V10";
+    Sizes[Sizes["V12"] = 12] = "V12";
+    Sizes[Sizes["V14"] = 14] = "V14";
+    Sizes[Sizes["V16"] = 16] = "V16";
+    Sizes[Sizes["V18"] = 18] = "V18";
+    Sizes[Sizes["V20"] = 20] = "V20";
+    Sizes[Sizes["V24"] = 24] = "V24";
+    Sizes[Sizes["V32"] = 32] = "V32";
+    Sizes[Sizes["V36"] = 36] = "V36";
+    Sizes[Sizes["V40"] = 40] = "V40";
+    Sizes[Sizes["V48"] = 48] = "V48";
+    Sizes[Sizes["V56"] = 56] = "V56";
+    Sizes[Sizes["V64"] = 64] = "V64";
+    Sizes[Sizes["V72"] = 72] = "V72";
+    Sizes[Sizes["V80"] = 80] = "V80";
+})(Sizes || (Sizes = {}));

package/dist/components/Well.svelte

@@ -0,0 +1,28 @@
+
+<style>
+    div {
+        width: 100%;
+        margin: 0px;
+    }
+    @media (min-width: 960px) {
+        div {
+            width: var(--functional-content-width);
+            margin: auto;
+        }    
+    }
+</style>
+
+<script>import { Orientation } from "../Styling";
+export let css = "";
+export let orientation = Orientation.Column;
+$:
+  klasses = [
+    "flex",
+    css ? css : "",
+    `flex-${orientation}`
+  ].filter((c) => c).join(" ");
+</script>
+
+<div class={klasses}>
+    <slot />
+</div>

package/dist/components/Well.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        css?: string | undefined;
+        orientation?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WellProps = typeof __propDef.props;
+export type WellEvents = typeof __propDef.events;
+export type WellSlots = typeof __propDef.slots;
+export default class Well extends SvelteComponent<WellProps, WellEvents, WellSlots> {
+}
+export {};

package/dist/components/menu/FlatMenu.svelte

@@ -0,0 +1,119 @@
+<script>import { Visiblity } from "../../Visiblity";
+import { HeaderNavigationItem } from "../../HeaderNavigationItem";
+import { afterNavigate } from "$app/navigation";
+import { page } from "$app/stores";
+export let pages = [];
+export let authentication = false;
+export let css = "";
+const selectVisible = (pages2, visiblity) => pages2.filter(
+  (page2) => page2?.visiblity === Visiblity.Always || page2?.visiblity === visiblity
+);
+$:
+  visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
+$:
+  visibleNavItems = selectVisible(pages, visibility);
+$:
+  selected = false;
+afterNavigate((navigation) => selected = false);
+</script>
+<style>
+    nav > ul {
+        margin: var(--functional-menu-margin, 'auto');
+        padding: var(--functional-menu-padding);
+        background: var(--functional-menu-background);
+
+        display: none;
+        
+        transition: all 1.25s;
+    }
+    nav > ul > li > a {
+        margin: var(--functional-menu-item-margin);
+        padding: var(--functional-menu-item-padding);
+        display: block;
+        text-align: center;
+
+        color: var(--functional-menu-item-color, var(--primary-color));
+        background: var(--functional-menu-item-background);
+        border-top: var(--functional-menu-item-border-top);
+        border-right: var(--functional-menu-item-border-right);
+        border-bottom: var(--functional-menu-item-border-bottom);
+        border-left: var(--functional-menu-item-border-left);
+    }
+    nav > ul > li > a:hover {
+        color: var(--functional-menu-item-color-hover, var(--primary-color));
+        background: var(--functional-menu-item-hover-background);
+        border-top: var(--functional-menu-item-hover-border-top);
+        border-right: var(--functional-menu-item-hover-border-right);
+        border-bottom: var(--functional-menu-item-hover-border-bottom);
+        border-left: var(--functional-menu-item-hover-border-left);
+    }
+    nav > ul > li[aria-current='true'] > a{
+        color: var(--functional-menu-item-color-selected, var(--primary-color));
+        background: var(--functional-menu-item-selected-background);
+        
+        border-top: var(--functional-menu-item-selected-border-top);
+        border-right: var(--functional-menu-item-selected-border-right);
+        border-bottom: var(--functional-menu-item-selected-border-bottom);
+        border-left: var(--functional-menu-item-selected-border-left);
+    }
+    .show-menu {
+      cursor: pointer;
+    }
+    .nav-icon {
+        display: inline-block;
+        font-size: 1.5em;
+        padding: 0.5em;
+        vertical-align: middle;
+    }
+
+    input.checkbox-menu[type="checkbox"] {
+        display: none;
+    }
+
+    input.checkbox-menu[type="checkbox"]:checked ~ ul {
+        display: block;
+    }
+
+    @media (max-width: 960px) {
+        nav > ul {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    }
+    @media (min-width: 960px) {
+        nav > ul {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        nav > ul > li > a {
+            display: block;
+            text-align: center;
+            height: 100%;
+        }
+        .show-menu {
+            display: none;
+        }
+    }
+</style>
+
+<nav class={css}>
+    <label for="id-show-menu" class="show-menu">
+        <div class="nav-icon">
+            &#9776;
+        </div>
+    </label>
+    <input type="checkbox" id="id-show-menu" class="checkbox-menu" role="button" bind:checked={selected}>
+    <ul>
+        {#each visibleNavItems as pageItem}
+            <li aria-current={$page.url.pathname === pageItem.path}>
+                <span class="screenreader-only">Navigate to {pageItem.name}</span>
+                <a on:click={pageItem.action} href={pageItem.path}>
+                    {pageItem.name}
+                </a>
+            </li>
+        {/each}
+    </ul>
+</nav>

package/dist/components/menu/FlatMenu.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        pages?: HeaderNavigationItem[] | undefined;
+        authentication?: boolean | undefined;
+        css?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlatMenuProps = typeof __propDef.props;
+export type FlatMenuEvents = typeof __propDef.events;
+export type FlatMenuSlots = typeof __propDef.slots;
+export default class FlatMenu extends SvelteComponent<FlatMenuProps, FlatMenuEvents, FlatMenuSlots> {
+}
+export {};