@onsvisual/svelte-components 0.1.104 → 1.0.0-next.1

package/dist/wrappers/Embed/Embed.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Embed from "./Embed.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Embed",
+		component: Embed,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Embed {...args}>
+		<div style:padding="24px 0" style:background="var(--ons-color-grey-10)">
+			<p style:margin="0">Embedded content.</p>
+		</div>
+	</Embed>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/wrappers/Embed/Embed.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  EmbedProps */
+/** @typedef {typeof __propDef.events}  EmbedEvents */
+/** @typedef {typeof __propDef.slots}  EmbedSlots */
+export default class Embed extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EmbedProps = typeof __propDef.props;
+export type EmbedEvents = typeof __propDef.events;
+export type EmbedSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/wrappers/Embed/Embed.svelte

@@ -1,43 +1,44 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import pym from "pym.js";
+	import { onMount, createEventDispatcher } from "svelte";
+	import pym from "pym.js";
 
-  /**
-   * Binding for pymChild element (can be used to send messages to parent of iframe)
-   * @type {object}
-   */
-  export let pymChild = null;
-  /**
-   * Frequency (in milliseconds) of iframe height updates. Set as "false" to disable polling.
-   * @type {number|false}
-   */
-  export let polling = 500;
+	/**
+	 * Binding for pymChild element (can be used to send messages to parent of iframe)
+	 * @type {object}
+	 */
+	export let pymChild = null;
+	/**
+	 * Frequency (in milliseconds) of iframe height updates. Set as "false" to disable polling.
+	 * @type {number|false}
+	 */
+	export let polling = 500;
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  onMount(() => {
-    pymChild = new pym.Child();
+	onMount(() => {
+		pymChild = new pym.Child();
 
-    if (polling) {
-      setInterval(() => {
-        pymChild.sendMessage(
-          "height",
-          Math.max(document.body.scrollHeight, document.body.offsetHeight)
-        );
-      }, polling);
-    }
+		if (polling) {
+			setInterval(() => {
+				pymChild.sendMessage(
+					"height",
+					Math.max(document.body.scrollHeight, document.body.offsetHeight)
+				);
+			}, polling);
+		}
 
-    const href = document.location.href;
-    const parentUrl = new URLSearchParams(document.location.search).get("parentUrl");
-    dispatch("load", { href, parentUrl, pymChild });
-  });
+		const href = document.location.href;
+		const parentUrl = new URLSearchParams(document.location.search).get("parentUrl");
+		dispatch("load", { href, parentUrl, pymChild });
+	});
 </script>
 
-<div class="embed-container" style:display="content">
-  <slot />
+<div class="ons-svelte-embed-container" style:display="contents">
+	<slot />
 </div>
 
 <style>
-  .embed-container :global(.ons-container) {
-    padding: 0 !important;
-  }</style>
+	.ons-svelte-embed-container :global(.ons-container) {
+		padding: 0 !important;
+	}
+</style>

