fomantic-ui 2.9.4-beta.2 → 2.9.4-beta.20

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.

package/types/fomantic-ui-tests.ts

@@ -23,3 +23,165 @@ $().tab(); // $ExpectType JQuery<HTMLElement>
 $('body').toast(); // $ExpectType JQuery<HTMLElement>
 $().transition(); // $ExpectType JQuery<HTMLElement>
 $().visibility(); // $ExpectType JQuery<HTMLElement>
+
+/* Define API endpoints once globally */
+$.fn.api.settings.api = {
+  'get followers' : '/followers/{id}?results={count}',
+  'create user'   : '/create',
+  'add user'      : '/add/{id}',
+  'follow user'   : '/follow/{id}',
+  'search'        : '/search/?query={value}'
+};
+
+$().calendar({
+  today: true,
+  initialDate: null,
+  endCalendar: $()
+}); // $ExpectType JQuery<HTMLElement>
+
+$.flyout('alert','hello'); // $ExpectType JQuery<HTMLElement>
+$.flyout('confirm','Are you sure?',function(){}); // $ExpectType JQuery<HTMLElement>
+$.flyout('prompt','Enter Code', function(){}); // $ExpectType JQuery<HTMLElement>
+
+$.fn.flyout.settings.templates.greet = function(username) {
+  return {
+    title: 'Greetings to ' + username + '!',
+    content: ''+ username.toUpperCase() + 'is the best!',
+    closeIcon: true,
+    class: 'inverted',
+    classContent: 'centered'
+  }
+}
+
+$().form({
+  fields: {
+    field1: {
+      rules: [
+        {
+          type   : 'empty'
+        }
+      ]
+    },
+    field2: {
+      rules: [
+        {
+          type   : 'isExactly[dog]',
+          prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}'
+        }
+      ]
+    },
+    field3: {
+      rules: [
+        {
+          type   : 'isExactly[cat]',
+          prompt : function(value) {
+            if(value == 'dog') {
+              return 'I told you to put cat, not dog!';
+            }
+            return 'That is not cat';
+          }
+        }
+      ]
+    },
+    color: {
+      identifier: 'color',
+      rules: [{
+        type: 'regExp',
+        value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i,
+      }]
+    },
+    yearsPracticed: {
+      identifier : 'yearsPracticed',
+      depends    : 'isDoctor',
+      rules      : [
+        {
+          type   : 'empty',
+          prompt : 'Please enter the number of years you have been a doctor'
+        }
+      ]
+    },
+    ccEmail: {
+      identifier : 'cc-email',
+      optional   : true,
+      rules: [
+        {
+          type   : 'email',
+          prompt : 'Please enter a valid second e-mail'
+        }
+      ]
+    }
+  }
+}); // $ExpectType JQuery<HTMLElement>
+
+$().form({
+  fields: {
+    gender: 'empty',
+    name: 'empty',
+    password : ['minLength[6]', 'empty']
+  }
+}); // $ExpectType JQuery<HTMLElement>
+
+$.fn.form.settings.rules.date = function(str_date: string) {
+  return true;
+};
+
+$.modal('alert', {
+  title: 'Listen to me',
+  content: 'I love Fomantic-UI',
+  handler: function() {
+    $.toast({message:'Great!'});
+  }
+});
+
+$.fn.modal.settings.templates.greet = function(username: string) {
+  // do something according to modals settings and/or given parameters
+  return {
+    title: 'Greetings to ' + username + '!',
+    content: ''+ username.toUpperCase() + 'is the best!',
+    class: 'inverted',
+    classContent: 'centered',
+    dimmerSettings: {
+      variation: 'inverted'
+    }
+  }
+}
+
+$.modal('greet', 'mom');
+
+$().nag({
+  persist: true
+}); // $ExpectType JQuery<HTMLElement>
+
+$().search("display message", "Hello, world !"); // $ExpectType JQuery<HTMLElement>
+
+// To change the defaults for all toast at once override the module as follows
+$.fn.toast.settings.progressUp = true;
+$.fn.toast.settings.class = 'info';
+$.fn.toast.settings.showIcon = true;
+$.fn.toast.settings.className.box = 'toast-box';  //removes shadow
+$.fn.toast.settings.className.title = 'header';   // smaller font size
+$.fn.toast.settings.className.icon = 'icon';   // top position again
+$.fn.toast.settings.transition.closeEasing = 'easeOutBounce';
+
+// Or apply the old defaults directly to the toast
+$.toast({
+  title: 'LOOK',
+  message: 'Turned back time to 2.7.0 defaults',
+  showProgress: 'bottom',
+   //make it look like 2.7.0
+  showIcon: true,
+  progressUp: true,
+  class: 'info',
+  className: {
+    box:'toast-box',
+    title:'header',
+    icon: 'icon'
+  },
+  transition: {
+    closeEasing: 'easeOutBounce'
+  }
+});
+
+$().transition("shake", "200ms");
+$().transition("horizontal flip", 500, function() { alert('done!'); });
+$().transition("fade up");

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

@@ -12,6 +12,11 @@ declare namespace FomanticUI {
          */
         (behavior: 'animate continue'): JQuery;
 
+        /**
+         * Show the toast
+         */
+        (behavior: 'show'): JQuery;
+
         /**
          * Closes the toast
          */
@@ -273,7 +278,7 @@ declare namespace FomanticUI {
         /**
          * An array of objects. Each object defines an action with 'properties' 'text', 'class', 'icon' and 'click'.
          */
-        actions: Toast.ActionsSettings;
+        actions: Toast.ActionsSettings[];
 
         // endregion
 

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

@@ -112,6 +112,34 @@ declare namespace FomanticUI {
          */
         (behavior: 'is supported'): boolean;
 
+        (behavior: 'scale', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'zoom', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'fade' | 'fade up' | 'fade down' | 'fade left' | 'fade right', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'horizontal flip' | 'vertical flip', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'drop', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'fly up' | 'fly down' | 'fly left' | 'fly right', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'swing up' | 'swing down' | 'swing left' | 'swing right', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'browse' | 'browse up' | 'browse down' | 'browse left' | 'browse right', duration?: any, onComplete?: () => any): JQuery;
+
+        (behavior: 'slide up' | 'slide down' | 'slide left' | 'slide right', duration?: any, onComplete?: () => any): JQuery;
+
+        // Static animations
+        (behavior: 'pulsating', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'jiggle', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'flash', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'shake', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'pulse', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'tada', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'bounce', duration?: any, onComplete?: () => any): JQuery;
+        (behavior: 'glow', duration?: any, onComplete?: () => any): JQuery;
+
         /**
          * Destroys instance and removes all events.
          */

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

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