fomantic-ui 2.10.0-beta.4 → 2.10.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.10.0-beta.4+fcf090f",
+  "version": "2.10.0-beta.5+789e0d0",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/modules/dropdown.js

@@ -416,7 +416,7 @@
                                 .attr('class', $input.attr('class'))
                                 .addClass(className.selection)
                                 .addClass(className.dropdown)
-                                .html(templates.dropdown(selectValues, fields, settings.preserveHTML, settings.className))
+                                .html(templates.dropdown(selectValues, settings))
                                 .insertBefore($input)
                             ;
                             if ($input.hasClass(className.multiple) && $input.prop('multiple') === false) {
@@ -446,7 +446,7 @@
                         module.refresh();
                     },
                     menu: function (values) {
-                        $menu.html(templates.menu(values, fields, settings.preserveHTML, settings.className));
+                        $menu.html(templates.menu(values, settings));
                         $item = $menu.find(selector.item);
                         $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
                     },
@@ -1113,7 +1113,7 @@
                                     value = settings.templates.deQuote(item[fields.value]),
                                     name = settings.templates.escape(
                                         item[fields.name] || '',
-                                        settings.preserveHTML
+                                        settings
                                     )
                                 ;
                                 $input.append('<option value="' + value + '"' + (item.selected === true ? ' selected' : '') + '>' + name + '</option>');
@@ -2902,7 +2902,7 @@
                         $label = $('<a />')
                             .addClass(className.label)
                             .attr('data-' + metadata.value, escapedValue)
-                            .html(templates.label(escapedValue, text, settings.preserveHTML, settings.className))
+                            .html(templates.label(escapedValue, text, settings))
                         ;
                         $label = settings.onLabelCreate.call($label, escapedValue, text);
 
