uikit 3.14.4-dev.5e7e87ba7 → 3.14.4-dev.5fbbc45fb

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 (82) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/dist/css/uikit-core-rtl.css +14 -3
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +14 -3
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +16 -28
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +16 -28
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +27 -17
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +27 -17
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +4 -2
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +17 -8
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +223 -185
  37. package/dist/js/uikit-core.min.js +15 -12
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +226 -186
  41. package/dist/js/uikit.min.js +15 -12
  42. package/package.json +11 -11
  43. package/src/images/components/navbar-toggle-icon.svg +17 -14
  44. package/src/js/api/hooks.js +5 -1
  45. package/src/js/api/state.js +1 -1
  46. package/src/js/components/notification.js +3 -1
  47. package/src/js/core/drop.js +32 -33
  48. package/src/js/core/navbar.js +3 -1
  49. package/src/js/core/offcanvas.js +8 -4
  50. package/src/js/core/toggle.js +3 -5
  51. package/src/js/mixin/modal.js +15 -12
  52. package/src/js/mixin/position.js +5 -4
  53. package/src/js/mixin/style.js +11 -0
  54. package/src/js/mixin/togglable.js +11 -3
  55. package/src/js/util/animation.js +5 -4
  56. package/src/js/util/class.js +3 -1
  57. package/src/js/util/position.js +127 -116
  58. package/src/less/components/dropbar.less +11 -0
  59. package/src/less/components/nav.less +3 -1
  60. package/src/less/components/navbar.less +17 -3
  61. package/src/less/theme/navbar.less +5 -32
  62. package/src/scss/components/dropbar.scss +11 -0
  63. package/src/scss/components/nav.scss +3 -1
  64. package/src/scss/components/navbar.scss +17 -3
  65. package/src/scss/mixins-theme.scss +3 -28
  66. package/src/scss/mixins.scss +2 -0
  67. package/src/scss/theme/navbar.scss +5 -5
  68. package/src/scss/variables-theme.scss +8 -4
  69. package/src/scss/variables.scss +7 -1
  70. package/tests/drop.html +4 -6
  71. package/tests/dropbar.html +10 -8
  72. package/tests/flex.html +36 -36
  73. package/tests/grid.html +22 -22
  74. package/tests/height.html +6 -6
  75. package/tests/index.html +4 -4
  76. package/tests/js/index.js +1 -4
  77. package/tests/navbar.html +48 -21
  78. package/tests/pagination.html +6 -6
  79. package/tests/position.html +17 -4
  80. package/tests/search.html +2 -2
  81. package/tests/sticky-navbar.html +12 -12
  82. package/tests/utility.html +16 -16
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.4-dev.5e7e87ba7 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.4-dev.5fbbc45fb | 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() :
@@ -814,7 +814,9 @@
814
814
  }
815
815
 
816
816
  function removeClasses(element, cls) {
817
- attr(element, 'class', (value) => (value || '').replace(new RegExp("\\b" + cls + "\\b", 'g'), ''));
817
+ attr(element, 'class', (value) =>
818
+ (value || '').replace(new RegExp("\\b" + cls + "\\b\\s?", 'g'), ''));
819
+
818
820
  }
819
821
 
820
822
  function replaceClass(element) {
@@ -950,7 +952,8 @@
950
952
 
951
953
  }
952
954
 
953
- const inProgress = new RegExp(animationPrefix + "(enter|leave)");
955
+ const inProgressRe = new RegExp(animationPrefix + "(enter|leave)");
956
+
954
957
  const Animation = {
955
958
  in: animate$2,
956
959
 
@@ -959,7 +962,7 @@
959
962
  },
960
963
 
961
964
  inProgress(element) {
962
- return inProgress.test(attr(element, 'class'));
965
+ return inProgressRe.test(attr(element, 'class'));
963
966
  },
964
967
 
965
968
  cancel(element) {
@@ -1933,6 +1936,7 @@
1933
1936
  ...options.attach },
1934
1937
 
1935
1938
  offset: [0, 0],
1939
+ placement: [],
1936
1940
  ...options };
1937
1941
 
1938
1942
 
@@ -1943,114 +1947,36 @@
1943
1947
  offset(element, getPosition(element, target, options));
1944
1948
  }
1945
1949
 
