@functionalcms/svelte-components 0.9.2 → 0.10.1

package/dist/components/Header.svelte

@@ -1,26 +1,25 @@
 <script>import { Header, HeaderNav, HeaderNavItem, MenuItem } from "agnostic-svelte";
+import Logo from "./Logo.svelte";
 import { Visiblity } from "./HeaderNavigationItem.js";
-import { get } from "svelte/store";
+import { Position } from "./Position";
 export let companyName;
-export let logoUrl;
-export let pages;
-export let authentication;
-const selectVisible = (pages2, visiblity) => {
-  console.log(visiblity);
-  return pages2.filter((page) => page.visiblity === Visiblity.Always || page.visiblity === visiblity);
-};
+export let pages = [];
+export let authentication = false;
+export let logoPosition = Position.Left;
+const selectVisible = (pages2, visiblity) => pages2.filter(
+  (page) => page?.visiblity === Visiblity.Always || page?.visiblity === visiblity
+);
 $:
   visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
 $:
   visibleNavItems = selectVisible(pages, visibility);
 </script>
-<div class="header">
+
+<header>
 	<Header>
-		<div slot="logoleft">
-			<a href="/">
-				<img src={logoUrl} alt={companyName} />
-			</a>
-		</div>
+		{#if logoPosition == Position.Left}
+			<Logo slot="logoright" {companyName} />
+		{/if}
 		<HeaderNav>
 			{#each visibleNavItems as page}
 				<HeaderNavItem>
@@ -30,5 +29,8 @@ $:
 				</HeaderNavItem>
 			{/each}
 		</HeaderNav>
+		{#if logoPosition == Position.Right}
+			<Logo slot="logoright" {companyName} />
+		{/if}
 	</Header>
-</div>
+</header>

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

@@ -1,19 +1,20 @@
 import { SvelteComponent } from "svelte";
+import { Position } from "./Position";
 import type { HeaderNavigationItem } from './HeaderNavigationItem.js';
 declare const __propDef: {
     props: {
         /**
              * @type {string}
              */ companyName: string;
-        /**
-             * @type {string}
-             */ logoUrl: string;
         /**
              * @type {HeaderNavigationItem[]}
-             */ pages: HeaderNavigationItem[];
+             */ pages?: HeaderNavigationItem[] | undefined;
         /**
              * @type {Readonly<bool>}
-             */ authentication: boolean;
+             */ authentication?: boolean | undefined;
+        /**
+             * @type {Position}
+             */ logoPosition?: Position | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Logo.svelte

@@ -0,0 +1,10 @@
+<script>import { Position } from "./Position";
+import logoUrl from "../images/logo.png";
+export let companyName;
+</script>
+
+<div>
+    <a href="/">
+        <img src={logoUrl} alt={companyName} />
+    </a>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * @type {string}
+             */ companyName: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoProps = typeof __propDef.props;
+export type LogoEvents = typeof __propDef.events;
+export type LogoSlots = typeof __propDef.slots;
+export default class Logo extends SvelteComponent<LogoProps, LogoEvents, LogoSlots> {
+}
+export {};

package/dist/components/Position.d.ts

@@ -0,0 +1,5 @@
+export declare enum Position {
+    Left = 0,
+    Middle = 1,
+    Right = 2
+}

package/dist/components/Position.js

@@ -0,0 +1,6 @@
+export var Position;
+(function (Position) {
+    Position[Position["Left"] = 0] = "Left";
+    Position[Position["Middle"] = 1] = "Middle";
+    Position[Position["Right"] = 2] = "Right";
+})(Position || (Position = {}));

package/dist/components/SimpleFooter.svelte

@@ -0,0 +1,28 @@
+<script>
+    /**
+     * @type {string}
+     */
+    export let companyName = "";
+    /**
+     * @type {string}
+     */
+    export let motto = "";
+
+	import logoUrl from '../images/logo_footer.png'
+</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>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SimpleFooterProps */
+/** @typedef {typeof __propDef.events}  SimpleFooterEvents */
+/** @typedef {typeof __propDef.slots}  SimpleFooterSlots */
+export default class SimpleFooter extends SvelteComponent<{
+    companyName?: string | undefined;
+    motto?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SimpleFooterProps = typeof __propDef.props;
+export type SimpleFooterEvents = typeof __propDef.events;
+export type SimpleFooterSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        companyName?: string | undefined;
+        motto?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import Box from './components/Box.svelte';
 import Hero from './components/Hero.svelte';
 import Header from './components/Header.svelte';
-import Footer from './components/Footer.svelte';
+import SimpleFooter from './components/Footer.svelte';
 import { authStore } from './authStore.js';
 import { Visiblity, HeaderNavigationItem } from './components/HeaderNavigationItem.js';
-export { Box, Hero, Header, Footer, authStore, Visiblity, HeaderNavigationItem };
+import { Position } from './components/Position.js';
+export { Box, Hero, Header, SimpleFooter, authStore, Visiblity, HeaderNavigationItem, Position };

package/dist/index.js

@@ -2,7 +2,8 @@
 import Box from './components/Box.svelte';
 import Hero from './components/Hero.svelte';
 import Header from './components/Header.svelte';
-import Footer from './components/Footer.svelte';
+import SimpleFooter from './components/Footer.svelte';
 import { authStore } from './authStore.js';
 import { Visiblity, HeaderNavigationItem } from './components/HeaderNavigationItem.js';
-export { Box, Hero, Header, Footer, authStore, Visiblity, HeaderNavigationItem };
+import { Position } from './components/Position.js';
+export { Box, Hero, Header, SimpleFooter, authStore, Visiblity, HeaderNavigationItem, Position };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "0.9.2",
+	"version": "0.10.1",
 	"publishConfig": {
 		"access": "public"
 	},

package/dist/components/Footer.svelte

@@ -1,26 +0,0 @@
-<script>
-	 /**
-	 * @type {string}
-	 */
-	export let companyName;
-	 /**
-	 * @type {string}
-	 */
-	export let motto;
-	 /**
-	 * @type {string}
-	 */
-	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 Functional CMS</p>
-	  </aside>
-</footer>
-
-<style>
-</style>

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  FooterProps */
-/** @typedef {typeof __propDef.events}  FooterEvents */
-/** @typedef {typeof __propDef.slots}  FooterSlots */
-export default class Footer extends SvelteComponent<{
-    companyName: string;
-    motto: string;
-    logoUrl: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FooterProps = typeof __propDef.props;
-export type FooterEvents = typeof __propDef.events;
-export type FooterSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        companyName: string;
-        motto: string;
-        logoUrl: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};