fomantic-ui 2.9.2-beta.8 → 2.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.2-beta.8+8838309",
+  "version": "2.9.2",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -91,4 +91,4 @@
   },
   "title": "Fomantic UI",
   "style": "dist/semantic.css"
-}
+}

package/src/definitions/behaviors/form.js

@@ -193,7 +193,7 @@
                             $prompt      = $fieldGroup.find(selector.prompt),
                             $calendar    = $field.closest(selector.uiCalendar),
                             defaultValue = $field.data(metadata.defaultValue) || '',
-                            isCheckbox   = $element.is(selector.uiCheckbox),
+                            isCheckbox   = $field.is(selector.checkbox),
                             isDropdown   = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
                             isCalendar   = $calendar.length > 0 && module.can.useElement('calendar'),
                             isErrored    = $fieldGroup.hasClass(className.error)
@@ -227,7 +227,7 @@
                             $calendar    = $field.closest(selector.uiCalendar),
                             $prompt      = $fieldGroup.find(selector.prompt),
                             defaultValue = $field.data(metadata.defaultValue),
-                            isCheckbox   = $element.is(selector.uiCheckbox),
+                            isCheckbox   = $field.is(selector.checkbox),
                             isDropdown   = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'),
                             isCalendar   = $calendar.length > 0 && module.can.useElement('calendar'),
                             isErrored    = $fieldGroup.hasClass(className.error)