1946
- function attachTo(element, target, options) {
1947
- let { attach, offset: offsetBy } = {
1948
- attach: {
1949
- element: ['left', 'top'],
1950
- target: ['left', 'top'],
1951
- ...options.attach },
1952
-
1953
- offset: [0, 0],
1954
- ...options };
1955
-
1956
-
1957
- const position = offset(element);
1958
-
1959
- for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
1960
- const targetOffset =
1961
- attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
1962
-
1963
- position[start] = position[dir] =
1964
- targetOffset[start] +
1965
- moveBy(attach.target[i], end, targetOffset[prop]) -
1966
- moveBy(attach.element[i], end, position[prop]) +
1967
- +offsetBy[i];
1968
- position[end] = position[start] + position[prop];
1969
- }
1970
- return position;
1971
- }
1972
-
1973
- function moveBy(start, end, dim) {
1974
- return start === 'center' ? dim / 2 : start === end ? dim : 0;
1975
- }
1976
-
1977
1950
  function getPosition(element, target, options) {
1978
1951
  const position = attachTo(element, target, options);
1952
+ const { boundary, viewportOffset = 0, placement } = options;
1979
1953
 
1980
- let {
1981
- flip,
1982
- shift,
1983
- attach: { element: elAttach, target: targetAttach },
1984
- offset: elOffset,
1985
- boundary,
1986
- viewportOffset } =
1987
- options;
1988
-
1989
- if (!flip && !shift) {
1990
- return position;
1991
- }
1992
-
1993
- const offsetPosition = { ...position };
1994
- for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
1995
- let viewports = scrollParents(target[i]);
1996
- const [scrollElement] = viewports;
1997
-
1998
- let viewport = getIntersectionArea(...viewports.map(offsetViewport));
1999
-
2000
- if (viewportOffset) {
2001
- viewport[start] += viewportOffset;
2002
- viewport[end] -= viewportOffset;
2003
- }
2004
-
2005
- if (boundary) {
2006
- viewport = getIntersectionArea(viewport, offsetViewport(boundary));
2007
- }
1954
+ let offsetPosition = position;
1955
+ for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
1956
+ const viewport = getViewport$1(target[i], viewportOffset, boundary, i);
2008
1957
 
2009
- const isInStartViewport = position[start] >= viewport[start];
2010
- const isInEndViewport = position[end] <= viewport[end];
2011
-
2012
- if (isInStartViewport && isInEndViewport) {
1958
+ if (isWithin(position, viewport, i)) {
2013
1959
  continue;
2014
1960
  }
2015
1961
 
2016
1962
  let offsetBy = 0;
2017
- const targetDim = offset(target[i]);
2018
1963
 
2019
1964
  // Flip
2020
- if (!intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i)) {
1965
+ if (placement[i] === 'flip') {
1966
+ const attach = options.attach.target[i];
2021
1967
  if (
2022
- !flip ||
2023
- elAttach[i] === end && isInStartViewport ||
2024
- elAttach[i] === start && isInEndViewport)
1968
+ attach === end && position[end] <= viewport[end] ||
1969
+ attach === start && position[start] >= viewport[start])
2025
1970
  {
2026
1971
  continue;
2027
1972
  }
2028
1973
 
2029
- offsetBy =
2030
- (elAttach[i] === start ?
2031
- -position[prop] :
2032
- elAttach[i] === end ?
2033
- position[prop] :
2034
- 0) + (
2035
- targetAttach[i] === start ?
2036
- targetDim[prop] :
2037
- targetAttach[i] === end ?
2038
- -targetDim[prop] :
2039
- 0) -
2040
- elOffset[i] * 2;
2041
-
2042
- if (
2043
- !isInScrollArea(
2044
- {
2045
- ...position,
2046
- [start]: position[start] + offsetBy,
2047
- [end]: position[end] + offsetBy },
1974
+ offsetBy = flip(element, target, options, i)[start] - position[start];
2048
1975
 
2049
- scrollElement,
2050
- i))
1976
+ const scrollArea = getScrollArea(target[i], viewportOffset, i);
2051
1977
 
2052
- {
2053
- if (isInScrollArea(position, scrollElement, i)) {
1978
+ if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
1979
+ if (isWithin(position, scrollArea, i)) {
2054
1980
  continue;
2055
1981
  }
2056
1982
 
@@ -2058,17 +1984,9 @@
2058
1984
  return false;
2059
1985
  }
2060
1986
 
2061
- const newPos = getPosition(element, target, {
2062
- ...options,
2063
- attach: {
2064
- element: elAttach.map(flipDir).reverse(),
2065
- target: targetAttach.map(flipDir).reverse() },
2066
-
2067
- offset: elOffset.reverse(),
2068
- recursion: true });
2069
-
1987
+ const newPos = flipAxis(element, target, options);
2070
1988
 
2071
- if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
1989
+ if (newPos && isWithin(newPos, scrollArea, 1 - i)) {
2072
1990
  return newPos;
2073
1991
  }
2074
1992
 
@@ -2076,7 +1994,9 @@
2076
1994
  }
2077
1995
 
2078
1996
  // Shift
2079
- } else if (shift) {
1997
+ } else if (placement[i] === 'shift') {
1998
+ const targetDim = offset(target[i]);
1999
+ const { offset: elOffset } = options;
2080
2000
  offsetBy =
2081
2001
  clamp(
2082
2002
  clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -2085,13 +2005,78 @@
2085
2005
  position[start];
2086
2006
  }
2087
2007
 
2088
- offsetPosition[start] = position[dir] = position[start] + offsetBy;
2089
- offsetPosition[end] += offsetBy;
2008
+ offsetPosition = applyOffset(offsetPosition, offsetBy, i);
2090
2009
  }
2091
2010
 
2092
2011
  return offsetPosition;
2093
2012
  }
