fomantic-ui 2.9.4-beta.92 → 2.9.4-beta.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.92+84fc179",
+  "version": "2.9.4-beta.94+1ecfaf3",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/semantic.json.example

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

package/src/definitions/modules/calendar.js

@@ -802,24 +802,32 @@
                     formattedDate: function (format, date) {
                         return module.helper.dateFormat(format || formatter[settings.type], date || module.get.date());
                     },
-                    date: function () {
-                        return module.helper.sanitiseDate($module.data(metadata.date)) || null;
+                    date: function (format) {
+                        return module.helper.dateObjectOrFormatted(format, $module.data(metadata.date));
                     },
                     inputDate: function () {
                         return $input.val();
                     },
-                    focusDate: function () {
-                        return $module.data(metadata.focusDate) || null;
+                    focusDate: function (format) {
+                        return module.helper.dateObjectOrFormatted(format, $module.data(metadata.focusDate));
                     },
-                    startDate: function () {
+                    startDate: function (format) {
                         var startModule = module.get.calendarModule(settings.startCalendar);
 
-                        return (startModule ? startModule.get.date() : $module.data(metadata.startDate)) || null;
+                        if (startModule) {
+                            return startModule.get.date(format);
+                        }
+
+                        return module.helper.dateObjectOrFormatted(format, $module.data(metadata.startDate));
                     },
-                    endDate: function () {
+                    endDate: function (format) {
                         var endModule = module.get.calendarModule(settings.endCalendar);
 
-                        return (endModule ? endModule.get.date() : $module.data(metadata.endDate)) || null;
+                        if (endModule) {
+                            return endModule.get.date(format);
+                        }
+
+                        return module.helper.dateObjectOrFormatted(format, $module.data(metadata.endDate));
                     },
                     minDate: function () {
                         return $module.data(metadata.minDate) || null;
@@ -1135,6 +1143,20 @@
                             return match.slice(1, -1);
                         });
                     },
+                    dateObjectOrFormatted: function (format, date) {
+                        format = format || '';
+                        date = module.helper.sanitiseDate(date) || null;
+
+                        if (!date) {
+                            return null;
+                        }
+
+                        if (format === '') {
+                            return date;
+                        }
+
+                        return module.helper.dateFormat(format, date);
+                    },
                     isDisabled: function (date, mode) {
                         return (mode === 'day' || mode === 'month' || mode === 'year' || mode === 'hour') && (((mode === 'day' && settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function (d) {
                             var blocked = false;

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)
                         ;
                     },
                 },
@@ -201,6 +202,12 @@
                             callback();
                         }
                     },
+                    remove: {
+                        click: function () {
+                            module.clear.value();
+                            $prompt.trigger('focus');
+                        },
+                    },
                     result: {
                         mousedown: function () {
                             module.resultsClicked = true;
@@ -837,6 +844,9 @@
                             $module.data(metadata.cache, cache);
                         }
                     },
+                    value: function () {
+                        module.set.value('');
+                    },
                 },
 
                 read: {
@@ -1456,6 +1466,7 @@
 
         selector: {
             prompt: '.prompt',
+            remove: '> .icon.input > .remove.icon',
             searchButton: '.search.button',
             results: '.results',
             message: '.results > .message',

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;
     }
 }
 

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

@@ -681,7 +681,7 @@
 
 /* Search */
 @variationSearchDisabled: true;
-@variationSearchSelection: true;
+@variationSearchClear: true;
 @variationSearchCategory: true;
 @variationSearchHorizontalCategory: true;
 @variationSearchLoading: true;

package/src/themes/default/modules/search.variables

@@ -126,20 +126,20 @@
             Types
 *******************************/
 
-/* Selection */
-@selectionPromptBorderRadius: @defaultBorderRadius;
-
-@selectionCloseTop: 0;
-@selectionCloseTransition:
-    color @defaultDuration @defaultEasing,
-    opacity @defaultDuration @defaultEasing;
-@selectionCloseRight: 0;
-@selectionCloseIconOpacity: 0.8;
-@selectionCloseIconColor: "";
-@selectionCloseIconHoverOpacity: 1;
-@selectionCloseIconHoverColor: @red;
-
-@selectionCloseIconInputRight: 1.85714em;
+/* Clearable */
+@clearableIconTransition: opacity @defaultDuration @defaultEasing;
+@clearableIconOpacity: 0.6;
+@clearableIconHoverOpacity: 1;
+@clearableIconWidth: 1em;
+@clearableIconHeight: @clearableIconWidth;
+
+@clearableIconInputRight: 1.85714em;
+
+/*
+ * Times icon taken from Font Awesome Free 5.15.4 by @fontawesome [https://fontawesome.com]
+ * License - https://fontawesome.com/license/free
+ */
+@clearableIconBackground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E") no-repeat;
 
 /* Category */
 @categoryBackground: @darkWhite;

package/tasks/config/defaults.js

@@ -125,4 +125,6 @@ module.exports = {
         ignoredRTL: '!(*.min|*.map)',
     },
 
+    fileName: 'semantic',
+
 };