@@ -4269,8 +4269,8 @@
         deQuote: function (string, encode) {
             return String(string).replace(/"/g, encode ? '&quot;' : '');
         },
-        escape: function (string, preserveHTML) {
-            if (preserveHTML) {
+        escape: function (string, settings) {
+            if (settings.preserveHTML) {
                 return string;
             }
             var
@@ -4295,31 +4295,34 @@
             return string;
         },
         // generates dropdown from select values
-        dropdown: function (select, fields, preserveHTML, className) {
+        dropdown: function (select, settings) {
             var
                 placeholder = select.placeholder || false,
-                html        = '',
-                escape = $.fn.dropdown.settings.templates.escape,
-                deQuote = $.fn.dropdown.settings.templates.deQuote
+                html = '',
+                className = settings.className,
+                escape = settings.templates.escape,
+                deQuote = settings.templates.deQuote
             ;
             html += '<i class="dropdown icon"></i>';
             html += placeholder
-                ? '<div class="default text">' + escape(placeholder, preserveHTML) + '</div>'
+                ? '<div class="default text">' + escape(placeholder, settings) + '</div>'
                 : '<div class="text"></div>';
             html += '<div class="' + deQuote(className.menu) + '">';
-            html += $.fn.dropdown.settings.templates.menu(select, fields, preserveHTML, className);
+            html += settings.templates.menu(select, settings);
             html += '</div>';
 
             return html;
         },
 
         // generates just menu from select
-        menu: function (response, fields, preserveHTML, className) {
+        menu: function (response, settings) {
             var
+                fields = settings.fields,
                 values = response[fields.values] || [],
-                html   = '',
-                escape = $.fn.dropdown.settings.templates.escape,
-                deQuote = $.fn.dropdown.settings.templates.deQuote
+                html = '',
+                className = settings.className,
+                escape = settings.templates.escape,
+                deQuote = settings.templates.deQuote
             ;
             $.each(values, function (index, option) {
                 var
@@ -4353,7 +4356,7 @@
                         maybeDescriptionVertical = option[fields.descriptionVertical]
                             ? className.descriptionVertical + ' '
                             : '',
-                        hasDescription = escape(option[fields.description] || '', preserveHTML) !== ''
+                        hasDescription = escape(option[fields.description] || '', settings) !== ''
                     ;
                     html += '<div class="' + deQuote(maybeActionable + maybeDisabled + maybeDescriptionVertical + (option[fields.class] || className.item)) + '" data-value="' + deQuote(option[fields.value], true) + '"' + maybeText + maybeData + '>';
                     if (isMenu) {
@@ -4366,17 +4369,17 @@
                         html += '<i class="' + deQuote(option[fields.icon] + ' ' + (option[fields.iconClass] || className.icon)) + '"></i>';
                     }
                     if (hasDescription) {
-                        html += '<span class="' + deQuote(className.description) + '">' + escape(option[fields.description] || '', preserveHTML) + '</span>';
+                        html += '<span class="' + deQuote(className.description) + '">' + escape(option[fields.description] || '', settings) + '</span>';
                         html += !isMenu ? '<span class="' + deQuote(className.text) + '">' : '';
                     }
                     if (isMenu) {
                         html += '<span class="' + deQuote(className.text) + '">';
                     }
-                    html += escape(option[fields.name] || '', preserveHTML);
+                    html += escape(option[fields.name] || '', settings);
                     if (isMenu) {
                         html += '</span>';
                         html += '<div class="' + deQuote(itemType) + '">';
-                        html += $.fn.dropdown.settings.templates.menu(option, fields, preserveHTML, className);
+                        html += settings.templates.menu(option, settings);
                         html += '</div>';
                     } else if (hasDescription) {
                         html += '</span>';
@@ -4384,7 +4387,7 @@
                     html += '</div>';
                 } else if (itemType === 'header') {
                     var
-                        groupName = escape(option[fields.name] || '', preserveHTML),
+                        groupName = escape(option[fields.name] || '', settings),
                         groupIcon = deQuote(option[fields.icon] || className.groupIcon)
                     ;
                     if (groupName !== '' || groupIcon !== '') {
@@ -4405,13 +4408,14 @@
         },
 
         // generates label for multiselect
-        label: function (value, text, preserveHTML, className) {
+        label: function (value, text, settings) {
             var
-                escape = $.fn.dropdown.settings.templates.escape,
-                deQuote = $.fn.dropdown.settings.templates.deQuote
+                className = settings.className,
+                escape = settings.templates.escape,
+                deQuote = settings.templates.deQuote
             ;
 
-            return escape(text, preserveHTML) + '<i class="' + deQuote(className.delete) + ' icon"></i>';
+            return escape(text, settings) + '<i class="' + deQuote(className.delete) + ' icon"></i>';
         },
 
         // generates messages like "No results"

package/src/definitions/modules/flyout.js

@@ -117,10 +117,10 @@
                     }
                     $module.addClass(settings.class);
                     if (settings.title !== '') {
-                        $module.find(selector.header).html(module.helpers.escape(settings.title, settings.preserveHTML)).addClass(settings.classTitle);
+                        $module.find(selector.header).html(module.helpers.escape(settings.title)).addClass(settings.classTitle);
                     }
                     if (settings.content !== '') {
-                        $module.find(selector.content).html(module.helpers.escape(settings.content, settings.preserveHTML)).addClass(settings.classContent);
+                        $module.find(selector.content).html(module.helpers.escape(settings.content)).addClass(settings.classContent);
                     }
                     if (module.has.configActions()) {
                         var $actions = $module.find(selector.actions).addClass(settings.classActions);
@@ -134,7 +134,7 @@
                                 icon = el[fields.icon]
                                     ? '<i ' + (el[fields.text] ? 'aria-hidden="true"' : '') + ' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>'
                                     : '',
-                                text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
+                                text = module.helpers.escape(el[fields.text] || ''),
                                 cls = module.helpers.deQuote(el[fields.class] || ''),
                                 click = el[fields.click] && isFunction(el[fields.click])
                                     ? el[fields.click]
@@ -1082,8 +1082,8 @@
                     deQuote: function (string) {
                         return String(string).replace(/"/g, '');
                     },
-                    escape: function (string, preserveHTML) {
-                        if (preserveHTML) {
+                    escape: function (string) {
+                        if (settings.preserveHTML) {
                             return string;
                         }
                         var

package/src/definitions/modules/modal.js

@@ -111,10 +111,10 @@
                     }
                     $module.addClass(settings.class);
                     if (settings.title !== '') {
-                        $module.find(selector.title).html(module.helpers.escape(settings.title, settings.preserveHTML)).addClass(settings.classTitle);
+                        $module.find(selector.title).html(module.helpers.escape(settings.title)).addClass(settings.classTitle);
                     }
                     if (settings.content !== '') {
-                        $module.find(selector.content).html(module.helpers.escape(settings.content, settings.preserveHTML)).addClass(settings.classContent);
+                        $module.find(selector.content).html(module.helpers.escape(settings.content)).addClass(settings.classContent);
                     }
                     if (module.has.configActions()) {
                         var $actions = $module.find(selector.actions).addClass(settings.classActions);
@@ -128,7 +128,7 @@
                                 icon = el[fields.icon]
                                     ? '<i ' + (el[fields.text] ? 'aria-hidden="true"' : '') + ' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>'
                                     : '',
-                                text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
+                                text = module.helpers.escape(el[fields.text] || ''),
                                 cls = module.helpers.deQuote(el[fields.class] || ''),
                                 click = el[fields.click] && isFunction(el[fields.click])
                                     ? el[fields.click]
@@ -930,8 +930,8 @@
                     deQuote: function (string) {
                         return String(string).replace(/"/g, '');
                     },
-                    escape: function (string, preserveHTML) {
-                        if (preserveHTML) {
+                    escape: function (string) {
+                        if (settings.preserveHTML) {
                             return string;
                         }
                         var

package/src/definitions/modules/search.js

@@ -1140,7 +1140,7 @@
                             });
                         }
                         if (isFunction(template)) {
-                            html = template(response, fields, settings.preserveHTML);
+                            html = template(response, settings);
                         } else {
                             module.error(error.noTemplate, false);
                         }
@@ -1476,8 +1476,8 @@
         },
 
         templates: {
-            escape: function (string, preserveHTML) {
-                if (preserveHTML) {
+            escape: function (string, settings) {
+                if (settings.preserveHTML) {
                     return string;
                 }
                 var
@@ -1519,10 +1519,11 @@
 
                 return html;
             },
-            category: function (response, fields, preserveHTML) {
+            category: function (response, settings) {
                 var
                     html = '',
-                    escape = $.fn.search.settings.templates.escape
+                    fields = settings.fields,
+                    escape = settings.templates.escape
                 ;
                 if (response[fields.categoryResults] !== undefined) {
                     // each category
@@ -1531,7 +1532,7 @@
                             html += '<div class="category">';
 
                             if (category[fields.categoryName] !== undefined) {
-                                html += '<div class="name">' + escape(category[fields.categoryName], preserveHTML) + '</div>';
+                                html += '<div class="name">' + escape(category[fields.categoryName], settings) + '</div>';
                             }
 
                             // each item inside category
@@ -1548,13 +1549,13 @@
                                 }
                                 html += '<div class="content">';
                                 if (result[fields.price] !== undefined) {
-                                    html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
+                                    html += '<div class="price">' + escape(result[fields.price], settings) + '</div>';
                                 }
                                 if (result[fields.title] !== undefined) {
-                                    html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
+                                    html += '<div class="title">' + escape(result[fields.title], settings) + '</div>';
                                 }
                                 if (result[fields.description] !== undefined) {
-                                    html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
+                                    html += '<div class="description">' + escape(result[fields.description], settings) + '</div>';
                                 }
                                 html += ''
                                     + '</div>';
@@ -1569,11 +1570,11 @@
                         html += fields.actionURL === false
                             ? ''
                                 + '<div class="action">'
-                                + escape(response[fields.action][fields.actionText], preserveHTML)
+                                + escape(response[fields.action][fields.actionText], settings)
                                 + '</div>'
                             : ''
                                 + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g, '') + '" class="action">'
-                                + escape(response[fields.action][fields.actionText], preserveHTML)
+                                + escape(response[fields.action][fields.actionText], settings)
                                 + '</a>';
                     }
 
@@ -1582,10 +1583,11 @@
 
                 return false;
             },
-            standard: function (response, fields, preserveHTML) {
+            standard: function (response, settings) {
                 var
                     html = '',
-                    escape = $.fn.search.settings.templates.escape
+                    fields = settings.fields,
+                    escape = settings.templates.escape
                 ;
                 if (response[fields.results] !== undefined) {
                     // each result
@@ -1601,13 +1603,13 @@
                         }
                         html += '<div class="content">';
                         if (result[fields.price] !== undefined) {
-                            html += '<div class="price">' + escape(result[fields.price], preserveHTML) + '</div>';
+                            html += '<div class="price">' + escape(result[fields.price], settings) + '</div>';
                         }
                         if (result[fields.title] !== undefined) {
-                            html += '<div class="title">' + escape(result[fields.title], preserveHTML) + '</div>';
+                            html += '<div class="title">' + escape(result[fields.title], settings) + '</div>';
                         }
                         if (result[fields.description] !== undefined) {
-                            html += '<div class="description">' + escape(result[fields.description], preserveHTML) + '</div>';
+                            html += '<div class="description">' + escape(result[fields.description], settings) + '</div>';
                         }
                         html += ''
                             + '</div>';
@@ -1617,11 +1619,11 @@
                         html += fields.actionURL === false
                             ? ''
                                 + '<div class="action">'
-                                + escape(response[fields.action][fields.actionText], preserveHTML)
+                                + escape(response[fields.action][fields.actionText], settings)
                                 + '</div>'
                             : ''
                                 + '<a href="' + response[fields.action][fields.actionURL].replace(/"/g, '') + '" class="action">'
-                                + escape(response[fields.action][fields.actionText], preserveHTML)
+                                + escape(response[fields.action][fields.actionText], settings)
                                 + '</a>';
                     }
 

package/src/definitions/modules/toast.js

@@ -192,7 +192,7 @@
                                 $content.append($('<div/>', {
                                     class: className.title,
                                     id: titleId,
-                                    html: module.helpers.escape(settings.title, settings.preserveHTML),
+                                    html: module.helpers.escape(settings.title),
                                 }));
                             }
                             var descId = '_' + module.get.id() + 'desc';
@@ -200,7 +200,7 @@
                             $content.append($('<div/>', {
                                 class: className.message,
                                 id: descId,
-                                html: module.helpers.escape(settings.message, settings.preserveHTML),
+                                html: module.helpers.escape(settings.message),
                             }));
 
                             $toast
@@ -232,10 +232,10 @@
                                 $toast.find(selector.image).attr('src', settings.showImage).attr('alt', settings.alt || '');
                             }
                             if (settings.title !== '') {
-                                $toast.find(selector.title).html(module.helpers.escape(settings.title, settings.preserveHTML));
+                                $toast.find(selector.title).html(module.helpers.escape(settings.title));
                             }
                             if (settings.message !== '') {
-                                $toast.find(selector.message).html(module.helpers.escape(settings.message, settings.preserveHTML));
+                                $toast.find(selector.message).html(module.helpers.escape(settings.message));
                             }
                         }
                         if ($toast.hasClass(className.compact)) {
@@ -262,7 +262,7 @@
                                         ? '<i ' + (el[fields.text] ? 'aria-hidden="true"' : '')
                                             + ' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>'
                                         : '',
-                                    text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
+                                    text = module.helpers.escape(el[fields.text] || ''),
                                     cls = module.helpers.deQuote(el[fields.class] || ''),
                                     click = el[fields.click] && isFunction(el[fields.click])
                                         ? el[fields.click]
@@ -595,8 +595,8 @@
                     deQuote: function (string) {
                         return String(string).replace(/"/g, '');
                     },
-                    escape: function (string, preserveHTML) {
-                        if (preserveHTML) {
+                    escape: function (string) {
+                        if (settings.preserveHTML) {
                             return string;
                         }
                         var

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

@@ -500,6 +500,12 @@ declare namespace FomanticUI {
 
         // endregion
 
+        // region Template Settings
+
+        templates: Dropdown.TemplateSettings;
+
+        // endregion
+
         // region Callbacks
 
         /**
@@ -647,6 +653,7 @@ declare namespace FomanticUI {
     }
 
     namespace Dropdown {
+        type TemplateSettings = Partial<Pick<Settings.Templates, keyof Settings.Templates>>;
         type TransitionSettings = Partial<Pick<Settings.Transition, keyof Settings.Transition>>;
         type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
         type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
@@ -658,6 +665,48 @@ declare namespace FomanticUI {
         type ErrorSettings = Partial<Pick<Settings.Errors, keyof Settings.Errors>>;
 
         namespace Settings {
+            interface Templates {
+                /**
+                 * @default function(string, encode)
+                 */
+                deQuote: (string: string, encode?: boolean) => string;
+
+                /**
+                 * @default function(string, settings)
+                 */
+                escape: (string: string, settings: DropdownSettings) => string;
+
+                /**
+                 * generates dropdown from select values
+                 * @default function(message, type, header)
+                 */
+                dropdown: (select: {placeholder?: string, values: {[key: string]: string}}, settings: DropdownSettings) => string;
+
+                /**
+                 * generates just menu from select
+                 * @default function(response, settings)
+                 */
+                menu: (values: {[key: string]: string}, settings: DropdownSettings) => string;
+
+                /**
+                 * generates label for multiselect
+                 * @default function(response, settings)
+                 */
+                label: (value: string, text: string, settings: DropdownSettings) => string;
+
+                /**
+                 * generates messages like "No results"
+                 * @default function(response, settings)
+                 */
+                message: (message: string) => string;
+
+                /**
+                 * generates user addition to the selection menu
+                 * @default function(response, settings)
+                 */
+                addition: (choice: string) => string;
+            }
+
             interface Transition {
 
                 /**

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

@@ -394,9 +394,9 @@ declare namespace FomanticUI {
         namespace Settings {
             interface Templates {
                 /**
-                 * @default function(string, preserveHTML)
+                 * @default function(string, settings)
                  */
-                escape: (string: string, preserveHTML?: boolean) => string;
+                escape: (string: string, settings: SearchSettings) => string;
 
                 /**
                  * @default function(message, type, header)
@@ -404,14 +404,14 @@ declare namespace FomanticUI {
                 message: (message: string, type?: string, header?: string) => string;
 
                 /**
-                 * @default function(response, fields, preserveHTML)
+                 * @default function(response, settings)
                  */
-                category: (response: unknown, fields: {[key: string]: string}, preserveHTML?: boolean) => string;
+                category: (response: unknown, settings: SearchSettings) => string;
 
                 /**
-                 * @default function(response, fields, preserveHTML)
+                 * @default function(response, settings)
                  */
-                standard: (response: unknown, fields: {[key: string]: string}, preserveHTML?: boolean) => string;
+                standard: (response: unknown, settings: SearchSettings) => string;
             }
 
             interface Selectors {