2094
2013
 
2014
+ function attachTo(element, target, options) {
2015
+ let { attach, offset: offsetBy } = {
2016
+ attach: {
2017
+ element: ['left', 'top'],
2018
+ target: ['left', 'top'],
2019
+ ...options.attach },
2020
+
2021
+ offset: [0, 0],
2022
+ ...options };
2023
+
2024
+
2025
+ let elOffset = offset(element);
2026
+
2027
+ for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
2028
+ const targetOffset =
2029
+ attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
2030
+
2031
+ elOffset = applyOffset(
2032
+ elOffset,
2033
+ targetOffset[start] -
2034
+ elOffset[start] +
2035
+ moveBy(attach.target[i], end, targetOffset[prop]) -
2036
+ moveBy(attach.element[i], end, elOffset[prop]) +
2037
+ +offsetBy[i],
2038
+ i);
2039
+
2040
+ }
2041
+ return elOffset;
2042
+ }
2043
+
2044
+ function applyOffset(position, offset, i) {
2045
+ const [, dir, start, end] = dirs[i];
2046
+ const newPos = { ...position };
2047
+ newPos[start] = position[dir] = position[start] + offset;
2048
+ newPos[end] += offset;
2049
+ return newPos;
2050
+ }
2051
+
2052
+ function moveBy(attach, end, dim) {
2053
+ return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
2054
+ }
2055
+
2056
+ function getViewport$1(element, viewportOffset, boundary, i) {
2057
+ let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
2058
+
2059
+ if (viewportOffset) {
2060
+ viewport[dirs[i][2]] += viewportOffset;
2061
+ viewport[dirs[i][3]] -= viewportOffset;
2062
+ }
2063
+
2064
+ if (boundary) {
2065
+ viewport = getIntersectionArea(viewport, offset(boundary));
2066
+ }
2067
+
2068
+ return viewport;
2069
+ }
2070
+
2071
+ function getScrollArea(element, viewportOffset, i) {
2072
+ const [prop,, start, end] = dirs[i];
2073
+ const [scrollElement] = scrollParents(element);
2074
+ const viewport = offsetViewport(scrollElement);
2075
+ viewport[start] -= scrollElement["scroll" + ucfirst(start)] - viewportOffset;
2076
+ viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)] - viewportOffset;
2077
+ return viewport;
2078
+ }
2079
+
2095
2080
  function getIntersectionArea() {
2096
2081
  let area = {};for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
2097
2082
  for (const rect of rects) {
@@ -2103,21 +2088,44 @@
2103
2088
  return area;
2104
2089
  }
2105
2090
 
2106
- function isInScrollArea(position, scrollElement, dir) {
2107
- const viewport = offsetViewport(scrollElement);
2108
- const [prop,, start, end] = dirs[dir];
2109
- viewport[start] -= scrollElement["scroll" + ucfirst(start)];
2110
- viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)];
2091
+ function isWithin(positionA, positionB, i) {
2092
+ const [,, start, end] = dirs[i];
2093
+ return positionA[start] >= positionB[start] && positionA[end] <= positionB[end];
2094
+ }
2095
+
2096
+ function flip(element, target, _ref, i) {let { offset, attach } = _ref;
2097
+ return attachTo(element, target, {
2098
+ attach: {
2099
+ element: flipAttach(attach.element, i),
2100
+ target: flipAttach(attach.target, i) },
2101
+
2102
+ offset: flipOffset(offset, i) });
2103
+
2104
+ }
2105
+
2106
+ function flipAxis(element, target, options) {
2107
+ return getPosition(element, target, {
2108
+ ...options,
2109
+ attach: {
2110
+ element: options.attach.element.map(flipAttachAxis).reverse(),
2111
+ target: options.attach.target.map(flipAttachAxis).reverse() },
2112
+
2113
+ offset: options.offset.reverse(),
2114
+ placement: options.placement.reverse(),
2115
+ recursion: true });
2111
2116
 
2112
- return position[start] >= viewport[start] && position[end] <= viewport[end];
2113
2117
  }