package/tasks/config/project/release.js

@@ -7,7 +7,10 @@ const requireDotFile = require('require-dot-file');
 let
     config,
     npmPackage,
-    version
+    version,
+    revision,
+    versionInFileName,
+    includeVersionInFileName
 ;
 
 /*******************************
@@ -31,6 +34,20 @@ version = npmPackage && npmPackage.version !== undefined && npmPackage.name ===
     ? npmPackage.version
     : config.version;
 
+// looks for revision in config.
+revision = config.revision === undefined ? '' : config.revision;
+
+includeVersionInFileName = config.includeVersionInFileName === undefined ? false : config.includeVersionInFileName;
+
+versionInFileName = '';
+
+if (includeVersionInFileName) {
+    versionInFileName = '-' + version;
+    if (revision !== '') {
+        versionInFileName += '-' + revision;
+    }
+}
+
 /*******************************
              Export
 *******************************/
@@ -54,5 +71,6 @@ module.exports = {
         + ' */\n',
 
     version: version,
+    versionInFileName: versionInFileName,
 
 };

package/tasks/config/tasks.js

@@ -40,12 +40,12 @@ module.exports = {
     },
 
     filenames: {
-        concatenatedCSS: 'semantic.css',
-        concatenatedJS: 'semantic.js',
-        concatenatedMinifiedCSS: 'semantic.min.css',
-        concatenatedMinifiedJS: 'semantic.min.js',
-        concatenatedRTLCSS: 'semantic.rtl.css',
-        concatenatedMinifiedRTLCSS: 'semantic.rtl.min.css',
+        concatenatedCSS: config.fileName + release.versionInFileName + '.css',
+        concatenatedJS: config.fileName + release.versionInFileName + '.js',
+        concatenatedMinifiedCSS: config.fileName + release.versionInFileName + '.min.css',
+        concatenatedMinifiedJS: config.fileName + release.versionInFileName + '.min.js',
+        concatenatedRTLCSS: config.fileName + release.versionInFileName + '.rtl.css',
+        concatenatedMinifiedRTLCSS: config.fileName + release.versionInFileName + '.rtl.min.css',
     },
 
     regExp: {

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

@@ -30,7 +30,7 @@ declare namespace FomanticUI {
         /**
          * Get the selected date
          */
-        (behavior: 'get date'): Date | string;
+        (behavior: 'get date', format?: string): Date | string;
 
         /**
          * Set the selected date.
@@ -52,7 +52,7 @@ declare namespace FomanticUI {
         /**
          * Get the start date for range selection
          */
-        (behavior: 'get startDate'): Date | string;
+        (behavior: 'get startDate', format?: string): Date | string;
 
         /**
          * Set the start date for range selection
@@ -62,7 +62,7 @@ declare namespace FomanticUI {
         /**
          * Get the end date for range selection
          */
-        (behavior: 'get endDate'): Date | string;
+        (behavior: 'get endDate', format?: string): Date | string;
 
         /**
          * Set the end date for range selection
@@ -72,7 +72,7 @@ declare namespace FomanticUI {
         /**
          * Get the currently focused date
          */
-        (behavior: 'get focusDate'): Date | string;
+        (behavior: 'get focusDate', format?: string): Date | string;
 
         /**
          * Set the currently focused date