@functionalcms/svelte-components 4.3.2 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/menu/CollapsibleMenu.svelte +55 -26
  2. package/dist/components/menu/CollapsibleMenu.svelte.d.ts +17 -17
  3. package/dist/components/menu/NavigationDrawer.svelte +53 -0
  4. package/dist/components/menu/NavigationDrawer.svelte.d.ts +18 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.js +1 -0
  7. package/package.json +1 -1
package/dist/components/menu/CollapsibleMenu.svelte CHANGED
@@ -1,33 +1,62 @@
1
- <!-- <script lang="ts">
2
- import { Orientation, Placement } from '../Styling.js';
3
- import ColumnMenu from './NavigationItems.svelte';
4
- import { HeaderNavigationItem, defaultCss } from './Menu.js';
5
- import { mergedClasses } from '../CssHelper.js';
6
- import Button from '../agnostic/Button/Button.svelte';
1
+ <script lang="ts">
2
+ import { HeaderNavigationItem, defaultCss } from './types.js';
3
+ import { afterNavigate } from '$app/navigation';
4
+ import { cn } from '../../utils.js';
5
+ import { Placement } from '../Styling.js';
6
+ import Button from '../form/Button.svelte';
7
+ import Drawer from '../presentation/Drawer.svelte';
8
+ import ListMenu from './ListMenu.svelte';
9
+ import type { Snippet } from 'svelte';
7
10
 
8
- export let css: { buttonCss: string[]; container: string[]; link: string[] } = defaultCss;
9
- export let contentPosition: Placement = Placement.End;
10
- export let orientation: Orientation = Orientation.Column;
11
+ interface Css {
12
+ buttonCss: string;
13
+ container: string;
14
+ link: string;
15
+ }
16
+ interface Props {
17
+ itemsDrawer: Snippet<[Array<HeaderNavigationItem>]>;
18
+ isOpen: boolean;
19
+ buttonText: string;
20
+ css: Partial<Css>;
21
+ noBorder: boolean;
22
+ placement: Placement;
23
+ localPages: Array<HeaderNavigationItem>;
24
+ }
11
25
 
12
- export let localPages: Array<HeaderNavigationItem> = [];
26
+ let {
27
+ itemsDrawer,
28
+ isOpen = false,
29
+ buttonText = "&#9776;",
30
+ localPages = [],
31
+ css = { buttonCss: '', container: '', link: '' }
32
+ }: Partial<Props> = $props();
13
33
 
14
- const cssClasses = { ...defaultCss, ...css };
34
+ let buttonCss = $derived(cn('hamburger-handle', css.buttonCss ?? ''));
15
35
 
16
- $: expanded = false;
17
- $: showContentBeforeButton = contentPosition == Placement.Start;
18
- $: buttonCss = mergedClasses(cssClasses.buttonCss);
36
+ function toggleDrawer() {
37
+ isOpen = !isOpen;
38
+ }
19
39
  </script>
20
40
 
