@functionalcms/svelte-components 3.5.20 → 4.0.0-pre

package/dist/components/presentation/Card.svelte

@@ -1,23 +1,21 @@
 <script lang="ts">
-	import { mergedClasses } from '../CssHelper';
+	import { cn } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	import { Orientation } from '../Styling';
 
 	interface Props {
 		children: Snippet;
-		isAnimated?: boolean;
-		isSkinned?: boolean;
-		isStacked?: boolean;
-		isShadow?: boolean;
-		isBorder?: boolean;
+		isAnimated: boolean;
+		isSkinned: boolean;
+		isStacked: boolean;
+		isShadow: boolean;
+		isBorder: boolean;
 		isRounded?: boolean;
-		noWrap? : boolean;
-		orientation?: Orientation;
-		type?: string;
-		css?: string;
+		isWrapped: boolean;
+		type: string;
+		css: string;
 	}
 
-	const {
+	let {
 		children,
 		isAnimated = false,
 		isSkinned = true,
@@ -25,39 +23,31 @@
 		isShadow = false,
 		isBorder = false,
 		isRounded = false,
-		noWrap = false,
-		orientation = Orientation.Column,
+		isWrapped = true,
 		type = '',
-		css = ''
-	}: Props  = $props();
-
-	let klasses = mergedClasses(
-		isSkinned ? 'card' : 'card-base',
-		isAnimated ? 'card-animated' : '',
-		isStacked ? 'card-stacked' : '',
-		isShadow ? 'card-shadow' : '',
-		isRounded ? 'card-rounded' : '',
-		isBorder ? 'card-border' : '',
-		type ? `card-${type}` : '',
-		`${orientation}`,
-		noWrap ? `` : 'card-wrap', 
-		css ? `${css}` : ''
-	);
+		css = '',
+        ...restProps
+	}: Partial<Props> = $props();
+
+	let klasses = cn(
+		isSkinned ? 'card' : 'base',
+		isAnimated ? 'animated' : '',
+		isStacked ? 'stacked' : '',
+		isShadow ? 'shadow' : '',
+		isRounded ? 'rounded' : '',
+		isBorder ? 'border' : '',
+		isWrapped ? 'wrapped': '',
+		type ? `${type}` : '',
+		css ? `${css}` : '');
 </script>
 
-<div class={klasses}>
-	{@render children()}
+<div class={klasses} {...restProps}>
+	{@render children?.()}
 </div>
 
 <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 {
+	.base {
 		display: flex;
 		align-items: center;
 		position: relative;
@@ -65,98 +55,93 @@
 		width: 100%;
 	}
 
-	.card-wrap {
+	.wrapped {
 		flex-wrap: wrap;
 	}
 
-	.card-border {
-		border: 1px solid var(--functional-card-border-color, var(--functional-gray-light));
+	.border {
+		border: 1px solid var(--border-color);
 	}
 
-	.card-rounded {
-		border-radius: var(--functional-radius, 0.25rem);
+	.rounded {
+		border-radius: var(--radius, 0.25rem);
 	}
 
-	.card-shadow {
+	.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));
+			var(--boxshadow1-offset-x, 0) var(--boxshadow1-offset-y, 0.375rem)
+				var(--boxshadow1-blur, 0.5625rem)
+				var(--boxshadow1-color, rgb(6 6 6 / 7.5%)),
+			var(--boxshadow2-offset-x, 0) var(--boxshadow2-offset-y, 0)
+				var(--boxshadow2-blur, 1px)
+				var(--boxshadow2-color, rgb(5 5 5 / 10%));
+		border-radius: var(radius, 0.25rem);
 		overflow: hidden;
 	}
 
-	.card-shadow:hover {
+	.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%));
+			var(--boxshadow1-offset-x, 0) var(--boxshadow1-offset-y, 0.375rem)
+				var(--boxshadow1-blur, 0.875rem)
+				var(--boxshadow1-color, rgb(4 4 4 / 10%)),
+			var(--boxshadow2-offset-x, 0) var(--boxshadow2-offset-y, 0)
+				var(--boxshadow2-blur, 2px)
+				var(--boxshadow2-color, rgb(3 3 3 / 10%));
 	}
 
-	/**
- * Animates the y position and box shadow on hover
- */
-	.card-animated {
+	.animated {
 		transition:
 			box-shadow ease-out 5s,
-			transform var(--functional-timing-fast)
+			transform var(--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)
+					var(--cubic-1,),
+					var(--cubic-2,),
+					var(--cubic-3,),
+					var(--cubic-4,)
 				);
 	}
 
