From a355d32369dc8fc93eb6047dba01a03e0118d0e7 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 8 May 2018 04:00:18 +1000 Subject: [PATCH] materialize-css: Add missing declarations and tests (#25492) * Restructure files and add missing declarations * Add JQuery declarations * Restructure tests * Add carousel tests * Add more tests and missing JQuery declarations * Add waves declaration and a test * Add static init methods and tests * allow jquery and cash object to be passed to init * Remove redundant reference * Clean up * Clean up * Clean up and add tests * Clean up and add tests --- types/materialize-css/autocomplete.d.ts | 88 ++ types/materialize-css/carousel.d.ts | 117 ++ types/materialize-css/character-counter.d.ts | 25 + types/materialize-css/chips.d.ts | 124 +++ types/materialize-css/collapsible.d.ts | 83 ++ types/materialize-css/common.d.ts | 51 + types/materialize-css/datepicker.d.ts | 201 ++++ types/materialize-css/dropdown.d.ts | 145 +++ types/materialize-css/fab.d.ts | 60 ++ types/materialize-css/formselect.d.ts | 70 ++ types/materialize-css/index.d.ts | 996 +----------------- types/materialize-css/inputfields.d.ts | 7 + types/materialize-css/materialbox.d.ts | 98 ++ types/materialize-css/modal.d.ts | 116 ++ types/materialize-css/parallax.d.ts | 33 + types/materialize-css/pushpin.d.ts | 56 + types/materialize-css/range.d.ts | 25 + types/materialize-css/scrollspy.d.ts | 51 + types/materialize-css/sidenav.d.ts | 99 ++ types/materialize-css/slider.d.ts | 86 ++ types/materialize-css/tabs.d.ts | 70 ++ types/materialize-css/taptarget.d.ts | 54 + .../materialize-css/test/autocomplete.test.ts | 55 + types/materialize-css/test/carousel.test.ts | 53 + .../test/character-counter.test.ts | 20 + types/materialize-css/test/chips.test.ts | 40 + .../materialize-css/test/collapsible.test.ts | 49 + types/materialize-css/test/common.test.ts | 13 + types/materialize-css/test/datepicker.test.ts | 42 + types/materialize-css/test/dropdown.test.ts | 46 + types/materialize-css/test/fab.test.ts | 32 + types/materialize-css/test/formselect.test.ts | 42 + .../materialize-css/test/inputfields.test.ts | 7 + .../materialize-css/test/materialbox.test.ts | 49 + .../test/materialize-css-global.test.ts | 36 - .../test/materialize-css-jquery.test.ts | 61 -- .../test/materialize-css-module.test.ts | 277 ----- types/materialize-css/test/modal.test.ts | 38 + types/materialize-css/test/parallax.test.ts | 24 + types/materialize-css/test/pushpin.test.ts | 34 + types/materialize-css/test/range.test.ts | 22 + types/materialize-css/test/scrollspy.test.ts | 32 + types/materialize-css/test/sidenav.test.ts | 39 + types/materialize-css/test/slider.test.ts | 43 + types/materialize-css/test/tabs.test.ts | 38 + types/materialize-css/test/taptarget.test.ts | 38 + types/materialize-css/test/timepicker.test.ts | 65 ++ types/materialize-css/test/toast.test.ts | 17 + types/materialize-css/test/tooltip.test.ts | 33 + types/materialize-css/test/waves.test.ts | 4 + types/materialize-css/timepicker.d.ts | 136 +++ types/materialize-css/toast.d.ts | 76 ++ types/materialize-css/tooltip.d.ts | 95 ++ types/materialize-css/tsconfig.json | 30 +- types/materialize-css/waves.d.ts | 9 + 55 files changed, 2905 insertions(+), 1345 deletions(-) create mode 100644 types/materialize-css/autocomplete.d.ts create mode 100644 types/materialize-css/carousel.d.ts create mode 100644 types/materialize-css/character-counter.d.ts create mode 100644 types/materialize-css/chips.d.ts create mode 100644 types/materialize-css/collapsible.d.ts create mode 100644 types/materialize-css/common.d.ts create mode 100644 types/materialize-css/datepicker.d.ts create mode 100644 types/materialize-css/dropdown.d.ts create mode 100644 types/materialize-css/fab.d.ts create mode 100644 types/materialize-css/formselect.d.ts create mode 100644 types/materialize-css/inputfields.d.ts create mode 100644 types/materialize-css/materialbox.d.ts create mode 100644 types/materialize-css/modal.d.ts create mode 100644 types/materialize-css/parallax.d.ts create mode 100644 types/materialize-css/pushpin.d.ts create mode 100644 types/materialize-css/range.d.ts create mode 100644 types/materialize-css/scrollspy.d.ts create mode 100644 types/materialize-css/sidenav.d.ts create mode 100644 types/materialize-css/slider.d.ts create mode 100644 types/materialize-css/tabs.d.ts create mode 100644 types/materialize-css/taptarget.d.ts create mode 100644 types/materialize-css/test/autocomplete.test.ts create mode 100644 types/materialize-css/test/carousel.test.ts create mode 100644 types/materialize-css/test/character-counter.test.ts create mode 100644 types/materialize-css/test/chips.test.ts create mode 100644 types/materialize-css/test/collapsible.test.ts create mode 100644 types/materialize-css/test/common.test.ts create mode 100644 types/materialize-css/test/datepicker.test.ts create mode 100644 types/materialize-css/test/dropdown.test.ts create mode 100644 types/materialize-css/test/fab.test.ts create mode 100644 types/materialize-css/test/formselect.test.ts create mode 100644 types/materialize-css/test/inputfields.test.ts create mode 100644 types/materialize-css/test/materialbox.test.ts delete mode 100644 types/materialize-css/test/materialize-css-global.test.ts delete mode 100644 types/materialize-css/test/materialize-css-jquery.test.ts delete mode 100644 types/materialize-css/test/materialize-css-module.test.ts create mode 100644 types/materialize-css/test/modal.test.ts create mode 100644 types/materialize-css/test/parallax.test.ts create mode 100644 types/materialize-css/test/pushpin.test.ts create mode 100644 types/materialize-css/test/range.test.ts create mode 100644 types/materialize-css/test/scrollspy.test.ts create mode 100644 types/materialize-css/test/sidenav.test.ts create mode 100644 types/materialize-css/test/slider.test.ts create mode 100644 types/materialize-css/test/tabs.test.ts create mode 100644 types/materialize-css/test/taptarget.test.ts create mode 100644 types/materialize-css/test/timepicker.test.ts create mode 100644 types/materialize-css/test/toast.test.ts create mode 100644 types/materialize-css/test/tooltip.test.ts create mode 100644 types/materialize-css/test/waves.test.ts create mode 100644 types/materialize-css/timepicker.d.ts create mode 100644 types/materialize-css/toast.d.ts create mode 100644 types/materialize-css/tooltip.d.ts create mode 100644 types/materialize-css/waves.d.ts diff --git a/types/materialize-css/autocomplete.d.ts b/types/materialize-css/autocomplete.d.ts new file mode 100644 index 0000000000..83eae14bfb --- /dev/null +++ b/types/materialize-css/autocomplete.d.ts @@ -0,0 +1,88 @@ +/// + +declare namespace M { + class Autocomplete extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Autocomplete; + + /** + * Init autocomplete + */ + static init(els: Element, options?: Partial): Autocomplete; + + /** + * Init autocompletes + */ + static init(els: MElements, options?: Partial): Autocomplete[]; + + /** + * Select a specific autocomplete options. + * @param el Element of the autocomplete option. + */ + selectOption(el: Element): void; + + /** + * Update autocomplete options data. + * @param data Autocomplete options data object. + */ + updateData(data: AutocompleteData): void; + + /** + * If the autocomplete is open. + */ + isOpen: boolean; + + /** + * Number of matching autocomplete options. + */ + count: number; + + /** + * Index of the current selected option. + */ + activeIndex: number; + } + + interface AutocompleteData { + [key: string]: string | null; + } + + interface AutocompleteOptions { + /** + * Data object defining autocomplete options with optional icon strings. + */ + data: AutocompleteData; + + /** + * Limit of results the autocomplete shows. + * @default infinity + */ + limit: number; + + /** + * Callback for when autocompleted. + */ + onAutocomplete: (this: Autocomplete, text: string) => void; + + /** + * Minimum number of characters before autocomplete starts. + * @default 1 + */ + minLength: number; + + /** + * Sort function that defines the order of the list of autocomplete options. + */ + sortFunction: (a: string, b: string, inputText: string) => number; + } +} + +interface JQuery { + // Pick to check methods exist. + autocomplete(method: keyof Pick): JQuery; + autocomplete(method: keyof Pick, el: Element): JQuery; + autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery; + autocomplete(options?: Partial): JQuery; +} diff --git a/types/materialize-css/carousel.d.ts b/types/materialize-css/carousel.d.ts new file mode 100644 index 0000000000..fd660694d1 --- /dev/null +++ b/types/materialize-css/carousel.d.ts @@ -0,0 +1,117 @@ +/// + +declare namespace M { + class Carousel extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Carousel; + + /** + * Init carousel + */ + static init(els: Element, options?: Partial): Carousel; + + /** + * Init carousels + */ + static init(els: MElements, options?: Partial): Carousel[]; + + /** + * If the carousel is being clicked or tapped + */ + pressed: boolean; + + /** + * If the carousel is currently being dragged + */ + dragged: number; + + /** + * The index of the center carousel item + */ + center: number; + + /** + * Move carousel to next slide or go forward a given amount of slides + * @param n How many times the carousel slides + */ + next(n?: number): void; + + /** + * Move carousel to previous slide or go back a given amount of slides + * @param n How many times the carousel slides + */ + prev(n?: number): void; + + /** + * Move carousel to nth slide + * @param n Index of slide + */ + set(n?: number): void; + } + + interface CarouselOptions { + /** + * Transition duration in milliseconds + * @default 200 + */ + duration: number; + + /** + * Perspective zoom. If 0, all items are the same size + * @default -100 + */ + dist: number; + + /** + * Set the spacing of the center item + * @default 0 + */ + shift: number; + + /** + * Set the padding between non center items + * @default 0 + */ + padding: number; + + /** + * Set the number of visible items + * @default 5 + */ + numVisible: number; + + /** + * Make the carousel a full width slider like the second example + * @default false + */ + fullWidth: boolean; + + /** + * Set to true to show indicators + * @default false + */ + indicators: boolean; + + /** + * Don't wrap around and cycle through items + * @default false + */ + noWrap: boolean; + + /** + * Callback for when a new slide is cycled to + * @default null + */ + onCycleTo: (this: Carousel, current: Element, dragged: boolean) => void; + } +} + +interface JQuery { + carousel(method: keyof Pick): JQuery; + carousel(method: keyof Pick, n?: number): JQuery; + carousel(method: keyof Pick, n?: number): JQuery; + carousel(method: keyof Pick, n?: number): JQuery; + carousel(options?: Partial): JQuery; +} diff --git a/types/materialize-css/character-counter.d.ts b/types/materialize-css/character-counter.d.ts new file mode 100644 index 0000000000..4d34ac170e --- /dev/null +++ b/types/materialize-css/character-counter.d.ts @@ -0,0 +1,25 @@ +/// + +declare namespace M { + class CharacterCounter extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): CharacterCounter; + + /** + * Init CharacterCounter + */ + static init(els: Element, options?: Partial): CharacterCounter; + + /** + * Init CharacterCounters + */ + static init(els: MElements, options?: Partial): CharacterCounter[]; + } +} + +interface JQuery { + characterCounter(method: keyof Pick): JQuery; + characterCounter(): JQuery; +} diff --git a/types/materialize-css/chips.d.ts b/types/materialize-css/chips.d.ts new file mode 100644 index 0000000000..d912d4ff7e --- /dev/null +++ b/types/materialize-css/chips.d.ts @@ -0,0 +1,124 @@ +/// +/// + +declare namespace M { + class Chips extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Chips; + + /** + * Init Chips + */ + static init(els: Element, options?: Partial): Chips; + + /** + * Init Chipses + */ + static init(els: MElements, options?: Partial): Chips[]; + + /** + * Array of the current chips data + */ + chipsData: ChipData[]; + + /** + * If the chips has autocomplete enabled + */ + hasAutocomplete: boolean; + + /** + * Autocomplete instance, if any + */ + autocomplete: Autocomplete; + + /** + * Add chip to input + * @param data Chip data object + */ + addChip(chip: ChipData): void; + + /** + * Delete nth chip + * @param n Index of chip + */ + deleteChip(n?: number): void; + + /** + * Select nth chip + * @param n Index of chip + */ + selectChip(n: number): void; + } + + interface ChipData { + /** + * Chip tag + */ + tag: string; + + /** + * Chip image + */ + img?: string; + } + + interface ChipsOptions { + /** + * Set the chip data + * @default [] + */ + data: ChipData[]; + + /** + * Set first placeholder when there are no tags + * @default '' + */ + placeholder: string; + + /** + * Set second placeholder when adding additional tags + * @default '' + */ + secondaryPlaceholder: string; + + /** + * Set autocomplete options + * @default {} + */ + autocompleteOptions: Partial; + + /** + * Set chips limit + * @default Infinity + */ + limit: number; + + /** + * Callback for chip add + * @default null + */ + onChipAdd: (this: Chips, element: Element, chip: Element) => void; + + /** + * Callback for chip select + * @default null + */ + onChipSelect: (this: Chips, element: Element, chip: Element) => void; + + /** + * Callback for chip delete + * @default null + */ + onChipDelete: (this: Chips, element: Element, chip: Element) => void; + } +} + +interface JQuery { + chips(method: keyof Pick): JQuery; + chips(method: keyof Pick, chip: M.ChipData): JQuery; + chips(method: keyof Pick, n?: number): JQuery; + chips(method: keyof Pick, n: number): JQuery; + chips(options?: Partial): JQuery; +} diff --git a/types/materialize-css/collapsible.d.ts b/types/materialize-css/collapsible.d.ts new file mode 100644 index 0000000000..649a59e9bb --- /dev/null +++ b/types/materialize-css/collapsible.d.ts @@ -0,0 +1,83 @@ +/// + +declare namespace M { + class Collapsible extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Collapsible; + + /** + * Init Collapsible + */ + static init(els: Element, options?: Partial): Collapsible; + + /** + * Init Collapsibles + */ + static init(els: MElements, options?: Partial): Collapsible[]; + + /** + * Open collapsible section + * @param n Nth section to open + */ + open(n: number): void; + + /** + * Close collapsible section + * @param n Nth section to close + */ + close(n: number): void; + } + + interface CollapsibleOptions { + /** + * If accordion versus collapsible + * @default true + */ + accordion: boolean; + + /** + * Transition in duration in milliseconds. + * @default 300 + */ + inDuration: number; + + /** + * Transition out duration in milliseconds. + * @default 300 + */ + outDuration: number; + + /** + * Callback function called before modal is opened + * @default null + */ + onOpenStart: (this: Collapsible, el: Element) => void; + + /** + * Callback function called after modal is opened + * @default null + */ + onOpenEnd: (this: Collapsible, el: Element) => void; + + /** + * Callback function called before modal is closed + * @default null + */ + onCloseStart: (this: Collapsible, el: Element) => void; + + /** + * Callback function called after modal is closed + * @default null + */ + onCloseEnd: (this: Collapsible, el: Element) => void; + } +} + +interface JQuery { + collapsible(method: keyof Pick): JQuery; + collapsible(method: keyof Pick, n: number): JQuery; + collapsible(method: keyof Pick, n: number): JQuery; + collapsible(options?: Partial): JQuery; +} diff --git a/types/materialize-css/common.d.ts b/types/materialize-css/common.d.ts new file mode 100644 index 0000000000..605e9389be --- /dev/null +++ b/types/materialize-css/common.d.ts @@ -0,0 +1,51 @@ +/// +/// + +type MElements = NodeListOf | JQuery | Cash; + +declare namespace M { + abstract class Component extends ComponentBase { + /** + * Construct component instance and set everything up + */ + constructor(elem: Element, options?: Partial); + + /** + * Destroy plugin instance and teardown + */ + destroy(): void; + } + + abstract class ComponentBase { + constructor(options?: Partial); + + /** + * The DOM element the plugin was initialized with + */ + el: Element; + + /** + * The options the instance was initialized with + */ + options: TOptions; + } + + interface Openable { + isOpen: boolean; + open(): void; + close(): void; + } + + interface InternationalizationOptions { + cancel: string; + clear: string; + done: string; + previousMonth: string; + nextMonth: string; + months: string[]; + monthsShort: string; + weekdays: string[]; + weekdaysShort: string[]; + weekdaysAbbrev: string[]; + } +} diff --git a/types/materialize-css/datepicker.d.ts b/types/materialize-css/datepicker.d.ts new file mode 100644 index 0000000000..3940027173 --- /dev/null +++ b/types/materialize-css/datepicker.d.ts @@ -0,0 +1,201 @@ +/// + +declare namespace M { + class Datepicker extends Component implements Openable { + /** + * Get Instance + */ + static getInstance(elem: Element): Datepicker; + + /** + * Init Datepicker + */ + static init(els: Element, options?: Partial): Datepicker; + + /** + * Init Datepickers + */ + static init(els: MElements, options?: Partial): Datepicker[]; + + /** + * If the picker is open. + */ + isOpen: boolean; + + /** + * The selected Date. + */ + date: Date; + + /** + * DONE button instance (undocumented!). + */ + doneBtn: HTMLButtonElement; + + /** + * CLEAR button instance (undocumented!). + */ + clearBtn: HTMLButtonElement; + + /** + * Open datepicker + */ + open(): void; + + /** + * Close datepicker + */ + close(): void; + + /** + * Gets a string representation of the selected date + */ + toString(): string; + + /** + * Set a date on the datepicker + * @param date Date to set on the datepicker. + * @param preventOnSelect Undocumented as of 5 March 2018 + */ + setDate(date?: Date | string, preventOnSelect?: boolean): void; + + /** + * Change date view to a specific date on the datepicker + * @param date Date to show on the datepicker. + */ + gotoDate(date: Date): void; + + setInputValue(): void; + } + + interface DatepickerOptions { + /** + * Automatically close picker when date is selected + * @default false + */ + autoClose: boolean; + + /** + * The date output format for the input field value. + * @default 'mmm dd, yyyy' + */ + format: string; + + /** + * Used to create date object from current input string. + */ + parse: (value: string, format: string) => Date; + + /** + * The initial date to view when first opened. + */ + defaultDate: Date; + + /** + * Make the `defaultDate` the initial selected value + * @default false + */ + setDefaultDate: boolean; + + /** + * Prevent selection of any date on the weekend. + * @default false + */ + disableWeekends: boolean; + + /** + * Custom function to disable certain days. + */ + disableDayFn: (day: Date) => boolean; + + /** + * First day of week (0: Sunday, 1: Monday etc). + * @default 0 + */ + firstDay: number; + + /** + * The earliest date that can be selected. + */ + minDate: Date; + + /** + * The latest date that can be selected. + */ + maxDate: Date; + + /** + * Number of years either side, or array of upper/lower range. + * @default 10 + */ + yearRange: number | number[]; + + /** + * Changes Datepicker to RTL. + * @default false + */ + isRTL: boolean; + + /** + * Show month after year in Datepicker title. + * @default false + */ + showMonthAfterYear: boolean; + + /** + * Render days of the calendar grid that fall in the next or previous month. + * @default false + */ + showDaysInNextAndPreviousMonths: boolean; + + /** + * Specify a DOM element to render the calendar in, by default it will be placed before the input + * @default null + */ + container: Element; + + /** + * Show the clear button in the datepicker + * @default false + */ + showClearBtn: boolean; + + /** + * Internationalization options + */ + i18n: Partial; + + /** + * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days. + * @default [] + */ + events: string[]; + + /** + * Callback function when date is selected, first parameter is the newly selected date. + */ + onSelect: (this: Datepicker, selectedDate: Date) => void; + + /** + * Callback function when Datepicker is opened + */ + onOpen: (this: Datepicker) => void; + + /** + * Callback function when Datepicker is closed + */ + onClose: (this: Datepicker) => void; + + /** + * Callback function when Datepicker HTML is refreshed + */ + onDraw: (this: Datepicker) => void; + } +} + +interface JQuery { + datepicker(method: keyof Pick): JQuery; + datepicker(method: keyof Pick, date?: Date): JQuery; + datepicker(method: keyof Pick, date: Date): JQuery; + datepicker(options?: Partial): JQuery; +} diff --git a/types/materialize-css/dropdown.d.ts b/types/materialize-css/dropdown.d.ts new file mode 100644 index 0000000000..fb9b7d90c1 --- /dev/null +++ b/types/materialize-css/dropdown.d.ts @@ -0,0 +1,145 @@ +/// + +declare namespace M { + class Dropdown extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Dropdown; + + /** + * Init Dropdown + */ + static init(els: Element, options?: Partial): Dropdown; + + /** + * Init Dropdowns + */ + static init(els: MElements, options?: Partial): Dropdown[]; + + /** + * ID of the dropdown element + */ + id: string; + + /** + * The DOM element of the dropdown + */ + dropdownEl: Element; + + /** + * If the dropdown is open + */ + isOpen: boolean; + + /** + * If the dropdown content is scrollable + */ + isScrollable: boolean; + + /** + * The index of the item focused + */ + focusedIndex: number; + + /** + * Open dropdown + */ + open(): void; + + /** + * Close dropdown + */ + close(): void; + + /** + * While dropdown is open, you can recalculate its dimensions if its contents have changed + */ + recalculateDimensions(): void; + } + + interface DropdownOptions { + /** + * Defines the edge the menu is aligned to + * @default 'left' + */ + alignment: 'left' | 'right'; + + /** + * If true, automatically focus dropdown el for keyboard + * @default true + */ + autoTrigger: boolean; + + /** + * If true, constrainWidth to the size of the dropdown activator + * @default true + */ + constrainWidth: boolean; + + /** + * Provide an element that will be the bounding container of the dropdown + * @default null + */ + container: Element; + + /** + * If false, the dropdown will show below the trigger + * @default true + */ + coverTrigger: boolean; + + /** + * If true, close dropdown on item click + * @default true + */ + closeOnClick: boolean; + + /** + * If true, the dropdown will open on hover + * @default false + */ + hover: boolean; + + /** + * The duration of the transition enter in milliseconds + * @default 150 + */ + inDuration: number; + + /** + * The duration of the transition out in milliseconds + * @default 250 + */ + outDuration: number; + + /** + * Function called when dropdown starts entering + * @default null + */ + onOpenStart: (this: Dropdown, el: Element) => void; + + /** + * Function called when dropdown finishes entering + * @default null + */ + onOpenEnd: (this: Dropdown, el: Element) => void; + + /** + * Function called when dropdown starts exiting + * @default null + */ + onCloseStart: (this: Dropdown, el: Element) => void; + + /** + * Function called when dropdown finishes exiting + * @default null + */ + onCloseEnd: (this: Dropdown, el: Element) => void; + } +} + +interface JQuery { + dropdown(method: keyof Pick): JQuery; + dropdown(options?: Partial): JQuery; +} diff --git a/types/materialize-css/fab.d.ts b/types/materialize-css/fab.d.ts new file mode 100644 index 0000000000..74a7c89bfb --- /dev/null +++ b/types/materialize-css/fab.d.ts @@ -0,0 +1,60 @@ +/// + +declare namespace M { + class FloatingActionButton extends Component implements Openable { + /** + * Get Instance + */ + static getInstance(elem: Element): FloatingActionButton; + + /** + * Init FloatingActionButton + */ + static init(els: Element, options?: Partial): FloatingActionButton; + + /** + * Init FloatingActionButtons + */ + static init(els: MElements, options?: Partial): FloatingActionButton[]; + + /** + * Open FAB + */ + open(): void; + + /** + * Close FAB + */ + close(): void; + + /** + * Describes open/close state of FAB. + */ + isOpen: boolean; + } + + interface FloatingActionButtonOptions { + /** + * Direction FAB menu opens + * @default "top" + */ + direction: "top" | "right" | "buttom" | "left"; + + /** + * true: FAB menu appears on hover, false: FAB menu appears on click + * @default true + */ + hoverEnabled: boolean; + + /** + * Enable transit the FAB into a toolbar on click + * @default false + */ + toolbarEnabled: boolean; + } +} + +interface JQuery { + floatingActionButton(method: keyof Pick): JQuery; + floatingActionButton(options?: Partial): JQuery; +} diff --git a/types/materialize-css/formselect.d.ts b/types/materialize-css/formselect.d.ts new file mode 100644 index 0000000000..de901d7fbf --- /dev/null +++ b/types/materialize-css/formselect.d.ts @@ -0,0 +1,70 @@ +/// +/// + +declare namespace M { + class FormSelect extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): FormSelect; + + /** + * Init FormSelect + */ + static init(els: Element, options?: Partial): FormSelect; + + /** + * Init FormSelects + */ + static init(els: MElements, options?: Partial): FormSelect[]; + + /** + * If this is a multiple select + */ + isMultiple: boolean; + + /** + * The select wrapper element + */ + wrapper: Element; + + /** + * Dropdown UL element + */ + dropdownOptions: HTMLUListElement; + + /** + * Text input that shows current selected option + */ + input: HTMLInputElement; + + /** + * Instance of the dropdown plugin for this select + */ + dropdown: Dropdown; + + /** + * Get selected values in an array + */ + getSelectedValues(): string[]; + } + + interface FormSelectOptions { + /** + * Classes to be added to the select wrapper element + * @default '' + */ + classes: string; + + /** + * Pass options object to select dropdown initialization + * @default {} + */ + dropdownOptions: Partial; + } +} + +interface JQuery { + formSelect(method: keyof Pick): JQuery; + formSelect(options?: Partial): JQuery; +} diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 0a383f1c65..f8502cafb4 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -1,975 +1,37 @@ // Type definitions for materialize-css 1.0 // Project: http://materializecss.com/ -// Definitions by: 胡玮文 , Maxim Balaganskiy +// Definitions by: 胡玮文 +// Maxim Balaganskiy +// David Moniz +// Daniel Hoenes // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.4 /// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// export = M; - -declare global { - namespace M { - class Autocomplete extends Component { - /** - * Get Instance - */ - static getInstance(elem: Element): Autocomplete; - - /** - * Select a specific autocomplete options. - * @param el Element of the autocomplete option. - */ - selectOption(el: Element): void; - - /** - * Update autocomplete options data. - * @param data Autocomplete options data object. - */ - updateData(data: AutocompleteData): void; - - /** - * If the autocomplete is open. - */ - isOpen: boolean; - - /** - * Number of matching autocomplete options. - */ - count: number; - - /** - * Index of the current selected option. - */ - activeIndex: number; - } - - interface AutocompleteData { - [key: string]: string | null; - } - - interface AutocompleteOptions { - /** - * Data object defining autocomplete options with optional icon strings. - */ - data: AutocompleteData; - - /** - * Limit of results the autocomplete shows. - * @default infinity - */ - limit: number; - - /** - * Callback for when autocompleted. - */ - onAutocomplete: (this: Autocomplete, text: string) => void; - - /** - * Minimum number of characters before autocomplete starts. - * @default 1 - */ - minLength: number; - - /** - * Sort function that defines the order of the list of autocomplete options. - */ - sortFunction: (a: string, b: string, inputText: string) => number; - } - - class DatePicker extends Component implements Openable { - /** - * Get Instance - */ - static getInstance(elem: Element): DatePicker; - - /** - * If the picker is open. - */ - isOpen: boolean; - - /** - * The selected Date. - */ - date: Date; - - /** - * Open datepicker - */ - open(): void; - - /** - * Close datepicker - */ - close(): void; - - /** - * Gets a string representation of the selected date - */ - toString(): string; - - /** - * Set a date on the datepicker - * @param date Date to set on the datepicker. - */ - setDate(date?: Date): void; - - /** - * Change date view to a specific date on the datepicker - * @param date Date to show on the datepicker. - */ - gotoDate(date: Date): void; - } - - interface DatePickerOptions { - /** - * The date output format for the input field value. - * @default 'mmm dd, yyyy' - */ - format: string; - - /** - * Used to create date object from current input string. - */ - parse: (value: string, format: string) => Date; - - /** - * The initial date to view when first opened. - */ - defaultDate: Date; - - /** - * Make the `defaultDate` the initial selected value - * @default false - */ - setDefaultDate: boolean; - - /** - * Prevent selection of any date on the weekend. - * @default false - */ - disableWeekends: boolean; - - /** - * Custom function to disable certain days. - */ - disableDayFn: (day: Date) => boolean; - - /** - * First day of week (0: Sunday, 1: Monday etc). - * @default 0 - */ - firstDay: number; - - /** - * The earliest date that can be selected. - */ - minDate: Date; - - /** - * The latest date that can be selected. - */ - maxDate: Date; - - /** - * Number of years either side, or array of upper/lower range. - * @default 10 - */ - yearRange: number | number[]; - - /** - * Changes Datepicker to RTL. - * @default false - */ - isRTL: boolean; - - /** - * Show month after year in Datepicker title. - * @default false - */ - showMonthAfterYear: boolean; - - /** - * Render days of the calendar grid that fall in the next or previous month. - * @default false - */ - showDaysInNextAndPreviousMonths: boolean; - - /** - * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. - */ - container: string; - - /** - * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days. - * @default [] - */ - events: string[]; - - /** - * Callback function when date is selected, first parameter is the newly selected date. - */ - onSelect: (this: DatePicker, selectedDate: Date) => void; - - /** - * Callback function when Datepicker is opened - */ - onOpen: (this: DatePicker) => void; - - /** - * Callback function when Datepicker is closed - */ - onClose: (this: DatePicker) => void; - - /** - * Callback function when Datepicker HTML is refreshed - */ - onDraw: (this: DatePicker) => void; - } - - interface DropdownOptions { - /** - * Defines the edge the menu is aligned to - * @default 'left' - */ - alignment: string; - - /** - * If true, automatically focus dropdown el for keyboard - * @default true - */ - autoTrigger: boolean; - - /** - * If true, constrainWidth to the size of the dropdown activator - * @default true - */ - constrainWidth: boolean; - - /** - * Provide an element that will be the bounding container of the dropdown - * @default null - */ - container: Element; - - /** - * If false, the dropdown will show below the trigger - * @default true - */ - coverTrigger: boolean; // If false, the dropdown will show below the trigger. - - /** - * If true, close dropdown on item click - * @default true - */ - closeOnClick: boolean; - - /** - * If true, the dropdown will open on hover - * @default false - */ - hover: boolean; - - /** - * The duration of the transition enter in milliseconds - * @default 150 - */ - inDuration: number; - - /** - * The duration of the transition out in milliseconds - * @default 250 - */ - outDuration: number; - - /** - * Function called when dropdown starts entering - * @default null - */ - onOpenStart: (this: Dropdown, el: Element) => void; - - /** - * Function called when dropdown finishes entering - * @default null - */ - onOpenEnd: (this: Dropdown, el: Element) => void; - - /** - * Function called when dropdown starts exiting - * @default null - */ - onCloseStart: (this: Dropdown, el: Element) => void; - - /** - * Function called when dropdown finishes exiting - * @default null - */ - onCloseEnd: (this: Dropdown, el: Element) => void; - } - - class Dropdown extends Component { - /** - * ID of the dropdown element - */ - id: string; - - /** - * The DOM element of the dropdown - */ - dropdownEl: Element; - - /** - * If the dropdown is open - */ - isOpen: boolean; - - /** - * If the dropdown content is scrollable - */ - isScrollable: boolean; - - /** - * The index of the item focused - */ - focusedIndex: number; - - /** - * Open dropdown - */ - open(): void; - - /** - * Close dropdown - */ - close(): void; - - /** - * While dropdown is open, you can recalculate its dimensions if its contents have changed - */ - recalculateDimensions(): void; - } - - class FloatingActionButton extends Component implements Openable { - /** - * Get Instance - */ - static getInstance(elem: Element): FloatingActionButton; - - /** - * Open FAB - */ - open(): void; - - /** - * Close FAB - */ - close(): void; - - /** - * Describes open/close state of FAB. - */ - isOpen: boolean; - } - - interface FloatingActionButtonOptions { - /** - * Direction FAB menu opens - * @default "top" - */ - direction: "top" | "right" | "buttom" | "left"; - - /** - * true: FAB menu appears on hover, false: FAB menu appears on click - * @default true - */ - hoverEnabled: boolean; - - /** - * Enable transit the FAB into a toolbar on click - * @default false - */ - toolbarEnabled: boolean; - } - - interface FormSelectOptions { - /** - * Classes to be added to the select wrapper element - * @default '' - */ - classes: string; - - /** - * Pass options object to select dropdown initialization - * @default {} - */ - dropdownOptions: Partial; - } - - class FormSelect extends Component { - /** - * If this is a multiple select - */ - isMultiple: boolean; - - /** - * The select wrapper element - */ - wrapper: Element; - - /** - * Dropdown UL element - */ - dropdownOptions: HTMLUListElement; - - /** - * Text input that shows current selected option - */ - input: HTMLInputElement; - - /** - * Instance of the dropdown plugin for this select - */ - dropdown: Dropdown; - - /** - * Get selected values in an array - */ - getSelectedValues(): string[]; - } - - class Sidenav extends Component implements Openable { - /** - * Get Instance - */ - static getInstance(elem: Element): Sidenav; - - /** - * Opens Sidenav - */ - open(): void; - - /** - * Closes Sidenav - */ - close(): void; - - /** - * Describes open/close state of Sidenav - */ - isOpen: boolean; - - /** - * Describes if sidenav is fixed - */ - isFixed: boolean; - - /** - * Describes if Sidenav is being dragged - */ - isDragged: boolean; - } - - /** - * Options for the Sidenav - */ - interface SidenavOptions { - /** - * Side of screen on which Sidenav appears - * @default 'left' - */ - edge: 'left' | 'right'; - - /** - * Allow swipe gestures to open/close Sidenav - * @default true - */ - draggable: boolean; - - /** - * Length in ms of enter transition - * @default 250 - */ - inDuration: number; - - /** - * Length in ms of exit transition - * @default 200 - */ - outDuration: number; - - /** - * Function called when sidenav starts entering - */ - onOpenStart: (this: Sidenav, elem: Element) => void; - - /** - * Function called when sidenav finishes entering - */ - onOpenEnd: (this: Sidenav, elem: Element) => void; - - /** - * Function called when sidenav starts exiting - */ - onCloseStart: (this: Sidenav, elem: Element) => void; - - /** - * Function called when sidenav finishes exiting - */ - onCloseEnd: (this: Sidenav, elem: Element) => void; - } - - class Tabs extends Component { - /** - * Get Instance - */ - static getInstance(elem: Element): Tabs; - - /** - * Show tab content that corresponds to the tab with the id - * @param tabId The id of the tab that you want to switch to - */ - select(tabId: string): void; - - /** - * The index of tab that is currently shown - */ - index: number; - } - - /** - * Options for the Tabs - */ - interface TabsOptions { - /** - * Transition duration in milliseconds. - * @default 300 - */ - duration: number; - - /** - * Callback for when a new tab content is shown - */ - onShow: (this: Tabs, newContent: Element) => void; - - /** - * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option - * @default false - */ - swipeable: boolean; - - /** - * The maximum width of the screen, in pixels, where the swipeable functionality initializes. - * @default infinity - */ - responsiveThreshold: number; - } - - class TimePicker extends Component { - /** - * Get Instance - */ - static getInstance(elem: Element): TimePicker; - - /** - * If the picker is open. - */ - isOpen: boolean; - - /** - * The selected time. - */ - time: string; - - /** - * Open timepicker - */ - open(): void; - - /** - * Close timepicker - */ - close(): void; - - /** - * Show hours or minutes view on timepicker - * @param view The name of the view you want to switch to, 'hours' or 'minutes'. - */ - showView(view: "hours" | "minutes"): void; - } - - interface TimePickerOptions { - /** - * Duration of the transition from/to the hours/minutes view. - * @default 350 - */ - duration: number; - - /** - * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. - */ - container: string; - - /** - * Default time to set on the timepicker 'now' or '13:14' - * @default 'now'; - */ - defaultTime: string; - - /** - * Millisecond offset from the defaultTime. - * @default 0 - */ - fromnow: number; - - /** - * Done button text. - * @default 'Ok' - */ - doneText: string; - - /** - * Clear button text. - * @default 'Clear' - */ - clearText: string; - - /** - * Cancel button text. - * @default 'Cancel' - */ - cancelText: string; - - /** - * Automatically close picker when minute is selected. - * @default false; - */ - autoClose: boolean; - - /** - * Use 12 hour AM/PM clock instead of 24 hour clock. - * @default true - */ - twelveHour: boolean; - - /** - * Vibrate device when dragging clock hand. - * @default true - */ - vibrate: boolean; - } - - class Modal extends Component implements Openable { - /** - * Get Instance - */ - static getInstance(elem: Element): Modal; - - /** - * Open modal - */ - open(): void; - - /** - * Close modal - */ - close(): void; - - /** - * If the modal is open. - */ - isOpen: boolean; - - /** - * ID of the modal element - */ - id: string; - } - - /** - * Options for the Modal - */ - interface ModalOptions { - /** - * Opacity of the modal overlay. - * @default 0.5 - */ - opacity: number; - - /** - * Transition in duration in milliseconds. - * @default 250 - */ - inDuration: number; - - /** - * Transition out duration in milliseconds. - * @default 250 - */ - outDuration: number; - - /** - * Callback function called when modal is finished entering. - */ - ready: (this: Modal, elem: Element, openingTrigger: Element) => void; - - /** - * Callback function called when modal is finished exiting. - */ - complete: (this: Modal, elem: Element) => void; - - /** - * Allow modal to be dismissed by keyboard or overlay click. - * @default true - */ - dismissible: boolean; - - /** - * Starting top offset - * @default '4%' - */ - startingTop: string; - - /** - * Ending top offset - * @default '10%' - */ - endingTop: string; - } - - class Toast extends ComponentBase { - /** - * Get Instance - */ - static getInstance(elem: Element): Toast; - - /** - * Describes the current pan state of the Toast. - */ - panning: boolean; - - /** - * The remaining amount of time in ms that the toast will stay before dismissal. - */ - timeRemaining: number; - - /** - * remove a specific toast - */ - dismiss(): void; - - /** - * dismiss all toasts - */ - static dismissAll(): void; - } - - interface ToastOptions { - /** - * The HTML content of the Toast. - */ - html: string; - - /** - * Length in ms the Toast stays before dismissal. - * @default 4000 - */ - displayLength: number; - - /** - * Transition in duration in milliseconds. - * @default 300 - */ - inDuration: number; - - /** - * Transition out duration in milliseconds. - * @default 375 - */ - outDuration: number; - - /** - * Classes to be added to the toast element. - */ - classes: string; - - /** - * Callback function called when toast is dismissed. - */ - completeCallback: () => void; - - /** - * The percentage of the toast's width it takes for a drag to dismiss a Toast. - * @default 0.8 - */ - activationPercent: number; - } - - /** - * Create a toast - */ - function toast(options: Partial): Toast; - - class Tooltip extends Component implements Openable { - /** - * Get Instance - */ - static getInstance(elem: Element): Tooltip; - - /** - * Show tooltip. - */ - open(): void; - - /** - * Hide tooltip. - */ - close(): void; - - /** - * If tooltip is open. - */ - isOpen: boolean; - - /** - * If tooltip is hovered. - */ - isHovered: boolean; - } - - interface TooltipOptions { - /** - * Delay time before tooltip disappears. - * @default 0 - */ - exitDelay: number; - - /** - * Delay time before tooltip appears. - * @default 200 - */ - enterDelay: number; - - /** - * Can take regular text or HTML strings. - * @default null - */ - html: string | null; - - /** - * Set distance tooltip appears away from its activator excluding transitionMovement. - * @default 5 - */ - margin: number; - - /** - * Enter transition duration. - * @default 300 - */ - inDuration: number; - - /** - * Exit transition duration. - * @default 250 - */ - outDuration: number; - - /** - * Set the direction of the tooltip. - * @default 'bottom' - */ - position: 'top' | 'right' | 'bottom' | 'left'; - - /** - * Amount in px that the tooltip moves during its transition. - * @default 10 - */ - transitionMovement: number; - } - - function updateTextFields(): void; - - class CharacterCounter extends Component { - /** - * Get Instance - */ - static getInstance(elem: Element): CharacterCounter; - } - - abstract class Component extends ComponentBase { - /** - * Construct component instance and set everything up - */ - constructor(elem: Element, options?: Partial); - - /** - * Destroy plugin instance and teardown - */ - destroy(): void; - } - - abstract class ComponentBase { - constructor(options?: Partial); - - /** - * The DOM element the plugin was initialized with - */ - el: Element; - - /** - * The options the instance was initialized with - */ - options: TOptions; - } - - interface Openable { - isOpen: boolean; - open(): void; - close(): void; - } - } - - interface JQuery { - // Pick to check methods exist. - autocomplete(method: keyof Pick): JQuery; - autocomplete(method: keyof Pick, el: Element): JQuery; - autocomplete(method: keyof Pick, data: M.AutocompleteData): JQuery; - autocomplete(options?: Partial): JQuery; - - datepicker(method: keyof Pick): JQuery; - datepicker(method: keyof Pick, date?: Date): JQuery; - datepicker(method: keyof Pick, date: Date): JQuery; - datepicker(options?: Partial): JQuery; - - dropdown(method: keyof Pick): JQuery; - dropdown(options?: Partial): JQuery; - - floatingActionButton(method: keyof Pick): JQuery; - floatingActionButton(options?: Partial): JQuery; - - formSelect(method: keyof Pick): JQuery; - formSelect(options?: Partial): JQuery; - - sidenav(method: keyof Pick): JQuery; - sidenav(options?: Partial): JQuery; - - tabs(method: keyof Pick): JQuery; - tabs(method: keyof Pick, tabId: string): JQuery; - tabs(options?: Partial): JQuery; - - timepicker(method: keyof Pick): JQuery; - timepicker(method: keyof Pick, view: "hours" | "minutes"): JQuery; - timepicker(options?: Partial): JQuery; - - // Toast can not be invoked using jQuery. - - tooltip(method: keyof Pick): JQuery; - tooltip(options?: Partial): JQuery; - - modal(method: keyof Pick): JQuery; - modal(options?: Partial): JQuery; - - // tslint:disable-next-line unified-signatures - characterCounter(method: keyof Pick): JQuery; - characterCounter(): JQuery; - } -} diff --git a/types/materialize-css/inputfields.d.ts b/types/materialize-css/inputfields.d.ts new file mode 100644 index 0000000000..23c5ca9489 --- /dev/null +++ b/types/materialize-css/inputfields.d.ts @@ -0,0 +1,7 @@ +/// + +declare namespace M { + function updateTextFields(): void; + + function textareaAutoResize(textarea: Element | JQuery | Cash): void; +} diff --git a/types/materialize-css/materialbox.d.ts b/types/materialize-css/materialbox.d.ts new file mode 100644 index 0000000000..225afd67e6 --- /dev/null +++ b/types/materialize-css/materialbox.d.ts @@ -0,0 +1,98 @@ +/// + +declare namespace M { + class Materialbox extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Materialbox; + + /** + * Init Materialbox + */ + static init(els: Element, options?: Partial): Materialbox; + + /** + * Init Materialboxes + */ + static init(els: MElements, options?: Partial): Materialbox[]; + + /** + * If the materialbox overlay is showing + */ + overlayActive: boolean; + + /** + * If the materialbox is no longer being animated + */ + doneAnimating: boolean; + + /** + * Caption if specified + */ + caption: string; + + /** + * Original width of image + */ + originalWidth: number; + + /** + * Original height of image + */ + originalHeight: number; + + /** + * Open materialbox + */ + open(): void; + + /** + * Close materialbox + */ + close(): void; + } + + interface MaterialboxOptions { + /** + * Transition in duration in milliseconds + * @default 275 + */ + inDuration: number; + + /** + * Transition out duration in milliseconds + * @default 200 + */ + outDuration: number; + + /** + * Callback function called before materialbox is opened + * @default null + */ + onOpenStart: (this: Materialbox, el: Element) => void; + + /** + * Callback function called after materialbox is opened + * @default null + */ + onOpenEnd: (this: Materialbox, el: Element) => void; + + /** + * Callback function called before materialbox is closed + * @default null + */ + onCloseStart: (this: Materialbox, el: Element) => void; + + /** + * Callback function called after materialbox is closed + * @default null + */ + onCloseEnd: (this: Materialbox, el: Element) => void; + } +} + +interface JQuery { + materialbox(method: keyof Pick): JQuery; + materialbox(options?: Partial): JQuery; +} diff --git a/types/materialize-css/modal.d.ts b/types/materialize-css/modal.d.ts new file mode 100644 index 0000000000..d23a4f9c33 --- /dev/null +++ b/types/materialize-css/modal.d.ts @@ -0,0 +1,116 @@ +/// + +declare namespace M { + class Modal extends Component implements Openable { + /** + * Get Instance + */ + static getInstance(elem: Element): Modal; + + /** + * Init Modal + */ + static init(els: Element, options?: Partial): Modal; + + /** + * Init Modals + */ + static init(els: MElements, options?: Partial): Modal[]; + + /** + * Open modal + */ + open(): void; + + /** + * Close modal + */ + close(): void; + + /** + * If the modal is open. + */ + isOpen: boolean; + + /** + * ID of the modal element + */ + id: string; + } + + /** + * Options for the Modal + */ + interface ModalOptions { + /** + * Opacity of the modal overlay. + * @default 0.5 + */ + opacity: number; + + /** + * Transition in duration in milliseconds. + * @default 250 + */ + inDuration: number; + + /** + * Transition out duration in milliseconds. + * @default 250 + */ + outDuration: number; + + /** + * Prevent page from scrolling while modal is open + * @default true + */ + preventScrolling: boolean; + + /** + * Callback function called before modal is opened + * @default null + */ + onOpenStart: (this: Modal, el: Element) => void; + + /** + * Callback function called after modal is opened + * @default null + */ + onOpenEnd: (this: Modal, el: Element) => void; + + /** + * Callback function called before modal is closed + * @default null + */ + onCloseStart: (this: Modal, el: Element) => void; + + /** + * Callback function called after modal is closed + * @default null + */ + onCloseEnd: (this: Modal, el: Element) => void; + + /** + * Allow modal to be dismissed by keyboard or overlay click. + * @default true + */ + dismissible: boolean; + + /** + * Starting top offset + * @default '4%' + */ + startingTop: string; + + /** + * Ending top offset + * @default '10%' + */ + endingTop: string; + } +} + +interface JQuery { + modal(method: keyof Pick): JQuery; + modal(options?: Partial): JQuery; +} diff --git a/types/materialize-css/parallax.d.ts b/types/materialize-css/parallax.d.ts new file mode 100644 index 0000000000..17d2de56b9 --- /dev/null +++ b/types/materialize-css/parallax.d.ts @@ -0,0 +1,33 @@ +/// + +declare namespace M { + class Parallax extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Parallax; + + /** + * Init Parallax + */ + static init(els: Element, options?: Partial): Parallax; + + /** + * Init Parallaxs + */ + static init(els: MElements, options?: Partial): Parallax[]; + } + + interface ParallaxOptions { + /** + * The minimum width of the screen, in pixels, where the parallax functionality starts working + * @default 0 + */ + responsiveThreshold: number; + } +} + +interface JQuery { + parallax(options?: Partial): JQuery; + parallax(method: keyof Pick): JQuery; +} diff --git a/types/materialize-css/pushpin.d.ts b/types/materialize-css/pushpin.d.ts new file mode 100644 index 0000000000..cab559e713 --- /dev/null +++ b/types/materialize-css/pushpin.d.ts @@ -0,0 +1,56 @@ +/// + +declare namespace M { + class Pushpin extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Pushpin; + + /** + * Init Pushpin + */ + static init(els: Element, options?: Partial): Pushpin; + + /** + * Init Pushpins + */ + static init(els: MElements, options?: Partial): Pushpin[]; + + /** + * Original offsetTop of element + */ + originalOffset: number; + } + + interface PushpinOptions { + /** + * The distance in pixels from the top of the page where the element becomes fixed + * @default 0 + */ + top: number; + + /** + * The distance in pixels from the top of the page where the elements stops being fixed + * @default Infinity + */ + bottom: number; + + /** + * The offset from the top the element will be fixed at + * @default 0 + */ + offset: number; + + /** + * Callback function called when pushpin position changes. You are provided with a position string + * @default null + */ + onPositionChange: (this: Pushpin, position: "pinned" | "pin-top" | "pin-bottom") => void; + } +} + +interface JQuery { + pushpin(options?: Partial): JQuery; + pushpin(method: keyof Pick): JQuery; +} diff --git a/types/materialize-css/range.d.ts b/types/materialize-css/range.d.ts new file mode 100644 index 0000000000..dac7a7edf2 --- /dev/null +++ b/types/materialize-css/range.d.ts @@ -0,0 +1,25 @@ +/// + +declare namespace M { + class Range extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Range; + + /** + * Init Range + */ + static init(els: Element, options?: Partial): Range; + + /** + * Init Ranges + */ + static init(els: MElements, options?: Partial): Range[]; + } +} + +interface JQuery { + range(): JQuery; + range(method: keyof Pick): JQuery; +} diff --git a/types/materialize-css/scrollspy.d.ts b/types/materialize-css/scrollspy.d.ts new file mode 100644 index 0000000000..3f5f2bd21b --- /dev/null +++ b/types/materialize-css/scrollspy.d.ts @@ -0,0 +1,51 @@ +/// + +declare namespace M { + class ScrollSpy extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): ScrollSpy; + + /** + * Init ScrollSpy + */ + static init(els: Element, options?: Partial): ScrollSpy; + + /** + * Init ScrollSpies + */ + static init(els: MElements, options?: Partial): ScrollSpy[]; + } + + interface ScrollSpyOptions { + /** + * Throttle of scroll handler + * @default 100 + */ + throttle: number; + + /** + * Offset for centering element when scrolled to + * @default 200 + */ + scrollOffset: number; + + /** + * Class applied to active elements + * @default 'active' + */ + activeClass: string; + + /** + * Used to find active element + * @default id => 'a[href="#' + id + '"]' + */ + getActiveElement: (id: string) => string; + } +} + +interface JQuery { + scrollSpy(options?: Partial): JQuery; + scrollSpy(method: keyof Pick): JQuery; +} diff --git a/types/materialize-css/sidenav.d.ts b/types/materialize-css/sidenav.d.ts new file mode 100644 index 0000000000..3843393d88 --- /dev/null +++ b/types/materialize-css/sidenav.d.ts @@ -0,0 +1,99 @@ +/// + +declare namespace M { + class Sidenav extends Component implements Openable { + /** + * Get Instance + */ + static getInstance(elem: Element): Sidenav; + + /** + * Init Sidenav + */ + static init(els: Element, options?: Partial): Sidenav; + + /** + * Init Sidenavs + */ + static init(els: MElements, options?: Partial): Sidenav[]; + + /** + * Opens Sidenav + */ + open(): void; + + /** + * Closes Sidenav + */ + close(): void; + + /** + * Describes open/close state of Sidenav + */ + isOpen: boolean; + + /** + * Describes if sidenav is fixed + */ + isFixed: boolean; + + /** + * Describes if Sidenav is being dragged + */ + isDragged: boolean; + } + + /** + * Options for the Sidenav + */ + interface SidenavOptions { + /** + * Side of screen on which Sidenav appears + * @default 'left' + */ + edge: 'left' | 'right'; + + /** + * Allow swipe gestures to open/close Sidenav + * @default true + */ + draggable: boolean; + + /** + * Length in ms of enter transition + * @default 250 + */ + inDuration: number; + + /** + * Length in ms of exit transition + * @default 200 + */ + outDuration: number; + + /** + * Function called when sidenav starts entering + */ + onOpenStart: (this: Sidenav, elem: Element) => void; + + /** + * Function called when sidenav finishes entering + */ + onOpenEnd: (this: Sidenav, elem: Element) => void; + + /** + * Function called when sidenav starts exiting + */ + onCloseStart: (this: Sidenav, elem: Element) => void; + + /** + * Function called when sidenav finishes exiting + */ + onCloseEnd: (this: Sidenav, elem: Element) => void; + } +} + +interface JQuery { + sidenav(method: keyof Pick): JQuery; + sidenav(options?: Partial): JQuery; +} diff --git a/types/materialize-css/slider.d.ts b/types/materialize-css/slider.d.ts new file mode 100644 index 0000000000..4ab110ba58 --- /dev/null +++ b/types/materialize-css/slider.d.ts @@ -0,0 +1,86 @@ +/// + +declare namespace M { + class Slider extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Slider; + + /** + * Init Slider + */ + static init(els: Element, options?: Partial): Slider; + + /** + * Init Sliders + */ + static init(els: MElements, options?: Partial): Slider[]; + + /** + * ID of the dropdown element + */ + el: Element; + + /** + * ID of the dropdown element + */ + options: SliderOptions; + + /** + * Index of current slide + */ + activeIndex: number; + + /** + * Pause slider autoslide + */ + pause(): void; + + /** + * Start slider autoslide + */ + start(): void; + + /** + * Move to next slider + */ + next(): void; + + /** + * Move to prev slider + */ + prev(): void; + } + + interface SliderOptions { + /** + * Set to false to hide slide indicators + * @default true + */ + indicators: boolean; + + /** + * Set height of slider + * @default 400 + */ + height: number; + + /** + * Set the duration of the transition animation in ms + * @default 500 + */ + duration: number; + + /** + * Set the duration between transitions in ms + * @default 6000 + */ + interval: number; + } +} + +interface JQuery { + slider(method: keyof Pick): JQuery; + slider(options?: Partial): JQuery; +} diff --git a/types/materialize-css/tabs.d.ts b/types/materialize-css/tabs.d.ts new file mode 100644 index 0000000000..b8cb2d5fec --- /dev/null +++ b/types/materialize-css/tabs.d.ts @@ -0,0 +1,70 @@ +/// + +declare namespace M { + class Tabs extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Tabs; + + /** + * Init Tabs + */ + static init(els: Element, options?: Partial): Tabs; + + /** + * Init Tabses + */ + static init(els: MElements, options?: Partial): Tabs[]; + + /** + * Show tab content that corresponds to the tab with the id + * @param tabId The id of the tab that you want to switch to + */ + select(tabId: string): void; + + /** + * The index of tab that is currently shown + */ + index: number; + + /** + * Recalculate tab indicator position. This is useful when the indicator position is not correct + */ + updateTabIndicator(): void; + } + + /** + * Options for the Tabs + */ + interface TabsOptions { + /** + * Transition duration in milliseconds. + * @default 300 + */ + duration: number; + + /** + * Callback for when a new tab content is shown + */ + onShow: (this: Tabs, newContent: Element) => void; + + /** + * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option + * @default false + */ + swipeable: boolean; + + /** + * The maximum width of the screen, in pixels, where the swipeable functionality initializes. + * @default infinity + */ + responsiveThreshold: number; + } +} + +interface JQuery { + tabs(method: keyof Pick): JQuery; + tabs(method: keyof Pick, tabId: string): JQuery; + tabs(options?: Partial): JQuery; +} diff --git a/types/materialize-css/taptarget.d.ts b/types/materialize-css/taptarget.d.ts new file mode 100644 index 0000000000..eeea843592 --- /dev/null +++ b/types/materialize-css/taptarget.d.ts @@ -0,0 +1,54 @@ +/// + +declare namespace M { + class TapTarget extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): TapTarget; + + /** + * Init TapTarget + */ + static init(els: Element, options?: Partial): TapTarget; + + /** + * Init TapTargets + */ + static init(els: MElements, options?: Partial): TapTarget[]; + + /** + * If the tap target is open + */ + isOpen: boolean; + + /** + * Open Tap Target + */ + open(): void; + + /** + * Close Tap Target + */ + close(): void; + } + + interface TapTargetOptions { + /** + * Callback function called when Tap Target is opened + * @default null + */ + onOpen: (this: TapTarget, origin: Element) => void; + + /** + * Callback function called when Tap Target is closed + * @default null + */ + onClose: (this: TapTarget, origin: Element) => void; + } +} + +interface JQuery { + tapTarget(method: keyof Pick): JQuery; + tapTarget(options?: Partial): JQuery; +} diff --git a/types/materialize-css/test/autocomplete.test.ts b/types/materialize-css/test/autocomplete.test.ts new file mode 100644 index 0000000000..dece4118bd --- /dev/null +++ b/types/materialize-css/test/autocomplete.test.ts @@ -0,0 +1,55 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Autocomplete +const _autocomplete = new M.Autocomplete(elem); +// $ExpectType Autocomplete +const el = M.Autocomplete.init(elem); +// $ExpectType Autocomplete[] +const els = M.Autocomplete.init(document.querySelectorAll('.whatever')); + +// $ExpectType Autocomplete +new materialize.Autocomplete(elem); +// $ExpectType Autocomplete +const autocomplete = new materialize.Autocomplete(elem, { + data: { + Apple: null, + Google: "https://placehold.it/250x250" + }, + minLength: 3, + limit: 3, + onAutocomplete(text) { + // $ExpectType Autocomplete + this; + // $ExpectType string + text; + }, + sortFunction(a, b, input) { + // $ExpectType string + a; + // $ExpectType string + b; + // $ExpectType string + input; + return 0; + } +}); +// $ExpectType void +autocomplete.updateData({ Microsoft: null }); +// $ExpectType void +autocomplete.destroy(); +// $ExpectType AutocompleteOptions +autocomplete.options; +// $ExpectType Element +autocomplete.el; +// $ExpectType boolean +autocomplete.isOpen; + +$(".whatever").autocomplete({ + data: { + Apple: null, + Google: "https://placehold.it/250x250" + } +}); +$(".whatever").autocomplete("updateData", { Microsoft: null }); diff --git a/types/materialize-css/test/carousel.test.ts b/types/materialize-css/test/carousel.test.ts new file mode 100644 index 0000000000..e6658e8862 --- /dev/null +++ b/types/materialize-css/test/carousel.test.ts @@ -0,0 +1,53 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Carousel +const _carousel = new M.Carousel(elem); +// $ExpectType Carousel +const el = M.Carousel.init(elem); +// $ExpectType Carousel[] +const els = M.Carousel.init(document.querySelectorAll('.whatever')); + +// $ExpectType Carousel +const carousel = new materialize.Carousel(elem, { + dist: 1, + duration: 1, + fullWidth: true, + indicators: true, + noWrap: true, + numVisible: 10, + onCycleTo(current, dragged) { + // $ExpectType Element + current; + // $ExpectType boolean + dragged; + }, + padding: 1, + shift: 1 +}); + +// $ExpectType number +carousel.center; +// $ExpectType number +carousel.dragged; +// $ExpectType Element +carousel.el; +// $ExpectType CarouselOptions +carousel.options; +// $ExpectType boolean +carousel.pressed; +// $ExpectType void +carousel.destroy(); +// $ExpectType void +carousel.next(1); +// $ExpectType void +carousel.prev(1); +// $ExpectType void +carousel.set(2); + +$(".whatever").carousel(); +$(".whatever").carousel("destroy"); +$(".whatever").carousel("next", 1); +$(".whatever").carousel("prev", 1); +$(".whatever").carousel("set", 1); diff --git a/types/materialize-css/test/character-counter.test.ts b/types/materialize-css/test/character-counter.test.ts new file mode 100644 index 0000000000..e928510662 --- /dev/null +++ b/types/materialize-css/test/character-counter.test.ts @@ -0,0 +1,20 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType CharacterCounter +const _characterCounter = new M.CharacterCounter(elem); +// $ExpectType CharacterCounter +const el = M.CharacterCounter.init(elem); +// $ExpectType CharacterCounter[] +const els = M.CharacterCounter.init(document.querySelectorAll('.whatever')); + +// $ExpectType CharacterCounter +const characterCounter = new materialize.CharacterCounter(elem); +// $ExpectType void +characterCounter.destroy(); +// $ExpectType Element +characterCounter.el; + +$(".whatever").characterCounter(); +$(".whatever").characterCounter("destroy"); diff --git a/types/materialize-css/test/chips.test.ts b/types/materialize-css/test/chips.test.ts new file mode 100644 index 0000000000..de68820070 --- /dev/null +++ b/types/materialize-css/test/chips.test.ts @@ -0,0 +1,40 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Chips +const _chips = new M.Chips(elem); +// $ExpectType Chips +const el = M.Chips.init(elem); +// $ExpectType Chips[] +const els = M.Chips.init(document.querySelectorAll('.whatever')); + +// $ExpectType Chips +const chips = new materialize.Chips(elem, { + data: [{ tag: "tag" }], + onChipAdd() { }, + onChipDelete() { }, + onChipSelect() { } +}); + +// $ExpectType void +chips.addChip({ tag: "tag" }); +// $ExpectType void +chips.deleteChip(1); +// $ExpectType void +chips.destroy(); +// $ExpectType void +chips.selectChip(1); +// $ExpectType Autocomplete +chips.autocomplete; +// $ExpectType ChipData[] +chips.chipsData; +// $ExpectType Element +chips.el; +// $ExpectType boolean +chips.hasAutocomplete; +// $ExpectType ChipsOptions +chips.options; + +$(".whatever").chips({ data: [{ tag: "tag" }] }); +$(".whatever").chips("destroy"); diff --git a/types/materialize-css/test/collapsible.test.ts b/types/materialize-css/test/collapsible.test.ts new file mode 100644 index 0000000000..927cd16cb7 --- /dev/null +++ b/types/materialize-css/test/collapsible.test.ts @@ -0,0 +1,49 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Collapsible +const _collapsible = new M.Collapsible(elem); +// $ExpectType Collapsible +const el = M.Collapsible.init(elem); +// $ExpectType Collapsible[] +const els = M.Collapsible.init(document.querySelectorAll('.whatever')); + +// $ExpectType Collapsible +const collapsible = new materialize.Collapsible(elem, { + accordion: true, + inDuration: 1, + outDuration: 1, + onCloseEnd(el) { + // $ExpectType Element + el; + }, + onCloseStart(el) { + // $ExpectType Element + el; + }, + onOpenEnd(el) { + // $ExpectType Element + el; + }, + onOpenStart(el) { + // $ExpectType Element + el; + } +}); + +// $ExpectType void +collapsible.close(1); +// $ExpectType void +collapsible.destroy(); +// $ExpectType void +collapsible.open(1); +// $ExpectType Element +collapsible.el; +// $ExpectType CollapsibleOptions +collapsible.options; + +$(".whatever").collapsible(); +$(".whatever").collapsible("destroy"); +$(".whatever").collapsible("open", 1); +$(".whatever").collapsible("close", 1); diff --git a/types/materialize-css/test/common.test.ts b/types/materialize-css/test/common.test.ts new file mode 100644 index 0000000000..a46cd7fe28 --- /dev/null +++ b/types/materialize-css/test/common.test.ts @@ -0,0 +1,13 @@ +import * as M from "materialize-css"; +import * as jQuery from "jquery"; + +// Test Component Initialization + +// $ExpectType Autocomplete +M.Autocomplete.init(document.querySelector('.whatever')!); +// $ExpectType Autocomplete[] +M.Autocomplete.init(document.querySelectorAll('.whatever')); +// $ExpectType Autocomplete[] +M.Autocomplete.init(jQuery('.whatever')); +// $ExpectType Autocomplete[] +M.Autocomplete.init(cash('.whatever')); diff --git a/types/materialize-css/test/datepicker.test.ts b/types/materialize-css/test/datepicker.test.ts new file mode 100644 index 0000000000..bd5279243e --- /dev/null +++ b/types/materialize-css/test/datepicker.test.ts @@ -0,0 +1,42 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Datepicker +const _datePicker = new M.Datepicker(elem); +// $ExpectType Datepicker +const el = M.Datepicker.init(elem); +// $ExpectType Datepicker[] +const els = M.Datepicker.init(document.querySelectorAll('.whatever')); + +// $ExpectType Datepicker +new materialize.Datepicker(elem); +// $ExpectType Datepicker +const datePicker = new materialize.Datepicker(elem, { + defaultDate: new Date(), + onSelect(date) { + // $ExpectType Datepicker + this; + // $ExpectType Date + date; + } +}); +// $ExpectType void +datePicker.open(); +// $ExpectType void +datePicker.setDate(new Date()); +// $ExpectType void +datePicker.destroy(); +// $ExpectType DatepickerOptions +datePicker.options; +// $ExpectType Element +datePicker.el; +// $ExpectType boolean +datePicker.isOpen; + +$(".whatever").datepicker(); +$(".whatever").datepicker({ defaultDate: new Date() }); +$(".whatever").datepicker("open"); +$(".whatever").datepicker("destroy"); +$(".whatever").datepicker("setDate", new Date()); +$(".whatever").datepicker("gotoDate", new Date()); diff --git a/types/materialize-css/test/dropdown.test.ts b/types/materialize-css/test/dropdown.test.ts new file mode 100644 index 0000000000..a10eef6fc1 --- /dev/null +++ b/types/materialize-css/test/dropdown.test.ts @@ -0,0 +1,46 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Dropdown +const _dropdown = new M.Dropdown(elem); +// $ExpectType Dropdown +const el = M.Dropdown.init(elem); +// $ExpectType Dropdown[] +const els = M.Dropdown.init(document.querySelectorAll('.whatever')); + +// $ExpectType Dropdown +new materialize.Dropdown(elem); +// $ExpectType Dropdown +const dropdown = new materialize.Dropdown(elem, { + alignment: "left" +}); +// $ExpectType void +dropdown.open(); +// $ExpectType void +dropdown.close(); +// $ExpectType void +dropdown.destroy(); +// $ExpectType void +dropdown.recalculateDimensions(); +// $ExpectType Element +dropdown.dropdownEl; +// $ExpectType Element +dropdown.el; +// $ExpectType number +dropdown.focusedIndex; +// $ExpectType string +dropdown.id; +// $ExpectType boolean +dropdown.isOpen; +// $ExpectType boolean +dropdown.isScrollable; +// $ExpectType DropdownOptions +dropdown.options; + +$(".whatever").dropdown(); +$(".whatever").dropdown({ alignment: "left" }); +$(".whatever").dropdown("open"); +$(".whatever").dropdown("close"); +$(".whatever").dropdown("destroy"); +$(".whatever").dropdown("recalculateDimensions"); diff --git a/types/materialize-css/test/fab.test.ts b/types/materialize-css/test/fab.test.ts new file mode 100644 index 0000000000..988adbf4bb --- /dev/null +++ b/types/materialize-css/test/fab.test.ts @@ -0,0 +1,32 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType FloatingActionButton +const _fab = new M.FloatingActionButton(elem); +// $ExpectType FloatingActionButton +const el = M.FloatingActionButton.init(elem); +// $ExpectType FloatingActionButton[] +const els = M.FloatingActionButton.init(document.querySelectorAll('.whatever')); + +// $ExpectType FloatingActionButton +new materialize.FloatingActionButton(elem); +// $ExpectType FloatingActionButton +const fab = new materialize.FloatingActionButton(elem, { + direction: 'left' +}); +// $ExpectType void +fab.open(); +// $ExpectType void +fab.destroy(); +// $ExpectType FloatingActionButtonOptions +fab.options; +// $ExpectType Element +fab.el; +// $ExpectType boolean +fab.isOpen; + +$(".whatever").floatingActionButton(); +$(".whatever").floatingActionButton({ direction: "left" }); +$(".whatever").floatingActionButton("open"); +$(".whatever").floatingActionButton("destroy"); diff --git a/types/materialize-css/test/formselect.test.ts b/types/materialize-css/test/formselect.test.ts new file mode 100644 index 0000000000..1a5192de41 --- /dev/null +++ b/types/materialize-css/test/formselect.test.ts @@ -0,0 +1,42 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType FormSelect +const _formselect = new M.FormSelect(elem); +// $ExpectType FormSelect +const el = M.FormSelect.init(elem); +// $ExpectType FormSelect[] +const els = M.FormSelect.init(document.querySelectorAll('.whatever')); + +// $ExpectType FormSelect +new materialize.FormSelect(elem); +// $ExpectType FormSelect +const formSelect = new materialize.FormSelect(elem, { + classes: "whatever", + dropdownOptions: { + alignment: "left" + } +}); +// $ExpectType string[] +formSelect.getSelectedValues(); +// $ExpectType void +formSelect.destroy(); +// $ExpectType FormSelectOptions +formSelect.options; +// $ExpectType Element +formSelect.el; +// $ExpectType Dropdown +formSelect.dropdown; +// $ExpectType HTMLUListElement +formSelect.dropdownOptions; +// $ExpectType HTMLInputElement +formSelect.input; +// $ExpectType boolean +formSelect.isMultiple; +// $ExpectType Element +formSelect.wrapper; + +$(".whatever").formSelect(); +$(".whatever").formSelect({ classes: "whatever" }); +$(".whatever").formSelect("destroy"); diff --git a/types/materialize-css/test/inputfields.test.ts b/types/materialize-css/test/inputfields.test.ts new file mode 100644 index 0000000000..ecde571537 --- /dev/null +++ b/types/materialize-css/test/inputfields.test.ts @@ -0,0 +1,7 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +M.textareaAutoResize(elem); +M.textareaAutoResize($(elem)); +M.textareaAutoResize(cash(elem)); diff --git a/types/materialize-css/test/materialbox.test.ts b/types/materialize-css/test/materialbox.test.ts new file mode 100644 index 0000000000..277edb7305 --- /dev/null +++ b/types/materialize-css/test/materialbox.test.ts @@ -0,0 +1,49 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Materialbox +const _materialbox = new M.Materialbox(elem); +// $ExpectType Materialbox +const el = M.Materialbox.init(elem); +// $ExpectType Materialbox[] +const els = M.Materialbox.init(document.querySelectorAll('.whatever')); + +// $ExpectType Materialbox +const materialbox = new materialize.Materialbox(elem, { + inDuration: 1, + outDuration: 1, + onCloseEnd(el) { + // $ExpectType Element + el; + }, + onCloseStart(el) { + // $ExpectType Element + el; + }, + onOpenEnd(el) { + // $ExpectType Element + el; + }, + onOpenStart(el) { + // $ExpectType Element + el; + } +}); + +// $ExpectType void +materialbox.close(); +// $ExpectType void +materialbox.destroy(); +// $ExpectType void +materialbox.open(); +// $ExpectType Element +materialbox.el; +// $ExpectType MaterialboxOptions +materialbox.options; + +$(".whatever").materialbox(); +$(".whatever").materialbox({ inDuration: 2 }); +$(".whatever").materialbox("open"); +$(".whatever").materialbox("destroy"); +$(".whatever").materialbox("close"); diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts deleted file mode 100644 index 79ed142be4..0000000000 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -const elem = document.querySelector('.whatever')!; -// $ExpectType Sidenav -const sidenav = new M.Sidenav(elem); - -// $ExpectType Tabs -const tabs = new M.Tabs(elem); - -// $ExpectType Modal -const modal = new M.Modal(elem); - -// $ExpectType Autocomplete -const autocomplete = new M.Autocomplete(elem); - -// $ExpectType CharacterCounter -const characterCounter = new M.CharacterCounter(elem); - -// $ExpectType Tooltip -const tooltips = new M.Tooltip(elem); - -// $ExpectType FloatingActionButton -const fab = new M.FloatingActionButton(elem); - -// $ExpectType Toast -const toast = M.toast({ html: 'I am a toast!' }); - -// $ExpectType DatePicker -const datePicker = new M.DatePicker(elem); - -// $ExpectType TimePicker -const timePicker = new M.TimePicker(elem); - -// $ExpectType Dropdown -const dropdown = new M.Dropdown(elem); - -// $ExpectType FormSelect -const formSelect = new M.FormSelect(elem); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts deleted file mode 100644 index 7bf9faa957..0000000000 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ /dev/null @@ -1,61 +0,0 @@ -$(".whatever").sidenav(); -$(".whatever").sidenav({ inDuration: 200 }); -$(".whatever").sidenav("open"); -$(".whatever").sidenav("destroy"); - -$(".whatever").tabs(); -$(".whatever").tabs({ duration: 200 }); -$(".whatever").tabs("destroy"); -$(".whatever").tabs("select", "id"); - -$(".whatever").modal(); -$(".whatever").modal({ inDuration: 200 }); -$(".whatever").modal("open"); -$(".whatever").modal("destroy"); - -$(".whatever").characterCounter(); -$(".whatever").characterCounter("destroy"); - -$(".whatever").autocomplete({ - data: { - Apple: null, - Google: "https://placehold.it/250x250" - } -}); -$(".whatever").autocomplete("updateData", { Microsoft: null }); - -$(".whatever").tooltip(); -$(".whatever").tooltip({ html: "" }); -$(".whatever").tooltip("open"); -$(".whatever").tooltip("destroy"); - -$(".whatever").floatingActionButton(); -$(".whatever").floatingActionButton({ direction: "left" }); -$(".whatever").floatingActionButton("open"); -$(".whatever").floatingActionButton("destroy"); - -// Toast can not be invoked using jQuery. - -$(".whatever").datepicker(); -$(".whatever").datepicker({ defaultDate: new Date() }); -$(".whatever").datepicker("open"); -$(".whatever").datepicker("destroy"); -$(".whatever").datepicker("setDate", new Date()); -$(".whatever").datepicker("gotoDate", new Date()); - -$(".whatever").timepicker(); -$(".whatever").timepicker({ defaultTime: "13:14" }); -$(".whatever").timepicker("open"); -$(".whatever").timepicker("destroy"); -$(".whatever").timepicker("showView", "hours"); - -$(".whatever").formSelect(); -$(".whatever").formSelect({ classes: "whatever" }); -$(".whatever").formSelect("destroy"); - -$(".whatever").dropdown(); -$(".whatever").dropdown({ alignment: "left" }); -$(".whatever").dropdown("open"); -$(".whatever").dropdown("close"); -$(".whatever").dropdown("destroy"); -$(".whatever").dropdown("recalculateDimensions"); diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts deleted file mode 100644 index 874e596aaa..0000000000 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ /dev/null @@ -1,277 +0,0 @@ -import * as materialize from "materialize-css"; - -const elem = document.querySelector('.whatever')!; - -// Sidenav -// $ExpectType Sidenav -new materialize.Sidenav(elem); -// $ExpectType Sidenav -const sidenav = new materialize.Sidenav(elem, { - edge: "left", - inDuration: 300, - onCloseStart(el) { - // $ExpectType Sidenav - this; - // $ExpectType Element - el; - } -}); -// $ExpectType void -sidenav.open(); -// $ExpectType void -sidenav.destroy(); -// $ExpectType SidenavOptions -sidenav.options; -// $ExpectType Element -sidenav.el; -// $ExpectType boolean -sidenav.isOpen; - -// Tabs -// $ExpectType Tabs -new materialize.Tabs(elem); -// $ExpectType Tabs -const tabs = new materialize.Tabs(elem, { - duration: 200, - onShow(content) { - // $ExpectType Tabs - this; - // $ExpectType Element - content; - } -}); -// $ExpectType void -tabs.destroy(); -// $ExpectType void -tabs.select("id"); -// $ExpectType TabsOptions -tabs.options; -// $ExpectType Element -tabs.el; -// $ExpectType number -tabs.index; - -// Modal -// $ExpectType Modal -new materialize.Modal(elem); -// $ExpectType Modal -const modal = new materialize.Modal(elem, { - inDuration: 300, - ready(el, trigger) { - // $ExpectType Modal - this; - // $ExpectType Element - el; - // $ExpectType Element - trigger; - } -}); -// $ExpectType void -modal.open(); -// $ExpectType void -modal.destroy(); -// $ExpectType ModalOptions -modal.options; -// $ExpectType Element -modal.el; -// $ExpectType boolean -modal.isOpen; - -// CharacterCounter -// $ExpectType CharacterCounter -const characterCounter = new materialize.CharacterCounter(elem); -// $ExpectType void -characterCounter.destroy(); -// $ExpectType Element -characterCounter.el; - -// Autocomplete -// $ExpectType Autocomplete -new materialize.Autocomplete(elem); -// $ExpectType Autocomplete -const autocomplete = new materialize.Autocomplete(elem, { - data: { - Apple: null, - Google: "https://placehold.it/250x250" - }, - minLength: 3, - onAutocomplete(text) { - // $ExpectType Autocomplete - this; - // $ExpectType string - text; - }, - sortFunction(a, b, input) { - // $ExpectType string - a; - // $ExpectType string - b; - // $ExpectType string - input; - return 0; - } -}); -// $ExpectType void -autocomplete.updateData({ Microsoft: null }); -// $ExpectType void -autocomplete.destroy(); -// $ExpectType AutocompleteOptions -autocomplete.options; -// $ExpectType Element -autocomplete.el; -// $ExpectType boolean -autocomplete.isOpen; - -// Tooltip -// $ExpectType Tooltip -new materialize.Tooltip(elem); -// $ExpectType Tooltip -const tooltip = new materialize.Tooltip(elem, { - inDuration: 300, - position: "right" -}); -// $ExpectType void -tooltip.open(); -// $ExpectType void -tooltip.destroy(); -// $ExpectType TooltipOptions -tooltip.options; -// $ExpectType Element -tooltip.el; -// $ExpectType boolean -tooltip.isOpen; - -// FloatingActionButton -// $ExpectType FloatingActionButton -new materialize.FloatingActionButton(elem); -// $ExpectType FloatingActionButton -const fab = new materialize.FloatingActionButton(elem, { - direction: 'left' -}); -// $ExpectType void -fab.open(); -// $ExpectType void -fab.destroy(); -// $ExpectType FloatingActionButtonOptions -fab.options; -// $ExpectType Element -fab.el; -// $ExpectType boolean -fab.isOpen; - -// Toasts -// $ExpectType Toast -const toast = materialize.toast({ html: 'I am a toast!' }); -// $ExpectType ToastOptions -toast.options; -// $ExpectType Element -fab.el; -// $ExpectType void -toast.dismiss(); -// $ExpectType void -materialize.Toast.dismissAll(); - -// DatePicker -// $ExpectType DatePicker -new materialize.DatePicker(elem); -// $ExpectType DatePicker -const datePicker = new materialize.DatePicker(elem, { - defaultDate: new Date(), - onSelect(date) { - // $ExpectType DatePicker - this; - // $ExpectType Date - date; - } -}); -// $ExpectType void -datePicker.open(); -// $ExpectType void -datePicker.setDate(new Date()); -// $ExpectType void -datePicker.destroy(); -// $ExpectType DatePickerOptions -datePicker.options; -// $ExpectType Element -datePicker.el; -// $ExpectType boolean -datePicker.isOpen; - -// TimePicker -// $ExpectType TimePicker -new materialize.TimePicker(elem); -// $ExpectType TimePicker -const timePicker = new materialize.TimePicker(elem, { - defaultTime: "13:14" -}); -// $ExpectType void -timePicker.open(); -// $ExpectType void -timePicker.showView("hours"); -// $ExpectType void -timePicker.destroy(); -// $ExpectType TimePickerOptions -timePicker.options; -// $ExpectType Element -timePicker.el; -// $ExpectType boolean -timePicker.isOpen; - -// Dropdown -// $ExpectType Dropdown -new materialize.Dropdown(elem); -// $ExpectType Dropdown -const dropdown = new materialize.Dropdown(elem, { - alignment: "left" -}); -// $ExpectType void -dropdown.open(); -// $ExpectType void -dropdown.close(); -// $ExpectType void -dropdown.destroy(); -// $ExpectType void -dropdown.recalculateDimensions(); -// $ExpectType Element -dropdown.dropdownEl; -// $ExpectType Element -dropdown.el; -// $ExpectType number -dropdown.focusedIndex; -// $ExpectType string -dropdown.id; -// $ExpectType boolean -dropdown.isOpen; -// $ExpectType boolean -dropdown.isScrollable; -// $ExpectType DropdownOptions -dropdown.options; - -// FormSelect -// $ExpectType FormSelect -new materialize.FormSelect(elem); -// $ExpectType FormSelect -const formSelect = new materialize.FormSelect(elem, { - classes: "whatever", - dropdownOptions: { - alignment: "left" - } -}); -// $ExpectType string[] -formSelect.getSelectedValues(); -// $ExpectType void -formSelect.destroy(); -// $ExpectType FormSelectOptions -formSelect.options; -// $ExpectType Element -formSelect.el; -// $ExpectType Dropdown -formSelect.dropdown; -// $ExpectType HTMLUListElement -formSelect.dropdownOptions; -// $ExpectType HTMLInputElement -formSelect.input; -// $ExpectType boolean -formSelect.isMultiple; -// $ExpectType Element -formSelect.wrapper; diff --git a/types/materialize-css/test/modal.test.ts b/types/materialize-css/test/modal.test.ts new file mode 100644 index 0000000000..3d3923e28b --- /dev/null +++ b/types/materialize-css/test/modal.test.ts @@ -0,0 +1,38 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Modal +const _modal = new M.Modal(elem); +// $ExpectType Modal +const el = M.Modal.init(elem); +// $ExpectType Modal[] +const els = M.Modal.init(document.querySelectorAll('.whatever')); + +// $ExpectType Modal +new materialize.Modal(elem); +// $ExpectType Modal +const modal = new materialize.Modal(elem, { + inDuration: 300, + onOpenStart(el) { + // $ExpectType Modal + this; + // $ExpectType Element + el; + } +}); +// $ExpectType void +modal.open(); +// $ExpectType void +modal.destroy(); +// $ExpectType ModalOptions +modal.options; +// $ExpectType Element +modal.el; +// $ExpectType boolean +modal.isOpen; + +$(".whatever").modal(); +$(".whatever").modal({ inDuration: 200 }); +$(".whatever").modal("open"); +$(".whatever").modal("destroy"); diff --git a/types/materialize-css/test/parallax.test.ts b/types/materialize-css/test/parallax.test.ts new file mode 100644 index 0000000000..62beb046e7 --- /dev/null +++ b/types/materialize-css/test/parallax.test.ts @@ -0,0 +1,24 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Parallax +const _parallax = new M.Parallax(elem); +// $ExpectType Parallax +const el = M.Parallax.init(elem); +// $ExpectType Parallax[] +const els = M.Parallax.init(document.querySelectorAll('.whatever')); + +// $ExpectType Parallax +const parallax = new materialize.Parallax(elem, { responsiveThreshold: 1 }); + +// $ExpectType void +parallax.destroy(); +// $ExpectType Element +parallax.el; +// $ExpectType ParallaxOptions +parallax.options; + +$(".whatever").parallax(); +$(".whatever").parallax({ responsiveThreshold: 2 }); +$(".whatever").parallax("destroy"); diff --git a/types/materialize-css/test/pushpin.test.ts b/types/materialize-css/test/pushpin.test.ts new file mode 100644 index 0000000000..bb521b2cf6 --- /dev/null +++ b/types/materialize-css/test/pushpin.test.ts @@ -0,0 +1,34 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Pushpin +const _pushpin = new M.Pushpin(elem); +// $ExpectType Pushpin +const el = M.Pushpin.init(elem); +// $ExpectType Pushpin[] +const els = M.Pushpin.init(document.querySelectorAll('.whatever')); + +// $ExpectType Pushpin +const pushpin = new materialize.Pushpin(elem, { + bottom: 1, + offset: 1, + onPositionChange(position) { + // $ExpectType "pinned" | "pin-top" | "pin-bottom" + position; + }, + top: 1 +}); + +// $ExpectType void +pushpin.destroy(); +// $ExpectType Element +pushpin.el; +// $ExpectType PushpinOptions +pushpin.options; +// $ExpectType number +pushpin.originalOffset; + +$(".whatever").pushpin(); +$(".whatever").pushpin({ top: 2 }); +$(".whatever").pushpin("destroy"); diff --git a/types/materialize-css/test/range.test.ts b/types/materialize-css/test/range.test.ts new file mode 100644 index 0000000000..cf343b0341 --- /dev/null +++ b/types/materialize-css/test/range.test.ts @@ -0,0 +1,22 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Range +const _range = new M.Range(elem); +// $ExpectType Range +const el = M.Range.init(elem); +// $ExpectType Range[] +const els = M.Range.init(document.querySelectorAll('.whatever')); + +// $ExpectType Range +const range = new materialize.Range(elem); +// $ExpectType void +range.destroy(); +// $ExpectType Element +range.el; +// $ExpectType undefined +range.options; + +$(".whatever").range(); +$(".whatever").range("destroy"); diff --git a/types/materialize-css/test/scrollspy.test.ts b/types/materialize-css/test/scrollspy.test.ts new file mode 100644 index 0000000000..a797123626 --- /dev/null +++ b/types/materialize-css/test/scrollspy.test.ts @@ -0,0 +1,32 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType ScrollSpy +const _scrollspy = new M.ScrollSpy(elem); +// $ExpectType ScrollSpy +const el = M.ScrollSpy.init(elem); +// $ExpectType ScrollSpy[] +const els = M.ScrollSpy.init(document.querySelectorAll('.whatever')); + +// $ExpectType ScrollSpy +const scrollspy = new materialize.ScrollSpy(elem, { + activeClass: "class", + getActiveElement(id) { + // $ExpectType string + id; + return "string"; + }, + scrollOffset: 1, + throttle: 1 +}); + +// $ExpectType void +scrollspy.destroy(); +// $ExpectType Element +scrollspy.el; +// $ExpectType ScrollSpyOptions +scrollspy.options; + +$(".whatever").scrollSpy(); +$(".whatever").scrollSpy("destroy"); diff --git a/types/materialize-css/test/sidenav.test.ts b/types/materialize-css/test/sidenav.test.ts new file mode 100644 index 0000000000..485c3be144 --- /dev/null +++ b/types/materialize-css/test/sidenav.test.ts @@ -0,0 +1,39 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Sidenav +const _sidenav = new M.Sidenav(elem); +// $ExpectType Sidenav +const el = M.Sidenav.init(elem); +// $ExpectType Sidenav[] +const els = M.Sidenav.init(document.querySelectorAll('.whatever')); + +// $ExpectType Sidenav +new materialize.Sidenav(elem); +// $ExpectType Sidenav +const sidenav = new materialize.Sidenav(elem, { + edge: "left", + inDuration: 300, + onCloseStart(el) { + // $ExpectType Sidenav + this; + // $ExpectType Element + el; + } +}); +// $ExpectType void +sidenav.open(); +// $ExpectType void +sidenav.destroy(); +// $ExpectType SidenavOptions +sidenav.options; +// $ExpectType Element +sidenav.el; +// $ExpectType boolean +sidenav.isOpen; + +$(".whatever").sidenav(); +$(".whatever").sidenav({ inDuration: 200 }); +$(".whatever").sidenav("open"); +$(".whatever").sidenav("destroy"); diff --git a/types/materialize-css/test/slider.test.ts b/types/materialize-css/test/slider.test.ts new file mode 100644 index 0000000000..c1950ed165 --- /dev/null +++ b/types/materialize-css/test/slider.test.ts @@ -0,0 +1,43 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Slider +const _slider = new M.Slider(elem); +// $ExpectType Slider +const el = M.Slider.init(elem); +// $ExpectType Slider[] +const els = M.Slider.init(document.querySelectorAll('.whatever')); + +// $ExpectType Slider +const slider = new materialize.Slider(elem, { + duration: 1, + height: 1, + indicators: true, + interval: 1 +}); + +// $ExpectType void +slider.destroy(); +// $ExpectType Element +slider.el; +// $ExpectType SliderOptions +slider.options; +// $ExpectType number +slider.activeIndex; +// $ExpectType void +slider.next(); +// $ExpectType void +slider.pause(); +// $ExpectType void +slider.prev(); +// $ExpectType void +slider.start(); + +$(".whatever").slider(); +$(".whatever").slider({ duration: 1 }); +$(".whatever").slider("destroy"); +$(".whatever").slider("next"); +$(".whatever").slider("pause"); +$(".whatever").slider("prev"); +$(".whatever").slider("start"); diff --git a/types/materialize-css/test/tabs.test.ts b/types/materialize-css/test/tabs.test.ts new file mode 100644 index 0000000000..9c0c0acdad --- /dev/null +++ b/types/materialize-css/test/tabs.test.ts @@ -0,0 +1,38 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Tabs +const _tabs = new M.Tabs(elem); +// $ExpectType Tabs +const el = M.Tabs.init(elem); +// $ExpectType Tabs[] +const els = M.Tabs.init(document.querySelectorAll('.whatever')); + +// $ExpectType Tabs +new materialize.Tabs(elem); +// $ExpectType Tabs +const tabs = new materialize.Tabs(elem, { + duration: 200, + onShow(content) { + // $ExpectType Tabs + this; + // $ExpectType Element + content; + } +}); +// $ExpectType void +tabs.destroy(); +// $ExpectType void +tabs.select("id"); +// $ExpectType TabsOptions +tabs.options; +// $ExpectType Element +tabs.el; +// $ExpectType number +tabs.index; + +$(".whatever").tabs(); +$(".whatever").tabs({ duration: 200 }); +$(".whatever").tabs("destroy"); +$(".whatever").tabs("select", "id"); diff --git a/types/materialize-css/test/taptarget.test.ts b/types/materialize-css/test/taptarget.test.ts new file mode 100644 index 0000000000..91b00168cd --- /dev/null +++ b/types/materialize-css/test/taptarget.test.ts @@ -0,0 +1,38 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType TapTarget +const _taptarget = new M.TapTarget(elem); +// $ExpectType TapTarget +const el = M.TapTarget.init(elem); +// $ExpectType TapTarget[] +const els = M.TapTarget.init(document.querySelectorAll('.whatever')); + +// $ExpectType TapTarget +const taptarget = new materialize.TapTarget(elem, { + onClose(origin) { + // $ExpectType Element + origin; + }, + onOpen(origin) { + // $ExpectType Element + origin; + } +}); + +// $ExpectType void +taptarget.destroy(); +// $ExpectType void +taptarget.close(); +// $ExpectType void +taptarget.open(); +// $ExpectType Element +taptarget.el; +// $ExpectType TapTargetOptions +taptarget.options; + +$(".whatever").tapTarget(); +$(".whatever").tapTarget("destroy"); +$(".whatever").tapTarget("close"); +$(".whatever").tapTarget("open"); diff --git a/types/materialize-css/test/timepicker.test.ts b/types/materialize-css/test/timepicker.test.ts new file mode 100644 index 0000000000..6c187b2cfe --- /dev/null +++ b/types/materialize-css/test/timepicker.test.ts @@ -0,0 +1,65 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Timepicker +const _timePicker = new M.Timepicker(elem); +// $ExpectType Timepicker +const el = M.Timepicker.init(elem); +// $ExpectType Timepicker[] +const els = M.Timepicker.init(document.querySelectorAll('.whatever')); + +// $ExpectType Timepicker +new materialize.Timepicker(elem); +// $ExpectType Timepicker +const timePicker = new materialize.Timepicker(elem, { + duration: 1, + container: "selector", + showClearBtn: true, + defaultTime: "13:14", + fromNow: 1, + i18n: { done: "Ok, Mate" }, + autoClose: true, + twelveHour: true, + vibrate: true, + onOpenStart(el) { + // $ExpectType Element + el; + }, + onOpenEnd(el) { + // $ExpectType Element + el; + }, + onCloseStart(el) { + // $ExpectType Element + el; + }, + onCloseEnd(el) { + // $ExpectType Element + el; + }, + onSelect(hour, minute) { + // $ExpectType number + hour; + // $ExpectType number + minute; + } +}); +// $ExpectType void +timePicker.open(); +// $ExpectType void +timePicker.showView("hours"); +// $ExpectType void +timePicker.destroy(); +// $ExpectType TimepickerOptions +timePicker.options; +// $ExpectType Element +timePicker.el; +// $ExpectType boolean +timePicker.isOpen; + +$(".whatever").timepicker(); +$(".whatever").timepicker({ defaultTime: "13:14" }); +$(".whatever").timepicker("open"); +$(".whatever").timepicker("destroy"); +$(".whatever").timepicker("showView", "hours"); diff --git a/types/materialize-css/test/toast.test.ts b/types/materialize-css/test/toast.test.ts new file mode 100644 index 0000000000..ede26bcc20 --- /dev/null +++ b/types/materialize-css/test/toast.test.ts @@ -0,0 +1,17 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Toast +const _toast = M.toast({ html: 'I am a toast!' }); + +// $ExpectType Toast +const toast = materialize.toast({ html: 'I am a toast!' }); +// $ExpectType ToastOptions +toast.options; +// $ExpectType Element +toast.el; +// $ExpectType void +toast.dismiss(); +// $ExpectType void +materialize.Toast.dismissAll(); diff --git a/types/materialize-css/test/tooltip.test.ts b/types/materialize-css/test/tooltip.test.ts new file mode 100644 index 0000000000..db9453e95f --- /dev/null +++ b/types/materialize-css/test/tooltip.test.ts @@ -0,0 +1,33 @@ +import * as materialize from "materialize-css"; + +const elem = document.querySelector('.whatever')!; + +// $ExpectType Tooltip +const _tooltip = new M.Tooltip(elem); +// $ExpectType Tooltip +const el = M.Tooltip.init(elem); +// $ExpectType Tooltip[] +const els = M.Tooltip.init(document.querySelectorAll('.whatever')); + +// $ExpectType Tooltip +new materialize.Tooltip(elem); +// $ExpectType Tooltip +const tooltip = new materialize.Tooltip(elem, { + inDuration: 300, + position: "right" +}); +// $ExpectType void +tooltip.open(); +// $ExpectType void +tooltip.destroy(); +// $ExpectType TooltipOptions +tooltip.options; +// $ExpectType Element +tooltip.el; +// $ExpectType boolean +tooltip.isOpen; + +$(".whatever").tooltip(); +$(".whatever").tooltip({ html: "" }); +$(".whatever").tooltip("open"); +$(".whatever").tooltip("destroy"); diff --git a/types/materialize-css/test/waves.test.ts b/types/materialize-css/test/waves.test.ts new file mode 100644 index 0000000000..c73ae78904 --- /dev/null +++ b/types/materialize-css/test/waves.test.ts @@ -0,0 +1,4 @@ +const elem = document.querySelector('.whatever')!; + +// $ExpectType void +Waves.attach(elem); diff --git a/types/materialize-css/timepicker.d.ts b/types/materialize-css/timepicker.d.ts new file mode 100644 index 0000000000..5f9b3ec5bf --- /dev/null +++ b/types/materialize-css/timepicker.d.ts @@ -0,0 +1,136 @@ +/// + +declare namespace M { + class Timepicker extends Component { + /** + * Get Instance + */ + static getInstance(elem: Element): Timepicker; + + /** + * Init Timepicker + */ + static init(els: Element, options?: Partial): Timepicker; + + /** + * Init Timepickers + */ + static init(els: MElements, options?: Partial): Timepicker[]; + + /** + * If the picker is open. + */ + isOpen: boolean; + + /** + * The selected time. + */ + time: string; + + /** + * Open timepicker + */ + open(): void; + + /** + * Close timepicker + */ + close(): void; + + /** + * Show hours or minutes view on timepicker + * @param view The name of the view you want to switch to, 'hours' or 'minutes'. + */ + showView(view: "hours" | "minutes"): void; + } + + interface TimepickerOptions { + /** + * Duration of the transition from/to the hours/minutes view. + * @default 350 + */ + duration: number; + + /** + * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input. + */ + container: string; + + /** + * Show the clear button in the Timepicker + * @default false + */ + showClearBtn: boolean; + + /** + * Default time to set on the timepicker 'now' or '13:14' + * @default 'now'; + */ + defaultTime: string; + + /** + * Millisecond offset from the defaultTime. + * @default 0 + */ + fromNow: number; + + /** + * Internationalization options + */ + i18n: Partial; + + /** + * Automatically close picker when minute is selected. + * @default false; + */ + autoClose: boolean; + + /** + * Use 12 hour AM/PM clock instead of 24 hour clock. + * @default true + */ + twelveHour: boolean; + + /** + * Vibrate device when dragging clock hand. + * @default true + */ + vibrate: boolean; + + /** + * Callback function called before modal is opened + * @default null + */ + onOpenStart: (this: Modal, el: Element) => void; + + /** + * Callback function called after modal is opened + * @default null + */ + onOpenEnd: (this: Modal, el: Element) => void; + + /** + * Callback function called before modal is closed + * @default null + */ + onCloseStart: (this: Modal, el: Element) => void; + + /** + * Callback function called after modal is closed + * @default null + */ + onCloseEnd: (this: Modal, el: Element) => void; + + /** + * Callback function when a time is selected + * @default null + */ + onSelect: (this: Modal, hour: number, minute: number) => void; + } +} + +interface JQuery { + timepicker(method: keyof Pick): JQuery; + timepicker(method: keyof Pick, view: "hours" | "minutes"): JQuery; + timepicker(options?: Partial): JQuery; +} diff --git a/types/materialize-css/toast.d.ts b/types/materialize-css/toast.d.ts new file mode 100644 index 0000000000..4953c7135b --- /dev/null +++ b/types/materialize-css/toast.d.ts @@ -0,0 +1,76 @@ +/// + +declare namespace M { + class Toast extends ComponentBase { + /** + * Get Instance + */ + static getInstance(elem: Element): Toast; + + /** + * Describes the current pan state of the Toast. + */ + panning: boolean; + + /** + * The remaining amount of time in ms that the toast will stay before dismissal. + */ + timeRemaining: number; + + /** + * remove a specific toast + */ + dismiss(): void; + + /** + * dismiss all toasts + */ + static dismissAll(): void; + } + + interface ToastOptions { + /** + * The HTML content of the Toast. + */ + html: string; + + /** + * Length in ms the Toast stays before dismissal. + * @default 4000 + */ + displayLength: number; + + /** + * Transition in duration in milliseconds. + * @default 300 + */ + inDuration: number; + + /** + * Transition out duration in milliseconds. + * @default 375 + */ + outDuration: number; + + /** + * Classes to be added to the toast element. + */ + classes: string; + + /** + * Callback function called when toast is dismissed. + */ + completeCallback: () => void; + + /** + * The percentage of the toast's width it takes for a drag to dismiss a Toast. + * @default 0.8 + */ + activationPercent: number; + } + + /** + * Create a toast + */ + function toast(options: Partial): Toast; +} diff --git a/types/materialize-css/tooltip.d.ts b/types/materialize-css/tooltip.d.ts new file mode 100644 index 0000000000..6b7320a20a --- /dev/null +++ b/types/materialize-css/tooltip.d.ts @@ -0,0 +1,95 @@ +/// + +declare namespace M { + class Tooltip extends Component implements Openable { + /** + * Get Instance + */ + static getInstance(elem: Element): Tooltip; + + /** + * Init Tooltip + */ + static init(els: Element, options?: Partial): Tooltip; + + /** + * Init Tooltips + */ + static init(els: MElements, options?: Partial): Tooltip[]; + + /** + * Show tooltip. + */ + open(): void; + + /** + * Hide tooltip. + */ + close(): void; + + /** + * If tooltip is open. + */ + isOpen: boolean; + + /** + * If tooltip is hovered. + */ + isHovered: boolean; + } + + interface TooltipOptions { + /** + * Delay time before tooltip disappears. + * @default 0 + */ + exitDelay: number; + + /** + * Delay time before tooltip appears. + * @default 200 + */ + enterDelay: number; + + /** + * Can take regular text or HTML strings. + * @default null + */ + html: string; + + /** + * Set distance tooltip appears away from its activator excluding transitionMovement. + * @default 5 + */ + margin: number; + + /** + * Enter transition duration. + * @default 300 + */ + inDuration: number; + + /** + * Exit transition duration. + * @default 250 + */ + outDuration: number; + + /** + * Set the direction of the tooltip. + * @default 'bottom' + */ + position: 'top' | 'right' | 'bottom' | 'left'; + + /** + * Amount in px that the tooltip moves during its transition. + * @default 10 + */ + transitionMovement: number; + } +} + +interface JQuery { + tooltip(method: keyof Pick): JQuery; + tooltip(options?: Partial): JQuery; +} diff --git a/types/materialize-css/tsconfig.json b/types/materialize-css/tsconfig.json index 617d1b925a..cf2b279cb7 100644 --- a/types/materialize-css/tsconfig.json +++ b/types/materialize-css/tsconfig.json @@ -19,8 +19,30 @@ }, "files": [ "index.d.ts", - "test/materialize-css-global.test.ts", - "test/materialize-css-module.test.ts", - "test/materialize-css-jquery.test.ts" + "test/autocomplete.test.ts", + "test/carousel.test.ts", + "test/character-counter.test.ts", + "test/chips.test.ts", + "test/collapsible.test.ts", + "test/common.test.ts", + "test/datepicker.test.ts", + "test/dropdown.test.ts", + "test/fab.test.ts", + "test/formselect.test.ts", + "test/inputfields.test.ts", + "test/materialbox.test.ts", + "test/modal.test.ts", + "test/parallax.test.ts", + "test/pushpin.test.ts", + "test/range.test.ts", + "test/scrollspy.test.ts", + "test/sidenav.test.ts", + "test/slider.test.ts", + "test/tabs.test.ts", + "test/taptarget.test.ts", + "test/timepicker.test.ts", + "test/toast.test.ts", + "test/tooltip.test.ts", + "test/waves.test.ts" ] -} \ No newline at end of file +} diff --git a/types/materialize-css/waves.d.ts b/types/materialize-css/waves.d.ts new file mode 100644 index 0000000000..cc86b017e4 --- /dev/null +++ b/types/materialize-css/waves.d.ts @@ -0,0 +1,9 @@ +declare namespace Waves { + /** + * Attach Waves to an input element (or any element which doesn't + * bubble mouseup/mousedown events). + * Intended to be used with dynamically loaded forms/inputs, or + * where the user doesn't want a delegated click handler. + */ + function attach(element: Element): void; +}