21
- {#if expanded && showContentBeforeButton}
22
- <div aria-expanded={expanded}>
23
- <ColumnMenu {localPages} {orientation} css={cssClasses} />
24
- </div>
41
+ <Button type="button" isPrimary css={buttonCss} click={() => toggleDrawer()}>{buttonText}</Button>
42
+
43
+ {#if isOpen && itemsDrawer}
44
+ {@render itemsDrawer(localPages)}
25
45
  {/if}
26
- <Button css={buttonCss} on:click={() => (expanded = !expanded)}>
27
- <slot name="handle">&#9776;</slot>
28
- </Button>
29
- {#if expanded && !showContentBeforeButton}
30
- <div aria-expanded={expanded}>
31
- <ColumnMenu {localPages} {orientation} css={cssClasses} />
32
- </div>
33
- {/if} -->
46
+
47
+ <style>
48
+ :global(#hamburger-menu) {
49
+ z-index: 10001;
50
+ }
51
+ :global(.hamburger-handle) {
52
+ background: none !important;
53
+ border: none !important;
54
+ }
55
+ :global(.btn.close) {
56
+ position: fixed;
57
+ top: var(--hamburger-menu-margin, 25px);
58
+ right: var(--hamburger-menu-margin, 25px);
59
+ background: none !important;
60
+ border: none !important;
61
+ }
62
+ </style>
package/dist/components/menu/CollapsibleMenu.svelte.d.ts CHANGED
@@ -1,18 +1,18 @@
1
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const CollapsibleMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type CollapsibleMenu = InstanceType<typeof CollapsibleMenu>;
1
+ import { HeaderNavigationItem } from './types.js';
2
+ import { Placement } from '../Styling.js';
3
+ import type { Snippet } from 'svelte';
4
+ declare const CollapsibleMenu: import("svelte").Component<Partial<{
5
+ itemsDrawer: Snippet<[Array<HeaderNavigationItem>]>;
6
+ isOpen: boolean;
7
+ buttonText: string;
8
+ css: Partial<{
9
+ buttonCss: string;
10
+ container: string;
11
+ link: string;
12
+ }>;
13
+ noBorder: boolean;
14
+ placement: Placement;
15
+ localPages: Array<HeaderNavigationItem>;
16
+ }>, {}, "">;
17
+ type CollapsibleMenu = ReturnType<typeof CollapsibleMenu>;
18
18
  export default CollapsibleMenu;
package/dist/components/menu/NavigationDrawer.svelte ADDED
@@ -0,0 +1,53 @@
1
+ <!-- <script lang="ts">
2
+ import { HeaderNavigationItem, defaultCss } from './types.js';
3
+ import { afterNavigate } from '$app/navigation';
4
+ import { cn } from '../../utils.js';
5
+ import { Placement } from '../Styling.js';
6
+ import Button from '../form/Button.svelte';
7
+ import Drawer from '../presentation/Drawer.svelte';
8
+ import ListMenu from './ListMenu.svelte';
9
+
10
+ interface Css {
11
+ buttonCss: string;
12
+ container: string;
13
+ link: string;
14
+ }
15
+ interface Props {
16
+ css: Partial<Css>;
17
+ noBorder: boolean;
18
+ placement: Placement;
19
+ localPages: Array<HeaderNavigationItem>;
20
+ }
21
+
22
+ let {
23
+ localPages = [],
24
+ css = { buttonCss: '', container: '', link: '' },
25
+ placement = Placement.Start
26
+ }: Partial<Props> = $props();
27
+
28
+
29
+ const close = () => (isOpen = false);
30
+ </script>
31
+ <Drawer {placement} open={isOpen} clickAway={() => isOpen != isOpen}>
32
+ <div class="flex flex-row justify-between">
33
+ <ListMenu {localPages} {css} click={() => close()}></ListMenu>
34
+ <Button css="close" click={() => close()}>X</Button>
35
+ </div>
36
+ </Drawer>
37
+
38
+ <style>
39
+ :global(#hamburger-menu) {
40
+ z-index: 10001;
41
+ }
42
+ :global(.hamburger-handle) {
43
+ background: none !important;
44
+ border: none !important;
45
+ }
46
+ :global(.btn.close) {
47
+ position: fixed;
48
+ top: var(--hamburger-menu-margin, 25px);
49
+ right: var(--hamburger-menu-margin, 25px);
50
+ background: none !important;
51
+ border: none !important;
52
+ }
53
+ </style> -->
package/dist/components/menu/NavigationDrawer.svelte.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ declare const NavigationDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
+ [evt: string]: CustomEvent<any>;
16
+ }, {}, {}, string>;
17
+ type NavigationDrawer = InstanceType<typeof NavigationDrawer>;
18
+ export default NavigationDrawer;
package/dist/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export { default as EmptyState } from './components/presentation/EmptyState.svel
20
20
  export { default as ListMenu } from './components/menu/ListMenu.svelte';
21
21
  export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
22
22
  export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
23
+ export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
23
24
  export { isAuthenticated, selectVisible } from './components/menu/types.js';
24
25
  export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
25
26
  export { default as Button } from './components/form/Button.svelte';
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ export { default as EmptyState } from './components/presentation/EmptyState.svel
30
30
  export { default as ListMenu } from './components/menu/ListMenu.svelte';
31
31
  export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
32
32
  export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
33
+ export { default as CollapsibleMenu } from './components/menu/CollapsibleMenu.svelte';
33
34
  export { isAuthenticated, selectVisible } from './components/menu/types.js';
34
35
  export { HeaderNavigationItem, Visiblity } from './components/menu/types.js';
35
36
  /*
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@functionalcms/svelte-components",
3
- "version": "4.3.2",
3
+ "version": "4.4.1",
4
4
  "watch": {
5
5
  "build": {
6
6
  "patterns": [