2114
2118
 
2115
- function intersectLine(dimA, dimB, dir) {
2116
- const [,, start, end] = dirs[dir];
2117
- return dimA[end] > dimB[start] && dimB[end] > dimA[start];
2119
+ function flipAttach(attach, i) {
2120
+ const newAttach = [...attach];
2121
+ const index = dirs[i].indexOf(attach[i]);
2122
+ if (~index) {
2123
+ newAttach[i] = dirs[i][1 - index % 2 + 2];
2124
+ }
2125
+ return newAttach;
2118
2126
  }
2119
2127
 
2120
- function flipDir(prop) {
2128
+ function flipAttachAxis(prop) {
2121
2129
  for (let i = 0; i < dirs.length; i++) {
2122
2130
  const index = dirs[i].indexOf(prop);
2123
2131
  if (~index) {
@@ -2126,13 +2134,17 @@
2126
2134
  }
2127
2135
  }
2128
2136
 
2137
+ function flipOffset(offset, i) {
2138
+ offset = [...offset];
2139
+ offset[i] *= -1;
2140
+ return offset;
2141
+ }
2142
+
2129
2143
  var util = /*#__PURE__*/Object.freeze({
2130
2144
  __proto__: null,
2131
2145
  ajax: ajax,
2132
2146
  getImage: getImage,
2133
- transition: transition,
2134
2147
  Transition: Transition,
2135
- animate: animate$2,
2136
2148
  Animation: Animation,
2137
2149
  attr: attr,
2138
2150
  hasAttr: hasAttr,
@@ -2437,7 +2449,11 @@
2437
2449
  }
2438
2450
 
2439
2451
  if (write && result !== false) {
2440
- fastdom.write(() => write.call(this, this._data, types));
2452
+ fastdom.write(() => {
2453
+ if (this._connected) {
2454
+ write.call(this, this._data, types);
2455
+ }
2456
+ });
2441
2457
  }
2442
2458
  }
2443
2459
  }
@@ -2597,7 +2613,7 @@
2597
2613
 
2598
2614
  for (const key in options) {
2599
2615
  const prop = camelize(key);
2600
- if (props[prop] !== undefined) {
2616
+ if (!isUndefined(props[prop])) {
2601
2617
  data$1[prop] = coerce$1(props[prop], options[key]);
2602
2618
  }
2603
2619
  }
@@ -2926,7 +2942,7 @@
2926
2942
  UIkit.data = '__uikit__';
2927
2943
  UIkit.prefix = 'uk-';
2928
2944
  UIkit.options = {};
2929
- UIkit.version = '3.14.4-dev.5e7e87ba7';
2945
+ UIkit.version = '3.14.4-dev.5fbbc45fb';
2930
2946
 
2931
2947
  globalAPI(UIkit);
2932
2948
  hooksAPI(UIkit);
@@ -3160,9 +3176,16 @@
3160
3176
  }
3161
3177
 
3162
3178
  const prevProps = Object.fromEntries(
3163
- ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
3164
- (key) => [key, el.style[key]]));
3165
-
3179
+ [
3180
+ 'padding',
3181
+ 'border',
3182
+ 'width',
3183
+ 'height',
3184
+ 'overflowY',
3185
+ 'overflowX',
3186
+ marginProp,
3187
+ marginStartProp].
3188
+ map((key) => [key, el.style[key]]));
3166
3189
 
