fomantic-ui 2.9.4-beta.10 → 2.9.4-beta.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.10+3564140",
+  "version": "2.9.4-beta.100+7f5f82a",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -27,34 +27,33 @@
   "scripts": {
     "build": "gulp build",
     "changelog": "auto-changelog -p",
-    "lint": "eslint --ext .js . && stylelint \"**/*.{css,less,overrides,variables}\"",
-    "lint-fix": "eslint --ext .js . --fix && stylelint \"**/*.{css,less,overrides,variables}\" --fix"
+    "lint": "eslint --ext .js,.ts . && stylelint \"**/*.{css,less,overrides,variables}\"",
+    "lint-fix": "eslint --ext .js,.ts . --fix && stylelint \"**/*.{css,less,overrides,variables}\" --fix"
   },
   "dependencies": {
     "@actions/core": "^1.6.0",
     "@octokit/core": "^3.6.0",
     "@octokit/rest": "^18.12.0",
-    "better-console": "^1.0.1",
+    "@fomantic/better-console": "^1.0.2",
     "browserslist": "^4.21.4",
     "del": "^6.1.1",
     "extend": "^3.0.2",
-    "gulp": "^4.0.0",
+    "gulp": "^5.0.0",
     "gulp-autoprefixer": "^8.0.0",
-    "gulp-chmod": "^2.0.0",
+    "gulp-chmod": "^3.0.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-clone": "^2.0.1",
     "gulp-concat": "^2.6.1",
-    "gulp-concat-css": "^3.1.0",
-    "gulp-concat-filenames": "^1.2.0",
-    "gulp-copy": "^4.0.0",
-    "gulp-dedupe": "^0.0.2",
+    "@fomantic/gulp-concat-css": "^3.2.1",
+    "@fomantic/gulp-concat-filenames": "^1.2.1",
+    "@fomantic/gulp-dedupe": "^0.0.3",
     "gulp-flatten": "^0.4.0",
-    "gulp-git": "^2.9.0",
-    "gulp-header": "^2.0.5",
-    "gulp-if": "^2.0.2",
+    "@fomantic/gulp-git": "^2.11.1",
+    "@fomantic/gulp-header": "^2.1.1",
+    "gulp-if": "^3.0.0",
     "gulp-json-editor": "^2.4.3",
     "gulp-less": "^5.0.0",
-    "gulp-plumber": "^1.1.0",
+    "@fomantic/gulp-plumber": "^1.2.2",
     "gulp-print": "^5.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-replace": "^1.0.0",
@@ -68,6 +67,7 @@
     "merge-stream": "^2.0.0",
     "mkdirp": "^1.0.4",
     "normalize-path": "^3.0.0",
+    "ordered-read-streams": "^1.0.1",
     "replace-ext": "^1.0.0",
     "require-dot-file": "^0.4.0",
     "wrench-sui": "^0.0.3",

package/semantic.json.example

@@ -16,7 +16,7 @@
     },
     "clean"        : "dist/"
   },
-
+  "fileName"   : "semantic",
   "permission" : false,
   "autoInstall": false,
   "rtl": false

package/src/definitions/behaviors/api.js

@@ -647,7 +647,9 @@
                                 module.debug('Adding error state');
                                 module.set.error();
                                 if (module.should.removeError()) {
-                                    setTimeout(function () { module.remove.error(); }, settings.errorDuration);
+                                    setTimeout(function () {
+                                        module.remove.error();
+                                    }, settings.errorDuration);
                                 }
                             }
                             module.debug('API Request failed', errorMessage, xhr);
@@ -971,7 +973,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/behaviors/form.js

@@ -38,6 +38,7 @@
                 element     = this,
 
                 formErrors  = [],
+                formErrorsTracker = {},
                 keyHeldDown = false,
 
                 // set at run-time
@@ -538,6 +539,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;
@@ -551,9 +559,10 @@
                             ancillary     = module.get.ancillaryValue(rule),
                             $field        = module.get.field(field.identifier),
                             value         = $field.val(),
-                            prompt        = isFunction(rule.prompt)
-                                ? rule.prompt(value)
-                                : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
+                            promptCheck   = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
+                            prompt        = String(isFunction(promptCheck)
+                                ? promptCheck.call($field[0], value)
+                                : promptCheck),
                             requiresValue = prompt.search('{value}') !== -1,
                             requiresName  = prompt.search('{name}') !== -1,
                             parts,
@@ -591,10 +600,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 {
@@ -711,7 +720,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),
@@ -940,7 +949,7 @@
                                     $prompt.css('display', 'none');
                                 }
                                 $prompt
-                                    .appendTo($fieldGroup)
+                                    .appendTo($fieldGroup.filter('.' + className.error))
                                 ;
                             }
                             $prompt
@@ -1237,20 +1246,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');
                                 }
                             }
                         });
@@ -1277,6 +1286,7 @@
                         $module.removeClass(className.initial);
                         // reset errors
                         formErrors = [];
