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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.2+870970b",
+  "version": "2.9.4-beta.20+0224737",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/form.js

@@ -538,6 +538,13 @@
                                     fullFields[name].rules.push({ type: rule });
                                 });
                             }
+
+                            $.each(fullFields[name].rules, function (index, rule) {
+                                var ruleName = module.get.ruleName(rule);
+                                if (ruleName === 'empty') {
+                                    module.warn('*** DEPRECATED *** : Rule "empty" for field "' + name + '" will be removed in a future version. -> Use "notEmpty" rule instead.');
+                                }
+                            });
                         });
 
                         return fullFields;
@@ -552,7 +559,7 @@
                             $field        = module.get.field(field.identifier),
                             value         = $field.val(),
                             prompt        = isFunction(rule.prompt)
-                                ? rule.prompt(value)
+                                ? rule.prompt.call($field[0], value)
                                 : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
                             requiresValue = prompt.search('{value}') !== -1,
                             requiresName  = prompt.search('{name}') !== -1,
@@ -591,10 +598,10 @@
                     },
                     settings: function () {
                         if ($.isPlainObject(parameters)) {
-                            if (parameters.fields) {
-                                parameters.fields = module.get.fieldsFromShorthand(parameters.fields);
-                            }
                             settings = $.extend(true, {}, $.fn.form.settings, parameters);
+                            if (settings.fields) {
+                                settings.fields = module.get.fieldsFromShorthand(settings.fields);
+                            }
                             validation = $.extend(true, {}, $.fn.form.settings.defaults, settings.fields);
                             module.verbose('Extending settings', validation, settings);
                         } else {
@@ -619,7 +626,7 @@
                         // refresh selector cache
                         (instance || module).refresh();
                     },
-                    field: function (identifier, strict) {
+                    field: function (identifier, strict, ignoreMissing) {
                         module.verbose('Finding field with identifier', identifier);
                         identifier = module.escape.string(identifier);
                         var t;
@@ -639,7 +646,9 @@
                         if (t.length > 0) {
                             return t;
                         }
-                        module.error(error.noField.replace('{identifier}', identifier));
+                        if (!ignoreMissing) {
+                            module.error(error.noField.replace('{identifier}', identifier));
+                        }
 
                         return strict ? $() : $('<input/>');
                     },
@@ -709,7 +718,7 @@
                             var
                                 $field       = $(field),
                                 $calendar    = $field.closest(selector.uiCalendar),
-                                name         = $field.prop('name'),
+                                name         = $field.prop('name') || $field.prop('id'),
                                 value        = $field.val(),
                                 isCheckbox   = $field.is(selector.checkbox),
                                 isRadio      = $field.is(selector.radio),
@@ -817,10 +826,10 @@
 
                 has: {
 
-                    field: function (identifier) {
+                    field: function (identifier, ignoreMissing) {
                         module.verbose('Checking for existence of a field with identifier', identifier);
 
-                        return module.get.field(identifier, true).length > 0;
+                        return module.get.field(identifier, true, ignoreMissing).length > 0;
                     },
 
                 },
@@ -1020,7 +1029,7 @@
                         }
                         if (rule === undefined) {
                             module.debug('Removed all rules');
-                            if (module.has.field(field)) {
+                            if (module.has.field(field, true)) {
                                 validation[field].rules = [];
                             } else {
                                 delete validation[field];
@@ -1221,7 +1230,7 @@
                         module.debug('Enabling auto check on required fields');
                         if (validation) {
                             $.each(validation, function (fieldName) {
-                                if (!module.has.field(fieldName)) {
+                                if (!module.has.field(fieldName, true)) {
                                     module.verbose('Field not found, removing from validation', fieldName);
                                     module.remove.field(fieldName);
                                 }
@@ -1235,20 +1244,20 @@
                                 isRequired = $el.prop('required') || $elGroup.hasClass(className.required) || $elGroup.parent().hasClass(className.required),
                                 isDisabled = $el.is(':disabled') || $elGroup.hasClass(className.disabled) || $elGroup.parent().hasClass(className.disabled),
                                 validation = module.get.validation($el),
-                                hasEmptyRule = validation
+                                hasNotEmptyRule = validation
                                     ? $.grep(validation.rules, function (rule) {
-                                        return rule.type === 'empty';
-                                    }) !== 0
+                                        return ['notEmpty', 'checked', 'empty'].indexOf(rule.type) >= 0;
+                                    }).length > 0
                                     : false,
                                 identifier = module.get.identifier(validation, $el)
                             ;
-                            if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) {
+                            if (isRequired && !isDisabled && !hasNotEmptyRule && identifier !== undefined) {
                                 if (isCheckbox) {
                                     module.verbose("Adding 'checked' rule on field", identifier);
                                     module.add.rule(identifier, 'checked');
                                 } else {
-                                    module.verbose("Adding 'empty' rule on field", identifier);
-                                    module.add.rule(identifier, 'empty');
+                                    module.verbose("Adding 'notEmpty' rule on field", identifier);
+                                    module.add.rule(identifier, 'notEmpty');
                                 }
                             }
                         });
@@ -1347,13 +1356,14 @@
                             fieldErrors = [],
                             isDisabled = $field.filter(':not(:disabled)').length === 0,
                             validationMessage = $field[0].validationMessage,
+                            noNativeValidation = field.noNativeValidation || settings.noNativeValidation || $field.filter('[formnovalidate],[novalidate]').length > 0 || $module.filter('[novalidate]').length > 0,
                             errorLimit
                         ;
                         if (!field.identifier) {
                             module.debug('Using field name as identifier', identifier);
                             field.identifier = identifier;
                         }
-                        if (validationMessage) {
+                        if (validationMessage && !noNativeValidation) {
                             module.debug('Field is natively invalid', identifier);
                             fieldErrors.push(validationMessage);
                             fieldValid = false;
@@ -1489,6 +1499,12 @@
                         module.error.apply(console, arguments);
                     }
                 },
+                warn: function () {
+                    if (!settings.silent) {
+                        module.warn = Function.prototype.bind.call(console.warn, console, settings.name + ':');
+                        module.warn.apply(console, arguments);
+                    }
+                },
                 performance: {
                     log: function (message) {
                         var
@@ -1603,6 +1619,7 @@
         name: 'Form',
         namespace: 'form',
 
+        silent: false,
         debug: false,
         verbose: false,
         performance: true,
@@ -1625,6 +1642,7 @@
         errorFocus: true,
         dateHandling: 'date', // 'date', 'input', 'formatter'
         errorLimit: 0,
+        noNativeValidation: false,
 
         onValid: function () {},
         onInvalid: function () {},
@@ -1667,6 +1685,7 @@
             maxValue: '{name} must have a maximum value of {ruleValue}',
             minValue: '{name} must have a minimum value of {ruleValue}',
             empty: '{name} must have a value',
+            notEmpty: '{name} must have a value',
             checked: '{name} must be checked',
             email: '{name} must be a valid e-mail',
             url: '{name} must be a valid url',
@@ -1799,10 +1818,15 @@
         rules: {
 
             // is not empty or blank string
-            empty: function (value) {
+            notEmpty: function (value) {
                 return !(value === undefined || value === '' || (Array.isArray(value) && value.length === 0));
             },
 
+            /* Deprecated */
+            empty: function (value) {
+                return $.fn.form.settings.rules.notEmpty(value);
+            },
+
             // checkbox checked
             checked: function () {
                 return $(this).filter(':checked').length > 0;

package/src/definitions/collections/form.less

@@ -162,6 +162,11 @@
     font-family: @inputFont;
     line-height: @textAreaLineHeight;
     resize: @textAreaResize;
+    min-height: @actionTextareaMinHeight;
+}
+.ui.input > textarea {
+    flex: 1 1 auto;
+    max-width: 100%;
 }
 .ui.form textarea:not([rows]) {
     height: @textAreaHeight;
@@ -291,8 +296,10 @@
 
 /* Auto Input */
 .ui.form .fields .field .ui.input input,
-.ui.form .field .ui.input input {
-    width: auto;
+.ui.form .fields .field .ui.input textarea,
+.ui.form .field .ui.input input,
+.ui.form .field .ui.input textarea {
+    width: 100%;
 }
 
 & when (@variationFormEqualWidth) or (@variationFormWide) {
@@ -441,7 +448,8 @@
         input[type="text"]:focus,
         input[type="file"]:focus,
         input[type="url"]:focus,
-        input[type="week"]:focus {
+        input[type="week"]:focus,
+        textarea:focus {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -462,7 +470,8 @@
         input[type="text"],
         input[type="file"],
         input[type="url"],
-        input[type="week"] {
+        input[type="week"],
+        textarea {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
         }

package/src/definitions/collections/grid.less

@@ -1723,10 +1723,10 @@
             border-top: none !important;
         }
         & when (@variationGridInverted) {
-            .ui.inverted.stackable.celled.grid > .column:not(.row),
-            .ui.inverted.stackable.divided.grid > .column:not(.row),
-            .ui.inverted.stackable.celled.grid > .row > .column,
-            .ui.inverted.stackable.divided.grid > .row > .column {
+            .ui.ui.inverted.stackable.celled.grid > .column:not(.row),
+            .ui.ui.inverted.stackable.divided.grid > .column:not(.row),
+            .ui.ui.inverted.stackable.celled.grid > .row > .column,
+            .ui.ui.inverted.stackable.divided.grid > .row > .column {
                 border-top: @stackableInvertedMobileBorder;
             }
         }

package/src/definitions/elements/header.less

@@ -467,6 +467,11 @@
     .ui.bottom.attached.header {
         border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
     }
+    & when (@variationHeaderSeamless) {
+        .ui.seamless.attached:not(.bottom).header {
+            border-bottom: none;
+        }
+    }
 
     /* Attached Sizes */
     .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {

package/src/definitions/elements/input.less

@@ -35,7 +35,7 @@
 .ui.input > input {
     margin: 0;
     max-width: 100%;
-    flex: 1 0 auto;
+    flex: 1 1 auto;
     outline: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     text-align: @textAlign;
@@ -524,7 +524,11 @@
         .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > input + .ui.button,
         .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
         .ui.action.input.@{state}:not([class*="left action"]) > input + .ui.button,
-        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label {
+        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label,
+        .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > textarea + .ui.button,
+        .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label,
+        .ui.action.input.@{state}:not([class*="left action"]) > textarea + .ui.button,
+        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > textarea + .ui.label {
             border-right: @borderWidth solid @borderColor;
         }
         .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
@@ -553,14 +557,16 @@
     }
 
     /* Input when ui Left */
-    .ui[class*="left action"].input > input {
+    .ui[class*="left action"].input > input,
+    .ui[class*="left action"].input > textarea {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         border-left-color: transparent;
     }
 
     /* Input when ui Right */
-    .ui.action.input:not([class*="left action"]) > input {
+    .ui.action.input:not([class*="left action"]) > input,
+    .ui.action.input:not([class*="left action"]) > textarea {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         border-right-color: transparent;
@@ -584,11 +590,13 @@
     }
 
     /* Input Focus */
-    .ui.action.input:not([class*="left action"]) > input:focus {
+    .ui.action.input:not([class*="left action"]) > input:focus,
+    .ui.action.input:not([class*="left action"]) > textarea:focus {
         border-right-color: @focusBorderColor;
     }
 
-    .ui.ui[class*="left action"].input > input:focus {
+    .ui.ui[class*="left action"].input > input:focus,
+    .ui.ui[class*="left action"].input > textarea:focus {
         border-left-color: @focusBorderColor;
     }
 }

package/src/definitions/modules/dropdown.js

@@ -2806,8 +2806,8 @@
                                             module.save.remoteData(selectedText, selectedValue);
                                         }
                                         if (settings.useLabels) {
-                                            module.add.value(selectedValue, selectedText, $selected, preventChangeTrigger);
                                             module.add.label(selectedValue, selectedText, shouldAnimate);
+                                            module.add.value(selectedValue, selectedText, $selected, preventChangeTrigger);
                                             module.set.activeItem($selected);
                                             module.filterActive();
                                             module.select.nextAvailable($selectedItem);

package/src/definitions/modules/dropdown.less

@@ -1853,8 +1853,8 @@ select.ui.dropdown {
 & when not (@variationDropdownSizes = false) {
     each(@variationDropdownSizes, {
         @s: @@value;
-        .ui.@{value}.dropdown,
-        .ui.@{value}.dropdown .menu > .item {
+        .ui.ui.@{value}.dropdown,
+        .ui.ui.@{value}.dropdown .menu > .item {
             font-size: @s;
         }
     });

package/src/themes/default/collections/form.variables

@@ -60,6 +60,7 @@
 @textAreaBorder: @inputBorder;
 @textAreaFontSize: @inputFontSize;
 @textAreaTransition: @inputTransition;
+@actionTextareaMinHeight: (@inputVerticalPadding * 2) + @lineHeight;
 
 /* Checkbox */
 @checkboxVerticalAlign: top;

package/src/themes/default/globals/variation.variables

@@ -82,6 +82,7 @@
 @variationHeaderDividing: true;
 @variationHeaderBlock: true;
 @variationHeaderAttached: true;
+@variationHeaderSeamless: true;
 @variationHeaderTags: h1, h2, h3, h4, h5, h6;
 @variationHeaderSizes: @variationAllSizes;
 @variationHeaderColors: @variationAllColors;

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

@@ -125,6 +125,12 @@ declare namespace FomanticUI {
          */
         on: string;
 
+        /**
+         * Object containing all templates endpoints
+         * @default {}
+         */
+        api: {[key: string]: 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.
@@ -137,7 +143,7 @@ declare namespace FomanticUI {
          * UI state will be applied to this element, defaults to triggering element.
          * @default false
          */
-        stateContext: false | JQuery;
+        stateContext: false | string | JQuery<any>;
 
         /**
          * Whether to encode parameters with 'encodeURIComponent' before adding into url string.
@@ -259,7 +265,7 @@ declare namespace FomanticUI {
          * Method for transmitting request to server.
          * @default 'get'
          */
-        method: 'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch';
+        method: Uppercase<'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch'> | Lowercase<'get' | 'post' | 'put' | 'delete' | 'head' | 'options' | 'patch'>;
 
         /**
          * Expected data type of response.

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

@@ -37,7 +37,7 @@ declare namespace FomanticUI {
          * 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;
+        (behavior: 'set date', date: Date | string | null, updateInput?: boolean, fireChange?: boolean): JQuery;
 
         /**
          * Get the current selection mode (year, month, day, hour, minute)
@@ -82,12 +82,12 @@ declare namespace FomanticUI {
         /**
          * Set the minimal selectable date
          */
-        (behavior: 'set minDate', date: Date | string): JQuery;
+        (behavior: 'set minDate', date: Date | string | null): JQuery;
 
         /**
          * Set the maximal selectable date
          */
-        (behavior: 'set maxDate', date: Date | string): JQuery;
+        (behavior: 'set maxDate', date: Date | string | null): JQuery;
 
         (behavior: 'destroy'): JQuery;
 
@@ -214,7 +214,7 @@ declare namespace FomanticUI {
          *
          * @default null
          */
-        initialDate: null | Date;
+        initialDate: Date | string | null;
 
         /**
          * Display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day').
@@ -319,12 +319,14 @@ declare namespace FomanticUI {
          *
          * @default false
          */
-        selectAdjacentDays: 5 | 10 | 15 | 20 | 30;
+        selectAdjacentDays: boolean;
 
         popupOptions: Calendar.PopupSettings;
 
         text: Calendar.TextSettings;
 
+        formatter: Calendar.FormatterSettings;
+
         // endregion
 
         // region Callbacks
@@ -333,12 +335,12 @@ declare namespace FomanticUI {
          * Is called before a calendar date changes. 'return false;' will cancel the change.
          * @since 2.8.0
          */
-        onBeforeChange(this: JQuery): void;
+        onBeforeChange(this: JQuery, date?: Date, text?: string, mode?: string): void;
 
         /**
          * Is called after a calendar date has changed.
          */
-        onChange(this: JQuery): void;
+        onChange(this: JQuery, date?: Date): void;
 
         /**
          * Is called before a calendar is shown. 'return false;' will prevent the calendar to be shown.
@@ -364,7 +366,7 @@ declare namespace FomanticUI {
          * 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;
+        onSelect(this: JQuery, date?: Date, mode?: string): void;
 
         // endregion
 
@@ -436,6 +438,7 @@ declare namespace FomanticUI {
     namespace Calendar {
         type PopupSettings = Partial<Pick<Settings.Popup, keyof Settings.Popup>>;
         type TextSettings = Partial<Pick<Settings.Texts, keyof Settings.Texts>>;
+        type FormatterSettings = Partial<Pick<Settings.Formatters, keyof Settings.Formatters>>;
         type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
         type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
         type RegExpSettings = Partial<Pick<Settings.RegExps, keyof Settings.RegExps>>;
@@ -471,6 +474,16 @@ declare namespace FomanticUI {
                  */
                 days: string[];
 
+                /**
+                 * @default ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+                 */
+                dayNamesShort: string[];
+
+                /**
+                 * @default ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+                 */
+                dayNames: string[];
+
                 /**
                  * @default ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
                  */
@@ -507,6 +520,78 @@ declare namespace FomanticUI {
                 weekNo: string;
             }
 
+            interface Formatters {
+                /**
+                 * 
+                 */
+                yearHeader(date: Date, settings?: CalendarSettings): string;
+
+                /**
+                 * @default 'YYYY'
+                 */
+                monthHeader: string;
+
+                /**
+                 * @default 'MMMM YYYY'
+                 */
+                dayHeader: string;
+
+                /**
+                 * @default 'MMMM D, YYYY'
+                 */
+                hourHeader: string;
+
+                /**
+                 * @default 'MMMM D, YYYY'
+                 */
+                minuteHeader: string;
+
+                /**
+                 * @default 'MMMM D, YYYY'
+                 */
+                dayColumnHeader(day: number, settings: CalendarSettings): string;
+
+                /**
+                 * @default 'MMMM D, YYYY h:mm A'
+                 */
+                datetime: string;
+
+                /**
+                 * @default 'MMMM D, YYYY'
+                 */
+                date: string;
+
+                /**
+                 * @default 'h:mm A'
+                 */
+                time: string;
+
+                /**
+                 * @default 'h:mm A'
+                 */
+                cellTime: string;
+
+                /**
+                 * @default 'MMMM YYYY'
+                 */
+                month: string;
+
+                /**
+                 * @default 'YYYY'
+                 */
+                year: string;
+                
+                /**
+                 * 
+                 */
+                today(settings: CalendarSettings): string;
+
+                /**
+                 * 
+                 */
+                cell(cell: string, date: Date, cellOptions: any): any
+            }
+
             interface Selectors {
                 /**
                  * @default '.ui.popup'

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

@@ -32,6 +32,11 @@ declare namespace FomanticUI {
          */
         (behavior: 'enable'): JQuery;
 
+        /**
+         * Disable interaction with a checkbox.
+         */
+        (behavior: 'disable'): JQuery;
+
         /**
          * Set a checkbox state to checked without callbacks.
          */
@@ -82,6 +87,11 @@ declare namespace FomanticUI {
          */
         (behavior: 'is unchecked'): boolean;
 
+        /**
+         * Returns whether element is not determinate.
+         */
+        (behavior: 'is indeterminate'): boolean;
+
         /**
          * Returns whether element is able to be changed.
          */
@@ -175,22 +185,22 @@ declare namespace FomanticUI {
         /**
          * Callback before a checkbox is checked. Can cancel change by returning 'false'.
          */
-        beforeChecked(this: JQuery): void | false;
+        beforeChecked(this: JQuery): void | Promise<void> | boolean;
 
         /**
          * Callback before a checkbox is set to indeterminate. Can cancel change by returning 'false'.
          */
-        beforeIndeterminate(this: JQuery): void | false;
+        beforeIndeterminate(this: JQuery): void | Promise<void> | false;
 
         /**
          * Callback before a checkbox is set to determinate. Can cancel change by returning 'false'.
          */
-        beforeDeterminate(this: JQuery): void | false;
+        beforeDeterminate(this: JQuery): void | Promise<void> | false;
 
         /**
          * Callback before a checkbox is unchecked. Can cancel change by returning 'false'.
          */
-        beforeUnchecked(this: JQuery): void | false;
+        beforeUnchecked(this: JQuery): void | Promise<void> | false;
 
         /**
          * Callback after a checkbox is enabled.