fomantic-ui 2.9.4-beta.8 → 2.9.4-beta.80

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

@@ -50,7 +50,7 @@ declare namespace FomanticUI {
         /**
          * Enables animation looping.
          */
-        (behavior: 'looping'): JQuery;
+        (behavior: 'set looping'): JQuery;
 
         /**
          * Removes looping state from element.
@@ -112,11 +112,39 @@ 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.
          */
         (behavior: 'destroy'): JQuery;
-        <K extends keyof TransitionSettings>(behavior: 'setting', name: K, value?: undefined, ): Partial<Pick<TransitionSettings, keyof TransitionSettings>>;
+        <K extends keyof TransitionSettings>(behavior: 'setting', name: K, value?: undefined,): Partial<Pick<TransitionSettings, keyof TransitionSettings>>;
         <K extends keyof TransitionSettings>(behavior: 'setting', name: K, value: TransitionSettings[K]): JQuery;
         (behavior: 'setting', value: Partial<Pick<TransitionSettings, keyof TransitionSettings>>): JQuery;
         (settings?: Partial<Pick<TransitionSettings, keyof TransitionSettings>>): JQuery;
@@ -154,10 +182,10 @@ declare namespace FomanticUI {
         displayType: false | string;
 
         /**
-         * Specify the final display type (block, inline-block etc) so that it doesn't have to be calculated.
-         * @default '500ms'
+         * Duration of the CSS transition animation
+         * @default false
          */
-        duration: string;
+        duration: string | number | false;
 
         /**
          * If enabled a 'timeout' will be added to ensure 'animationend' callback occurs even if element is hidden.
@@ -165,6 +193,12 @@ declare namespace FomanticUI {
          */
         useFailSafe: boolean;
 
+        /**
+         * Delay in ms for fail safe
+         * @default 100
+         */
+        failSafeDelay: number;
+
         /**
          * If enabled will allow same animation to be queued while it is already occurring.
          * @default false
@@ -199,7 +233,7 @@ declare namespace FomanticUI {
          * 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;
+        onBeforeShow(this: JQuery, showFunction: () => void): void;
 
         /**
          * Callback once the show transition has finished.
@@ -216,7 +250,7 @@ declare namespace FomanticUI {
          * 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;
+        onBeforeHide(this: JQuery, hideFunction: () => void): void;
 
         /**
          * Callback once the transition hide has finished.

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

@@ -44,10 +44,10 @@ declare namespace FomanticUI {
         (behavior: 'get screen size'): object;
 
         (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?: 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;
     }
 
     /**

package/types/index.d.ts

@@ -30,34 +30,34 @@
 /// <reference path="fomantic-ui-visibility.d.ts" />
 
 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;
+    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;
 }
 
 interface JQueryStatic {
-    api:        FomanticUI.API;
-    flyout:     FomanticUI.Flyout;
-    modal:      FomanticUI.Modal;
-    toast:      FomanticUI.Toast;
+    api: FomanticUI.API;
+    flyout: FomanticUI.Flyout;
+    modal: FomanticUI.Modal;
+    toast: FomanticUI.Toast;
 }

package/types/tests.ts

@@ -0,0 +1,188 @@
+/// <reference path="index.d.ts" />
+
+$().accordion(); // $ExpectType JQuery<HTMLElement>
+$().api();// $ExpectType JQuery
+$().calendar(); // $ExpectType JQuery<HTMLElement>
+$().checkbox(); // $ExpectType JQuery<HTMLElement>
+$('body').dimmer(); // $ExpectType JQuery<HTMLElement>
+$().dropdown(); // $ExpectType JQuery<HTMLElement>
+$().embed(); // $ExpectType JQuery<HTMLElement>
+$().flyout(); // $ExpectType JQuery<HTMLElement>
+$().form(); // $ExpectType JQuery<HTMLElement>
+$().modal(); // $ExpectType JQuery<HTMLElement>
+$().nag(); // $ExpectType JQuery<HTMLElement>
+$().popup(); // $ExpectType JQuery<HTMLElement>
+$().progress(); // $ExpectType JQuery<HTMLElement>
+$().rating(); // $ExpectType JQuery<HTMLElement>
+$().search(); // $ExpectType JQuery<HTMLElement>
+$().shape(); // $ExpectType JQuery<HTMLElement>
+$().sidebar(); // $ExpectType JQuery<HTMLElement>
+$().slider(); // $ExpectType JQuery<HTMLElement>
+$().sticky(); // $ExpectType JQuery<HTMLElement>
+$().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 () { /* make eslint happy */ }); // $ExpectType JQuery<HTMLElement>
+$.flyout('prompt', 'Enter Code', function () { /* make eslint happy */ }); // $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: 'notEmpty',
+                },
+            ],
+        },
+        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: 'notEmpty',
+                    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: 'notEmpty',
+        name: 'notEmpty',
+        password: ['minLength[6]', 'notEmpty'],
+    },
+}); // $ExpectType JQuery<HTMLElement>
+
+$.fn.form.settings.rules.date = function (dateStr: string) {
+    return dateStr !== '';
+};
+
+$.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 () { /* make eslint happy */ });
+$().transition('fade up');

package/types/tsconfig.json

@@ -18,6 +18,6 @@
     },
     "files": [
         "index.d.ts",
-        "fomantic-ui-tests.ts"
+        "tests.ts"
     ]
 }

package/types/fomantic-ui-tests.ts

@@ -1,25 +0,0 @@
-/// <reference path="index.d.ts" />
-
-$().accordion(); // $ExpectType JQuery<HTMLElement>
-$().api();// $ExpectType JQuery
-$().calendar(); // $ExpectType JQuery<HTMLElement>
-$().checkbox(); // $ExpectType JQuery<HTMLElement>
-$('body').dimmer(); // $ExpectType JQuery<HTMLElement>
-$().dropdown(); // $ExpectType JQuery<HTMLElement>
-$().embed(); // $ExpectType JQuery<HTMLElement>
-$().flyout(); // $ExpectType JQuery<HTMLElement>
-$().form(); // $ExpectType JQuery<HTMLElement>
-$().modal(); // $ExpectType JQuery<HTMLElement>
-$().nag(); // $ExpectType JQuery<HTMLElement>
-$().popup(); // $ExpectType JQuery<HTMLElement>
-$().progress(); // $ExpectType JQuery<HTMLElement>
-$().rating(); // $ExpectType JQuery<HTMLElement>
-$().search(); // $ExpectType JQuery<HTMLElement>
-$().shape(); // $ExpectType JQuery<HTMLElement>
-$().sidebar(); // $ExpectType JQuery<HTMLElement>
-$().slider(); // $ExpectType JQuery<HTMLElement>
-$().sticky(); // $ExpectType JQuery<HTMLElement>
-$().tab(); // $ExpectType JQuery<HTMLElement>
-$('body').toast(); // $ExpectType JQuery<HTMLElement>
-$().transition(); // $ExpectType JQuery<HTMLElement>
-$().visibility(); // $ExpectType JQuery<HTMLElement>