@finqu/cool 1.2.0 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/css/cool-grid.css +2 -2
  2. package/dist/css/cool-grid.css.map +3 -3
  3. package/dist/css/cool-grid.min.css +1 -1
  4. package/dist/css/cool-grid.min.css.map +1 -1
  5. package/dist/css/cool-reboot.css +2 -2
  6. package/dist/css/cool-reboot.css.map +6 -6
  7. package/dist/css/cool-reboot.min.css +1 -1
  8. package/dist/css/cool-reboot.min.css.map +1 -1
  9. package/dist/css/cool.css +2668 -726
  10. package/dist/css/cool.css.map +18 -18
  11. package/dist/css/cool.min.css +2 -2
  12. package/dist/css/cool.min.css.map +1 -1
  13. package/dist/js/cool.bundle.js +119 -32
  14. package/dist/js/cool.bundle.js.map +1 -1
  15. package/dist/js/cool.bundle.min.js +2 -2
  16. package/dist/js/cool.bundle.min.js.map +1 -1
  17. package/dist/js/cool.esm.js +119 -32
  18. package/dist/js/cool.esm.js.map +1 -1
  19. package/dist/js/cool.esm.min.js +2 -2
  20. package/dist/js/cool.esm.min.js.map +1 -1
  21. package/dist/js/cool.js +119 -32
  22. package/dist/js/cool.js.map +1 -1
  23. package/dist/js/cool.min.js +2 -2
  24. package/dist/js/cool.min.js.map +1 -1
  25. package/html/dropdown-test.html +200 -0
  26. package/html/index.html +480 -5
  27. package/js/dist/collapse.js +1 -1
  28. package/js/dist/common.js +677 -545
  29. package/js/dist/common.js.map +1 -1
  30. package/js/dist/dropdown.js +3188 -1819
  31. package/js/dist/dropdown.js.map +1 -1
  32. package/js/dist/popover.js +1 -1
  33. package/js/dist/sectiontabs.js +1 -1
  34. package/js/dist/select.js +2842 -2649
  35. package/js/dist/select.js.map +1 -1
  36. package/js/dist/tooltip.js +1 -1
  37. package/js/src/common.js +8 -0
  38. package/js/src/dialog.js +6 -1
  39. package/js/src/dropdown.js +77 -5
  40. package/js/src/select.js +31 -31
  41. package/package.json +21 -21
  42. package/scss/_alert.scss +79 -82
  43. package/scss/_badge.scss +16 -22
  44. package/scss/_dialog.scss +1 -0
  45. package/scss/_dropdown.scss +1 -4
  46. package/scss/_frame.scss +23 -3
  47. package/scss/_functions.scss +10 -0
  48. package/scss/_images.scss +7 -1
  49. package/scss/_navbar.scss +40 -0
  50. package/scss/_section.scss +14 -0
  51. package/scss/_type.scss +37 -6
  52. package/scss/_variables.scss +4 -3
  53. package/scss/cool-grid.scss +1 -1
  54. package/scss/cool-reboot.scss +1 -1
  55. package/scss/cool.scss +1 -1
  56. package/scss/mixins/_alert-variant.scss +13 -28
  57. package/scss/mixins/_badge-variant.scss +27 -5
  58. package/scss/mixins/_text-truncate.scss +77 -4
  59. package/scss/utilities/_cursor.scss +2 -2
  60. package/scss/utilities/_text.scss +4 -2
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Cool UI v1.1.9 (https://finqu.fi)
2
+ * Cool UI v1.2.2 (https://finqu.fi)
3
3
  * Copyright 2011-2019 Finqu Oy
4
4
  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
5
5
  */
@@ -1336,6 +1336,10 @@
1336
1336
  linkDisabled = true;
1337
1337
  }
1338
1338
 
1339
+ if (target.hasClass('table-link-exclude')) {
1340
+ linkDisabled = true;
1341
+ }
1342
+
1339
1343
  if (target.is('td, .td, img') && !linkDisabled) {
1340
1344
  if (e.ctrlKey || e.metaKey) {
1341
1345
  window.open(href, '_blank');
@@ -1372,6 +1376,10 @@
1372
1376
  btnDisabled = true;
1373
1377
  }
1374
1378
 
1379
+ if (target.hasClass('table-btn-exclude')) {
1380
+ btnDisabled = true;
1381
+ }
1382
+
1375
1383
  if (target.is('td, .td, img') && !btnDisabled) {
1376
1384
  $(btn).click();
1377
1385
  } else {
@@ -2241,6 +2249,10 @@
2241
2249
  _this3.itemsToExclude = _this3.$el.data('itemsToExclude') ? _this3.$el.data('itemsToExclude').replace(/\s/g, '').split(',') : _this3.opts.itemsToExclude;
2242
2250
  _this3.preventClose = false;
2243
2251
 
2252
+ if (_this3.itemsToExclude.length > 0) {
2253
+ _this3.itemsToExclude = _this3.itemsToExclude.map(Number);
2254
+ }
2255
+
2244
2256
  if (_this3.opts.setData) {
2245
2257
  _this3.data = _this3.opts.setData;
2246
2258
  }
@@ -2249,12 +2261,17 @@
2249
2261
  _this3.data = _this3.$el.data('setData');
2250
2262
  }
2251
2263
 
2252
- _this3.data[_this3.name] = _this3.data[_this3.name].filter(function (item) {
2253
- return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
2254
- });
2255
- _this3.items = _this3.items.filter(function (item) {
2256
- return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
2257
- });
2264
+ if (typeof _this3.data[_this3.name].filter !== 'undefined' && self.itemsToExclude) {
2265
+ _this3.data[_this3.name] = _this3.data[_this3.name].filter(function (item) {
2266
+ return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
2267
+ });
2268
+ }
2269
+
2270
+ if (typeof _this3.items.filter !== 'undefined' && self.itemsToExclude) {
2271
+ _this3.items = _this3.items.filter(function (item) {
2272
+ return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
2273
+ });
2274
+ }
2258
2275
 
2259
2276
  if (_this3.$el.find('.select-search').length) {
2260
2277
  _this3.showSearch = true;
@@ -2414,6 +2431,8 @@
2414
2431
  this.$el.on('change' + '.' + NAME$1, 'input[type="checkbox"]', function () {
2415
2432
  var el = this;
2416
2433
  var val = $(this).val();
2434
+ var closeTimeout = 600; // ms
2435
+
2417
2436
  self.preventClose = true;
2418
2437
 
2419
2438
  if (typeof self.confirmCheck === 'function' && el.checked) {
@@ -2423,19 +2442,18 @@
2423
2442
  self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
2424
2443
  el.checked = true;
2425
2444
  self.onSelect(el);
2426
- self.preventClose = false;
2427
- } else {
2428
- setTimeout(function () {
2429
- self.preventClose = false;
2430
- }, 800);
2431
2445
  }
2446
+
2447
+ setTimeout(function () {
2448
+ self.preventClose = false;
2449
+ }, closeTimeout);
2432
2450
  }, el);
2433
2451
  } else if (el.checked) {
2434
2452
  self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
2435
2453
  self.onSelect(el);
2436
2454
  setTimeout(function () {
2437
2455
  self.preventClose = false;
2438
- }, 800);
2456
+ }, closeTimeout);
2439
2457
  } else if (typeof self.confirmUncheck === 'function' && !el.checked) {
2440
2458
  el.checked = true;
2441
2459
  self.confirmUncheck(function (cb) {
@@ -2445,12 +2463,11 @@
2445
2463
  });
2446
2464
  el.checked = false;
2447
2465
  self.onSelect(el);
2448
- self.preventClose = false;
2449
- } else {
2450
- setTimeout(function () {
2451
- self.preventClose = false;
2452
- }, 800);
2453
2466
  }