3167
3190
 
3168
3191
  const dim = dimensions(el);
@@ -3180,6 +3203,7 @@
3180
3203
  height: dim.height,
3181
3204
  width: dim.width,
3182
3205
  ...css(el, [
3206
+ 'overflow',
3183
3207
  'padding',
3184
3208
  'borderTop',
3185
3209
  'borderRight',
@@ -3616,6 +3640,7 @@
3616
3640
  methods: {
3617
3641
  positionAt(element, target, boundary) {
3618
3642
  let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
3643
+ const placement = [this.flip && 'flip', this.shift && 'shift'];
3619
3644
 
3620
3645
  const attach = {
3621
3646
  element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
@@ -3624,9 +3649,10 @@
3624
3649
 
3625
3650
  if (this.axis === 'y') {
3626
3651
  for (const prop in attach) {
3627
- attach[prop] = attach[prop].reverse();
3652
+ attach[prop].reverse();
3628
3653
  }
3629
- offset = offset.reverse();
3654
+ offset.reverse();
3655
+ placement.reverse();
3630
3656
  }
3631
3657
 
3632
3658
  const [scrollElement] = scrollParents(element, /auto|scroll/);
@@ -3640,8 +3666,7 @@
3640
3666
  attach,
3641
3667
  offset,
3642
3668
  boundary,
3643
- flip: this.flip,
3644
- shift: this.shift,
3669
+ placement,
3645
3670
  viewportOffset: this.getViewportOffset(element) });
3646
3671
 
3647
3672
 
@@ -3676,6 +3701,15 @@
3676
3701
  return toPx(css(element, '--uk-position-viewport-offset'));
3677
3702
  } } };
3678
3703
 
3704
+ var Style = {
3705
+ beforeConnect() {
3706
+ this._style = attr(this.$el, 'style');
3707
+ },
3708
+
3709
+ disconnected() {
3710
+ attr(this.$el, 'style', this._style);
3711
+ } };
3712
+
3679
3713
  const active$1 = [];
3680
3714
 
3681
3715
  var Modal = {
@@ -3785,8 +3819,8 @@
3785
3819
 
3786
3820
 
3787
3821
  if (this.overlay) {
3788
- once(this.$el, 'hide', preventOverscroll(this.$el));
3789
- once(this.$el, 'hide', preventBackgroundScroll());
3822
+ once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
3823
+ once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
3790
3824
  }
3791
3825
 
3792
3826
  if (this.stack) {
@@ -3868,10 +3902,6 @@
3868
3902
  active$1.splice(active$1.indexOf(this), 1);
3869
3903
  }
3870
3904
 
3871
- if (!active$1.length) {
3872
- css(document.body, 'overflowY', '');
3873
- }
3874
-
3875
3905
  css(this.$el, 'zIndex', '');
3876
3906
 
3877
3907
  if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
@@ -3988,16 +4018,22 @@
3988
4018
  return () => events.forEach((fn) => fn());
3989
4019
  }
3990
4020
 
4021
+ let prevented;
3991
4022
  function preventBackgroundScroll() {
3992
- const { body, documentElement } = document;
3993
- css(body, {
3994
- overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
3995
- touchAction: 'none' });
4023
+ if (prevented) {
4024
+ return noop;
4025
+ }
4026
+ prevented = true;
4027
+
4028
+ const { scrollingElement } = document;
4029
+ css(scrollingElement, {
4030
+ overflowY: 'hidden',
4031
+ touchAction: 'none',
4032
+ paddingRight: width(window) - scrollingElement.clientWidth });
3996
4033
 
3997
- css(documentElement, 'overflowY', 'hidden');
3998
4034
  return () => {
3999
- css(documentElement, 'overflowY', '');
4000
- css(body, { overflowY: '', touchAction: '' });
4035
+ prevented = false;
4036
+ css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
4001
4037
  };
4002
4038
  }
4003
4039
 
@@ -4014,7 +4050,7 @@
4014
4050
  let active;
4015
4051
 
