From 1277b7b0b5b0b57d2c83c25d600c317f5d8ec7ee Mon Sep 17 00:00:00 2001 From: denis Date: Mon, 5 Mar 2018 21:34:42 +0100 Subject: [PATCH 1/5] Add collapse, tab and scrollspy definitions Add more definitions and use popper.js definition for offset and behavor --- types/bootstrap/bootstrap-tests.ts | 97 +++++++++++++++++++++++++++--- types/bootstrap/index.d.ts | 78 +++++++++++++++++++----- types/bootstrap/package.json | 6 ++ 3 files changed, 159 insertions(+), 22 deletions(-) create mode 100644 types/bootstrap/package.json diff --git a/types/bootstrap/bootstrap-tests.ts b/types/bootstrap/bootstrap-tests.ts index 17d6e088cf..9ab7654373 100755 --- a/types/bootstrap/bootstrap-tests.ts +++ b/types/bootstrap/bootstrap-tests.ts @@ -2,8 +2,10 @@ // Alert // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $("#alert").alert(); +// $ExpectType JQuery $("#alert").alert("close"); $("#alert").on("close.bs.alert", () => {}); @@ -12,20 +14,32 @@ $("#alert").on("close.bs.alert", () => {}); // Button // -------------------------------------------------------------------------------------- -// $("#button").button(); // must fail +// $ExpectError +$("#button").button(); +// $ExpectType JQuery $("#button").button("toggle"); // -------------------------------------------------------------------------------------- // Carousel // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $("#carousel").carousel(); +// $ExpectType JQuery $("#carousel").carousel("pause"); $("#carousel").carousel(100); +$("#carousel").on("slide.bs.carousel", function(ev) { + const that: HTMLElement = this; + const from: number = ev.from; + const to: number = ev.to; + const direction: string = ev.direction; + const data: undefined = ev.data; +}); + $("#carousel").carousel({ interval: 5000, keyboard: true, @@ -37,20 +51,43 @@ $("#carousel").carousel({ pause: false, }); -$("#carousel").on("slide.bs.carousel", function(ev) { - const that: HTMLElement = this; - const from: number = ev.from; - const to: number = ev.to; - const direction: string = ev.direction; - const data: undefined = ev.data; +// -------------------------------------------------------------------------------------- +// Collapse +// -------------------------------------------------------------------------------------- + +// $ExpectType JQuery +$("#collapse").collapse(); + +// $ExpectType JQuery +$("#collapse").collapse("toggle"); + +$("#collapse").on("show.bs.collapse", () => {}); + +$("#collapse").collapse({ + parent: "#parent", + toggle: true, +}); + +$("#collapse").collapse({ + parent: document.body, +}); + +$("#collapse").collapse({ + parent: $("#parent"), +}); + +$("#collapse").collapse({ + toggle: false, }); // -------------------------------------------------------------------------------------- // Dropdown // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $("#dropdown").dropdown(); +// $ExpectType JQuery $("#dropdown").dropdown("update"); $("#dropdown").on("hide.bs.dropdown", () => {}); @@ -81,8 +118,10 @@ $("#dropdown").dropdown({ // Modal // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $("#modal").modal(); +// $ExpectType JQuery $("#modal").modal("show"); $("#modal").on("hide.bs.modal", () => {}); @@ -98,12 +137,56 @@ $("#modal").modal({ backdrop: "static", }); +// -------------------------------------------------------------------------------------- +// Popover +// -------------------------------------------------------------------------------------- + +// $ExpectType JQuery +$("#scrollspy").popover(); + +// $ExpectType JQuery +$("#scrollspy").popover("toggle"); + +$("#scrollspy").on("activate.bs.scrollspy", () => {}); + +// TODO: test popover with options + +// -------------------------------------------------------------------------------------- +// Scrollspy +// -------------------------------------------------------------------------------------- + +// $ExpectType JQuery +$("#scrollspy").scrollspy(); + +// $ExpectType JQuery +$("#scrollspy").scrollspy("refresh"); + +$("#scrollspy").on("activate.bs.scrollspy", () => {}); + +$("#scrollspy").scrollspy({ + offset: 100, +}); + +// -------------------------------------------------------------------------------------- +// Tab +// -------------------------------------------------------------------------------------- + +// $ExpectType JQuery +$("#someListItem").tab("show"); + +$("a[data-toggle=\"list\"]").on("shown.bs.tab", (e) => { + e.target; // newly activated tab + e.relatedTarget; // previous active tab +}); + // -------------------------------------------------------------------------------------- // Tooltip // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $("#tooltip").tooltip(); +// $ExpectType JQuery $("#tooltip").tooltip("show"); $("#tooltip").on("hide.bs.tooltip", () => {}); diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index c158bbd807..5e7fea80f7 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -4,16 +4,16 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -// TODO: collapse, tab (list-group, navs), popovers, scrollspy +// TODO: popovers options /// +/// // -------------------------------------------------------------------------- // Some Types and Interfaces // -------------------------------------------------------------------------- type BootstrapPlacement = "auto" | "top" | "bottom" | "left" | "right"; -type PopperBehavior = "flip" | "clockwise" | "counterclockwise"; interface BootstrapDelay { show: number; @@ -26,16 +26,9 @@ interface BootstrapTooltipInstance { tip: HTMLElement; } -interface BootstrapOffsetExtend { - top?: number; - left?: number; - width?: number; - height?: number; -} - interface BootstrapOffsetsExtend { - popper?: BootstrapOffsetExtend; - reference?: BootstrapOffsetExtend; + popper?: Partial; + reference?: Partial; } // -------------------------------------------------------------------------------------- @@ -75,6 +68,24 @@ interface BootstrapCarouselOption { wrap?: boolean; } +interface BootstrapCollapseOption { + /** + * If parent is provided, then all collapsible elements under the specified parent will be closed when + * this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). + * The attribute has to be set on the target collapsible area. + * + * @default "" + */ + parent?: string | JQuery | Element; + + /** + * Toggles the collapsible element on invocation. + * + * @default true + */ + toggle?: boolean; +} + interface BootstrapDropdownOption { /** * Offset of the dropdown relative to its target. @@ -99,7 +110,7 @@ interface BootstrapDropdownOption { * * @default "scrollParent" */ - boundary?: "viewport" | "window" | "scrollParent" | HTMLElement; + boundary?: Popper.Boundary | HTMLElement; } interface BootstrapModalOption { @@ -133,6 +144,26 @@ interface BootstrapModalOption { show?: boolean; } +interface BootstrapPoppoverOption { + /** + * Apply a CSS fade transition to the popover. + * + * @default true + */ + animation: boolean; + + // TODO +} + +interface BootstrapScrollspyOption { + /** + * Pixels to offset from top when calculating position of scroll. + * + * @default 10 + */ + offset?: number; +} + interface BootstrapTooltipOption { /** * Apply a CSS fade transition to the tooltip. @@ -232,7 +263,7 @@ interface BootstrapTooltipOption { * * @default "flip" */ - fallbackPlacement?: PopperBehavior | PopperBehavior[]; + fallbackPlacement?: Popper.Behavior | ReadonlyArray; /** * Overflow constraint boundary of the tooltip. @@ -242,7 +273,7 @@ interface BootstrapTooltipOption { * * @default "scrollParent" */ - boundary?: "viewport" | "window" | "scrollParent" | HTMLElement; + boundary?: Popper.Boundary | HTMLElement; } // -------------------------------------------------------------------------------------- @@ -268,8 +299,12 @@ interface BootstrapCarouselEventHandler extends JQuery.Event extends Iterable carousel(action: "cycle" | "pause" | number | "prev" | "next" | "dispose"): this; carousel(options?: BootstrapCarouselOption): this; + collapse(action: "toggle" | "show" | "hide" | "dispose"): this; + collapse(options?: BootstrapCollapseOption): this; + dropdown(action: "toggle" | "update" | "dispose"): this; dropdown(options?: BootstrapDropdownOption): this; modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose"): this; modal(options?: BootstrapModalOption): this; + popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; + popover(options?: BootstrapPoppoverOption): this; + + scrollspy(action: "refresh" | "dispose"): this; + scrollspy(options?: BootstrapScrollspyOption): this; + + tab(action: "show" | "dispose"): this; + tooltip(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; tooltip(options?: BootstrapTooltipOption): this; on(events: BootstrapCarouselEvent, handler: JQuery.EventHandlerBase>): this; - on(events: BootstrapAlertEvent | BootstrapDropdownEvent | BootstrapModalEvent | BootstrapTooltipEvent, + on(events: + BootstrapAlertEvent | BootstrapCollapseEvent | BootstrapDropdownEvent | BootstrapModalEvent | + BootstrapPopoverEvent | BootstrapScrollspyEvent | BootstrapTapEvent | BootstrapTooltipEvent, handler: JQuery.EventHandler): this; } diff --git a/types/bootstrap/package.json b/types/bootstrap/package.json new file mode 100644 index 0000000000..7f11c30706 --- /dev/null +++ b/types/bootstrap/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "popper.js": "^1.12.9" + } +} \ No newline at end of file From a72347d6542716442681e302ba8d47b0e886ccd3 Mon Sep 17 00:00:00 2001 From: denis Date: Mon, 5 Mar 2018 22:55:57 +0100 Subject: [PATCH 2/5] Use Bootstrap namespace Use a Bootstrap namespace instead of prefixing names. --- types/bootstrap/bootstrap-tests.ts | 2 +- types/bootstrap/index.d.ts | 102 +++++++++++++++-------------- 2 files changed, 54 insertions(+), 50 deletions(-) diff --git a/types/bootstrap/bootstrap-tests.ts b/types/bootstrap/bootstrap-tests.ts index 9ab7654373..f8934ebbfc 100755 --- a/types/bootstrap/bootstrap-tests.ts +++ b/types/bootstrap/bootstrap-tests.ts @@ -103,7 +103,7 @@ $("#dropdown").dropdown({ }); $("#dropdown").dropdown({ - offset(offsets: BootstrapOffsetsExtend) { + offset(offsets: Bootstrap.OffsetsExtend) { if (!this.flip) return { popper: { left: 100 } }; return {}; diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index 5e7fea80f7..01089126fb 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -6,27 +6,29 @@ // TODO: popovers options -/// /// +/// + +export as namespace Bootstrap; // -------------------------------------------------------------------------- // Some Types and Interfaces // -------------------------------------------------------------------------- -type BootstrapPlacement = "auto" | "top" | "bottom" | "left" | "right"; +export type Placement = "auto" | "top" | "bottom" | "left" | "right"; -interface BootstrapDelay { +export interface Delay { show: number; hide: number; } -interface BootstrapTooltipInstance { - config: BootstrapTooltipOption; +export interface TooltipInstance { + config: TooltipOption; element: Element; tip: HTMLElement; } -interface BootstrapOffsetsExtend { +export interface OffsetsExtend { popper?: Partial; reference?: Partial; } @@ -35,7 +37,7 @@ interface BootstrapOffsetsExtend { // Options Interfaces // -------------------------------------------------------------------------------------- -interface BootstrapCarouselOption { +export interface CarouselOption { /** * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. * @@ -68,7 +70,7 @@ interface BootstrapCarouselOption { wrap?: boolean; } -interface BootstrapCollapseOption { +export interface CollapseOption { /** * If parent is provided, then all collapsible elements under the specified parent will be closed when * this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). @@ -86,14 +88,14 @@ interface BootstrapCollapseOption { toggle?: boolean; } -interface BootstrapDropdownOption { +export interface DropdownOption { /** * Offset of the dropdown relative to its target. * For more information refer to Popper.js's offset docs. * * @default 0 */ - offset?: number | string | ((this: BootstrapDropdownOption, offset: BootstrapOffsetsExtend) => BootstrapOffsetsExtend); + offset?: number | string | ((this: DropdownOption, offset: OffsetsExtend) => OffsetsExtend); /** * Allow Dropdown to flip in case of an overlapping on the reference element. @@ -113,7 +115,7 @@ interface BootstrapDropdownOption { boundary?: Popper.Boundary | HTMLElement; } -interface BootstrapModalOption { +export interface ModalOption { /** * Includes a modal-backdrop element. * Alternatively, specify static for a backdrop which doesn't close the modal on click. @@ -144,7 +146,7 @@ interface BootstrapModalOption { show?: boolean; } -interface BootstrapPoppoverOption { +export interface PoppoverOption { /** * Apply a CSS fade transition to the popover. * @@ -155,7 +157,7 @@ interface BootstrapPoppoverOption { // TODO } -interface BootstrapScrollspyOption { +export interface ScrollspyOption { /** * Pixels to offset from top when calculating position of scroll. * @@ -164,7 +166,7 @@ interface BootstrapScrollspyOption { offset?: number; } -interface BootstrapTooltipOption { +export interface TooltipOption { /** * Apply a CSS fade transition to the tooltip. * @@ -189,7 +191,7 @@ interface BootstrapTooltipOption { * * @default 0 */ - delay?: number | BootstrapDelay; + delay?: number | Delay; /** * Allow HTML in the tooltip. @@ -210,7 +212,7 @@ interface BootstrapTooltipOption { * * @default "top" */ - placement?: BootstrapPlacement | ((this: BootstrapTooltipInstance, tooltip: HTMLElement, trigger: Element) => BootstrapPlacement); + placement?: Placement | ((this: TooltipInstance, tooltip: HTMLElement, trigger: Element) => Placement); /** * If a selector is provided, tooltip objects will be delegated to the specified targets. @@ -280,7 +282,7 @@ interface BootstrapTooltipOption { // Events // -------------------------------------------------------------------------------------- -interface BootstrapCarouselEventHandler extends JQuery.Event { +export interface CarouselEventHandler extends JQuery.Event { /** * The direction in which the carousel is sliding. */ @@ -297,51 +299,53 @@ interface BootstrapCarouselEventHandler extends JQuery.Event extends Iterable { - alert(action?: "close" | "dispose"): this; +declare global { + interface JQuery extends Iterable { + alert(action?: "close" | "dispose"): this; - button(action: "toggle" | "dispose"): this; + button(action: "toggle" | "dispose"): this; - carousel(action: "cycle" | "pause" | number | "prev" | "next" | "dispose"): this; - carousel(options?: BootstrapCarouselOption): this; + carousel(action: "cycle" | "pause" | number | "prev" | "next" | "dispose"): this; + carousel(options?: CarouselOption): this; - collapse(action: "toggle" | "show" | "hide" | "dispose"): this; - collapse(options?: BootstrapCollapseOption): this; + collapse(action: "toggle" | "show" | "hide" | "dispose"): this; + collapse(options?: CollapseOption): this; - dropdown(action: "toggle" | "update" | "dispose"): this; - dropdown(options?: BootstrapDropdownOption): this; + dropdown(action: "toggle" | "update" | "dispose"): this; + dropdown(options?: DropdownOption): this; - modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose"): this; - modal(options?: BootstrapModalOption): this; + modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose"): this; + modal(options?: ModalOption): this; - popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; - popover(options?: BootstrapPoppoverOption): this; + popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; + popover(options?: PoppoverOption): this; - scrollspy(action: "refresh" | "dispose"): this; - scrollspy(options?: BootstrapScrollspyOption): this; + scrollspy(action: "refresh" | "dispose"): this; + scrollspy(options?: ScrollspyOption): this; - tab(action: "show" | "dispose"): this; + tab(action: "show" | "dispose"): this; - tooltip(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; - tooltip(options?: BootstrapTooltipOption): this; + tooltip(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; + tooltip(options?: TooltipOption): this; - on(events: BootstrapCarouselEvent, handler: JQuery.EventHandlerBase>): this; - on(events: - BootstrapAlertEvent | BootstrapCollapseEvent | BootstrapDropdownEvent | BootstrapModalEvent | - BootstrapPopoverEvent | BootstrapScrollspyEvent | BootstrapTapEvent | BootstrapTooltipEvent, - handler: JQuery.EventHandler): this; + on(events: CarouselEvent, handler: JQuery.EventHandlerBase>): this; + on(events: + AlertEvent | CollapseEvent | DropdownEvent | ModalEvent | + PopoverEvent | ScrollspyEvent | TapEvent | TooltipEvent, + handler: JQuery.EventHandler): this; + } } From 143f327125a8ac208ba31727a78876c11596e448 Mon Sep 17 00:00:00 2001 From: denis Date: Tue, 6 Mar 2018 22:12:08 +0100 Subject: [PATCH 3/5] Add popover options --- types/bootstrap/bootstrap-tests.ts | 42 ++++++++++++++-- types/bootstrap/index.d.ts | 79 +++++++++++++++--------------- 2 files changed, 76 insertions(+), 45 deletions(-) diff --git a/types/bootstrap/bootstrap-tests.ts b/types/bootstrap/bootstrap-tests.ts index f8934ebbfc..f6b6246724 100755 --- a/types/bootstrap/bootstrap-tests.ts +++ b/types/bootstrap/bootstrap-tests.ts @@ -142,14 +142,38 @@ $("#modal").modal({ // -------------------------------------------------------------------------------------- // $ExpectType JQuery -$("#scrollspy").popover(); +$("#popover").popover(); // $ExpectType JQuery -$("#scrollspy").popover("toggle"); +$("#popover").popover("toggle"); -$("#scrollspy").on("activate.bs.scrollspy", () => {}); +$("#popover").on("show.bs.popover", () => {}); -// TODO: test popover with options +$("#popover").popover({}); + +$("#popover").popover({ + animation: false, + container: "#container", + delay: {show: 500, hide: 100}, + html: true, + placement: "auto", + selector: "[rel=\"popover\"]", + template: '
', + title: "Hello world", + trigger: "hover focus", + offset: 10, + fallbackPlacement: ["flip", "clockwise"], + boundary: "scrollParent", +}); + +$("#popover").popover({ + placement(this, popover, trigger) { + console.log(this.tip === popover); + console.log(this.element === trigger); + console.log(this.config.content); + return "left"; + }, +}); // -------------------------------------------------------------------------------------- // Scrollspy @@ -232,6 +256,14 @@ $("#tooltip").tooltip({ }, }); +$("#tooltip").tooltip({ + placement(this, tooltip, trigger) { + // $ExpectError + console.log(this.config.content); // only for PopoverOption, not TooltipOption + return "left"; + }, +}); + $("#tooltip").tooltip({ selector: "[rel=\"tooltip\"]", }); @@ -259,7 +291,7 @@ $("#tooltip").tooltip({ }); $("#tooltip").tooltip({ - trigger: "focus hover", + trigger: "hover focus", }); $("#tooltip").tooltip({ diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index 01089126fb..15ef7a5f12 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -4,8 +4,6 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -// TODO: popovers options - /// /// @@ -17,13 +15,17 @@ export as namespace Bootstrap; export type Placement = "auto" | "top" | "bottom" | "left" | "right"; +export type Trigger = "click" | "hover" | "focus" | "manual" | + "click hover" | "click focus" | "hover focus" | + "click hover focus"; + export interface Delay { show: number; hide: number; } -export interface TooltipInstance { - config: TooltipOption; +export interface TooltipInstance { + config: T; element: Element; tip: HTMLElement; } @@ -146,15 +148,13 @@ export interface ModalOption { show?: boolean; } -export interface PoppoverOption { +export interface PopoverOption extends TooltipOption { /** - * Apply a CSS fade transition to the popover. - * - * @default true + * Default content value if data-content attribute isn't present. + * If a function is given, it will be called with its this reference + * set to the element that the popover is attached to. */ - animation: boolean; - - // TODO + content?: string | Element | ((this: Element) => string | Element); } export interface ScrollspyOption { @@ -168,24 +168,24 @@ export interface ScrollspyOption { export interface TooltipOption { /** - * Apply a CSS fade transition to the tooltip. + * Apply a CSS fade transition to the tooltip or popover. * * @default true */ animation?: boolean; /** - * Appends the tooltip to a specific element. Example: `container: 'body'`. - * This option is particularly useful in that it allows you to position the tooltip + * Appends the tooltip or popover to a specific element. Example: `container: 'body'`. + * This option is particularly useful in that it allows you to position the tooltip or popover * in the flow of the document near the triggering element - which will prevent - * the tooltip from floating away from the triggering element during a window resize. + * it from floating away from the triggering element during a window resize. * * @default false */ container?: string | Element | false; /** - * Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. + * Delay showing and hiding the tooltip or popover (ms) - does not apply to manual trigger type. * If a number is supplied, delay is applied to both hide/show. * Object structure is: `delay: { "show": 500, "hide": 100 }`. * @@ -194,8 +194,8 @@ export interface TooltipOption { delay?: number | Delay; /** - * Allow HTML in the tooltip. - * If true, HTML tags in the tooltip's title will be rendered in the tooltip. + * Allow HTML in the tooltip or popover. + * If true, HTML tags will be rendered in the tooltip or popover. * If false, jQuery's text method will be used to insert content into the DOM. * Use text if you're worried about XSS attacks. * @@ -204,18 +204,18 @@ export interface TooltipOption { html?: boolean; /** - * How to position the tooltip - auto | top | bottom | left | right. - * When auto is specified, it will dynamically reorient the tooltip. + * How to position the tooltip or popover - auto | top | bottom | left | right. + * When auto is specified, it will dynamically reorient the tooltip or popover. * When a function is used to determine the placement, it is called with - * the tooltip DOM node as its first argument and the triggering element DOM node as its second. - * The this context is set to the tooltip instance. + * the tooltip or popover DOM node as its first argument and the triggering element DOM node as its second. + * The this context is set to the tooltip or popover instance. * * @default "top" */ - placement?: Placement | ((this: TooltipInstance, tooltip: HTMLElement, trigger: Element) => Placement); + placement?: Placement | ((this: TooltipInstance, node: HTMLElement, trigger: Element) => Placement); /** - * If a selector is provided, tooltip objects will be delegated to the specified targets. + * If a selector is provided, tooltip or popover objects will be delegated to the specified targets. * In practice, this is used to enable dynamic HTML content to have popovers added. * * @default false @@ -223,41 +223,40 @@ export interface TooltipOption { selector?: string | false; /** - * Base HTML to use when creating the tooltip. The tooltip's title will be injected into - * the `.tooltip-inner`. The `.arrow` will become the tooltip's arrow. - * The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. + * Base HTML to use when creating the tooltip or popover. The tooltip's (resp., popover's) title will be injected into + * the `.tooltip-inner` (resp., `.popover-header`). The `.arrow` will become the tooltip's (resp., popover's) arrow. + * The outermost wrapper element should have the `.tooltip` (resp., .popover) class and `role="tooltip"`. * * @default '' + * @default '' */ template?: string; /** * Default title value if title attribute isn't present. * If a function is given, it will be called with its this reference set to the element - * that the tooltip is attached to. + * that the tooltip or popover is attached to. * * @default "" */ - title?: string | Element | ((this: Element) => string); + title?: string | Element | ((this: Element) => string | Element); /** - * How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. - * 'manual' indicates that the tooltip will be triggered programmatically via the .tooltip('show'), .tooltip('hide') and - * .tooltip('toggle') methods; this value cannot be combined with any other trigger. - * 'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if - * alternative methods for conveying the same information for keyboard users is present. + * How tooltip or popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. + * 'manual' indicates that the tooltip will be triggered programmatically; this value cannot be combined with any other trigger. + * 'hover' should only be used if alternative methods for conveying the same information for keyboard users is present. * - * @default "hover focus" + * @default tooltip: "hover focus", popover: "click" */ - trigger?: string; + trigger?: Trigger; /** - * Offset of the tooltip relative to its target. + * Offset of the tooltip or popover relative to its target. * For more information refer to Popper.js's offset docs. * * @default 0 */ - offset?: number | string; + offset?: number | string; /** * Allow to specify which position Popper will use on fallback. @@ -268,7 +267,7 @@ export interface TooltipOption { fallbackPlacement?: Popper.Behavior | ReadonlyArray; /** - * Overflow constraint boundary of the tooltip. + * Overflow constraint boundary of the tooltip or popover. * Accepts the values of 'viewport', 'window', 'scrollParent', * or an HTMLElement reference (JavaScript only). * For more information refer to Popper.js's preventOverflow docs. @@ -332,7 +331,7 @@ declare global { modal(options?: ModalOption): this; popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; - popover(options?: PoppoverOption): this; + popover(options?: PopoverOption): this; scrollspy(action: "refresh" | "dispose"): this; scrollspy(options?: ScrollspyOption): this; From d380fbba0a66a6ae1e67bf3a32cf6cc96180e82a Mon Sep 17 00:00:00 2001 From: denis Date: Tue, 13 Mar 2018 18:18:04 +0100 Subject: [PATCH 4/5] Add types to ScrollspyOption Add method and target to ScrollspyOption --- types/bootstrap/bootstrap-tests.ts | 10 ++++++++++ types/bootstrap/index.d.ts | 19 +++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/types/bootstrap/bootstrap-tests.ts b/types/bootstrap/bootstrap-tests.ts index f6b6246724..21286ad5f4 100755 --- a/types/bootstrap/bootstrap-tests.ts +++ b/types/bootstrap/bootstrap-tests.ts @@ -189,6 +189,16 @@ $("#scrollspy").on("activate.bs.scrollspy", () => {}); $("#scrollspy").scrollspy({ offset: 100, + target: "#navbar-example2", + method: "offset", +}); + +$("#scrollspy").scrollspy({ + target: document.getElementById("navbar-example2") as HTMLElement +}); + +$("#scrollspy").scrollspy({ + method: "position" }); // -------------------------------------------------------------------------------------- diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index 15ef7a5f12..fbd804e3d0 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -158,12 +158,27 @@ export interface PopoverOption extends TooltipOption { } export interface ScrollspyOption { + /** + * TODO: https://github.com/twbs/bootstrap/issues/25799 + * + * @default "auto" + */ + method?: "auto" | "offset" | "position"; + /** * Pixels to offset from top when calculating position of scroll. * * @default 10 */ offset?: number; + + /** + * A selector of the parent element or the parent element itself + * of any Bootstrap `.nav` or `.list-group` component. + * + * @default "" + */ + target?: string | Element; } export interface TooltipOption { @@ -302,11 +317,11 @@ export type AlertEvent = "close.bs.alert" | "closed.bs.alert"; export type CarouselEvent = "slide.bs.carousel" | "slid.bs.carousel"; export type CollapseEvent = "show.bs.collapse" | "shown.bs.collapse" | "hide.bs.collapse" | "hidden.bs.collapse"; export type DropdownEvent = "show.bs.dropdown" | "shown.bs.dropdown" | "hide.bs.dropdown" | "hidden.bs.dropdown"; -export type ModalEvent = "show.bs.modal" | "shown.bs.modal" | "hide.bs.modal" | "hidden.bs.modal"; +export type ModalEvent = "show.bs.modal" | "shown.bs.modal" | "hide.bs.modal" | "hidden.bs.modal"; export type PopoverEvent = "show.bs.popover" | "shown.bs.popover" | "hide.bs.popover" | "hidden.bs.popover" | "inserted.bs.popover"; export type ScrollspyEvent = "activate.bs.scrollspy"; export type TapEvent = "show.bs.tab" | "shown.bs.tab" | "hide.bs.tab" | "hidden.bs.tab"; -export type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | "hidden.bs.tooltip" | "inserted.bs.tooltip"; +export type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | "hidden.bs.tooltip" | "inserted.bs.tooltip"; // -------------------------------------------------------------------------------------- // jQuery From 662808d125f372fc3da6fdec7c0aafcee11bf958 Mon Sep 17 00:00:00 2001 From: denis Date: Tue, 13 Mar 2018 18:45:09 +0100 Subject: [PATCH 5/5] Update popper.js version to ^1.14.1 in package.json See also: popper.js/pull/539 and popper.js/pull/584 --- types/bootstrap/index.d.ts | 5 +++-- types/bootstrap/package.json | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index fbd804e3d0..88bcc66af8 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -4,9 +4,10 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -/// /// +import * as Popper from "popper.js"; + export as namespace Bootstrap; // -------------------------------------------------------------------------- @@ -163,7 +164,7 @@ export interface ScrollspyOption { * * @default "auto" */ - method?: "auto" | "offset" | "position"; + method?: "auto" | "offset" | "position"; /** * Pixels to offset from top when calculating position of scroll. diff --git a/types/bootstrap/package.json b/types/bootstrap/package.json index 7f11c30706..af84860ef1 100644 --- a/types/bootstrap/package.json +++ b/types/bootstrap/package.json @@ -1,6 +1,6 @@ { "private": true, "dependencies": { - "popper.js": "^1.12.9" + "popper.js": "^1.14.1" } } \ No newline at end of file