@onsvisual/svelte-components 0.1.5 → 0.1.7

package/dist/@types/layout/Header/ONSLogo.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  OnsLogoEvents */
 /** @typedef {typeof __propDef.slots}  OnsLogoSlots */
 export default class OnsLogo extends SvelteComponentTyped<{
+    theme?: any;
     width?: any;
     height?: any;
     compact?: boolean;
@@ -16,6 +17,7 @@ export type OnsLogoSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        theme?: any;
         width?: any;
         height?: any;
         compact?: boolean;

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

@@ -14,6 +14,8 @@ export default class Scroller extends SvelteComponentTyped<{
     visible?: boolean;
 }, {
     change: CustomEvent<any>;
+    enter: CustomEvent<any>;
+    exit: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -40,6 +42,8 @@ declare const __propDef: {
     };
     events: {
         change: CustomEvent<any>;
+        enter: CustomEvent<any>;
+        exit: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/layout/Header/Header.svelte

@@ -287,10 +287,10 @@
               <div class="ons-grid__col ons-col-auto">
                 <a class="ons-header__org-logo-link" href="#0"
                   ><div class="ons-header__org-logo ons-header__org-logo--large">
-                    <ONSLogo width="{197}" height="{19}" />
+                    <ONSLogo theme="{theme}" width="{197}" height="{19}" />
                   </div>
                   <div class="ons-header__org-logo ons-header__org-logo--small">
-                    <ONSLogo width="{120}" height="{27}" compact />
+                    <ONSLogo theme="{theme}" width="{120}" height="{27}" compact />
                   </div></a
                 >
               </div>
@@ -302,7 +302,7 @@
           <div class="header col-wrap">
             <div class="col col--lg-one-third col--md-one-third">
               <a href="{baseurl}/">
-                <ONSLogo className="logo" height="{39}" compact />
+                <ONSLogo theme="{theme}" className="logo" height="{39}" compact />
               </a>
             </div>
             <div

package/dist/layout/Header/ONSLogo.svelte

@@ -1,15 +1,12 @@
 <script>
-  import { getContext } from "svelte";
-
-  const theme = getContext("theme");
-
-  $: primary = theme === "dark" ? "white" : "#003c57";
-  const secondary = "#a8bd3a";
-
   export let compact = false;
   export let className = "ons-svg-logo";
   export let width = null;
   export let height = null;
+  export let theme = null;
+
+  $: primary = theme === "dark" ? "white" : "#003c57";
+  const secondary = "#a8bd3a";
 </script>
 
 {#if !compact}

package/dist/layout/Scroller/Scroller.svelte

@@ -163,7 +163,6 @@
   $: widthStyle = fixed ? `width:${width}px;` : "";
 
   function initSections(sections) {
-    console.log("updating scroller", sections.length);
     if (scroller) manager.remove(scroller);
 
     count = sections.length;
@@ -189,7 +188,10 @@
     const fg = foreground.getBoundingClientRect();
     const bg = background.getBoundingClientRect();
 
-    visible = fg.top < wh && fg.bottom > 0;
+    const visible_new = fg.top < wh && fg.bottom > 0;
+    const entered = visible_new && !visible;
+    const exited = !visible_new && visible;
+    visible = visible_new;
 
     const foreground_height = fg.bottom - fg.top;
     const background_height = bg.bottom - bg.top;
@@ -221,7 +223,7 @@
 
       offset = (threshold_px - top) / (bottom - top);
       if (bottom >= threshold_px) {
-        if (index !== i) {
+        if (index !== i || entered) {
           index = i;
           sectionId = section.dataset.id ? section.dataset.id : null;
           dispatch("change", { id, index, sectionId });
@@ -229,6 +231,9 @@
         break;
       }
     }
+
+    if (entered) dispatch("enter", { id, index, sectionId });
+    if (exited) dispatch("exit", { id, index, sectionId });
   }
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",