@onsvisual/svelte-components 1.0.52 → 1.0.54

package/dist/decorators/Icon/Icon.svelte

@@ -1,7 +1,7 @@
 <script>
 	/**
 	 * Set the type of icon
-	 * @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"}
+	 * @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"}
 	 */
 	export let type = "arrow";
 	/**
@@ -14,6 +14,16 @@
 	 * @type {number}
 	 */
 	export let rotation = 0;
+	/**
+	 * (Optional) Provide a custom SVG path string for the icon (overrides "type")
+	 * @type {string|null}
+	 */
+	export let svgPath = null;
+	/**
+	 * (Optional) If using a custom SVG path, specify the viewBox of the SVG
+	 * @type {string}
+	 */
+	export let svgViewBox = "0 0 24 24";
 	/**
 	 * Add a small margin on the left of the icon
 	 * @type {boolean}
@@ -42,6 +52,10 @@
 			d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6Z",
 			viewBox: "2 2 20 20"
 		},
+		code: {
+			d: "M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6z",
+			viewBox: "2 2 20 20"
+		},
 		cross: {
 			d: "M12 1.2086L10.7914 0L6 4.79155L1.20857 0L0 1.2086L4.79143 6.00015L0 10.7917L1.20857 12.0003L6 7.20875L10.7914 12.0003L12 10.7917L7.20857 6.00015L12 1.2086Z",
 			viewBox: "0 0 12 12"
@@ -90,12 +104,12 @@
 		class="ons-icon {size ? `ons-icon--${size}` : ''}"
 		class:ons-u-ml-2xs={marginLeft}
 		class:ons-u-mr-2xs={marginRight}
-		viewBox={paths[type].viewBox}
+		viewBox={svgPath && svgViewBox ? svgViewBox : paths[type].viewBox}
 		xmlns="http://www.w3.org/2000/svg"
 		focusable="false"
 		fill="currentColor"
 		style:transform={rotation ? `rotate(${rotation}deg)` : null}
 	>
-		<path d={paths[type].d}></path>
+		<path d={svgPath || paths[type].d}></path>
 	</svg>
 {/if}

package/dist/decorators/Icon/Icon.svelte.d.ts

@@ -2,9 +2,11 @@
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
 export default class Icon extends SvelteComponentTyped<{
-    type?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
+    type?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
     size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
     rotation?: number | undefined;
+    svgPath?: string | null | undefined;
+    svgViewBox?: string | undefined;
     marginLeft?: boolean | undefined;
     marginRight?: boolean | undefined;
 }, {
@@ -17,9 +19,11 @@ export type IconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
+        type?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | undefined;
         size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
         rotation?: number | undefined;
+        svgPath?: string | null | undefined;
+        svgViewBox?: string | undefined;
         marginLeft?: boolean | undefined;
         marginRight?: boolean | undefined;
     };

package/dist/inputs/Button/Button.svelte

@@ -37,7 +37,7 @@
 	export let small = false;
 	/**
 	 * Icon on button, eg. "arrow", "search"
-	 * @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
+	 * @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
 	 */
 	export let icon = null;
 	/**

package/dist/inputs/Button/Button.svelte.d.ts

@@ -10,7 +10,7 @@ export default class Button extends SvelteComponentTyped<{
     type?: "button" | "reset" | "submit" | undefined;
     variant?: "secondary" | "primary" | "ghost" | undefined;
     noScroll?: boolean | undefined;
-    icon?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
+    icon?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
     iconPosition?: "before" | "after" | undefined;
     iconRotation?: number | undefined;
     disabled?: boolean | undefined;
@@ -39,7 +39,7 @@ declare const __propDef: {
         type?: "button" | "reset" | "submit" | undefined;
         variant?: "secondary" | "primary" | "ghost" | undefined;
         noScroll?: boolean | undefined;
-        icon?: "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
+        icon?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
         iconPosition?: "before" | "after" | undefined;
         iconRotation?: number | undefined;
         disabled?: boolean | undefined;

package/dist/wrappers/LazyLoad/LazyLoad.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { onMount, onDestroy } from "svelte";
-
 	/**
 	 * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
 	 * @type {boolean}
@@ -17,34 +15,31 @@
 	 */
 	export let rootMargin = 200;
 
