Skip to content

Commit 1482eb5

Browse files
Gerrit0Gerrit0
committed
Add support for collapsing groups+categories
Resolves #2330
1 parent 9f78397 commit 1482eb5

File tree

9 files changed

+49
-26
lines changed

9 files changed

+49
-26
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
- New option, `--customFooterHtml` to add custom HTML to the generated page footer, #2559.
4949
- TypeDoc will now copy modifier tags to children if specified in the `--cascadedModifierTags` option, #2056.
5050
- TypeDoc will now warn if mutually exclusive modifier tags are specified for a comment (e.g. both `@alpha` and `@beta`), #2056.
51+
- Groups and categories can now be collapsed in the page body, #2330.
5152
- Added support for JSDoc `@hideconstructor` tag.
5253
This tag should only be used to work around TypeScript#58653, prefer the more general `@hidden`/`@ignore` tag to hide members normally, #2577.
5354
- Added `--useHostedBaseUrlForAbsoluteLinks` option to use the `--hostedBaseUrl` option to produce absolute links to pages on a site, #940.

‎src/lib/models/reflections/kind.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export enum ReflectionKind {
3838
export namespace ReflectionKind {
3939
export type KindString = EnumKeys<typeof ReflectionKind>;
4040

41+
/** @internal */
4142
export const All = ReflectionKind.Reference * 2 - 1;
4243

4344
/** @internal */
@@ -89,6 +90,7 @@ export namespace ReflectionKind {
8990
ReflectionKind.Interface |
9091
ReflectionKind.TypeAlias |
9192
ReflectionKind.Reference;
93+
/** @internal */
9294
export const MayContainDocuments =
9395
SomeExport | ReflectionKind.Project | ReflectionKind.Document;
9496
/** @internal */

‎src/lib/output/themes/default/assets/bootstrap.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { initTheme } from "./typedoc/Theme";
77
import { initNav } from "./typedoc/Navigation";
88

99
registerComponent(Toggle, "a[data-toggle]");
10-
registerComponent(Accordion, ".tsd-index-accordion");
10+
registerComponent(Accordion, ".tsd-accordion");
1111
registerComponent(Filter, ".tsd-filter-item input[type=checkbox]");
1212

1313
const themeChoice = document.getElementById("tsd-theme");

‎src/lib/output/themes/default/assets/typedoc/Navigation.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ function buildNavElement(
5757
const fullPath = [...path, el.text];
5858
const details = li.appendChild(document.createElement("details"));
5959
details.className = el.class
60-
? `${el.class} tsd-index-accordion`
61-
: "tsd-index-accordion";
60+
? `${el.class} tsd-accordion`
61+
: "tsd-accordion";
6262
details.dataset.key = fullPath.join("$");
6363

6464
const summary = details.appendChild(document.createElement("summary"));

‎src/lib/output/themes/default/partials/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function index(context: DefaultThemeRenderContext, props: ContainerReflec
5757
)
5858
) {
5959
content = (
60-
<details class="tsd-index-content tsd-index-accordion" open={true}>
60+
<details class="tsd-index-content tsd-accordion" open={true}>
6161
<summary class="tsd-accordion-summary tsd-index-summary">
6262
<h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex={0}>
6363
{context.icons.chevronSmall()} {context.i18n.theme_index()}

‎src/lib/output/themes/default/partials/members.group.tsx

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,34 @@ export function membersGroup(context: DefaultThemeRenderContext, group: Reflecti
66
if (group.categories) {
77
return (
88
<>
9-
{group.categories.map((item) => (
10-
<section class="tsd-panel-group tsd-member-group">
11-
<h2>
12-
{group.title}
13-
{!!item.title && <> - {item.title}</>}
14-
</h2>
15-
{item.children.map((item) => !item.hasOwnDocument && context.member(item))}
16-
</section>
17-
))}
9+
{group.categories.map((item) => {
10+
const title = `${group.title} - ${item.title}`;
11+
12+
return (
13+
<details class="tsd-panel-group tsd-member-group tsd-accordion" open>
14+
<summary class="tsd-accordion-summary" data-key={"section-" + title}>
15+
<h2>
16+
{context.icons.chevronDown()} {title}
17+
</h2>
18+
</summary>
19+
<section>
20+
{item.children.map((item) => !item.hasOwnDocument && context.member(item))}
21+
</section>
22+
</details>
23+
);
24+
})}
1825
</>
1926
);
2027
}
2128

2229
return (
23-
<section class="tsd-panel-group tsd-member-group">
24-
<h2>{group.title}</h2>
25-
{group.children.map((item) => !item.hasOwnDocument && context.member(item))}
26-
</section>
30+
<details class="tsd-panel-group tsd-member-group tsd-accordion" open>
31+
<summary class="tsd-accordion-summary" data-key={"section-" + group.title}>
32+
<h2>
33+
{context.icons.chevronDown()} {group.title}
34+
</h2>
35+
</summary>
36+
<section>{group.children.map((item) => !item.hasOwnDocument && context.member(item))}</section>
37+
</details>
2738
);
2839
}

‎src/lib/output/themes/default/partials/members.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,21 @@ export function members(context: DefaultThemeRenderContext, props: ContainerRefl
1010
{props.categories.map(
1111
(item) =>
1212
!item.allChildrenHaveOwnDocument() && (
13-
<section
13+
<details
1414
class={classNames(
15-
{ "tsd-panel-group": true, "tsd-member-group": true },
15+
{ "tsd-panel-group": true, "tsd-member-group": true, "tsd-accordion": true },
1616
props instanceof DeclarationReflection ? context.getReflectionClasses(props) : "",
1717
)}
1818
>
19-
<h2>{item.title}</h2>
20-
{item.children.map((item) => !item.hasOwnDocument && context.member(item))}
21-
</section>
19+
<summary class="tsd-accordion-summary" data-key={"section-" + item.title}>
20+
<h2>
21+
{context.icons.chevronDown()} {item.title}
22+
</h2>
23+
</summary>
24+
<section>
25+
{item.children.map((item) => !item.hasOwnDocument && context.member(item))}
26+
</section>
27+
</details>
2228
),
2329
)}
2430
</>

‎src/lib/output/themes/default/partials/navigation.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export function settings(context: DefaultThemeRenderContext) {
7373

7474
return (
7575
<div class="tsd-navigation settings">
76-
<details class="tsd-index-accordion" open={false}>
76+
<details class="tsd-accordion" open={false}>
7777
<summary class="tsd-accordion-summary">
7878
<h3>
7979
{context.icons.chevronDown()}
@@ -176,7 +176,7 @@ export function pageNavigation(context: DefaultThemeRenderContext, props: PageEv
176176
finalizeLevel(true);
177177

178178
return (
179-
<details open={true} class="tsd-index-accordion tsd-page-navigation">
179+
<details open={true} class="tsd-accordion tsd-page-navigation">
180180
<summary class="tsd-accordion-summary">
181181
<h3>
182182
{context.icons.chevronDown()}

‎static/style.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -839,7 +839,7 @@ a.tsd-index-link {
839839
padding-top: 0;
840840
padding-bottom: 0;
841841
}
842-
.tsd-index-accordion .tsd-accordion-summary > svg {
842+
.tsd-accordion .tsd-accordion-summary > svg {
843843
margin-left: 0.25rem;
844844
}
845845
.tsd-index-content > :not(:first-child) {
@@ -888,14 +888,17 @@ a.tsd-index-link {
888888
}
889889

890890
.tsd-panel-group {
891-
margin: 4rem 0;
891+
margin: 2rem 0;
892892
}
893893
.tsd-panel-group.tsd-index-group {
894894
margin: 2rem 0;
895895
}
896896
.tsd-panel-group.tsd-index-group details {
897897
margin: 2rem 0;
898898
}
899+
.tsd-panel-group > .tsd-accordion-summary {
900+
margin-bottom: 1rem;
901+
}
899902

900903
#tsd-search {
901904
transition: background-color 0.2s;

0 commit comments

Comments
 (0)