@finqu/cool 1.2.28 → 1.2.29

package/js/dist/tooltip.js

@@ -1,6 +1,6 @@
 /*!
-  * Cool UI tooltip.js v1.2.28 (https://finqu.fi)
-  * Copyright 2011-2020 Finqu Oy
+  * Cool UI tooltip.js v1.2.29 (https://finqu.fi)
+  * Copyright 2011-2021 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */
 (function (global, factory) {

package/js/src/collapse.js

@@ -55,7 +55,9 @@ class Collapse extends AbstractUIComponent {
 
         this.$el = $(this.el);
         this.$target = this.$el.data('target') ? $(document).find(this.$el.data('target')) : $(document).find(this.opts.target);
+        this.breakpoint = this.$el.data('breakpoint');
         this.expanded = this.$el.attr('aria-expanded') == 'true' ? true : false;
+        this.transitionendEvent = this.whichTransitionEvent();
 
         if (this.$target.length) {
 
@@ -85,20 +87,18 @@ class Collapse extends AbstractUIComponent {
 
     // Bind events that trigger methods
     bindEvents() {
-
         this.$el.on('click'+'.'+this.name, (e) => {
-
-            if (this.expanded) {
-                this.close();
-            } else {
-                this.show();
+            if (!this.breakpoint || !window.matchMedia(`(min-width: ${this.breakpoint}px)`).matches) {
+                if (this.expanded) {
+                    this.close();
+                } else {
+                    this.show();
+                }
             }
         });
 
         $(window).on('resize', debounce(() => {
-
             if (this.$target.length) {
-
                 this.targetHeight = this.$target.height();
                 this.log('Target height: '+this.targetHeight+'px');
             }
@@ -132,6 +132,8 @@ class Collapse extends AbstractUIComponent {
     // Show
     show() {
 
+        const self = this;
+
         // Update target height if something is added to dom which causes height to change
         if (this.targetHeight !== this.$target.height()) {
             this.targetHeight = this.$target.height();
@@ -155,19 +157,24 @@ class Collapse extends AbstractUIComponent {
             this.$indicator.addClass('show');
         }
 
-        this.$target.one(this.whichTransitionEvent(), () => {
+        this.$target.on(this.transitionendEvent, function(e) {
 
-            this.$target.removeClass('collapsing');
+            if ($(e.target).is(this)) {
 
-            if (this.$el.is('button')) {
-                this.$el.attr('disabled', false);
-            }
+                self.$target.removeClass('collapsing');
 
-            this.$target.removeAttr('style');
-            this.$target.addClass('collapse show');
-            this.$el.attr('aria-expanded', true);
-            this.$target.css('height', 'auto');
-            this.expanded = true;
+                if (self.$el.is('button')) {
+                    self.$el.attr('disabled', false);
+                }
+
+                self.$target.removeAttr('style');
+                self.$target.addClass('collapse show');
+                self.$el.attr('aria-expanded', true);
+                self.$target.css('height', 'auto');
+                self.expanded = true;
+
+                $(this).off(self.transitionendEvent);
+            }
         });
 
         this.onShow();
@@ -176,6 +183,8 @@ class Collapse extends AbstractUIComponent {
     // Close
     close() {
 
+        const self = this;
+
         this.$target.removeClass('collapse show');
         this.$target.addClass('collapsing');
 
@@ -197,22 +206,27 @@ class Collapse extends AbstractUIComponent {
             this.$indicator.removeClass('show');
         }
 
-        this.$target.one(this.whichTransitionEvent(), () => {
+        this.$target.on(this.transitionendEvent, function(e) {
 
-            this.$target.removeClass('collapsing');
+            if ($(e.target).is(this)) {
 
-            if (this.$el.is('button')) {
-                this.$el.attr('disabled', false);
-            }
+                self.$target.removeClass('collapsing');
 
-            this.$target.removeAttr('style');
-            this.$target.addClass('collapse');
-            this.$el.attr('aria-expanded', false);
-            this.expanded = false;
+                if (self.$el.is('button')) {
+                    self.$el.attr('disabled', false);
+                }
 
-            // Update target height if something is added to dom which causes height to change
-            if (this.targetHeight !== this.$target.height()) {
-                this.targetHeight = this.$target.height();
+                self.$target.removeAttr('style');
+                self.$target.addClass('collapse');
+                self.$el.attr('aria-expanded', false);
+                self.expanded = false;
+
+                // Update target height if something is added to dom which causes height to change
+                if (self.targetHeight !== self.$target.height()) {
+                    self.targetHeight = self.$target.height();
+                }
+
+                $(this).off(self.transitionendEvent);
             }
         });
 

package/js/src/common.js

@@ -7,6 +7,19 @@ window.Cool.settings = window.Cool.settings || {};
 
 class Common {
 
+    static refresh() {
+        $('.form-label-group').each(function(i, formLabelGroup) {
+            const $formLabelGroup = $(formLabelGroup);
+            const val = $formLabelGroup.find('input, select').val();
+
+            if (val) {
+                $(formLabelGroup).addClass('label-on-top');
+            } else {
+                $(formLabelGroup).removeClass('label-on-top');
+            }
+        });
+    }
+
 	static initialize(opts) {
 
         // There's an error if opts is not defined
@@ -54,22 +67,26 @@ class Common {
             }
         });
 
-        // Custom Form group
-        $('.form-label-group').each(function(i, formLabelGroup) {
-
-            let $formLabelGroup = $(formLabelGroup);
+        $(document).on('blur input change', '.form-label-group', function() {
+            const $formLabelGroup = $(this);
+            const val = $formLabelGroup.find('input, select').val();
 
-            $formLabelGroup.find('input').on('blur input change', function () {
-
-                let val = $(this).val();
+            if (val) {
+                $(this).addClass('label-on-top');
+            } else {
+                $(this).removeClass('label-on-top');
+            }
+        });
 
-                if (val) {
-                    $(formLabelGroup).addClass('label-on-top');
-                } else {
-                    $(formLabelGroup).removeClass('label-on-top');
-                }
+        $('.form-label-group').each(function(i, formLabelGroup) {
+            const $formLabelGroup = $(formLabelGroup);
+            const val = $formLabelGroup.find('input, select').val();
 
-            }).trigger('change');
+            if (val) {
+                $(formLabelGroup).addClass('label-on-top');
+            } else {
+                $(formLabelGroup).removeClass('label-on-top');
+            }
         });
 
         // Table actions
@@ -80,87 +97,46 @@ class Common {
             }
         });
 
-        $(document).on('click', '[data-table-link]', function(e) {
-
-            let $container = $(this).parents('table, .table');
-            let href = $(this).data('tableLink');
-            let target = $(e.target);
-            let exceptions = ['input', 'button', 'a', 'label', 'td.col-select'];
-            let linkDisabled = false;
-
-            $.each(exceptions, function(item) {
+        $(document).on('click', '[data-table-link] .table-link-exclude, [data-table-link] input, [data-table-link] button, [data-table-link] a, [data-table-link] label, [data-table-link] .td-col-select', function(e) {
+            e.stopPropagation();
+        });
 
-                if (target.is(item) || (item == 'a' && target.parent().is(item))) {
-                    linkDisabled = true;
-                }
-            });
+        $(document).on('click', '[data-table-link]', function(e) {
+            const $container = $(this).parents('table, .table');
+            const href = $(this).data('tableLink');
 
             if ($container.hasClass('bulk-actions-active')) {
-                linkDisabled = true;
-            }
-
-            if (target.hasClass('table-link-exclude')) {
-                linkDisabled = true;
+                return;
             }
 
-            if (target.is('td, .td, img') && !linkDisabled) {
-
-                if (e.ctrlKey || e.metaKey) {
-
-                    window.open(href, '_blank');
-
-                } else {
-
-                    window.location.href = href;
-                }
-
+            if (e.ctrlKey || e.metaKey) {
+                window.open(href, '_blank');
             } else {
-
-                return;
+                window.location.href = href;
             }
         });
 
-        $(document).on('click', '[data-table-btn]', function(e) {
+        $(document).on('click', '[data-table-btn] .table-btn-exclude, [data-table-btn] input, [data-table-btn] button, [data-table-btn] a, [data-table-btn] label, [data-table-btn] .td-col-select', function(e) {
+            e.stopPropagation();
+        });
 
-            let $container = $(this).parents('table, .table');
-            let $self = $(this);
+        $(document).on('click', '[data-table-btn]', function(e) {
+            const $container = $(this).parents('table, .table');
             let btn = $(this).data('tableButton');
-            let target = $(e.target);
-            let exceptions = ['input', 'button', 'a', 'label', 'td.col-select'];
-            let btnDisabled = false;
 
             if (!btn) {
-
-                btn = $self.find('button')[0];
+                btn = $container.find('button')[0];
 
                 if (!btn) {
                     return;
                 }
             }
 
-            $.each(exceptions, function(item) {
-
-                if (target.is(item) || (item == 'a' && target.parent().is(item))) {
-                    btnDisabled = true;
-                }
-            });
-
             if ($container.hasClass('bulk-actions-active')) {
-                btnDisabled = true;
-            }
-
-            if (target.hasClass('table-btn-exclude')) {
-                btnDisabled = true;
-            }
-
-            if (target.is('td, .td, img') && !btnDisabled) {
-
-                $(btn).click();
-
-            } else {
-
                 return;
             }
+
+            $(btn).click();
         });
 
         // button toggle
@@ -233,7 +209,6 @@ class Common {
         let $sidebarLeftContent = $sidebarLeft.find('.sidebar-content');
 
         if ($sidebarLeftContent.length) {
-
             let sidebarLeftScroll = new PerfectScrollbar($sidebarLeftContent[0], {
                 wheelSpeed: 2,
                 wheelPropagation: true,
@@ -241,11 +216,18 @@ class Common {
                 suppressScrollX: true
             });
 
-            $sidebarLeftContent.find('[data-toggle="collapse"]').on('click', function() {
+            $sidebarLeftContent.find('[data-toggle="collapse"]').on('click', function(e) {
+                if ($(this).data('breakpoint') && window.matchMedia(`(min-width: ${$(this).data('breakpoint')}px)`).matches) {
+                    const a = $(this).next().find('li').first().children('a').first();
 
-                setTimeout(() => {
-                    sidebarLeftScroll.update();
-                }, 300);
+                    if (a) {
+                        window.location.href = a.attr('href');
+                    }
+                } else {
+                    setTimeout(() => {
+                        sidebarLeftScroll.update();
+                    }, 300);
+                }
             });
         }
 
@@ -309,5 +291,6 @@ class Common {
 }
 
 window.Cool.initialize = Common.initialize;
+window.Cool.refresh = Common.refresh;
 
 export default Common;

package/js/src/dialog.js

@@ -386,7 +386,7 @@ class Dialog {
 
             if (dialog.actions.remove.visible) {
 
-                btnStyle = dialog.actions.remove.primary ? 'btn-primary' : 'btn-secondary';
+                btnStyle = 'btn-remove';
                 btnClasses = dialog.actions.remove.classes ? ' '+dialog.actions.remove.classes : '';
                 btnAttrs = dialog.actions.remove.attrs ? ' '+dialog.actions.remove.attrs : '';
                 btnRemove = `
@@ -409,8 +409,9 @@ class Dialog {
             }
 
             footer = `
-                ${btnCancel}
                 ${btnRemove}
+                <div class="spacer"></div>
+                ${btnCancel}
                 ${btnConfirm}
             `;
 

package/js/src/popover.js

@@ -93,10 +93,11 @@ class Popover extends AbstractUIComponent {
                 this.show();
             });
 
-            this.$el.on('mouseleave'+'.'+NAME, () => {
-
-                this.close();
-            });
+            this.$el.on('mouseleave'+'.'+NAME, debounce(() => {
+                if (!this.popupHasFocus) {
+                    this.close();
+                }
+            }, 500));
 
         } else if (this.trigger === 'focus') {
 
@@ -159,6 +160,16 @@ class Popover extends AbstractUIComponent {
     	`);
 
         this.$container.append(this.$popover);
+
+        this.$container.find('#'+this.id).on('mouseenter', () => {
+            this.popupHasFocus = true;
+        });
+
+        this.$container.find('#'+this.id).on('mouseleave', () => {
+            this.popupHasFocus = false;
+            this.close();
+        });
+
         this.$arrow = this.$popover.find('.arrow') ? this.$popover.find('.arrow') : false;
 
         this.log(this.$el);

package/js/src/select.js

@@ -69,6 +69,7 @@ class Select extends AbstractUIComponent {
         this.$select.find('.select-item').remove();
         this.$selectItems = [];
         this.$selectIconContainer.html(this.selectIconDefault);
+        this.$selectHeader.removeClass('select-placeholder');
 
         if (this.data[this.name].length == 0 &&
             this.dynamicTitle &&
@@ -81,8 +82,7 @@ class Select extends AbstractUIComponent {
         }
 
         if (this.$selectItems.length == 0 && !this.searchApi && this.dynamicTitle && this.dynamicTitleEmptyDefault && this.dynamicTitleEmptyDefault !== 0) {
-
-            this.$selectHeader.css('cursor', 'default');
+            this.$selectHeader.addClass('select-placeholder');
             this.$selectIconContainer.addClass('d-none');
             this.$selectTitle.html(this.dynamicTitleEmptyDefault);
         }
@@ -249,6 +249,7 @@ class Select extends AbstractUIComponent {
 
                 this.$scrollableContent = this.$select.find('.select-scrollable-content') ? this.$select.find('.select-scrollable-content') : false;
                 this.$selectItems = this.$select.find('.select-item');
+                this.$selectHeader.removeClass('select-placeholder');
 
                 if (this.data[this.name].length == 0 &&
                     this.dynamicTitle &&
@@ -262,7 +263,7 @@ class Select extends AbstractUIComponent {
 
                 if (this.$selectItems.length == 0 && !this.searchApi && this.dynamicTitle && this.dynamicTitleEmptyDefault && this.dynamicTitleEmptyDefault !== 0) {
 
-                    this.$selectHeader.css('cursor', 'default');
+                    this.$selectHeader.addClass('select-placeholder');
                     this.$selectIconContainer.addClass('d-none');
                     this.$selectTitle.html(this.dynamicTitleEmptyDefault);
                 }
@@ -588,7 +589,7 @@ class Select extends AbstractUIComponent {
         let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
 
         if (this.showValidStateIcon) {
-            this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-green icon"></i>`);
+            this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-success icon"></i>`);
         } else {
             this.$selectIconContainer.html(this.selectIconDefault);
         }
@@ -910,7 +911,7 @@ class Select extends AbstractUIComponent {
             }, 300);
 
             if (this.data[this.name].length > 0 && this.showValidStateIcon) {
-                this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-green icon"></i>`);
+                this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-success icon"></i>`);
             } else {
                 this.$selectIconContainer.html(this.selectIconDefault);
             }
@@ -1252,7 +1253,7 @@ class Select extends AbstractUIComponent {
 
                 <div class="select-footer">
 
-                    <button class="btn btn-block btn-secondary" type="button" tabindex="-1" data-select-close >
+                    <button class="btn btn-block btn-light btn-sm" type="button" tabindex="-1" data-select-close >
                         ${this.btnCloseText}
                     </button>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finqu/cool",
-  "version": "1.2.28",
+  "version": "1.2.29",
   "description": "Finqu UI package",
   "main": "index.js",
   "scripts": {

package/scss/_alert.scss

@@ -1,11 +1,11 @@
-// Alert
+    // Alert
 // ---------------------------------------------------------------------------------------------------------------
 
 .alert-icon {
     border-radius: 50% 50%;
     width: 0.9em;
     height: 0.9em;
-    border: 1px solid theme-color('primary');
+    border: $border-width solid theme-color('primary');
     box-sizing: border-box;
     display: inline-flex;
     justify-content: center;
@@ -14,7 +14,7 @@
     position: relative;
     z-index: 2;
     background: white;
-    box-shadow: 0 0 0 0.2em fade-out(theme-color('primary'), 0.7);
+    //box-shadow: 0 0 0 0.2em fade-out(theme-color('primary'), 0.7);
 
     .icon {
         font-size: 0.5em;
@@ -32,20 +32,23 @@
 .alert {
     display: flex;
     flex-direction: row;
+    align-items: center;
     position: relative;
     border-radius: $border-radius;
-    margin-bottom: $section-spacer;
-    box-shadow: $section-box-shadow;
+    margin-bottom: $section-spacer-mobile;
     width: 100%;
     overflow: hidden;
     box-sizing: border-box;
     position: relative;
-    padding: 0;
-    border-top: 2px solid theme-color('primary');
-    background-color: fade-out(theme-color('primary'), 0.9);
+    padding: $section-padding;
+    background: white;
+    border-top: $alert-border-width solid theme-color('primary');
+    border-left: $border-width solid theme-color('primary');
+    border-right: $border-width solid theme-color('primary');
+    border-bottom: $border-width solid theme-color('primary');
 
-    @include media-breakpoint-down(sm) {
-        margin-bottom: $section-spacer-mobile;
+    @include media-breakpoint-up(sm) {
+        margin-bottom: $section-spacer;
     }
 
     // Icon
@@ -53,22 +56,21 @@
         width: 28px;
         height: 28px;
         margin-top: $section-padding;
-        margin-left: $section-padding;
-        margin-right: $section-padding / 2;
         margin-bottom: $section-padding;
         flex-shrink: 0;
         flex-grow: 0;
 
         .icon {
-            font-size: 14px;
+            font-size: 12px;
         }
     }
 
 
     // Content
     .alert-content-container {
-        padding: $section-padding;
+        padding: 0 $section-padding;
         box-sizing: border-box;
+        flex: 1;
 
         .alert-content {
         }
@@ -77,27 +79,21 @@
             margin-top: $section-padding;
         }
     }
+}
 
-    &.alert-sm {
-        .alert-icon {
-            width: 18px;
-            height: 18px;
-            margin-top: $section-padding / 2;
-            margin-left: $section-padding / 2;
-            margin-right: $section-padding / 4;
-            margin-bottom: $section-padding / 2;
-        }
-
-        .alert-content-container {
-            padding: $section-padding / 2;
+a.alert {
+    color: $body-color;
 
-            .alert-action {
-                margin-top: $section-padding / 2;
-            }
-        }
+    .icon {
+        color: theme-color('medium');
+        font-size: $font-size-lg;
     }
 }
 
+.section-content .alert {
+    border-width: 0;
+}
+
 // Alert variants
 @each $color, $value in $theme-colors {
     .alert-#{$color} {

package/scss/_badge.scss

@@ -8,9 +8,9 @@
     padding: $badge-padding-y $badge-padding-x;
     line-height: $badge-line-height;
     border-radius: $badge-border-radius;
-    border: 1px solid theme-color('primary');
-    background-color: fade-out(theme-color('primary'), 0.9);
-    color: theme-color('primary');
+    border: $border-width solid theme-color('primary');
+    background-color: theme-color('primary');
+    color: white;
     box-sizing: border-box;
     align-items: center;
     margin: 2px;
@@ -22,8 +22,10 @@
     white-space: nowrap;
     flex-direction: row;
     position: relative;
+    font-family: $font-family-title;
 
     &.badge-xs {
+        border-radius: $border-radius-xs;
         font-size: $badge-xs-font-size;
         font-weight: $badge-xs-font-weight;
         padding: $badge-xs-padding-y $badge-xs-padding-x;
@@ -31,12 +33,41 @@
     }
 
     &.badge-sm {
+        border-radius: $border-radius-sm;
         font-size: $badge-sm-font-size;
         font-weight: $badge-sm-font-weight;
         padding: $badge-sm-padding-y $badge-sm-padding-x;
         line-height: $badge-sm-line-height;
     }
 
+    &.badge-btn {
+        padding: $btn-padding-y $btn-padding-x;
+        font-size: $btn-font-size;
+        line-height: $btn-line-height;
+        border-radius: $btn-border-radius;
+
+        &.badge-btn-xs {
+            padding: $btn-padding-y-xs  $btn-padding-x-xs;
+            font-size: $btn-font-size-xs;
+            line-height: $btn-line-height-xs;
+            border-radius: $btn-border-radius-xs;
+        }
+
+        &.badge-btn-sm {
+            padding: $btn-padding-y-sm $btn-padding-x-sm;
+            font-size: $btn-font-size-sm;
+            line-height: $btn-line-height-sm;
+            border-radius: $btn-border-radius-sm;
+        }
+
+        &.badge-btn-lg {
+            padding: $btn-padding-y-lg $btn-padding-x-lg;
+            font-size: $btn-font-size-lg;
+            line-height: $btn-line-height-lg;
+            border-radius: $btn-border-radius-lg;
+        }
+    }
+
     .alert-icon {
         margin-right: 0.4em;
 
@@ -46,11 +77,11 @@
     }
 }
 
-@each $color, $value in $colors {
-    .badge-#{$color} {
-        @include badge-variant($value);
-    }
-}
+// @each $color, $value in $colors {
+//     .badge-#{$color} {
+//         @include badge-variant($value);
+//     }
+// }
 
 @each $color, $value in $theme-colors {
     .badge-#{$color} {
@@ -58,11 +89,11 @@
     }
 }
 
-@each $color, $value in $colors {
-    .badge-outline-#{$color} {
-        @include badge-outline-variant($value);
-    }
-}
+// @each $color, $value in $colors {
+//     .badge-outline-#{$color} {
+//         @include badge-outline-variant($value);
+//     }
+// }
 
 @each $color, $value in $theme-colors {
     .badge-outline-#{$color} {