@onsvisual/svelte-components 0.1.15 → 0.1.17

package/README.md

@@ -4,4 +4,9 @@
 
 A library of ONS Svelte components for projects large and small. Its codebase and docs borrow **heavily** from Reuters' fantastic [graphics-components](https://github.com/reuters-graphics/graphics-components) library.
 
-
+To update
+1. Increment version in package.json
+2. npm run build
+3. Commit + push changes to github.
+4. npm run deploy
+5. npm publish

package/dist/@types/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Container } from "./wrappers/Container/Container.svelte";
 export { default as Embed } from "./wrappers/Embed/Embed.svelte";
 export { default as Main } from "./wrappers/Main/Main.svelte";
+export { default as Observe } from "./wrappers/Observe/Observe.svelte";
 export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
 export { default as Backlink } from "./layout/Backlink/Backlink.svelte";

package/dist/@types/inputs/Select/Select.svelte.d.ts

@@ -10,6 +10,7 @@ export default class Select extends SvelteComponentTyped<{
     hideLabel?: boolean;
     placeholder?: string;
     options?: any[];
+    filterText?: string;
     multiple?: boolean;
     maxSelected?: number;
     clearable?: boolean;
@@ -44,6 +45,7 @@ declare const __propDef: {
         hideLabel?: boolean;
         placeholder?: string;
         options?: any[];
+        filterText?: string;
         multiple?: boolean;
         maxSelected?: number;
         clearable?: boolean;

package/dist/@types/layout/Scroller/Scroller.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Scroller extends SvelteComponentTyped<{
     id?: string;
     marginBottom?: boolean;
+    visible?: boolean;
     progress?: number;
     splitscreen?: boolean;
     threshold?: number;
@@ -11,7 +12,6 @@ export default class Scroller extends SvelteComponentTyped<{
     index?: number;
     sectionId?: string;
     offset?: number;
-    visible?: boolean;
 }, {
     change: CustomEvent<any>;
     enter: CustomEvent<any>;
@@ -31,6 +31,7 @@ declare const __propDef: {
     props: {
         id?: string;
         marginBottom?: boolean;
+        visible?: boolean;
         progress?: number;
         splitscreen?: boolean;
         threshold?: number;
@@ -38,7 +39,6 @@ declare const __propDef: {
         index?: number;
         sectionId?: string;
         offset?: number;
-        visible?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/dist/@types/wrappers/Embed/Embed.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  EmbedSlots */
 export default class Embed extends SvelteComponentTyped<{
     pymChild?: any;
-    polling?: boolean;
+    polling?: number | false;
 }, {
     load: CustomEvent<any>;
 } & {
@@ -19,7 +19,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         pymChild?: object;
-        polling?: boolean;
+        polling?: number | false;
     };
     events: {
         load: CustomEvent<any>;

package/dist/@types/wrappers/Observe/Observe.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ObserveProps */
+/** @typedef {typeof __propDef.events}  ObserveEvents */
+/** @typedef {typeof __propDef.slots}  ObserveSlots */
+export default class Observe extends SvelteComponentTyped<{
+    visible?: boolean;
+}, {
+    enter: CustomEvent<any>;
+    exit: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+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: {
+        visible?: boolean;
+    };
+    events: {
+        enter: CustomEvent<any>;
+        exit: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/index.js

@@ -2,6 +2,7 @@
 export { default as Container } from "./wrappers/Container/Container.svelte";
 export { default as Embed } from "./wrappers/Embed/Embed.svelte";
 export { default as Main } from "./wrappers/Main/Main.svelte";
+export { default as Observe } from "./wrappers/Observe/Observe.svelte";
 export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 
 // Layout

package/dist/inputs/Select/Select.svelte

@@ -13,6 +13,11 @@
    * @type {"default"|"search"}
    */
   export let mode = "default";
+  /**
+   * Binding for the filter text entered
+   * @type {string}
+   */
+  export let filterText = "";
   /**
    * Enable multi-select mode
    * @type {boolean}
@@ -116,8 +121,6 @@
       ? `No options match <b>${filterText}</b>`
       : "No options available";
 
-  let filterText = "";
-
   const dispatch = createEventDispatcher();
 
   async function handleChange(e) {

package/dist/wrappers/Embed/Embed.svelte

@@ -7,7 +7,11 @@
    * @type {object}
    */
   export let pymChild = null;
-  export let polling = true;
+  /**
+   * Frequency (in milliseconds) of iframe height updates. Set as "false" to disable polling.
+   * @type {number|false}
+   */
+  export let polling = 500;
 
   const dispatch = createEventDispatcher();
 
@@ -20,7 +24,7 @@
           "height",
           Math.max(document.body.scrollHeight, document.body.offsetHeight)
         );
-      }, 500);
+      }, polling);
     }
 
     const href = document.location.href;

package/dist/wrappers/Observe/Observe.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { onMount, onDestroy, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  export let visible = false;
+
+  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;
+    });
+  };
+
+  onMount(() => {
+    let options = {};
+
+    observer = new IntersectionObserver(callback, options);
+    observer.observe(el);
+  });
+
+  onDestroy(() => observer.unobserve(el));
+</script>
+
+<div bind:this="{el}">
+  <slot />
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -15,6 +15,7 @@
     "build:chromatic": "storybook build -o docs",
     "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
     "build": "npm-run-all build:package build:docs",
+    "deploy": "gh-pages -d docs -t true",
     "prepublishOnly": "npm run build:package",
     "postversion": "git push origin && git push origin --tags"
   },
@@ -67,6 +68,7 @@
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-svelte3": "^4.0.0",
     "fs-extra": "^11.1.1",
+    "gh-pages": "^6.1.1",
     "kleur": "^4.1.5",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
@@ -176,6 +178,7 @@
     "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
     "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",
     "./wrappers/Main/Main.svelte": "./dist/wrappers/Main/Main.svelte",
+    "./wrappers/Observe/Observe.svelte": "./dist/wrappers/Observe/Observe.svelte",
     "./wrappers/Theme/Theme.svelte": "./dist/wrappers/Theme/Theme.svelte",
     "./wrappers/Theme/themes": "./dist/wrappers/Theme/themes.js",
     ".": "./dist/index.js"