uikit 3.14.1-dev.eeb4cd6ae → 3.14.2-dev.404bdcedf

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 (72) hide show
  1. package/CHANGELOG.md +21 -3
  2. package/build/util.js +8 -2
  3. package/dist/css/uikit-core-rtl.css +12 -1
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +12 -1
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +15 -14
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +15 -14
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +2 -2
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +19 -2
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +19 -2
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +2 -2
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +2 -2
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +2 -2
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +38 -16
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +88 -56
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +90 -58
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +11 -11
  44. package/src/js/api/hooks.js +1 -1
  45. package/src/js/components/filter.js +1 -1
  46. package/src/js/core/drop.js +16 -7
  47. package/src/js/core/height-viewport.js +1 -2
  48. package/src/js/core/margin.js +1 -1
  49. package/src/js/core/scrollspy.js +2 -1
  50. package/src/js/core/toggle.js +4 -0
  51. package/src/js/mixin/parallax.js +1 -1
  52. package/src/js/mixin/position.js +18 -23
  53. package/src/js/mixin/togglable.js +18 -1
  54. package/src/js/util/position.js +24 -22
  55. package/src/js/util/viewport.js +5 -9
  56. package/src/less/components/drop.less +1 -0
  57. package/src/less/components/dropdown.less +1 -0
  58. package/src/less/components/navbar.less +16 -2
  59. package/src/less/components/tooltip.less +1 -0
  60. package/src/less/theme/navbar.less +3 -10
  61. package/src/scss/components/drop.scss +1 -0
  62. package/src/scss/components/dropdown.scss +1 -0
  63. package/src/scss/components/navbar.scss +16 -2
  64. package/src/scss/components/tooltip.scss +1 -0
  65. package/src/scss/mixins-theme.scss +0 -10
  66. package/src/scss/theme/navbar.scss +3 -0
  67. package/src/scss/variables-theme.scss +3 -1
  68. package/src/scss/variables.scss +2 -0
  69. package/tests/drop.html +20 -2
  70. package/tests/dropdown.html +6 -0
  71. package/tests/navbar.html +21 -59
  72. package/tests/notification.html +1 -1
package/dist/js/uikit-core.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.1-dev.eeb4cd6ae | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.2-dev.404bdcedf | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
2
2
 
3
3
  (function (global, factory) {
4
4
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1911,22 +1911,18 @@
1911
1911
  function offsetViewport(scrollElement) {
1912
1912
  let viewportElement = getViewport$1(scrollElement);
1913
1913
 
1914
- // iOS 12 returns <body> as scrollingElement
1915
- if (viewportElement === scrollingElement(viewportElement)) {
1916
- viewportElement = document.documentElement;
1917
- }
1918
-
1919
1914
  let rect = offset(viewportElement);
1920
1915
  for (let [prop, dir, start, end] of [
1921
1916
  ['width', 'x', 'left', 'right'],
1922
1917
  ['height', 'y', 'top', 'bottom']])
1923
1918
  {
1924
- if (!isWindow(getViewport$1(viewportElement))) {
1919
+ if (!isWindow(viewportElement)) {
1925
1920
  rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
1921
+ } else {
1922
+ // iOS 12 returns <body> as scrollingElement
1923
+ viewportElement = viewportElement.document.documentElement;
1926
1924
  }
1927
- rect[prop] = rect[dir] = (
1928
- isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement)["client" +
1929
- ucfirst(prop)];
1925
+ rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
1930
1926
  rect[end] = rect[prop] + rect[start];
1931
1927
  }
1932
1928
  return rect;
@@ -1990,6 +1986,10 @@
1990
1986
  return position;
1991
1987
  }
1992
1988
 
1989
+ function moveBy(start, end, dim) {
1990
+ return start === 'center' ? dim / 2 : start === end ? dim : 0;
1991
+ }
1992
+
1993
1993
  function attachToWithFlip(element, target, options) {
1994
1994
  const position = attachTo(element, target, options);
1995
1995
  const targetDim = offset(target);
@@ -2000,7 +2000,7 @@
2000
2000
  offset: elOffset,
2001
2001
  boundary,
2002
2002
  viewport,
2003
- viewportPadding } =
2003
+ viewportOffset } =
2004
2004
  options;
2005
2005
 
2006
2006
  let viewports = scrollParents(element);
@@ -2021,9 +2021,9 @@
2021
2021
 
2022
2022
  viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
2023
2023
 
2024
- if (viewportPadding) {
2025
- viewport[start] += viewportPadding;
2026
- viewport[end] -= viewportPadding;
2024
+ if (viewportOffset) {
2025
+ viewport[start] += viewportOffset;
2026
+ viewport[end] -= viewportOffset;
2027
2027
  }
2028
2028
 
2029
2029
  if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
@@ -2080,19 +2080,21 @@
2080
2080
  return false;
2081
2081
  }
2082
2082
 
2083
- const newPos = attachToWithFlip(element, target, {
2084
- ...options,
2085
- attach: {
2086
- element: elAttach.map(flipDir).reverse(),
2087
- target: targetAttach.map(flipDir).reverse() },
2083
+ if (flip === true || includes(flip, dirs[1 - i][1])) {
2084
+ const newPos = attachToWithFlip(element, target, {
2085
+ ...options,
2086
+ attach: {
2087
+ element: elAttach.map(flipDir).reverse(),
2088
+ target: targetAttach.map(flipDir).reverse() },
2088
2089
 
2089
- offset: elOffset.reverse(),
2090
- flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
2091
- recursion: true });
2090
+ offset: elOffset.reverse(),
2091
+ flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
2092
+ recursion: true });
2092
2093
 
2093
2094
 
2094
- if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
2095
- return newPos;
2095
+ if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
2096
+ return newPos;
2097
+ }
2096
2098
  }
2097
2099
  }