4016
4052
  var drop = {
4017
- mixins: [Container, Lazyload, Position, Togglable],
4053
+ mixins: [Container, Lazyload, Position, Style, Togglable],
4018
4054
 
4019
4055
  args: 'pos',
4020
4056
 
@@ -4028,7 +4064,7 @@
4028
4064
  stretch: Boolean,
4029
4065
  delayShow: Number,
4030
4066
  delayHide: Number,
4031
- display: String,
4067
+ autoUpdate: Boolean,
4032
4068
  clsDrop: String,
4033
4069
  animateOut: Boolean,
4034
4070
  bgScroll: Boolean },
@@ -4044,7 +4080,7 @@
4044
4080
  stretch: false,
4045
4081
  delayShow: 0,
4046
4082
  delayHide: 800,
4047
- display: null,
4083
+ autoUpdate: true,
4048
4084
  clsDrop: false,
4049
4085
  animateOut: false,
4050
4086
  bgScroll: true,
@@ -4088,6 +4124,7 @@
4088
4124
 
4089
4125
  disconnected() {
4090
4126
  if (this.isActive()) {
4127
+ this.hide(false);
4091
4128
  active = null;
4092
4129
  }
4093
4130
  },
@@ -4221,7 +4258,8 @@
4221
4258
 
4222
4259
  this.tracker.init();
4223
4260
 
4224
- for (const handler of [
4261
+ const update = () => this.$emit();
4262
+ const handlers = [
4225
4263
  on(
4226
4264
  document,
4227
4265
  pointerDown,
@@ -4250,29 +4288,28 @@
4250
4288
  }
4251
4289
  }),
4252
4290
 
4291
+ on(window, 'resize', update),
4292
+
4293
+ (() => {
4294
+ const observer = observeResize(
4295
+ scrollParents(this.$el).concat(this.targetEl),
4296
+ update);
4297
+
4298
+ return () => observer.disconnect();
4299
+ })(),
4300
+
4301
+ ...(this.autoUpdate ?
4302
+ [on([document, scrollParents(this.$el)], 'scroll', update)] :
4303
+ []),
4304
+
4253
4305
  ...(this.bgScroll ?
4254
4306
  [] :
4255
- [preventOverscroll(this.$el), preventBackgroundScroll()]),
4307
+ [preventOverscroll(this.$el), preventBackgroundScroll()])];
4308
+
4309
+
4310
+ once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
4311
+ self: true });
4256
4312
 
4257
- ...(this.display === 'static' ?
4258
- [] :
4259
- (() => {
4260
- const handler = () => this.$emit();
4261
- return [
4262
- on(window, 'resize', handler),
4263
- on([document, scrollParents(this.$el)], 'scroll', handler),
4264
- (() => {
4265
- const observer = observeResize(
4266
- scrollParents(this.$el),
4267
- handler);
4268
-
4269
- return () => observer.disconnect();
4270
- })()];
4271
-
4272
- })())])
4273
- {
4274
- once(this.$el, 'hide', handler, { self: true });
4275
- }
4276
4313
  } },
4277
4314
 
4278
4315
 
@@ -4381,13 +4418,13 @@
4381
4418
 
