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

package/src/definitions/modules/progress.less

@@ -17,6 +17,12 @@
 
 @import (multiple) "../../theme.config";
 
+@notIndeterminate: if(@variationProgressIndeterminate, e(":not(.indeterminate)"));
+@notSliding: if(@variationProgressSliding, e(":not(.sliding)"));
+@notFilling: if(@variationProgressFilling, e(":not(.filling)"));
+@notSwinging: if(@variationProgressSwinging, e(":not(.swinging)"));
+@notBasic: if(@variationProgressBasic, e(":not(.basic)"));
+
 /*******************************
             Progress
 *******************************/
@@ -33,6 +39,14 @@
     border-radius: @borderRadius;
 }
 
+& when (@variationProgressBasic) {
+    .ui.basic.progress {
+        background: transparent;
+        border: none;
+        box-shadow: none;
+    }
+}
+
 .ui.progress:first-child {
     margin: @firstMargin;
 }
@@ -50,14 +64,16 @@
     line-height: 1;
     position: @barPosition;
     width: @barInitialWidth;
-    min-width: @barMinWidth;
     background: @barBackground;
     border-radius: @barBorderRadius;
     transition: @barTransition;
     overflow: hidden;
+    &:not(:empty) {
+        min-width: @barMinWidth;
+    }
 }
-.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,
-.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar {
+.ui.ui.ui.progress:not([data-percent])@{notIndeterminate} .bar:not(:empty),
+.ui.ui.ui.progress[data-percent="0"]@{notIndeterminate} .bar:not(:empty) {
     background: transparent;
 }
 .ui.progress[data-percent="0"] .bar .progress {
@@ -328,7 +344,9 @@
 
     .ui.active.progress .bar {
         position: relative;
-        min-width: @activeMinWidth;
+        &:not(:empty) {
+            min-width: @activeMinWidth;
+        }
     }
     .ui.active.progress .bar::after {
         content: "";
@@ -384,7 +402,7 @@
         Inverted
     --------------- */
 
-    .ui.inverted.progress {
+    .ui.inverted.progress@{notBasic} {
         background: @invertedBackground;
         border: @invertedBorder;
     }
@@ -561,7 +579,7 @@
             animation-name: progress-filling;
         }
     }
-    .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
+    .ui.indeterminate.progress@{notSliding}@{notFilling}@{notSwinging} .bar::before {
         background: @indeterminatePulseColor;
     }
     & when (@variationProgressSliding) or (@variationProgressSwinging) or (@variationProgressFilling) {

package/src/definitions/modules/rating.js

@@ -368,7 +368,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/modules/search.js

@@ -126,6 +126,7 @@
                             .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
                             .on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup)
                             .on('click' + eventNamespace, selector.result, module.event.result.click)
+                            .on('click' + eventNamespace, selector.remove, module.event.remove.click)
                         ;
                     },
                 },
@@ -135,7 +136,10 @@
                         // this makes sure $.extend does not add specified search fields to default fields
                         // this is the only setting which should not extend defaults
                         if (parameters && parameters.searchFields !== undefined) {
-                            settings.searchFields = parameters.searchFields;
+                            settings.searchFields = Array.isArray(parameters.searchFields)
+                                ? parameters.searchFields
+                                : [parameters.searchFields]
+                            ;
                         }
                     },
                 },
@@ -169,7 +173,9 @@
                             callback      = function () {
                                 module.cancel.query();
                                 module.remove.focus();
-                                module.timer = setTimeout(function () { module.hideResults(); }, settings.hideDelay);
+                                module.timer = setTimeout(function () {
+                                    module.hideResults();
+                                }, settings.hideDelay);
                             }
                         ;
                         if (pageLostFocus) {
@@ -196,6 +202,12 @@
                             callback();
                         }
                     },
