@onsvisual/svelte-components 1.0.36 → 1.0.37
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.
|
@@ -39,7 +39,9 @@
|
|
|
39
39
|
*/
|
|
40
40
|
export let marginBottom = true;
|
|
41
41
|
|
|
42
|
+
let el;
|
|
42
43
|
let active;
|
|
44
|
+
let mounted = false;
|
|
43
45
|
|
|
44
46
|
setContext("tocId", id);
|
|
45
47
|
|
|
@@ -50,6 +52,7 @@
|
|
|
50
52
|
setContext("observer", observer);
|
|
51
53
|
|
|
52
54
|
function formatSections(sections) {
|
|
55
|
+
if (sections.length === 0) return [];
|
|
53
56
|
const secs = [];
|
|
54
57
|
let sec = { subsections: [] };
|
|
55
58
|
for (const section of sections) {
|
|
@@ -81,12 +84,25 @@
|
|
|
81
84
|
}
|
|
82
85
|
);
|
|
83
86
|
}
|
|
87
|
+
// The table of contents doesn't populate unless it's after the main content
|
|
88
|
+
// This is a trick to flip the order when the page hydrates
|
|
89
|
+
el.prepend(el.lastElementChild);
|
|
90
|
+
mounted = true;
|
|
84
91
|
});
|
|
85
92
|
</script>
|
|
86
93
|
|
|
87
94
|
<Container {cls} {width} {marginTop} {marginBottom}>
|
|
88
|
-
<div
|
|
89
|
-
|
|
95
|
+
<div
|
|
96
|
+
class="ons-grid ons-grid--spaced ons-grid--loose ons-js-toc-container"
|
|
97
|
+
class:flip-display-order={!mounted}
|
|
98
|
+
bind:this={el}
|
|
99
|
+
>
|
|
100
|
+
<div class="ons-nav-sections-content ons-grid__col ons-col-8@m">
|
|
101
|
+
<slot name="before" />
|
|
102
|
+
<slot />
|
|
103
|
+
<slot name="after" />
|
|
104
|
+
</div>
|
|
105
|
+
<div class="ons-nav-sections-toc ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
|
|
90
106
|
<aside class="ons-table-of-contents-container" role="complementary">
|
|
91
107
|
<slot name="before-nav" />
|
|
92
108
|
{#if !noContents}
|
|
@@ -129,11 +145,16 @@
|
|
|
129
145
|
<slot name="after-nav" />
|
|
130
146
|
</aside>
|
|
131
147
|
</div>
|
|
132
|
-
<div class="ons-grid__col ons-col-8@m">
|
|
133
|
-
<slot name="before" />
|
|
134
|
-
<slot />
|
|
135
|
-
<slot name="after" />
|
|
136
|
-
</div>
|
|
137
148
|
</div>
|
|
138
149
|
<slot name="footer" />
|
|
139
150
|
</Container>
|
|
151
|
+
|
|
152
|
+
<style>
|
|
153
|
+
/* These classes force the table of contents to render on the left of the page before hydration */
|
|
154
|
+
.flip-display-order {
|
|
155
|
+
direction: rtl;
|
|
156
|
+
}
|
|
157
|
+
.flip-display-order > * {
|
|
158
|
+
direction: initial;
|
|
159
|
+
}
|
|
160
|
+
</style>
|
|
@@ -12,11 +12,11 @@ export default class NavSections extends SvelteComponentTyped<{
|
|
|
12
12
|
}, {
|
|
13
13
|
[evt: string]: CustomEvent<any>;
|
|
14
14
|
}, {
|
|
15
|
-
'before-nav': {};
|
|
16
|
-
'after-nav': {};
|
|
17
15
|
before: {};
|
|
18
16
|
default: {};
|
|
19
17
|
after: {};
|
|
18
|
+
'before-nav': {};
|
|
19
|
+
'after-nav': {};
|
|
20
20
|
footer: {};
|
|
21
21
|
}> {
|
|
22
22
|
}
|
|
@@ -38,11 +38,11 @@ declare const __propDef: {
|
|
|
38
38
|
[evt: string]: CustomEvent<any>;
|
|
39
39
|
};
|
|
40
40
|
slots: {
|
|
41
|
-
'before-nav': {};
|
|
42
|
-
'after-nav': {};
|
|
43
41
|
before: {};
|
|
44
42
|
default: {};
|
|
45
43
|
after: {};
|
|
44
|
+
'before-nav': {};
|
|
45
|
+
'after-nav': {};
|
|
46
46
|
footer: {};
|
|
47
47
|
};
|
|
48
48
|
};
|