+                        formErrorsTracker = {};
                         if (module.determine.isValid()) {
                             module.debug('Form has no validation errors, submitting');
                             module.set.success();
@@ -1342,28 +1352,30 @@
                         var
                             identifier    = field.identifier || fieldName,
                             $field        = module.get.field(identifier),
+                            $fieldGroup = $field.closest($group),
                             $dependsField = field.depends
                                 ? module.get.field(field.depends)
                                 : false,
                             fieldValid  = true,
                             fieldErrors = [],
-                            isDisabled = $field.filter(':not(:disabled)').length === 0,
+                            isDisabled = $field.filter(':not(:disabled)').length === 0 || $fieldGroup.hasClass(className.disabled) || $fieldGroup.parent().hasClass(className.disabled),
                             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 && !isDisabled) {
                             module.debug('Field is natively invalid', identifier);
                             fieldErrors.push(validationMessage);
                             fieldValid = false;
                             if (showErrors) {
-                                $field.closest($group).addClass(className.error);
+                                $fieldGroup.addClass(className.error);
                             }
                         } else if (showErrors) {
-                            $field.closest($group).removeClass(className.error);
+                            $fieldGroup.removeClass(className.error);
                         }
                         if (isDisabled) {
                             module.debug('Field is disabled. Skipping', identifier);
@@ -1378,7 +1390,22 @@
                                     var invalidFields = module.validate.rule(field, rule, true) || [];
                                     if (invalidFields.length > 0) {
                                         module.debug('Field is invalid', identifier, rule.type);
-                                        fieldErrors.push(module.get.prompt(rule, field));
+                                        var fieldError = module.get.prompt(rule, field);
+                                        if (!settings.inline) {
+                                            if (
+                                                // Always allow the first error prompt for new field identifiers
+                                                (!(identifier in formErrorsTracker)
+                                                // Also allow multiple error prompts per field identifier but make sure each prompt is unique
+                                                || formErrorsTracker[identifier].indexOf(fieldError) === -1)
+                                                // Limit the number of unique error prompts for every field identifier if specified
+                                                && (!errorLimit || (formErrorsTracker[identifier] || []).length < errorLimit)
+                                            ) {
+                                                fieldErrors.push(fieldError);
+                                                (formErrorsTracker[identifier] = formErrorsTracker[identifier] || []).push(fieldError);
+                                            }
+                                        } else {
+                                            fieldErrors.push(fieldError);
+                                        }
                                         fieldValid = false;
                                         if (showErrors) {
                                             $(invalidFields).closest($group).addClass(className.error);
@@ -1393,7 +1420,7 @@
                                 settings.onValid.call($field);
                             }
                         } else {
-                            if (showErrors) {
+                            if (showErrors && fieldErrors.length > 0) {
                                 formErrors = formErrors.concat(fieldErrors);
                                 module.add.prompt(identifier, fieldErrors, true);
                                 settings.onInvalid.call($field, fieldErrors);
@@ -1491,6 +1518,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
@@ -1511,7 +1544,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var
@@ -1605,6 +1640,7 @@
         name: 'Form',
         namespace: 'form',
 
+        silent: false,
         debug: false,
         verbose: false,
         performance: true,
@@ -1627,6 +1663,7 @@
         errorFocus: true,
         dateHandling: 'date', // 'date', 'input', 'formatter'
         errorLimit: 0,
+        noNativeValidation: false,
 
         onValid: function () {},
         onInvalid: function () {},
@@ -1669,6 +1706,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',
@@ -1801,10 +1839,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/behaviors/state.js

@@ -482,7 +482,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/behaviors/visibility.js

@@ -1088,7 +1088,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/collections/form.less

@@ -17,6 +17,19 @@
 
 @import (multiple) "../../theme.config";
 
+@notInline: if(@variationFormInline, e(":not(.inline)"));
+@notInverted: if(@variationFormInverted, e(":not(.inverted)"));
+@notWide: if(@variationFormWide, e(":not(.wide)"));
+@notGrouped: if(@variationFormGrouped, e(":not(.grouped)"));
+@notRequired: if(@variationFormRequired, e(":not(.required)"));
+@notUnstackable: if(@variationFormUnstackable, e(":not(.unstackable)"));
+
+@notToggle: if(@variationCheckboxToggle, e(":not(.toggle)"));
+@notSlider: if(@variationCheckboxSlider, e(":not(.slider)"));
+@notCompact: if(@variationDropdownCompact, e(":not(.compact)"));
+@notIcon: if(@variationInputIcon, e(":not(.icon)"));
+@notCorner: if(@variationLabelCorner, e(":not(.corner)"));
+
 /*******************************
             Elements
 *******************************/
@@ -69,7 +82,7 @@
     font-weight: @labelFontWeight;
     text-transform: @labelTextTransform;
 }
-.ui.form:not(.inverted) .field > label:not(.button) {
+.ui.form@{notInverted} .field > label:not(.button) {
     color: @labelColor;
 }
 
@@ -183,16 +196,16 @@
     Checkbox margin
 --------------------- */
 
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) label + .ui.ui.checkbox {
     margin-top: @checkboxLabelFieldTopMargin;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) .ui.checkbox {
     margin-top: @inputLineHeight + @checkboxFieldTopMargin;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) .ui.toggle.checkbox {
     margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) .ui.slider.checkbox {
     margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin;
 }
 .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
@@ -210,7 +223,7 @@
           Transparent
     --------------------- */
 
-    .ui.form .field .transparent.input:not(.icon) input,
+    .ui.form .field .transparent.input@{notIcon} input,
     .ui.form .field input.transparent,
     .ui.form .field textarea.transparent {
         padding: @transparentPadding;
@@ -254,7 +267,7 @@
 --------------------- */
 
 /* Block */
-.ui.form .field > .selection.dropdown:not(.compact) {
+.ui.form .field > .selection.dropdown@{notCompact} {
     min-width: auto;
     width: 100%;
 }
@@ -287,8 +300,8 @@
 
 & when (@variationFormInline) {
     /* Inline */
-    .ui.form .inline.fields .field:not(.wide) .ui.input,
-    .ui.form .inline.field:not(.wide) .ui.input {
+    .ui.form .inline.fields .field@{notWide} .ui.input,
+    .ui.form .inline.field@{notWide} .ui.input {
         width: auto;
         vertical-align: middle;
     }
@@ -528,9 +541,9 @@
         }
 
         .ui.ui.form .fields.@{state} .field label,
-        .ui.ui.form .fields.@{state} .field .ui.label:not(.corner),
+        .ui.ui.form .fields.@{state} .field .ui.label@{notCorner},
         .ui.ui.form .field.@{state} label,
-        .ui.ui.form .field.@{state} .ui.label:not(.corner),
+        .ui.ui.form .field.@{state} .ui.label@{notCorner},
         .ui.ui.form .fields.@{state} .field .input,
         .ui.ui.form .field.@{state} .input {
             color: @c;
@@ -653,6 +666,7 @@
         }
 
         /* Placeholder */
+        .ui.form .@{state} .ui.dropdown > .default.text,
         .ui.form .@{state} ::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
@@ -660,6 +674,7 @@
             color: @formStates[@@state][inputPlaceholderColor] !important;
         }
 
+        .ui.form .@{state} .ui.dropdown > input:focus ~ .default.text,
         .ui.form .@{state} :focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
@@ -718,12 +733,12 @@
         /*--------------------
             Checkbox State
         ---------------------*/
-        .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label,
-        .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label {
+        .ui.form .fields.@{state} .field .checkbox@{notToggle}@{notSlider} label,
+        .ui.form .field.@{state} .checkbox@{notToggle}@{notSlider} label {
             color: @c;
         }
-        .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label::before,
-        .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label::before {
+        .ui.form .fields.@{state} .field .checkbox@{notToggle}@{notSlider} label::before,
+        .ui.form .field.@{state} .checkbox@{notToggle}@{notSlider} label::before {
             background: @bg;
             border-color: @bdc;
         }
@@ -818,11 +833,11 @@
          Required Field
     --------------------- */
 
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > label::after,
     .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after,
     .ui.form label.required::after {
         margin: @requiredMargin;
@@ -830,7 +845,7 @@
         color: @requiredColor;
     }
 
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > label::after,
     .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
@@ -839,7 +854,7 @@
         vertical-align: top;
     }
 
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after {
         position: absolute;
         top: 0;
@@ -847,12 +862,16 @@
     }
 }
 
-.ui.ui.ui.ui.form .fields > label:empty::after,
-.ui.ui.ui.ui.form .field > label:empty::after {
+.ui.ui.ui.ui.form .fields@{notRequired} > label:empty::after,
+.ui.ui.ui.ui.form .fields@{notGrouped}@{notInline} > .field@{notRequired} > label:empty::after {
     content: " ";
     display: inline-block;
 }
 
+.ui.ui.ui.ui.form .inline.fields .field@{notRequired} > label:empty {
+    display: none;
+}
+
 /*******************************
            Variations
 *******************************/
@@ -866,6 +885,7 @@
     .ui.form .inverted.segment label,
     .ui.form .inverted.segment .ui.checkbox label,
     .ui.inverted.form .ui.checkbox label,
+    .ui.inverted.form .grouped.fields > label,
     .ui.inverted.form .inline.fields > label,
     .ui.inverted.form .inline.fields .field > label,
     .ui.inverted.form .inline.fields .field > p,
@@ -1005,8 +1025,8 @@
         margin-bottom: 0;
     }
 
-    .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
-    .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
+    .ui.form@{notUnstackable} .fields@{notUnstackable} > .fields,
+    .ui.form@{notUnstackable} .fields@{notUnstackable} > .field {
         width: @oneColumn;
         margin: 0 0 @rowDistance;
     }