fomantic-ui 2.9.4-beta.3 → 2.9.4-beta.31

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>