@functionalcms/svelte-components 4.4.7 → 4.6.1

package/dist/components/integrations/EasyTools.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+
+	interface Props {
+		userId: number;
+        title?: string;
+	}
+
+	let { userId, title = "store" }: Props = $props();
+
+	if (browser) {
+        const handle = `ec_tenant_${userId}`;
+		window.addEventListener('message', (e) => {
+			!!e.data.frameHeight &&
+				e.data.pricingUuid ===  handle&&
+				(document.getElementById(handle).style.height = e.data.frameHeight);
+		});
+	}
+</script>
+
+<iframe
+	id="ec_tenant_{userId}"
+    title={title}
+	width="100%"
+	src="https://app.easy.tools/ec/{userId}"
+	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+	allowfullscreen
+	frameborder="0"
+	scrolling="no"
+></iframe>

package/dist/components/integrations/EasyTools.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    userId: number;
+    title?: string;
+}
+declare const EasyTools: import("svelte").Component<Props, {}, "">;
+type EasyTools = ReturnType<typeof EasyTools>;
+export default EasyTools;

package/dist/components/presentation/Carousel.svelte

@@ -2,13 +2,12 @@
 	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>;
+		child: Snippet<[any]>;
+		items: Array<any>;
 		next?: Snippet;
 		prev?: Snippet;
 		css?: { slide: string; container: string };

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

@@ -1,8 +1,7 @@
 import { type Snippet } from 'svelte';