-	.card-animated:hover {
-		transform: translateY(var(--functional-card-translate-y-hover, -3px));
+	.animated:hover {
+		transform: translateY(var(--translate-y-hover, -3px));
 		transition:
-			box-shadow ease-out var(--functional-timing-fast),
-			transform var(--functional-timing-slow)
+			box-shadow ease-out var(--timing-fast),
+			transform var(--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)
+					var(--cubic-1,),
+					var(--cubic-2,),
+					var(--cubic-3,),
+					var(--cubic-4,)
 				);
 	}
 
 	@media (prefers-reduced-motion), (update: slow) {
-		.card-animated,
-		.card-animated:hover {
+		.animated,
+		.animated:hover {
 			transition-duration: 0.001ms !important;
 		}
 	}
 
-	.card-stacked {
+	.stacked {
 		flex-direction: column;
 	}
 
-	.card-success {
-		background: var(--functional-action-light);
-		color: var(--functional-action-dark);
+	.success {
+		background: var(--action-light);
+		color: var(--action-dark);
 	}
 
-	.card-info {
-		background: var(--functional-primary-light);
-		color: var(--functional-primary-dark);
+	.info {
+		background: var(--primary-light);
+		color: var(--primary-dark);
 	}
 
-	.card-error {
-		background: var(--functional-error-light);
-		color: var(--functional-error-dark);
+	.error {
+		background: var(--error-light);
+		color: var(--error-dark);
 	}
 
-	.card-warning {
-		background: var(--functional-warning-light);
-		color: var(--functional-warning-dark);
+	.warning {
+		background: var(--warning-light);
+		color: var(--warning-dark);
 	}
 </style>

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

@@ -1,18 +1,15 @@
 import type { Snippet } from 'svelte';
-import { Orientation } from '../Styling';
-interface Props {
+declare const Card: import("svelte").Component<Partial<{
     children: Snippet;
-    isAnimated?: boolean;
-    isSkinned?: boolean;
-    isStacked?: boolean;
-    isShadow?: boolean;
-    isBorder?: boolean;
+    isAnimated: boolean;
+    isSkinned: boolean;
+    isStacked: boolean;
+    isShadow: boolean;
+    isBorder: boolean;
     isRounded?: boolean;
-    noWrap?: boolean;
-    orientation?: Orientation;
-    type?: string;
-    css?: string;
-}
-declare const Card: import("svelte").Component<Props, {}, "">;
+    isWrapped: boolean;
+    type: string;
+    css: string;
+}>, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/presentation/{Carusele.d.ts → Carousel.d.ts}

@@ -1,4 +1,4 @@
-export declare class CarouselItem {
+export interface CarouselItem {
     text: string;
     image: string;
     link: string;

package/dist/components/presentation/Carousel.svelte

@@ -1,4 +1,101 @@
 <script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
+	import EmblaCarousel, { type EmblaOptionsType } from 'embla-carousel';
+	import type { CarouselItem } from './Carousel.ts';
+	import { cn } from '../../utils.js';
+	import Button from '../form/Button.svelte';
+
+	interface Props {
+		child: Snippet<[CarouselItem]>;
+		items: Array<CarouselItem>;
+		next?: Snippet;
+		prev?: Snippet;
+		css?: { slide: string; container: string };
+		perPage?: number;
+		slideGaps: string;
+	}
+
+	let { child, next, prev, items, perPage = 1, slideGaps = '20px;' }: Props = $props();
+
+	let options: EmblaOptionsType = { loop: false };
+	let slideStyle = $derived('flex: 0 0 ' + 100 / perPage + '%;');
+	let containerCss = cn('flex', 'fw');
+
+	let embla = {
+		scrollPrev: () => console.log('prev'),
+		scrollNext: () => console.log('next')
+	};
+	let viewportNode: HTMLElement | undefined = undefined;
+
+	onMount(() => {
+		if (viewportNode != undefined) {
+			embla = EmblaCarousel(viewportNode, options);
+		}
+	});
 </script>
 
-<style></style>
+<div class="carousel flex flex-row" use:emblaCarouselSvelte>
+	<div class="carousel__viewport" bind:this={viewportNode}>
+		<div class={containerCss}>
+			{#each items as item}
+				<div class="carousel__slide" style={slideStyle}>
+					{@render child(item)}
+				</div>
+			{/each}
+		</div>
+	</div>
+	<Button
+		type="link"
+		css="carousel__prev"
+		style="order: -1 !important;width: 50px;height: 100%;background: none;border: none !important;align-self: center;"
+		onclick={() => embla.scrollPrev()}
+	>
+		{#if prev}
+			{@render prev()}
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-arrow-left"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg
+			>
+		{/if}
+	</Button>
+	<Button
+		type="link"
+		css="carousel__next"
+		style="order: 1000 !important;width: 50px;height: 100%;background: none; border: none !important;align-self: center;"
+		onclick={() => embla.scrollNext()}
+	>
+		{#if next}
+			{@render next()}
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-arrow-right"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+			>
+		{/if}
+	</Button>
+</div>
+
+<style>.carousel .carousel__viewport {
+  overflow: hidden;
+}
+.carousel .carousel__slide {
+  min-width: 0;
+}</style>

package/dist/components/presentation/Carousel.svelte.d.ts

@@ -1,18 +1,17 @@
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import { type Snippet } from 'svelte';
+import type { CarouselItem } from './Carousel.ts';
+interface Props {
+    child: Snippet<[CarouselItem]>;
+    items: Array<CarouselItem>;
+    next?: Snippet;
+    prev?: Snippet;
+    css?: {
+        slide: string;
+        container: string;
     };
-    z_$$bindings?: Bindings;
+    perPage?: number;
+    slideGaps: string;
 }
-declare const Carousel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Carousel = InstanceType<typeof Carousel>;
+declare const Carousel: import("svelte").Component<Props, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
 export default Carousel;

package/dist/components/presentation/Drawer.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { Placement } from '../Styling.js';
+
+	interface Props {
+		open?: boolean;
+		duration?: number;
+		placement?: Placement;
+		size?: number;
+		clickAway: () => void;
+        children: Snippet
+	}
+
+	let {
+		open = false,
+		duration = 0.2,
+		placement = Placement.Start,
+		size = undefined,
+		clickAway,
+        children,
+	}: Props = $props();
+
+	let mounted = $state(false);
+
+	let style = $derived('--duration: ' + duration + 's; --size: ' + size + ';');
+
+	function scrollLock(open: boolean) {
+		if (mounted) {
+			const body = document.querySelector('body');
+			if (body != null) {
+				body.style.overflow = open ? 'hidden' : 'auto';
+			}
+		}
+	}
+
+	function handleClickAway() {
+		clickAway();
+	}
+
+	onMount(() => {
+		mounted = true;
+		scrollLock(open);
+	});
+</script>
+
+<aside class="drawer" class:open {style}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="overlay" onclick={handleClickAway}></div>
+
+	<div class="panel {placement}" class:size>
+		{@render children()}
+	</div>
+</aside>
+
+<style>
+	.drawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		z-index: -1;
+		transition: z-index var(--duration) step-end;
+	}
+
+	.drawer.open {
+		z-index: 99;
+		transition: z-index var(--duration) step-start;
+	}
+
+	.overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(100, 100, 100, 0.5);
+		opacity: 0;
+		z-index: 2;
+		transition: opacity var(--duration) ease;
+	}
+
+	.drawer.open .overlay {
+		opacity: 1;
+	}
+
+	.panel {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		background: white;
+		z-index: 3;
+		transition: transform var(--duration) ease;
+		overflow: auto;
+	}
+
+	.panel.left {
+		left: 0;
+		transform: translate(-100%, 0);
+	}
+
+	.panel.right {
+		right: 0;
+		transform: translate(100%, 0);
+	}
+
+	.panel.top {
+		top: 0;
+		transform: translate(0, -100%);
+	}
+
+	.panel.bottom {
+		bottom: 0;
+		transform: translate(0, 100%);
+	}
+
+	.panel.left.size,
+	.panel.right.size {
+		max-width: var(--size);
+	}
+
+	.panel.top.size,
+	.panel.bottom.size {
+		max-height: var(--size);
+	}
+
+	.drawer.open .panel {
+		transform: translate(0, 0);
+	}
+</style>

package/dist/components/presentation/Drawer.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import { Placement } from '../Styling.js';
+interface Props {
+    open?: boolean;
+    duration?: number;
+    placement?: Placement;
+    size?: number;
+    clickAway: () => void;
+    children: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/presentation/Gallery.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import Card from './Card.svelte';
-	import type { ShowItem } from './ShowItem.js';
+	import type { ShowItem } from './ShowItem.ts';
 	import { AlignItmes, Justify, Orientation } from '../Styling.js';
-	import { mergedClasses } from '../CssHelper';
+	import { cn } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	 
-	interface GaleryProps {
+
+	interface Props {
 		items: Array<ShowItem>;
 		renderItem: Snippet<[ShowItem]>;
 		justify: Justify;
@@ -23,12 +23,12 @@
 		alignItems = AlignItmes.Center,
 		orientation = Orientation.DynamicRow,
 		...restProps
-	}: GaleryProps = $props();
+	}: Props = $props();
 
-	let galleryKlasses = mergedClasses('flex', css, `${orientation}`, `${justify}`, `${alignItems}`);
+	let classes = cn('flex', css, `${orientation}`, `${justify}`, `${alignItems}`);
 </script>
 
-<Card css={galleryKlasses} {...restProps}>
+<Card css={classes} {...restProps}>
 	{#each items as entry}
 		{@render renderItem(entry)}
 	{/each}

package/dist/components/presentation/Gallery.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { ShowItem } from './ShowItem.js';
+import type { ShowItem } from './ShowItem.ts';
 import { AlignItmes, Justify, Orientation } from '../Styling.js';
 import type { Snippet } from 'svelte';
-interface GaleryProps {
+interface Props {
     items: Array<ShowItem>;
     renderItem: Snippet<[ShowItem]>;
     justify: Justify;
@@ -10,6 +10,6 @@ interface GaleryProps {
     restProps: any;
     css: string;
 }
-declare const Gallery: import("svelte").Component<GaleryProps, {}, "">;
+declare const Gallery: import("svelte").Component<Props, {}, "">;
 type Gallery = ReturnType<typeof Gallery>;
 export default Gallery;