4382
4419
  position() {
4383
4420
  removeClass(this.$el, this.clsDrop + "-stack");
4384
- css(this.$el, { maxWidth: '', top: '', left: '' });
4421
+ attr(this.$el, 'style', this._style);
4385
4422
 
4386
4423
  // Ensure none positioned element does not generate scrollbars
4387
4424
  this.$el.hidden = true;
4388
4425
 
4389
4426
  const boundary = query(this.boundary, this.$el);
4390
- const boundaryOffset = offsetViewport(boundary || window);
4427
+ const boundaryOffset = offset(boundary || window);
4391
4428
  const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
4392
4429
  const viewportOffset = this.getViewportOffset(this.$el);
4393
4430
 
@@ -4397,12 +4434,9 @@
4397
4434
 
4398
4435
 
4399
4436
  for (const [i, [axis, prop]] of dirs) {
4400
- if (includes([axis, true], this.stretch)) {
4437
+ if (this.axis !== axis && includes([axis, true], this.stretch)) {
4401
4438
  css(this.$el, {
4402
- [prop]:
4403
- this.axis === axis ?
4404
- '' // Reset prop in main axis before positioning to not cause the drop to flip prematurely
4405
- : Math.min(
4439
+ [prop]: Math.min(
4406
4440
  boundaryOffset[prop],
4407
4441
  viewports[i][prop] - 2 * viewportOffset),
4408
4442
 
@@ -5218,7 +5252,7 @@
5218
5252
 
5219
5253
  var navbarParentIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 3.5 6 8.5 11 3.5\"/></svg>";
5220
5254
 
5221
- var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><style>.uk-navbar-toggle svg > [class*='line-'] {\n transition: 0.2s ease-in-out;\n transition-property: transform, opacity,;\n transform-origin: center;\n opacity: 1;\n }\n\n .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-2 { transform: rotate(45deg); }\n .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-3 { transform: rotate(-45deg); }\n\n .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-1,\n .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-4 { opacity: 0; }\n .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-1 { transform: translateY(6px) scaleX(0); }\n .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
5255
+ var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><style>.uk-navbar-toggle-animate svg > [class*='line-'] {\n transition: 0.2s ease-in-out;\n transition-property: transform, opacity,;\n transform-origin: center;\n opacity: 1;\n }\n\n .uk-navbar-toggle svg > .line-3 { opacity: 0; }\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-3 { opacity: 1; }\n\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-2 { transform: rotate(45deg); }\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-3 { transform: rotate(-45deg); }\n\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-1,\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-4 { opacity: 0; }\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-1 { transform: translateY(6px) scaleX(0); }\n .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
5222
5256
 
5223
5257
  var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";
5224
5258
 
@@ -5821,6 +5855,8 @@
5821
5855
  offset: Number,
5822
5856
  boundary: Boolean,
5823
5857
  target: Boolean,
5858
+ targetX: Boolean,
5859
+ targetY: Boolean,
5824
5860
  clsDrop: String,
5825
5861
  delayShow: Number,
5826
5862
  delayHide: Number,
@@ -6169,7 +6205,7 @@
6169
6205
 
6170
6206
  methods: {
6171
6207
  getActive() {
6172
- return active && within(active.targetEl, this.$el) && active;
6208
+ return includes(this.dropdowns, active == null ? void 0 : active.$el) && active;
6173
6209
  },
6174
6210
 
6175
6211
  transitionTo(newHeight, el) {
@@ -6409,9 +6445,12 @@
6409
6445
  addClass(parent(this.panel), this.clsMode);
6410
6446
  }
6411
6447
 
6412
- addClass(document.body, this.clsContainer, this.clsFlip);
6413
- css(document.body, 'touch-action', 'pan-y pinch-zoom');
6448
+ const { body, scrollingElement } = document;
6449
+
6450
+ addClass(body, this.clsContainer, this.clsFlip);
6451
+ css(body, 'touch-action', 'pan-y pinch-zoom');
6414
6452
  css(this.$el, 'display', 'block');
6453
+ css(this.panel, 'maxWidth', scrollingElement.clientWidth);
6415
6454
  addClass(this.$el, this.clsOverlay);
6416
6455
  addClass(
6417
6456
  this.panel,
@@ -6419,8 +6458,8 @@
6419
6458
  this.mode === 'reveal' ? '' : this.clsMode);
6420
6459
 
6421
6460
 
6422
- height(document.body); // force reflow
6423
- addClass(document.body, this.clsContainerAnimation);
6461
+ height(body); // force reflow
6462
+ addClass(body, this.clsContainerAnimation);
6424
6463
 
6425
6464
  this.clsContainerAnimation && suppressUserScale();
6426
6465
  } },
@@ -6452,6 +6491,7 @@
6452
6491
  removeClass(this.panel, this.clsSidebarAnimation, this.clsMode);
6453
6492
  removeClass(this.$el, this.clsOverlay);
6454
6493
  css(this.$el, 'display', '');
6494
+ css(this.panel, 'maxWidth', '');
6455
6495
  removeClass(document.body, this.clsContainer, this.clsFlip);
6456
6496
  } },
6457
6497
 
@@ -7588,7 +7628,7 @@
7588
7628
 
7589
7629
 
7590
7630
  {
7591
- name: 'toggled',
7631
+ name: 'hide show',
7592
7632
 
7593
7633
  self: true,
7594
7634
 
@@ -7596,10 +7636,8 @@
7596
7636
  return this.target;
7597
7637
  },
7598
7638
 
7599
- handler(e, toggled) {
7600
- if (e.target === this.target[0]) {
7601
- this.updateAria(toggled);
7602
- }
7639
+ handler(_ref2) {let { type } = _ref2;
7640
+ this.updateAria(type === 'show');
7603
7641
  } },
7604
7642
 
7605
7643