-import type { CarouselItem } from './Carousel.ts';
 interface Props {
-    child: Snippet<[CarouselItem]>;
-    items: Array<CarouselItem>;
+    child: Snippet<[any]>;
+    items: Array<any>;
     next?: Snippet;
     prev?: Snippet;
     css?: {

package/dist/components/presentation/ImageCompare.svelte

@@ -1,36 +1,22 @@
-<script lang="ts">
-	import type { TouchEventHandler } from "svelte/elements";
-
-	interface Props {
-		before: string;
-		after: string;
-		offset?: number;
-		overlay?: boolean;
-		sliding?: boolean;
-		contain?: boolean;
-		lazyLoad?: 'eager' | 'lazy' | undefined;
-		hideOnSlide?: boolean;
-	}
-
-	let {
-		before,
-		after,
-		offset = 0.5,
-		overlay = true,
+<script>
+	let hideOnSlide = true,
+		imgOffset = null,
 		sliding = false,
 		contain = false,
-		lazyLoad = 'lazy',
-		hideOnSlide = true
-	}: Props = $props();
-
-	let imgOffset: any = null;
-	let img: any = null;
+		overlay = true,
+		offset = 0.5,
+		before = "",
+		after = "",
+		lazyLoad = false,
+		img;
 
-	function resize(e: Event) {
-		imgOffset = (e.type === 'load' ? e.target : img).getBoundingClientRect();
+	function resize(e) {
+		imgOffset = (
+			e.type === "load" ? e.target : img
+		).getBoundingClientRect();
 	}
 
-	function move(e: any) {
+	function move(e) {
 		if (sliding && imgOffset) {
 			let x = (e.touches ? e.touches[0].pageX : e.pageX) - imgOffset.left;
 			x = x < 0 ? 0 : x > w ? w : x;
@@ -38,7 +24,7 @@
 		}
 	}
 
-	function start(e: Event) {
+	function start(e) {
 		sliding = true;
 		move(e);
 	}
@@ -47,13 +33,16 @@
 		sliding = false;
 	}
 
-	let w = $derived(imgOffset && imgOffset.width);
-	let h = $derived(imgOffset && imgOffset.height);
-	let x = $derived(w * offset);
-	let opacity = $derived(hideOnSlide && sliding ? 0 : 1);
-	let style = $derived(
-		contain ? `width:100%;height:100%;` : 'width:' + w + 'px;height:' + h + 'px;'
-	);
+	$: w = imgOffset && imgOffset.width;
+	$: h = imgOffset && imgOffset.height;
+	$: x = w * offset;
+	$: opacity = hideOnSlide && sliding ? 0 : 1;
+	$: style = contain
+		? `width:100%;height:100%;`
+		: `width:${w}px;height:${h}px;`;
+	$: imageLoading = lazyLoad ? "lazy" : "eager";
+
+	export { before, after, offset, overlay, contain, lazyLoad, hideOnSlide };
 </script>
 
 <svelte:window
@@ -64,32 +53,32 @@
 	on:resize={resize}
 />
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-	class="container"
-	{style}
-	ontouchstart={start}
-	onmousedown={start}
-	role="img"
-	aria-roledescription="image slider"
->
+<div class="container" {style} on:touchstart={start} on:mousedown={start} role="img" aria-roledescription="image slider">
 	<img
 		bind:this={img}
-		loading={lazyLoad}
+		loading={imageLoading}
 		src={after}
 		alt="after"
-		onload={resize}
+		on:mousedown|preventDefault
+		on:load={resize}
 		{style}
 	/>
 	<img
-		loading={lazyLoad}
+		loading={imageLoading}
 		src={before}
 		alt="before"
+		on:mousedown|preventDefault
 		style="{style}clip:rect(0, {x}px, {h}px, 0);"
 	/>
 	{#if overlay}
 		<div class="overlay" style="opacity:{opacity}"></div>
 	{/if}
+	<div class="before-label" style="opacity:{opacity}">
+		<slot name="before"></slot>
+	</div>
+	<div class="after-label" style="opacity:{opacity}">
+		<slot name="after"></slot>
+	</div>
 	<div class="handle" style="left: calc({offset * 100}% - 20px)">
 		<div class="arrow-left"></div>
 		<div class="arrow-right"></div>
@@ -122,6 +111,20 @@
 		transition: opacity 0.5s;
 		background: rgba(0, 0, 0, 0.5);
 	}
+	.before-label,
+	.after-label {
+		top: 0;
+		bottom: 0;
+		z-index: 25;
+		user-select: none;
+		position: absolute;
+	}
+	.before-label {
+		left: 0;
+	}
+	.after-label {
+		right: 0;
+	}
 	.container:hover > .overlay {
 		opacity: 1;
 	}
@@ -141,7 +144,7 @@
 	}
 	.handle:before,
 	.handle:after {
-		content: '';
+		content: "";
 		height: 9999px;
 		position: absolute;
 		left: calc(50% - 2px);

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

@@ -1,13 +1,48 @@
-interface Props {
-    before: string;
-    after: string;
-    offset?: number;
-    overlay?: boolean;
-    sliding?: boolean;
-    contain?: boolean;
-    lazyLoad?: 'eager' | 'lazy' | undefined;
-    hideOnSlide?: boolean;
-}
-declare const ImageCompare: import("svelte").Component<Props, {}, "">;
-type ImageCompare = ReturnType<typeof ImageCompare>;
 export default ImageCompare;
+type ImageCompare = SvelteComponent<{
+    overlay?: boolean | undefined;
+    before?: string | undefined;
+    after?: string | undefined;
+    offset?: number | undefined;
+    contain?: boolean | undefined;
+    lazyLoad?: boolean | undefined;
+    hideOnSlide?: boolean | undefined;
+}, {
+    mousedown: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    before: {};
+    after: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const ImageCompare: $$__sveltets_2_IsomorphicComponent<{
+    overlay?: boolean | undefined;
+    before?: string | undefined;
+    after?: string | undefined;
+    offset?: number | undefined;
+    contain?: boolean | undefined;
+    lazyLoad?: boolean | undefined;
+    hideOnSlide?: boolean | undefined;
+}, {
+    mousedown: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    before: {};
+    after: {};
+}, {}, string>;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Carousel } from './components/presentation/Carousel.svelte';
 export { default as Drawer } from './components/presentation/Drawer.svelte';
 export { default as Disclose } from './components/presentation/Disclose.svelte';
 export { default as EmptyState } from './components/presentation/EmptyState.svelte';
+export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as ListMenu } from './components/menu/ListMenu.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
@@ -31,3 +32,4 @@ export type { ChoiceInputOption } from './components/form/utils.ts';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
+export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as Carousel } from './components/presentation/Carousel.svelte';
 export { default as Drawer } from './components/presentation/Drawer.svelte';
 export { default as Disclose } from './components/presentation/Disclose.svelte';
 export { default as EmptyState } from './components/presentation/EmptyState.svelte';
+export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 /*
  * Menu
  */
@@ -50,5 +51,6 @@ export { default as Markdown } from './components/content/Markdown.svelte';
  */
 export { listAllPosts, importPost } from './components/blog/blog.js';
 /*
- *
- */ 
+ * Integrations
+ */
+export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/package.json

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