package/dist/{@types/wrappers → wrappers}/Embed/Embed.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  EmbedEvents */
 /** @typedef {typeof __propDef.slots}  EmbedSlots */
 export default class Embed extends SvelteComponentTyped<{
-    pymChild?: any;
-    polling?: number | false;
+    polling?: number | false | undefined;
+    pymChild?: object | undefined;
 }, {
     load: CustomEvent<any>;
 } & {
@@ -18,8 +18,8 @@ export type EmbedSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        pymChild?: object;
-        polling?: number | false;
+        polling?: number | false | undefined;
+        pymChild?: object | undefined;
     };
     events: {
         load: CustomEvent<any>;

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

@@ -0,0 +1,15 @@
+A container for content designed to appear within an `<iframe>`. The component does two things:
+
+1. Overrides padding, so that content can fill the full width of its iframe.
+2. Initialises a Pym.js child for the iframe, so that it can communicate its height with its parent page.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Embed } from "@onsvisual/svelte-components";
+</script>
+
+<Embed>
+  {child_components}
+</Embed>
+```

package/dist/wrappers/LazyLoad/LazyLoad.stories.svelte

@@ -0,0 +1,37 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import LazyLoad from "./LazyLoad.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/LazyLoad",
+		component: LazyLoad,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	{#each Array.from(Array(15).keys()) as i}
+		<LazyLoad {...args}>
+			<div class="img-container">
+				<img src="https://picsum.photos/400/300?random={i}" alt="" />
+			</div>
+		</LazyLoad>
+	{/each}
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<style>
+	.img-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 500px;
+		background: #eee;
+		margin-bottom: 10px;
+	}
+</style>

package/dist/wrappers/LazyLoad/LazyLoad.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LazyLoadProps */
+/** @typedef {typeof __propDef.events}  LazyLoadEvents */
+/** @typedef {typeof __propDef.slots}  LazyLoadSlots */
+export default class LazyLoad extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LazyLoadProps = typeof __propDef.props;
+export type LazyLoadEvents = typeof __propDef.events;
+export type LazyLoadSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/wrappers/LazyLoad/LazyLoad.svelte

@@ -1,47 +1,46 @@
 <script>
-  import { onMount, onDestroy } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 
-  /**
-   * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
-   * @type {boolean}
-   */
-  export let entered = false;
-  /**
-   * Set the initial "placeholder" height of the component in pixels.
-   * @type {number}
-   */
-  export let initialHeight = 400;
-  /**
-   * Set how many pixels from the viewport you want lazy loading to kick in.
-   * @type {number}
-   */
-  export let rootMargin = 200;
+	/**
+	 * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
+	 * @type {boolean}
+	 */
+	export let entered = false;
+	/**
+	 * Set the initial "placeholder" height of the component in pixels.
+	 * @type {number}
+	 */
+	export let initialHeight = 400;
+	/**
+	 * Set how many pixels from the viewport you want lazy loading to kick in.
+	 * @type {number}
+	 */
+	export let rootMargin = 200;
 
-  let el, observer;
+	let el, observer;
 
-  const callback = (entries, observer) => {
-    entries.forEach((entry) => {
-      let intersecting = entry.isIntersecting;
-      if (!entered && intersecting) {
-        observer.unobserve(el);
-        entered = true;
-        console.log("in view");
-      }
-    });
-  };
+	const callback = (entries, observer) => {
+		entries.forEach((entry) => {
+			let intersecting = entry.isIntersecting;
+			if (!entered && intersecting) {
+				observer.unobserve(el);
+				entered = true;
+			}
+		});
+	};
 
-  onMount(() => {
-    let options = { root: document, rootMargin: `${rootMargin}px` };
+	onMount(() => {
+		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-    observer = new IntersectionObserver(callback, options);
-    observer.observe(el);
-  });
+		observer = new IntersectionObserver(callback, options);
+		observer.observe(el);
+	});
 
-  onDestroy(() => observer.unobserve(el));
+	onDestroy(() => observer.unobserve(el));
 </script>
 
 {#if entered}
-  <slot />
+	<slot />
 {:else}
-  <div bind:this="{el}" style:height="{+initialHeight || 100}px"></div>
+	<div bind:this={el} style:height="{+initialHeight || 100}px"></div>
 {/if}

package/dist/{@types/wrappers → wrappers}/LazyLoad/LazyLoad.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  LazyLoadEvents */
 /** @typedef {typeof __propDef.slots}  LazyLoadSlots */
 export default class LazyLoad extends SvelteComponentTyped<{
-    entered?: boolean;
-    initialHeight?: number;
-    rootMargin?: number;
+    entered?: boolean | undefined;
+    initialHeight?: number | undefined;
+    rootMargin?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +17,9 @@ export type LazyLoadSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        entered?: boolean;
-        initialHeight?: number;
-        rootMargin?: number;
+        entered?: boolean | undefined;
+        initialHeight?: number | undefined;
+        rootMargin?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,29 @@
+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).
+
+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).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { LazyLoad } from "@onsvisual/svelte-components";
+</script>
+
+{#each Array.from(Array(20).keys()) as i}
+  <LazyLoad>
+    <div class="img-container">
+      <img src="https://picsum.photos/400/300?random={i}" alt="" />
+    </div>
+  </LazyLoad>
+{/each}
+
+<style>
+  .img-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+    background: #eee;
+    margin-bottom: 10px;
+  }
+</style>
+```

package/dist/wrappers/Main/Main.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Main from "./Main.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Main",
+		component: Main,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Main {...args}>
+		<div style:padding="24px 12px" style:background="var(--ons-color-grey-10)">
+			<p style:margin="0">Child components go here.</p>
+		</div>
+	</Main>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/wrappers/Main/Main.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  MainProps */
+/** @typedef {typeof __propDef.events}  MainEvents */
+/** @typedef {typeof __propDef.slots}  MainSlots */
+export default class Main extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MainProps = typeof __propDef.props;
+export type MainEvents = typeof __propDef.events;
+export type MainSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/wrappers/Main/Main.svelte

@@ -1,4 +1,11 @@
-<slot name="before" />
-<main id="main" tabindex="-1" style="display:block">
-  <slot />
+<script>
+	/**
+	 * Sets the unique ID that can be targetted by hyperlinks
+	 * @type {string}
+	 */
+	export let id = "main";
+</script>
+
+<main {id}>
+	<slot />
 </main>

