diff --git a/CHANGELOG.md b/CHANGELOG.md index 8106f3242..ce21d7e63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,8 @@ ### Bug Fixes - The private member visibility option will now be respected in generated sites, #1992. +- Overload rendering will no longer be broken if JavaScript is disabled, #453. +- All overloads are now shown at once rather than requiring clicks to see the documentation for each signature, #1100. ## v0.23.6 (2022-07-08) diff --git a/src/lib/output/themes/default/assets/bootstrap.ts b/src/lib/output/themes/default/assets/bootstrap.ts index 064559c10..6226ace64 100644 --- a/src/lib/output/themes/default/assets/bootstrap.ts +++ b/src/lib/output/themes/default/assets/bootstrap.ts @@ -1,7 +1,6 @@ import { Application, registerComponent } from "./typedoc/Application"; import { MenuHighlight } from "./typedoc/components/MenuHighlight"; import { initSearch } from "./typedoc/components/Search"; -import { Signature } from "./typedoc/components/Signature"; import { Toggle } from "./typedoc/components/Toggle"; import { Filter } from "./typedoc/components/Filter"; import { Accordion } from "./typedoc/components/Accordion"; @@ -10,7 +9,6 @@ import { initTheme } from "./typedoc/Theme"; initSearch(); registerComponent(MenuHighlight, ".menu-highlight"); -registerComponent(Signature, ".tsd-signatures"); registerComponent(Toggle, "a[data-toggle]"); registerComponent(Accordion, ".tsd-index-accordion"); registerComponent(Filter, ".tsd-filter-item input[type=checkbox]"); diff --git a/src/lib/output/themes/default/assets/typedoc/components/Signature.ts b/src/lib/output/themes/default/assets/typedoc/components/Signature.ts deleted file mode 100644 index b3d51b535..000000000 --- a/src/lib/output/themes/default/assets/typedoc/components/Signature.ts +++ /dev/null @@ -1,169 +0,0 @@ -import { Component, IComponentOptions } from "../Component"; -import { Viewport } from "../services/Viewport"; - -/** - * Holds a signature and its description. - */ -class SignatureGroup { - /** - * The target signature. - */ - signature: Element; - - /** - * The description for the signature. - */ - description: Element; - - /** - * Create a new SignatureGroup instance. - * - * @param signature The target signature. - * @param description The description for the signature. - */ - constructor(signature: Element, description: Element) { - this.signature = signature; - this.description = description; - } - - /** - * Add the given class to all elements of the group. - * - * @param className The class name to add. - */ - addClass(className: string) { - this.signature.classList.add(className); - this.description.classList.add(className); - } - - /** - * Remove the given class from all elements of the group. - * - * @param className The class name to remove. - */ - removeClass(className: string) { - this.signature.classList.remove(className); - this.description.classList.remove(className); - } -} - -/** - * Controls the tab like behavior of methods and functions with multiple signatures. - */ -export class Signature extends Component { - /** - * List of found signature groups. - */ - private groups: SignatureGroup[] = []; - - /** - * The container holding all the descriptions. - */ - private container?: HTMLElement; - - /** - * The index of the currently displayed signature. - */ - private index: number = -1; - - /** - * Create a new Signature instance. - * - * @param options Backbone view constructor options. - */ - constructor(options: IComponentOptions) { - super(options); - - this.createGroups(); - - if (this.container) { - this.el.classList.add("active"); - Array.from(this.el.children).forEach((signature) => { - signature.addEventListener("touchstart", (event) => - this.onClick(event) - ); - signature.addEventListener("click", (event) => - this.onClick(event) - ); - }); - this.container.classList.add("active"); - this.setIndex(this.inferIndexFromHash()); - } - } - - /** - * Set the index of the active signature. - * - * @param index The index of the signature to activate. - */ - private setIndex(index: number) { - if (index < 0) index = 0; - if (index > this.groups.length - 1) index = this.groups.length - 1; - if (this.index == index) return; - - const to = this.groups[index]; - if (this.index > -1) { - const from = this.groups[this.index]; - - from.removeClass("current"); - from.addClass("fade-out"); - to.addClass("current"); - to.addClass("fade-in"); - - if (to.signature.id) { - const target = new URL(location.href); - target.hash = to.signature.id; - history.replaceState({}, "", target); - } - - Viewport.instance.triggerResize(); - - setTimeout(() => { - from.removeClass("fade-out"); - to.removeClass("fade-in"); - }, 300); - } else { - to.addClass("current"); - Viewport.instance.triggerResize(); - } - - this.index = index; - } - - /** - * Find all signature/description groups. - */ - private createGroups() { - const signatures = this.el.children; - if (signatures.length < 2) return; - - this.container = this.el.nextElementSibling as HTMLElement; - const descriptions = this.container.children; - - this.groups = []; - for (let index = 0; index < signatures.length; index++) { - this.groups.push( - new SignatureGroup(signatures[index], descriptions[index]) - ); - } - } - - /** - * Triggered when the user clicks onto a signature header. - * - * @param e The related event object. - */ - private onClick(e: Event) { - this.groups.forEach((group, index) => { - if (group.signature === e.currentTarget) { - this.setIndex(index); - } - }); - } - - private inferIndexFromHash() { - const hash = location.hash.substring(1); - const index = this.groups.findIndex((s) => s.signature.id === hash); - return Math.max(0, index); - } -} diff --git a/src/lib/output/themes/default/partials/header.tsx b/src/lib/output/themes/default/partials/header.tsx index d8d4e5a3e..904e44691 100644 --- a/src/lib/output/themes/default/partials/header.tsx +++ b/src/lib/output/themes/default/partials/header.tsx @@ -2,7 +2,7 @@ import { hasTypeParameters, join, renderFlags } from "../../lib"; import { JSX } from "../../../../utils"; import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext"; import type { PageEvent } from "../../../events"; -import { DeclarationReflection, Reflection } from "../../../../models"; +import { DeclarationReflection, Reflection, ReflectionKind } from "../../../../models"; export const header = (context: DefaultThemeRenderContext, props: PageEvent) => { const HeadingLevel = props.model.isProject() ? "h2" : "h1"; @@ -10,7 +10,7 @@ export const header = (context: DefaultThemeRenderContext, props: PageEvent {!!props.model.parent && } - {props.model.kindString !== "Project" && `${props.model.kindString ?? ""} `} + {props.model.kind !== ReflectionKind.Project && `${props.model.kindString ?? ""} `} {props.model.name} {props.model instanceof DeclarationReflection && props.model.version !== undefined && diff --git a/src/lib/output/themes/default/partials/member.getterSetter.tsx b/src/lib/output/themes/default/partials/member.getterSetter.tsx index 41f829820..48f93d9e9 100644 --- a/src/lib/output/themes/default/partials/member.getterSetter.tsx +++ b/src/lib/output/themes/default/partials/member.getterSetter.tsx @@ -6,26 +6,27 @@ export const memberGetterSetter = (context: DefaultThemeRenderContext, props: De <>
    {!!props.getSignature && ( -
  • - get {props.name} - {context.memberSignatureTitle(props.getSignature, { - hideName: true, - })} -
    • + <> +
  • + get {props.name} + {context.memberSignatureTitle(props.getSignature, { + hideName: true, + })} +
    • +
  • {context.memberSignatureBody(props.getSignature)}
    • + )} {!!props.setSignature && ( -
  • - set {props.name} - {context.memberSignatureTitle(props.setSignature, { - hideName: true, - })} -
    • + <> +
  • + set {props.name} + {context.memberSignatureTitle(props.setSignature, { + hideName: true, + })} +
    • +
  • {context.memberSignatureBody(props.setSignature)}
    • + )}
