@functionalcms/svelte-components 2.3.1 → 2.3.3

package/dist/components/Logo.svelte

@@ -1,22 +1,22 @@
-<style>
-	a {
-		display: var(--functional-logo-display, 'inline-block');
-	}	
-	a img {
-		width: 80vw;
-	}
-	
-	@media (min-width: 960px) {
-		a img {
-			width: 100%;
-		}
-	}	
-</style>
-
+<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>
-
-<a href="/">
-	<img src={logoUrl} alt={companyName} />
+</script>
+
+<a href="/">
+	<img src={logoUrl} alt={companyName} />
 </a>

package/dist/components/layouts/DefaultLayout.svelte

@@ -1,10 +1,28 @@
+<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>
+
 <script>import { page } from "$app/stores";
-import { title } from "../stores/title";
-import { meta } from "../stores/meta";
-export let follow = true;
-export let index = true;
-$:
-  robots = `${follow ? "follow" : "nofollow"}${index ? "index" : "noindex"}`;
+import { title, suffix } from "../../stores/title";
+import { metaDescription, metaKeywords } from "../../stores/meta";
+export let robots = "index, follow";
 </script>
 
 <svelte:head>
@@ -12,18 +30,17 @@ $:
 		data-goatcounter="https://tracking.functional-cms.com/count"
 		async
 		src="//gc.zgo.at/count.js"></script>
-    
-    <title>{$title}</title>
-    <meta name="og:title" property="og:title" content="{$title}" />
-    <meta name="twitter:card" content="{$title}" />
-	
+
+	<title>{$title}{$suffix}</title>
+    <meta name="og:title" property="og:title" content="{$title}{$suffix}" />
+    <meta name="twitter:card" content="{$title}{$suffix}" />
+
 	<meta name="robots" content={robots} />
-	<meta name="description" content={meta.description} />
-	<meta name="keywords" content={meta.keywords} />
+	<meta name="description" content={$metaDescription} />
+	<meta name="keywords" content={$metaKeywords} />
 	<meta name=”viewport” content="width=device-width, initial-scale=1.0" /> 
 </svelte:head>
