@onsvisual/svelte-components 1.0.35 → 1.0.37

package/dist/layout/NavSections/NavSection.svelte

@@ -33,12 +33,15 @@
 	const observer = getContext("observer");
 	const tocId = getContext("tocId");
 
+	let section;
 	let mounted = false;
 	let observed = false;
 
-	// This allows the table of contents (toc) to render before hydration
-	let section = { id, dataset: { title, subsection: String(subsection) } };
-	$sections = [...$sections.filter((s) => s.id !== section.id), section];
+	// This should allow the table of contents (toc) to render before hydration
+	$sections = [
+		...$sections.filter((s) => s.id !== id),
+		{ id, dataset: { title, subsection: String(subsection) } }
+	];
 
 	// This allows sections to be highlighted on the toc after hydration,
 	// and for sections to be added/removed gracefully from the DOM

package/dist/layout/NavSections/NavSections.svelte

@@ -39,7 +39,9 @@
 	 */
 	export let marginBottom = true;
 
+	let el;
 	let active;
+	let mounted = false;
 
 	setContext("tocId", id);
 
@@ -50,6 +52,7 @@
 	setContext("observer", observer);
 
 	function formatSections(sections) {
+		if (sections.length === 0) return [];
 		const secs = [];
 		let sec = { subsections: [] };
 		for (const section of sections) {
@@ -62,7 +65,6 @@
 		}
 		return [...secs, sec];
 	}
-	$: formattedSections = formatSections($sections);
 
 	onMount(() => {
 		if (!noContents) {
@@ -82,12 +84,25 @@
 				}
 			);
 		}
+		// The table of contents doesn't populate unless it's after the main content
+		// This is a trick to flip the order when the page hydrates
+		el.prepend(el.lastElementChild);
+		mounted = true;
 	});
 </script>
 
 <Container {cls} {width} {marginTop} {marginBottom}>
-	<div class="ons-grid ons-grid--spaced ons-grid--loose ons-js-toc-container">
-		<div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+	<div
+		class="ons-grid ons-grid--spaced ons-grid--loose ons-js-toc-container"
+		class:flip-display-order={!mounted}
+		bind:this={el}
+	>
+		<div class="ons-nav-sections-content ons-grid__col ons-col-8@m">
+			<slot name="before" />
+			<slot />
+			<slot name="after" />
+		</div>
+		<div class="ons-nav-sections-toc ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
 			<aside class="ons-table-of-contents-container" role="complementary">
 				<slot name="before-nav" />
 				{#if !noContents}
@@ -96,47 +111,50 @@
 							<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">Contents</h2>
 						{/if}
 						<ol class="ons-list ons-u-mb-l ons-list--dashed">
-							{#if formattedSections}
-								{#each formattedSections as section}
-									<li class="ons-list__item">
-										{#if section.id && section.title}
-											<a
-												href="#{section.id}"
-												class="ons-list__link"
-												class:ons-table-of-contents__link-active={section.id === active}
-											>
-												{section.title}
-											</a>
-										{/if}
-										{#if section.subsections.length > 0}
-											<ol class="ons-list ons-u-mb-no ons-list--dashed">
-												{#each section.subsections as subsection}
-													<li class="ons-list__item">
-														<a
-															href="#{subsection.id}"
-															class="ons-list__link"
-															class:ons-table-of-contents__link-active={subsection.id === active}
-														>
-															{subsection.title}
-														</a>
-													</li>
-												{/each}
-											</ol>
-										{/if}
-									</li>
-								{/each}
-							{/if}
+							{#each formatSections($sections) as section}
+								<li class="ons-list__item">
+									{#if section.id && section.title}
+										<a
+											href="#{section.id}"
+											class="ons-list__link"
+											class:ons-table-of-contents__link-active={section.id === active}
+										>
+											{section.title}
+										</a>
+									{/if}
+									{#if section.subsections.length > 0}
+										<ol class="ons-list ons-u-mb-no ons-list--dashed">
+											{#each section.subsections as subsection}
+												<li class="ons-list__item">
+													<a
+														href="#{subsection.id}"
+														class="ons-list__link"
+														class:ons-table-of-contents__link-active={subsection.id === active}
+													>
+														{subsection.title}
+													</a>
+												</li>
+											{/each}
+										</ol>
+									{/if}
+								</li>
+							{/each}
 						</ol>
 					</nav>
 				{/if}
 				<slot name="after-nav" />
 			</aside>
 		</div>
-		<div class="ons-grid__col ons-col-8@m">
-			<slot name="before" />
-			<slot />
-			<slot name="after" />
-		</div>
 	</div>
 	<slot name="footer" />
 </Container>
+
+<style>
+	/* These classes force the table of contents to render on the left of the page before hydration */
+	.flip-display-order {
+		direction: rtl;
+	}
+	.flip-display-order > * {
+		direction: initial;
+	}
+</style>

package/dist/layout/NavSections/NavSections.svelte.d.ts

@@ -12,11 +12,11 @@ export default class NavSections extends SvelteComponentTyped<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
-    'before-nav': {};
-    'after-nav': {};
     before: {};
     default: {};
     after: {};
+    'before-nav': {};
+    'after-nav': {};
     footer: {};
 }> {
 }
@@ -38,11 +38,11 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        'before-nav': {};
-        'after-nav': {};
         before: {};
         default: {};
         after: {};
+        'before-nav': {};
+        'after-nav': {};
         footer: {};
     };
 };

package/package.json

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