-	let el, observer;
-
 	const callback = (entries, observer) => {
 		entries.forEach((entry) => {
+			console.log(entry);
 			let intersecting = entry.isIntersecting;
 			if (!entered && intersecting) {
-				observer.unobserve(el);
+				observer.unobserve(entry.target);
 				entered = true;
 			}
 		});
 	};
 
-	onMount(() => {
+	function initObserver(el) {
 		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-		observer = new IntersectionObserver(callback, options);
+		const observer = new IntersectionObserver(callback, options);
 		observer.observe(el);
-	});
 
-	onDestroy(() => {
-		if (el && observer) {
-			observer.unobserve(el);
-		}
-	});
+		return {
+			destroy: () => observer?.unobserve?.(el)
+		};
+	}
 </script>
 
 {#if entered}
 	<slot />
 {:else}
-	<div bind:this={el} style:height="{+initialHeight || 100}px"></div>
+	<div use:initObserver style:height="{+initialHeight || 100}px"></div>
 {/if}

package/dist/wrappers/LazyLoad/docs/component.md

@@ -1,6 +1,6 @@
-A wrapper component that uses IntersectionObserver to allow the elements it contains to be lazy loaded, ie. to be initialised/mounted only when they enter the viewport (or come close to it).
+A wrapper component that uses IntersectionObserver to allow the Svelte components or HTML elements it contains to be lazy loaded, ie. to be added to the page (or DOM) only when they enter the viewport.
 
-Optionally, you can use the **initialHeight** to set a placeholder height in pixels (default 400), and you can use **rootMargin** to set how many pixels from the viewport you want lazy loading to kick in (default 200).
+Optionally, you can use the **initialHeight** to set a placeholder height in pixels (default 400), and you can use **rootMargin** to set how many pixels before the viewport you want lazy loading to kick in (default 200).
 
 <!-- prettier-ignore -->
 ```html

package/dist/wrappers/Observe/Observe.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
 	const dispatch = createEventDispatcher();
 
@@ -14,8 +14,6 @@
 	 */
 	export let rootMargin = 0;
 
-	let el, observer;
-
 	const callback = (entries) => {
 		entries.forEach((entry) => {
 			let intersecting = entry.isIntersecting;
@@ -30,16 +28,18 @@
 		});
 	};
 
-	onMount(() => {
+	function initObserver(el) {
 		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-		observer = new IntersectionObserver(callback, options);
+		const observer = new IntersectionObserver(callback, options);
 		observer.observe(el);
-	});
 
-	onDestroy(() => observer?.unobserve?.(el));
+		return {
+			destroy: () => observer?.unobserve?.(el)
+		};
+	}
 </script>
 
-<div bind:this={el}>
+<div use:initObserver>
 	<slot />
 </div>

package/dist/wrappers/Observe/docs/component.md

@@ -4,16 +4,21 @@ This component can be useful for triggering actions such as lazy loading of data
 
 This component has **enter** and **exit** events, triggered when it enters or leaves the viewport. It also has a **visible** binding which has a value of **true** when it is within the viewport.
 
+In this demo, you can open your browser's developer console (**F12**) to see the logs for elements entering and existing the viewport.
+
 <!-- prettier-ignore -->
 ```html
 <script>
   import { Observe } from "@onsvisual/svelte-components";
 
+  let visible;
+
   const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
 </script>
 
 {#each colors as color}
 <Observe
+  bind:visible
   on:enter={() => console.log(`${color} entered`)}
   on:exit={() => console.log(`${color} exited`)}>
   <div class="section" style:background={color} style:height="400px"/>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.52",
+	"version": "1.0.54",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",