@functionalcms/svelte-components 4.4.6 → 4.6.0

package/dist/components/form/Button.svelte

@@ -1,120 +1,120 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		css: string;
-		style: string;
-		type?: 'submit' | 'reset' | 'button' | 'link';
-		href: string;
-		mode?: string;
-		size?: string;
-		isPrimary: boolean;
-		isBordered?: boolean;
-		isCapsule?: boolean;
-		isGrouped?: boolean;
-		isBlock?: boolean;
-		isLink?: boolean;
-		isBlank?: boolean;
-		isDisabled?: boolean;
-		role?: string;
-		isCircle?: boolean;
-		isRounded?: boolean;
-		isSkinned?: boolean;
-		ariaSelected?: boolean;
-		ariaControls?: string;
-		tabIndex?: number;
-		ariaLabel: string;
-		click?: () => void;
-		keydown?: (e: KeyboardEvent) => void;
-	}
-
-	let {
-		children,
-		css = '',
-		style = '',
-		href = '',
-		mode = undefined,
-		size = undefined,
-		type = 'button',
-		isPrimary = false,
-		isBordered = false,
-		isCapsule = false,
-		isGrouped = false,
-		isBlock = false,
-		isLink = false,
-		isBlank = false,
-		isDisabled = false,
-		role = undefined,
-		isCircle = false,
-		isRounded = false,
-		isSkinned = true,
-		ariaSelected = undefined,
-		ariaControls = undefined,
-		tabIndex = 0,
-		click = undefined,
-		keydown = undefined,
-		ariaLabel = '',
-		...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = $derived(
-		cn(
-			isSkinned ? 'btn' : 'btn-base',
-			mode ? `btn-${mode}` : '',
-			size ? `btn-${size}` : '',
-			isBordered ? 'btn-bordered' : '',
-			isCapsule ? 'btn-capsule ' : '',
-			isGrouped ? 'btn-grouped' : '',
-			isBlock ? 'btn-block' : '',
-			isCircle ? 'btn-circle' : '',
-			isRounded ? 'btn-rounded' : '',
-			isDisabled ? 'disabled' : '',
-			isBlank ? 'btn-blank' : '',
-			isLink ? 'btn-link' : '',
-			css ? `${css}` : ''
-		)
-	);
-
-</script>
-
-{#if type == 'link'}
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<a
-		class={klasses}
-		{href}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		disabled={isDisabled}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
-
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		css: string;
+		style: string;
+		type?: 'submit' | 'reset' | 'button' | 'link';
+		href: string;
+		mode?: string;
+		size?: string;
+		isPrimary: boolean;
+		isBordered?: boolean;
+		isCapsule?: boolean;
+		isGrouped?: boolean;
+		isBlock?: boolean;
+		isLink?: boolean;
+		isBlank?: boolean;
+		isDisabled?: boolean;
+		role?: string;
+		isCircle?: boolean;
+		isRounded?: boolean;
+		isSkinned?: boolean;
+		ariaSelected?: boolean;
+		ariaControls?: string;
+		tabIndex?: number;
+		ariaLabel: string;
+		click?: () => void;
+		keydown?: (e: KeyboardEvent) => void;
+	}
+
+	let {
+		children,
+		css = '',
+		style = '',
+		href = '',
+		mode = undefined,
+		size = undefined,
+		type = 'button',
+		isPrimary = false,
+		isBordered = false,
+		isCapsule = false,
+		isGrouped = false,
+		isBlock = false,
+		isLink = false,
+		isBlank = false,
+		isDisabled = false,
+		role = undefined,
+		isCircle = false,
+		isRounded = false,
+		isSkinned = true,
+		ariaSelected = undefined,
+		ariaControls = undefined,
+		tabIndex = 0,
+		click = undefined,
+		keydown = undefined,
+		ariaLabel = '',
+		...restProps
+	}: Partial<Props> = $props();
+
+	let klasses = $derived(
+		cn(
+			isSkinned ? 'btn' : 'btn-base',
+			mode ? `btn-${mode}` : '',
+			size ? `btn-${size}` : '',
+			isBordered ? 'btn-bordered' : '',
+			isCapsule ? 'btn-capsule ' : '',
+			isGrouped ? 'btn-grouped' : '',
+			isBlock ? 'btn-block' : '',
+			isCircle ? 'btn-circle' : '',
+			isRounded ? 'btn-rounded' : '',
+			isDisabled ? 'disabled' : '',
+			isBlank ? 'btn-blank' : '',
+			isLink ? 'btn-link' : '',
+			css ? `${css}` : ''
+		)
+	);
+
+</script>
+
+{#if type == 'link'}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<a
+		class={klasses}
+		{href}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		aria-label={ariaLabel}
+		tabindex={tabIndex}
+		onclick={click}
+		onkeydown={keydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		{type}
+		class={klasses}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		aria-label={ariaLabel}
+		tabindex={tabIndex}
+		disabled={isDisabled}
+		onclick={click}
+		onkeydown={keydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
 <style>.btn-base {
   display: inline-flex;
   align-items: center;
@@ -386,4 +386,4 @@ on the side padding. As such, these have a good bit less then regular buttons. *
 
 .btn-link:hover {
   cursor: pointer;
-}</style>
+}</style>

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/layouts/Banner.svelte

@@ -8,7 +8,7 @@
 		css?: string;
 	}
 
-	let { children, background = '', css = '' }: Props = $props();
+	let { children, background = '', css = '' }: Partial<Props> = $props();
 
 	const bannerKlasses = cn('banner', css);
 </script>

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

@@ -1,9 +1,8 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const Banner: import("svelte").Component<Partial<{
     children: Snippet;
     background?: string;
     css?: string;
-}
-declare const Banner: import("svelte").Component<Props, {}, "">;
+}>, {}, "">;
 type Banner = ReturnType<typeof Banner>;
 export default Banner;

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.6",
+	"version": "4.6.0",
 	"watch": {
 		"build": {
 			"patterns": [