2098
2100
 
@@ -2113,10 +2115,6 @@
2113
2115
  return offsetPosition;
2114
2116
  }
2115
2117
 
2116
- function moveBy(start, end, dim) {
2117
- return start === 'center' ? dim / 2 : start === end ? dim : 0;
2118
- }
2119
-
2120
2118
  function getIntersectionArea() {
2121
2119
  let area = {};for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
2122
2120
  for (const rect of rects) {
@@ -2474,7 +2472,7 @@
2474
2472
  const {
2475
2473
  $options: { computed } } =
2476
2474
  this;
2477
- const values = { ...(initial ? {} : this._computed) };
2475
+ const values = { ...this._computed };
2478
2476
  this._computed = {};
2479
2477
 
2480
2478
  for (const key in computed) {
@@ -2954,7 +2952,7 @@
2954
2952
  UIkit.data = '__uikit__';
2955
2953
  UIkit.prefix = 'uk-';
2956
2954
  UIkit.options = {};
2957
- UIkit.version = '3.14.1-dev.eeb4cd6ae';
2955
+ UIkit.version = '3.14.2-dev.404bdcedf';
2958
2956
 
2959
2957
  globalAPI(UIkit);
2960
2958
  hooksAPI(UIkit);
@@ -3046,6 +3044,7 @@
3046
3044
  cls: Boolean,
3047
3045
  animation: 'list',
3048
3046
  duration: Number,
3047
+ velocity: Number,
3049
3048
  origin: String,
3050
3049
  transition: String },
3051
3050
 
@@ -3054,6 +3053,7 @@
3054
3053
  cls: false,
3055
3054
  animation: [false],
3056
3055
  duration: 200,
3056
+ velocity: 0.2,
3057
3057
  origin: false,
3058
3058
  transition: 'ease',
3059
3059
  clsEnter: 'uk-togglabe-enter',
@@ -3101,6 +3101,11 @@
3101
3101
  return Promise.reject();
3102
3102
  }
3103
3103
 
3104
+ if (!animate) {
3105
+ Animation.cancel(el);
3106
+ Transition.cancel(el);
3107
+ }
3108
+
3104
3109
  const promise = (
3105
3110
  isFunction(animate) ?
3106
3111
  animate :
@@ -3171,7 +3176,15 @@
3171
3176
 
3172
3177
 
3173
3178
 
3174
- function toggleHeight(_ref3) {let { isToggled, duration, initProps, hideProps, transition, _toggle } = _ref3;
3179
+ function toggleHeight(_ref3)
3180
+
3181
+
3182
+
3183
+
3184
+
3185
+
3186
+
3187
+ {let { isToggled, duration, velocity, initProps, hideProps, transition, _toggle } = _ref3;
3175
3188
  return (el, show) => {
3176
3189
  const inProgress = Transition.inProgress(el);
3177
3190
  const inner = el.hasChildNodes() ?
@@ -3192,6 +3205,8 @@
3192
3205
  fastdom.flush();
3193
3206
 
3194
3207
  const endHeight = height(el) + (inProgress ? 0 : inner);
3208
+ duration = velocity * el.offsetHeight + duration;
3209
+
3195
3210
  height(el, currentHeight);
3196
3211
 
3197
3212
  return (
@@ -3570,8 +3585,7 @@
3570
3585
  data: {
3571
3586
  pos: "bottom-" + (isRtl ? 'right' : 'left'),
3572
3587
  flip: true,
3573
- offset: false,
3574
- viewportPadding: 10 },
3588
+ offset: false },
3575
3589
 
3576
3590
 
3577
3591
  connected() {
@@ -3583,16 +3597,22 @@
3583
3597
  positionAt(element, target, boundary) {
3584
3598
  const [dir, align] = this.pos;
3585
3599
 
3586
- let { offset: offset$1 } = this;
3587
- if (!isNumeric(offset$1)) {
3588
- const node = $(offset$1);
3589
- offset$1 = node ?
3590
- offset(node)[this.axis === 'x' ? 'left' : 'top'] -
3591
- offset(target)[this.axis === 'x' ? 'right' : 'bottom'] :
3592
- 0;
3593
- }
3594
- offset$1 = toPx(offset$1) + toPx(getCssVar('position-offset', element));
3595
- offset$1 = [includes(['left', 'top'], dir) ? -offset$1 : +offset$1, 0];
3600
+ const mainAxisOffset =
3601
+ toPx(
3602
+ this.offset === false ? getCssVar('position-offset', element) : this.offset,
3603
+ this.axis === 'x' ? 'width' : 'height',
3604
+ element) * (
3605
+ includes(['left', 'top'], dir) ? -1 : 1);
3606
+
3607
+ const crossAxisOffset = includes(['center', 'justify'], align) ?
3608
+ 0 :
3609
+ toPx(
3610
+ getCssVar('position-shift-offset', element),
3611
+ this.axis === 'y' ? 'width' : 'height',
3612
+ element) * (
3613
+ includes(['left', 'top'], align) ? 1 : -1);
3614
+
3615
+ let offset = [mainAxisOffset, crossAxisOffset];
3596
3616
 
3597
3617
  const attach = {
3598
3618
  element: [flipPosition(dir), align],
@@ -3603,15 +3623,15 @@
3603
3623
  for (const prop in attach) {
3604
3624
  attach[prop] = attach[prop].reverse();
3605
3625
  }
3606
- offset$1 = offset$1.reverse();
3626
+ offset = offset.reverse();
3607
3627
  }
3608
3628
 
3609
3629
  positionAt(element, target, {
3610
3630
  attach,
3611
- offset: offset$1,
3631
+ offset,
3612
3632
  boundary,
3613
- viewportPadding: this.viewportPadding,
3614
- flip: this.flip });
3633
+ flip: this.flip,
3634
+ viewportOffset: toPx(getCssVar('position-viewport-offset', element)) });
3615
3635
 
3616
3636
  } } };
3617
3637
 
@@ -3962,19 +3982,27 @@
3962
3982
  toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
3963
3983
 
3964
3984
  const boundary = query(this.boundary, this.$el);
3965
- const [scrollParent] = scrollParents(this.$el);
3966
- const scrollParentOffset = offsetViewport(scrollParent);
3985
+ const scrollParentOffset = offset(
3986
+ scrollParents(boundary && this.boundaryAlign ? boundary : this.$el)[0]);
3987
+
3967
3988
  const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
3968
3989
 
3969
3990
  css(this.$el, 'maxWidth', '');
3970
3991
  const maxWidth =
3971
- scrollParentOffset.width - (this.boundaryAlign ? 0 : 2 * this.viewportPadding);
3992
+ scrollParentOffset.width -
3993
+ 2 * toPx(getCssVar('position-viewport-offset', this.$el));
3972
3994
 
3973
3995
  if (this.pos[1] === 'justify') {
3974
3996
  const prop = this.axis === 'y' ? 'width' : 'height';
3975
- const targetOffset = offset(this.target);
3976
- const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
3977
- css(this.$el, prop, alignTo[prop]);
3997
+ css(
3998
+ this.$el,
3999
+ prop,
4000
+ Math.min(
4001
+ (boundary ? boundaryOffset : offset(this.target))[prop],
4002
+ scrollParentOffset[prop] -
4003
+ 2 * toPx(getCssVar('position-viewport-offset', this.$el))));
4004
+
4005
+
3978
4006
  } else if (this.$el.offsetWidth > maxWidth) {
3979
4007
  addClass(this.$el, this.clsDrop + "-stack");
3980
4008
  }
@@ -4108,7 +4136,7 @@
4108
4136
  for (const row of rows) {
4109
4137
  for (const column of row) {
4110
4138
  toggleClass(column, this.margin, rows[0] !== row);
4111
- toggleClass(column, this.firstColumn, !!~columns[0].indexOf(column));
4139
+ toggleClass(column, this.firstColumn, columns[0].includes(column));
4112
4140
  }
4113
4141
  }
4114
4142
  },
@@ -4452,7 +4480,7 @@
4452
4480
  }
4453
4481
 
4454
4482
  var heightViewport = {
4455
- mixins: [Class, Resize],
4483
+ mixins: [Resize],
4456
4484
 
4457
4485
  props: {
4458
4486
  expand: Boolean,
@@ -6436,7 +6464,7 @@
6436
6464
  css(filter(elements, ":not(." + this.inViewClass + ")"), 'visibility', 'hidden');
6437
6465
  }
6438
6466
 
6439
- if (prev) {
6467
+ if (!isEqual(elements, prev)) {
6440
6468
  this.$reset();
6441
6469
  }
6442
6470
  },
@@ -7327,6 +7355,10 @@
7327
7355
  {
7328
7356
  name: 'click',
7329
7357
 
7358
+ filter() {
7359
+ return ['click', 'hover'].some((mode) => includes(this.mode, mode));
7360
+ },
7361
+
7330
7362
  handler(e) {
7331
7363
  let link;
7332
7364
  if (