From 51f12e20b0f813ab58b4fdf3d1fdacc51e6baa9a Mon Sep 17 00:00:00 2001 From: prudho Date: Wed, 28 Dec 2022 09:44:43 +0100 Subject: [PATCH 1/3] feat: add type definitions --- package.json | 1 + types/fomantic-ui-accordion.d.ts | 250 +++++++++ types/fomantic-ui-api.d.ts | 607 +++++++++++++++++++++ types/fomantic-ui-calendar.d.ts | 732 +++++++++++++++++++++++++ types/fomantic-ui-checkbox.d.ts | 378 +++++++++++++ types/fomantic-ui-dimmer.d.ts | 485 +++++++++++++++++ types/fomantic-ui-dropdown.d.ts | 877 ++++++++++++++++++++++++++++++ types/fomantic-ui-embed.d.ts | 372 +++++++++++++ types/fomantic-ui-flyout.d.ts | 558 +++++++++++++++++++ types/fomantic-ui-form.d.ts | 780 ++++++++++++++++++++++++++ types/fomantic-ui-modal.d.ts | 542 ++++++++++++++++++ types/fomantic-ui-nag.d.ts | 319 +++++++++++ types/fomantic-ui-popup.d.ts | 619 +++++++++++++++++++++ types/fomantic-ui-progress.d.ts | 533 ++++++++++++++++++ types/fomantic-ui-rating.d.ts | 218 ++++++++ types/fomantic-ui-search.d.ts | 590 ++++++++++++++++++++ types/fomantic-ui-shape.d.ts | 316 +++++++++++ types/fomantic-ui-sidebar.d.ts | 478 ++++++++++++++++ types/fomantic-ui-slider.d.ts | 379 +++++++++++++ types/fomantic-ui-sticky.d.ts | 261 +++++++++ types/fomantic-ui-tab.d.ts | 427 +++++++++++++++ types/fomantic-ui-tests.ts | 23 + types/fomantic-ui-toast.d.ts | 595 ++++++++++++++++++++ types/fomantic-ui-transition.d.ts | 405 ++++++++++++++ types/fomantic-ui-visibility.d.ts | 422 ++++++++++++++ types/index.d.ts | 57 ++ types/tsconfig.json | 23 + types/tslint.json | 1 + 28 files changed, 11248 insertions(+) create mode 100644 types/fomantic-ui-accordion.d.ts create mode 100644 types/fomantic-ui-api.d.ts create mode 100644 types/fomantic-ui-calendar.d.ts create mode 100644 types/fomantic-ui-checkbox.d.ts create mode 100644 types/fomantic-ui-dimmer.d.ts create mode 100644 types/fomantic-ui-dropdown.d.ts create mode 100644 types/fomantic-ui-embed.d.ts create mode 100644 types/fomantic-ui-flyout.d.ts create mode 100644 types/fomantic-ui-form.d.ts create mode 100644 types/fomantic-ui-modal.d.ts create mode 100644 types/fomantic-ui-nag.d.ts create mode 100644 types/fomantic-ui-popup.d.ts create mode 100644 types/fomantic-ui-progress.d.ts create mode 100644 types/fomantic-ui-rating.d.ts create mode 100644 types/fomantic-ui-search.d.ts create mode 100644 types/fomantic-ui-shape.d.ts create mode 100644 types/fomantic-ui-sidebar.d.ts create mode 100644 types/fomantic-ui-slider.d.ts create mode 100644 types/fomantic-ui-sticky.d.ts create mode 100644 types/fomantic-ui-tab.d.ts create mode 100644 types/fomantic-ui-tests.ts create mode 100644 types/fomantic-ui-toast.d.ts create mode 100644 types/fomantic-ui-transition.d.ts create mode 100644 types/fomantic-ui-visibility.d.ts create mode 100644 types/index.d.ts create mode 100644 types/tsconfig.json create mode 100644 types/tslint.json diff --git a/package.json b/package.json index 83abadd8a2..9a5f685aeb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "license": "MIT", "author": "Jack Lukic ", "main": "dist/semantic.js", + "types": "./types/index.d.ts", "repository": { "type": "git", "url": "https://github.com/fomantic/Fomantic-UI.git" diff --git a/types/fomantic-ui-accordion.d.ts b/types/fomantic-ui-accordion.d.ts new file mode 100644 index 0000000000..8e4c0660ed --- /dev/null +++ b/types/fomantic-ui-accordion.d.ts @@ -0,0 +1,250 @@ +declare namespace FomanticUI { + interface Accordion { + settings: AccordionSettings; + + /** + * Refreshes all cached selectors and data. + */ + (behavior: 'refresh'): JQuery; + + /** + * Opens accordion content at index. + */ + (behavior: 'open', index: number): JQuery; + + /** + * Closes accordion content that are not active. + */ + (behavior: 'close others'): JQuery; + + /** + * Closes accordion content at index. + */ + (behavior: 'close', index: number): JQuery; + + /** + * Toggles accordion content at index. + */ + (behavior: 'toggle', index: number): JQuery; + + (behavior: 'destroy'): JQuery; + ( + behavior: 'setting', + name: K, + value?: undefined, + ): AccordionSettings._Impl[K]; + (behavior: 'setting', name: K, value: AccordionSettings._Impl[K]): JQuery; + (behavior: 'setting', value: AccordionSettings): JQuery; + (settings?: AccordionSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/accordion.html#/settings} + */ + type AccordionSettings = AccordionSettings.Param; + + namespace AccordionSettings { + type Param = Pick<_Impl, 'exclusive'> & Partial>; + + interface _Impl { + // region Accordion Settings + + /** + * Only allow one section open at a time. + * @default true + */ + exclusive: boolean; + + /** + * Event on 'title' that will cause accordion to open. + * @default 'click' + */ + on: string; + + /** + * Whether child content opacity should be animated (may cause performance issues with many child elements). + * @default true + */ + animateChildren: boolean; + + /** + * Close open nested accordion content when an element closes. + * @default true + */ + closeNested: boolean; + + /** + * Allow active sections to collapse. + * @default true + */ + collapsible: boolean; + + /** + * Duration in ms of opening animation. + * @default 500 + */ + duration: number; + + /** + * Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include easing equations. + * @see {@link http://gsgd.co.uk/sandbox/jquery/easing/} + * @default 'easeInOutQuint' + */ + easing: string; + + // endregion + + // region Callbacks + + /** + * Callback before element opens. + */ + onOpening(this: JQuery): void; + + /** + * Callback after element is open. + */ + onOpen(this: JQuery): void; + + /** + * Callback before element closes. + */ + onClosing(this: JQuery): void; + + /** + * Callback after element is closed. + */ + onClose(this: JQuery): void; + + /** + * Callback before element opens or closes. + */ + onChanging(this: JQuery): void; + + /** + * Callback before element opens or closes. + */ + onChange(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Accordion.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Accordion.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Accordion.ErrorSettings; + + // endregion + } + } + + namespace Accordion { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'accordion'> + | Pick<_Impl, 'title'> + | Pick<_Impl, 'trigger'> + | Pick<_Impl, 'content'> + ) & + Partial>; + + interface _Impl { + /** + * @default '.accordion' + */ + accordion: string; + + /** + * @default '.title' + */ + title: string; + + /** + * @default '.title' + */ + trigger: string; + + /** + * @default '.content' + */ + content: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'active'> | Pick<_Impl, 'animating'>) & Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'animating' + */ + animating: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = Pick<_Impl, 'method'> & Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + } + } + } +} diff --git a/types/fomantic-ui-api.d.ts b/types/fomantic-ui-api.d.ts new file mode 100644 index 0000000000..f1f269abf0 --- /dev/null +++ b/types/fomantic-ui-api.d.ts @@ -0,0 +1,607 @@ +declare namespace FomanticUI { + interface API { + settings: APISettings; + + /** + * Execute query using existing API settings. + */ + (behavior: 'query'): JQuery; + + /** + * Adds data to existing templated url and returns full url string. + */ + (behavior: 'add url data', url: string, data: any): JQuery; + + /** + * Gets promise for current API request. + */ + (behavior: 'get request'): JQuery; + + /** + * Aborts current API request. + */ + (behavior: 'abort'): JQuery; + + /** + * Returns whether last request was cancelled. + */ + (behavior: 'was cancelled'): boolean; + + /** + * Returns whether last request was failure. + */ + (behavior: 'was failure'): boolean; + + /** + * Returns whether last request was successful. + */ + (behavior: 'was successful'): boolean; + + /** + * Returns whether last request was completed. + */ + (behavior: 'was complete'): boolean; + + /** + * Returns whether element is disabled. + */ + (behavior: 'is disabled'): boolean; + + /** + * Returns whether element response is mocked. + */ + (behavior: 'is mocked'): boolean; + + /** + * Returns whether element is loading. + */ + (behavior: 'is loading'): boolean; + + /** + * Sets loading state to element. + */ + (behavior: 'set loading'): void; + + /** + * Sets error state to element. + */ + (behavior: 'set error'): void; + + /** + * Removes loading state to element. + */ + (behavior: 'remove loading'): void; + + /** + * Removes error state to element. + */ + (behavior: 'remove error'): void; + + /** + * Gets event that API request will occur on. + */ + (behavior: 'get event'): string; + + /** + * Returns 'encodeURIComponent' value only if value passed is not already encoded. + */ + (behavior: 'get url encoded value', value: any): string; + + /** + * Reads a locally cached response for a URL. + */ + (behavior: 'read cached response', url: string): any; + + /** + * Writes a cached response for a URL. + */ + (behavior: 'write cached response', url: string, response: any): void; + + /** + * Creates new cache, removing all locally cached URLs. + */ + (behavior: 'create cache'): void; + + /** + * Removes API settings from the page and all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): APISettings._Impl[K]; + (behavior: 'setting', name: K, value: APISettings._Impl[K]): JQuery; + (behavior: 'setting', value: APISettings): JQuery; + (settings?: APISettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + */ + type APISettings = APISettings.Param; + + namespace APISettings { + type Param = ( + | Pick<_Impl, 'on'> + | Pick<_Impl, 'cache'> + | Pick<_Impl, 'stateContext'> + | Pick<_Impl, 'encodeParameters'> + | Pick<_Impl, 'defaultData'> + | Pick<_Impl, 'serializeForm'> + | Pick<_Impl, 'throttle'> + | Pick<_Impl, 'throttleFirstRequest'> + | Pick<_Impl, 'interruptRequests'> + | Pick<_Impl, 'loadingDuration'> + | Pick<_Impl, 'hideError'> + | Pick<_Impl, 'errorDuration'> + | Pick<_Impl, 'action'> + | Pick<_Impl, 'url'> + | Pick<_Impl, 'base'> + | Pick<_Impl, 'urlData'> + | Pick<_Impl, 'response'> + | Pick<_Impl, 'responseAsync'> + | Pick<_Impl, 'mockResponse'> + | Pick<_Impl, 'mockResponseAsync'> + | Pick<_Impl, 'rawResponse'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'dataType'> + | Pick<_Impl, 'data'> + | Pick<_Impl, 'beforeSend'> + | Pick<_Impl, 'beforeXHR'> + | Pick<_Impl, 'onRequest'> + | Pick<_Impl, 'onResponse'> + | Pick<_Impl, 'successTest'> + | Pick<_Impl, 'onSuccess'> + | Pick<_Impl, 'onComplete'> + | Pick<_Impl, 'onFailure'> + | Pick<_Impl, 'onError'> + | Pick<_Impl, 'onAbort'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'errors'> + ) & + Partial>; + + interface _Impl { + // region API Settings + + /** + * When API event should occur. + * @default 'auto' + */ + on: 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. + * Setting to 'false', will add cache busting parameters to the URL. + * @default true + */ + cache: boolean | 'local'; + + /** + * UI state will be applied to this element, defaults to triggering element. + * @default this + */ + stateContext: string | JQuery; + + /** + * Whether to encode parameters with 'encodeURIComponent' before adding into url string. + * @default true + */ + encodeParameters: boolean; + + /** + * Whether to automatically include default data like {value} and {text}. + * @default true + */ + defaultData: boolean; + + /** + * Whether to serialize closest form and include in request. + * @default false + */ + serializeForm: boolean; + + /** + * How long to wait when a request is made before triggering request, useful for rate limiting 'oninput'. + * @default 0 + */ + throttle: number; + + /** + * When set to false will not delay the first request made, when no others are queued. + * @default true + */ + throttleFirstRequest: boolean; + + /** + * Whether an API request can occur while another request is still pending. + * @default false + */ + interruptRequests: boolean; + + /** + * Minimum duration to show loading indication. + * @default 0 + */ + loadingDuration: number; + + /** + * The default 'auto' will automatically remove error state after error duration, unless the element is a 'form'. + * @default 'auto' + */ + hideError: 'auto' | boolean; + + /** + * Setting to 'true', will not remove error. Setting to a duration in milliseconds to show error state after request error. + * @default 2000 + */ + errorDuration: true | number; + + // endregion + + // region API Settings + + /** + * Named API action for query, originally specified in '$.fn.settings.api'. + * @default false + */ + action: string | false; + + /** + * Templated URL for query, will override specified action. + * @default false + */ + url: string | false; + + /** + * base URL to apply to all endpoints. Will be prepended to each given url. + * @default '' + */ + base: string; + + /** + * Variables to use for replacement. + * @default false + */ + urlData: any; + + /** + * Can be set to a Javascript object which will be returned automatically instead of requesting JSON from server. + * @default false + */ + response: any; + + /** + * When specified, this function can be used to retrieve content from a server and return it asynchronously instead of a standard AJAX call. + * The callback function should return the server response. + * @default false + */ + responseAsync: ((settings: APISettings, callback: (response: any) => void) => void) | false; + + /** + * Alias of 'response'. + * @default false + */ + mockResponse: any; + + /** + * Alias of 'responseAsync'. + * @default false + */ + mockResponseAsync: ((settings: APISettings, callback: (response: any) => void) => void) | false; + + /** + * If set, the onResponse event handler is able to handle an raw Array Object, which is probably returned by the requested source. + * Even if the datatype is json, it won't be force converted into an object anymore then. + * @default false + */ + rawResponse: boolean; + + /** + * Method for transmitting request to server. + * @default 'get' + */ + method: 'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch'; + + /** + * Expected data type of response. + * @default 'json' + */ + dataType: 'xml' | 'json' | 'jsonp' | 'script' | 'html' | 'text'; + + /** + * Expected data type of response. + * @default {} + */ + data: any; + + // endregion + + // region Callbacks + + /** + * Allows modifying settings before request, or cancelling request. + */ + beforeSend(settings: APISettings): any; + + /** + * Allows modifying XHR object for request. + */ + beforeXHR(xhrObject: JQuery.jqXHR): any; + + /** + * Callback that occurs when request is made. Receives both the API success promise and the XHR request promise. + */ + onRequest(promise: JQuery.Deferred, xhr: JQuery.jqXHR): void; + + /** + * Allows modifying the server's response before parsed by other callbacks to determine API event success. + */ + onResponse(response: any): void; + + /** + * Determines whether completed JSON response should be treated as successful. + * + * @see {@link http://fomantic-ui.com/behaviors/api.html#determining-json-success} + */ + successTest(response: any): boolean; + + /** + * Callback after successful response, JSON response must pass 'successTest'. + */ + onSuccess(response: any, element: JQuery, xhr: JQuery.jqXHR): void; + + /** + * Callback on request complete regardless of conditions. + */ + onComplete(response: any, element: JQuery, xhr: JQuery.jqXHR): void; + + /** + * Callback on failed response, or JSON response that fails 'successTest'. + */ + onFailure(response: any, element: JQuery): void; + + /** + * Callback on server error from returned status code, or XHR failure. + */ + onError(errorMessage: string, element: JQuery, xhr: JQuery.jqXHR): void; + + /** + * Callback on abort caused by user clicking a link or manually cancelling request. + */ + onAbort(errorMessage: string, element: JQuery, xhr: JQuery.jqXHR): void; + + // endregion + + // region DOM Settings + + /** + * Selectors used to find parts of a module. + */ + selector: API.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: API.ClassNameSettings; + + /** + * Regular expressions used for template matching. + */ + regExp: API.RegExpSettings; + + /** + * Metadata used to store XHR and response promise. + */ + metadata: API.MetadataSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements. + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console. + */ + debug: boolean; + + /** + * Show 'console.table' output with performance metrics. + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors. + */ + verbose: boolean; + + errors: API.ErrorSettings; + + // endregion + } + + namespace API { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'disabled'> | Pick<_Impl, 'form'>) & Partial>; + + interface _Impl { + /** + * @default '.disabled' + */ + disabled: string; + + /** + * @default 'form' + */ + form: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'loading'> | Pick<_Impl, 'error'>) & Partial>; + + interface _Impl { + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'error' + */ + error: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = (Pick<_Impl, 'required'> | Pick<_Impl, 'optional'>) & Partial>; + + interface _Impl { + /** + * @default /\{\$*[A-z0-9]+\}/g + */ + required: RegExp; + + /** + * @default /\{\/\$*[A-z0-9]+\}/g + */ + optional: RegExp; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = (Pick<_Impl, 'action'> | Pick<_Impl, 'url'>) & Partial>; + + interface _Impl { + /** + * @default 'action' + */ + action: string; + + /** + * @default 'url' + */ + url: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'beforeSend'> + | Pick<_Impl, 'error'> + | Pick<_Impl, 'exitConditions'> + | Pick<_Impl, 'JSONParse'> + | Pick<_Impl, 'legacyParameters'> + | Pick<_Impl, 'missingAction'> + | Pick<_Impl, 'missingSerialize'> + | Pick<_Impl, 'missingURL'> + | Pick<_Impl, 'noReturnedValue'> + | Pick<_Impl, 'parseError'> + | Pick<_Impl, 'requiredParameter'> + | Pick<_Impl, 'statusMessage'> + | Pick<_Impl, 'timeout'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'The before send function has aborted the request.' + */ + beforeSend: string; + + /** + * @default 'There was an error with your request.' + */ + error: string; + + /** + * @default 'API Request Aborted. Exit conditions met.' + */ + exitConditions: string; + + /** + * @default 'JSON could not be parsed during error handling.' + */ + JSONParse: string; + + /** + * @default 'You are using legacy API success callback names.' + */ + legacyParameters: string; + + /** + * @default 'API action used but no url was defined.' + */ + missingAction: string; + + /** + * @default 'Required dependency jquery-serialize-object missing, using basic serialize.' + */ + missingSerialize: string; + + /** + * @default 'No URL specified for API event.' + */ + missingURL: string; + + /** + * @default 'The beforeSend callback must return a settings object, beforeSend ignored.' + */ + noReturnedValue: string; + + /** + * @default 'There was an error with your request.' + */ + parseError: string; + + /** + * @default 'Missing a required URL parameter: ' + */ + requiredParameter: string; + + /** + * @default 'Server gave an error: ' + */ + statusMessage: string; + + /** + * @default 'Your request timed out.' + */ + timeout: string; + } + } + } + } +} diff --git a/types/fomantic-ui-calendar.d.ts b/types/fomantic-ui-calendar.d.ts new file mode 100644 index 0000000000..01cbf47cd3 --- /dev/null +++ b/types/fomantic-ui-calendar.d.ts @@ -0,0 +1,732 @@ +declare namespace FomanticUI { + interface Calendar { + settings: CalendarSettings; + + (behavior: 'refresh' | 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): CalendarSettings._Impl[K]; + (behavior: 'setting', name: K, value: CalendarSettings._Impl[K]): JQuery; + (behavior: 'setting', value: CalendarSettings): JQuery; + (settings?: CalendarSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/calendar.html#/settings} + */ + type CalendarSettings = CalendarSettings.Param; + + namespace CalendarSettings { + type Param = ( + | Pick<_Impl, 'type'> + | Pick<_Impl, 'firstDayOfWeek'> + | Pick<_Impl, 'constantHeight'> + | Pick<_Impl, 'today'> + | Pick<_Impl, 'closable'> + | Pick<_Impl, 'monthFirst'> + | Pick<_Impl, 'touchReadonly'> + | Pick<_Impl, 'inline'> + | Pick<_Impl, 'showWeekNumbers'> + | Pick<_Impl, 'disabledDaysOfWeek'> + | Pick<_Impl, 'disabledDates'> + | Pick<_Impl, 'enabledDates'> + | Pick<_Impl, 'eventDates'> + | Pick<_Impl, 'eventClass'> + | Pick<_Impl, 'on'> + | Pick<_Impl, 'initialDate'> + | Pick<_Impl, 'startMode'> + | Pick<_Impl, 'minDate'> + | Pick<_Impl, 'maxDate'> + | Pick<_Impl, 'ampm'> + | Pick<_Impl, 'disableYear'> + | Pick<_Impl, 'disableMonth'> + | Pick<_Impl, 'disableMinute'> + | Pick<_Impl, 'formatInput'> + | Pick<_Impl, 'startCalendar'> + | Pick<_Impl, 'endCalendar'> + | Pick<_Impl, 'multiMonth'> + | Pick<_Impl, 'minTimeGap'> + | Pick<_Impl, 'centuryBreak'> + | Pick<_Impl, 'currentCentury'> + | Pick<_Impl, 'selectAdjacentDays'> + | Pick<_Impl, 'popupOptions'> + | Pick<_Impl, 'onBeforeChange'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onSelect'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Toast Settings + + /** + * Picker type, can be 'datetime', 'date', 'time', 'month', or 'year'. + * + * @default 'datetime' + */ + type: 'datetime' | 'date' | 'time' | 'month' | 'year'; + + /** + * Day for first day column (0 = Sunday). + * + * @default 0 + */ + firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7; + + /** + * Add row(s) to shorter months to keep day calendar height consistent (6 rows). + * + * @default 'true' + */ + constantHeight: boolean; + + /** + * Show a 'today/now' button at the bottom of the calendar. + * + * @default false + */ + today: boolean; + + /** + * Close the popup after selecting a date/time. + * + * @default false + */ + closable: true; + + /** + * Month before day when parsing/converting date from/to text. + * + * @default true + */ + monthFirst: boolean; + + /** + * Set input to readonly on touch devices. + * + * @default true + */ + touchReadonly: boolean; + + /** + * Create the calendar inline instead of inside a popup. + * + * @default false + */ + inline: boolean; + + /** + * Display the week number on the left. + * + * @default false + */ + showWeekNumbers: boolean; + + /** + * Disable some days of the week from selection (0= Sunday, 1=Monday, ...). + * + * @default [] + */ + disabledDaysOfWeek: number[]; + + /** + * An array of Date-Objects or Objects with given message to show in a popup when hovering over the appropriate date '{date: Date, message: string}'. + * + * @default [] + */ + disabledDates: object[]; + + /** + * An array of Date-Objects to be enabled for selection. All other dates are disabled. + * + * @default [] + */ + enabledDates: object[]; + + /** + * An array of Date-Objects or Objects with given message to show in a popup when hovering over the appropriate date + * and an individual class for the cell '{date: Date, message: string, class: string}'. + * + * @default [] + */ + eventDates: object[]; + + /** + * Default class to be added to each cell of an eventDate date element when no specific class is given to the eventDate element. + * + * @default 'blue' + */ + eventClass: string; + + /** + * Choose when to show the popup (defaults to 'focus' for input, 'click' for others). + * + * @default null + */ + on: null | 'focus' | 'click'; + + /** + * Date to display initially when no date is selected (null = now). + * + * @default null + */ + initialDate: null | Date; + + /** + * Display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day'). + * + * @default false + */ + startMode: false | 'year' | 'month' | 'day' | 'hour' | 'minute'; + + /** + * Minimum date/time that can be selected, dates/times before are disabled. + * + * @default null + */ + minDate: null | Date; + + /** + * Maximum date/time that can be selected, dates/times after are disabled. + * + * @default null + */ + maxDate: null | Date; + + /** + * Show am/pm in time mode. + * + * @default true + */ + ampm: boolean; + + /** + * Disable year selection mode. + * + * @default false + */ + disableYear: boolean; + + /** + * Disable month selection mode. + * + * @default false + */ + disableMonth: boolean; + + /** + * Disable minute selection mode. + * + * @default false + */ + disableMinute: boolean; + + /** + * Format the input text upon input blur and module creation. + * + * @default true + */ + formatInput: boolean; + + /** + * jQuery object or selector for another calendar that represents the start date of a date range. + * + * @default null + */ + startCalendar: null | JQuery | string; + + /** + * jQuery object or selector for another calendar that represents the end date of a date range. + * + * @default null + */ + endCalendar: null | JQuery | string; + + /** + * Show multiple months when in 'day' mode. + * + * @default 1 + */ + multiMonth: number; + + /** + * Minimum time gap, can only be 5, 10, 15, 20, 30. + * + * @default 5 + */ + minTimeGap: 5 | 10 | 15 | 20 | 30; + + /** + * Starting short year until 99 where it will be assumed to belong to the last century. + * + * @default 60 + */ + centuryBreak: number; + + /** + * Century to be added to 2-digit years (00 to 'centuryBreak' -1). + * + * @default 2000 + */ + currentCentury: number; + + /** + * Make adjacent days from previous and next month also selectable. + * + * @default false + */ + selectAdjacentDays: 5 | 10 | 15 | 20 | 30; + + popupOptions: Calendar.PopupSettings; + + text: Calendar.TextSettings; + + // endregion + + // region Callbacks + + /** + * Is called before a calendar date changes. 'return false;' will cancel the change. + * @since 2.8.0 + */ + onBeforeChange(this: JQuery): void; + + /** + * Is called after a calendar date has changed. + */ + onChange(this: JQuery): void; + + /** + * Is called before a calendar is shown. 'return false;' will prevent the calendar to be shown. + */ + onShow(this: JQuery): void; + + /** + * Is called when the calendar is shown. + */ + onVisible(this: JQuery): void; + + /** + * Is called before a calendar is hidden. 'return false;' will prevent the calendar to be hidden. + */ + onHide(this: JQuery): void; + + /** + * Is called when the calendar is hidden. + */ + onHidden(this: JQuery): void; + + /** + * 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; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * If the calendars parent node matches the append selector, the calendar is appended to the input field instead of prepended. + */ + selector: Calendar.SelectorSettings; + + /** + * Class names used to attach style to state. + */ + className: Calendar.ClassNameSettings; + + /** + * Icon names used internally. + */ + regExp: Calendar.RegExpSettings; + + metadata: Calendar.MetadataSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Calendar.ErrorSettings; + + // endregion + } + } + + namespace Calendar { + type PopupSettings = PopupSettings.Param; + + namespace PopupSettings { + type Param = ( + | Pick<_Impl, 'position'> + | Pick<_Impl, 'lastResort'> + | Pick<_Impl, 'prefer'> + | Pick<_Impl, 'hideOnScroll'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'bottom left' + */ + position: string; + + /** + * @default 'bottom left' + */ + lastResort: string; + + /** + * @default 'opposite' + */ + prefer: string; + + /** + * @default false + */ + hideOnScroll: boolean; + } + } + + type TextSettings = TextSettings.Param; + + namespace TextSettings { + type Param = ( + | Pick<_Impl, 'days'> + | Pick<_Impl, 'months'> + | Pick<_Impl, 'monthsShort'> + | Pick<_Impl, 'today'> + | Pick<_Impl, 'now'> + | Pick<_Impl, 'am'> + | Pick<_Impl, 'pm'> + ) & + Partial>; + + interface _Impl { + /** + * @default ['S', 'M', 'T', 'W', 'T', 'F', 'S'] + */ + days: string[]; + + /** + * @default ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] + */ + months: string[]; + + /** + * @default ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + */ + monthsShort: string[]; + + /** + * @default 'Today' + */ + today: string; + + /** + * @default 'Now' + */ + now: string; + + /** + * @default 'AM' + */ + am: string; + + /** + * @default 'PM' + */ + pm: boolean; + } + } + + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'popup'> + | Pick<_Impl, 'input'> + | Pick<_Impl, 'activator'> + | Pick<_Impl, 'append'> + ) & + Partial>; + + interface _Impl { + /** + * @default '.ui.popup' + */ + popup: string; + + /** + * @default 'input' + */ + input: string; + + /** + * @default 'input' + */ + activator: string; + + /** + * @default '.inline.field,.inline.fields' + */ + append: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'calendar'> + | Pick<_Impl, 'active'> + | Pick<_Impl, 'popup'> + | Pick<_Impl, 'grid'> + | Pick<_Impl, 'column'> + | Pick<_Impl, 'table'> + | Pick<_Impl, 'prev'> + | Pick<_Impl, 'next'> + | Pick<_Impl, 'prevIcon'> + | Pick<_Impl, 'nextIcon'> + | Pick<_Impl, 'link'> + | Pick<_Impl, 'cell'> + | Pick<_Impl, 'disabledCell'> + | Pick<_Impl, 'weekCell'> + | Pick<_Impl, 'adjacentCell'> + | Pick<_Impl, 'activeCell'> + | Pick<_Impl, 'rangeCell'> + | Pick<_Impl, 'focusCell'> + | Pick<_Impl, 'todayCell'> + | Pick<_Impl, 'today'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'calendar' + */ + calendar: string; + + /** + * @default 'active' + */ + active: string; + + /** + * @default 'ui popup' + */ + popup: string; + + /** + * @default 'ui equal width grid' + */ + grid: string; + + /** + * @default 'column' + */ + column: string; + + /** + * @default 'ui celled center aligned unstackable table' + */ + table: string; + + /** + * @default 'prev link' + */ + prev: string; + + /** + * @default 'next link' + */ + next: string; + + /** + * @default 'chevron left icon' + */ + prevIcon: string; + + /** + * @default 'chevron right icon' + */ + nextIcon: string; + + /** + * @default 'link' + */ + link: string; + + /** + * @default 'link' + */ + cell: string; + + /** + * @default 'disabled' + */ + disabledCell: string; + + /** + * @default 'disabled' + */ + weekCell: string; + + /** + * @default 'adjacent' + */ + adjacentCell: string; + + /** + * @default 'active' + */ + activeCell: string; + + /** + * @default 'range' + */ + rangeCell: string; + + /** + * @default 'focus' + */ + focusCell: string; + + /** + * @default 'today' + */ + todayCell: string; + + /** + * @default 'today link' + */ + today: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = (Pick<_Impl, 'dateWords'> | Pick<_Impl, 'dateNumbers'>) & Partial>; + + interface _Impl { + /** + * @default /[^A-Za-z\u00C0-\u024F]+/g + */ + dateWords: RegExp; + + /** + * @default /[^\d:]+/g + */ + dateNumbers: RegExp; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = ( + | Pick<_Impl, 'date'> + | Pick<_Impl, 'focusDate'> + | Pick<_Impl, 'startDate'> + | Pick<_Impl, 'endDate'> + | Pick<_Impl, 'mode'> + | Pick<_Impl, 'monthOffset'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'date' + */ + date: string; + + /** + * @default 'focusDate' + */ + focusDate: string; + + /** + * @default 'startDate' + */ + startDate: string; + + /** + * @default 'endDate' + */ + endDate: string; + + /** + * @default 'mode' + */ + mode: string; + + /** + * @default 'monthOffset' + */ + monthOffset: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'popup'> | Pick<_Impl, 'method'>) & Partial>; + + interface _Impl { + /** + * @default 'UI Popup, a required component is not included in this page.' + */ + popup: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + } + } + } +} diff --git a/types/fomantic-ui-checkbox.d.ts b/types/fomantic-ui-checkbox.d.ts new file mode 100644 index 0000000000..8512523e5f --- /dev/null +++ b/types/fomantic-ui-checkbox.d.ts @@ -0,0 +1,378 @@ +declare namespace FomanticUI { + interface Checkbox { + settings: CheckboxSettings; + + /** + * Switches a checkbox from current state. + */ + (behavior: 'toggle'): JQuery; + + /** + * Set a checkbox state to checked. + */ + (behavior: 'check'): JQuery; + + /** + * Set a checkbox state to unchecked. + */ + (behavior: 'uncheck'): JQuery; + + /** + * Set as indeterminate checkbox. + */ + (behavior: 'indeterminate'): JQuery; + + /** + * Set as determinate checkbox. + */ + (behavior: 'determinate'): JQuery; + + /** + * Enable interaction with a checkbox. + */ + (behavior: 'enable'): JQuery; + + /** + * Set a checkbox state to checked without callbacks. + */ + (behavior: 'set checked'): JQuery; + + /** + * Set a checkbox state to unchecked without callbacks. + */ + (behavior: 'set unchecked'): JQuery; + + /** + * Set as indeterminate checkbox without callbacks. + */ + (behavior: 'set indeterminate'): JQuery; + + /** + * Set as determinate checkbox without callbacks. + */ + (behavior: 'set determinate'): JQuery; + + /** + * Enable interaction with a checkbox without callbacks. + */ + (behavior: 'set enabled'): JQuery; + + /** + * Disable interaction with a checkbox without callbacks. + */ + (behavior: 'set disabled'): JQuery; + + /** + * Attach checkbox events to another element. + */ + (behavior: 'attach events', selector: string | JQuery, event?: string): JQuery; + + /** + * Returns whether element is radio selection. + */ + (behavior: 'is radio'): boolean; + + /** + * Returns whether element is currently checked. + */ + (behavior: 'is checked'): boolean; + + /** + * Returns whether element is not checked. + */ + (behavior: 'is unchecked'): boolean; + + /** + * Returns whether element is able to be changed. + */ + (behavior: 'can change'): boolean; + + /** + * Returns whether element is able to be unchecked. + */ + (behavior: 'can uncheck'): boolean; + + /** + * Returns whether element can be checked (checking if already checked or `beforeChecked` would cancel). + */ + (behavior: 'should allow check'): boolean; + + /** + * Returns whether element can be unchecked (checking if already unchecked or `beforeUnchecked` would cancel). + */ + (behavior: 'should allow uncheck'): boolean; + + /** + * Returns whether element can be determinate (checking if already determinate or `beforeDeterminate` would cancel). + */ + (behavior: 'should allow determinate'): boolean; + + /** + * Returns whether element can be indeterminate (checking if already indeterminate or `beforeIndeterminate` would cancel). + */ + (behavior: 'should allow indeterminate'): boolean; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): CheckboxSettings._Impl[K]; + (behavior: 'setting', name: K, value: CheckboxSettings._Impl[K]): JQuery; + (behavior: 'setting', value: CheckboxSettings): JQuery; + (settings?: CheckboxSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/checkbox.html#/settings} + */ + type CheckboxSettings = CheckboxSettings.Param; + + namespace CheckboxSettings { + type Param = ( + | Pick<_Impl, 'uncheckable'> + | Pick<_Impl, 'fireOnInit'> + | Pick<_Impl, 'enableEnterKey'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onChecked'> + | Pick<_Impl, 'onIndeterminate'> + | Pick<_Impl, 'onDeterminate'> + | Pick<_Impl, 'onUnchecked'> + | Pick<_Impl, 'beforeChecked'> + | Pick<_Impl, 'beforeIndeterminate'> + | Pick<_Impl, 'beforeDeterminate'> + | Pick<_Impl, 'beforeUnchecked'> + | Pick<_Impl, 'onEnable'> + | Pick<_Impl, 'onDisable'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'errors'> + ) & + Partial>; + + interface _Impl { + // region Checkbox Settings + + /** + * Setting to 'true'/'false' will determine whether an input will allow no selection. 'auto' will set disallow this behavior only for radio boxes. + * @default 'auto' + */ + uncheckable: 'auto' | boolean; + + /** + * Whether callbacks for checked status should be fired on init as well as change. + * @default false + */ + fireOnInit: boolean; + + /** + * Whether pressing the 'ENTER' Key on a focused checkbox should also toggle it. + * @default true + */ + enableEnterKey: boolean; + + // endregion + + // region Callbacks + + /** + * Callback after a checkbox is either checked or unchecked. + */ + onChange(this: JQuery): void; + + /** + * Callback after a checkbox is checked. + */ + onChecked(this: JQuery): void; + + /** + * Callback after a checkbox is set to indeterminate. + */ + onIndeterminate(this: JQuery): void; + + /** + * Callback after a checkbox is set to determinate. + */ + onDeterminate(this: JQuery): void; + + /** + * Callback after a checkbox is unchecked. + */ + onUnchecked(this: JQuery): void; + + /** + * Callback before a checkbox is checked. Can cancel change by returning 'false'. + */ + beforeChecked(this: JQuery): void | false; + + /** + * Callback before a checkbox is set to indeterminate. Can cancel change by returning 'false'. + */ + beforeIndeterminate(this: JQuery): void | false; + + /** + * Callback before a checkbox is set to determinate. Can cancel change by returning 'false'. + */ + beforeDeterminate(this: JQuery): void | false; + + /** + * Callback before a checkbox is unchecked. Can cancel change by returning 'false'. + */ + beforeUnchecked(this: JQuery): void | false; + + /** + * Callback after a checkbox is enabled. + */ + onEnable(this: JQuery): void; + + /** + * Callback after a checkbox is disabled. + */ + onDisable(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * Selectors used to find parts of a module. + */ + selector: Checkbox.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Checkbox.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + errors: Checkbox.ErrorSettings; + + // endregion + } + } + + namespace Checkbox { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'checkbox'> | Pick<_Impl, 'label'> | Pick<_Impl, 'input'> | Pick<_Impl, 'link'>) & + Partial>; + + interface _Impl { + /** + * @default '.ui.checkbox' + */ + checkbox: string; + + /** + * @default 'label' + */ + label: string; + + /** + * @default 'input[type="checkbox"], input[type="radio"]' + */ + input: string; + + /** + * @default 'a[href]' + */ + link: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'checked'> + | Pick<_Impl, 'indeterminate'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'hidden'> + | Pick<_Impl, 'radio'> + | Pick<_Impl, 'readOnly'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'checked' + */ + checked: string; + + /** + * @default 'indeterminate' + */ + indeterminate: string; + + /** + * @default 'disabled' + */ + disabled: string; + + /** + * @default 'hidden' + */ + hidden: string; + + /** + * @default 'radio' + */ + radio: string; + + /** + * @default 'readOnly' + */ + readOnly: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = Pick<_Impl, 'method'> & Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + } + } + } +} diff --git a/types/fomantic-ui-dimmer.d.ts b/types/fomantic-ui-dimmer.d.ts new file mode 100644 index 0000000000..bf806fba83 --- /dev/null +++ b/types/fomantic-ui-dimmer.d.ts @@ -0,0 +1,485 @@ +declare namespace FomanticUI { + interface Dimmer { + settings: DimmerSettings; + + /** + * Detaches a given element from DOM and reattaches element inside dimmer. + */ + (behavior: 'add content', element: string | JQuery): JQuery; + + /** + * Shows dimmer. + */ + (behavior: 'show'): JQuery; + + /** + * Hides dimmer. + */ + (behavior: 'hide'): JQuery; + + /** + * Toggles current dimmer visibility. + */ + (behavior: 'toggle'): JQuery; + + /** + * Changes dimmer opacity. + */ + (behavior: 'set opacity', opacity: number): JQuery; + + /** + * Creates a new dimmer in dimmable context. + */ + (behavior: 'create'): JQuery; + + /** + * Returns current duration for show or hide event depending on current visibility. + */ + (behavior: 'get duration'): number; + + /** + * Returns DOM element for dimmer. + */ + (behavior: 'get dimmer'): JQuery; + + /** + * Returns whether current dimmable has a dimmer. + */ + (behavior: 'has dimmer'): boolean; + + /** + * Whether section's dimmer is active. + */ + (behavior: 'is active'): boolean; + + /** + * Whether dimmer is animating. + */ + (behavior: 'is animating'): boolean; + + /** + * Whether current element is a dimmer. + */ + (behavior: 'is dimmer'): boolean; + + /** + * Whether current element is a dimmable section. + */ + (behavior: 'is dimmable'): boolean; + + /** + * Whether dimmer is disabled. + */ + (behavior: 'is disabled'): boolean; + + /** + * Whether dimmer is not disabled. + */ + (behavior: 'is enabled'): boolean; + + /** + * Whether dimmable section is 'body'. + */ + (behavior: 'is page'): boolean; + + /** + * Whether dimmer is a page dimmer. + */ + (behavior: 'is page dimmer'): boolean; + + /** + * Sets page dimmer to active. + */ + (behavior: 'set active'): JQuery; + + /** + * Sets an element as a dimmable section. + */ + (behavior: 'set dimmable'): JQuery; + + /** + * Sets a dimmable section as dimmed. + */ + (behavior: 'set dimmed'): JQuery; + + /** + * Sets current dimmer as a page dimmer. + */ + (behavior: 'set page dimmer'): JQuery; + + /** + * Sets a dimmer as disabled. + */ + (behavior: 'set disabled'): JQuery; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): DimmerSettings._Impl[K]; + (behavior: 'setting', name: K, value: DimmerSettings._Impl[K]): JQuery; + (behavior: 'setting', value: DimmerSettings): JQuery; + (settings?: DimmerSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/dimmer.html#/settings} + */ + type DimmerSettings = DimmerSettings.Param; + + namespace DimmerSettings { + type Param = ( + | Pick<_Impl, 'useFlex'> + | Pick<_Impl, 'dimmerName'> + | Pick<_Impl, 'variation'> + | Pick<_Impl, 'closable'> + | Pick<_Impl, 'useCSS'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'on'> + | Pick<_Impl, 'opacity'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'displayLoader'> + | Pick<_Impl, 'loaderText'> + | Pick<_Impl, 'loaderVariation'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'template'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Dimmer Settings + + /** + * Whether dimmers should use flex or legacy positioning. + * @default true + */ + useFlex: boolean; + + /** + * If initializing a dimmer on a 'dimmable' context, you can use 'dimmerName' to distinguish between multiple dimmers in that context. + * @default false + */ + dimmerName: string | boolean; + + /** + * Specify a variation to add when generating dimmer, like 'inverted'. + * @default false + */ + variation: string | boolean; + + /** + * Whether clicking on the dimmer should hide the dimmer (Defaults to 'auto', closable only when 'settings.on' is not 'hover'). + * @default 'auto' + */ + closable: 'auto' | boolean; + + /** + * Whether to dim dimmers using CSS transitions. + * @default true + */ + useCSS: boolean; + + /** + * Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions. + * Alternatively you can provide an object to set individual values for hide/show transitions as well as hide/show duration + * @default 'fade' + */ + transition: string | Dimmer.TransitionSettings; + + /** + * Can be set to 'hover' or 'click' to show/hide dimmer on dimmable event. + * @default false + */ + on: false | 'hover' | 'click'; + + /** + * Override the default opacity of the dimmer. + * @default 'auto' + */ + opacity: 'auto' | number; + + /** + * Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations. + * Will be ignored completely when individual hide/show duration values are provided via the 'transition' setting. + */ + duration: number | Dimmer.DurationSettings; + + /** + * Whether a custom loader should be generated inside the dimmer. + * @default false + */ + displayLoader: boolean; + + /** + * Additional css classes to style the loader. + * @see {@link https://fomantic-ui.com/elements/loader.html} + * @default '' + */ + loaderVariation: string; + + /** + * If a string is given, it will be shown underneath the loader animation icon. + * @default false + */ + loaderText: false | string; + + // endregion + + // region Callbacks + + /** + * Callback on element show or hide. + */ + onChange(this: JQuery): void; + + /** + * Callback on element show. + */ + onShow(this: JQuery): void; + + /** + * Callback on element hide. + */ + onHide(this: JQuery): void; + + /** + * Callback after element is visible. + */ + onVisible(this: JQuery): void; + + /** + * Callback after element is hidden. + */ + onHidden(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * Selectors used to find parts of a module. + */ + selector: Dimmer.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Dimmer.ClassNameSettings; + + /** + * Templates used to generate dimmer content. + */ + template: Dimmer.TemplateSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Dimmer.ErrorSettings; + + // endregion + } + } + + namespace Dimmer { + type DurationSettings = DurationSettings.Param; + + namespace DurationSettings { + type Param = (Pick<_Impl, 'show'> | Pick<_Impl, 'hide'>) & Partial>; + + interface _Impl { + /** + * @default 500 + */ + show: number; + + /** + * @default 500 + */ + hide: number; + } + } + + type TransitionSettings = TransitionSettings.Param; + + namespace TransitionSettings { + type Param = ( + | Pick<_Impl, 'showMethod'> + | Pick<_Impl, 'showDuration'> + | Pick<_Impl, 'hideMethod'> + | Pick<_Impl, 'hideDuration'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'fade' + */ + showMethod: string; + + /** + * @default 200 + */ + showDuration: number; + + /** + * @default 'zoom' + */ + hideMethod: string; + + /** + * @default 500 + */ + hideDuration: number; + } + } + + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'dimmable'> | Pick<_Impl, 'dimmer'> | Pick<_Impl, 'content'>) & + Partial>; + + interface _Impl { + /** + * @default '.dimmable' + */ + dimmable: string; + + /** + * @default '.ui.dimmer' + */ + dimmer: string; + + /** + * @default '.ui.dimmer > .content, .ui.dimmer > .content > .center' + */ + content: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'dimmable'> + | Pick<_Impl, 'dimmed'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'pageDimmer'> + | Pick<_Impl, 'hide'> + | Pick<_Impl, 'show'> + | Pick<_Impl, 'transition'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'dimmable' + */ + dimmable: string; + + /** + * @default 'dimmed' + */ + dimmed: string; + + /** + * @default 'disabled' + */ + disabled: string; + + /** + * @default 'page' + */ + pageDimmer: string; + + /** + * @default 'hide' + */ + hide: string; + + /** + * @default 'show' + */ + show: string; + + /** + * @default 'transition' + */ + transition: string; + } + } + + type TemplateSettings = TemplateSettings.Param; + + namespace TemplateSettings { + type Param = Pick<_Impl, 'dimmer'> & Partial>; + + interface _Impl { + /** + * Used to generate dimmer content. + */ + dimmer: JQuery; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = Pick<_Impl, 'method'> & Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + } + } + } +} diff --git a/types/fomantic-ui-dropdown.d.ts b/types/fomantic-ui-dropdown.d.ts new file mode 100644 index 0000000000..de31c20627 --- /dev/null +++ b/types/fomantic-ui-dropdown.d.ts @@ -0,0 +1,877 @@ +declare namespace FomanticUI { + interface Dropdown { + settings: DropdownSettings; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): DropdownSettings._Impl[K]; + (behavior: 'setting', name: K, value: DropdownSettings._Impl[K]): JQuery; + (behavior: 'setting', value: DropdownSettings): JQuery; + (settings?: DropdownSettings): JQuery; + } + + /** + * @see {@link http://fomantic-ui.com/modules/dropdown.html#/settings} + */ + type DropdownSettings = DropdownSettings.Param; + + namespace DropdownSettings { + type Param = ( + | Pick<_Impl, 'on'> + | Pick<_Impl, 'action'> + | Pick<_Impl, 'values'> + | Pick<_Impl, 'clearable'> + | Pick<_Impl, 'apiSettings'> + | Pick<_Impl, 'selectOnKeydown'> + | Pick<_Impl, 'minCharacters'> + | Pick<_Impl, 'filterRemoteData'> + | Pick<_Impl, 'saveRemoteData'> + | Pick<_Impl, 'throttle'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'direction'> + | Pick<_Impl, 'keepOnScreen'> + | Pick<_Impl, 'match'> + | Pick<_Impl, 'fullTextSearch'> + | Pick<_Impl, 'ignoreDiacritics'> + | Pick<_Impl, 'hideDividers'> + | Pick<_Impl, 'placeholder'> + | Pick<_Impl, 'preserveHTML'> + | Pick<_Impl, 'sortSelect'> + | Pick<_Impl, 'forceSelection'> + | Pick<_Impl, 'allowAdditions'> + | Pick<_Impl, 'ignoreCase'> + | Pick<_Impl, 'ignoreSearchCase'> + | Pick<_Impl, 'hideAdditions'> + | Pick<_Impl, 'maxSelections'> + | Pick<_Impl, 'useLabels'> + | Pick<_Impl, 'delimiter'> + | Pick<_Impl, 'showOnFocus'> + | Pick<_Impl, 'allowReselection'> + | Pick<_Impl, 'allowTab'> + | Pick<_Impl, 'allowCategorySelection'> + | Pick<_Impl, 'fireOnInit'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'displayType'> + | Pick<_Impl, 'glyphWidth'> + | Pick<_Impl, 'headerDivider'> + | Pick<_Impl, 'collapseOnActionable'> + | Pick<_Impl, 'label'> + | Pick<_Impl, 'delay'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onAdd'> + | Pick<_Impl, 'onRemove'> + | Pick<_Impl, 'onActionable'> + | Pick<_Impl, 'onSearch'> + | Pick<_Impl, 'onLabelSelect'> + | Pick<_Impl, 'onLabelCreate'> + | Pick<_Impl, 'onLabelRemove'> + | Pick<_Impl, 'onNoResults'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'message'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'fields'> + | Pick<_Impl, 'keys'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Dropdown Settings + + /** + * Event used to trigger dropdown (can be 'hover', 'click' or a custom event). + * @default 'click' + */ + on: string; + + /** + * Sets a default action to occur. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#/usage} + * @default 'auto' + */ + action: + | 'auto' + | 'activate' + | 'select' + | 'combo' + | 'nothing' + | 'hide' + | ((this: JQuery, text: string, value: string | false, element: JQuery) => void); + + /** + * When specified allows you to initialize dropdown with specific values. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#/usage} + * @default false + */ + values: any; + + /** + * Whether the dropdown value can be cleared by the user after being selected. + * @default false + */ + clearable: boolean; + + /** + * Can be set to an object to specify API settings for retrieving remote selection menu content from an API endpoint. + * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + * @default false + */ + apiSettings: false | ApiSettings; + + /** + * Whether dropdown should select new option when using keyboard shortcuts. + * Setting to 'false' will require 'enter' or left click to confirm a choice. + * @default true + */ + selectOnKeydown: boolean; + + /** + * The minimum characters for a search to begin showing results. + * @default 0 + */ + minCharacters: number; + + /** + * Whether results returned from API should be filtered by query before being displayed. + * @default false + */ + filterRemoteData: boolean; + + /** + * When enabled, will automatically store selected name/value pairs in 'sessionStorage' to preserve user selection on page refresh. + * Disabling will clear remote dropdown values on refresh. + * @default true + */ + saveRemoteData: boolean; + + /** + * How long to wait after last user input to search remotely. + * @default 200 + */ + throttle: number; + + /** + * Element context to use when checking whether can show when 'keepOnScreen: true'. + * @default 'window' + */ + context: string | JQuery; + + /** + * When set to 'auto' determines direction based on whether dropdown can fit on screen. + * Set to 'upward' or 'downward' to always force a direction. + * @default 'auto' + */ + direction: 'auto' | 'upward' | 'downward'; + + /** + * Whether dropdown should try to keep itself on screen by checking whether menus display position in its 'context' (Default context is page). + * @default true + */ + keepOnScreen: boolean; + + /** + * When using 'search selection' specifies how to match values. + * @default 'both' + */ + match: 'both' | 'value' | 'text'; + + /** + * Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to "false" will only match start of string. + * @default 'exact' + */ + fullTextSearch: boolean | 'exact'; + + /** + * When activated, searches will also match results for base diacritic letters. + * For example when searching for 'a', it will also match 'á' or 'â' or 'å' and so on... + * It will also ignore diacritics for the searchterm, so if searching for 'ó', it will match 'ó', but also 'o', 'ô' or 'õ' and so on... + * @default false + */ + ignoreDiacritics: boolean; + + /** + * How to handle dividers in the dropdown while searching. + * Dividers are defined as all siblings of items that match the 'divider selector'. + * @see {@link https://fomantic-ui.com/modules/dropdown.html#dom-settings} + * @default false + */ + hideDividers: boolean | 'empty'; + + /** + * + * @default 'auto' + */ + placeholder: 'auto' | String | false; + + /** + * Whether HTML included in dropdown values should be preserved. + * Allows icons to show up in selected value. + * @default true + */ + preserveHTML: boolean; + + /** + * Whether to sort values when creating a dropdown automatically from a select element. + * @default false + */ + sortSelect: boolean | 'natural' | Function; + + /** + * Whether search selection will force currently selected choice when element is blurred. + * If a 'select' tag with a required attribute was used, the 'forceSelection' setting will be set to 'true' automatically. + * @default false + */ + forceSelection: boolean; + + /** + * Whether search selection should allow users to add their own selections, works for single or multiselect. + * @default false + */ + allowAdditions: boolean; + + /** + * Whether values with non matching cases should be treated as identical when adding them to a dropdown. + * @default false + */ + ignoreCase: boolean; + + /** + * Whether values with non matching cases should be treated as identical when filtering the items. + * @default true + */ + ignoreSearchCase: boolean; + + /** + * If disabled user additions will appear in the dropdown's menu using a specially formatted selection item formatted by 'templates.addition'. + * @default true + */ + hideAdditions: boolean; + + /** + * When set to a number, sets the maximum number of selections. + * @default false + */ + maxSelections: false | number; + + /** + * Whether multiselect should use labels. Must be set to 'true' when 'allowAdditions' is 'true'. + * @default true + */ + useLabels: boolean; + + /** + * When multiselect uses normal input tag, the values will be delimited with this character. + * Also used as the keyboard shortcut while entering multiple values. + * @default ',' + */ + delimiter: string; + + /** + * Whether to show dropdown menu automatically on element focus. + * @default false + */ + showOnFocus: boolean; + + /** + * When set to 'true' will fire 'onChange' even when the value a user select matches the currently selected value. + * @default false + */ + allowReselection: boolean; + + /** + * Whether to allow the element to be navigable by keyboard, by automatically creating a 'tabindex'. + * @default true + */ + allowTab: boolean; + + /** + * Whether menu items with sub-menus (categories) should be selectable. + * @default false + */ + allowCategorySelection: boolean; + + /** + * Whether callbacks should fire when initializing dropdown values. + * @default false + */ + fireOnInit: boolean; + + /** + * Named transition to use when animating menu in and out. + * Defaults to 'slide down' or 'slide up' depending on dropdown direction. Fade and slide down are available without including 'ui transitions'. + * + * Alternatively you can provide an 'object' to set individual values for hide/show transitions as well as hide/show duration. + * @default 'auto' + */ + transition: boolean | object; + + /** + * Duration of animation events. + * The value will be ignored when individual hide/show duration values are provided via the 'transition' setting. + * @default 200 + */ + duration: number; + + /** + * Specify the final transition display type ('block', 'inline-block' etc) so that it doesn't have to be calculated. + * @default false + */ + displayType: false | string; + + /** + * Maximum glyph width, used to calculate search size. + * This is usually size of a "W" in your font in 'em'. + * @default 1.037 + */ + glyphWidth: number; + + /** + * Whether option headers should have an additional divider line underneath when converted from ' requires multiple property to be set to correctly preserve multiple values' + */ + missingMultiple: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'The API module is required to load resources remotely' + */ + noAPI: string; + + /** + * @default 'Saving remote data requires session storage' + */ + noStorage: string; + + /** + * @default 'This module requires ui transitions' + */ + noTransition: string; + + /** + * @default '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including as a polyfill.' + */ + noNormalize: string; + } + } + } +} diff --git a/types/fomantic-ui-embed.d.ts b/types/fomantic-ui-embed.d.ts new file mode 100644 index 0000000000..3d7cd118db --- /dev/null +++ b/types/fomantic-ui-embed.d.ts @@ -0,0 +1,372 @@ +declare namespace FomanticUI { + interface Embed { + settings: EmbedSettings; + + /** + * Changes iframe to a new content source. + */ + (behavior: 'change', source: string, id: string, url: string): JQuery; + + /** + * Removes embed and shows placeholder content if available. + */ + (behavior: 'reset'): JQuery; + + /** + * Shows embed content. + */ + (behavior: 'show'): JQuery; + + /** + * Hides embed content and shows placeholder content. + */ + (behavior: 'hide'): JQuery; + + /** + * Returns current content id. + */ + (behavior: 'get id'): string; + + /** + * Returns placeholder image url. + */ + (behavior: 'get placeholder'): string; + + /** + * Returns source name. + */ + (behavior: 'get sources'): string; + + /** + * Returns source type. + */ + (behavior: 'get sources'): string; + + /** + * Returns URL with all parameters added. + */ + (behavior: 'get url'): string; + + /** + * Returns whether embed content has placeholder. + */ + (behavior: 'has placeholder'): boolean; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): EmbedSettings._Impl[K]; + (behavior: 'setting', name: K, value: EmbedSettings._Impl[K]): JQuery; + (behavior: 'setting', value: EmbedSettings): JQuery; + (settings?: EmbedSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/embed.html#/settings} + */ + type EmbedSettings = EmbedSettings.Param; + + namespace EmbedSettings { + type Param = ( + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'source'> + | Pick<_Impl, 'url'> + | Pick<_Impl, 'id'> + | Pick<_Impl, 'parameters'> + | Pick<_Impl, 'autoplay'> + | Pick<_Impl, 'color'> + | Pick<_Impl, 'hd'> + | Pick<_Impl, 'brandedUI'> + | Pick<_Impl, 'onCreate'> + | Pick<_Impl, 'onDisplay'> + | Pick<_Impl, 'onPlaceholderDisplay'> + | Pick<_Impl, 'onEmbed'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'templates'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Embed Settings + + /** + * Specifies an icon to use with placeholder content. + * @default false + */ + icon: false | string; + + /** + * Specifies a source to use, if no source is provided it will be determined from the domain of a specified url. + * @default false + */ + source: false | string; + + /** + * Specifies a url to use for embed. + * @default false + */ + url: false | string; + + /** + * Specifies an id value to replace with the '{id}' value found in templated urls. + * @default false + */ + id: false | string; + + /** + * Specify an object containing key/value pairs to add to the iframes GET parameters. + * @default false + */ + parameters: false | object; + + // endregion + + // region Video Settings + + /** + * Default setting 'auto' will only autoplay content when a placeholder is specified. + * Setting to 'true' or 'false' will force autoplay. + * @default 'auto' + */ + autoplay: 'auto' | boolean; + + /** + * Default setting 'auto' will only autoplay content when a placeholder is specified. + * Setting to 'true' or 'false' will force autoplay. + * @default '#444444' + */ + color: string; + + /** + * Whether to prefer HD content. + * @default true + */ + hd: boolean; + + /** + * Whether to show networks branded UI like title cards, or after video calls to action. + * @default false + */ + brandedUI: boolean; + + // endregion + + // region Callbacks + + /** + * Callback when iframe is generated. + */ + onCreate(this: JQuery, url: string): void; + + /** + * Whenever an iframe contents is shown. + */ + onDisplay(this: JQuery): void; + + /** + * Callback immediately before Embed is removed from DOM. + */ + onPlaceholderDisplay(this: JQuery): void; + + /** + * Callback when module parameters are determined. + * Allows you to adjust parameters at run time by returning a new parameters object. + */ + onEmbed(this: JQuery, parameters: object): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Embed.SelectorSettings; + + /** + * HTML Data attributes used to store data. + */ + metadata: Embed.MetadataSettings; + + /** + * Class names used to determine element state. + */ + className: Embed.ClassNameSettings; + + /** + * + */ + templates: Embed.TemplateSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Embed.ErrorSettings; + + // endregion + } + + namespace Embed { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'embed'> | Pick<_Impl, 'placeholder'> | Pick<_Impl, 'play'>) & + Partial>; + + interface _Impl { + /** + * @default '.embed' + */ + embed: string; + + /** + * @default '.placeholder' + */ + placeholder: string; + + /** + * @default '.play' + */ + play: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = ( + | Pick<_Impl, 'id'> + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'placeholder'> + | Pick<_Impl, 'source'> + | Pick<_Impl, 'url'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'id' + */ + id: string; + + /** + * @default 'icon' + */ + icon: string; + + /** + * @default 'placeholder' + */ + placeholder: string; + + /** + * @default 'source' + */ + source: string; + + /** + * @default 'url' + */ + url: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'active'> | Pick<_Impl, 'embed'>) & Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'embed' + */ + embed: string; + } + } + + type TemplateSettings = TemplateSettings.Param; + + namespace TemplateSettings { + type Param = (Pick<_Impl, 'iframe'> | Pick<_Impl, 'placeholder'>) & Partial>; + + interface _Impl { + /** + * @default function + */ + iframe: Function; + + /** + * @default function + */ + placeholder: Function; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'noURL'> | Pick<_Impl, 'method'>) & Partial>; + + interface _Impl { + /** + * @default 'No URL specified' + */ + noURL: string; + + /** + * @default 'The method you called is not defined' + */ + method: string; + } + } + } + } +} diff --git a/types/fomantic-ui-flyout.d.ts b/types/fomantic-ui-flyout.d.ts new file mode 100644 index 0000000000..380e3ae603 --- /dev/null +++ b/types/fomantic-ui-flyout.d.ts @@ -0,0 +1,558 @@ +declare namespace FomanticUI { + interface Flyout { + settings: FlyoutSettings; + + /** + * Attaches flyout action to given selector. + * Default event if none specified is toggle. + */ + (behavior: 'attach events', selector: JQuery, event: Function): JQuery; + + /** + * Shows the flyout. + */ + (behavior: 'show'): JQuery; + + /** + * Hides the flyout. + */ + (behavior: 'hide'): JQuery; + + /** + * Toggles the flyout. + */ + (behavior: 'toggle'): JQuery; + + /** + * Hides all other displayed flyouts. + */ + (behavior: 'hide others'): JQuery; + + /** + * Returns whether the flyout is visible. + */ + (behavior: 'is visible'): boolean; + + /** + * Returns whether the flyout is hidden. + */ + (behavior: 'is hidden'): boolean; + + /** + * Returns direction of current flyout. + */ + (behavior: 'get direction'): string; + + /** + * Returns current flyout's settings. + */ + (behavior: 'get settings'): FlyoutSettings; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): FlyoutSettings._Impl[K]; + (behavior: 'setting', name: K, value: FlyoutSettings._Impl[K]): JQuery; + (behavior: 'setting', value: FlyoutSettings): JQuery; + (settings?: FlyoutSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/flyout.html#/settings} + */ + type FlyoutSettings = FlyoutSettings.Param; + + namespace FlyoutSettings { + type Param = ( + | Pick<_Impl, 'context'> + | Pick<_Impl, 'exclusive'> + | Pick<_Impl, 'closable'> + | Pick<_Impl, 'dimPage'> + | Pick<_Impl, 'blurring'> + | Pick<_Impl, 'autofocus'> + | Pick<_Impl, 'restoreFocus'> + | Pick<_Impl, 'keyboardShortcuts'> + | Pick<_Impl, 'scrollLock'> + | Pick<_Impl, 'returnScroll'> + | Pick<_Impl, 'delaySetup'> + | Pick<_Impl, 'autoShow'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onApprove'> + | Pick<_Impl, 'onDeny'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Accordion Settings + + /** + * Selector or jquery object specifying the area to dim. + * @default 'body' + */ + context: string | JQuery; + + /** + * Opening another flyout will dismiss the one displayed. + * Set to 'true' to allow multiple flyout at the same time. + * @default false + */ + exclusive: boolean; + + /** + * Setting to 'false' will not allow you to close the flyout by clicking on the dimmer. + * @default true + */ + closable: boolean; + + /** + * Whether to dim 'context' contents when flyout is visible. + * @default true + */ + dimPage: boolean; + + /** + * If dimmer should blur background. + * @default false + */ + blurring: boolean; + + /** + * When 'true', the first form input inside the flyout will receive focus when shown. + * Set this to 'false' to prevent this behavior. + * @default true + */ + autofocus: boolean; + + /** + * When 'false', the last focused element, before the flyout was shown, will not get refocused again when the flyout hides. + * This could prevent unwanted scrolling behaviors after closing a flyout. + * @default true + */ + keyboardShortcuts: boolean; + + /** + * Whether to automatically bind keyboard shortcuts. + * This will close the flyout when the 'ESC-key' is pressed. + * @default true + */ + restoreFocus: boolean; + + /** + * Whether to lock page scroll when flyout is visible. + * @default false + */ + scrollLock: boolean; + + /** + * Whether to return to original scroll position when flyout is hidden. + * @default false + */ + returnScroll: boolean; + + /** + * When flyout is initialized without the proper HTML, using this option will defer creation of DOM to use 'requestAnimationFrame'. + * @default false + */ + delaySetup: boolean; + + /** + * When 'true', immediately shows the flyout at instantiation time. + * @default false + */ + autoShow: boolean; + + // endregion + + // region Callbacks + + /** + * Is called when a flyout is either shown or hidden. + */ + onChange(this: JQuery): void; + + /** + * Is called when a flyout starts to show. + */ + onShow(this: JQuery): void; + + /** + * Is called after a flyout starts to hide. + */ + onHide(this: JQuery): void; + + /** + * Is called after a flyout has finished showing animating. + */ + onVisible(this: JQuery): void; + + /** + * Is called after a flyout has finished hiding animation. + */ + onHidden(this: JQuery): void; + + /** + * Is called after a positive, approve or ok button is pressed. + * If the function returns 'false', the flyout will not hide. + */ + onApprove(this: JQuery): void; + + /** + * Is called after a negative, deny or cancel button is pressed. + * If the function 'returns' false, the flyout will not hide. + */ + onDeny(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Flyout.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Flyout.ClassNameSettings; + + /** + * + */ + regExp: Flyout.RegExpSettings; + + // endregion + + // region Config Template Settings + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Flyout.ErrorSettings; + + // endregion + } + } + + namespace Flyout { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'fixed'> + | Pick<_Impl, 'omitted'> + | Pick<_Impl, 'pusher'> + | Pick<_Impl, 'flyout'> + | Pick<_Impl, 'header'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'actions'> + | Pick<_Impl, 'close'> + | Pick<_Impl, 'approve'> + | Pick<_Impl, 'deny'> + ) & + Partial>; + + interface _Impl { + /** + * @default '.fixed' + */ + fixed: string; + + /** + * @default 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed' + */ + omitted: string; + + /** + * @default '.pusher' + */ + pusher: string; + + /** + * @default '.ui.flyout' + */ + flyout: string; + + /** + * @default '.ui.header' + */ + header: string; + + /** + * @default '.content' + */ + content: string; + + /** + * @default '.actions' + */ + actions: string; + + /** + * @default '.close' + */ + close: string; + + /** + * @default '.actions .positive, .actions .approve, .actions .ok' + */ + approve: string; + + /** + * @default '.actions .negative, .actions .deny, .actions .cancel' + */ + deny: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'flyout'> + | Pick<_Impl, 'close'> + | Pick<_Impl, 'header'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'actions'> + | Pick<_Impl, 'active'> + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'dimmed'> + | Pick<_Impl, 'ios'> + | Pick<_Impl, 'pushable'> + | Pick<_Impl, 'pushed'> + | Pick<_Impl, 'right'> + | Pick<_Impl, 'top'> + | Pick<_Impl, 'left'> + | Pick<_Impl, 'bottom'> + | Pick<_Impl, 'visible'> + | Pick<_Impl, 'overlay'> + | Pick<_Impl, 'fullscreen'> + | Pick<_Impl, 'template'> + | Pick<_Impl, 'button'> + | Pick<_Impl, 'ok'> + | Pick<_Impl, 'cancel'> + | Pick<_Impl, 'prompt'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'ui flyout' + */ + flyout: string; + + /** + * @default 'close icon' + */ + close: string; + + /** + * @default 'ui header' + */ + header: string; + + /** + * @default 'content' + */ + content: string; + + /** + * @default 'actions' + */ + actions: string; + + /** + * @default 'active' + */ + active: string; + + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'dimmed' + */ + dimmed: string; + + /** + * @default 'ios' + */ + ios: string; + + /** + * @default 'pushable' + */ + pushable: string; + + /** + * @default 'pushed' + */ + pushed: string; + + /** + * @default 'right' + */ + right: string; + + /** + * @default 'top' + */ + top: string; + + /** + * @default 'left' + */ + left: string; + + /** + * @default 'bottom' + */ + bottom: string; + + /** + * @default 'visible' + */ + visible: string; + + /** + * @default 'overlay' + */ + overlay: string; + + /** + * @default 'fullscreen' + */ + fullscreen: string; + + /** + * @default 'ui flyout' + */ + template: string; + + /** + * @default 'ui button' + */ + button: string; + + /** + * @default 'positive' + */ + ok: string; + + /** + * @default 'negative' + */ + cancel: string; + + /** + * @default 'ui fluid input' + */ + prompt: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = (Pick<_Impl, 'ios'> | Pick<_Impl, 'mobileChrome'> | Pick<_Impl, 'mobile'>) & + Partial>; + + interface _Impl { + /** + * @default /(iPad|iPhone|iPod)/g + */ + ios: RegExp; + + /** + * @default /(CriOS)/g + */ + mobileChrome: RegExp; + + /** + * @default /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g + */ + mobile: RegExp; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'method'> + | Pick<_Impl, 'pusher'> + | Pick<_Impl, 'movedFlyout'> + | Pick<_Impl, 'notFound'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element' + */ + pusher: string; + + /** + * @default 'Had to move flyout. For optimal performance make sure flyout and pusher are direct children of your body tag' + */ + movedFlyout: string; + + /** + * @default 'There were no elements that matched the specified selector' + */ + notFound: string; + } + } + } +} diff --git a/types/fomantic-ui-form.d.ts b/types/fomantic-ui-form.d.ts new file mode 100644 index 0000000000..4f38fa59d0 --- /dev/null +++ b/types/fomantic-ui-form.d.ts @@ -0,0 +1,780 @@ +declare namespace FomanticUI { + interface Form { + settings: FormSettings; + + /** + * Submits selected form. + */ + (behavior: 'submit'): void; + + /** + * Returns 'true'/'false' whether a form passes its validation rules. + */ + (behavior: 'is valid'): boolean; + + /** + * Adds rule to existing rules for field, also aliased as 'add field'. + */ + (behavior: 'add rule', field: string, rules: object[]): void; + + /** + * Adds fields object to existing fields. + */ + (behavior: 'add fields', fields: object[]): void; + + /** + * Removes specific rule from field leaving other rules. + */ + (behavior: 'remove rule', field: string, rules: object[]): void; + + /** + * Remove all validation for a field. + */ + (behavior: 'remove field', 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. + */ + (behavior: 'is valid', fieldName: string, showErrors: boolean): boolean; + + /** + * Validates form, updates UI, and calls 'onSuccess' or 'onFailure'. + */ + (behavior: 'validate form'): void; + + /** + * Validates field, updates UI, and calls 'onSuccess' or 'onFailure'. + */ + (behavior: 'validate field', fieldName: string): void; + + /** + * Returns element with matching name, id, or data-validate metadata to identifier. + */ + (behavior: 'get field', identifier: string): string; + + /** + * Returns value of element with id. + */ + (behavior: 'get value', identifier: string): string; + + /** + * 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; + + /** + * Sets value of element with id. + */ + (behavior: 'set value', identifier: string, value: string): void; + + /** + * Sets key/value pairs from passed values object to matching identifiers. + */ + (behavior: 'set values', values: object[]): JQuery; + + /** + * Returns validation rules for a given jQuery-referenced input field. + */ + (behavior: 'get validation', element: JQuery): object; + + /** + * Returns whether a field exists. + */ + (behavior: 'has field', identifier: string): boolean; + + /** + * Manually add errors to form, given an array errors. + */ + (behavior: 'add errors', errors: object[]): void; + + /** + * Removes all current errors from the error message box. + */ + (behavior: 'remove errors'): void; + + /** + * Adds a custom user prompt for a given element with identifier. + */ + (behavior: 'add prompt', identifier: string, errors: object[]): void; + + /** + * Empty all fields and remove possible errors. + */ + (behavior: 'clear'): void; + + /** + * Set all fields to their initial value and remove possible errors. + */ + (behavior: 'reset'): void; + + /** + * Set fields actual values as default values. + */ + (behavior: 'set defaults'): void; + + /** + * Return elements which have been modified since form state was changed to 'dirty'. + */ + (behavior: 'get dirty fields'): string[]; + + /** + * Set the state of the form to 'clean' and set new values as default. + */ + (behavior: 'set as clean'): void; + + /** + * Automatically adds the "empty" rule or automatically checks a checkbox for all fields with classname or attribute 'required'. + */ + (behavior: 'set auto check'): void; + + /** + * Set or unset matching fields as optional. + */ + (behavior: 'set optional', identifier: string, bool: boolean): void; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): FormSettings._Impl[K]; + (behavior: 'setting', name: K, value: FormSettings._Impl[K]): JQuery; + (behavior: 'setting', value: FormSettings): JQuery; + (settings?: FormSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/behaviors/form.html#/settings} + */ + type FormSettings = FormSettings.Param; + + namespace FormSettings { + type Param = ( + | Pick<_Impl, 'keyboardShortcuts'> + | Pick<_Impl, 'on'> + | Pick<_Impl, 'revalidate'> + | Pick<_Impl, 'delay'> + | Pick<_Impl, 'inline'> + | Pick<_Impl, 'shouldTrim'> + | Pick<_Impl, 'dateHandling'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'preventLeaving'> + | Pick<_Impl, 'autoCheckRequired'> + | Pick<_Impl, 'errorFocus'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'prompt'> + | Pick<_Impl, 'formatter'> + | Pick<_Impl, 'onValid'> + | Pick<_Impl, 'onInvalid'> + | Pick<_Impl, 'onSuccess'> + | Pick<_Impl, 'onFailure'> + | Pick<_Impl, 'onDirty'> + | Pick<_Impl, 'onClean'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'errors'> + ) & + Partial>; + + interface _Impl { + // region Form Settings + + /** + * Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively. + * @default true + */ + keyboardShortcuts: boolean; + + /** + * Event used to trigger validation. + * Can be either 'submit', 'blur' or 'change'. + * @default 'submit' + */ + on: 'submit' | 'blur' | 'change'; + + /** + * If set to true will revalidate fields with errors on input change. + * @default true + */ + revalidate: boolean; + + /** + * Delay from last typed letter to validate a field when using 'on: change' or when revalidating a field. + * @default true + */ + delay: boolean; + + /** + * Adds inline error on field validation error. + * @default false + */ + inline: boolean; + + /** + * Whether or not the form should trim the value before validating. + * @default false + */ + shouldTrim: boolean; + + /** + * Define how calendar values will be returned. + * Can be either 'date', 'input' or 'formatter'. + * @default 'date' + */ + dateHandling: 'date' | 'input' | 'formatter'; + + /** + * Named transition to use when animating validation errors. + * Fade and slide down are available without including 'ui transitions'. + * @see {@link https://fomantic-ui.com/modules/transition.html} + * @default 'scale' + */ + transition: string; + + /** + * Animation speed for inline prompt. + * @default 150 + */ + duration: number; + + /** + * Prevent user from leaving the page if the form has a 'dirty' state by displaying a prompt. + * @default false + */ + preventLeaving: boolean; + + /** + * Whether fields with classname or attribute 'required' should automatically add the "empty" rule or automatically checks checkbox fields. + * @default false + */ + autoCheckRequired: boolean; + + /** + * Whether, on an invalid form validation, it should automatically focus either the first error field ('true') or a specific dom node (Use a unique selector string such as '.ui.error.message' or '#myelement') or nothing ('false'). + * @default false + */ + errorFocus: boolean | string; + + // endregion + + // region Form Prompts + + text: Form.TextSettings; + + prompt: Form.PromptSettings; + + // endregion + + // region Formatters + + formatter: Form.FormatterSettings; + + // endregion + + // region Callbacks + + /** + * Callback on each valid field. + */ + onValid(this: JQuery): void; + + /** + * Callback on each invalid field. + */ + onInvalid(this: JQuery): void; + + /** + * Callback if a form is all valid. + */ + onSuccess(this: JQuery, event: Event, fields: object[]): void; + + /** + * Callback if any form field is invalid. + */ + onFailure(this: JQuery, formErrors: object[], fields: object[]): void; + + /** + * Callback if form state is modified to 'dirty'. + * Triggered when at least on field has been modified. + */ + onDirty(this: JQuery): void; + + /** + * Callback if form state is modified to 'clean'. + * Triggered when all fields are set to default values. + */ + onClean(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Form.SelectorSettings; + + /** + * Class names used to determine element state. + */ + metadata: Form.MetadataSettings; + + /** + * Class names used to determine element state. + */ + className: Form.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + errors: Form.ErrorSettings; + + // endregion + } + + namespace Form { + type TextSettings = TextSettings.Param; + + namespace TextSettings { + type Param = ( + | Pick<_Impl, 'unspecifiedRule'> + | Pick<_Impl, 'unspecifiedField'> + | Pick<_Impl, 'leavingMessage'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'Please enter a valid value' + */ + unspecifiedRule: string; + + /** + * @default 'This field' + */ + unspecifiedField: string; + + /** + * @default 'There are unsaved changes on this page which will be discarded if you continue.' + */ + leavingMessage: string; + } + } + + type PromptSettings = PromptSettings.Param; + + namespace PromptSettings { + type Param = ( + | Pick<_Impl, 'empty'> + | Pick<_Impl, 'checked'> + | Pick<_Impl, 'email'> + | Pick<_Impl, 'url'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'integer'> + | Pick<_Impl, 'decimal'> + | Pick<_Impl, 'number'> + | Pick<_Impl, 'is'> + | Pick<_Impl, 'isExactly'> + | Pick<_Impl, 'not'> + | Pick<_Impl, 'notExactly'> + | Pick<_Impl, 'contain'> + | Pick<_Impl, 'containExactly'> + | Pick<_Impl, 'doesntContain'> + | Pick<_Impl, 'doesntContainExactly'> + | Pick<_Impl, 'minLength'> + | Pick<_Impl, 'exactLength'> + | Pick<_Impl, 'maxLength'> + | Pick<_Impl, 'match'> + | Pick<_Impl, 'different'> + | Pick<_Impl, 'creditCard'> + | Pick<_Impl, 'minCount'> + | Pick<_Impl, 'exactCount'> + | Pick<_Impl, 'maxCount'> + ) & + Partial>; + + interface _Impl { + /** + * @default '{name} must have a value' + */ + empty: string; + + /** + * @default '{name} must be checked' + */ + checked: string; + + /** + * @default '{name} must be a valid e-mail' + */ + email: string; + + /** + * @default '{name} must be a valid url' + */ + url: string; + + /** + * @default '{name} is not formatted correctly' + */ + regExp: string; + + /** + * @default '{name} must be an integer' + */ + integer: string; + + /** + * @default '{name} must be a decimal number' + */ + decimal: string; + + /** + * @default '{name} must be set to a number' + */ + number: string; + + /** + * @default "{name} must be '{ruleValue}'" + */ + is: string; + + /** + * @default "{name} must be exactly '{ruleValue}'" + */ + isExactly: string; + + /** + * @default "{name} cannot be set to '{ruleValue}'" + */ + not: string; + + /** + * @default "{name} cannot be set to exactly '{ruleValue}'" + */ + notExactly: string; + + /** + * @default "{name} cannot contain '{ruleValue}'" + */ + contain: string; + + /** + * @default "{name} cannot contain exactly '{ruleValue}'" + */ + containExactly: string; + + /** + * @default "{name} must contain '{ruleValue}'" + */ + doesntContain: string; + + /** + * @default "{name} must contain exactly '{ruleValue}'" + */ + doesntContainExactly: string; + + /** + * @default '{name} must be at least {ruleValue} characters' + */ + minLength: string; + + /** + * @default '{name} must be exactly {ruleValue} characters' + */ + exactLength: string; + + /** + * @default '{name} cannot be longer than {ruleValue} characters' + */ + maxLength: string; + + /** + * @default '{name} must match {ruleValue} field' + */ + match: string; + + /** + * @default '{name} must have a different value than {ruleValue} field' + */ + different: string; + + /** + * @default '{name} must be a valid credit card number' + */ + creditCard: string; + + /** + * @default '{name} must have at least {ruleValue} choices' + */ + minCount: string; + + /** + * @default '{name} must have exactly {ruleValue} choices' + */ + exactCount: string; + + /** + * @default '{name} must have {ruleValue} or less choices' + */ + maxCount: string; + } + } + + type FormatterSettings = FormatterSettings.Param; + + namespace FormatterSettings { + type Param = ( + | Pick<_Impl, 'date'> + | Pick<_Impl, 'datetime'> + | Pick<_Impl, 'time'> + | Pick<_Impl, 'month'> + | Pick<_Impl, 'year'> + ) & + Partial>; + + interface _Impl { + date(date: string): string; + datetime(date: string): string; + time(date: string): string; + month(date: string): string; + year(date: string): string; + } + } + + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'checkbox'> + | Pick<_Impl, 'clear'> + | Pick<_Impl, 'field'> + | Pick<_Impl, 'group'> + | Pick<_Impl, 'input'> + | Pick<_Impl, 'message'> + | Pick<_Impl, 'prompt'> + | Pick<_Impl, 'radio'> + | Pick<_Impl, 'reset'> + | Pick<_Impl, 'submit'> + | Pick<_Impl, 'uiCheckbox'> + | Pick<_Impl, 'uiDropdown'> + | Pick<_Impl, 'uiCalendar'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'input[type="checkbox"], input[type="radio"]' + */ + checkbox: string; + + /** + * @default '.clear' + */ + clear: string; + + /** + * @default 'input, textarea, select' + */ + field: string; + + /** + * @default '.field' + */ + group: string; + + /** + * @default 'input' + */ + input: string; + + /** + * @default '.error.message' + */ + message: string; + + /** + * @default '.prompt.label' + */ + prompt: string; + + /** + * @default 'input[type="radio"]' + */ + radio: string; + + /** + * @default '.reset:not([type="reset"])' + */ + reset: string; + + /** + * @default '.submit:not([type="submit"])' + */ + submit: string; + + /** + * @default '.ui.checkbox' + */ + uiCheckbox: string; + + /** + * @default '.ui.dropdown' + */ + uiDropdown: string; + + /** + * @default '.ui.calendar' + */ + uiCalendar: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = (Pick<_Impl, 'defaultValue'> | Pick<_Impl, 'validate'> | Pick<_Impl, 'isDirty'>) & + Partial>; + + interface _Impl { + /** + * @default 'default' + */ + defaultValue: string; + + /** + * @default 'validate' + */ + validate: string; + + /** + * @default 'isDirty' + */ + isDirty: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'error'> + | Pick<_Impl, 'label'> + | Pick<_Impl, 'pressed'> + | Pick<_Impl, 'success'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'error' + */ + error: string; + + /** + * @default 'ui basic red pointing prompt label' + */ + label: string; + + /** + * @default 'down' + */ + pressed: string; + + /** + * @default 'success' + */ + success: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'identifier'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'noRule'> + | Pick<_Impl, 'oldSyntax'> + | Pick<_Impl, 'noField'> + | Pick<_Impl, 'noElement'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'You must specify a string identifier for each field' + */ + identifier: string; + + /** + * @default 'The method you called is not defined' + */ + method: string; + + /** + * @default 'There is no rule matching the one you specified' + */ + noRule: string; + + /** + * @default 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.' + */ + oldSyntax: string; + + /** + * @default 'Field identifier {identifier} not found' + */ + noField: string; + + /** + * @default 'This module requires ui {element}' + */ + noElement: string; + } + } + } + } +} diff --git a/types/fomantic-ui-modal.d.ts b/types/fomantic-ui-modal.d.ts new file mode 100644 index 0000000000..fcee2b4c34 --- /dev/null +++ b/types/fomantic-ui-modal.d.ts @@ -0,0 +1,542 @@ +declare namespace FomanticUI { + interface Modal { + settings: ModalSettings; + + /** + * Shows the modal. + */ + (behavior: 'show'): JQuery; + + /** + * Hides the modal. + */ + (behavior: 'hide'): JQuery; + + /** + * Toggles the modal. + */ + (behavior: 'toggle'): JQuery; + + /** + * Refreshes centering of modal on page. + */ + (behavior: 'refresh'): JQuery; + + /** + * Shows associated page dimmer. + */ + (behavior: 'show dimmer'): JQuery; + + /** + * Hides associated page dimmer. + */ + (behavior: 'hide dimmer'): JQuery; + + /** + * Hides all modals not selected modal in a dimmer. + */ + (behavior: 'hide others'): JQuery; + + /** + * Hides all visible modals in the same dimmer. + */ + (behavior: 'hide all'): JQuery; + + /** + * Caches current modal size. + */ + (behavior: 'cache sizes'): JQuery; + + /** + * Returns whether the modal can fit on the page. + */ + (behavior: 'can fit'): boolean; + + /** + * Returns whether the modal is active. + */ + (behavior: 'is active'): boolean; + + /** + * Sets modal to active. + */ + (behavior: 'set active'): JQuery; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): ModalSettings._Impl[K]; + (behavior: 'setting', name: K, value: ModalSettings._Impl[K]): JQuery; + (behavior: 'setting', value: ModalSettings): JQuery; + (settings?: ModalSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/modal.html#/settings} + */ + type ModalSettings = ModalSettings.Param; + + namespace ModalSettings { + type Param = ( + | Pick<_Impl, 'detachable'> + | Pick<_Impl, 'useFlex'> + | Pick<_Impl, 'autofocus'> + | Pick<_Impl, 'restoreFocus'> + | Pick<_Impl, 'autoShow'> + | Pick<_Impl, 'observeChanges'> + | Pick<_Impl, 'allowMultiple'> + | Pick<_Impl, 'inverted'> + | Pick<_Impl, 'blurring'> + | Pick<_Impl, 'centered'> + | Pick<_Impl, 'keyboardShortcuts'> + | Pick<_Impl, 'offset'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'closable'> + | Pick<_Impl, 'dimmerSettings'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'queue'> + | Pick<_Impl, 'scrollbarWidth'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onApprove'> + | Pick<_Impl, 'onDeny'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Accordion Settings + + /** + * If set to 'false' will prevent the modal from being moved to inside the dimmer. + * @default true + */ + detachable: boolean; + + /** + * Auto will automatically use flex in browsers that support absolutely positioned elements inside flex containers. + * Setting to 'true'/'false' will force this setting for all browsers. + * @default 'auto' + */ + useFlex: 'auto' | boolean; + + /** + * When 'true', the first form input inside the modal will receive focus when shown. + * Set this to 'false' to prevent this behavior. + * @default true + */ + autofocus: boolean; + + /** + * When 'false', the last focused element, before the modal was shown, will not get refocused again when the modal hides. + * This could prevent unwanted scrolling behaviors after closing a modal. + * @default true + */ + restoreFocus: boolean; + + /** + * When 'true', immediately shows the modal at instantiation time. + * @default false + */ + autoShow: boolean; + + /** + * Whether any change in modal DOM should automatically refresh cached positions. + * @default false + */ + observeChanges: boolean; + + /** + * If set to 'true' will not close other visible modals when opening a new one. + * @default false + */ + allowMultiple: boolean; + + /** + * If inverted dimmer should be used. + * @default false + */ + inverted: boolean; + + /** + * If dimmer should blur background. + * @default false + */ + blurring: boolean; + + /** + * If modal should be center aligned. + * @default true + */ + centered: boolean; + + /** + * Whether to automatically bind keyboard shortcuts. + * This will close the modal when the 'ESC-Key' is pressed. + * @default true + */ + keyboardShortcuts: boolean; + + /** + * A vertical offset to allow for content outside of modal, for example a close button, to be centered. + * @default 0 + */ + offset: number; + + /** + * Selector or jquery object specifying the area to dim. + * @default 'body' + */ + context: string | JQuery; + + /** + * Setting to 'false' will not allow you to close the modal by clicking on the dimmer. + * @default true + */ + closable: boolean; + + /** + * Duration of animation. + * The value will be ignored when individual hide/show duration values are provided via the 'transition' setting. + * @default 400 + */ + duration: number; + + /** + * Whether additional animations should queue. + * @default false + */ + queue: boolean; + + /** + * Used internally to determine if the webkit custom scrollbar was clicked to prevent hiding the dimmer. + * This should be set to the same (numeric) value as defined for '@customScrollbarWidth' in 'site.less' in case you are using a different theme. + * @default 10 + */ + scrollbarWidth: number; + + // endregion + + // region Callbacks + + /** + * Is called when a modal starts to show. + * If the function returns 'false', the modal will not be shown. + */ + onShow(this: JQuery): void; + + /** + * Is called after a modal has finished showing animating. + */ + onVisible(this: JQuery): void; + + /** + * Is called after a modal starts to hide. + * If the function returns 'false', the modal will not hide. + */ + onHide(this: JQuery, $element: JQuery): void; + + /** + * Is called after a modal has finished hiding animation. + */ + onHidden(this: JQuery): void; + + /** + * Is called after a positive, approve or ok button is pressed. + * If the function returns 'false', the modal will not hide. + */ + onApprove(this: JQuery, $element: JQuery): void; + + /** + * Is called after a negative, deny or cancel button is pressed. If the function returns 'false' the modal will not hide. + */ + onDeny(this: JQuery, $element: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Modal.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Modal.ClassNameSettings; + + // endregion + + // region Config Template Settings + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Modal.ErrorSettings; + + // endregion + } + + namespace Modal { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'title'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'actions'> + | Pick<_Impl, 'close'> + | Pick<_Impl, 'approve'> + | Pick<_Impl, 'deny'> + | Pick<_Impl, 'dimmer'> + | Pick<_Impl, 'bodyFixed'> + | Pick<_Impl, 'prompt'> + ) & + Partial>; + + interface _Impl { + /** + * @default '> .header' + */ + title: string; + + /** + * @default '> .content' + */ + content: string; + + /** + * @default '> .actions' + */ + actions: string; + + /** + * @default '> .close' + */ + close: string; + + /** + * @default '.actions .positive, .actions .approve, .actions .ok' + */ + approve: string; + + /** + * @default '.actions .negative, .actions .deny, .actions .cancel' + */ + deny: string; + + /** + * @default '> .ui.dimmer' + */ + dimmer: string; + + /** + * @default '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close' + */ + bodyFixed: string; + + /** + * @default '.ui.input > input' + */ + prompt: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'blurring'> + | Pick<_Impl, 'inverted'> + | Pick<_Impl, 'legacy'> + | Pick<_Impl, 'loading'> + | Pick<_Impl, 'scrolling'> + | Pick<_Impl, 'undetached'> + | Pick<_Impl, 'front'> + | Pick<_Impl, 'close'> + | Pick<_Impl, 'button'> + | Pick<_Impl, 'modal'> + | Pick<_Impl, 'title'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'actions'> + | Pick<_Impl, 'template'> + | Pick<_Impl, 'ok'> + | Pick<_Impl, 'cancel'> + | Pick<_Impl, 'prompt'> + | Pick<_Impl, 'innerDimmer'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'blurring' + */ + blurring: string; + + /** + * @default 'inverted' + */ + inverted: string; + + /** + * @default 'legacy' + */ + legacy: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'scrolling' + */ + scrolling: string; + + /** + * @default 'undetached' + */ + undetached: string; + + /** + * @default 'front' + */ + front: string; + + /** + * @default 'close icon' + */ + close: string; + + /** + * @default 'ui button' + */ + button: string; + + /** + * @default 'ui modal' + */ + modal: string; + + /** + * @default 'header' + */ + title: string; + + /** + * @default 'content' + */ + content: string; + + /** + * @default 'actions' + */ + actions: string; + + /** + * @default 'ui tiny modal' + */ + template: string; + + /** + * @default 'positive' + */ + ok: string; + + /** + * @default 'negative' + */ + cancel: string; + + /** + * @default 'ui fluid input' + */ + prompt: string; + + /** + * @default 'ui inverted dimmer' + */ + innerDimmer: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'dimmer'> | Pick<_Impl, 'method'> | Pick<_Impl, 'notFound'>) & + Partial>; + + interface _Impl { + /** + * @default 'UI Dimmer, a required component is not included in this page' + */ + dimmer: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'The element you specified could not be found' + */ + notFound: string; + } + } + } + } +} diff --git a/types/fomantic-ui-nag.d.ts b/types/fomantic-ui-nag.d.ts new file mode 100644 index 0000000000..06018a3e90 --- /dev/null +++ b/types/fomantic-ui-nag.d.ts @@ -0,0 +1,319 @@ +declare namespace FomanticUI { + interface Nag { + settings: NagSettings; + + /** + * Shows the nag, if it isn't dismissed and no expiration date is set in storage. + */ + (behavior: 'show'): JQuery; + + /** + * Hides the nag. + */ + (behavior: 'hide'): JQuery; + + /** + * Dismisses the nag and sets the expiration date into the given storage to prevent the nag being shown the next time. + */ + (behavior: 'dismiss'): JQuery; + + /** + * Deletes an already set expiration date, so the nag gets shown the next time. + */ + (behavior: 'clear'): JQuery; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): NagSettings._Impl[K]; + (behavior: 'setting', name: K, value: NagSettings._Impl[K]): JQuery; + (behavior: 'setting', value: NagSettings): JQuery; + (settings?: NagSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/nag.html#/settings} + */ + type NagSettings = NagSettings.Param; + + namespace NagSettings { + type Param = ( + | Pick<_Impl, 'persist'> + | Pick<_Impl, 'displayTime'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'detachable'> + | Pick<_Impl, 'expires'> + | Pick<_Impl, 'domain'> + | Pick<_Impl, 'path'> + | Pick<_Impl, 'secure'> + | Pick<_Impl, 'samesite'> + | Pick<_Impl, 'storageMethod'> + | Pick<_Impl, 'key'> + | Pick<_Impl, 'value'> + | Pick<_Impl, 'expirationKey'> + | Pick<_Impl, 'animation'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'easing'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Nag Settings + + /** + * 'true' will show the nag, even if it is already dismissed, but will keep a set expiration date intact. + * @default false + */ + persist: boolean; + + /** + * Time in milliseconds until nag gets automatically hidden. + * Zero requires manually dismissal, otherwise hides on its own. + * @default 0 + */ + displayTime: number; + + /** + * Selector or jquery object specifying the area to attach the nag to. + * @default 'body' + */ + context: string | JQuery; + + /** + * If set to 'true' will re-attach the nag to the given 'context' node. + * @default false + */ + detachable: boolean; + + /** + * Amount of days or a Date Object until expiration of cookie/localstorage. + * @default 30 + */ + expires: number; + + /** + * cookie option. + * @default false + */ + domain: false | string; + + /** + * cookie option. + * @default '/' + */ + path: string; + + /** + * cookie option. + * @default false + */ + secure: boolean; + + /** + * cookie option. + * @default false + */ + samesite: boolean; + + /** + * Storage to store the expiration date when the nag is dismissed. + * Can be either 'cookie', 'localstorage' or 'sessionstorage'. + * @default 'cookie' + */ + storageMethod: 'cookie' | 'localstorage' | 'sessionstorage'; + + /** + * Key to store in dismissed localstorage/cookie. + * @default 'nag' + */ + key: string; + + /** + * Value to store in dismissed localstorage/cookie. + * @default 'dismiss' + */ + value: string; + + /** + * Key suffix to support expiration in localstorage. + * @default 'ExpirationDate' + */ + expirationKey: string; + + /** + * Animation transition style for open/close animation. + * Can be either 'slide' or 'fade'. + * @default {} + */ + animation: object; // TODO + + /** + * Duration of open/close animation. + * @default 500 + */ + duration: number; + + /** + * Easing of open/close animation. EaseOutQuad is included with nag. + * @see {@link https://gsgd.co.uk/sandbox/jquery/easing/} + * @default 'easeOutQuad' + */ + easing: string; + + // endregion + + // region Callbacks + + /** + * Callback before nag is shown. + * Returning 'false' from this callback will cancel the nag from showing. + */ + onShow(this: JQuery): void; + + /** + * Callback after nag is shown. + */ + onVisible(this: JQuery): void; + + /** + * Callback before nag is hidden. + * Returning 'false' from this callback will cancel the nag from hiding. + */ + onHide(this: JQuery): void; + + /** + * Callback after nag is hidden. + */ + onHidden(this: JQuery): void; + + // endregion + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Nag.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Nag.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Nag.ErrorSettings; + + // endregion + } + + namespace Nag { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = Pick<_Impl, 'close'> & Partial>; + + interface _Impl { + /** + * @default '> .close.icon' + */ + close: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'bottom'> | Pick<_Impl, 'fixed'>) & Partial>; + + interface _Impl { + /** + * @default 'bottom' + */ + bottom: string; + + /** + * @default 'fixed' + */ + fixed: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'noStorage'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'setItem'> + | Pick<_Impl, 'expiresFormat'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'Unsupported storage method' + */ + noStorage: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'Unexpected error while setting value' + */ + setItem: string; + + /** + * @default '"expires" must be a number of days or a Date Object' + */ + expiresFormat: string; + } + } + } + } +} diff --git a/types/fomantic-ui-popup.d.ts b/types/fomantic-ui-popup.d.ts new file mode 100644 index 0000000000..8282e1f5b5 --- /dev/null +++ b/types/fomantic-ui-popup.d.ts @@ -0,0 +1,619 @@ +declare namespace FomanticUI { + interface Popup { + settings: PopupSettings; + + /** + * Shows popup. + */ + (behavior: 'show'): JQuery; + + /** + * Hides popup. + */ + (behavior: 'hide'): JQuery; + + /** + * Hides all visible pop ups on the page. + */ + (behavior: 'hide all'): JQuery; + + /** + * Returns current popup dom element. + */ + (behavior: 'get popup'): JQuery; + + /** + * Changes current popup content. + */ + (behavior: 'change content', html: string): JQuery; + + /** + * Toggles visibility of popup. + */ + (behavior: 'toggle'): JQuery; + + /** + * Returns whether popup is visible. + */ + (behavior: 'is visible'): boolean; + + /** + * Returns whether popup is hidden. + */ + (behavior: 'is hidden'): boolean; + + /** + * Returns whether popup is created and inserted into the page. + */ + (behavior: 'exists'): boolean; + + /** + * Adjusts popup when content size changes (only necessary for centered popups). + */ + (behavior: 'reposition'): JQuery; + + /** + * Repositions a popup. + */ + (behavior: 'set position', position: number): JQuery; + + /** + * Removes popup from the page. + */ + (behavior: 'remove popup'): JQuery; + + /** + * Removes popup from the page and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): PopupSettings._Impl[K]; + (behavior: 'setting', name: K, value: PopupSettings._Impl[K]): JQuery; + (behavior: 'setting', value: PopupSettings): JQuery; + (settings?: PopupSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/popup.html#/settings} + */ + type PopupSettings = PopupSettings.Param; + + namespace PopupSettings { + type Param = ( + | Pick<_Impl, 'popup'> + | Pick<_Impl, 'exclusive'> + | Pick<_Impl, 'movePopup'> + | Pick<_Impl, 'observeChanges'> + | Pick<_Impl, 'boundary'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'scrollContext'> + | Pick<_Impl, 'jitter'> + | Pick<_Impl, 'position'> + | Pick<_Impl, 'forcePosition'> + | Pick<_Impl, 'inline'> + | Pick<_Impl, 'preserve'> + | Pick<_Impl, 'prefer'> + | Pick<_Impl, 'lastResort'> + | Pick<_Impl, 'on'> + | Pick<_Impl, 'delay'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'arrowPixelsFromEdge'> + | Pick<_Impl, 'setFluidWidth'> + | Pick<_Impl, 'hoverable'> + | Pick<_Impl, 'closable'> + | Pick<_Impl, 'addTouchEvents'> + | Pick<_Impl, 'hideOnScroll'> + | Pick<_Impl, 'target'> + | Pick<_Impl, 'distanceAway'> + | Pick<_Impl, 'offset'> + | Pick<_Impl, 'maxSearchDepth'> + | Pick<_Impl, 'onCreate'> + | Pick<_Impl, 'onRemove'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onUnplaceable'> + | Pick<_Impl, 'variation'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'title'> + | Pick<_Impl, 'html'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Popup Settings + + /** + * Can specify a DOM element that should be used as the popup. + * This is useful for including a pre-formatted popup. + * @default false + */ + popup: false | string; + + /** + * Whether all other popups should be hidden when this popup is opened. + * @default false + */ + exclusive: boolean; + + /** + * Whether to move popup to same offset container as target element when popup already exists on the page. + * Using a popup inside of an element without 'overflow:visible', like a sidebar, may require you to set this to 'false'. + * @default true + */ + movePopup: boolean; + + /** + * Whether popup should attach 'mutationObservers' to automatically run destroy when the element is removed from the page's DOM. + * @default true + */ + observeChanges: boolean; + + /** + * When the popup surpasses the boundary of this element, it will attempt to find another display position. + * @default window + */ + boundary: Window | string; + + /** + * Selector or jquery object specifying where the popup should be created. + * @default 'body' + */ + context: string | JQuery; + + /** + * Will automatically hide a popup on scroll event in this context. + * @default window + */ + scrollContext: Window | string; + + /** + * Number of pixels that a popup is allowed to appear outside the boundaries of its context. + * This allows for permissible rounding errors when an element is against the edge of its 'context'. + * @default 2 + */ + jitter: number; + + /** + * Position that the popup should appear. + * @default 'top left' + */ + position: string; + + /** + * If given position should be used, regardless if popup fits. + * @default false + */ + forcePosition: boolean; + + /** + * If a popup is inline it will be created next to current element, allowing for local css rules to apply. + * It will not be removed from the DOM after being hidden. + * Otherwise popups will appended to body and removed after being hidden. + * @default false + */ + inline: boolean; + + /** + * Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads. + * @default false + */ + preserve: boolean; + + /** + * Can be set to 'adjacent' or 'opposite' to prefer adjacent or opposite position if popup cannot fit on screen. + * @default 'opposite' + */ + prefer: 'opposite' | 'adjacent'; + + /** + * When set to 'false', a popup will not appear and produce an error message if it cannot entirely fit on page. + * Setting this to a position like, 'right center' forces the popup to use this position as a last resort even if it is partially offstage. + * Setting this to 'true' will use the last attempted position. + * @default false + */ + lastResort: boolean | string; + + /** + * Event used to trigger popup. + * Can be either 'focus', 'click', 'hover', or 'manual'. + * Manual popups must be triggered with '$('.element').popup('show');'. + * @default 'hover' + */ + on: 'hover' | 'focus' | 'click' | 'manual'; + + /** + * Delay in milliseconds before showing or hiding a popup on hover or focus. + * @default {} + */ + delay: object; // TODO + + /** + * Named transition to use when animating menu in and out. + * Alternatively you can provide an object to set individual values for hide/show transitions as well as hide/show duration. + * @default 'scale' + */ + transition: string | object; + + /** + * Duration of animation events. + * The value will be ignored when individual hide/show duration values are provided via the 'transition' setting. + * @default 200 + */ + duration: number; + + /** + * When a target element is less than 2x this amount, the popup will appear with the arrow centered on the target element, instead of with the popup edge matching the target's edge. + * @default 20 + */ + arrowPixelsFromEdge: number; + + /** + * Whether popup should set fluid popup variation width on load to avoid 'width: 100%' including padding. + * @default true + */ + setFluidWidth: boolean; + + /** + * Whether popup should not close on hover (useful for popup navigation menus). + * @default false + */ + hoverable: boolean; + + /** + * Whether popup should hide when clicking on the page, 'auto' only hides for popups without on: 'hover'. + * @default true + */ + closable: boolean | 'auto'; + + /** + * When using on: 'hover' whether 'touchstart' events should be added to allow the popup to be triggered. + * @default true + */ + addTouchEvents: boolean; + + /** + * Whether popup should hide on scroll or touchmove, 'auto' only hides for popups without on: 'click'. + * Set this to 'false' to prevent mobile browsers from closing popups when you tap inside input fields. + * @default 'auto' + */ + hideOnScroll: 'auto' | boolean; + + /** + * If a selector or jQuery object is specified this allows the popup to be positioned relative to that element. + * @default false + */ + target: false | string | JQuery; + + /** + * Offset for distance of popup from element. + * @default 0 + */ + distanceAway: number; + + /** + * Offset in pixels from calculated position. + * @default 0 + */ + offset: number; + + /** + * Number of iterations before giving up search for popup position when a popup cannot fit on screen. + * @default 15 + */ + maxSearchDepth: number; + + // endregion + + // region Callbacks + + /** + * Callback on popup element creation, with created popup. + */ + onCreate(this: JQuery): void; + + /** + * Callback immediately before Popup is removed from DOM. + */ + onRemove(this: JQuery): void; + + /** + * Callback before popup is shown. + * Returning 'false' from this callback will cancel the popup from showing. + */ + onShow(this: JQuery): boolean; + + /** + * Callback after popup is shown. + */ + onVisible(this: JQuery): void; + + /** + * Callback before popup is hidden. + * Returning 'false' from this callback will cancel the popup from hiding. + */ + onHide(this: JQuery): boolean; + + /** + * Callback after popup is hidden. + */ + onHidden(this: JQuery): void; + + /** + * Callback after popup cannot be placed on screen. + */ + onUnplaceable(this: JQuery): void; + + // endregion + + // region Content Settings + + /** + * Popup variation to use, can use multiple variations with a space delimiter. + */ + variation: string; + + /** + * Content to display. + */ + content: string; + + /** + * Title to display alongside content. + */ + title: string; + + /** + * HTML content to display instead of preformatted title and content. + */ + html: string; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Popup.SelectorSettings; + + /** + * Class names used to determine element state. + */ + metadata: Popup.MetadataSettings; + + /** + * Class names used to determine element state. + */ + className: Popup.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Popup.ErrorSettings; + + // endregion + } + + namespace Popup { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = Pick<_Impl, 'popup'> & Partial>; + + interface _Impl { + /** + * @default '.ui.popup' + */ + popup: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = ( + | Pick<_Impl, 'activator'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'html'> + | Pick<_Impl, 'offset'> + | Pick<_Impl, 'position'> + | Pick<_Impl, 'title'> + | Pick<_Impl, 'variation'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'activator' + */ + activator: string; + + /** + * @default 'content' + */ + content: string; + + /** + * @default 'html' + */ + html: string; + + /** + * @default 'offset' + */ + offset: string; + + /** + * @default 'position' + */ + position: string; + + /** + * @default 'title' + */ + title: string; + + /** + * @default 'variation' + */ + variation: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'basic'> + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'dropdown'> + | Pick<_Impl, 'fluid'> + | Pick<_Impl, 'loading'> + | Pick<_Impl, 'popup'> + | Pick<_Impl, 'position'> + | Pick<_Impl, 'visible'> + | Pick<_Impl, 'popupVisible'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'basic' + */ + basic: string; + + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'dropdown' + */ + dropdown: string; + + /** + * @default 'fluid' + */ + fluid: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'ui popup' + */ + popup: string; + + /** + * @default 'top left center bottom right' + */ + position: string; + + /** + * @default 'visible' + */ + visible: string; + + /** + * @default 'visible' + */ + popupVisible: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'invalidPosition'> + | Pick<_Impl, 'cannotPlace'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'noTransition'> + | Pick<_Impl, 'notFound'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'The position you specified is not a valid position' + */ + invalidPosition: string; + + /** + * @default 'Popup does not fit within the boundaries of the viewport' + */ + cannotPlace: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'This module requires ui transitions' + */ + noTransition: string; + + /** + * @default 'The target or popup you specified does not exist on the page' + */ + notFound: string; + } + } + } + } +} diff --git a/types/fomantic-ui-progress.d.ts b/types/fomantic-ui-progress.d.ts new file mode 100644 index 0000000000..7ec5c5afc9 --- /dev/null +++ b/types/fomantic-ui-progress.d.ts @@ -0,0 +1,533 @@ +declare namespace FomanticUI { + interface Progress { + settings: ProgressSettings; + + /** + * Sets current percent of progress to value. + * If using a total will convert from percent to estimated value. + * 'percent' can be array of percent like '[20,30,50]', comma-separated string like '20,30,50' for `.ui.multiple.progress`. + */ + (behavior: 'set percent', percent: number | [] | string): JQuery; + + /** + * Sets progress to specified value. + * Will automatically calculate percent from total. + * value can be array of values like '[5,3,10]', comma-separated string like '5,3,10' for `.ui.multiple.progress`. + */ + (behavior: 'set progress', value: number | [] | string): JQuery; + + /** + * Increments progress by increment value, if not passed a value will use random amount specified in settings. + */ + (behavior: 'increment', incrementValue: number): JQuery; + + /** + * Decrements progress by decrement value, if not passed a value will use random amount specified in settings. + */ + (behavior: 'decrement', decrementValue: number): JQuery; + + /** + * Immediately updates progress to value, ignoring progress animation interval delays. + * 'value' can be array of values like '[5,3,10]', comma-separated string like '5,3,10' for `.ui.multiple.progress`. + */ + (behavior: 'update progress', value: number | [] | string): JQuery; + + /** + * Finishes progress and sets loaded to 100%. + * Set 'keepState' to 'true' (default 'false') to stop the active animation only without setting the progress to 100%. + */ + (behavior: 'complete', keepState: boolean): JQuery; + + /** + * Resets progress to zero. + */ + (behavior: 'reset'): JQuery; + + /** + * Set total to a new value. + */ + (behavior: 'set total', total: number): JQuery; + + /** + * Replaces templated string with value, total, percent left and percent. + */ + (behavior: 'get text', text: string): JQuery; + + /** + * Returns normalized value inside acceptable range specified by total. + */ + (behavior: 'get normalized value', value: number): JQuery; + + /** + * Returns percent as last specified. + */ + (behavior: 'get percent'): number; + + /** + * Returns current progress value. + */ + (behavior: 'get value'): number; + + /** + * Returns total. + */ + (behavior: 'get total'): number; + + /** + * Returns whether progress is completed. + */ + (behavior: 'is complete'): boolean; + + /** + * Returns whether progress was a success. + */ + (behavior: 'is success'): boolean; + + /** + * Returns whether progress is in warning state. + */ + (behavior: 'is warning'): boolean; + + /** + * Returns whether progress is in error state. + */ + (behavior: 'is error'): boolean; + + /** + * Returns whether progress is in active state. + */ + (behavior: 'is active'): boolean; + + /** + * Sets progress to active state. + */ + (behavior: 'set active'): JQuery; + + /** + * Sets progress to warning state. Set 'keepState' to 'true' (default 'false') to keep the progressbar state and the current percentage without raising it up to 100%. + */ + (behavior: 'set warning', text: string, keepState: boolean): JQuery; + + /** + * Sets progress to success state. Set 'keepState' to 'true' (default 'false') to keep the progressbar state and the current percentage without raising it up to 100%. + */ + (behavior: 'set success', text: string, keepState: boolean): JQuery; + + /** + * Sets progress to error state. Set 'keepState' to 'true' (default 'false') to keep the progressbar state and the current percentage without raising it up to 100%. + */ + (behavior: 'set error', text: string, keepState: boolean): JQuery; + + /** + * Changes progress animation speed. + */ + (behavior: 'set duration', value: number): JQuery; + + /** + * Sets progress exterior label to text. + */ + (behavior: 'set label', text: string): JQuery; + + /** + * Sets progress bar label to text. + */ + (behavior: 'set bar label', text: string): JQuery; + + /** + * Removes progress to active state. + */ + (behavior: 'remove active'): JQuery; + + /** + * Removes progress to warning state. + */ + (behavior: 'remove warning'): JQuery; + + /** + * Removes progress to success state. + */ + (behavior: 'remove success'): JQuery; + + /** + * Removes progress to error state. + */ + (behavior: 'remove error'): JQuery; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): ProgressSettings._Impl[K]; + (behavior: 'setting', name: K, value: ProgressSettings._Impl[K]): JQuery; + (behavior: 'setting', value: ProgressSettings): JQuery; + (settings?: ProgressSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/progress.html#/settings} + */ + type ProgressSettings = ProgressSettings.Param; + + namespace ProgressSettings { + type Param = ( + | Pick<_Impl, 'autoSuccess'> + | Pick<_Impl, 'showActivity'> + | Pick<_Impl, 'limitValues'> + | Pick<_Impl, 'label'> + | Pick<_Impl, 'random'> + | Pick<_Impl, 'precision'> + | Pick<_Impl, 'total'> + | Pick<_Impl, 'value'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onSuccess'> + | Pick<_Impl, 'onActive'> + | Pick<_Impl, 'onError'> + | Pick<_Impl, 'onWarning'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Progress Settings + + /** + * Whether success state should automatically trigger when progress completes. + * @default true + */ + autoSuccess: boolean; + + /** + * Whether progress should automatically show activity when incremented. + * @default true + */ + showActivity: boolean; + + /** + * When set to 'true', values that calculate to above 100% or below 0% will be adjusted. + * When set to 'false', inappropriate values will produce an error. + * @default true + */ + limitValues: boolean; + + /** + * Can be set to either to display progress as 'percent' or 'ratio'. + * Matches up to corresponding text template with the same name. + * @default 'percent' + */ + label: 'percent' | 'ratio'; + + /** + * When incrementing without value, sets range for random increment value. + * @default {} + */ + random: object; + + /** + * Decimal point precision for calculated progress. + * @default 0 + */ + precision: 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 + */ + total: false | number; + + /** + * Sets current value, when total is specified, this is used to calculate a ratio of the total, with percent this should be the overall percent. + * @default false + */ + value: false | number; + + // endregion + + // region Callbacks + + /** + * Callback on percentage change. + */ + onChange(this: JQuery, percent: number, value: number, total: number): void; + + /** + * Callback on success state. + */ + onSuccess(this: JQuery, total: number): void; + + /** + * Callback on active state. + */ + onActive(this: JQuery, value: number, total: number): void; + + /** + * Callback on error state. + */ + onError(this: JQuery, value: number, total: number): void; + + /** + * Callback on warning state. + */ + onWarning(this: JQuery, value: number, total: number): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Progress.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Progress.ClassNameSettings; + + /** + * + */ + text: Progress.TextSettings; + + /** + * Regular expressions used by module + */ + regExp: Progress.RegExpSettings; + + /** + * Regular expressions used by module + */ + metadata: Progress.MetadataSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Progress.ErrorSettings; + + // endregion + } + + namespace Progress { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'bar'> | Pick<_Impl, 'label'> | Pick<_Impl, 'progress'>) & + Partial>; + + interface _Impl { + /** + * @default '> .bar' + */ + bar: string; + + /** + * @default '> .label' + */ + label: string; + + /** + * @default '.bar > .progress' + */ + progress: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'error'> + | Pick<_Impl, 'success'> + | Pick<_Impl, 'warning'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'error' + */ + error: string; + + /** + * @default 'success' + */ + success: string; + + /** + * @default 'warning' + */ + warning: string; + } + } + + type TextSettings = TextSettings.Param; + + namespace TextSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'error'> + | Pick<_Impl, 'success'> + | Pick<_Impl, 'warning'> + | Pick<_Impl, 'percent'> + | Pick<_Impl, 'ratio'> + | Pick<_Impl, 'bars'> + ) & + Partial>; + + interface _Impl { + /** + * @default false + */ + active: boolean | string; + + /** + * @default false + */ + error: boolean | string; + + /** + * @default false + */ + success: boolean | string; + + /** + * @default false + */ + warning: boolean | string; + + /** + * @default '{percent}%'' + */ + percent: string; + + /** + * @default '{value} of {total}' + */ + ratio: string; + + /** + * @default [] + */ + bars: string[]; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = Pick<_Impl, 'variable'> & Partial>; + + interface _Impl { + /** + * @default /\{\$*[A-z0-9]+\}/g + */ + variable: RegExp; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = (Pick<_Impl, 'percent'> | Pick<_Impl, 'total'> | Pick<_Impl, 'value'>) & + Partial>; + + interface _Impl { + /** + * @default 'percent' + */ + percent: string; + + /** + * @default 'total' + */ + total: string; + + /** + * @default 'value' + */ + value: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'method'> + | Pick<_Impl, 'nonNumeric'> + | Pick<_Impl, 'tooHigh'> + | Pick<_Impl, 'tooLow'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'Progress value is non numeric' + */ + nonNumeric: string; + + /** + * @default 'Value specified is above 100%' + */ + tooHigh: string; + + /** + * @default 'Value specified is below 0%' + */ + tooLow: string; + } + } + } + } +} diff --git a/types/fomantic-ui-rating.d.ts b/types/fomantic-ui-rating.d.ts new file mode 100644 index 0000000000..4bc66ac2d1 --- /dev/null +++ b/types/fomantic-ui-rating.d.ts @@ -0,0 +1,218 @@ +declare namespace FomanticUI { + interface Rating { + settings: RatingSettings; + + /** + * Sets rating programmatically. + */ + (behavior: 'set rating', rating: number): JQuery; + + /** + * Gets current rating. + */ + (behavior: 'get rating'): number; + + /** + * Disables interactive rating mode. + */ + (behavior: 'disable'): JQuery; + + /** + * Enables interactive rating mode. + */ + (behavior: 'enable'): JQuery; + + /** + * Clears current rating. + */ + (behavior: 'clear rating'): JQuery; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): RatingSettings._Impl[K]; + (behavior: 'setting', name: K, value: RatingSettings._Impl[K]): JQuery; + (behavior: 'setting', value: RatingSettings): JQuery; + (settings?: RatingSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/rating.html#/settings} + */ + type RatingSettings = RatingSettings.Param; + + namespace RatingSettings { + type Param = ( + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'initialRating'> + | Pick<_Impl, 'maxRating'> + | Pick<_Impl, 'fireOnInit'> + | Pick<_Impl, 'clearable'> + | Pick<_Impl, 'interactive'> + | Pick<_Impl, 'onRate'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Accordion Settings + + /** + * The icon classname. + * @default 'star' + */ + icon: string; + + /** + * A number representing the default rating to apply. + * @default 0 + */ + initialRating: number; + + /** + * The maximum rating value. + * @default 4 + */ + maxRating: number; + + /** + * Whether callbacks like 'onRate' should fire immediately after initializing with the current value. + * @default false + */ + fireOnInit: boolean; + + /** + * By default a rating will be only clearable if there is 1 icon. + * Setting to 'true'/'false' will allow or disallow a user to clear their rating. + * @default 'auto' + */ + clearable: 'auto' | boolean; + + /** + * Whether to enable user's ability to rate. + * @default true + */ + interactive: boolean; + + // endregion + + // region Callbacks + + /** + * Is called after user selects a new rating. + */ + onRate(this: JQuery, value: number): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Rating.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Rating.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Rating.ErrorSettings; + + // endregion + } + + namespace Rating { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = Pick<_Impl, 'icon'> & Partial>; + + interface _Impl { + /** + * @default '.icon' + */ + icon: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'active'> | Pick<_Impl, 'hover'> | Pick<_Impl, 'loading'>) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'hover' + */ + hover: string; + + /** + * @default 'loading' + */ + loading: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = Pick<_Impl, 'action'> & Partial>; + + interface _Impl { + /** + * @default 'You called a rating action that was not defined' + */ + action: string; + } + } + } + } +} diff --git a/types/fomantic-ui-search.d.ts b/types/fomantic-ui-search.d.ts new file mode 100644 index 0000000000..00062327f6 --- /dev/null +++ b/types/fomantic-ui-search.d.ts @@ -0,0 +1,590 @@ +declare namespace FomanticUI { + interface Search { + settings: SearchSettings; + + /** + * Search for value currently set in search input. + */ + (behavior: 'query', callback: Function): JQuery; + + /** + * Displays message in search results with text, using template matching type. + */ + (behavior: 'display message', text: string, type: string): JQuery; + + /** + * Cancels current remote search query. + */ + (behavior: 'cancel query'): JQuery; + + /** + * Search local object for specified query and display results. + */ + (behavior: 'search local', query: string): JQuery; + + /** + * Whether has minimum characters. + */ + (behavior: 'has minimum characters'): boolean; + + /** + * Search remote endpoint for specified query and display results. + */ + (behavior: 'search remote', query: string, callback: Function): JQuery; + + /** + * Search object for specified query and return results. + */ + (behavior: 'search object', query: string, object: string, searchFields: string): JQuery; + + /** + * Whether search is currently focused. + */ + (behavior: 'is focused'): boolean; + + /** + * Whether search results are visible. + */ + (behavior: 'is visible'): boolean; + + /** + * Whether search results are empty. + */ + (behavior: 'is empty'): boolean; + + /** + * Returns current search value. + */ + (behavior: 'get value'): string; + + /** + * Returns JSON object matching searched title or id. + */ + (behavior: 'get result', value: string): object; + + /** + * Sets search input to value. + */ + (behavior: 'set value', value: string): JQuery; + + /** + * Reads cached results for query. + */ + (behavior: 'read cache', query: string): JQuery; + + /** + * Clears value from cache, if no parameter passed clears all cache. + */ + (behavior: 'clear cache', query: string): JQuery; + + /** + * Writes cached results for query. + */ + (behavior: 'write cache', query: string): JQuery; + + /** + * Adds HTML to results and displays. + */ + (behavior: 'add results', html: string): JQuery; + + /** + * Shows results container. + */ + (behavior: 'show results', callback: Function): JQuery; + + /** + * Hide results container. + */ + (behavior: 'hide results', callback: Function): JQuery; + + /** + * Generates results using parser specified by 'settings.template'. + */ + (behavior: 'generate results', response: Function): JQuery; + + /** + * Removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): SearchSettings._Impl[K]; + (behavior: 'setting', name: K, value: SearchSettings._Impl[K]): JQuery; + (behavior: 'setting', value: SearchSettings): JQuery; + (settings?: SearchSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/search.html#/settings} + */ + type SearchSettings = SearchSettings.Param; + + namespace SearchSettings { + type Param = ( + | Pick<_Impl, 'apiSettings'> + | Pick<_Impl, 'minCharacters'> + | Pick<_Impl, 'searchOnFocus'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'maxResults'> + | Pick<_Impl, 'cache'> + | Pick<_Impl, 'source'> + | Pick<_Impl, 'selectFirstResult'> + | Pick<_Impl, 'showNoResults'> + | Pick<_Impl, 'fullTextSearch'> + | Pick<_Impl, 'fields'> + | Pick<_Impl, 'searchFields'> + | Pick<_Impl, 'hideDelay'> + | Pick<_Impl, 'searchDelay'> + | Pick<_Impl, 'easing'> + | Pick<_Impl, 'ignoreDiacritics'> + | Pick<_Impl, 'onSelect'> + | Pick<_Impl, 'onResultsAdd'> + | Pick<_Impl, 'onSearchQuery'> + | Pick<_Impl, 'onResults'> + | Pick<_Impl, 'onResultsOpen'> + | Pick<_Impl, 'onResultsClose'> + | Pick<_Impl, 'templates'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Search Settings + + /** + * Settings for API call. + * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + * @default {} + */ + apiSettings: ApiSettings; + + /** + * Minimum characters to query for results. + * @default 1 + */ + minCharacters: number; + + /** + * Whether search should show results on focus (must also match min character length). + * @default true + */ + searchOnFocus: boolean; + + /** + * Named transition to use when animating menu in and out. + * Fade and slide down are available without including ui transitions. + * @see {@link https://fomantic-ui.com/modules/transition.html} + * @default 'fade' + */ + transition: string; + + /** + * Duration of animation events. + * @default 300 + */ + duration: number; + + /** + * Maximum results to display when using local and simple search, maximum category count for category search. + * @default 7 + */ + maxResults: number; + + /** + * Caches results locally to avoid requerying server. + * @default true + */ + cache: boolean; + + /** + * Specify a Javascript object which will be searched locally. + * @default false + */ + source: boolean | object; + + /** + * Whether the search should automatically select the first search result after searching. + * @default false + */ + selectFirstResult: boolean; + + /** + * Whether a "no results" message should be shown if no results are found. + * @default false + */ + showNoResults: boolean; + + /** + * Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to false will only match to start of string. + * @default 'exact' + */ + fullTextSearch: 'exact' | boolean; + + /** + * List mapping display content to JSON property, either with API or 'source'. + * @default {} + */ + fields: object; + + /** + * Specify object properties inside local source object which will be searched. + * @default ['title', 'description'] + */ + searchFields: string[]; + + /** + * Delay before hiding results after search blur. + * @default 0 + */ + hideDelay: number; + + /** + * Delay before querying results on inputchange. + * @default 100 + */ + searchDelay: number; + + /** + * Easing equation when using fallback Javascript animation. + * EaseOutExpo is included with search, for additional options you must include `easing equations`. + * @see {@link https://gsgd.co.uk/sandbox/jquery/easing/} + * @default 'easeOutExpo' + */ + easing: string; + + /** + * When activated, searches will also match results for base diacritic letters. + * For example when searching for 'a', it will also match 'á' or 'â' or 'å' and so on... + * It will also ignore diacritics for the searchterm, so if searching for 'ó', it will match 'ó', but also 'o', 'ô' or 'õ' and so on... + * @default false + */ + ignoreDiacritics: boolean; + + // endregion + + // region Callbacks + + /** + * Callback on element selection by user. + * 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; + + /** + * Callback after processing element template to add HTML to results. + * Function should return 'false' to prevent default actions. + */ + onResultsAdd(this: JQuery, html: string): boolean; + + /** + * Callback on search query. + */ + onSearchQuery(this: JQuery, query: string): void; + + /** + * Callback on server response. + */ + onResults(this: JQuery, response: object): void; + + /** + * Callback when results are opened. + */ + onResultsOpen(this: JQuery): void; + + /** + * Callback when results are closed. + */ + onResultsClose(this: JQuery): void; + + // endregion + + // region Template Settings + + templates: Search.TemplateSettings; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Search.SelectorSettings; + + /** + * Regular expressions used for matching. + */ + regExp: Search.RegExpSettings; + + /** + * Class names used to determine element state. + */ + className: Search.ClassNameSettings; + + /** + * HTML5 metadata attributes used internally. + */ + metadata: Search.MetadataSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Search.ErrorSettings; + + // endregion + } + + namespace Search { + type TemplateSettings = TemplateSettings.Param; + + namespace TemplateSettings { + type Param = ( + | Pick<_Impl, 'escape'> + | Pick<_Impl, 'message'> + | Pick<_Impl, 'category'> + | Pick<_Impl, 'standard'> + ) & + Partial>; + + interface _Impl { + /** + * @default function(string) + */ + escape: Function; + + /** + * @default function(message, type) + */ + message: Function; + + /** + * @default function(response) + */ + category: Function; + + /** + * @default function(response) + */ + standard: Function; + } + } + + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'prompt'> + | Pick<_Impl, 'searchButton'> + | Pick<_Impl, 'results'> + | Pick<_Impl, 'category'> + | Pick<_Impl, 'result'> + ) & + Partial>; + + interface _Impl { + /** + * @default '.prompt' + */ + prompt: string; + + /** + * @default '.search.button' + */ + searchButton: string; + + /** + * @default '.results' + */ + results: string; + + /** + * @default '.category' + */ + category: string; + + /** + * @default '.result' + */ + result: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = (Pick<_Impl, 'escape'> | Pick<_Impl, 'beginsWith'>) & Partial>; + + interface _Impl { + /** + * @default /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g + */ + escape: RegExp; + + /** + * @default '(?:\s|^)' + */ + beginsWith: RegExp; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'empty'> + | Pick<_Impl, 'focus'> + | Pick<_Impl, 'loading'> + | Pick<_Impl, 'pressed'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'empty' + */ + empty: string; + + /** + * @default 'focus' + */ + focus: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'down' + */ + pressed: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = (Pick<_Impl, 'cache'> | Pick<_Impl, 'results'>) & Partial>; + + interface _Impl { + /** + * @default 'cache' + */ + cache: string; + + /** + * @default 'results' + */ + results: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'source'> + | Pick<_Impl, 'noResultsHeader'> + | Pick<_Impl, 'noResults'> + | Pick<_Impl, 'logging'> + | Pick<_Impl, 'noTemplate'> + | Pick<_Impl, 'serverError'> + | Pick<_Impl, 'maxResults'> + | Pick<_Impl, 'method'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'Cannot search. No source used, and Fomantic API module was not included' + */ + source: string; + + /** + * @default 'No Results' + */ + noResultsHeader: string; + + /** + * @default 'Your search returned no results' + */ + noResults: string; + + /** + * @default 'Error in debug logging, exiting.' + */ + logging: string; + + /** + * @default 'A valid template name was not specified.' + */ + noTemplate: string; + + /** + * @default 'There was an issue with querying the server.' + */ + serverError: string; + + /** + * @default 'Results must be an array to use maxResults setting' + */ + maxResults: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + } + } + } + } +} diff --git a/types/fomantic-ui-shape.d.ts b/types/fomantic-ui-shape.d.ts new file mode 100644 index 0000000000..a0a0516264 --- /dev/null +++ b/types/fomantic-ui-shape.d.ts @@ -0,0 +1,316 @@ +declare namespace FomanticUI { + interface Shape { + settings: ShapeSettings; + + /** + * Flips the shape upward. + */ + (behavior: 'flip up'): JQuery; + + /** + * Flips the shape downward. + */ + (behavior: 'flip down'): JQuery; + + /** + * Flips the shape right. + */ + (behavior: 'flip right'): JQuery; + + /** + * Flips the shape left. + */ + (behavior: 'flip left'): JQuery; + + /** + * Flips the shape over clock-wise. + */ + (behavior: 'flip over'): JQuery; + + /** + * Flips the shape over counter-clockwise. + */ + (behavior: 'flip back'): JQuery; + + /** + * Set the next side to a specific selector. + */ + (behavior: 'set next side', selector: string): JQuery; + + /** + * Returns whether shape is currently animating. + */ + (behavior: 'is animating'): boolean; + + /** + * Removes all inline styles. + */ + (behavior: 'reset'): JQuery; + + /** + * Queues an animation after current animation. + */ + (behavior: 'queue', animation: string): JQuery; + + /** + * Forces a reflow on element. + */ + (behavior: 'repaint', animation: string): JQuery; + + /** + * Set the next side to next sibling to active element. + */ + (behavior: 'set default side'): JQuery; + + /** + * Sets shape to the content size of the next side. + */ + (behavior: 'set stage size'): JQuery; + + /** + * Refreshes the selector cache for element sides. + */ + (behavior: 'refresh'): JQuery; + + /** + * Returns translation for next side staged below. + */ + (behavior: 'get transform down'): object; + + /** + * Returns translation for next side staged left. + */ + (behavior: 'get transform left'): object; + + /** + * Returns translation for next side staged right. + */ + (behavior: 'get transform right'): object; + + /** + * Returns translation for next side staged up. + */ + (behavior: 'get transform up'): object; + + /** + * Returns translation for next side staged down. + */ + (behavior: 'get transform down'): object; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): ShapeSettings._Impl[K]; + (behavior: 'setting', name: K, value: ShapeSettings._Impl[K]): JQuery; + (behavior: 'setting', value: ShapeSettings): JQuery; + (settings?: ShapeSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/shape.html#/settings} + */ + type ShapeSettings = ShapeSettings.Param; + + namespace ShapeSettings { + type Param = ( + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'width'> + | Pick<_Impl, 'height'> + | Pick<_Impl, 'jitter'> + | Pick<_Impl, 'allowRepeats'> + | Pick<_Impl, 'onBeforeChange'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Shape Settings + + /** + * Duration of side change animation. + * @default false + */ + duration: false | string; + + /** + * Width during animation, can be set to 'auto', 'initial', 'next' or pixel amount. + * @default 'initial' + */ + width: 'auto' | 'initial' | 'next' | number; + + /** + * Height during animation, can be set to 'auto', 'initial', 'next' or pixel amount. + * @default 'initial' + */ + height: 'auto' | 'initial' | 'next' | number; + + /** + * Fudge factor in pixels when swapping from 2d to 3d (can be useful to correct rounding errors). + * @default 0 + */ + jitter: number; + + /** + * Allow animation to same side. + * @default false + */ + allowRepeats: boolean; + + // endregion + + // region Callbacks + + /** + * Is called before side change. + */ + onBeforeChange(this: JQuery): void; + + /** + * Is called after visible side change. + */ + onChange(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Shape.SelectorSettings; + + /** + * Class names used to determine element state. + */ + className: Shape.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + * @default 'Shape' + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + * @default 'shape' + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + * @default false + */ + silent: boolean; + + /** + * Debug output to console + * @default false + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + * @default true + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + * @default false + */ + verbose: boolean; + + error: Shape.ErrorSettings; + + // endregion + } + + namespace Shape { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'sides'> | Pick<_Impl, 'side'>) & Partial>; + + interface _Impl { + /** + * @default '.sides' + */ + sides: string; + + /** + * @default '.side' + */ + side: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'hidden'> + | Pick<_Impl, 'loading'> + | Pick<_Impl, 'active'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'hidden' + */ + hidden: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'active' + */ + active: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'side'> | Pick<_Impl, 'method'>) & Partial>; + + interface _Impl { + /** + * @default 'You tried to switch to a side that does not exist.' + */ + side: string; + + /** + * @default 'The method you called is not defined' + */ + method: string; + } + } + } + } +} diff --git a/types/fomantic-ui-sidebar.d.ts b/types/fomantic-ui-sidebar.d.ts new file mode 100644 index 0000000000..8443c11d2d --- /dev/null +++ b/types/fomantic-ui-sidebar.d.ts @@ -0,0 +1,478 @@ +declare namespace FomanticUI { + interface Sidebar { + settings: SidebarSettings; + + /** + * Attaches sidebar action to given selector. + * Default event if none specified is 'toggle'. + */ + (behavior: 'attach events', selector: string, event: string): JQuery; + + /** + * Shows sidebar. + */ + (behavior: 'show'): JQuery; + + /** + * Hides sidebar. + */ + (behavior: 'hide'): JQuery; + + /** + * Toggles visibility of sidebar. + */ + (behavior: 'toggle'): JQuery; + + /** + * Returns whether sidebar is visible. + */ + (behavior: 'is visible'): boolean; + + /** + * Returns whether sidebar is hidden. + */ + (behavior: 'is hidden'): boolean; + + /** + * Pushes page content to be visible alongside sidebar. + */ + (behavior: 'push page'): JQuery; + + /** + * Returns direction of current sidebar. + */ + (behavior: 'get direction'): string; + + /** + * Returns page content to original position. + */ + (behavior: 'pull page'): JQuery; + + /** + * Adds stylesheet to page head to trigger sidebar animations. + */ + (behavior: 'add body CSS'): JQuery; + + /** + * Removes any inline stylesheets for sidebar animation. + */ + (behavior: 'remove body CSS'): JQuery; + + /** + * Returns vendor prefixed transition end event. + */ + (behavior: 'get transition event'): string; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): SidebarSettings._Impl[K]; + (behavior: 'setting', name: K, value: SidebarSettings._Impl[K]): JQuery; + (behavior: 'setting', value: SidebarSettings): JQuery; + (settings?: SidebarSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/sidebar.html#/settings} + */ + type SidebarSettings = SidebarSettings.Param; + + namespace SidebarSettings { + type Param = ( + | Pick<_Impl, 'context'> + | Pick<_Impl, 'exclusive'> + | Pick<_Impl, 'closable'> + | Pick<_Impl, 'dimPage'> + | Pick<_Impl, 'blurring'> + | Pick<_Impl, 'scrollLock'> + | Pick<_Impl, 'returnScroll'> + | Pick<_Impl, 'delaySetup'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'mobileTransition'> + | Pick<_Impl, 'defaultTransition'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'regExp'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Sidebar Settings + + /** + * Context which sidebar will appear inside. + * @default 'body' + */ + context: string | JQuery; + + /** + * Whether multiple sidebars can be open at once. + * @default false + */ + exclusive: boolean; + + /** + * Whether sidebar can be closed by clicking on page. + * @default true + */ + closable: boolean; + + /** + * Whether to dim page contents when sidebar is visible. + * @default true + */ + dimPage: boolean; + + /** + * Whether dimmer should blur background. + * @default false + */ + blurring: boolean; + + /** + * Whether to lock page scroll when sidebar is visible. + * @default false + */ + scrollLock: boolean; + + /** + * Whether to return to original scroll position when sidebar is hidden, automatically occurs with 'transition: scale'. + * @default false + */ + returnScroll: boolean; + + /** + * When sidebar is initialized without the proper HTML, using this option will defer creation of DOM to use 'requestAnimationFrame'. + * @default false + */ + delaySetup: boolean; + + // endregion + + // region Animation Settings + + /** + * Named transition to use when animating sidebar. + * Defaults to 'auto' which selects transition from 'defaultTransition' based on direction. + * @default 'auto' + */ + transition: string; + + /** + * Named transition to use when animating when detecting mobile device. + * Defaults to 'auto' which selects transition from 'defaultTransition' based on direction. + * @default 'auto' + */ + mobileTransition: string; + + /** + * Default transitions for each direction and screen size, used with 'transition: auto'. + * @default {} + */ + defaultTransition: object; + + // endregion + + // region Callbacks + + /** + * Is called when a sidebar has finished animating in. + */ + onVisible(this: JQuery): void; + + /** + * Is called when a sidebar begins animating in. + * Returning 'false' from this callback will cancel the sidebar from showing. + */ + onShow(this: JQuery): boolean; + + /** + * Is called when a sidebar begins to hide or show. + */ + onChange(this: JQuery): void; + + /** + * Is called before a sidebar begins to animate out. + * Returning 'false' from this callback will cancel the sidebar from hiding. + */ + onHide(this: JQuery): boolean; + + /** + * Is called after a sidebar has finished animating out. + */ + onHidden(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Sidebar.SelectorSettings; + + /** + * Regular expressions used in the module. + */ + regExp: Sidebar.RegExpSettings; + + /** + * Class names used to determine element state. + */ + className: Sidebar.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Sidebar.ErrorSettings; + + // endregion + } + + namespace Sidebar { + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'bodyFixed'> + | Pick<_Impl, 'fixed'> + | Pick<_Impl, 'omitted'> + | Pick<_Impl, 'pusher'> + | Pick<_Impl, 'sidebar'> + ) & + Partial>; + + interface _Impl { + /** + * @default '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close' + */ + bodyFixed: string; + + /** + * @default '.fixed' + */ + fixed: string; + + /** + * @default 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed' + */ + omitted: string; + + /** + * @default '.pusher' + */ + pusher: string; + + /** + * @default '.ui.sidebar' + */ + sidebar: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = (Pick<_Impl, 'ios'> | Pick<_Impl, 'mobileChrome'> | Pick<_Impl, 'mobile'>) & + Partial>; + + interface _Impl { + /** + * @default /(iPad|iPhone|iPod)/g + */ + ios: RegExp; + + /** + * @default /(CriOS)/g + */ + mobileChrome: RegExp; + + /** + * @default /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g + */ + mobile: RegExp; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'active'> + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'blurring'> + | Pick<_Impl, 'closing'> + | Pick<_Impl, 'dimmed'> + | Pick<_Impl, 'ios'> + | Pick<_Impl, 'locked'> + | Pick<_Impl, 'pushable'> + | Pick<_Impl, 'pushed'> + | Pick<_Impl, 'right'> + | Pick<_Impl, 'top'> + | Pick<_Impl, 'left'> + | Pick<_Impl, 'bottom'> + | Pick<_Impl, 'visible'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'active' + */ + active: string; + + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'blurring' + */ + blurring: string; + + /** + * @default 'closing' + */ + closing: string; + + /** + * @default 'dimmed' + */ + dimmed: string; + + /** + * @default 'ios' + */ + ios: string; + + /** + * @default 'locked' + */ + locked: string; + + /** + * @default 'pushable' + */ + pushable: string; + + /** + * @default 'pushed' + */ + pushed: string; + + /** + * @default 'right' + */ + right: string; + + /** + * @default 'top' + */ + top: string; + + /** + * @default 'left' + */ + left: string; + + /** + * @default 'bottom' + */ + bottom: string; + + /** + * @default 'visible' + */ + visible: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'method'> + | Pick<_Impl, 'pusher'> + | Pick<_Impl, 'movedSidebar'> + | Pick<_Impl, 'overlay'> + | Pick<_Impl, 'notFound'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element' + */ + pusher: string; + + /** + * @default 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag' + */ + movedSidebar: string; + + /** + * @default 'The overlay setting is no longer supported, use animation: overlay' + */ + overlay: string; + + /** + * @default 'There were no elements that matched the specified selector' + */ + notFound: string; + } + } + } + } +} diff --git a/types/fomantic-ui-slider.d.ts b/types/fomantic-ui-slider.d.ts new file mode 100644 index 0000000000..8f619caeb3 --- /dev/null +++ b/types/fomantic-ui-slider.d.ts @@ -0,0 +1,379 @@ +declare namespace FomanticUI { + interface Slider { + settings: SliderSettings; + + /** + * Get the current selected value. + */ + (behavior: 'get value'): number; + + /** + * Get the selected value of one of the range thumbs. + * Provide either 'first' or 'second' as a string parameter. + */ + (behavior: 'get thumbValue', which: 'first' | 'second'): number; + + /** + * Get the number of rendered label ticks. + */ + (behavior: 'get numLabels'): number; + + /** + * Set the current slider value. + * Pass 'false' to 'fireChange' to skip the 'onChange' and 'onMove' callbacks. + */ + (behavior: 'set value', value: number, fireChange: boolean): void; + + /** + * Set the current range slider values. + * Pass 'false' to 'fireChange' to skip the 'onChange' and 'onMove' callbacks. + */ + (behavior: 'set rangeValue', fromValue: number, toValue: number, fireChange: boolean): JQuery; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): SliderSettings._Impl[K]; + (behavior: 'setting', name: K, value: SliderSettings._Impl[K]): JQuery; + (behavior: 'setting', value: SliderSettings): JQuery; + (settings?: SliderSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/slider.html#/settings} + */ + type SliderSettings = SliderSettings.Param; + + namespace SliderSettings { + type Param = ( + | Pick<_Impl, 'min'> + | Pick<_Impl, 'max'> + | Pick<_Impl, 'step'> + | Pick<_Impl, 'start'> + | Pick<_Impl, 'end'> + | Pick<_Impl, 'labelType'> + | Pick<_Impl, 'interpretLabel'> + | Pick<_Impl, 'showLabelTicks'> + | Pick<_Impl, 'smooth'> + | Pick<_Impl, 'autoAdjustLabels'> + | Pick<_Impl, 'labelDistance'> + | Pick<_Impl, 'decimalPlaces'> + | Pick<_Impl, 'pageMultiplier'> + | Pick<_Impl, 'preventCrossover'> + | Pick<_Impl, 'onChange'> + | Pick<_Impl, 'onMove'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'keys'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Slider Settings + + /** + * The lowest value the slider can be. + * @default 0 + */ + min: number; + + /** + * The max value the slider can be. + * @default 20 + */ + max: number; + + /** + * The slider step. + * Set to '0' to disable step. + * @default 1 + */ + step: number; + + /** + * The value the slider will start at. + * @default 0 + */ + start: number; + + /** + * The second value to set in case of a range slider. + * @default 20 + */ + end: number; + + /** + * The type of label to display for a labeled slider. + * Can be 'number' or 'letter'. + * @default 'number' + */ + labelType: 'number' | 'letter'; + + /** + * You can specify a function here which consumes the current label value as parameter and should return a custom label text according to the given value. + * @default false + */ + interpretLabel: false | Function; + + /** + * Show ticks on a labeled slider. + * @default false + */ + showLabelTicks: boolean; + + /** + * Define smoothness when the slider is moving. + * @default false + */ + smooth: boolean; + + /** + * Whether labels should auto adjust on window resize. + * @default true + */ + autoAdjustLabels: boolean; + + /** + * The distance between labels. + * @default 100 + */ + labelDistance: number; + + /** + * Number of decimals to use with an unstepped slider. + * @default 2 + */ + decimalPlaces: number; + + /** + * Page up/down multiplier. + * Define how many more times the steps to take on page up/down press. + * @default 2 + */ + pageMultiplier: number; + + /** + * Prevents the lower thumb to crossover the thumb handle. + * @default true + */ + preventCrossover: boolean; + + // endregion + + // region Callbacks + + /** + * Is called when the slider value is changed. + */ + onChange(this: JQuery, value: number, thumbVal: number, secondThumbVal: number): void; + + /** + * Is called when the slider is moving. + */ + onMove(this: JQuery, value: number, thumbVal: number, secondThumbVal: number): void; + + // endregion + + // region DOM Settings + + /** + * Class names used to determine element state. + */ + className: Slider.ClassNameSettings; + + /** + * DOM metadata used by module. + */ + metadata: Slider.MetadataSettings; + + /** + * Keys used by module. + */ + keys: Slider.KeySettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Slider.ErrorSettings; + + // endregion + } + + namespace Slider { + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'reversed'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'labeled'> + | Pick<_Impl, 'ticked'> + | Pick<_Impl, 'vertical'> + | Pick<_Impl, 'range'> + | Pick<_Impl, 'smooth'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'reversed' + */ + reversed: string; + + /** + * @default 'disabled' + */ + disabled: string; + + /** + * @default 'labeled' + */ + labeled: string; + + /** + * @default 'ticked' + */ + ticked: string; + + /** + * @default 'vertical' + */ + vertical: string; + + /** + * @default 'range' + */ + range: string; + + /** + * @default 'smooth' + */ + smooth: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = (Pick<_Impl, 'thumbVal'> | Pick<_Impl, 'secondThumbVal'>) & + Partial>; + + interface _Impl { + /** + * @default 'thumbVal' + */ + thumbVal: string; + + /** + * @default 'secondThumbVal' + */ + secondThumbVal: string; + } + } + + type KeySettings = KeySettings.Param; + + namespace KeySettings { + type Param = ( + | Pick<_Impl, 'pageUp'> + | Pick<_Impl, 'pageDown'> + | Pick<_Impl, 'leftArrow'> + | Pick<_Impl, 'upArrow'> + | Pick<_Impl, 'rightArrow'> + | Pick<_Impl, 'downArrow'> + ) & + Partial>; + + interface _Impl { + /** + * @default 33 + */ + pageUp: number; + + /** + * @default 34 + */ + pageDown: number; + + /** + * @default 37 + */ + leftArrow: number; + + /** + * @default 38 + */ + upArrow: number; + + /** + * @default 39 + */ + rightArrow: number; + + /** + * @default 40 + */ + downArrow: number; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'method'> | Pick<_Impl, 'notrange'>) & Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'This slider is not a range slider.' + */ + notrange: string; + } + } + } + } +} diff --git a/types/fomantic-ui-sticky.d.ts b/types/fomantic-ui-sticky.d.ts new file mode 100644 index 0000000000..2eacd3551f --- /dev/null +++ b/types/fomantic-ui-sticky.d.ts @@ -0,0 +1,261 @@ +declare namespace FomanticUI { + interface Sticky { + settings: StickySettings; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): StickySettings._Impl[K]; + (behavior: 'setting', name: K, value: StickySettings._Impl[K]): JQuery; + (behavior: 'setting', value: StickySettings): JQuery; + (settings?: StickySettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/sticky.html#/settings} + */ + type StickySettings = StickySettings.Param; + + namespace StickySettings { + type Param = ( + | Pick<_Impl, 'pushing'> + | Pick<_Impl, 'setSize'> + | Pick<_Impl, 'jitter'> + | Pick<_Impl, 'observeChanges'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'scrollContext'> + | Pick<_Impl, 'offset'> + | Pick<_Impl, 'bottomOffset'> + | Pick<_Impl, 'onReposition'> + | Pick<_Impl, 'onScroll'> + | Pick<_Impl, 'onStick'> + | Pick<_Impl, 'onUnstick'> + | Pick<_Impl, 'onTop'> + | Pick<_Impl, 'onBottom'> + // Pick<_Impl, 'selector'> | + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Sticky Settings + + /** + * Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up. + * @default false + */ + pushing: boolean; + + /** + * Sets size of fixed content to match its width before fixing to screen dynamically. + * This is used because fixed may display block or 100% width content differently than it appears before sticking. + * @default true + */ + setSize: boolean; + + /** + * Sticky container height will only be set if the difference between heights of container and context is larger than this jitter value. + * @default 5 + */ + jitter: number; + + /** + * Whether any change in 'context' DOM should automatically refresh cached sticky positions. + * @default false + */ + observeChanges: boolean; + + /** + * Context which sticky element should stick to. + * @default false + */ + context: boolean | string; + + /** + * Context which sticky should attach 'onscroll' events. + * @default window + */ + scrollContext: Window | string; + + /** + * Offset in pixels from the top of the screen when fixing element to viewport. + * @default 0 + */ + offset: number; + + /** + * Offset in pixels from the bottom of the screen when fixing element to viewport. + * @default 0 + */ + bottomOffset: number; + + // endregion + + // region Callbacks + + /** + * Callback when element is repositioned from layout change. + */ + onReposition(this: JQuery): void; + + /** + * Callback when 'requestAnimationFrame' fires from scroll handler. + */ + onScroll(this: JQuery): void; + + /** + * Callback when element is fixed to page. + */ + onStick(this: JQuery): void; + + /** + * Callback when element is unfixed from page. + */ + onUnstick(this: JQuery): void; + + /** + * Callback when element is bound to top of parent container. + */ + onTop(this: JQuery): void; + + /** + * Callback when element is bound to bottom of parent container. + */ + onBottom(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * Class names used to determine element state. + */ + className: Sticky.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Sticky.ErrorSettings; + + // endregion + } + + namespace Sticky { + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'bound'> + | Pick<_Impl, 'fixed'> + | Pick<_Impl, 'supported'> + | Pick<_Impl, 'top'> + | Pick<_Impl, 'bottom'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'bound' + */ + bound: string; + + /** + * @default 'fixed' + */ + fixed: string; + + /** + * @default 'native' + */ + supported: string; + + /** + * @default 'top' + */ + top: string; + + /** + * @default 'bottom' + */ + bottom: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'container'> + | Pick<_Impl, 'visible'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'invalidContext'> + | Pick<_Impl, 'elementSize'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'Sticky element must be inside a relative container' + */ + container: string; + + /** + * @default 'Element is hidden, you must call refresh after element becomes visible' + */ + visible: string; + + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'Context specified does not exist' + */ + invalidContext: string; + + /** + * @default 'Sticky element is larger than its container, cannot create sticky.' + */ + elementSize: string; + } + } + } + } +} diff --git a/types/fomantic-ui-tab.d.ts b/types/fomantic-ui-tab.d.ts new file mode 100644 index 0000000000..6b823c6ad8 --- /dev/null +++ b/types/fomantic-ui-tab.d.ts @@ -0,0 +1,427 @@ +declare namespace FomanticUI { + interface Tab { + settings: TabSettings; + + /** + * Attaches tab action to given selector. + * Default event if none specified is 'toggle'. + */ + (behavior: 'attach events', selector: string, event?: string): JQuery; + + /** + * Changes tab to path. + */ + (behavior: 'change tab', path: string): JQuery; + + /** + * Sets current path to state. + */ + (behavior: 'set state', path: string): JQuery; + + /** + * Returns current path. + */ + (behavior: 'get path'): string; + + /** + * Returns whether tab exists. + */ + (behavior: 'is tab'): boolean; + + /** + * Returns cached HTML for path. + */ + (behavior: 'cache read', path: string): string; + + /** + * Sets cached HTML for path. + */ + (behavior: 'cache add', path: string, html: string): JQuery; + + /** + * Removes cached HTML for path. + */ + (behavior: 'cache remove', path: string): JQuery; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + (behavior: 'setting', name: K, value?: undefined): TabSettings._Impl[K]; + (behavior: 'setting', name: K, value: TabSettings._Impl[K]): JQuery; + (behavior: 'setting', value: TabSettings): JQuery; + (settings?: TabSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/tab.html#/settings} + */ + type TabSettings = TabSettings.Param; + + namespace TabSettings { + type Param = ( + | Pick<_Impl, 'auto'> + | Pick<_Impl, 'deactivate'> + | Pick<_Impl, 'history'> + | Pick<_Impl, 'ignoreFirstLoad'> + | Pick<_Impl, 'evaluateScripts'> + | Pick<_Impl, 'autoTabActivation'> + | Pick<_Impl, 'alwaysRefresh'> + | Pick<_Impl, 'deactivate'> + | Pick<_Impl, 'cacheType'> + | Pick<_Impl, 'cache'> + | Pick<_Impl, 'apiSettings'> + | Pick<_Impl, 'historyType'> + | Pick<_Impl, 'path'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'childrenOnly'> + | Pick<_Impl, 'maxDepth'> + | Pick<_Impl, 'onFirstLoad'> + | Pick<_Impl, 'onLoad'> + | Pick<_Impl, 'onRequest'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onBeforeChange'> + | Pick<_Impl, 'templates'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Tab Settings + + /** + * Whether tab should load remote content as same url as history. + * @default false + */ + auto: boolean; + + /** + * When set to 'siblings' will only deactivate elements that are DOM siblings with the activated element. + * When set to 'all' the component will deactivate all other elements initialized at the same time. + * @default 'siblings' + */ + deactivate: 'siblings' | 'all'; + + /** + * Whether to record history events for tab changes. + * @default false + */ + history: boolean; + + /** + * Do not load content remotely on first tab load. + * Useful when open tab is rendered on server. + * @default false + */ + ignoreFirstLoad: boolean; + + /** + * Whether inline scripts in tab HTML should be parsed on tab load. + * Defaults to 'once', parsing only on first load. + * Can also be set to 'true' or 'false' to always parse or never parse inline scripts. + * @default 'once' + */ + evaluateScripts: 'once' | boolean; + + /** + * When 'true' and no active tab exists, the first available tab will be activated. + * When a string is given and no active tab exists, the tab those named path matches the string will be activated. + * When 'false' no active tab detection will happen. + * @default true + */ + autoTabActivation: boolean | string; + + /** + * Tab should reload content every time it is opened. + * @default false + */ + alwaysRefresh: boolean; + + /** + * Can be set to either 'response', 'DOM' or 'html'. + * Using 'DOM' will cache the a clone of the DOM tree, preserving all events as they existed on render. + * 'response' will cache the original response on load, this way callbacks always receive the same content. + * Using 'html' will cache the resulting html after all callbacks, making sure any changes to content are preserved. + * @default 'response' + */ + cacheType: 'response' | 'DOM' | 'html'; + + /** + * Tab should cache content after loading locally to avoid server trip on second load. + * @default true + */ + cache: boolean; + + /** + * Settings object for '$.api' call. + * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} + * @default false + */ + apiSettings: false | FomanticUI.APISettings; + + /** + * Can be set to 'hash' or 'state'. + * 'hash' will use an in-page link to create history events. + * 'state' will use DOM History and load pages from server on refresh. + * @see {@link https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history} + * @default 'hash' + */ + historyType: 'hash' | 'state'; + + /** + * When using historyType 'state' you must specify the base URL for all internal links. + * @default false + */ + path: boolean; + + /** + * Tabs are limited to those found inside this context. + * @default false + */ + context: false | string; + + /** + * If enabled limits tabs to children of passed context. + * @default false + */ + childrenOnly: boolean; + + /** + * Maximum amount of nested tabs allowed (avoids recursion). + * @default 25 + */ + maxDepth: boolean; + + // endregion + + // region Callbacks + + /** + * Callback only the first time a tab is loaded. + */ + onFirstLoad(this: JQuery, tabPath: string, parameterArray: string, historyEvent: string): void; + + /** + * Callback every time a tab is loaded. + */ + onLoad(this: JQuery, tabPath: string, parameterArray: string, historyEvent: string): void; + + /** + * Called when a tab begins loading remote content. + */ + onRequest(this: JQuery, tabPath: string): void; + + /** + * Called after a tab becomes visible. + */ + onVisible(this: JQuery, tabPath: string): void; + + /** + * Called before a tab is about to be changed. + * Returning 'false' will cancel the tab change. + */ + onBeforeChange(this: JQuery, tabPath: string): boolean; + + // endregion + + // region DOM Settings + + /** + * Functions used to return content. + */ + templates: Tab.TemplateSettings; + + /** + * DOM Selectors used internally. + * Selectors used to find parts of a module. + */ + selector: Tab.SelectorSettings; + + /** + * DOM metadata used by module. + */ + metadata: Tab.MetadataSettings; + + /** + * Class names used to determine element state. + */ + className: Tab.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Tab.ErrorSettings; + + // endregion + } + + namespace Tab { + type TemplateSettings = TemplateSettings.Param; + + namespace TemplateSettings { + type Param = Pick<_Impl, 'determineTitle'> & Partial>; + + interface _Impl { + /** + * Returns page title + * @default Function + */ + determineTitle: Function; + } + } + + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = (Pick<_Impl, 'tabs'> | Pick<_Impl, 'parent'>) & Partial>; + + interface _Impl { + /** + * @default '.ui.tab' + */ + tabs: string; + + /** + * @default '.ui:not(.menu)' + */ + parent: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = (Pick<_Impl, 'tab'> | Pick<_Impl, 'loaded'> | Pick<_Impl, 'promise'>) & + Partial>; + + interface _Impl { + /** + * @default 'tab' + */ + tab: string; + + /** + * @default 'loaded' + */ + loaded: string; + + /** + * @default 'promise' + */ + promise: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'loading'> | Pick<_Impl, 'active'>) & Partial>; + + interface _Impl { + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'active' + */ + active: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = ( + | Pick<_Impl, 'api'> + | Pick<_Impl, 'method'> + | Pick<_Impl, 'missingTab'> + | Pick<_Impl, 'noContent'> + | Pick<_Impl, 'path'> + | Pick<_Impl, 'recursion'> + | Pick<_Impl, 'state'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'You attempted to load content without API module' + */ + api: string; + + /** + * @default 'The method you called is not defined' + */ + method: string; + + /** + * @default 'Activated tab cannot be found for this context.' + */ + missingTab: string; + + /** + * @default 'The tab you specified is missing a content url.' + */ + noContent: string; + + /** + * @default 'History enabled, but no path was specified' + */ + path: string; + + /** + * @default 'Max recursive depth reached' + */ + recursion: string; + + /** + * @default 'The state library has not been initialized' + */ + state: string; + } + } + } + } +} diff --git a/types/fomantic-ui-tests.ts b/types/fomantic-ui-tests.ts new file mode 100644 index 0000000000..981b78ee84 --- /dev/null +++ b/types/fomantic-ui-tests.ts @@ -0,0 +1,23 @@ +$().accordion(); // $ExpectType JQuery + +$().calendar(); // $ExpectType JQuery +$().checkbox(); // $ExpectType JQuery +$('body').dimmer(); // $ExpectType JQuery + +$().embed(); // $ExpectType JQuery +$().flyout(); // $ExpectType JQuery +$().form(); // $ExpectType JQuery +$().modal(); // $ExpectType JQuery +$().nag(); // $ExpectType JQuery +$().popup(); // $ExpectType JQuery +$().progress(); // $ExpectType JQuery +$().rating(); // $ExpectType JQuery +$().search(); // $ExpectType JQuery +$().shape(); // $ExpectType JQuery +$().sidebar(); // $ExpectType JQuery +$().slider(); // $ExpectType JQuery +$().sticky(); // $ExpectType JQuery +$().tab(); // $ExpectType JQuery +$('body').toast(); // $ExpectType JQuery +$().transition(); // $ExpectType JQuery +$().visibility(); // $ExpectType JQuery diff --git a/types/fomantic-ui-toast.d.ts b/types/fomantic-ui-toast.d.ts new file mode 100644 index 0000000000..a6a35b95a0 --- /dev/null +++ b/types/fomantic-ui-toast.d.ts @@ -0,0 +1,595 @@ +declare namespace FomanticUI { + interface Toast { + settings: ToastSettings; + + (behavior: 'refresh' | 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): ToastSettings._Impl[K]; + (behavior: 'setting', name: K, value: ToastSettings._Impl[K]): JQuery; + (behavior: 'setting', value: ToastSettings): JQuery; + (settings?: ToastSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/toast.html#/settings} + */ + type ToastSettings = ToastSettings.Param; + + namespace ToastSettings { + type Param = ( + | Pick<_Impl, 'position'> + | Pick<_Impl, 'horizontal'> + | Pick<_Impl, 'class'> + | Pick<_Impl, 'classProgress'> + | Pick<_Impl, 'classActions'> + | Pick<_Impl, 'classImage'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'displayTime'> + | Pick<_Impl, 'minDisplayTime'> + | Pick<_Impl, 'wordsPerMinute'> + | Pick<_Impl, 'showImage'> + | Pick<_Impl, 'showIcon'> + | Pick<_Impl, 'closeIcon'> + | Pick<_Impl, 'closeOnClick'> + | Pick<_Impl, 'cloneModule'> + | Pick<_Impl, 'showProgress'> + | Pick<_Impl, 'progressUp'> + | Pick<_Impl, 'pauseOnHover'> + | Pick<_Impl, 'compact'> + | Pick<_Impl, 'opacity'> + | Pick<_Impl, 'newestOnTop'> + | Pick<_Impl, 'preserveHTML'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onClick'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onRemove'> + | Pick<_Impl, 'onApprove'> + | Pick<_Impl, 'onDeny'> + | Pick<_Impl, 'title'> + | Pick<_Impl, 'message'> + | Pick<_Impl, 'actions'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'selector'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'icons'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Toast Settings + + /** + * Sets where the toast can be displayed. Can be 'top right', 'top center', 'top left', 'bottom right', 'bottom center' and 'bottom left'. + * + * @default 'top right' + */ + position: string; + + /** + * If the toasts should stack horizontal instead of vertical. + * + * @default false + */ + horizontal: boolean; + + /** + * Define the class of notification. Can be any existing color definition or 'info', 'success', 'warning' and 'error'. + * If ui message is used in className.toast option (see below), this option can hold any supported class of the message component. + * + * @default 'neutral' + */ + class: string; + + /** + * Can hold a string to be added to the progress bar class, for example a separate color + * + * @default false + */ + classProgress: false | string; + + /** + * Can hold a string to be added to the actions class to control its appearance. + * Usually a combination of 'basic', 'left', 'top', 'bottom', 'vertical' and 'attached'. + * + * @default false + */ + classActions: false | string; + + /** + * Can hold a string to be added to the image class. 'mini', 'tiny', 'small' and 'avatar' are supported out of the box. + * + * @default 'mini' + */ + classImage: string; + + /** + * Selector or jquery object specifying the area to attach the toast container to. + * + * @default 'body' + */ + context: string | JQuery; + + /** + * Set the time (in ms) of the toast appearance. Set '0' to disable the automatic dismissal. + * Set 'auto' to calculate the time by the given amount of words within the toast. + * + * @default 3000 + */ + displayTime: number | 'auto'; + + /** + * Minimum display time in case displayTime is set to 'auto'. + * + * @default 1000 + */ + minDisplayTime: number; + + /** + * Base to calculate display time in case displayTime is set to 'auto'. + * + * @default 120 + */ + wordsPerMinute: number; + + /** + * If an URL to an image is given, that image will be shown to the left of the toast. + * + * @default false + */ + showImage: false | string; + + /** + * Define if the toast should display an icon which matches to a given class. + * If a string is given, this will be used as icon classname. + * + * @default true + */ + showIcon: boolean | string; + + /** + * This will make the toast closable by the top right corner icon instead of clicking anywhere on the toast when set to 'true'. + * When set to 'left' the closeIcon is shown to the left instead of right. + * + * @default false + */ + closeIcon: boolean | 'left'; + + /** + * Set to 'false' to avoid closing the toast when it is clicked. + * + * @default true + */ + closeOnClick: boolean; + + /** + * If a given DOM-Node should stay reusable by using a clone of it as toast. + * If set to false the original DOM-Node will be detached and removed from the DOM then the toast is closed. + * + * @default true + */ + cloneModule: boolean; + + /** + * Displays a progress bar on 'top' or 'bottom' increasing until 'displayTime' is reached. + * 'false' won't display any progress bar. If 'displayTime' option is '0', this option is ignored. + * + * @default false + */ + showProgress: boolean | 'top' | 'bottom'; + + /** + * 'true' Increases the progress bar from 0% to 100%. + * 'false' Decreases the progress bar from 100% to 0%. + * + * @default false + */ + progressUp: boolean; + + /** + * Set to 'false' if the display timer should not pause when the toast is hovered. + * + * @default true + */ + pauseOnHover: boolean; + + /** + * 'true' will display the toast in a fixed width, 'false' displays the toast responsively with dynamic width. + * + * @default true + */ + compact: boolean; + + /** + * Opacity value of the toast after the show-transition. + * + * @default 1 + */ + opacity: number; + + /** + * Define if new toasts should be displayed above the others. + * + * @default false + */ + newestOnTop: boolean; + + /** + * Whether HTML included in given title, message or actions should be preserved. + * Set to 'false' in case you work with untrusted 3rd party content. + * + * @default true + */ + preserveHTML: boolean; + + /** + * Settings to set the transitions and durations during the show or the hide of a toast. + */ + transition: Toast.TransitionSettings; + + // endregion + + // region Callbacks + + /** + * Callback before toast is shown. Returning 'false' from this callback will cancel the toast from showing. + */ + onShow(this: JQuery): void; + + /** + * Callback before toast is shown. Returning false from this callback will cancel the toast from showing.. + */ + onVisible(this: JQuery): void; + + /** + * Callback after popup is clicked in + */ + onClick(this: JQuery): void; + + /** + * Callback before toast is hidden. Returning 'false' from this callback will cancel the toast from hiding. + */ + onHide(this: JQuery): void; + + /** + * Callback after toast is hidden. + */ + onHidden(this: JQuery): void; + + /** + * Callback before toast is destroyed. + */ + onRemove(this: JQuery): void; + + /** + * Callback when an existing button with class 'positive' or 'ok' or 'approve' is clicked. Return 'false' to avoid closing the toast. + */ + onApprove(this: JQuery): void; + + /** + * Callback when an existing button with class 'negative' or 'cancel' or 'deny' is clicked. Return 'false' to avoid closing the toast. + */ + onDeny(this: JQuery): void; + + // endregion + + // region Content Settings + + /** + * A title for the toast. Leave empty to not display it. + * + * @default '' + */ + title: string; + + /** + * Message to display. + * + * @default '' + */ + message: string; + + /** + * An array of objects. Each object defines an action with 'properties' 'text', 'class', 'icon' and 'click'. + */ + actions: Toast.ActionsSettings; + + // endregion + + // region DOM Settings + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * DOM Selectors used internally. + */ + selector: Toast.SelectorSettings; + + /** + * Class names used to attach style to state. + */ + className: Toast.ClassNameSettings; + + /** + * Icon names used internally. + */ + icons: Toast.IconSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + error: Toast.ErrorSettings; + + // endregion + } + } + + namespace Toast { + type TransitionSettings = TransitionSettings.Param; + + namespace TransitionSettings { + type Param = ( + | Pick<_Impl, 'showMethod'> + | Pick<_Impl, 'showDuration'> + | Pick<_Impl, 'hideMethod'> + | Pick<_Impl, 'hideDuration'> + | Pick<_Impl, 'closeEasing'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'scale' + */ + showMethod: string; + + /** + * @default 500 + */ + showDuration: number; + + /** + * @default 'scale' + */ + hideMethod: string; + + /** + * @default 500 + */ + hideDuration: number; + + /** + * @default 'closeEasing' + */ + closeEasing: string; + } + } + + type ActionsSettings = ActionsSettings.Param; + + namespace ActionsSettings { + type Param = (Pick<_Impl, 'text'> | Pick<_Impl, 'class'> | Pick<_Impl, 'icon'> | Pick<_Impl, 'click'>) & + Partial>; + + interface _Impl { + /** + * @default 'Wait' + */ + text: string; + + /** + * @default 'red' + */ + class: string; + + /** + * @default 'exclamation' + */ + icon: string; + + /** + * @default function() {} + */ + click: () => void; + } + } + + type SelectorSettings = SelectorSettings.Param; + + namespace SelectorSettings { + type Param = ( + | Pick<_Impl, 'container'> + | Pick<_Impl, 'box'> + | Pick<_Impl, 'toast'> + | Pick<_Impl, 'input'> + | Pick<_Impl, 'approve'> + | Pick<_Impl, 'deny'> + ) & + Partial>; + + interface _Impl { + /** + * @default '.ui.toast-container' + */ + container: string; + + /** + * @default '.toast-box' + */ + box: string; + + /** + * @default '.ui.toast' + */ + toast: string; + + /** + * @default 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown' + */ + input: string; + + /** + * @default '.actions .positive, .actions .approve, .actions .ok' + */ + approve: string; + + /** + * @default '.actions .negative, .actions .deny, .actions .cancel' + */ + deny: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'container'> + | Pick<_Impl, 'box'> + | Pick<_Impl, 'progress'> + | Pick<_Impl, 'toast'> + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'visible'> + | Pick<_Impl, 'content'> + | Pick<_Impl, 'title'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'toast-container' + */ + container: string; + + /** + * @default 'toast-box' + */ + box: string; + + /** + * @default 'ui attached active progress' + */ + progress: string; + + /** + * @default 'ui toast' + */ + toast: string; + + /** + * @default 'icon' + */ + icon: string; + + /** + * @default 'visible' + */ + visible: string; + + /** + * @default 'content' + */ + content: string; + + /** + * @default 'header' + */ + title: string; + } + } + + type IconSettings = IconSettings.Param; + + namespace IconSettings { + type Param = ( + | Pick<_Impl, 'info'> + | Pick<_Impl, 'success'> + | Pick<_Impl, 'warning'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'info' + */ + info: string; + + /** + * @default 'checkmark' + */ + success: string; + + /** + * @default 'warning' + */ + warning: string; + + /** + * @default 'times' + */ + error: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'method'> | Pick<_Impl, 'noElement'> | Pick<_Impl, 'verticalCard'>) & + Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'This module requires ui transitions.' + */ + noElement: string; + + /** + * @default 'Vertical but not attached actions are not supported for card layout.' + */ + verticalCard: string; + } + } + } +} diff --git a/types/fomantic-ui-transition.d.ts b/types/fomantic-ui-transition.d.ts new file mode 100644 index 0000000000..1d9cd36fd3 --- /dev/null +++ b/types/fomantic-ui-transition.d.ts @@ -0,0 +1,405 @@ +declare namespace FomanticUI { + interface Transition { + settings: TransitionSettings; + + /** + * Stop current animation and preserve queue. + */ + (behavior: 'stop'): JQuery; + + /** + * Stop current animation and queued animations. + */ + (behavior: 'stop all'): JQuery; + + /** + * Clears all queued animations. + */ + (behavior: 'clear queue'): JQuery; + + /** + * Stop current animation and show element. + */ + (behavior: 'show'): JQuery; + + /** + * Stop current animation and hide element. + */ + (behavior: 'hide'): JQuery; + + /** + * Toggles between hide and show. + */ + (behavior: 'toggle'): JQuery; + + /** + * Forces reflow using a more expensive but stable method. + */ + (behavior: 'force repaint'): JQuery; + + /** + * Triggers reflow on element. + */ + (behavior: 'repaint'): JQuery; + + /** + * Resets all conditions changes during transition. + */ + (behavior: 'reset'): JQuery; + + /** + * Enables animation looping. + */ + (behavior: 'looping'): JQuery; + + /** + * Removes looping state from element. + */ + (behavior: 'remove looping'): JQuery; + + /** + * Adds disabled state (stops ability to animate). + */ + (behavior: 'disable'): JQuery; + + /** + * Removes disabled state. + */ + (behavior: 'enable'): JQuery; + + /** + * Modifies element animation duration. + */ + (behavior: 'set duration', duration: number): JQuery; + + /** + * Saves all class names and styles to cache to be retrieved after animation. + */ + (behavior: 'save conditions'): JQuery; + + /** + * Adds back cached names and styles to element. + */ + (behavior: 'restore conditions'): JQuery; + + /** + * Returns vendor prefixed animation property for animationname. + */ + (behavior: 'get animation name'): string; + + /** + * Returns vendor prefixed animation property for animationend. + */ + (behavior: 'get animation event'): string; + + /** + * Returns whether element is currently visible. + */ + (behavior: 'is visible'): boolean; + + /** + * Returns whether transition is currently occurring. + */ + (behavior: 'is animating'): boolean; + + /** + * Returns whether animation looping is set. + */ + (behavior: 'is looping'): boolean; + + /** + * Returns whether animations are supported. + */ + (behavior: 'is supported'): boolean; + + /** + * Destroys instance and removes all events. + */ + (behavior: 'destroy'): JQuery; + + ( + behavior: 'setting', + name: K, + value?: undefined, + ): TransitionSettings._Impl[K]; + (behavior: 'setting', name: K, value: TransitionSettings._Impl[K]): JQuery; + (behavior: 'setting', value: TransitionSettings): JQuery; + (settings?: TransitionSettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/modules/transition.html#/settings} + */ + type TransitionSettings = TransitionSettings.Param; + + namespace TransitionSettings { + type Param = ( + | Pick<_Impl, 'animation'> + | Pick<_Impl, 'interval'> + | Pick<_Impl, 'reverse'> + | Pick<_Impl, 'displayType'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'useFailSafe'> + | Pick<_Impl, 'allowRepeats'> + | Pick<_Impl, 'queue'> + | Pick<_Impl, 'skipInlineHidden'> + | Pick<_Impl, 'onShow'> + | Pick<_Impl, 'onBeforeShow'> + | Pick<_Impl, 'onVisible'> + | Pick<_Impl, 'onHide'> + | Pick<_Impl, 'onBeforeHide'> + | Pick<_Impl, 'onHidden'> + | Pick<_Impl, 'onStart'> + | Pick<_Impl, 'onComplete'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'errors'> + ) & + Partial>; + + interface _Impl { + // region Transition Settings + + /** + * Named animation event to used. + * Must be defined in CSS. + * @default 'fade' + */ + animation: string; + + /** + * Interval in MS between each elements transition. + * @default 0 + */ + interval: number; + + /** + * When an interval is specified, sets order of animations. 'auto' reverses only animations that are hiding. + * @default 'auto' + */ + reverse: string | boolean; + + /** + * Specify the final display type (block, inline-block etc) so that it doesn't have to be calculated. + * @default false + */ + displayType: false | string; + + /** + * Specify the final display type (block, inline-block etc) so that it doesn't have to be calculated. + * @default '500ms' + */ + duration: string; + + /** + * If enabled a 'timeout' will be added to ensure 'animationend' callback occurs even if element is hidden. + * @default true + */ + useFailSafe: boolean; + + /** + * If enabled will allow same animation to be queued while it is already occurring. + * @default false + */ + allowRepeats: boolean; + + /** + * Whether to automatically queue animation if another is occurring. + * @default true + */ + queue: boolean; + + /** + * Whether initially inline hidden objects should be skipped for transition. + * Useful, if you do the transition for child objects also, but want to have inline hidden children (defined by style="display:none;") still kept hidden while the parent gets animated. + * Accordion uses this. + * @default false + */ + skipInlineHidden: boolean; + + // endregion + + // region Callbacks + + /** + * Callback on each transition that changes visibility to shown. + * Returning 'false' from this callback will cancel the transition from showing. + */ + onShow(this: JQuery): boolean; + + /** + * Callback right before the show transition should start. + * The 'showFunction' parameter has to be called inside the callback to trigger the transition show + */ + onBeforeShow(this: JQuery, showFunction: Function): void; + + /** + * Callback once the show transition has finished. + */ + onVisible(this: JQuery): void; + + /** + * Callback on each transition that changes visibility to hidden. + * Returning 'false' from this callback will cancel the transition from hiding. + */ + onHide(this: JQuery): boolean; + + /** + * Callback right before the hide transition should start. + * The 'hideFunction' parameter has to be called inside the callback to trigger the transition hide. + */ + onBeforeHide(this: JQuery, hideFunction: Function): void; + + /** + * Callback once the transition hide has finished. + */ + onHidden(this: JQuery): void; + + /** + * Callback on animation start, useful for queued animations. + */ + onStart(this: JQuery): void; + + /** + * Callback on each transition complete. + */ + onComplete(this: JQuery): void; + + // endregion + + // region DOM Settings + + /** + * Class names used to determine element state. + */ + className: Transition.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + */ + silent: boolean; + + /** + * Debug output to console + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + */ + verbose: boolean; + + errors: Transition.ErrorSettings; + + // endregion + } + + namespace Transition { + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = ( + | Pick<_Impl, 'animating'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'hidden'> + | Pick<_Impl, 'inward'> + | Pick<_Impl, 'loading'> + | Pick<_Impl, 'looping'> + | Pick<_Impl, 'outward'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'visible'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'animating' + */ + animating: string; + + /** + * @default 'disabled' + */ + disabled: string; + + /** + * @default 'hidden' + */ + hidden: string; + + /** + * @default 'in' + */ + inward: string; + + /** + * @default 'loading' + */ + loading: string; + + /** + * @default 'looping' + */ + looping: string; + + /** + * @default 'out' + */ + outward: string; + + /** + * @default 'transition' + */ + transition: string; + + /** + * @default 'visible' + */ + visible: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'noAnimation'> | Pick<_Impl, 'method'>) & Partial>; + + interface _Impl { + /** + * @default 'You called a rating action that was not defined' + */ + noAnimation: string; + + /** + * @default 'The method you called is not defined' + */ + method: string; + } + } + } + } +} diff --git a/types/fomantic-ui-visibility.d.ts b/types/fomantic-ui-visibility.d.ts new file mode 100644 index 0000000000..3a3c05a8ff --- /dev/null +++ b/types/fomantic-ui-visibility.d.ts @@ -0,0 +1,422 @@ +declare namespace FomanticUI { + interface Visibility { + settings: VisibilitySettings; + + /** + * Disable callbacks temporarily. + * This is useful if you need to adjust scroll position and do not want to trigger callbacks during the position change. + */ + (behavior: 'disable callbacks'): JQuery; + + /** + * Re-enable callbacks. + */ + (behavior: 'enable callbacks'): JQuery; + + /** + * Returns whether element is on screen. + */ + (behavior: 'is on screen'): boolean; + + /** + * Returns whether element is off screen. + */ + (behavior: 'is off screen'): boolean; + + /** + * Returns number of pixels passed in current element from top of element. + */ + (behavior: 'get pixels passed'): number; + + /** + * Returns element calculations as object. + */ + (behavior: 'get element calculations'): object; + + /** + * Returns screen calculations as object. + */ + (behavior: 'get screen calculations'): object; + + /** + * Returns screen size as object. + */ + (behavior: 'get screen size'): object; + + (behavior: 'destroy'): JQuery; + ( + behavior: 'setting', + name: K, + value?: undefined, + ): VisibilitySettings._Impl[K]; + (behavior: 'setting', name: K, value: VisibilitySettings._Impl[K]): JQuery; + (behavior: 'setting', value: VisibilitySettings): JQuery; + (settings?: VisibilitySettings): JQuery; + } + + /** + * @see {@link https://fomantic-ui.com/behaviors/visibility.html#/settings} + */ + type VisibilitySettings = VisibilitySettings.Param; + + namespace VisibilitySettings { + type Param = ( + | Pick<_Impl, 'observeChanges'> + | Pick<_Impl, 'initialCheck'> + | Pick<_Impl, 'refreshOnLoad'> + | Pick<_Impl, 'refreshOnResize'> + | Pick<_Impl, 'checkOnRefresh'> + | Pick<_Impl, 'once'> + | Pick<_Impl, 'continuous'> + | Pick<_Impl, 'offset'> + | Pick<_Impl, 'includeMargin'> + | Pick<_Impl, 'context'> + | Pick<_Impl, 'throttle'> + | Pick<_Impl, 'type'> + | Pick<_Impl, 'zIndex'> + | Pick<_Impl, 'transition'> + | Pick<_Impl, 'duration'> + | Pick<_Impl, 'onOnScreen'> + | Pick<_Impl, 'onOffScreen'> + | Pick<_Impl, 'onPassing'> + | Pick<_Impl, 'onTopVisible'> + | Pick<_Impl, 'onBottomVisible'> + | Pick<_Impl, 'onTopPassed'> + | Pick<_Impl, 'onBottomPassed'> + | Pick<_Impl, 'onPassingReverse'> + | Pick<_Impl, 'onTopVisibleReverse'> + | Pick<_Impl, 'onBottomVisibleReverse'> + | Pick<_Impl, 'onTopPassedReverse'> + | Pick<_Impl, 'onBottomPassedReverse'> + | Pick<_Impl, 'onLoad'> + | Pick<_Impl, 'onAllLoaded'> + | Pick<_Impl, 'onFixed'> + | Pick<_Impl, 'onUnfixed'> + | Pick<_Impl, 'onUpdate'> + | Pick<_Impl, 'onRefresh'> + | Pick<_Impl, 'metadata'> + | Pick<_Impl, 'className'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'namespace'> + | Pick<_Impl, 'silent'> + | Pick<_Impl, 'debug'> + | Pick<_Impl, 'performance'> + | Pick<_Impl, 'verbose'> + | Pick<_Impl, 'error'> + ) & + Partial>; + + interface _Impl { + // region Visibility Settings + + /** + * When set to 'false' a callback will occur each time an element passes the threshold for a condition. + * @default true + */ + once: boolean; + + /** + * When set to 'true' a callback will occur anytime an element passes a condition not just immediately after the threshold is met. + * @default false + */ + continuous: boolean; + + /** + * Set to 'image' to load images when on screen. Set to 'fixed' to add class name 'fixed' when passed. + * @default false + */ + type: false | 'image' | 'fixed'; + + /** + * Whether visibility conditions should be checked immediately on init. + * @default true + */ + initialCheck: boolean; + + /** + * The scroll context visibility should use. + * @default window + */ + context: Window | string | JQuery; + + /** + * Whether visibility conditions should be checked on window load. + * This ensures that after images load content positions will be updated correctly. + * @default true + */ + refreshOnLoad: boolean; + + /** + * Whether visibility conditions should be checked on window resize. + * Useful when content resizes causes continuous changes in position. + * @default true + */ + refreshOnResize: boolean; + + /** + * Whether visibility conditions should be checked on calls to refresh. + * These calls can be triggered from either resize, load or manually calling. + * @default true + */ + checkOnRefresh: boolean; + + /** + * Specify a z-index when using type: 'fixed'. + * @default 10 + */ + zIndex: number; + + /** + * Value that context 'scrollTop' should be adjusted in pixels. + * Useful for making content appear below content fixed to the page. + * @default 0 + */ + offset: number; + + /** + * Whether element calculations should include its margin. + * @default false + */ + includeMargin: boolean; + + /** + * When set to an 'integer', scroll position will be debounced using this ms value. + * 'false' will debounce with requestAnimationFrame. + * @default false + */ + throttle: boolean | number; + + /** + * Whether to automatically refresh content when changes are made to the element's DOM subtree. + * @default true + */ + observeChanges: boolean; + + /** + * When using type: image allows you to specify transition when showing a loaded image. + * @default false + */ + transition: false | string; + + /** + * When using type: image allows you to specify transition duration. + * @default 1000 + */ + duration: number; + + // endregion + + // region Callbacks + + /** + * Any part of element is in current scroll viewport. + */ + onOnScreen(this: JQuery): void; + + /** + * No part of element is in current scroll viewport. + */ + onOffScreen(this: JQuery): void; + + /** + * No part of element is in current scroll viewport. + */ + onOffScreen(this: JQuery): void; + + /** + * Element's top edge has passed bottom of screen. + */ + onTopVisible(this: JQuery): void; + + /** + * Element's top edge has passed top of the screen. + */ + onTopPassed(this: JQuery): void; + + /** + * Element's bottom edge has passed bottom of screen. + */ + onBottomVisible(this: JQuery): void; + + /** + * Any part of an element is visible on screen. + */ + onPassing(this: JQuery): void; + + /** + * Element's bottom edge has passed top of screen. + */ + onBottomPassed(this: JQuery): void; + + /** + * Element's top edge has not passed bottom of screen. + */ + onTopVisibleReverse(this: JQuery): void; + + /** + * Element's top edge has not passed top of the screen. + */ + onTopPassedReverse(this: JQuery): void; + + /** + * Element's bottom edge has not passed bottom of screen. + */ + onBottomVisibleReverse(this: JQuery): void; + + /** + * Element's top has not passed top of screen but bottom has. + */ + onPassingReverse(this: JQuery): void; + + /** + * Element's bottom edge has not passed top of screen. + */ + onBottomPassedReverse(this: JQuery): void; + + /** + * Occurs after an image has completed loading. + */ + onLoad(this: JQuery): void; + + /** + * Occurs after all 'img' initialized at the same time have loaded. + */ + onAllLoaded(this: JQuery): void; + + /** + * Occurs after element has been assigned position fixed. + */ + onFixed(this: JQuery): void; + + /** + * Occurs after element has been removed from fixed position. + */ + onUnfixed(this: JQuery): void; + + /** + * Occurs each time an elements calculations are updated. + */ + onUpdate(this: JQuery, calculations: object): void; + + /** + * Occurs whenever element's visibility is refreshed. + */ + onRefresh(this: JQuery, calculations: object): void; + + // endregion + + // region DOM Settings + + /** + * Metadata used internally. + */ + metadata: Visibility.MetadataSettings; + + /** + * Class names used to determine element state. + */ + className: Visibility.ClassNameSettings; + + // endregion + + // region Debug Settings + + /** + * Name used in log statements + * @default 'Visibility' + */ + name: string; + + /** + * Event namespace. Makes sure module teardown does not effect other events attached to an element. + * @default 'visibility' + */ + namespace: string; + + /** + * Silences all console output including error messages, regardless of other debug settings. + * @default false + */ + silent: boolean; + + /** + * Debug output to console + * @default false + */ + debug: boolean; + + /** + * Show console.table output with performance metrics + * @default true + */ + performance: boolean; + + /** + * Debug output includes all internal behaviors + * @default false + */ + verbose: boolean; + + error: Visibility.ErrorSettings; + + // endregion + } + + namespace Visibility { + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = Pick<_Impl, 'src'> & Partial>; + + interface _Impl { + /** + * @default 'src' + */ + src: string; + } + } + + type ClassNameSettings = ClassNameSettings.Param; + + namespace ClassNameSettings { + type Param = (Pick<_Impl, 'fixed'> | Pick<_Impl, 'placeholder'> | Pick<_Impl, 'visible'>) & + Partial>; + + interface _Impl { + /** + * @default 'fixed' + */ + fixed: string; + + /** + * @default 'constraint' + */ + placeholder: string; + + /** + * @default 'visible' + */ + visible: string; + } + } + + type ErrorSettings = ErrorSettings.Param; + + namespace ErrorSettings { + type Param = (Pick<_Impl, 'method'> | Pick<_Impl, 'visible'>) & Partial>; + + interface _Impl { + /** + * @default 'The method you called is not defined.' + */ + method: string; + + /** + * @default 'Element is hidden, you must call refresh after element becomes visible' + */ + visible: string; + } + } + } + } +} diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000000..68c50eeed1 --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,57 @@ +// Type definitions for fomantic-ui 2.9 +// Project: https://github.com/fomantic/Fomantic-UI +// Definitions by: Fomantic Team +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// +/// + +interface JQuery { + accordion: FomanticUI.Accordion; + api: FomanticUI.API; + calendar: FomanticUI.Calendar; + checkbox: FomanticUI.Checkbox; + dimmer: FomanticUI.Dimmer; + dropdown: FomanticUI.Dropdown; + embed: FomanticUI.Embed; + flyout: FomanticUI.Flyout; + form: FomanticUI.Form; + modal: FomanticUI.Modal; + nag: FomanticUI.Nag; + popup: FomanticUI.Popup; + progress: FomanticUI.Progress; + rating: FomanticUI.Rating; + search: FomanticUI.Search; + shape: FomanticUI.Shape; + sidebar: FomanticUI.Sidebar; + slider: FomanticUI.Slider; + sticky: FomanticUI.Sticky; + tab: FomanticUI.Tab; + toast: FomanticUI.Toast; + transition: FomanticUI.Transition; + visibility: FomanticUI.Visibility; +} diff --git a/types/tsconfig.json b/types/tsconfig.json new file mode 100644 index 0000000000..4e47de98c3 --- /dev/null +++ b/types/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "ES5", "DOM" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "fomantic-ui-tests.ts" + ] +} diff --git a/types/tslint.json b/types/tslint.json new file mode 100644 index 0000000000..794cb4bf3e --- /dev/null +++ b/types/tslint.json @@ -0,0 +1 @@ +{ "extends": "@definitelytyped/dtslint/dt.json" } From ffc887b23cea043720f37f4ed9d3d105aff155c8 Mon Sep 17 00:00:00 2001 From: prudho Date: Thu, 15 Jun 2023 15:58:16 +0200 Subject: [PATCH 2/3] feat: add missing behaviors and parameters --- types/fomantic-ui-calendar.d.ts | 90 +++++- types/fomantic-ui-dropdown.d.ts | 529 +++++++++++++++++++++++++++++++- types/fomantic-ui-modal.d.ts | 11 + types/fomantic-ui-search.d.ts | 2 +- types/fomantic-ui-toast.d.ts | 25 ++ 5 files changed, 653 insertions(+), 4 deletions(-) diff --git a/types/fomantic-ui-calendar.d.ts b/types/fomantic-ui-calendar.d.ts index 01cbf47cd3..c2e69c772e 100644 --- a/types/fomantic-ui-calendar.d.ts +++ b/types/fomantic-ui-calendar.d.ts @@ -2,7 +2,95 @@ declare namespace FomanticUI { interface Calendar { settings: CalendarSettings; - (behavior: 'refresh' | 'destroy'): JQuery; + /** + * Refresh the calendar + */ + (behavior: 'refresh'): JQuery; + + /** + * Call the popup module (e.g. passing show will show the calendar popup) + */ + (behavior: 'popup', arguments: any): JQuery; + + /** + * Focus the calendar input + */ + (behavior: 'focus'): JQuery; + + /** + * Blur the calendar input + */ + (behavior: 'blur'): JQuery; + + /** + * Clear the selected date + */ + (behavior: 'clear'): JQuery; + + /** + * Get the selected date + */ + (behavior: 'get date'): Date | string; + + /** + * Set the selected date. + * 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; + + /** + * Get the current selection mode (year, month, day, hour, minute) + */ + (behavior: 'get mode'): 'year' | 'month' | 'day' | 'hour' | 'minute'; + + /** + * Set the current selection mode (year, month, day, hour, minute) + */ + (behavior: 'set mode', mode: 'year' | 'month' | 'day' | 'hour' | 'minute'): JQuery; + + /** + * Get the start date for range selection + */ + (behavior: 'get startDate'): Date | string; + + /** + * Set the start date for range selection + */ + (behavior: 'set startDate', date: Date | string): JQuery; + + /** + * Get the end date for range selection + */ + (behavior: 'get endDate'): Date | string; + + /** + * Set the end date for range selection + */ + (behavior: 'set endDate', date: Date | string): JQuery; + + /** + * Get the currently focused date + */ + (behavior: 'get focusDate'): Date | string; + + /** + * Set the currently focused date + */ + (behavior: 'set focusDate', date: Date | string): JQuery; + + /** + * Set the minimal selectable date + */ + (behavior: 'set minDate', date: Date | string): JQuery; + + /** + * Set the maximal selectable date + */ + (behavior: 'set maxDate', date: Date | string): JQuery; + + (behavior: 'destroy'): JQuery; + (behavior: 'setting', name: K, value?: undefined): CalendarSettings._Impl[K]; (behavior: 'setting', name: K, value: CalendarSettings._Impl[K]): JQuery; (behavior: 'setting', value: CalendarSettings): JQuery; diff --git a/types/fomantic-ui-dropdown.d.ts b/types/fomantic-ui-dropdown.d.ts index de31c20627..66a63147a1 100644 --- a/types/fomantic-ui-dropdown.d.ts +++ b/types/fomantic-ui-dropdown.d.ts @@ -2,6 +2,218 @@ declare namespace FomanticUI { interface Dropdown { settings: DropdownSettings; + /** + * 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; + + /** + * Changes dropdown to use new values. + * values structure: [ {value, text, name} ]. + */ + (behavior: 'change values', values: object): void; + + /** + * Refreshes all cached selectors and data + */ + (behavior: 'refresh'): void; + + /** + * Toggles current visibility of dropdown + */ + (behavior: 'toggle'): void; + + /** + * Shows dropdown. + * 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; + + /** + * 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; + + /** + * Clears dropdown of selection. + * Set preventChangeTrigger to true to omit the change event (default: false). + */ + (behavior: 'clear', preventChangeTrigger: boolean): void; + + /** + * Hides all other dropdowns that is not current dropdown + */ + (behavior: 'hide others'): void; + + /** + * 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; + + /** + * Restores dropdown text to its value on page load + */ + (behavior: 'restore default text'): void; + + /** + * Restores dropdown text to its prompt, placeholder text + */ + (behavior: 'restore placeholder text'): void; + + /** + * Restores dropdown value to its value on page load + */ + (behavior: 'restore default value'): void; + + /** + * Saves current text and value as new defaults (for use with restore) + */ + (behavior: 'save defaults'): void; + + /** + * Sets value as selected. + * Set preventChangeTrigger to true to omit the change event (default: false). + */ + (behavior: 'set selected', value: string, preventChangeTrigger: boolean): void; + + /** + * 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; + + /** + * Sets dropdown text to a value + */ + (behavior: 'text', text: string): void; + + /** + * 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; + + /** + * Returns current dropdown text + */ + (behavior: 'get text'): string; + + /** + * Returns current dropdown input value. + * When the dropdown was created out of a select tag, the value will always be an array, otherwise a string (delimited when multiple) + */ + (behavior: 'get value'): string | string[]; + + /** + * Returns current dropdown input values as array. + * Useful for multiple selection dropdowns regardless if made out of a div or select + */ + (behavior: 'get values'): string[]; + + /** + * Returns DOM element that matches a given input value + */ + (behavior: 'get item', value: string): HTMLElement; + + /** + * Returns current search term entered + */ + (behavior: 'get query'): string; + + /** + * Adds touch events to element + */ + (behavior: 'bind touch events'): void; + + /** + * Adds mouse events to element + */ + (behavior: 'bind mouse events'): void; + + /** + * Binds a click to document to determine if you click away from a dropdown + */ + (behavior: 'bind intent'): void; + + /** + * Unbinds document intent click + */ + (behavior: 'unbind intent'): void; + + /** + * Returns whether event occurred inside dropdown + */ + (behavior: 'determine eventInModule'): boolean; + + /** + * Triggers preset item selection action based on settings passing text/value + */ + (behavior: 'determine select action', text: string, value: string): void; + + /** + * Sets dropdown to active state + */ + (behavior: 'set active'): void; + + /** + * Sets dropdown to visible state + */ + (behavior: 'set visible'): void; + + /** + * Removes dropdown active state + */ + (behavior: 'remove active'): void; + + /** + * Removes dropdown visible state + */ + (behavior: 'remove visible'): void; + + /** + * Returns whether dropdown is a selection dropdown + */ + (behavior: 'is selection'): boolean; + + /** + * Returns whether dropdown is animated + */ + (behavior: 'is animated'): boolean; + + /** + * Returns whether dropdown is visible + */ + (behavior: 'is visible'): boolean; + + /** + * Returns whether dropdown is hidden + */ + (behavior: 'is hidden'): boolean; + + /** + * Returns dropdown value as set on page load + */ + (behavior: 'get default text'): string; + + /** + * Returns placeholder text + */ + (behavior: 'get placeholder text'): string; + (behavior: 'destroy'): JQuery; (behavior: 'setting', name: K, value?: undefined): DropdownSettings._Impl[K]; (behavior: 'setting', name: K, value: DropdownSettings._Impl[K]): JQuery; @@ -126,7 +338,7 @@ declare namespace FomanticUI { * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} * @default false */ - apiSettings: false | ApiSettings; + apiSettings: false | APISettings; /** * Whether dropdown should select new option when using keyboard shortcuts. @@ -437,6 +649,31 @@ declare namespace FomanticUI { */ className: Dropdown.ClassNameSettings; + /** + * Class names used to determine element messages. + */ + message: Dropdown.MessageSettings; + + /** + * + */ + regExp: Dropdown.RegExpSettings; + + /** + * + */ + metadata: Dropdown.MetadataSettings; + + /** + * + */ + fields: Dropdown.FieldsSettings; + + /** + * + */ + keys: Dropdown.KeysSettings; + // endregion // region Debug Settings @@ -471,7 +708,7 @@ declare namespace FomanticUI { */ verbose: boolean; - errors: Dropdown.ErrorSettings; + error: Dropdown.ErrorSettings; // endregion } @@ -810,6 +1047,294 @@ declare namespace FomanticUI { } } + type MessageSettings = MessageSettings.Param; + + namespace MessageSettings { + type Param = ( + | Pick<_Impl, 'addResult'> + | Pick<_Impl, 'count'> + | Pick<_Impl, 'maxSelections'> + | Pick<_Impl, 'noResults'> + | Pick<_Impl, 'serverError'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'Add {term}' + */ + addResult: string; + + /** + * @default '{count} selected' + */ + count: string; + + /** + * @default 'Max {maxCount} selections' + */ + maxSelections: string; + + /** + * @default 'No results found.' + */ + noResults: string; + + /** + * @default 'There was an error contacting the server' + */ + serverError: string; + } + } + + type RegExpSettings = RegExpSettings.Param; + + namespace RegExpSettings { + type Param = ( + | Pick<_Impl, 'escape'> + ) & + Partial>; + + interface _Impl { + /** + * @default '/[-[\]{}()*+?.,\\^$|#\s]/g' + */ + escape: string; + } + } + + type MetadataSettings = MetadataSettings.Param; + + namespace MetadataSettings { + type Param = ( + | Pick<_Impl, 'defaultText'> + | Pick<_Impl, 'defaultValue'> + | Pick<_Impl, 'placeholderText'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'value'> + ) & + Partial>; + + interface _Impl { + /** + * @default 'defaultText' + */ + defaultText: string; + + /** + * @default 'defaultValue' + */ + defaultValue: string; + + /** + * @default 'placeholderText' + */ + placeholderText: string; + + /** + * @default 'text' + */ + text: string; + + /** + * @default 'value' + */ + value: string; + } + } + + type FieldsSettings = FieldsSettings.Param; + + namespace FieldsSettings { + type Param = ( + | Pick<_Impl, 'remoteValues'> + | Pick<_Impl, 'values'> + | Pick<_Impl, 'disabled'> + | Pick<_Impl, 'name'> + | Pick<_Impl, 'description'> + | Pick<_Impl, 'descriptionVertical'> + | Pick<_Impl, 'value'> + | Pick<_Impl, 'text'> + | Pick<_Impl, 'type'> + | Pick<_Impl, 'image'> + | Pick<_Impl, 'imageClass'> + | Pick<_Impl, 'icon'> + | Pick<_Impl, 'iconClass'> + | Pick<_Impl, 'class'> + | Pick<_Impl, 'divider'> + | Pick<_Impl, 'actionable'> + ) & + Partial>; + + interface _Impl { + /** + * Grouping for api results + * @default 'results' + */ + remoteValues: string; + + /** + * Grouping for all dropdown values + * @default 'values' + */ + values: string; + + /** + * Whether value should be disabled + * @default 'disabled' + */ + disabled: string; + + /** + * Displayed dropdown text + * @default 'name' + */ + name: string; + + /** + * Displayed dropdown description + * @default 'description' + */ + description: string; + + /** + * Whether description should be vertical + * @default 'descriptionVertical' + */ + descriptionVertical: string; + + /** + * Actual dropdown value + * @default 'value' + */ + value: string; + + /** + * Displayed text when selected + * @default 'text' + */ + text: string; + + /** + * Type of dropdown element + * @default 'type' + */ + type: string; + + /** + * Optional image path + * @default 'image' + */ + image: string; + + /** + * Optional individual class for image + * @default 'imageClass' + */ + imageClass: string; + + /** + * Optional icon name + * @default 'icon' + */ + icon: string; + + /** + * Optional individual class for icon (for example to use flag instead) + * @default 'iconClass' + */ + iconClass: string; + + /** + * Optional individual class for item/header + * @default 'class' + */ + class: string; + + /** + * Optional divider append for group headers + * @default 'divider' + */ + divider: string; + + /** + * Optional actionable item + * @default 'actionable' + */ + actionable: string; + } + } + + type KeysSettings = KeysSettings.Param; + + namespace KeysSettings { + type Param = ( + | Pick<_Impl, 'backspace'> + | Pick<_Impl, 'deleteKey'> + | Pick<_Impl, 'enter'> + | Pick<_Impl, 'escape'> + | Pick<_Impl, 'pageUp'> + | Pick<_Impl, 'pageDown'> + | Pick<_Impl, 'leftArrow'> + | Pick<_Impl, 'upArrow'> + | Pick<_Impl, 'rightArrow'> + | Pick<_Impl, 'downArrow'> + ) & + Partial>; + + interface _Impl { + /** + * @default 8 + */ + backspace: number; + + /** + * @default 46 + */ + deleteKey: number; + + /** + * @default 13 + */ + enter: number; + + /** + * @default 27 + */ + escape: number; + + /** + * @default 33 + */ + pageUp: number; + + /** + * @default 34 + */ + pageDown: number; + + /** + * @default 37 + */ + leftArrow: number; + + /** + * @default 38 + */ + upArrow: number; + + /** + * @default 39 + */ + rightArrow: number; + + /** + * @default 40 + */ + downArrow: number; + } + } + type ErrorSettings = ErrorSettings.Param; namespace ErrorSettings { diff --git a/types/fomantic-ui-modal.d.ts b/types/fomantic-ui-modal.d.ts index fcee2b4c34..016fb158a9 100644 --- a/types/fomantic-ui-modal.d.ts +++ b/types/fomantic-ui-modal.d.ts @@ -204,6 +204,17 @@ declare namespace FomanticUI { */ closable: boolean; + /** + * Custom settings to extend UI dimmer. + */ + dimmerSettings: DimmerSettings; + + /** + * Custom settings to extend UI dimmer. + * @default 'scale' + */ + transition: string | TransitionSettings; + /** * Duration of animation. * The value will be ignored when individual hide/show duration values are provided via the 'transition' setting. diff --git a/types/fomantic-ui-search.d.ts b/types/fomantic-ui-search.d.ts index 00062327f6..7111c9b874 100644 --- a/types/fomantic-ui-search.d.ts +++ b/types/fomantic-ui-search.d.ts @@ -166,7 +166,7 @@ declare namespace FomanticUI { * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings} * @default {} */ - apiSettings: ApiSettings; + apiSettings: APISettings; /** * Minimum characters to query for results. diff --git a/types/fomantic-ui-toast.d.ts b/types/fomantic-ui-toast.d.ts index a6a35b95a0..5e5dc3cbd4 100644 --- a/types/fomantic-ui-toast.d.ts +++ b/types/fomantic-ui-toast.d.ts @@ -2,6 +2,31 @@ declare namespace FomanticUI { interface Toast { settings: ToastSettings; + /** + * Pauses the display time decrease (and possible progress bar animation) + */ + (behavior: 'animate pause'): JQuery; + + /** + * Continues decreasing display time (and possible progress bar animation) + */ + (behavior: 'animate continue'): JQuery; + + /** + * Closes the toast + */ + (behavior: 'close'): JQuery; + + /** + * Returns all toasts as an array of objects which are visible within the current toast-container + */ + (behavior: 'get toasts'): object[]; + + /** + * Returns the remaining time in milliseconds + */ + (behavior: 'get remainingTime'): number; + (behavior: 'refresh' | 'destroy'): JQuery; (behavior: 'setting', name: K, value?: undefined): ToastSettings._Impl[K]; (behavior: 'setting', name: K, value: ToastSettings._Impl[K]): JQuery; From 1acdce3d8a4e3c5684a46192a1d8dd823d0c8aa4 Mon Sep 17 00:00:00 2001 From: prudho Date: Thu, 15 Jun 2023 15:59:14 +0200 Subject: [PATCH 3/3] feat: add definitions for JQueryStatic modules --- types/index.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 68c50eeed1..538a067099 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -55,3 +55,10 @@ interface JQuery { transition: FomanticUI.Transition; visibility: FomanticUI.Visibility; } + +interface JQueryStatic { + api: FomanticUI.API; + flyout: FomanticUI.Flyout; + modal: FomanticUI.Modal; + toast: FomanticUI.Toast; +}