+                    remove: {
+                        click: function () {
+                            module.clear.value();
+                            $prompt.trigger('focus');
+                        },
+                    },
                     result: {
                         mousedown: function () {
                             module.resultsClicked = true;
@@ -629,7 +641,7 @@
                             exactResults = [],
                             fuzzyResults = [],
                             searchExp    = searchTerm.replace(regExp.escape, '\\$&'),
-                            matchRegExp  = new RegExp(regExp.beginsWith + searchExp, 'i'),
+                            matchRegExp = new RegExp(regExp.beginsWith + searchExp, settings.ignoreSearchCase ? 'i' : ''),
 
                             // avoid duplicates when pushing results
                             addResult = function (array, result) {
@@ -665,13 +677,14 @@
                             var concatenatedContent = [];
                             $.each(searchFields, function (index, field) {
                                 var
-                                    fieldExists = (typeof content[field] === 'string') || (typeof content[field] === 'number')
+                                    fieldExists = typeof content[field] === 'string' || typeof content[field] === 'number'
                                 ;
                                 if (fieldExists) {
                                     var text;
                                     text = typeof content[field] === 'string'
                                         ? module.remove.diacritics(content[field])
                                         : content[field].toString();
+                                    text = $('<div/>', { html: text }).text().trim();
                                     if (settings.fullTextSearch === 'all') {
                                         concatenatedContent.push(text);
                                         if (index < lastSearchFieldIndex) {
@@ -702,8 +715,10 @@
                     },
                 },
                 exactSearch: function (query, term) {
-                    query = query.toLowerCase();
-                    term = term.toLowerCase();
+                    if (settings.ignoreSearchCase) {
+                        query = query.toLowerCase();
+                        term = term.toLowerCase();
+                    }
 
                     return term.indexOf(query) > -1;
                 },
@@ -730,8 +745,10 @@
                     if (typeof query !== 'string') {
                         return false;
                     }
-                    query = query.toLowerCase();
-                    term = term.toLowerCase();
+                    if (settings.ignoreSearchCase) {
+                        query = query.toLowerCase();
+                        term = term.toLowerCase();
+                    }
                     if (queryLength > termLength) {
                         return false;
                     }
@@ -827,6 +844,9 @@
                             $module.data(metadata.cache, cache);
                         }
                     },
+                    value: function () {
+                        module.set.value('');
+                    },
                 },
 
                 read: {
@@ -1086,6 +1106,39 @@
                                 response[fields.results] = response[fields.results].slice(0, settings.maxResults);
                             }
                         }
+                        if (settings.highlightMatches) {
+                            var results = response[fields.results],
+                                regExpIgnore = settings.ignoreSearchCase ? 'i' : '',
+                                querySplit = module.get.value().split(''),
+                                diacriticReg = settings.ignoreDiacritics ? '[\u0300-\u036F]?' : '',
+                                htmlReg = '(?![^<]*>)',
+                                markedRegExp = new RegExp(htmlReg + '(' + querySplit.join(diacriticReg + ')(.*?)' + htmlReg + '(') + diacriticReg + ')', regExpIgnore),
+                                markedReplacer = function () {
+                                    var args = [].slice.call(arguments, 1, querySplit.length * 2).map(function (x, i) {
+                                        return i & 1 ? x : '<mark>' + x + '</mark>'; // eslint-disable-line no-bitwise
+                                    });
+
+                                    return args.join('');
+                                }
+                            ;
+                            $.each(results, function (label, content) {
+                                $.each(settings.searchFields, function (index, field) {
+                                    var
+                                        fieldExists = typeof content[field] === 'string' || typeof content[field] === 'number'
+                                    ;
+                                    if (fieldExists) {
+                                        var markedHTML = typeof content[field] === 'string'
+                                            ? content[field]
+                                            : content[field].toString();
+                                        if (settings.ignoreDiacritics) {
+                                            markedHTML = markedHTML.normalize('NFD');
+                                        }
+                                        markedHTML = markedHTML.replace(/<\/?mark>/g, '');
+                                        response[fields.results][label][field] = markedHTML.replace(markedRegExp, markedReplacer);
+                                    }
+                                });
+                            });
+                        }
                         if (isFunction(template)) {
                             html = template(response, fields, settings.preserveHTML);
                         } else {
@@ -1171,7 +1224,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
@@ -1312,9 +1367,15 @@
         // search anywhere in value (set to 'exact' to require exact matches
         fullTextSearch: 'exact',
 
+        // Whether search result should highlight matching strings
+        highlightMatches: false,
+
         // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
         ignoreDiacritics: false,
 
+        // whether to consider case sensitivity on local searching
+        ignoreSearchCase: true,
+
         // whether to add events to prompt automatically
         automatic: true,
 
@@ -1393,6 +1454,7 @@
             categoryResults: 'results', // array of results (category view)
             description: 'description', // result description
             image: 'image', // result image
+            alt: 'alt', // result alt text for image
             price: 'price', // result price
             results: 'results', // array of results (standard)
             title: 'title', // result title
@@ -1404,6 +1466,7 @@
 
         selector: {
             prompt: '.prompt',
+            remove: '> .icon.input > .remove.icon',
             searchButton: '.search.button',
             results: '.results',
             message: '.results > .message',
@@ -1432,8 +1495,9 @@
                     };
                 if (shouldEscape.test(string)) {
                     string = string.replace(/&(?![\d#a-z]{1,12};)/gi, '&amp;');
-
-                    return string.replace(badChars, escapedChar);
+                    string = string.replace(badChars, escapedChar);
+                    // FUI controlled HTML is still allowed
+                    string = string.replace(/&lt;(\/)*mark&gt;/g, '<$1mark>');
                 }
 
                 return string;
@@ -1479,7 +1543,7 @@
                                 if (result[fields.image] !== undefined) {
                                     html += ''
                                         + '<div class="image">'
-                                        + ' <img src="' + result[fields.image].replace(/"/g, '') + '">'
+                                        + ' <img src="' + result[fields.image].replace(/"/g, '') + (result[fields.alt] ? '" alt="' + result[fields.alt].replace(/"/g, '') : '') + '">'
                                         + '</div>';
                                 }
                                 html += '<div class="content">';
@@ -1532,7 +1596,7 @@
                         if (result[fields.image] !== undefined) {
                             html += ''
                                 + '<div class="image">'
-                                + ' <img src="' + result[fields.image].replace(/"/g, '') + '">'
+                                + ' <img src="' + result[fields.image].replace(/"/g, '') + (result[fields.alt] ? '" alt="' + result[fields.alt].replace(/"/g, '') : '') + '">'
                                 + '</div>';
                         }
                         html += '<div class="content">';

package/src/definitions/modules/search.less

@@ -271,37 +271,46 @@
            Types
 *******************************/
 
-& when (@variationSearchSelection) {
+& when (@variationSearchClear) {
     /* --------------
-        Selection
+        Clear Icon
     --------------- */
 
-    .ui.search.selection .prompt {
-        border-radius: @selectionPromptBorderRadius;
+    .ui.search > .icon.input > .remove.icon {
+        pointer-events: all;
+        transition: @clearableIconTransition;
+        cursor: pointer;
+        opacity: @clearableIconOpacity;
+        &:hover {
+            opacity: @clearableIconHoverOpacity;
+        }
     }
-
-    /* Remove input */
-    .ui.search.selection > .icon.input > .remove.icon {
-        pointer-events: none;
-        position: absolute;
-        left: auto;
-        opacity: 0;
-        color: @selectionCloseIconColor;
-        top: @selectionCloseTop;
-        right: @selectionCloseRight;
-        transition: @selectionCloseTransition;
+    .ui.search > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
+        right: @clearableIconInputRight;
     }
-    .ui.search.selection > .icon.input > .active.remove.icon {
+    .ui.search input[type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
         cursor: pointer;
-        opacity: @selectionCloseIconOpacity;
-        pointer-events: auto;
+        transition: @clearableIconTransition;
+        opacity: @clearableIconOpacity;
+        background: @clearableIconBackground;
+        height: @clearableIconHeight;
+        width: @clearableIconWidth;
+        &:hover {
+            opacity: @clearableIconHoverOpacity;
+        }
+    }
+    & when (@variationSearchLoading) {
+        .ui.loading.search input[type="search"]::-webkit-search-cancel-button {
+            display: none;
+        }
     }
-    .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
-        right: @selectionCloseIconInputRight;
+    .ui.search > .icon.input > input:placeholder-shown ~ .remove.icon,
+    .ui.search.loading > .icon.input > .remove.icon {
+        display: none;
     }
-    .ui.search.selection > .icon.input > .remove.icon:hover {
-        opacity: @selectionCloseIconHoverOpacity;
-        color: @selectionCloseIconHoverColor;
+    .ui.search > .icon.input > input:-ms-input-placeholder ~ .remove.icon when (@supportIE) {
+        display: none;
     }
 }
 
@@ -565,8 +574,8 @@
 .ui.search {
     font-size: @relativeMedium;
 }
-& when not (@variationFeedSizes = false) {
-    each(@variationFeedSizes, {
+& when not (@variationSearchSizes = false) {
+    each(@variationSearchSizes, {
         @s: @{value}SearchSize;
         .ui.@{value}.search {
             font-size: @@s;
@@ -574,6 +583,13 @@
     });
 }
 
+& when (@variationSearchHighlightMatches) {
+    .ui.search > .results mark {
+        background: @highlightMatchesBackground;
+        color: @highlightMatchesColor;
+    }
+}
+
 /* --------------
       Mobile
 --------------- */

package/src/definitions/modules/shape.js

@@ -185,7 +185,7 @@
                 set: {
 
                     defaultSide: function () {
-                        $activeSide = $side.filter('.' + settings.className.active);
+                        $activeSide = $side.filter('.' + className.active);
                         $nextSide = $activeSide.next(selector.side).length > 0
                             ? $activeSide.next(selector.side)
                             : $side.first();
@@ -211,7 +211,7 @@
 
                     currentStageSize: function () {
                         var
-                            $activeSide = $side.filter('.' + settings.className.active),
+                            $activeSide = $side.filter('.' + className.active),
                             width       = $activeSide.outerWidth(true),
                             height      = $activeSide.outerHeight(true)
                         ;
@@ -227,7 +227,7 @@
                         var
                             $clone      = $module.clone().addClass(className.loading),
                             $side       = $clone.find('>' + selector.sides + '>' + selector.side),
-                            $activeSide = $side.filter('.' + settings.className.active),
+                            $activeSide = $side.filter('.' + className.active),
                             $nextSide   = nextIndex
                                 ? $side.eq(nextIndex)
                                 : ($activeSide.next(selector.side).length > 0
@@ -623,7 +623,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/modules/sidebar.js

@@ -871,7 +871,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