-
-<div>
+<div id="layout">
 	{#if $$slots.header}
 		<header>
 			<slot name="header" />
@@ -46,26 +63,5 @@ $:
 	</footer>
 {/if}
 <noscript>
-	<img src="https://tracking.functional-cms.com/count?p=/{$page.url.pathname}}" />
-</noscript>
-
-<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>
+	<img src="https://tracking.functional-cms.com/count?p=/{$page.url.pathname}}" alt="" />
+</noscript>

package/dist/components/layouts/DefaultLayout.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        follow?: boolean | undefined;
-        index?: boolean | undefined;
+        robots?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/menu/FlatMenu.svelte

@@ -1,4 +1,3 @@
-
 <style>
     nav > ul {
         margin: var(--functional-menu-margin, 'auto');
@@ -84,17 +83,17 @@
 
 <script>import { Visiblity, HeaderNavigationItem } from "./Menu.js";
 import { afterNavigate } from "$app/navigation";
-import { page } from "$app/stores";
-import { pages } from "./../../stores/pages";
+import { pages as pagesStore } from "../../stores/pages.js";
+export let pages = [];
 export let authentication = false;
 export let css = "";
 const selectVisible = (pages2, visiblity) => pages2.filter(
-  (page2) => page2?.visiblity === Visiblity.Always || page2?.visiblity === visiblity
+  (page) => page?.visiblity === Visiblity.Always || page?.visiblity === visiblity
 );
 $:
   visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
 $:
-  visibleNavItems = selectVisible($pages, visibility);
+  visibleNavItems = selectVisible($pagesStore, visibility);
 $:
   selected = false;
 afterNavigate((navigation) => selected = false);

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

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
+import { HeaderNavigationItem } from './Menu.js';
 declare const __propDef: {
     props: {
+        pages?: HeaderNavigationItem[] | undefined;
         authentication?: boolean | undefined;
         css?: string | undefined;
     };

package/dist/components/menu/HamburgerMenu.svelte

@@ -30,18 +30,18 @@ import { afterNavigate } from "$app/navigation";
 import { Drawer, Button } from "agnostic-svelte";
 import { page } from "$app/stores";
 import { Placement } from "../Styling.js";
-import { pages } from "./../../stores/pages";
+import { pages as pagesStore } from "../../stores/pages.js";
 export let authentication = false;
 export let css = "";
 export let noBorder = false;
 export let placement = Placement.Start;
-const selectVisible = (pages2, visiblity) => pages2.filter(
+const selectVisible = (pages, visiblity) => pages.filter(
   (page2) => page2?.visiblity === Visiblity.Always || page2?.visiblity === visiblity
 );
 $:
   visibility = authentication ? Visiblity.Authenticated : Visiblity.NotAuthenticated;
 $:
-  visibleNavItems = selectVisible($pages, visibility);
+  visibleNavItems = selectVisible($pagesStore, visibility);
 let drawer = null;
 const assignDrawerRef = (ev) => {
   drawer = ev.detail.instance;

package/dist/index.d.ts

@@ -7,9 +7,9 @@ import Logo from './components/Logo.svelte';
 import SimpleFooter from './components/SimpleFooter.svelte';
 import Spacer from './components/Spacer.svelte';
 import Well from './components/Well.svelte';
-import { title } from './stores/title.js';
+import { title, suffix } from './stores/title.js';
 import { pages } from './stores/pages.js';
-import { meta } from './stores/meta.js';
+import { metaDescription, metaKeywords } from './stores/meta.js';
 import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
 import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes, title, pages, meta, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/dist/index.js

@@ -8,9 +8,9 @@ import Logo from './components/Logo.svelte';
 import SimpleFooter from './components/SimpleFooter.svelte';
 import Spacer from './components/Spacer.svelte';
 import Well from './components/Well.svelte';
-import { title } from './stores/title.js';
+import { title, suffix } from './stores/title.js';
 import { pages } from './stores/pages.js';
-import { meta } from './stores/meta.js';
+import { metaDescription, metaKeywords } from './stores/meta.js';
 import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
 import { Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes, title, pages, meta, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, DefaultLayout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes, title, suffix, pages, metaDescription, metaKeywords, Alert, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, ChoiceInput, Close, Dialog, Disclose, Divider, Drawer, EmptyState, Header, HeaderNav, HeaderNavItem, Icon, IconSvg, Input, InputAddonItem, Loader, Menu, MenuItem, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/dist/stores/meta.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="svelte" />
 import { type Writable } from 'svelte/store';
-export declare const meta: {
-    description: Writable<string>;
-    keywords: Writable<string>;
-    setDescription: (descriptionText: string) => void;
-    setKeywords: (keywordsText: string) => void;
-};
+export declare const metaDescription: Writable<string>;
+export declare const metaKeywords: Writable<string>;

package/dist/stores/meta.js

@@ -1,12 +1,3 @@
 import { get, writable } from 'svelte/store';
-function createMeta() {
-    const description = writable("");
-    const keywords = writable("");
-    return {
-        description,
-        keywords,
-        setDescription: (descriptionText) => description.set(descriptionText),
-        setKeywords: (keywordsText) => description.set(keywordsText),
-    };
-}
-export const meta = createMeta();
+export const metaDescription = writable("");
+export const metaKeywords = writable("");

package/dist/stores/pages.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="svelte" />
-import { HeaderNavigationItem } from "@functionalcms/svelte-components";
-export declare const pages: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<HeaderNavigationItem[]>, invalidate?: import("svelte/store").Invalidator<HeaderNavigationItem[]> | undefined) => import("svelte/store").Unsubscriber;
-    initialise: (pages: Array<HeaderNavigationItem>) => void;
-};
+import { type Writable } from 'svelte/store';
+import { HeaderNavigationItem } from "../components/menu/Menu.js";
+export declare const pages: Writable<HeaderNavigationItem[]>;

package/dist/stores/pages.js

@@ -1,10 +1,7 @@
 import { writable } from 'svelte/store';
-import { HeaderNavigationItem } from "@functionalcms/svelte-components";
+import { HeaderNavigationItem } from "../components/menu/Menu.js";
 function createPages() {
-    const { subscribe, set } = writable(new Array());
-    return {
-        subscribe,
-        initialise: (pages) => set(pages)
-    };
+    const pages = writable(new Array());
+    return pages;
 }
 export const pages = createPages();

package/dist/stores/title.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="svelte" />
-export declare const title: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined) => import("svelte/store").Unsubscriber;
-    setTitleSuffix: (suffix: string) => void;
-    setTitle: (title: string) => void;
-};
+export declare const title: import("svelte/store").Writable<string>;
+export declare const suffix: import("svelte/store").Writable<string>;

package/dist/stores/title.js

@@ -1,11 +1,11 @@
 import { get, writable } from 'svelte/store';
 function createTitle() {
-    const { subscribe, set } = writable("");
-    const titleSuffix = writable("");
-    return {
-        subscribe,
-        setTitleSuffix: (suffix) => titleSuffix.set(suffix),
-        setTitle: (title) => set(`${title}${get(titleSuffix)}`)
-    };
+    const title = writable("");
+    return title;
 }
 export const title = createTitle();
+function createSuffix() {
+    const suffix = writable("");
+    return suffix;
+}
+export const suffix = createSuffix();

package/package.json

@@ -1,6 +1,13 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.3.1",
+	"version": "2.3.3",
+	"watch": {
+		"build": {
+			"patterns": ["src"],
+			"extensions": "ts,svelte",
+			"legacyWatch": true
+		}
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build-css": "sass ./src/lib/css/properties.scss ./css/functional.css",
@@ -9,7 +16,8 @@
 		"package": "npm run build-css && svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"watch": "npm-watch build"
 	},
 	"exports": {
 		".": {
@@ -36,6 +44,7 @@
 		"@sveltejs/package": "^2.2.5",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"agnostic-svelte": "^1.1.27",
+		"npm-watch": "^0.11.0",
 		"publint": "^0.2.7",
 		"sass": "^1.69.7",
 		"svelte": "^4.2.8",