2467
+
2468
+ setTimeout(function () {
2469
+ self.preventClose = false;
2470
+ }, closeTimeout);
2454
2471
  }, el);
2455
2472
  } else if (!el.checked && !self.preventUncheck) {
2456
2473
  self.data[self.name] = self.data[self.name].filter(function (n) {
@@ -2459,12 +2476,12 @@
2459
2476
  self.onSelect(el);
2460
2477
  setTimeout(function () {
2461
2478
  self.preventClose = false;
2462
- }, 800);
2479
+ }, closeTimeout);
2463
2480
  } else if (!el.checked && self.preventUncheck) {
2464
2481
  el.checked = true;
2465
2482
  setTimeout(function () {
2466
2483
  self.preventClose = false;
2467
- }, 800);
2484
+ }, closeTimeout);
2468
2485
  }
2469
2486
  });
2470
2487
  this.$el.on('change' + '.' + NAME$1, 'input[type="radio"]', function () {
@@ -2590,7 +2607,7 @@
2590
2607
  return item;
2591
2608
  });
2592
2609
  items = items.filter(function (item) {
2593
- return !(self.data[self.name].indexOf(item.id) > -1) && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
2610
+ return self.data[self.name].indexOf(item.id) > -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
2594
2611
  });
2595
2612
  var result = $(self._renderItemList(items));
