@onsvisual/svelte-components 1.0.35 → 1.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -33,12 +33,15 @@
|
|
|
33
33
|
const observer = getContext("observer");
|
|
34
34
|
const tocId = getContext("tocId");
|
|
35
35
|
|
|
36
|
+
let section;
|
|
36
37
|
let mounted = false;
|
|
37
38
|
let observed = false;
|
|
38
39
|
|
|
39
|
-
// This
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
// This should allow the table of contents (toc) to render before hydration
|
|
41
|
+
$sections = [
|
|
42
|
+
...$sections.filter((s) => s.id !== id),
|
|
43
|
+
{ id, dataset: { title, subsection: String(subsection) } }
|
|
44
|
+
];
|
|
42
45
|
|
|
43
46
|
// This allows sections to be highlighted on the toc after hydration,
|
|
44
47
|
// and for sections to be added/removed gracefully from the DOM
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
}
|
|
63
63
|
return [...secs, sec];
|
|
64
64
|
}
|
|
65
|
-
$: formattedSections = formatSections($sections);
|
|
66
65
|
|
|
67
66
|
onMount(() => {
|
|
68
67
|
if (!noContents) {
|
|
@@ -96,36 +95,34 @@
|
|
|
96
95
|
<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">Contents</h2>
|
|
97
96
|
{/if}
|
|
98
97
|
<ol class="ons-list ons-u-mb-l ons-list--dashed">
|
|
99
|
-
{#
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
{/each}
|
|
128
|
-
{/if}
|
|
98
|
+
{#each formatSections($sections) as section}
|
|
99
|
+
<li class="ons-list__item">
|
|
100
|
+
{#if section.id && section.title}
|
|
101
|
+
<a
|
|
102
|
+
href="#{section.id}"
|
|
103
|
+
class="ons-list__link"
|
|
104
|
+
class:ons-table-of-contents__link-active={section.id === active}
|
|
105
|
+
>
|
|
106
|
+
{section.title}
|
|
107
|
+
</a>
|
|
108
|
+
{/if}
|
|
109
|
+
{#if section.subsections.length > 0}
|
|
110
|
+
<ol class="ons-list ons-u-mb-no ons-list--dashed">
|
|
111
|
+
{#each section.subsections as subsection}
|
|
112
|
+
<li class="ons-list__item">
|
|
113
|
+
<a
|
|
114
|
+
href="#{subsection.id}"
|
|
115
|
+
class="ons-list__link"
|
|
116
|
+
class:ons-table-of-contents__link-active={subsection.id === active}
|
|
117
|
+
>
|
|
118
|
+
{subsection.title}
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
{/each}
|
|
122
|
+
</ol>
|
|
123
|
+
{/if}
|
|
124
|
+
</li>
|
|
125
|
+
{/each}
|
|
129
126
|
</ol>
|
|
130
127
|
</nav>
|
|
131
128
|
{/if}
|