package/dist/{@types/wrappers → wrappers}/Main/Main.svelte.d.ts

@@ -2,11 +2,10 @@
 /** @typedef {typeof __propDef.events}  MainEvents */
 /** @typedef {typeof __propDef.slots}  MainSlots */
 export default class Main extends SvelteComponentTyped<{
-    [x: string]: never;
+    id?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
-    before: {};
     default: {};
 }> {
 }
@@ -16,13 +15,12 @@ export type MainSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        id?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        before: {};
         default: {};
     };
 };

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

@@ -0,0 +1,16 @@
+This component creates a styled `<main>` element to wrap the primary contents of a page (generally everything between the page header and footer).
+
+This component is useful for screen readers to identify the primary content of the page. The standard header component also contains a visually hidden "Skip to content" link that will bring users to it.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Main } from "@onsvisual/svelte-components";
+</script>
+
+<!-- Header goes here -->
+<Main>
+  {child_components}
+</Main>
+<!-- Footer goes here -->
+```

package/dist/wrappers/Observe/Observe.stories.svelte

@@ -0,0 +1,29 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Observe from "./Observe.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Observe",
+		component: Observe,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	{#each colors as color}
+		<Observe
+			on:enter={() => console.log(`${color} entered`)}
+			on:exit={() => console.log(`${color} exited`)}
+		>
+			<div style:background={color} style:height="400px"></div>
+		</Observe>
+	{/each}
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/wrappers/Observe/Observe.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ObserveProps */
+/** @typedef {typeof __propDef.events}  ObserveEvents */
+/** @typedef {typeof __propDef.slots}  ObserveSlots */
+export default class Observe extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ObserveProps = typeof __propDef.props;
+export type ObserveEvents = typeof __propDef.events;
+export type ObserveSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/wrappers/Observe/Observe.svelte

@@ -1,35 +1,35 @@
 <script>
-  import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { onMount, onDestroy, createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  /**
-   * Bind to this variable to monitor visiblity (boolean true/false).
-   * @type {boolean}
-   */
-  export let visible = false;
+	/**
+	 * Bind to this variable to monitor visiblity (boolean true/false).
+	 * @type {boolean}
+	 */
+	export let visible = false;
 
-  let el, observer;
+	let el, observer;
 
-  const callback = (entries, observer) => {
-    entries.forEach((entry) => {
-      let intersecting = entry.isIntersecting;
-      if (!visible && intersecting) dispatch("enter", entry);
-      if (visible && !intersecting) dispatch("exit", entry);
-      visible = intersecting;
-    });
-  };
+	const callback = (entries) => {
+		entries.forEach((entry) => {
+			let intersecting = entry.isIntersecting;
+			if (!visible && intersecting) dispatch("enter", entry);
+			if (visible && !intersecting) dispatch("exit", entry);
+			visible = intersecting;
+		});
+	};
 
-  onMount(() => {
-    let options = {};
+	onMount(() => {
+		let options = {};
 
-    observer = new IntersectionObserver(callback, options);
-    observer.observe(el);
-  });
+		observer = new IntersectionObserver(callback, options);
+		observer.observe(el);
+	});
 
-  onDestroy(() => observer.unobserve(el));
+	onDestroy(() => observer.unobserve(el));
 </script>
 
-<div bind:this="{el}">
-  <slot />
+<div bind:this={el}>
+	<slot />
 </div>

package/dist/{@types/wrappers → wrappers}/Observe/Observe.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  ObserveEvents */
 /** @typedef {typeof __propDef.slots}  ObserveSlots */
 export default class Observe extends SvelteComponentTyped<{
-    visible?: boolean;
+    visible?: boolean | undefined;
 }, {
     enter: CustomEvent<any>;
     exit: CustomEvent<any>;
@@ -18,7 +18,7 @@ export type ObserveSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        visible?: boolean;
+        visible?: boolean | undefined;
     };
     events: {
         enter: CustomEvent<any>;

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

@@ -0,0 +1,22 @@
+A wrapper component that uses IntersectionObserver to monitor whether the elements in contains are within the current viewport.
+
+This component can be useful for triggering actions such as lazy loading of data/images or scroll-driven interactions.
+
+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.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Observe } from "@onsvisual/svelte-components";
+
+  const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
+</script>
+
+{#each colors as color}
+<Observe
+  on:enter={() => console.log(`${color} entered`)}
+  on:exit={() => console.log(`${color} exited`)}>
+  <div class="section" style:background={color} style:height="400px"/>
+</Observe>
+{/each}
+```