2596
2613
  $.when(self.$scrollableContent.append(result)).then(function () {
@@ -2681,11 +2698,7 @@
2681
2698
  return item;
2682
2699
  });
2683
2700
  items = items.filter(function (item) {
2684
- return !(self.data[self.name].indexOf(item.id) > -1) && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
2685
- }); // Remove id with value 0 from results
2686
-
2687
- items = items.filter(function (item) {
2688
- return item.id > 0;
2701
+ return self.data[self.name].indexOf(item.id) === -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
2689
2702
  });
2690
2703
  var result = $(self._renderItemList(items));
2691
2704
  $.when(self.$scrollableContent.append(result)).then(function () {
@@ -2872,7 +2885,7 @@
2872
2885
  var val = parseInt($input.val(), 10);
2873
2886
  $input.prop('checked', true);
2874
2887
  $input.addClass('checked');
2875
- _this7.data[_this7.name].indexOf(val) === -1 ? _this7.data[_this7.name].push(val) : false;
2888
+ _this7.data[_this7.name].indexOf(val) === -1 ? _this7.data[_this7.name] = [val] : false;
2876
2889
 
2877
2890
  if (_this7.dynamicTitle) {
2878
2891
  _this7.$selectTitle.html($input.parent().find('[data-label]').text());
@@ -3182,6 +3195,7 @@
3182
3195
  this.minWidth = this.$el.data('minWidth') ? this.$el.data('minWidth') : this.opts.minWidth;
3183
3196
  this.scroll = this.$el.data('scroll') ? this.$el.data('scroll') : this.opts.scroll;
3184
3197
  this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
3198
+ this.positionObserver = this.$el.attr('data-position-observer') ? JSON.parse(this.$el.attr('data-position-observer')) : this.opts.positionObserver;
3185
3199
  this.closeOnItemClick = this.$el.data('closeOnItemClick') ? this.$el.data('closeOnItemClick') : this.opts.closeOnItemClick;
3186
3200
  this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
3187
3201
  this.contentOpen = false;
@@ -3348,8 +3362,10 @@
3348
3362
  var dropdownTriggerHeight = this.$el.outerHeight(true);
3349
3363
  var dropdownTriggerPosX = this.$el.position().left;
3350
3364
  var dropdownTriggerPosY = this.$el.position().top;
3351
- var dropdownPosX;
3352
- var dropdownPosY;
3365
+ var dropdownPosX = 0;
3366
+ var dropdownPosY = 0;
3367
+ var offsetX = 0;
3368
+ var offsetY = 0;
3353
3369
 
3354
3370
  if (placement === 'top') {
3355
3371
  if (this.align === 'end') {
@@ -3377,12 +3393,78 @@
3377
3393
 
3378
3394
  if (this.offset) {
3379
3395
  var offsets = this.offset.split(',');
3380
- var offsetX = offsets[0];
3381
- var offsetY = offsets[1];
3396
+ offsetX = offsets[0];
3397
+ offsetY = offsets[1];
3382
3398
  dropdownPosX += parseInt(offsetX, 10);
3383
3399
  dropdownPosY += parseInt(offsetY, 10);
3384
3400
  }
3385
3401
 
3402
+ if (this.positionObserver) {
3403
+ // this is not set during init so we have to fetch it
3404
+ // and let's assume that this containing parent fits and is inside
3405
+ // viewport
3406
+ var $containingParent = null;
3407
+
3408
+ do {
3409
+ $containingParent = $containingParent ? $containingParent.parent() : this.$container.parent();
3410
+
3411
+ if (!$containingParent) {
3412
+ $containingParent = $('body');
3413
+ break;
3414
+ }
3415
+ } while ($containingParent.css('overflow-x') !== 'hidden' && $containingParent.css('overflow') !== 'hidden' && ($containingParent.prop('tagName') ? $containingParent.prop('tagName').toLowerCase() !== 'body' : false));
3416
+
3417
+ var containingBoundingRect = $containingParent.get(0).getBoundingClientRect();
3418
+ var containerBoundingRect = this.$container.get(0).getBoundingClientRect();
3419
+
3420
+ if (containingBoundingRect.width < dropdownWidth) {
3421
+ this.$dropdown.css('max-width', containingBoundingRect.width);
3422
+ dropdownWidth = containingBoundingRect.width;
3423
+ } else {
3424
+ this.$dropdown.css('max-width', '');
3425
+ }
3426
+
3427
+ if (containingBoundingRect.height < dropdownHeight) {
3428
+ this.$dropdown.css('max-height', containingBoundingRect.height);
3429
+ dropdownHeight = containingBoundingRect.height;
3430
+ } else {
3431
+ this.$dropdown.css('max-height', '');
3432
+ }
3433
+
3434
+ var maxTop = Math.max(Math.abs(containingBoundingRect.y - containerBoundingRect.y), 0);
3435
+ var maxLeft = Math.max(Math.abs(containingBoundingRect.x - containerBoundingRect.x), 0);
3436
+ var maxRight = $containingParent.get(0).scrollWidth - (containerBoundingRect.x + containerBoundingRect.width);
3437
+ var maxBottom = $containingParent.get(0).scrollHeight - (containerBoundingRect.y + (placement === 'dropbottom' ? containerBoundingRect.height : 0));
3438
+
3439
+ if (maxLeft < dropdownWidth && dropdownPosX < dropdownTriggerPosX) {
3440
+ dropdownPosX = dropdownTriggerPosX; // would be on top of the trigger
3441
+
3442
+ if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
3443
+ dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
3444
+ }
3445
+ }
3446
+
3447
+ if (maxRight < dropdownWidth && dropdownPosX + dropdownWidth > dropdownTriggerPosX + dropdownTriggerWidth) {
3448
+ dropdownPosX = dropdownTriggerPosX + dropdownTriggerWidth - dropdownWidth;
3449
+
3450
+ if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
3451
+ dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
3452
+ }
3453
+ }
3454
+
3455
+ if (dropdownPosY < dropdownTriggerPosY && maxTop < dropdownHeight) {
3456
+ dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + offsetY;
3457
+ }
3458
+
3459
+ if (dropdownPosY >= dropdownTriggerPosY && maxBottom < dropdownHeight) {
3460
+ if (dropdownPosX >= dropdownTriggerPosX + dropdownTriggerWidth || dropdownTriggerPosX >= dropdownPosX + dropdownWidth) {
3461
+ dropdownPosY = dropdownTriggerPosY - (dropdownHeight - maxBottom);
3462
+ } else {
3463
+ dropdownPosY = dropdownTriggerPosY - dropdownHeight - offsetY;
3464
+ }
3465
+ }
3466
+ }
3467
+
3386
3468
  this.$dropdown.css({
3387
3469
  position: 'absolute',
3388
3470
  top: '0px',
@@ -3507,6 +3589,7 @@
3507
3589
  minWidth: null,
3508
3590
  align: 'start',
3509
3591
  closeOnItemClick: true,
3592
+ positionObserver: true,
3510
3593
  content: false,
3511
3594
  scroll: true,
3512
3595
  scrollContentHeight: 100,
@@ -4976,6 +5059,10 @@
4976
5059
  onClose: settings.onClose
4977
5060
  };
4978
5061
 
5062
+ if (dialog.maxBodyHeight == null) {
5063
+ dialog.maxBodyHeight = window.innerHeight - 200;
5064
+ }
5065
+
4979
5066
  if (typeof dialog.template === 'function') {
4980
5067
  dialog.$el = $(dialog.template());
4981
5068
  } else {
@@ -5319,7 +5406,7 @@
5319
5406
  animationOut: 'fadeOut',
5320
5407
  animationSpeed: 'fastest',
5321
5408
  callbacks: {},
5322
- maxBodyHeight: window.innerHeight - 200,
5409
+ maxBodyHeight: null,
5323
5410
  overflowVisible: false,
5324
5411
  faPro: false,
5325
5412
  debug: true,