- -
    - {!!props.getSignature &&
  • {context.memberSignatureBody(props.getSignature)}
    • } - {!!props.setSignature &&
  • {context.memberSignatureBody(props.setSignature)}
    • } -
); diff --git a/src/lib/output/themes/default/partials/member.signature.title.tsx b/src/lib/output/themes/default/partials/member.signature.title.tsx index 05200e891..7259d3dab 100644 --- a/src/lib/output/themes/default/partials/member.signature.title.tsx +++ b/src/lib/output/themes/default/partials/member.signature.title.tsx @@ -1,7 +1,7 @@ import { join, renderTypeParametersSignature, wbr } from "../../lib"; import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext"; import { JSX } from "../../../../utils"; -import type { SignatureReflection } from "../../../../models"; +import { ReflectionKind, SignatureReflection } from "../../../../models"; export const memberSignatureTitle = ( context: DefaultThemeRenderContext, @@ -13,7 +13,7 @@ export const memberSignatureTitle = ( wbr(props.name) ) : ( <> - {props.kindString === "Constructor signature" && ( + {props.kind === ReflectionKind.ConstructorSignature && ( <> {!!props.flags.isAbstract && abstract } new diff --git a/src/lib/output/themes/default/partials/member.signatures.tsx b/src/lib/output/themes/default/partials/member.signatures.tsx index 1159b53c1..1069781f3 100644 --- a/src/lib/output/themes/default/partials/member.signatures.tsx +++ b/src/lib/output/themes/default/partials/member.signatures.tsx @@ -1,20 +1,19 @@ import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext"; import { JSX } from "../../../../utils"; import type { DeclarationReflection } from "../../../../models"; +import { anchorIcon } from "./anchor-icon"; export const memberSignatures = (context: DefaultThemeRenderContext, props: DeclarationReflection) => ( <>
    {props.signatures?.map((item) => ( -
  • - {context.memberSignatureTitle(item)} -
    • - ))} -
- -
    - {props.signatures?.map((item) => ( -
  • {context.memberSignatureBody(item)}
    • + <> + +
  • {context.memberSignatureBody(item)}
    • + ))}
diff --git a/src/lib/output/themes/default/partials/parameter.tsx b/src/lib/output/themes/default/partials/parameter.tsx index ebc17749a..1e9d8829d 100644 --- a/src/lib/output/themes/default/partials/parameter.tsx +++ b/src/lib/output/themes/default/partials/parameter.tsx @@ -10,21 +10,18 @@ export const parameter = (context: DefaultThemeRenderContext, props: Declaration
    • {props.signatures.map((item) => ( -
    • - {context.memberSignatureTitle(item, { - hideName: true, - })} -
      • - ))} -
    - -
      - {props.signatures.map((item) => ( -
    • - {context.memberSignatureBody(item, { - hideSources: true, - })} -
      • + <> +
    • + {context.memberSignatureTitle(item, { + hideName: true, + })} +
      • +
    • + {context.memberSignatureBody(item, { + hideSources: true, + })} +
      • + ))}
    • diff --git a/static/style.css b/static/style.css index 88952e47e..048427e08 100644 --- a/static/style.css +++ b/static/style.css @@ -248,35 +248,6 @@ dd { padding-left: 0; } -ul.tsd-descriptions > li > :first-child, -.tsd-panel > :first-child, -.col-8 > :first-child, -.col-4 > :first-child, -ul.tsd-descriptions > li > :first-child > :first-child, -.tsd-panel > :first-child > :first-child, -.col-8 > :first-child > :first-child, -.col-4 > :first-child > :first-child, -ul.tsd-descriptions > li > :first-child > :first-child > :first-child, -.tsd-panel > :first-child > :first-child > :first-child, -.col-8 > :first-child > :first-child > :first-child, -.col-4 > :first-child > :first-child > :first-child { - margin-top: 0; -} -ul.tsd-descriptions > li > :last-child, -.tsd-panel > :last-child, -.col-8 > :last-child, -.col-4 > :last-child, -ul.tsd-descriptions > li > :last-child > :last-child, -.tsd-panel > :last-child > :last-child, -.col-8 > :last-child > :last-child, -.col-4 > :last-child > :last-child, -ul.tsd-descriptions > li > :last-child > :last-child > :last-child, -.tsd-panel > :last-child > :last-child > :last-child, -.col-8 > :last-child > :last-child > :last-child, -.col-4 > :last-child > :last-child > :last-child { - margin-bottom: 0; -} - @keyframes fade-in { from { opacity: 0; @@ -1073,9 +1044,6 @@ a.tsd-index-link { font-size: 14px; overflow-x: auto; } -.tsd-panel > .tsd-signature { - border-width: 1px 0; -} .tsd-signature-symbol { color: var(--color-text-aside); @@ -1090,60 +1058,16 @@ a.tsd-index-link { .tsd-signatures { padding: 0; margin: 0 0 1em 0; - border: 1px solid var(--color-accent); + list-style-type: none; } .tsd-signatures .tsd-signature { margin: 0; - border-width: 1px 0 0 0; - transition: background-color 0.1s; -} -.tsd-signatures .tsd-signature:first-child { - border-top-width: 0; -} -.tsd-signatures .tsd-signature.current { - background-color: var(--color-background-secondary); -} -.tsd-signatures.active > .tsd-signature { - cursor: pointer; -} -.tsd-panel > .tsd-signatures { + border-color: var(--color-accent); border-width: 1px 0; + transition: background-color 0.1s; } -.tsd-panel > a.anchor + .tsd-signatures { - border-top-width: 0; - margin-top: -20px; -} - -ul.tsd-descriptions { - position: relative; - overflow: hidden; - padding: 0; - list-style: none; -} -ul.tsd-descriptions.active > .tsd-description { - display: none; -} -ul.tsd-descriptions.active > .tsd-description.current { - display: block; -} -ul.tsd-descriptions.active > .tsd-description.fade-in { - animation: fade-in-delayed 0.3s; -} -ul.tsd-descriptions.active > .tsd-description.fade-out { - animation: fade-out-delayed 0.3s; - position: absolute; - display: block; - top: 0; - left: 0; - right: 0; - opacity: 0; - visibility: hidden; -} -ul.tsd-descriptions h4, -ul.tsd-descriptions .tsd-index-panel h3, -.tsd-index-panel ul.tsd-descriptions h3 { - font-size: 16px; - margin: 1em 0 0.5em 0; +.tsd-description .tsd-signatures .tsd-signature { + border-width: 1px; } ul.tsd-parameter-list,