@@ -244,7 +244,7 @@
                             module.verbose('Resetting dropdown value', $element, defaultValue);
                             $element.dropdown('restore defaults', true);
                         } else if (isCheckbox) {
-                            module.verbose('Resetting checkbox value', $element, defaultValue);
+                            module.verbose('Resetting checkbox value', $field, defaultValue);
                             $field.prop('checked', defaultValue);
                         } else if (isCalendar) {
                             $calendar.calendar('set date', defaultValue);
@@ -533,14 +533,12 @@
                                 : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
                             requiresValue = prompt.search('{value}') !== -1,
                             requiresName  = prompt.search('{name}') !== -1,
-                            $label,
-                            name,
                             parts,
                             suffixPrompt
                         ;
-                        if (ancillary && ['integer', 'decimal', 'number'].indexOf(ruleName) >= 0 && ancillary.indexOf('..') >= 0) {
+                        if (ancillary && ['integer', 'decimal', 'number', 'size'].indexOf(ruleName) >= 0 && ancillary.indexOf('..') >= 0) {
                             parts = ancillary.split('..', 2);
-                            if (!rule.prompt) {
+                            if (!rule.prompt && ruleName !== 'size') {
                                 suffixPrompt = parts[0] === ''
                                     ? settings.prompt.maxValue.replace(/{ruleValue}/g, '{max}')
                                     : (parts[1] === ''
@@ -551,15 +549,14 @@
                             prompt = prompt.replace(/{min}/g, parts[0]);
                             prompt = prompt.replace(/{max}/g, parts[1]);
                         }
+                        if (ancillary && ['match', 'different'].indexOf(ruleName) >= 0) {
+                            prompt = prompt.replace(/{ruleValue}/g, module.get.fieldLabel(ancillary, true));
+                        }
                         if (requiresValue) {
                             prompt = prompt.replace(/{value}/g, $field.val());
                         }
                         if (requiresName) {
-                            $label = $field.closest(selector.group).find('label').eq(0);
-                            name = $label.length === 1
-                                ? $label.text()
-                                : $field.prop('placeholder') || settings.text.unspecifiedField;
-                            prompt = prompt.replace(/{name}/g, name);
+                            prompt = prompt.replace(/{name}/g, module.get.fieldLabel($field));
                         }
                         prompt = prompt.replace(/{identifier}/g, field.identifier);
                         prompt = prompt.replace(/{ruleValue}/g, ancillary);
@@ -599,7 +596,7 @@
                         // refresh selector cache
                         (instance || module).refresh();
                     },
-                    field: function (identifier) {
+                    field: function (identifier, strict) {
                         module.verbose('Finding field with identifier', identifier);
                         identifier = module.escape.string(identifier);
                         var t;
@@ -621,18 +618,29 @@
                         }
                         module.error(error.noField.replace('{identifier}', identifier));
 
-                        return $('<input/>');
+                        return strict ? $() : $('<input/>');
                     },
-                    fields: function (fields) {
+                    fields: function (fields, strict) {
                         var
                             $fields = $()
                         ;
                         $.each(fields, function (index, name) {
-                            $fields = $fields.add(module.get.field(name));
+                            $fields = $fields.add(module.get.field(name, strict));
                         });
 
                         return $fields;
                     },
+                    fieldLabel: function (identifier, useIdAsFallback) {
+                        var $field = typeof identifier === 'string'
+                                ? module.get.field(identifier)
+                                : identifier,
+                            $label = $field.closest(selector.group).find('label').eq(0)
+                        ;
+
+                        return $label.length === 1
+                            ? $label.text()
+                            : $field.prop('placeholder') || (useIdAsFallback ? identifier : settings.text.unspecifiedField);
+                    },
                     validation: function ($field) {
                         var
                             fieldValidation,
@@ -655,20 +663,22 @@
 
                         return fieldValidation || false;
                     },
-                    value: function (field) {
+                    value: function (field, strict) {
                         var
                             fields = [],
-                            results
+                            results,
+                            resultKeys
                         ;
                         fields.push(field);
-                        results = module.get.values.call(element, fields);
+                        results = module.get.values.call(element, fields, strict);
+                        resultKeys = Object.keys(results);
 
-                        return results[field];
+                        return resultKeys.length > 0 ? results[resultKeys[0]] : undefined;
                     },
-                    values: function (fields) {
+                    values: function (fields, strict) {
                         var
-                            $fields = Array.isArray(fields)
-                                ? module.get.fields(fields)
+                            $fields = Array.isArray(fields) && fields.length > 0
+                                ? module.get.fields(fields, strict)
                                 : $field,
                             values = {}
                         ;
@@ -786,16 +796,8 @@
 
                     field: function (identifier) {
                         module.verbose('Checking for existence of a field with identifier', identifier);
-                        identifier = module.escape.string(identifier);
-                        if (typeof identifier !== 'string') {
-                            module.error(error.identifier, identifier);
-                        }
 
-                        return (
-                            $field.filter('#' + identifier).length > 0
-                                || $field.filter('[name="' + identifier + '"]').length > 0
-                                || $field.filter('[data-' + metadata.validate + '="' + identifier + '"]').length > 0
-                        );
+                        return module.get.field(identifier, true).length > 0;
                     },
 
                 },
@@ -819,6 +821,22 @@
                     },
                 },
 
+                checkErrors: function (errors, internal) {
+                    if (!errors || errors.length === 0) {
+                        if (!internal) {
+                            module.error(settings.error.noErrorMessage);
+                        }
+
+                        return false;
+                    }
+                    if (!internal) {
+                        errors = typeof errors === 'string'
+                            ? [errors]
+                            : errors;
+                    }
+
+                    return errors;
+                },
                 add: {
                     // alias
                     rule: function (name, rules) {
@@ -862,15 +880,16 @@
                         module.refreshEvents();
                     },
                     prompt: function (identifier, errors, internal) {
+                        errors = module.checkErrors(errors);
+                        if (errors === false) {
+                            return;
+                        }
                         var
                             $field       = module.get.field(identifier),
                             $fieldGroup  = $field.closest($group),
                             $prompt      = $fieldGroup.children(selector.prompt),
                             promptExists = $prompt.length > 0
                         ;
-                        errors = typeof errors === 'string'
-                            ? [errors]
-                            : errors;
                         module.verbose('Adding field error state', identifier);
                         if (!internal) {
                             $fieldGroup
@@ -903,11 +922,40 @@
                         }
                     },
                     errors: function (errors) {
+                        errors = module.checkErrors(errors);
+                        if (errors === false) {
+                            return;
+                        }
                         module.debug('Adding form error messages', errors);
                         module.set.error();
-                        $message
-                            .html(settings.templates.error(errors))
+                        var customErrors = [],
+                            tempErrors
                         ;
+                        if ($.isPlainObject(errors)) {
+                            $.each(Object.keys(errors), function (i, id) {
+                                if (module.checkErrors(errors[id], true) !== false) {
+                                    if (settings.inline) {
+                                        module.add.prompt(id, errors[id]);
+                                    } else {
+                                        tempErrors = module.checkErrors(errors[id]);
+                                        if (tempErrors !== false) {
+                                            $.each(tempErrors, function (index, tempError) {
+                                                customErrors.push(settings.prompt.addErrors
+                                                    .replace(/{name}/g, module.get.fieldLabel(id))
+                                                    .replace(/{error}/g, tempError));
+                                            });
+                                        }
+                                    }
+                                }
+                            });
+                        } else {
+                            customErrors = errors;
+                        }
+                        if (customErrors.length > 0) {
+                            $message
+                                .html(settings.templates.error(customErrors))
+                            ;
+                        }
                     },
                 },
 
@@ -1012,15 +1060,19 @@
                                 $el        = $(el),
                                 $parent    = $el.parent(),
                                 isCheckbox = $el.filter(selector.checkbox).length > 0,
-                                isDropdown = $parent.is(selector.uiDropdown) && module.can.useElement('dropdown'),
-                                $calendar   = $el.closest(selector.uiCalendar),
-                                isCalendar  = $calendar.length > 0 && module.can.useElement('calendar'),
+                                isDropdown = ($parent.is(selector.uiDropdown) || $el.is(selector.uiDropdown)) && module.can.useElement('dropdown'),
+                                $calendar  = $el.closest(selector.uiCalendar),
+                                isCalendar = $calendar.length > 0 && module.can.useElement('calendar'),
                                 value      = isCheckbox
                                     ? $el.is(':checked')
                                     : $el.val()
                             ;
                             if (isDropdown) {
-                                $parent.dropdown('save defaults');
+                                if ($parent.is(selector.uiDropdown)) {
+                                    $parent.dropdown('save defaults');
+                                } else {
+                                    $el.dropdown('save defaults');
+                                }
                             } else if (isCalendar) {
                                 $calendar.calendar('refresh');
                             }
@@ -1320,7 +1372,7 @@
                                         ? String(value + '').trim()
                                         : String(value + ''));
 
-                                return ruleFunction.call(field, value, ancillary, $module);
+                                return ruleFunction.call(field, value, ancillary, module);
                             }
                         ;
                         if (!isFunction(ruleFunction)) {
@@ -1581,17 +1633,19 @@
             notExactly: '{name} cannot be set to exactly "{ruleValue}"',
             contain: '{name} must contain "{ruleValue}"',
             containExactly: '{name} must contain exactly "{ruleValue}"',
-            doesntContain: '{name} cannot contain  "{ruleValue}"',
+            doesntContain: '{name} cannot contain "{ruleValue}"',
             doesntContainExactly: '{name} cannot contain exactly "{ruleValue}"',
             minLength: '{name} must be at least {ruleValue} characters',
             exactLength: '{name} must be exactly {ruleValue} characters',
             maxLength: '{name} cannot be longer than {ruleValue} characters',
+            size: '{name} must have a length between {min} and {max} characters',
             match: '{name} must match {ruleValue} field',
             different: '{name} must have a different value than {ruleValue} field',
             creditCard: '{name} must be a valid credit card number',
             minCount: '{name} must have at least {ruleValue} choices',
             exactCount: '{name} must have exactly {ruleValue} choices',
             maxCount: '{name} must have {ruleValue} or less choices',
+            addErrors: '{name}: {error}',
         },
 
         selector: {
@@ -1620,11 +1674,11 @@
         },
 
         error: {
-            identifier: 'You must specify a string identifier for each field',
             method: 'The method you called is not defined.',
             noRule: 'There is no rule matching the one you specified',
             noField: 'Field identifier {identifier} not found',
             noElement: 'This module requires ui {element}',
+            noErrorMessage: 'No error message provided',
         },
 
         templates: {
@@ -1746,7 +1800,7 @@
             integer: function (value, range) {
                 return $.fn.form.settings.rules.range(value, range, 'integer');
             },
-            range: function (value, range, regExp) {
+            range: function (value, range, regExp, testLength) {
                 if (typeof regExp === 'string') {
                     regExp = $.fn.form.settings.regExp[regExp];
                 }
@@ -1775,6 +1829,9 @@
                         max = parts[1] - 0;
                     }
                 }
+                if (testLength) {
+                    value = value.length;
+                }
 
                 return (
                     regExp.test(value)
@@ -1860,51 +1917,27 @@
             },
 
             // is at least string length
-            minLength: function (value, requiredLength) {
-                return value !== undefined
-                    ? value.length >= requiredLength
-                    : false;
+            minLength: function (value, minLength) {
+                return $.fn.form.settings.rules.range(value, minLength + '..', 'integer', true);
             },
 
             // is exactly length
             exactLength: function (value, requiredLength) {
-                return value !== undefined
-                    ? value.length === Number(requiredLength)
-                    : false;
+                return $.fn.form.settings.rules.range(value, requiredLength + '..' + requiredLength, 'integer', true);
             },
 
             // is less than length
             maxLength: function (value, maxLength) {
-                return value !== undefined
-                    ? value.length <= maxLength
-                    : false;
+                return $.fn.form.settings.rules.range(value, '..' + maxLength, 'integer', true);
+            },
+
+            size: function (value, range) {
+                return $.fn.form.settings.rules.range(value, range, 'integer', true);
             },
 
             // matches another field
-            match: function (value, identifier, $module) {
-                var
-                    matchingValue,
-                    matchingElement
-                ;
-                matchingElement = $module.find('[data-validate="' + identifier + '"]');
-                if (matchingElement.length > 0) {
-                    matchingValue = matchingElement.val();
-                } else {
-                    matchingElement = $module.find('#' + identifier);
-                    if (matchingElement.length > 0) {
-                        matchingValue = matchingElement.val();
-                    } else {
-                        matchingElement = $module.find('[name="' + identifier + '"]');
-                        if (matchingElement.length > 0) {
-                            matchingValue = matchingElement.val();
-                        } else {
-                            matchingElement = $module.find('[name="' + identifier + '[]"]');
-                            if (matchingElement.length > 0) {
-                                matchingValue = matchingElement;
-                            }
-                        }
-                    }
-                }
+            match: function (value, identifier, module) {
+                var matchingValue = module.get.value(identifier, true);
 
                 return matchingValue !== undefined
                     ? value.toString() === matchingValue.toString()
@@ -1912,31 +1945,8 @@
             },
 
             // different than another field
-            different: function (value, identifier, $module) {
-                // use either id or name of field
-                var
-                    matchingValue,
-                    matchingElement
-                ;
-                matchingElement = $module.find('[data-validate="' + identifier + '"]');
-                if (matchingElement.length > 0) {
-                    matchingValue = matchingElement.val();
-                } else {
-                    matchingElement = $module.find('#' + identifier);
-                    if (matchingElement.length > 0) {
-                        matchingValue = matchingElement.val();
-                    } else {
-                        matchingElement = $module.find('[name="' + identifier + '"]');
-                        if (matchingElement.length > 0) {
-                            matchingValue = matchingElement.val();
-                        } else {
-                            matchingElement = $module.find('[name="' + identifier + '[]"]');
-                            if (matchingElement.length > 0) {
-                                matchingValue = matchingElement;
-                            }
-                        }
-                    }
-                }
+            different: function (value, identifier, module) {
+                var matchingValue = module.get.value(identifier, true);
 
                 return matchingValue !== undefined
                     ? value.toString() !== matchingValue.toString()

package/src/definitions/collections/form.less

@@ -383,26 +383,22 @@
 --------------------- */
 
 /* browsers require these rules separate */
-.ui.form ::-webkit-input-placeholder {
+.ui.form ::placeholder {
     color: @inputPlaceholderColor;
 }
 .ui.form :-ms-input-placeholder when (@supportIE) {
     color: @inputPlaceholderColor !important;
 }
 .ui.form ::-moz-placeholder {
-    color: @inputPlaceholderColor;
     opacity: 1;
 }
 
-.ui.form :focus::-webkit-input-placeholder {
+.ui.form :focus::placeholder {
     color: @inputPlaceholderFocusColor;
 }
 .ui.form :focus:-ms-input-placeholder when (@supportIE) {
     color: @inputPlaceholderFocusColor !important;
 }
-.ui.form :focus::-moz-placeholder {
-    color: @inputPlaceholderFocusColor;
-}
 
 /* --------------------
         Focus
@@ -649,25 +645,19 @@
         }
 
         /* Placeholder */
-        .ui.form .@{state} ::-webkit-input-placeholder {
+        .ui.form .@{state} ::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
         .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
             color: @formStates[@@state][inputPlaceholderColor] !important;
         }
-        .ui.form .@{state} ::-moz-placeholder {
-            color: @formStates[@@state][inputPlaceholderColor];
-        }
 
-        .ui.form .@{state} :focus::-webkit-input-placeholder {
+        .ui.form .@{state} :focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
         .ui.form .@{state} :focus:-ms-input-placeholder when (@supportIE) {
             color: @formStates[@@state][inputPlaceholderFocusColor] !important;
         }
-        .ui.form .@{state} :focus::-moz-placeholder {
-            color: @formStates[@@state][inputPlaceholderFocusColor];
-        }
 
         /*------------------
             Dropdown State

package/src/definitions/collections/grid.less

@@ -1972,4 +1972,13 @@
     }
 }
 
+& when (@variationGridAttached) {
+    .ui.grid .left.attached.column {
+        padding-right: 0;
+    }
+    .ui.grid .right.attached.column {
+        padding-left: 0;
+    }
+}
+
 .loadUIOverrides();

package/src/definitions/collections/menu.less

@@ -1,9 +1,8 @@
-/*
- * # Fomantic - Menu
+/*!
+ * # Fomantic-UI - Menu
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
- * Copyright 2015 Contributor
  * Released under the MIT license
  * https://opensource.org/licenses/MIT
  *
@@ -796,7 +795,7 @@ Floated Menu / Item
     .ui.compact.menu .item:last-child {
         border-radius: 0 @borderRadius @borderRadius 0;
     }
-    .ui.pagination.menu .item:last-child::before {
+    .ui.pagination.menu:not(.wrapping) .item:last-child::before {
         display: none;
     }
 
@@ -1490,12 +1489,17 @@ Floated Menu / Item
 }
 
 & when (@variationMenuCentered) {
-    .ui.center.aligned.menu,
-    .ui.centered.menu {
+    .ui.center.aligned.menu:not(.fluid),
+    .ui.centered.menu:not(.fluid) {
         display: inline-flex;
         transform: translateX(-50%);
         margin-left: 50%;
     }
+    .ui.center.aligned.menu .item,
+    .ui.centered.menu .item {
+        flex: 1 0 auto;
+        justify-content: center;
+    }
 }
 
 & when (@variationMenuInverted) {
@@ -1915,6 +1919,35 @@ Floated Menu / Item
     }
 }
 
+& when (@variationMenuWrapping) {
+    .ui.wrapping.menu {
+        flex-wrap: wrap;
+        & .item::before {
+            right: auto;
+            left: 0;
+        }
+        & .item:first-child::before {
+            display: none;
+        }
+        &:not(.tabular) .item {
+            &:last-of-type,
+            &:last-child {
+                border-right: @dividerSize solid @dividerBackground;
+            }
+        }
+    }
+    & when (@variationMenuWrapped) {
+        .ui.wrapped.menu:not(.tabular) .item {
+            &:first-child {
+                border-bottom-left-radius: 0;
+            }
+            &:last-child {
+                border-top-right-radius: 0;
+            }
+        }
+    }
+}
+
 /* --------------
      Sizes
 --------------- */

package/src/definitions/elements/emoji.less

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic UI - Emoji
+ * # Fomantic-UI - Emoji
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
+ * https://opensource.org/licenses/MIT
  *
  */
 

package/src/definitions/elements/input.less

@@ -64,11 +64,10 @@
 
 /* browsers require these rules separate */
 
-.ui.input > input::-webkit-input-placeholder {
+.ui.input > input::placeholder {
     color: @placeholderColor;
 }
 .ui.input > input::-moz-placeholder {
-    color: @placeholderColor;
     opacity: 1;
 }
 .ui.input > input:-ms-input-placeholder when (@supportIE) {
@@ -148,12 +147,8 @@
     color: @focusColor;
     box-shadow: @focusBoxShadow;
 }
-.ui.input.focus > input::-webkit-input-placeholder,
-.ui.input > input:focus::-webkit-input-placeholder {
-    color: @placeholderFocusColor;
-}
-.ui.input.focus > input::-moz-placeholder,
-.ui.input > input:focus::-moz-placeholder {
+.ui.input.focus > input::placeholder,
+.ui.input > input:focus::placeholder {
     color: @placeholderFocusColor;
 }
 & when (@supportIE) {
@@ -192,10 +187,7 @@
         }
 
         /* Placeholder */
-        .ui.input.@{state} > input::-webkit-input-placeholder {
-            color: @formStates[@@state][inputPlaceholderColor];
-        }
-        .ui.input.@{state} > input::-moz-placeholder {
+        .ui.input.@{state} > input::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
         .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
@@ -203,10 +195,7 @@
         }
 
         /* Focused Placeholder */
-        .ui.input.@{state} > input:focus::-webkit-input-placeholder {
-            color: @formStates[@@state][inputPlaceholderFocusColor];
-        }
-        .ui.input.@{state} > input:focus::-moz-placeholder {
+        .ui.input.@{state} > input:focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
         .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
@@ -258,10 +247,7 @@
             color: inherit;
         }
 
-        .ui.transparent.inverted.input > input::-webkit-input-placeholder {
-            color: @transparentInvertedPlaceholderColor;
-        }
-        .ui.transparent.inverted.input > input::-moz-placeholder {
+        .ui.transparent.inverted.input > input::placeholder {
             color: @transparentInvertedPlaceholderColor;
         }
         .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {

package/src/definitions/elements/placeholder.less

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Loader
+ * # Fomantic-UI - Placeholder
  * https://github.com/fomantic/Fomantic-UI/
  *
  *