fomantic-ui 2.9.3-beta.15 → 2.9.3-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.3-beta.15+88ae1e1",
+  "version": "2.9.3-beta.17+5e5da5d",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/form.js

@@ -77,6 +77,7 @@
                 initialize: function () {
                     // settings grabbed at run time
                     module.get.settings();
+                    $module.addClass(className.initial);
                     if (methodInvoked) {
                         if (instance === undefined) {
                             module.instantiate();
@@ -130,10 +131,13 @@
                     module.bindEvents();
                 },
 
-                submit: function () {
+                submit: function (event) {
                     module.verbose('Submitting form', $module);
                     submitting = true;
                     $module.trigger('submit');
+                    if (event) {
+                        event.preventDefault();
+                    }
                 },
 
                 attachEvents: function (selector, action) {
@@ -159,6 +163,7 @@
                         .on('click' + eventNamespace, selector.reset, module.reset)
                         .on('click' + eventNamespace, selector.clear, module.clear)
                     ;
+                    $field.on('invalid' + eventNamespace, module.event.field.invalid);
                     if (settings.keyboardShortcuts) {
                         $module.on('keydown' + eventNamespace, selector.field, module.event.field.keydown);
                     }
@@ -274,8 +279,12 @@
                         var
                             allValid = true
                         ;
-                        $.each(validation, function (fieldName, field) {
-                            if (!module.validate.field(field, fieldName, true)) {
+                        $field.each(function (index, el) {
+                            var $el = $(el),
+                                validation = module.get.validation($el) || {},
+                                identifier = module.get.identifier(validation, $el)
+                            ;
+                            if (!module.validate.field(validation, identifier, true)) {
                                 allValid = false;
                             }
                         });
@@ -431,9 +440,8 @@
                             if (!event.ctrlKey && key === keyCode.enter && isInput && !isInDropdown && !isCheckbox) {
                                 if (!keyHeldDown) {
                                     $field.one('keyup' + eventNamespace, module.event.field.keyup);
-                                    module.submit();
+                                    module.submit(event);
                                     module.debug('Enter pressed on input submitting form');
-                                    event.preventDefault();
                                 }
                                 keyHeldDown = true;
                             }
@@ -441,15 +449,18 @@
                         keyup: function () {
                             keyHeldDown = false;
                         },
+                        invalid: function (event) {
+                            event.preventDefault();
+                        },
                         blur: function (event) {
                             var
                                 $field          = $(this),
-                                $fieldGroup     = $field.closest($group),
-                                validationRules = module.get.validation($field)
+                                validationRules = module.get.validation($field) || {},
+                                identifier      = module.get.identifier(validationRules, $field)
                             ;
-                            if (validationRules && (settings.on === 'blur' || ($fieldGroup.hasClass(className.error) && settings.revalidate))) {
+                            if (settings.on === 'blur' || (!$module.hasClass(className.initial) && settings.revalidate)) {
                                 module.debug('Revalidating field', $field, validationRules);
-                                module.validate.field(validationRules);
+                                module.validate.field(validationRules, identifier);
                                 if (!settings.inline) {
                                     module.validate.form(false, true);
                                 }
@@ -458,14 +469,14 @@
                         change: function (event) {
                             var
                                 $field      = $(this),
-                                $fieldGroup = $field.closest($group),
-                                validationRules = module.get.validation($field)
+                                validationRules = module.get.validation($field) || {},
+                                identifier = module.get.identifier(validationRules, $field)
                             ;
-                            if (validationRules && (settings.on === 'change' || ($fieldGroup.hasClass(className.error) && settings.revalidate))) {
+                            if (settings.on === 'change' || (!$module.hasClass(className.initial) && settings.revalidate)) {
                                 clearTimeout(module.timer);
                                 module.timer = setTimeout(function () {
                                     module.debug('Revalidating field', $field, validationRules);
-                                    module.validate.field(validationRules);
+                                    module.validate.field(validationRules, identifier);
                                     if (!settings.inline) {
                                         module.validate.form(false, true);
                                     }
@@ -531,6 +542,9 @@
 
                         return fullFields;
                     },
+                    identifier: function (validation, $el) {
+                        return validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate);
+                    },
                     prompt: function (rule, field) {
                         var
                             ruleName      = module.get.ruleName(rule),
@@ -974,7 +988,7 @@
                         $message.empty();
                     },
                     states: function () {
-                        $module.removeClass(className.error).removeClass(className.success);
+                        $module.removeClass(className.error).removeClass(className.success).addClass(className.initial);
                         if (!settings.inline) {
                             module.remove.errors();
                         }
@@ -1211,7 +1225,7 @@
                                         return rule.type === 'empty';
                                     }) !== 0
                                     : false,
-                                identifier = validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate)
+                                identifier = module.get.identifier(validation, $el)
                             ;
                             if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) {
                                 if (isCheckbox) {
@@ -1243,7 +1257,7 @@
                         if (keyHeldDown) {
                             return false;
                         }
-
+                        $module.removeClass(className.initial);
                         // reset errors
                         formErrors = [];
                         if (module.determine.isValid()) {
@@ -1315,13 +1329,24 @@
                                 ? module.get.field(field.depends)
                                 : false,
                             fieldValid  = true,
-                            fieldErrors = []
+                            fieldErrors = [],
+                            isDisabled = $field.filter(':not(:disabled)').length === 0,
+                            validationMessage = $field[0].validationMessage
                         ;
                         if (!field.identifier) {
                             module.debug('Using field name as identifier', identifier);
                             field.identifier = identifier;
                         }
-                        var isDisabled = $field.filter(':not(:disabled)').length === 0;
+                        if (validationMessage) {
+                            module.debug('Field is natively invalid', identifier);
+                            fieldErrors.push(validationMessage);
+                            fieldValid = false;
+                            if (showErrors) {
+                                $field.closest($group).addClass(className.error);
+                            }
+                        } else if (showErrors) {
+                            $field.closest($group).removeClass(className.error);
+                        }
                         if (isDisabled) {
                             module.debug('Field is disabled. Skipping', identifier);
                         } else if (field.optional && module.is.blank($field)) {
@@ -1329,9 +1354,6 @@
                         } else if (field.depends && module.is.empty($dependsField)) {
                             module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);
                         } else if (field.rules !== undefined) {
-                            if (showErrors) {
-                                $field.closest($group).removeClass(className.error);
-                            }
                             $.each(field.rules, function (index, rule) {
                                 if (module.has.field(identifier)) {
                                     var invalidFields = module.validate.rule(field, rule, true) || [];
@@ -1348,7 +1370,7 @@
                         }
                         if (fieldValid) {
                             if (showErrors) {
-                                module.remove.prompt(identifier, fieldErrors);
+                                module.remove.prompt(identifier);
                                 settings.onValid.call($field);
                             }
                         } else {
@@ -1638,8 +1660,8 @@
             isExactly: '{name} must be exactly "{ruleValue}"',
             not: '{name} cannot be set to "{ruleValue}"',
             notExactly: '{name} cannot be set to exactly "{ruleValue}"',
-            contain: '{name} must contain "{ruleValue}"',
-            containExactly: '{name} must contain exactly "{ruleValue}"',
+            contains: '{name} must contain "{ruleValue}"',
+            containsExactly: '{name} must contain exactly "{ruleValue}"',
             doesntContain: '{name} cannot contain "{ruleValue}"',
             doesntContainExactly: '{name} cannot contain exactly "{ruleValue}"',
             minLength: '{name} must be at least {ruleValue} characters',
@@ -1673,6 +1695,7 @@
         },
 
         className: {
+            initial: 'initial',
             error: 'error',
             label: 'ui basic red pointing prompt label',
             pressed: 'down',

package/src/definitions/collections/form.less

@@ -585,14 +585,7 @@
             box-shadow: @formStates[@@state][boxShadow];
         }
         & when (@state=error) and (@variationFormInvalid) {
-            .ui.form .field input:not(:placeholder-shown):invalid {
-                color: @c;
-                background: @bg;
-                border-color: @formStates[@@state][borderColor];
-                border-radius: @formStates[@@state][borderRadius];
-                box-shadow: @formStates[@@state][boxShadow];
-            }
-            .ui.form .field input:not(:-ms-input-placeholder):invalid when (@supportIE) {
+            .ui.form:not(.initial) .field input:invalid {
                 color: @c;
                 background: @bg;
                 border-color: @formStates[@@state][borderColor];

package/src/definitions/modules/dropdown.js

@@ -1407,11 +1407,13 @@
                                     if (settings.allowAdditions) {
                                         module.remove.userAddition();
                                     }
-                                    module.remove.filteredItem();
+                                    if (!settings.keepSearchTerm) {
+                                        module.remove.filteredItem();
+                                        module.remove.searchTerm();
+                                    }
                                     if (!module.is.visible() && $target.length > 0) {
                                         module.show();
                                     }
-                                    module.remove.searchTerm();
                                     if (!module.is.focusedOnSearch() && skipRefocus !== true) {
                                         module.focusSearch(true);
                                     }
@@ -1597,7 +1599,9 @@
                                         module.verbose('Selecting item from keyboard shortcut', $selectedItem);
                                         module.event.item.click.call($selectedItem, event);
                                         if (module.is.searchSelection()) {
-                                            module.remove.searchTerm();
+                                            if (!settings.keepSearchTerm) {
+                                                module.remove.searchTerm();
+                                            }
                                             if (module.is.multiple()) {
                                                 $search.trigger('focus');
                                             }
@@ -1814,7 +1818,7 @@
                             ? value
                             : text;
                         if (module.can.activate($(element))) {
-                            module.set.selected(value, $(element));
+                            module.set.selected(value, $(element), false, settings.keepSearchTerm);
                             if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
                                 module.hideAndClear();
                             }
@@ -2464,7 +2468,7 @@
                             valueIsSet       = searchValue !== ''
                         ;
                         if (isMultiple && hasSearchValue) {
-                            module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
+                            module.verbose('Adjusting input width', searchWidth);
                             $search.css('width', searchWidth + 'px');
                         }
                         if (hasSearchValue || (isSearchMultiple && valueIsSet)) {
@@ -2763,7 +2767,7 @@
                             return false;
                         }
                         module.debug('Setting selected menu item to', $selectedItem);
-                        if (module.is.multiple()) {
+                        if (module.is.multiple() && !keepSearchTerm) {
                             module.remove.searchWidth();
                         }
                         if (module.is.single()) {
@@ -4006,6 +4010,7 @@
         forceSelection: false, // force a choice on blur with search selection
 
         allowAdditions: false, // whether multiple select should allow user added values
+        keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection
         ignoreCase: false, // whether to consider case sensitivity when creating labels
         ignoreSearchCase: true, // whether to consider case sensitivity when filtering items
         hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value
@@ -4025,8 +4030,6 @@
         duration: 200, // duration of transition
         displayType: false, // displayType of transition
 
-        glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
-
         headerDivider: true, // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>
 
         collapseOnActionable: true, // whether the dropdown should collapse upon selection of an actionable item

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

@@ -127,7 +127,7 @@
 @variationInputDisabled: true;
 @variationInputInverted: true;
 @variationInputStates: @variationAllStates;
-@variationInputInvalid: true;
+@variationInputInvalid: false;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;

package/tasks/admin/distributions/create.js

@@ -3,7 +3,7 @@
 *******************************/
 
 /*
- This will create individual distribution repositories for each SUI distribution
+ This will create individual distribution repositories for each FUI distribution
 
   * copy distribution files to release
   * update package.json file
@@ -153,6 +153,8 @@ module.exports = function (callback) {
                 tasks.push(function () {
                     let
                         definitions,
+                        overridesImport,
+                        lessImport,
                         themeImport,
                         themeConfig,
                         siteTheme,
@@ -161,7 +163,10 @@ module.exports = function (callback) {
                     definitions = gulp.src('src/definitions/**/*', { base: 'src/' })
                         .pipe(gulp.dest(outputDirectory))
                     ;
-                    themeImport = gulp.src('src/semantic.less', { base: 'src/' })
+                    overridesImport = gulp.src('src/overrides.less', { base: 'src/' })
+                        .pipe(gulp.dest(outputDirectory))
+                    ;
+                    lessImport = gulp.src('src/semantic.less', { base: 'src/' })
                         .pipe(gulp.dest(outputDirectory))
                     ;
                     themeImport = gulp.src('src/theme.less', { base: 'src/' })
@@ -177,7 +182,7 @@ module.exports = function (callback) {
                         .pipe(gulp.dest(outputDirectory))
                     ;
 
-                    return mergeStream(definitions, themeImport, themeConfig, siteTheme, themes);
+                    return mergeStream(definitions, overridesImport, lessImport, themeImport, themeConfig, siteTheme, themes);
                 });
             }
 

package/tasks/config/project/install.js

@@ -240,6 +240,7 @@ module.exports = {
         config: './semantic.json.example',
         definitions: './src/definitions',
         gulpFile: './gulpfile.js',
+        overridesImport: './src/overrides.less',
         lessImport: './src/semantic.less',
         site: './src/_site',
         tasks: './tasks',
@@ -253,6 +254,7 @@ module.exports = {
     // expected final filenames
     files: {
         config: 'semantic.json',
+        overridesImport: 'src/overrides.less',
         lessImport: 'src/semantic.less',
         site: 'src/site',
         themeConfig: 'src/theme.config',
@@ -263,6 +265,7 @@ module.exports = {
     folders: {
         config: './',
         definitions: 'src/definitions/',
+        overridesImport: 'src/',
         lessImport: 'src/',
         modules: 'node_modules/',
         site: 'src/site/',

package/tasks/install.js

@@ -69,9 +69,9 @@ module.exports = function (callback) {
         root: path.normalize(__dirname + '/../'),
     }; */
 
-    /* Don't do end user config if SUI is a sub-module */
+    /* Don't do end user config if FUI is a sub-module */
     if (install.isSubModule()) {
-        console.info('SUI is a sub-module, skipping end-user install');
+        console.info('FUI is a sub-module, skipping end-user install');
         callback();
 
         return;
@@ -86,7 +86,7 @@ module.exports = function (callback) {
     }
 
     /* -----------------
-        Update SUI
+        Update FUI
     ----------------- */
 
     // run update scripts if semantic.json exists
@@ -96,6 +96,7 @@ module.exports = function (callback) {
             updatePaths  = {
                 config: path.join(manager.root, files.config),
                 tasks: path.join(updateFolder, folders.tasks),
+                overridesImport: path.join(updateFolder, folders.overridesImport),
                 themeImport: path.join(updateFolder, folders.themeImport),
                 definition: path.join(currentConfig.paths.source.definitions),
                 site: path.join(currentConfig.paths.source.site),
@@ -132,7 +133,11 @@ module.exports = function (callback) {
                     .pipe(plumber())
                     .pipe(gulp.dest(updatePaths.themeImport))
                 ;
-
+                console.info('Updating overrides import file');
+                gulp.src(source.overridesImport)
+                    .pipe(plumber())
+                    .pipe(gulp.dest(updatePaths.overridesImport))
+                ;
                 console.info('Adding new site theme files...');
                 wrench.copyDirSyncRecursive(source.site, updatePaths.site, settings.wrench.merge);
 
@@ -187,7 +192,7 @@ module.exports = function (callback) {
     }
 
     /* --------------
-       Create SUI
+       Create FUI
     --------------- */
 
     gulp.task('run setup', function (callback) {
@@ -263,6 +268,7 @@ module.exports = function (callback) {
             // special install paths only for PM install
             installPaths = extend(false, {}, installPaths, {
                 definition: folders.definitions,
+                overridesImport: folders.overridesImport,
                 lessImport: folders.lessImport,
                 tasks: folders.tasks,
                 theme: folders.themes,
@@ -311,6 +317,10 @@ module.exports = function (callback) {
                 .pipe(plumber())
                 .pipe(gulp.dest(installPaths.themeImport))
             ;
+            gulp.src(source.overridesImport)
+                .pipe(plumber())
+                .pipe(gulp.dest(installPaths.overridesImport))
+            ;
             gulp.src(source.lessImport)
                 .pipe(plumber())
                 .pipe(gulp.dest(installPaths.lessImport))