fomantic-ui 2.9.4-beta.1 → 2.9.4-beta.11

package/types/fomantic-ui-form.d.ts

@@ -15,7 +15,12 @@ declare namespace FomanticUI {
         /**
          * Adds rule to existing rules for field, also aliased as 'add field'.
          */
-        (behavior: 'add rule', field: string, rules: object[]): void;
+        (behavior: 'add rule', field: string, rules: string | string[] | FormField[]): void;
+
+        /**
+         * Adds field object to existing fields.
+         */
+        (behavior: 'add field', name: string, rules: string | string[] | FormRule[]): void;
 
         /**
          * Adds fields object to existing fields.
@@ -25,13 +30,18 @@ declare namespace FomanticUI {
         /**
          * Removes specific rule from field leaving other rules.
          */
-        (behavior: 'remove rule', field: string, rules: object[]): void;
+        (behavior: 'remove rule', field: string, rules?: object[]): void;
 
         /**
          * Remove all validation for a field.
          */
         (behavior: 'remove field', field: string): void;
 
+        /**
+         * Remove all validation for an array of fields.
+         */
+        (behavior: 'remove fields', field: string[]): void;
+
         /**
          * Returns 'true'/'false' whether a field passes its validation rules.
          * If you add 'true' as the second parameter, any failed rule will update the UI.
@@ -41,7 +51,7 @@ declare namespace FomanticUI {
         /**
          * Validates form, updates UI, and calls 'onSuccess' or 'onFailure'.
          */
-        (behavior: 'validate form'): void;
+        (behavior: 'validate form'): boolean;
 
         /**
          * Validates field, updates UI, and calls 'onSuccess' or 'onFailure'.
@@ -51,7 +61,7 @@ declare namespace FomanticUI {
         /**
          * Returns element with matching name, id, or data-validate metadata to identifier.
          */
-        (behavior: 'get field', identifier: string): string;
+        (behavior: 'get field', identifier: string, strict?: boolean, ignoreMissing?: boolean): string;
 
         /**
          * Returns value of element with id.
@@ -62,7 +72,7 @@ declare namespace FomanticUI {
          * Returns object of element values that match array of identifiers.
          * If no IDS are passed will return all fields.
          */
-        (behavior: 'get values', identifiers?: string[]): object;
+        (behavior: 'get values', identifiers?: string[]): Record<string, string>;
 
         /**
          * Sets value of element with id.
@@ -82,7 +92,7 @@ declare namespace FomanticUI {
         /**
          * Returns whether a field exists.
          */
-        (behavior: 'has field', identifier: string): boolean;
+        (behavior: 'has field', identifier: string, ignoreMissing?: boolean): boolean;
 
         /**
          * Manually add errors to form, given an array errors.
@@ -97,23 +107,33 @@ declare namespace FomanticUI {
         /**
          * Adds a custom user prompt for a given element with identifier.
          */
-        (behavior: 'add prompt', identifier: string, errors: object[]): void;
+        (behavior: 'add prompt', identifier: string, errors: string | object[]): void;
 
         /**
          * Empty all fields and remove possible errors.
          */
-        (behavior: 'clear'): void;
+        (behavior: 'clear'): JQuery;
 
         /**
          * Set all fields to their initial value and remove possible errors.
          */
-        (behavior: 'reset'): void;
+        (behavior: 'reset'): JQuery;
 
         /**
          * Set fields actual values as default values.
          */
         (behavior: 'set defaults'): void;
 
+        /**
+         * Returns 'true'/'false' whether a form is dirty.
+         */
+        (behavior: 'is dirty'): boolean;
+
+        /**
+         * Returns 'true'/'false' whether a form is clean.
+         */
+        (behavior: 'is clean'): boolean;
+
         /**
          * Return elements which have been modified since form state was changed to 'dirty'.
          */
@@ -122,7 +142,7 @@ declare namespace FomanticUI {
         /**
          * Set the state of the form to 'clean' and set new values as default.
          */
-        (behavior: 'set as clean'): void;
+        (behavior: 'set as clean'): JQuery;
 
         /**
          * Automatically adds the "empty" rule or automatically checks a checkbox for all fields with classname or attribute 'required'.
@@ -144,12 +164,33 @@ declare namespace FomanticUI {
         (settings?: Partial<Pick<FormSettings, keyof FormSettings>>): JQuery;
     }
 
+    type FormFields = Record<string, FormField | string[] | string | {}>;
+
+    interface FormRule {
+        type: string;
+        prompt?: string | ((value: string) => void);
+        value?: string | RegExp;
+    }
+
+    interface FormField {
+        identifier?: string;
+        depends?: string;
+        optional?: boolean;
+        rules: FormRule[];
+    }
+
     /**
      * @see {@link https://fomantic-ui.com/behaviors/form.html#/settings}
      */
     interface FormSettings {
         // region Form Settings
 
+        /**
+         * Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively.
+         * @default false
+         */
+        fields: false | FormFields;
+
         /**
          * Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively.
          * @default true
@@ -227,7 +268,7 @@ declare namespace FomanticUI {
         errorFocus: boolean | string;
 
         /**
-         * 
+         *
          * @default 0
          */
         errorLimit: number;
@@ -248,6 +289,12 @@ declare namespace FomanticUI {
 
         // endregion
 
+        // region Formatters
+
+        rules: Form.RulesSettings;
+
+        // endregion
+
         // region Callbacks
 
         /**
@@ -258,17 +305,17 @@ declare namespace FomanticUI {
         /**
          * Callback on each invalid field.
          */
-        onInvalid(this: JQuery): void;
+        onInvalid(this: JQuery, fieldErrors: string | string[]): void;
 
         /**
          * Callback if a form is all valid.
          */
-        onSuccess(this: JQuery, event: Event, fields: object[]): void;
+        onSuccess(this: JQuery, event: Event, fields: {[key: string]: any}): void;
 
         /**
          * Callback if any form field is invalid.
          */
-        onFailure(this: JQuery, formErrors: object[], fields: object[]): void;
+        onFailure(this: JQuery, formErrors: {[key: string]: any}, fields: {[key: string]: any}): void;
 
         /**
          * Callback if form state is modified to 'dirty'.
@@ -349,8 +396,9 @@ declare namespace FomanticUI {
 
     namespace Form {
         type TextSettings = Partial<Pick<Settings.Texts, keyof Settings.Texts>>;
-        type PromptSettings = Partial<Pick<Settings.Prompts, keyof Settings.Prompts>>;
+        type PromptSettings = Partial<Pick<Settings.Prompts, keyof Settings.Prompts>> & {[key: string]: string | undefined};
         type FormatterSettings = Partial<Pick<Settings.Formatters, keyof Settings.Formatters>>;
+        type RulesSettings = Partial<Pick<Settings.Rules, keyof Settings.Rules>> & {[key: string]: (value?: any, identifier?: string, module?: any) => boolean};
         type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
         type MetadataSettings = Partial<Pick<Settings.Metadatas, keyof Settings.Metadatas>>;
         type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
@@ -373,8 +421,23 @@ declare namespace FomanticUI {
                  */
                 leavingMessage: string;
             }
-        
+
             interface Prompts {
+                /**
+                 * @default '{name} must be in a range from {min} to {max}'
+                 */
+                range: string;
+
+                /**
+                 * @default '{name} must have a maximum value of {ruleValue}'
+                 */
+                maxValue: string;
+
+                /**
+                 * @default '{name} must have a minimum value of {ruleValue}'
+                 */
+                minValue: string;
+
                 /**
                  * @default '{name} must have a value'
                  */
@@ -500,7 +563,7 @@ declare namespace FomanticUI {
                  */
                 maxCount: string;
             }
-        
+
             interface Formatters {
                 date(date: string): string;
                 datetime(date: string): string;
@@ -509,6 +572,38 @@ declare namespace FomanticUI {
                 year(date: string): string;
             }
 
+            interface Rules {
+                empty(value: unknown): boolean;
+                checked(): boolean;
+                email(value: unknown): boolean;
+                url(value: unknown): boolean;
+                regExp(value: unknown, regExp: RegExp): boolean;
+                minValue(value: unknown, range: string): boolean;
+                maxValue(value: unknown, range: string): boolean;
+                integer(value: unknown, range: string): boolean;
+                range(value: unknown, range: string, regExp: RegExp, testLength: boolean): boolean;
+                decimal(value: unknown, range: string): boolean;
+                number(value: unknown, range: string): boolean;
+                is(value: unknown, text: string): boolean;
+                isExactly(value: unknown, text: string): boolean;
+                not(value: unknown, notValue: unknown): boolean;
+                notExactly(value: unknown, notValue: unknown): boolean;
+                contains(value: unknown, text: string): boolean;
+                containsExactly(value: unknown, text: string): boolean;
+                doesntContain(value: unknown, text: string): boolean;
+                doesntContainExactly(value: unknown, text: string): boolean;
+                minLength(value: unknown, minLength: number): boolean;
+                exactLength(value: unknown, requiredLength: number): boolean;
+                maxLength(value: unknown, maxLength: number): boolean;
+                size(value: unknown, range: string): boolean;
+                match(value: unknown, identifier: string, module: unknown): boolean;
+                different(value: unknown, identifier: string, module: unknown): boolean;
+                creditCard(cardNumber: unknown, cardTypes: string): boolean;
+                minCount(value: unknown, minCount: number): boolean;
+                exactCount(value: unknown, exactCount: number): boolean;
+                maxCount(value: unknown, maxCount: number): boolean;
+            }
+
             interface Selectors {
                 /**
                  * @default 'input[type="checkbox"], input[type="radio"]'

package/types/fomantic-ui-modal.d.ts

@@ -5,12 +5,12 @@ declare namespace FomanticUI {
         /**
          * Shows the modal.
          */
-        (behavior: 'show'): JQuery;
+        (behavior: 'show', callback?: Function): JQuery;
 
         /**
          * Hides the modal.
          */
-        (behavior: 'hide'): JQuery;
+        (behavior: 'hide', callback?: Function): JQuery;
 
         /**
          * Toggles the modal.
@@ -62,6 +62,11 @@ declare namespace FomanticUI {
          */
         (behavior: 'set active'): JQuery;
 
+        /**
+         * Templates handling
+         */
+        (behavior: keyof Modal.TemplatesSettings, ...args: any): Partial<Pick<ModalSettings, keyof ModalSettings>>;
+
         (behavior: 'destroy'): JQuery;
         <K extends keyof ModalSettings>(behavior: 'setting', name: K, value?: undefined, ): Partial<Pick<ModalSettings, keyof ModalSettings>>;
         <K extends keyof ModalSettings>(behavior: 'setting', name: K, value: ModalSettings[K]): JQuery;
@@ -166,13 +171,13 @@ declare namespace FomanticUI {
         /**
          * Custom settings to extend UI dimmer.
          */
-        dimmerSettings: DimmerSettings;
+        dimmerSettings: Partial<Pick<DimmerSettings, keyof DimmerSettings>>;
 
         /**
          * Custom settings to extend UI dimmer.
          * @default 'scale'
          */
-        transition: string | TransitionSettings;
+        transition: string | Partial<Pick<TransitionSettings, keyof TransitionSettings>>;
 
         /**
          * Duration of animation.
@@ -194,6 +199,62 @@ declare namespace FomanticUI {
          */
         scrollbarWidth: number;
 
+        // dynamic content
+
+        /**
+         * Title of dynamicly created modal.
+         * @default ''
+         */
+        title: string;
+
+        /**
+         * HTML content of dynamicly created modal.
+         * @default ''
+         */
+        content: string;
+
+        /**
+         * CSS classname(s) of dynamicly created modal.
+         * @default ''
+         */
+        class: string;
+
+        /**
+         * CSS classname(s) of dynamicly created modal's title.
+         * @default ''
+         */
+        classTitle: string;
+
+        /**
+         * CSS classname(s) of dynamicly created modal's content.
+         * @default ''
+         */
+        classContent: string;
+
+        /**
+         * CSS classname(s) of dynamicly created modal's actions.
+         * @default ''
+         */
+        classActions: string;
+
+        /**
+         * Determine if a close icon shoud be displayed on dynamicly created modal.
+         * @default false
+         */
+        closeIcon: boolean;
+
+        /**
+         * 
+         * @default false
+         */
+        actions: any;
+
+        /**
+         * 
+         * @default true
+         */
+        preserveHTML: boolean;
+
         // endregion
 
         // region Callbacks
@@ -250,6 +311,8 @@ declare namespace FomanticUI {
 
         // region Config Template Settings
 
+        templates: Modal.TemplatesSettings;
+
         // endregion
 
         // region Debug Settings
@@ -299,6 +362,7 @@ declare namespace FomanticUI {
         type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
         type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
         type ErrorSettings = Partial<Pick<Settings.Errors, keyof Settings.Errors>>;
+        type TemplatesSettings = Partial<Pick<Settings.Templates, keyof Settings.Templates>> & {[key: string]: (...args: any) => Partial<Pick<ModalSettings, keyof ModalSettings>>};
 
         namespace Settings {
             interface Selectors {
@@ -466,6 +530,12 @@ declare namespace FomanticUI {
                  */
                 notFound: string;
             }
+
+            interface Templates {
+                alert(): Partial<Pick<ModalSettings, keyof ModalSettings>>;
+                confirm(): Partial<Pick<ModalSettings, keyof ModalSettings>>;
+                prompt(): Partial<Pick<ModalSettings, keyof ModalSettings>>;
+            }
         }
     }
 }

package/types/fomantic-ui-nag.d.ts

@@ -26,7 +26,7 @@ declare namespace FomanticUI {
         <K extends keyof NagSettings>(behavior: 'setting', name: K, value?: undefined, ): Partial<Pick<NagSettings, keyof NagSettings>>;
         <K extends keyof NagSettings>(behavior: 'setting', name: K, value: NagSettings[K]): JQuery;
         (behavior: 'setting', value: Partial<Pick<NagSettings, keyof NagSettings>>): JQuery;
-        (settings?: NagSettings): Partial<Pick<NagSettings, keyof NagSettings>>;
+        (settings?: Partial<Pick<NagSettings, keyof NagSettings>>): JQuery;
     }
 
     /**

package/types/fomantic-ui-popup.d.ts

@@ -84,7 +84,7 @@ declare namespace FomanticUI {
          * This is useful for including a pre-formatted popup.
          * @default false
          */
-        popup: false | string;
+        popup: false | string | JQuery;
 
         /**
          * Whether all other popups should be hidden when this popup is opened.
@@ -266,39 +266,39 @@ declare namespace FomanticUI {
         /**
          * Callback on popup element creation, with created popup.
          */
-        onCreate(this: JQuery): void;
+        onCreate(this: JQuery, element?: JQuery<HTMLElement>): void;
 
         /**
          * Callback immediately before Popup is removed from DOM.
          */
-        onRemove(this: JQuery): void;
+        onRemove(this: JQuery, element?: JQuery<HTMLElement>): void;
 
         /**
          * Callback before popup is shown.
          * Returning 'false' from this callback will cancel the popup from showing.
          */
-        onShow(this: JQuery): boolean;
+        onShow(this: JQuery, element?: JQuery<HTMLElement>): any;
 
         /**
          * Callback after popup is shown.
          */
-        onVisible(this: JQuery): void;
+        onVisible(this: JQuery, element?: JQuery<HTMLElement>): void;
 
         /**
          * Callback before popup is hidden.
          * Returning 'false' from this callback will cancel the popup from hiding.
          */
-        onHide(this: JQuery): boolean;
+        onHide(this: JQuery, element?: JQuery<HTMLElement>): any;
 
         /**
          * Callback after popup is hidden.
          */
-        onHidden(this: JQuery): void;
+        onHidden(this: JQuery, element?: JQuery<HTMLElement>): void;
 
         /**
          * Callback after popup cannot be placed on screen.
          */
-        onUnplaceable(this: JQuery): void;
+        onUnplaceable(this: JQuery, element?: JQuery<HTMLElement>): void;
 
         // endregion
 

package/types/fomantic-ui-progress.d.ts

@@ -208,6 +208,12 @@ declare namespace FomanticUI {
          */
         precision: number;
 
+        /**
+         * Sets current overall percent.
+         * @default false
+         */
+        percent: false | number;
+
         /**
          * Setting a total value will make each call to increment get closer to this total (i.e. 1/20, 2/20 etc).
          * @default false

package/types/fomantic-ui-search.d.ts

@@ -10,7 +10,7 @@ declare namespace FomanticUI {
         /**
          * Displays message in search results with text, using template matching type.
          */
-        (behavior: 'display message', text: string, type: string): JQuery;
+        (behavior: 'display message', text: string, type?: string): JQuery;
 
         /**
          * Cancels current remote search query.
@@ -124,7 +124,7 @@ declare namespace FomanticUI {
          * @see {@link https://fomantic-ui.com/behaviors/api.html#/settings}
          * @default {}
          */
-        apiSettings: APISettings | JQueryAjaxSettings;
+        apiSettings: Partial<Pick<APISettings, keyof APISettings>> | JQueryAjaxSettings;
 
         /**
          * Minimum characters to query for results.
@@ -228,6 +228,24 @@ declare namespace FomanticUI {
          */
         ignoreDiacritics: boolean;
 
+        /**
+         * Template to use (specified in settings.templates)
+         * @default 'standard'
+         */
+        type: 'escape' | 'message' | 'category' | 'standard';
+
+        /**
+         * Field to display in standard results template
+         * @default ''
+         */
+        displayField: string;
+
+        /**
+         * Whether to add events to prompt automatically
+         * @default true
+         */
+        automatic: boolean;
+
         // endregion
 
         // region Callbacks
@@ -237,13 +255,13 @@ declare namespace FomanticUI {
          * The first parameter includes the filtered response results for that element.
          * The function should return 'false' to prevent default action (closing search results and selecting value).
          */
-        onSelect(this: JQuery, result: object, response: object): boolean;
+        onSelect(this: JQuery, result: object, response: object): any;
 
         /**
          * Callback after processing element template to add HTML to results.
          * Function should return 'false' to prevent default actions.
          */
-        onResultsAdd(this: JQuery, html: string): boolean;
+        onResultsAdd(this: JQuery, html: string): void | boolean;
 
         /**
          * Callback on search query.
@@ -352,24 +370,24 @@ declare namespace FomanticUI {
         namespace Settings {
             interface Templates {
                 /**
-                 * @default function(string)
+                 * @default function(string, preserveHTML)
                  */
-                escape: Function;
+                escape: (string: string, preserveHTML?: boolean) => string;
 
                 /**
-                 * @default function(message, type)
+                 * @default function(message, type, header)
                  */
-                message: Function;
+                message: (message: string, type?: string, header?: string) => string;
 
                 /**
-                 * @default function(response)
+                 * @default function(response, fields, preserveHTML)
                  */
-                category: Function;
+                category: (response: unknown, fields: {[key: string]: string}, preserveHTML?: boolean) => string;
 
                 /**
-                 * @default function(response)
+                 * @default function(response, fields, preserveHTML)
                  */
-                standard: Function;
+                standard: (response: unknown, fields: {[key: string]: string}, preserveHTML?: boolean) => string;
             }
 
             interface Selectors {

package/types/fomantic-ui-tab.d.ts

@@ -149,7 +149,7 @@ declare namespace FomanticUI {
          * Tabs are limited to those found inside this context.
          * @default false
          */
-        context: false | string;
+        context: JQuery | string | false;
 
         /**
          * If enabled limits tabs to children of passed context.