@functionalcms/svelte-components 2.23.0 → 2.23.2

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,21 +1,27 @@
-<script>import {
-  HeaderNavigationItem,
-  Drawer,
-  Button,
-  Placement,
-  ColumnMenu
-} from "@functionalcms/svelte-components";
+<script>import { Button } from "agnostic-svelte";
+import { Orientation, Placement } from "../Styling.js";
+import ColumnMenu from "./ColumnMenu.svelte";
+import { HeaderNavigationItem } from "./Menu.js";
 export let buttonCss = "";
 export let contentCss = "";
-export let noBorder = false;
+export let contentPosition = Placement.End;
+export let orientation = Orientation.Column;
 export let localPages = [];
 $: showContent = false;
-let drawer = null;
+$: showContentBeforeButton = contentPosition == Placement.Start;
+const contentKlasses = [contentCss].filter((c) => c).join(" ");
 </script>
 
-<Button css={buttonCss} on:click={() => (showContent = !showContent)}>&#9776;</Button>
-{#if showContent}
-	<ColumnMenu {localPages} css={contentCss} />
+{#if showContent && showContentBeforeButton}
+	<ColumnMenu {localPages} {orientation} css={contentKlasses} />
+{/if}
+
+<Button css={buttonCss} on:click={() => (showContent = !showContent)}>
+	<slot name="handle">&#9776;</slot>
+</Button>
+
+{#if showContent && !showContentBeforeButton}
+	<ColumnMenu {localPages} {orientation} css={contentKlasses} />
 {/if}
 
 <style>

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

@@ -1,16 +1,20 @@
 import { SvelteComponent } from "svelte";
-import { HeaderNavigationItem } from "@functionalcms/svelte-components";
+import { Orientation, Placement } from "../Styling.js";
+import { HeaderNavigationItem } from "./Menu.js";
 declare const __propDef: {
     props: {
         buttonCss?: string;
         contentCss?: string;
-        noBorder?: boolean;
+        contentPosition?: Placement;
+        orientation?: Orientation;
         localPages?: Array<HeaderNavigationItem>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        handle: {};
+    };
     exports?: {} | undefined;
     bindings?: string | undefined;
 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import FlatMenu from './components/menu/FlatMenu.svelte';
 import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
 import ColumnMenu from './components/menu/ColumnMenu.svelte';
 import DynamicMenu from './components/menu/DynamicMenu.svelte';
+import CollapsibleMenu from './components/menu/CollapsibleMenu.svelte';
 import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
 import Banner from './components/Banner.svelte';
 import DefaultLayout from './components/layouts/DefaultLayout.svelte';
@@ -25,5 +26,5 @@ import { pages } from './stores/pages.js';
 import { metaDescription, metaKeywords } from './stores/meta.js';
 import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } 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, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, BlogTitle, BlogDescription, listAllPosts, importPost, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Carusel, CaruseleItem, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, 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, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, CollapsibleMenu, BlogTitle, BlogDescription, listAllPosts, importPost, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Carusel, CaruseleItem, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, 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, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
 export type { BlogPost };

package/dist/index.js

@@ -2,6 +2,7 @@ import FlatMenu from './components/menu/FlatMenu.svelte';
 import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
 import ColumnMenu from './components/menu/ColumnMenu.svelte';
 import DynamicMenu from './components/menu/DynamicMenu.svelte';
+import CollapsibleMenu from './components/menu/CollapsibleMenu.svelte';
 import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
 import Banner from './components/Banner.svelte';
 import DefaultLayout from './components/layouts/DefaultLayout.svelte';
@@ -24,4 +25,4 @@ import { pages } from './stores/pages.js';
 import { metaDescription, metaKeywords } from './stores/meta.js';
 import { Justify, Placement, Orientation, Position, Sizes, AlignItmes } 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, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts } from 'agnostic-svelte';
-export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, BlogTitle, BlogDescription, listAllPosts, importPost, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Carusel, CaruseleItem, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, 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, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };
+export { Visiblity, HeaderNavigationItem, DynamicMenu, FlatMenu, ColumnMenu, HamburgerMenu, CollapsibleMenu, BlogTitle, BlogDescription, listAllPosts, importPost, DefaultLayout, TwoColumnsLayout, Banner, Link, Logo, SimpleFooter, Gallery, Carusel, CaruseleItem, Spacer, Well, Justify, Placement, Orientation, AlignItmes, Position, Sizes, ShowItem, convertShowItemsToNavigationItems, 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, Pagination, Progress, Select, Spinner, Switch, Table, Tabs, Tag, Toast, Toasts };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "2.23.0",
+	"version": "2.23.2",
 	"watch": {
 		"build": {
 			"patterns": [