From a03991ca351061b23c0f7bdfe9c0ef2c7c4f5f40 Mon Sep 17 00:00:00 2001 From: prudho Date: Thu, 5 Oct 2023 18:03:54 +0200 Subject: [PATCH] fix(types): better declaration files This is the first round of fixes/improvements for type declarations of Fomantic. Some properties and methods were missing, some were too restrictive. --- types/fomantic-ui-api.d.ts | 10 +- types/fomantic-ui-calendar.d.ts | 101 +++++++++++++++++-- types/fomantic-ui-checkbox.d.ts | 18 +++- types/fomantic-ui-dropdown.d.ts | 29 +++--- types/fomantic-ui-flyout.d.ts | 28 ++++-- types/fomantic-ui-form.d.ts | 119 +++++++++++++++++++--- types/fomantic-ui-modal.d.ts | 78 +++++++++++++- types/fomantic-ui-nag.d.ts | 2 +- types/fomantic-ui-popup.d.ts | 16 +-- types/fomantic-ui-progress.d.ts | 6 ++ types/fomantic-ui-search.d.ts | 42 +++++--- types/fomantic-ui-tab.d.ts | 2 +- types/fomantic-ui-tests.ts | 162 ++++++++++++++++++++++++++++++ types/fomantic-ui-toast.d.ts | 7 +- types/fomantic-ui-transition.d.ts | 28 ++++++ types/fomantic-ui-visibility.d.ts | 4 +- 16 files changed, 573 insertions(+), 79 deletions(-) diff --git a/types/fomantic-ui-api.d.ts b/types/fomantic-ui-api.d.ts index 0e223f7832..37171236ab 100644 --- a/types/fomantic-ui-api.d.ts +++ b/types/fomantic-ui-api.d.ts @@ -125,6 +125,12 @@ declare namespace FomanticUI { */ on: string; + /** + * Object containing all templates endpoints + * @default {} + */ + api: {[key: string]: string}; + /** * Can be set to 'local' to cache successful returned AJAX responses when using a JSON API. * This helps avoid server roundtrips when API endpoints will return the same results when accessed repeatedly. @@ -137,7 +143,7 @@ declare namespace FomanticUI { * UI state will be applied to this element, defaults to triggering element. * @default false */ - stateContext: false | JQuery; + stateContext: false | string | JQuery; /** * Whether to encode parameters with 'encodeURIComponent' before adding into url string. @@ -259,7 +265,7 @@ declare namespace FomanticUI { * Method for transmitting request to server. * @default 'get' */ - method: 'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch'; + method: Uppercase<'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch'> | Lowercase<'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch'>; /** * Expected data type of response. diff --git a/types/fomantic-ui-calendar.d.ts b/types/fomantic-ui-calendar.d.ts index 3f7ff1ae39..9eaa351a6e 100644 --- a/types/fomantic-ui-calendar.d.ts +++ b/types/fomantic-ui-calendar.d.ts @@ -37,7 +37,7 @@ declare namespace FomanticUI { * Pass false to updateInput to disable updating the input. * Pass false to fireChange to disable the onBeforeChange and onChange callbacks for this change */ - (behavior: 'set date', date: string, updateInput: boolean, fireChange: boolean): JQuery; + (behavior: 'set date', date: Date | string | null, updateInput?: boolean, fireChange?: boolean): JQuery; /** * Get the current selection mode (year, month, day, hour, minute) @@ -82,12 +82,12 @@ declare namespace FomanticUI { /** * Set the minimal selectable date */ - (behavior: 'set minDate', date: Date | string): JQuery; + (behavior: 'set minDate', date: Date | string | null): JQuery; /** * Set the maximal selectable date */ - (behavior: 'set maxDate', date: Date | string): JQuery; + (behavior: 'set maxDate', date: Date | string | null): JQuery; (behavior: 'destroy'): JQuery; @@ -214,7 +214,7 @@ declare namespace FomanticUI { * * @default null */ - initialDate: null | Date; + initialDate: Date | string | null; /** * Display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day'). @@ -319,12 +319,14 @@ declare namespace FomanticUI { * * @default false */ - selectAdjacentDays: 5 | 10 | 15 | 20 | 30; + selectAdjacentDays: boolean; popupOptions: Calendar.PopupSettings; text: Calendar.TextSettings; + formatter: Calendar.FormatterSettings; + // endregion // region Callbacks @@ -333,12 +335,12 @@ declare namespace FomanticUI { * Is called before a calendar date changes. 'return false;' will cancel the change. * @since 2.8.0 */ - onBeforeChange(this: JQuery): void; + onBeforeChange(this: JQuery, date?: Date, text?: string, mode?: string): void; /** * Is called after a calendar date has changed. */ - onChange(this: JQuery): void; + onChange(this: JQuery, date?: Date): void; /** * Is called before a calendar is shown. 'return false;' will prevent the calendar to be shown. @@ -364,7 +366,7 @@ declare namespace FomanticUI { * Is called when a cell of the calendar is selected providing its value and current mode. * 'return false;' will prevent the selection. */ - onSelect(this: JQuery, date: Date, mode: string): void; + onSelect(this: JQuery, date?: Date, mode?: string): void; // endregion @@ -436,6 +438,7 @@ declare namespace FomanticUI { namespace Calendar { type PopupSettings = Partial>; type TextSettings = Partial>; + type FormatterSettings = Partial>; type SelectorSettings = Partial>; type ClassNameSettings = Partial>; type RegExpSettings = Partial>; @@ -471,6 +474,16 @@ declare namespace FomanticUI { */ days: string[]; + /** + * @default ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] + */ + dayNamesShort: string[]; + + /** + * @default ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] + */ + dayNames: string[]; + /** * @default ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] */ @@ -507,6 +520,78 @@ declare namespace FomanticUI { weekNo: string; } + interface Formatters { + /** + * + */ + yearHeader(date: Date, settings?: CalendarSettings): string; + + /** + * @default 'YYYY' + */ + monthHeader: string; + + /** + * @default 'MMMM YYYY' + */ + dayHeader: string; + + /** + * @default 'MMMM D, YYYY' + */ + hourHeader: string; + + /** + * @default 'MMMM D, YYYY' + */ + minuteHeader: string; + + /** + * @default 'MMMM D, YYYY' + */ + dayColumnHeader(day: number, settings: CalendarSettings): string; + + /** + * @default 'MMMM D, YYYY h:mm A' + */ + datetime: string; + + /** + * @default 'MMMM D, YYYY' + */ + date: string; + + /** + * @default 'h:mm A' + */ + time: string; + + /** + * @default 'h:mm A' + */ + cellTime: string; + + /** + * @default 'MMMM YYYY' + */ + month: string; + + /** + * @default 'YYYY' + */ + year: string; + + /** + * + */ + today(settings: CalendarSettings): string; + + /** + * + */ + cell(cell: string, date: Date, cellOptions: any): any + } + interface Selectors { /** * @default '.ui.popup' diff --git a/types/fomantic-ui-checkbox.d.ts b/types/fomantic-ui-checkbox.d.ts index 2bd2f7665e..6eac6a3618 100644 --- a/types/fomantic-ui-checkbox.d.ts +++ b/types/fomantic-ui-checkbox.d.ts @@ -32,6 +32,11 @@ declare namespace FomanticUI { */ (behavior: 'enable'): JQuery; + /** + * Disable interaction with a checkbox. + */ + (behavior: 'disable'): JQuery; + /** * Set a checkbox state to checked without callbacks. */ @@ -82,6 +87,11 @@ declare namespace FomanticUI { */ (behavior: 'is unchecked'): boolean; + /** + * Returns whether element is not determinate. + */ + (behavior: 'is indeterminate'): boolean; + /** * Returns whether element is able to be changed. */ @@ -175,22 +185,22 @@ declare namespace FomanticUI { /** * Callback before a checkbox is checked. Can cancel change by returning 'false'. */ - beforeChecked(this: JQuery): void | false; + beforeChecked(this: JQuery): void | Promise | boolean; /** * Callback before a checkbox is set to indeterminate. Can cancel change by returning 'false'. */ - beforeIndeterminate(this: JQuery): void | false; + beforeIndeterminate(this: JQuery): void | Promise | false; /** * Callback before a checkbox is set to determinate. Can cancel change by returning 'false'. */ - beforeDeterminate(this: JQuery): void | false; + beforeDeterminate(this: JQuery): void | Promise | false; /** * Callback before a checkbox is unchecked. Can cancel change by returning 'false'. */ - beforeUnchecked(this: JQuery): void | false; + beforeUnchecked(this: JQuery): void | Promise | false; /** * Callback after a checkbox is enabled. diff --git a/types/fomantic-ui-dropdown.d.ts b/types/fomantic-ui-dropdown.d.ts index 9fad69e068..7df6b05451 100644 --- a/types/fomantic-ui-dropdown.d.ts +++ b/types/fomantic-ui-dropdown.d.ts @@ -6,7 +6,7 @@ declare namespace FomanticUI { * Recreates dropdown menu from passed values. * values should be an object with the following structure: { values: [ {value, text, name} ] }. */ - (behavior: 'setup menu', values: object): void; + (behavior: 'setup menu', values: object): JQuery; /** * Changes dropdown to use new values. @@ -17,7 +17,7 @@ declare namespace FomanticUI { /** * Refreshes all cached selectors and data */ - (behavior: 'refresh'): void; + (behavior: 'refresh'): JQuery; /** * Toggles current visibility of dropdown @@ -29,20 +29,20 @@ declare namespace FomanticUI { * If a function is provided to callback, it's called after the dropdown-menu is shown. * Set preventFocus to true if you don't want the dropdown field to focus after the menu is shown */ - (behavior: 'show', callback: Function, preventFocus: boolean): void; + (behavior: 'show', callback?: Function, preventFocus?: boolean): void; /** * Hides dropdown. * If a function is provided to callback, it's called after the dropdown-menu is hidden. * Set preventBlur to true if you don't want the dropdown field to blur after the menu is hidden */ - (behavior: 'hide', callback:Function, preventBlur: boolean): void; + (behavior: 'hide', callback?: Function, preventBlur?: boolean): void; /** * Clears dropdown of selection. * Set preventChangeTrigger to true to omit the change event (default: false). */ - (behavior: 'clear', preventChangeTrigger: boolean): void; + (behavior: 'clear', preventChangeTrigger?: boolean): JQuery; /** * Hides all other dropdowns that is not current dropdown @@ -53,7 +53,7 @@ declare namespace FomanticUI { * Restores dropdown text and value to its value on page load. * Set preventChangeTrigger to true to omit the change event (default: false). */ - (behavior: 'restore defaults', preventChangeTrigger: boolean): void; + (behavior: 'restore defaults', preventChangeTrigger?: boolean): void; /** * Restores dropdown text to its value on page load @@ -79,33 +79,28 @@ declare namespace FomanticUI { * Sets value as selected. * Set preventChangeTrigger to true to omit the change event (default: false). */ - (behavior: 'set selected', value: string, preventChangeTrigger: boolean): void; + (behavior: 'set selected', value: string | string[], preventChangeTrigger?: boolean, keepSearchTerm?: boolean): JQuery; /** * Remove value from selected */ (behavior: 'remove selected', value: string): void; - /** - * Adds a group of values as selected - */ - (behavior: 'set selected', values: string[]): void; - /** * Sets selected values to exactly specified values, removing current selection */ - (behavior: 'set exactly', values: string[]): void; + (behavior: 'set exactly', values: string[]): JQuery; /** * Sets dropdown text to a value */ - (behavior: 'text', text: string): void; + (behavior: 'set text', text: string): JQuery; /** * Sets dropdown input to value (does not update display state). * Set preventChangeTrigger to true to omit the change event (default: false). */ - (behavior: 'set value', value: string, preventChangeTrigger: boolean): void; + (behavior: 'set value', value: string, preventChangeTrigger?: boolean): JQuery; /** * Returns current dropdown text @@ -265,7 +260,7 @@ declare namespace FomanticUI { * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} * @default false */ - apiSettings: false | APISettings | JQueryAjaxSettings; + apiSettings: false | Partial> | Partial>; /** * Whether dropdown should select new option when using keyboard shortcuts. @@ -506,7 +501,7 @@ declare namespace FomanticUI { * Is called after a dropdown value changes. * Receives the name and value of selection and the active menu element. */ - onChange(value: string, text: string, $choice: JQuery): void; + onChange(value?: string, text?: string, $choice?: JQuery): void; /** * Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value. diff --git a/types/fomantic-ui-flyout.d.ts b/types/fomantic-ui-flyout.d.ts index fae2110b74..b99f15a180 100644 --- a/types/fomantic-ui-flyout.d.ts +++ b/types/fomantic-ui-flyout.d.ts @@ -48,6 +48,11 @@ declare namespace FomanticUI { */ (behavior: 'get settings'): FlyoutSettings; + /** + * Templates handling + */ + (behavior: keyof Flyout.TemplatesSettings, ...args: any): Partial>; + (behavior: 'destroy'): JQuery; (behavior: 'setting', name: K, value?: undefined, ): Partial>; (behavior: 'setting', name: K, value: FlyoutSettings[K]): JQuery; @@ -145,43 +150,43 @@ declare namespace FomanticUI { * Content of the flyout header. * @default '' */ - title: boolean; + title: string; /** * Content of the flyout content. * @default '' */ - content: boolean; + content: string; /** * Can hold a string to be added to the flyout class to control its appearance. * @default '' */ - class: boolean; + class: string; /** * Can hold a string to be added to the title class to control its appearance. * @default '' */ - classTitle: boolean; + classTitle: string; /** * Can hold a string to be added to the content class to control its appearance. * @default '' */ - classContent: boolean; + classContent: string; /** * Can hold a string to be added to the actions class to control its appearance. * @default '' */ - classActions: boolean; + classActions: string; /** * Can hold a string to be added to the actions class to control its appearance. * @default false */ - closeIcon: boolean; + closeIcon: boolean | string; /** * An array of objects. Each object defines an action with properties `text`, `class`, `icon` and `click`. @@ -261,6 +266,8 @@ declare namespace FomanticUI { // region Config Template Settings + templates: Flyout.TemplatesSettings; + // endregion // region Debug Settings @@ -311,6 +318,7 @@ declare namespace FomanticUI { type ClassNameSettings = Partial>; type RegExpSettings = Partial>; type ErrorSettings = Partial>; + type TemplatesSettings = Partial> & {[key: string]: (...args: any) => Partial>}; namespace Settings { interface Selectors { @@ -520,6 +528,12 @@ declare namespace FomanticUI { */ notFound: string; } + + interface Templates { + alert(): Partial>; + confirm(): Partial>; + prompt(): Partial>; + } } } } diff --git a/types/fomantic-ui-form.d.ts b/types/fomantic-ui-form.d.ts index 0381724ff2..c7451552ea 100644 --- a/types/fomantic-ui-form.d.ts +++ b/types/fomantic-ui-form.d.ts @@ -15,7 +15,12 @@ declare namespace FomanticUI { /** * Adds rule to existing rules for field, also aliased as 'add field'. */ - (behavior: 'add rule', field: string, rules: object[]): void; + (behavior: 'add rule', field: string, rules: string | string[] | FormField[]): void; + + /** + * Adds field object to existing fields. + */ + (behavior: 'add field', name: string, rules: string | string[] | FormRule[]): void; /** * Adds fields object to existing fields. @@ -25,13 +30,18 @@ declare namespace FomanticUI { /** * Removes specific rule from field leaving other rules. */ - (behavior: 'remove rule', field: string, rules: object[]): void; + (behavior: 'remove rule', field: string, rules?: object[]): void; /** * Remove all validation for a field. */ (behavior: 'remove field', field: string): void; + /** + * Remove all validation for an array of fields. + */ + (behavior: 'remove fields', field: string[]): void; + /** * Returns 'true'/'false' whether a field passes its validation rules. * If you add 'true' as the second parameter, any failed rule will update the UI. @@ -41,7 +51,7 @@ declare namespace FomanticUI { /** * Validates form, updates UI, and calls 'onSuccess' or 'onFailure'. */ - (behavior: 'validate form'): void; + (behavior: 'validate form'): boolean; /** * Validates field, updates UI, and calls 'onSuccess' or 'onFailure'. @@ -62,7 +72,7 @@ declare namespace FomanticUI { * Returns object of element values that match array of identifiers. * If no IDS are passed will return all fields. */ - (behavior: 'get values', identifiers?: string[]): object; + (behavior: 'get values', identifiers?: string[]): Record; /** * Sets value of element with id. @@ -97,23 +107,33 @@ declare namespace FomanticUI { /** * Adds a custom user prompt for a given element with identifier. */ - (behavior: 'add prompt', identifier: string, errors: object[]): void; + (behavior: 'add prompt', identifier: string, errors: string | object[]): void; /** * Empty all fields and remove possible errors. */ - (behavior: 'clear'): void; + (behavior: 'clear'): JQuery; /** * Set all fields to their initial value and remove possible errors. */ - (behavior: 'reset'): void; + (behavior: 'reset'): JQuery; /** * Set fields actual values as default values. */ (behavior: 'set defaults'): void; + /** + * Returns 'true'/'false' whether a form is dirty. + */ + (behavior: 'is dirty'): boolean; + + /** + * Returns 'true'/'false' whether a form is clean. + */ + (behavior: 'is clean'): boolean; + /** * Return elements which have been modified since form state was changed to 'dirty'. */ @@ -122,7 +142,7 @@ declare namespace FomanticUI { /** * Set the state of the form to 'clean' and set new values as default. */ - (behavior: 'set as clean'): void; + (behavior: 'set as clean'): JQuery; /** * Automatically adds the "empty" rule or automatically checks a checkbox for all fields with classname or attribute 'required'. @@ -144,12 +164,33 @@ declare namespace FomanticUI { (settings?: Partial>): JQuery; } + type FormFields = Record; + + interface FormRule { + type: string; + prompt?: string | ((value: string) => void); + value?: string | RegExp; + } + + interface FormField { + identifier?: string; + depends?: string; + optional?: boolean; + rules: FormRule[]; + } + /** * @see {@link https://fomantic-ui.com/behaviors/form.html#/settings} */ interface FormSettings { // region Form Settings + /** + * Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively. + * @default false + */ + fields: false | FormFields; + /** * Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively. * @default true @@ -248,6 +289,12 @@ declare namespace FomanticUI { // endregion + // region Formatters + + rules: Form.RulesSettings; + + // endregion + // region Callbacks /** @@ -258,17 +305,17 @@ declare namespace FomanticUI { /** * Callback on each invalid field. */ - onInvalid(this: JQuery): void; + onInvalid(this: JQuery, fieldErrors: string | string[]): void; /** * Callback if a form is all valid. */ - onSuccess(this: JQuery, event: Event, fields: object[]): void; + onSuccess(this: JQuery, event: Event, fields: {[key: string]: any}): void; /** * Callback if any form field is invalid. */ - onFailure(this: JQuery, formErrors: object[], fields: object[]): void; + onFailure(this: JQuery, formErrors: {[key: string]: any}, fields: {[key: string]: any}): void; /** * Callback if form state is modified to 'dirty'. @@ -349,8 +396,9 @@ declare namespace FomanticUI { namespace Form { type TextSettings = Partial>; - type PromptSettings = Partial>; + type PromptSettings = Partial> & {[key: string]: string | undefined}; type FormatterSettings = Partial>; + type RulesSettings = Partial> & {[key: string]: (value?: any, identifier?: string, module?: any) => boolean}; type SelectorSettings = Partial>; type MetadataSettings = Partial>; type ClassNameSettings = Partial>; @@ -375,6 +423,21 @@ declare namespace FomanticUI { } interface Prompts { + /** + * @default '{name} must be in a range from {min} to {max}' + */ + range: string; + + /** + * @default '{name} must have a maximum value of {ruleValue}' + */ + maxValue: string; + + /** + * @default '{name} must have a minimum value of {ruleValue}' + */ + minValue: string; + /** * @default '{name} must have a value' */ @@ -509,6 +572,38 @@ declare namespace FomanticUI { year(date: string): string; } + interface Rules { + empty(value: unknown): boolean; + checked(): boolean; + email(value: unknown): boolean; + url(value: unknown): boolean; + regExp(value: unknown, regExp: RegExp): boolean; + minValue(value: unknown, range: string): boolean; + maxValue(value: unknown, range: string): boolean; + integer(value: unknown, range: string): boolean; + range(value: unknown, range: string, regExp: RegExp, testLength: boolean): boolean; + decimal(value: unknown, range: string): boolean; + number(value: unknown, range: string): boolean; + is(value: unknown, text: string): boolean; + isExactly(value: unknown, text: string): boolean; + not(value: unknown, notValue: unknown): boolean; + notExactly(value: unknown, notValue: unknown): boolean; + contains(value: unknown, text: string): boolean; + containsExactly(value: unknown, text: string): boolean; + doesntContain(value: unknown, text: string): boolean; + doesntContainExactly(value: unknown, text: string): boolean; + minLength(value: unknown, minLength: number): boolean; + exactLength(value: unknown, requiredLength: number): boolean; + maxLength(value: unknown, maxLength: number): boolean; + size(value: unknown, range: string): boolean; + match(value: unknown, identifier: string, module: unknown): boolean; + different(value: unknown, identifier: string, module: unknown): boolean; + creditCard(cardNumber: unknown, cardTypes: string): boolean; + minCount(value: unknown, minCount: number): boolean; + exactCount(value: unknown, exactCount: number): boolean; + maxCount(value: unknown, maxCount: number): boolean; + } + interface Selectors { /** * @default 'input[type="checkbox"], input[type="radio"]' diff --git a/types/fomantic-ui-modal.d.ts b/types/fomantic-ui-modal.d.ts index 9f900234db..bd23805c71 100644 --- a/types/fomantic-ui-modal.d.ts +++ b/types/fomantic-ui-modal.d.ts @@ -5,12 +5,12 @@ declare namespace FomanticUI { /** * Shows the modal. */ - (behavior: 'show'): JQuery; + (behavior: 'show', callback?: Function): JQuery; /** * Hides the modal. */ - (behavior: 'hide'): JQuery; + (behavior: 'hide', callback?: Function): JQuery; /** * Toggles the modal. @@ -62,6 +62,11 @@ declare namespace FomanticUI { */ (behavior: 'set active'): JQuery; + /** + * Templates handling + */ + (behavior: keyof Modal.TemplatesSettings, ...args: any): Partial>; + (behavior: 'destroy'): JQuery; (behavior: 'setting', name: K, value?: undefined, ): Partial>; (behavior: 'setting', name: K, value: ModalSettings[K]): JQuery; @@ -166,13 +171,13 @@ declare namespace FomanticUI { /** * Custom settings to extend UI dimmer. */ - dimmerSettings: DimmerSettings; + dimmerSettings: Partial>; /** * Custom settings to extend UI dimmer. * @default 'scale' */ - transition: string | TransitionSettings; + transition: string | Partial>; /** * Duration of animation. @@ -194,6 +199,62 @@ declare namespace FomanticUI { */ scrollbarWidth: number; + // dynamic content + + /** + * Title of dynamicly created modal. + * @default '' + */ + title: string; + + /** + * HTML content of dynamicly created modal. + * @default '' + */ + content: string; + + /** + * CSS classname(s) of dynamicly created modal. + * @default '' + */ + class: string; + + /** + * CSS classname(s) of dynamicly created modal's title. + * @default '' + */ + classTitle: string; + + /** + * CSS classname(s) of dynamicly created modal's content. + * @default '' + */ + classContent: string; + + /** + * CSS classname(s) of dynamicly created modal's actions. + * @default '' + */ + classActions: string; + + /** + * Determine if a close icon shoud be displayed on dynamicly created modal. + * @default false + */ + closeIcon: boolean; + + /** + * + * @default false + */ + actions: any; + + /** + * + * @default true + */ + preserveHTML: boolean; + // endregion // region Callbacks @@ -250,6 +311,8 @@ declare namespace FomanticUI { // region Config Template Settings + templates: Modal.TemplatesSettings; + // endregion // region Debug Settings @@ -299,6 +362,7 @@ declare namespace FomanticUI { type SelectorSettings = Partial>; type ClassNameSettings = Partial>; type ErrorSettings = Partial>; + type TemplatesSettings = Partial> & {[key: string]: (...args: any) => Partial>}; namespace Settings { interface Selectors { @@ -466,6 +530,12 @@ declare namespace FomanticUI { */ notFound: string; } + + interface Templates { + alert(): Partial>; + confirm(): Partial>; + prompt(): Partial>; + } } } } diff --git a/types/fomantic-ui-nag.d.ts b/types/fomantic-ui-nag.d.ts index 0f10437e39..55123a0fda 100644 --- a/types/fomantic-ui-nag.d.ts +++ b/types/fomantic-ui-nag.d.ts @@ -26,7 +26,7 @@ declare namespace FomanticUI { (behavior: 'setting', name: K, value?: undefined, ): Partial>; (behavior: 'setting', name: K, value: NagSettings[K]): JQuery; (behavior: 'setting', value: Partial>): JQuery; - (settings?: NagSettings): Partial>; + (settings?: Partial>): JQuery; } /** diff --git a/types/fomantic-ui-popup.d.ts b/types/fomantic-ui-popup.d.ts index 62a040479c..0f924a1690 100644 --- a/types/fomantic-ui-popup.d.ts +++ b/types/fomantic-ui-popup.d.ts @@ -84,7 +84,7 @@ declare namespace FomanticUI { * This is useful for including a pre-formatted popup. * @default false */ - popup: false | string; + popup: false | string | JQuery; /** * Whether all other popups should be hidden when this popup is opened. @@ -266,39 +266,39 @@ declare namespace FomanticUI { /** * Callback on popup element creation, with created popup. */ - onCreate(this: JQuery): void; + onCreate(this: JQuery, element?: JQuery): void; /** * Callback immediately before Popup is removed from DOM. */ - onRemove(this: JQuery): void; + onRemove(this: JQuery, element?: JQuery): void; /** * Callback before popup is shown. * Returning 'false' from this callback will cancel the popup from showing. */ - onShow(this: JQuery): boolean; + onShow(this: JQuery, element?: JQuery): any; /** * Callback after popup is shown. */ - onVisible(this: JQuery): void; + onVisible(this: JQuery, element?: JQuery): void; /** * Callback before popup is hidden. * Returning 'false' from this callback will cancel the popup from hiding. */ - onHide(this: JQuery): boolean; + onHide(this: JQuery, element?: JQuery): any; /** * Callback after popup is hidden. */ - onHidden(this: JQuery): void; + onHidden(this: JQuery, element?: JQuery): void; /** * Callback after popup cannot be placed on screen. */ - onUnplaceable(this: JQuery): void; + onUnplaceable(this: JQuery, element?: JQuery): void; // endregion diff --git a/types/fomantic-ui-progress.d.ts b/types/fomantic-ui-progress.d.ts index a98614b9c6..567cba5f4f 100644 --- a/types/fomantic-ui-progress.d.ts +++ b/types/fomantic-ui-progress.d.ts @@ -208,6 +208,12 @@ declare namespace FomanticUI { */ precision: number; + /** + * Sets current overall percent. + * @default false + */ + percent: false | number; + /** * Setting a total value will make each call to increment get closer to this total (i.e. 1/20, 2/20 etc). * @default false diff --git a/types/fomantic-ui-search.d.ts b/types/fomantic-ui-search.d.ts index d3832a51a0..7c44066a97 100644 --- a/types/fomantic-ui-search.d.ts +++ b/types/fomantic-ui-search.d.ts @@ -10,7 +10,7 @@ declare namespace FomanticUI { /** * Displays message in search results with text, using template matching type. */ - (behavior: 'display message', text: string, type: string): JQuery; + (behavior: 'display message', text: string, type?: string): JQuery; /** * Cancels current remote search query. @@ -124,7 +124,7 @@ declare namespace FomanticUI { * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} * @default {} */ - apiSettings: APISettings | JQueryAjaxSettings; + apiSettings: Partial> | JQueryAjaxSettings; /** * Minimum characters to query for results. @@ -228,6 +228,24 @@ declare namespace FomanticUI { */ ignoreDiacritics: boolean; + /** + * Template to use (specified in settings.templates) + * @default 'standard' + */ + type: 'escape' | 'message' | 'category' | 'standard'; + + /** + * Field to display in standard results template + * @default '' + */ + displayField: string; + + /** + * Whether to add events to prompt automatically + * @default true + */ + automatic: boolean; + // endregion // region Callbacks @@ -237,13 +255,13 @@ declare namespace FomanticUI { * The first parameter includes the filtered response results for that element. * The function should return 'false' to prevent default action (closing search results and selecting value). */ - onSelect(this: JQuery, result: object, response: object): boolean; + onSelect(this: JQuery, result: object, response: object): any; /** * Callback after processing element template to add HTML to results. * Function should return 'false' to prevent default actions. */ - onResultsAdd(this: JQuery, html: string): boolean; + onResultsAdd(this: JQuery, html: string): void | boolean; /** * Callback on search query. @@ -352,24 +370,24 @@ declare namespace FomanticUI { namespace Settings { interface Templates { /** - * @default function(string) + * @default function(string, preserveHTML) */ - escape: Function; + escape: (string: string, preserveHTML?: boolean) => string; /** - * @default function(message, type) + * @default function(message, type, header) */ - message: Function; + message: (message: string, type?: string, header?: string) => string; /** - * @default function(response) + * @default function(response, fields, preserveHTML) */ - category: Function; + category: (response: unknown, fields: {[key: string]: string}, preserveHTML?: boolean) => string; /** - * @default function(response) + * @default function(response, fields, preserveHTML) */ - standard: Function; + standard: (response: unknown, fields: {[key: string]: string}, preserveHTML?: boolean) => string; } interface Selectors { diff --git a/types/fomantic-ui-tab.d.ts b/types/fomantic-ui-tab.d.ts index 0f42e89a2d..01a6d94197 100644 --- a/types/fomantic-ui-tab.d.ts +++ b/types/fomantic-ui-tab.d.ts @@ -149,7 +149,7 @@ declare namespace FomanticUI { * Tabs are limited to those found inside this context. * @default false */ - context: false | string; + context: JQuery | string | false; /** * If enabled limits tabs to children of passed context. diff --git a/types/fomantic-ui-tests.ts b/types/fomantic-ui-tests.ts index af828e44ab..750cb88448 100644 --- a/types/fomantic-ui-tests.ts +++ b/types/fomantic-ui-tests.ts @@ -23,3 +23,165 @@ $().tab(); // $ExpectType JQuery $('body').toast(); // $ExpectType JQuery $().transition(); // $ExpectType JQuery $().visibility(); // $ExpectType JQuery + +/* Define API endpoints once globally */ +$.fn.api.settings.api = { + 'get followers' : '/followers/{id}?results={count}', + 'create user' : '/create', + 'add user' : '/add/{id}', + 'follow user' : '/follow/{id}', + 'search' : '/search/?query={value}' +}; + +$().calendar({ + today: true, + initialDate: null, + endCalendar: $() +}); // $ExpectType JQuery + +$.flyout('alert','hello'); // $ExpectType JQuery +$.flyout('confirm','Are you sure?',function(){}); // $ExpectType JQuery +$.flyout('prompt','Enter Code', function(){}); // $ExpectType JQuery + +$.fn.flyout.settings.templates.greet = function(username) { + return { + title: 'Greetings to ' + username + '!', + content: ''+ username.toUpperCase() + 'is the best!', + closeIcon: true, + class: 'inverted', + classContent: 'centered' + } +} + +$().form({ + fields: { + field1: { + rules: [ + { + type : 'empty' + } + ] + }, + field2: { + rules: [ + { + type : 'isExactly[dog]', + prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}' + } + ] + }, + field3: { + rules: [ + { + type : 'isExactly[cat]', + prompt : function(value) { + if(value == 'dog') { + return 'I told you to put cat, not dog!'; + } + return 'That is not cat'; + } + } + ] + }, + color: { + identifier: 'color', + rules: [{ + type: 'regExp', + value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i, + }] + }, + yearsPracticed: { + identifier : 'yearsPracticed', + depends : 'isDoctor', + rules : [ + { + type : 'empty', + prompt : 'Please enter the number of years you have been a doctor' + } + ] + }, + ccEmail: { + identifier : 'cc-email', + optional : true, + rules: [ + { + type : 'email', + prompt : 'Please enter a valid second e-mail' + } + ] + } + } +}); // $ExpectType JQuery + +$().form({ + fields: { + gender: 'empty', + name: 'empty', + password : ['minLength[6]', 'empty'] + } +}); // $ExpectType JQuery + +$.fn.form.settings.rules.date = function(str_date: string) { + return true; +}; + +$.modal('alert', { + title: 'Listen to me', + content: 'I love Fomantic-UI', + handler: function() { + $.toast({message:'Great!'}); + } +}); + +$.fn.modal.settings.templates.greet = function(username: string) { + // do something according to modals settings and/or given parameters + return { + title: 'Greetings to ' + username + '!', + content: ''+ username.toUpperCase() + 'is the best!', + class: 'inverted', + classContent: 'centered', + dimmerSettings: { + variation: 'inverted' + } + } +} + +$.modal('greet', 'mom'); + +$().nag({ + persist: true +}); // $ExpectType JQuery + +$().search("display message", "Hello, world !"); // $ExpectType JQuery + +// To change the defaults for all toast at once override the module as follows +$.fn.toast.settings.progressUp = true; +$.fn.toast.settings.class = 'info'; +$.fn.toast.settings.showIcon = true; +$.fn.toast.settings.className.box = 'toast-box'; //removes shadow +$.fn.toast.settings.className.title = 'header'; // smaller font size +$.fn.toast.settings.className.icon = 'icon'; // top position again +$.fn.toast.settings.transition.closeEasing = 'easeOutBounce'; + +// Or apply the old defaults directly to the toast +$.toast({ + title: 'LOOK', + message: 'Turned back time to 2.7.0 defaults', + showProgress: 'bottom', + //make it look like 2.7.0 + showIcon: true, + progressUp: true, + class: 'info', + className: { + box:'toast-box', + title:'header', + icon: 'icon' + }, + transition: { + closeEasing: 'easeOutBounce' + } +}); + +$().transition("shake", "200ms"); +$().transition("horizontal flip", 500, function() { alert('done!'); }); +$().transition("fade up"); \ No newline at end of file diff --git a/types/fomantic-ui-toast.d.ts b/types/fomantic-ui-toast.d.ts index 481403bbc3..3730506435 100644 --- a/types/fomantic-ui-toast.d.ts +++ b/types/fomantic-ui-toast.d.ts @@ -12,6 +12,11 @@ declare namespace FomanticUI { */ (behavior: 'animate continue'): JQuery; + /** + * Show the toast + */ + (behavior: 'show'): JQuery; + /** * Closes the toast */ @@ -273,7 +278,7 @@ declare namespace FomanticUI { /** * An array of objects. Each object defines an action with 'properties' 'text', 'class', 'icon' and 'click'. */ - actions: Toast.ActionsSettings; + actions: Toast.ActionsSettings[]; // endregion diff --git a/types/fomantic-ui-transition.d.ts b/types/fomantic-ui-transition.d.ts index 8a0edab45d..d08a8a4dea 100644 --- a/types/fomantic-ui-transition.d.ts +++ b/types/fomantic-ui-transition.d.ts @@ -112,6 +112,34 @@ declare namespace FomanticUI { */ (behavior: 'is supported'): boolean; + (behavior: 'scale', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'zoom', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'fade' | 'fade up' | 'fade down' | 'fade left' | 'fade right', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'horizontal flip' | 'vertical flip', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'drop', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'fly up' | 'fly down' | 'fly left' | 'fly right', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'swing up' | 'swing down' | 'swing left' | 'swing right', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'browse' | 'browse up' | 'browse down' | 'browse left' | 'browse right', duration?: any, onComplete?: () => any): JQuery; + + (behavior: 'slide up' | 'slide down' | 'slide left' | 'slide right', duration?: any, onComplete?: () => any): JQuery; + + // Static animations + (behavior: 'pulsating', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'jiggle', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'flash', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'shake', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'pulse', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'tada', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'bounce', duration?: any, onComplete?: () => any): JQuery; + (behavior: 'glow', duration?: any, onComplete?: () => any): JQuery; + /** * Destroys instance and removes all events. */ diff --git a/types/fomantic-ui-visibility.d.ts b/types/fomantic-ui-visibility.d.ts index 7580edeb8d..aa8b9db0d1 100644 --- a/types/fomantic-ui-visibility.d.ts +++ b/types/fomantic-ui-visibility.d.ts @@ -46,8 +46,8 @@ declare namespace FomanticUI { (behavior: 'destroy'): JQuery; (behavior: 'setting', name: K, value?: undefined, ): Partial>; (behavior: 'setting', name: K, value: VisibilitySettings[K]): JQuery; - (behavior: 'setting', value: VisibilitySettings): JQuery; - (settings?: VisibilitySettings): JQuery; + (behavior: 'setting', value: Partial>): JQuery; + (settings?: Partial>): JQuery; } /**