uikit 3.14.4-dev.6a00f7fe6 → 3.14.4-dev.7db3661de

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 (91) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/css/uikit-core-rtl.css +146 -77
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +146 -77
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +143 -78
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +143 -78
  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 +7 -5
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +115 -24
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +115 -24
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +4 -5
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +4 -5
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +22 -7
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +4 -5
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +22 -7
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +3 -3
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +26 -19
  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 +765 -647
  37. package/dist/js/uikit-core.min.js +1 -1
  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 +1593 -1458
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  44. package/src/images/components/nav-parent-icon.svg +3 -0
  45. package/src/images/components/navbar-parent-icon.svg +3 -0
  46. package/src/js/components/filter.js +5 -3
  47. package/src/js/components/sortable.js +2 -3
  48. package/src/js/core/drop.js +7 -0
  49. package/src/js/core/height-viewport.js +14 -6
  50. package/src/js/core/icon.js +16 -0
  51. package/src/js/core/index.js +2 -0
  52. package/src/js/core/leader.js +2 -2
  53. package/src/js/core/navbar.js +44 -15
  54. package/src/js/core/offcanvas.js +1 -47
  55. package/src/js/core/scroll.js +37 -10
  56. package/src/js/core/sticky.js +8 -9
  57. package/src/js/mixin/media.js +4 -5
  58. package/src/js/mixin/modal.js +90 -4
  59. package/src/js/mixin/position.js +27 -11
  60. package/src/js/mixin/slider-drag.js +20 -8
  61. package/src/js/mixin/togglable.js +8 -17
  62. package/src/js/util/dimensions.js +6 -6
  63. package/src/js/util/position.js +1 -0
  64. package/src/js/util/style.js +4 -13
  65. package/src/js/util/viewport.js +20 -36
  66. package/src/less/components/dropdown.less +14 -0
  67. package/src/less/components/leader.less +1 -1
  68. package/src/less/components/nav.less +37 -44
  69. package/src/less/components/navbar.less +108 -24
  70. package/src/less/components/utility.less +21 -4
  71. package/src/less/theme/nav.less +3 -15
  72. package/src/less/theme/navbar.less +7 -7
  73. package/src/scss/components/dropdown.scss +14 -0
  74. package/src/scss/components/leader.scss +1 -1
  75. package/src/scss/components/nav.scss +36 -32
  76. package/src/scss/components/navbar.scss +96 -24
  77. package/src/scss/components/utility.scss +19 -3
  78. package/src/scss/mixins-theme.scss +18 -20
  79. package/src/scss/mixins.scss +16 -15
  80. package/src/scss/theme/nav.scss +3 -15
  81. package/src/scss/theme/navbar.scss +6 -3
  82. package/src/scss/variables-theme.scss +27 -15
  83. package/src/scss/variables.scss +27 -13
  84. package/tests/drop.html +72 -16
  85. package/tests/dropdown.html +103 -16
  86. package/tests/index.html +3 -3
  87. package/tests/nav.html +20 -87
  88. package/tests/navbar.html +2128 -1133
  89. package/tests/offcanvas.html +8 -8
  90. package/tests/utility.html +19 -0
  91. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/dist/js/uikit.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.4-dev.6a00f7fe6 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.4-dev.7db3661de | 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() :
@@ -785,18 +785,11 @@
785
785
  return elements[0];
786
786
  }
787
787
 
788
- const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
789
- function getCssVar(name, element) {if (element === void 0) {element = document.documentElement;}
790
- return css(element, "--uk-" + name).replace(propertyRe, '$2');
791
- }
792
-
793
788
  // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
794
789
  const propName = memoize((name) => vendorPropName(name));
795
790
 
796
- const cssPrefixes = ['webkit', 'moz'];
797
-
798
791
  function vendorPropName(name) {
799
- if (name[0] === '-') {
792
+ if (startsWith(name, '--')) {
800
793
  return name;
801
794
  }
802
795
 
@@ -808,11 +801,8 @@
808
801
  return name;
809
802
  }
810
803
 
811
- let i = cssPrefixes.length,
812
- prefixedName;
813
-
814
- while (i--) {
815
- prefixedName = "-" + cssPrefixes[i] + "-" + name;
804
+ for (const prefix of ['webkit', 'moz']) {
805
+ const prefixedName = "-" + prefix + "-" + name;
816
806
  if (prefixedName in style) {
817
807
  return prefixedName;
818
808
  }
@@ -1060,13 +1050,13 @@
1060
1050
  }
1061
1051
 
1062
1052
  function offsetPosition(element) {
1063
- const offset = [0, 0];
1064
-
1065
1053
  element = toNode(element);
1066
1054
 
1067
- do {
1068
- offset[0] += element.offsetTop;
1069
- offset[1] += element.offsetLeft;
1055
+ const offset = [element.offsetTop, element.offsetLeft];
1056
+
1057
+ while (element = element.offsetParent) {
1058
+ offset[0] += element.offsetTop + toFloat(css(element, "borderTopWidth"));
1059
+ offset[1] += element.offsetLeft + toFloat(css(element, "borderLeftWidth"));
1070
1060
 
1071
1061
  if (css(element, 'position') === 'fixed') {
1072
1062
  const win = toWindow(element);
@@ -1074,7 +1064,7 @@
1074
1064
  offset[1] += win.scrollX;
1075
1065
  return offset;
1076
1066
  }
1077
- } while (element = element.offsetParent);
1067
+ }
1078
1068
 
1079
1069
  return offset;
1080
1070
  }
@@ -1293,9 +1283,9 @@
1293
1283
  const hasTouch = inBrowser && 'ontouchstart' in window;
1294
1284
  const hasPointerEvents = inBrowser && window.PointerEvent;
1295
1285
 
1296
- const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
1297
- const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
1298
- const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
1286
+ const pointerDown$1 = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
1287
+ const pointerMove$1 = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
1288
+ const pointerUp$1 = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
1299
1289
  const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
1300
1290
  const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
1301
1291
  const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
@@ -1795,20 +1785,6 @@
1795
1785
 
1796
1786
  }
1797
1787
 
1798
- function scrollTop(element, top) {
1799
- if (isWindow(element) || isDocument(element)) {
1800
- element = scrollingElement(element);
1801
- } else {
1802
- element = toNode(element);
1803
- }
1804
-
1805
- if (isUndefined(top)) {
1806
- return element.scrollTop;
1807
- } else {
1808
- element.scrollTop = top;
1809
- }
1810
- }
1811
-
1812
1788
  function scrollIntoView(element, _temp) {let { offset: offsetBy = 0 } = _temp === void 0 ? {} : _temp;
1813
1789
  const parents = isVisible(element) ? scrollParents(element) : [];
1814
1790
  return parents.reduce(
@@ -1850,7 +1826,7 @@
1850
1826
  (function step() {
1851
1827
  const percent = ease(clamp((Date.now() - start) / duration));
1852
1828
 
1853
- scrollTop(element, scroll + top * percent);
1829
+ element.scrollTop = scroll + top * percent;
1854
1830
 
1855
1831
  // scroll more if we have not reached our destination
1856
1832
  if (percent === 1) {
@@ -1911,18 +1887,31 @@
1911
1887
  }
1912
1888
 
1913
1889
  function offsetViewport(scrollElement) {
1914
- let viewportElement = getViewport$1(scrollElement);
1890
+ const window = toWindow(scrollElement);
1891
+ const {
1892
+ document: { documentElement } } =
1893
+ window;
1894
+ let viewportElement =
1895
+ scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
1896
+
1897
+ const { visualViewport } = window;
1898
+ if (isWindow(viewportElement) && visualViewport) {
1899
+ let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
1900
+ height = Math.round(height * scale);
1901
+ width = Math.round(width * scale);
1902
+ return { height, width, top, left, bottom: top + height, right: left + width };
1903
+ }
1915
1904
 
1916
1905
  let rect = offset(viewportElement);
1917
1906
  for (let [prop, dir, start, end] of [
1918
1907
  ['width', 'x', 'left', 'right'],
1919
1908
  ['height', 'y', 'top', 'bottom']])
1920
1909
  {
1921
- if (!isWindow(viewportElement)) {
1922
- rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
1923
- } else {
1910
+ if (isWindow(viewportElement)) {
1924
1911
  // iOS 12 returns <body> as scrollingElement
1925
- viewportElement = viewportElement.document.documentElement;
1912
+ viewportElement = documentElement;
1913
+ } else {
1914
+ rect[start] += toFloat(css(viewportElement, "border" + ucfirst(start) + "Width"));
1926
1915
  }
1927
1916
  rect[prop] = rect[dir] = viewportElement["client" + ucfirst(prop)];
1928
1917
  rect[end] = rect[prop] + rect[start];
@@ -1934,10 +1923,6 @@
1934
1923
  return toWindow(element).document.scrollingElement;
1935
1924
  }
1936
1925
 
1937
- function getViewport$1(scrollElement) {
1938
- return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
1939
- }
1940
-
1941
1926
  const dirs = [
1942
1927
  ['width', 'x', 'left', 'right'],
1943
1928
  ['height', 'y', 'top', 'bottom']];
@@ -2095,6 +2080,7 @@
2095
2080
  return newPos;
2096
2081
  }
2097
2082
  }
2083
+ continue;
2098
2084
  }
2099
2085
 
2100
2086
  // Move
@@ -2194,9 +2180,9 @@
2194
2180
  inBrowser: inBrowser,
2195
2181
  isRtl: isRtl,
2196
2182
  hasTouch: hasTouch,
2197
- pointerDown: pointerDown,
2198
- pointerMove: pointerMove,
2199
- pointerUp: pointerUp,
2183
+ pointerDown: pointerDown$1,
2184
+ pointerMove: pointerMove$1,
2185
+ pointerUp: pointerUp$1,
2200
2186
  pointerEnter: pointerEnter,
2201
2187
  pointerLeave: pointerLeave,
2202
2188
  pointerCancel: pointerCancel,
@@ -2284,10 +2270,8 @@
2284
2270
  findAll: findAll,
2285
2271
  escape: escape,
2286
2272
  css: css,
2287
- getCssVar: getCssVar,
2288
2273
  propName: propName,
2289
2274
  isInView: isInView,
2290
- scrollTop: scrollTop,
2291
2275
  scrollIntoView: scrollIntoView,
2292
2276
  scrolledOver: scrolledOver,
2293
2277
  scrollParents: scrollParents,
@@ -2950,7 +2934,7 @@
2950
2934
  UIkit.data = '__uikit__';
2951
2935
  UIkit.prefix = 'uk-';
2952
2936
  UIkit.options = {};
2953
- UIkit.version = '3.14.4-dev.6a00f7fe6';
2937
+ UIkit.version = '3.14.4-dev.7db3661de';
2954
2938
 
2955
2939
  globalAPI(UIkit);
2956
2940
  hooksAPI(UIkit);
@@ -3248,7 +3232,7 @@
3248
3232
 
3249
3233
  Transition.cancel(el);
3250
3234
 
3251
- const [scrollElement] = scrollParents(el);
3235
+ const [scrollElement] = scrollParents(el.offsetParent);
3252
3236
  css(scrollElement, 'overflowX', 'hidden');
3253
3237
 
3254
3238
  if (!isToggled(el)) {
@@ -3259,17 +3243,11 @@
3259
3243
  duration = velocity * width + duration;
3260
3244
 
3261
3245
  const percent = visible ? (width + marginLeft * (right ? -1 : 1)) / width * 100 : 0;
3262
- const offsetEl = offset(el);
3263
- const useClipPath = right ?
3264
- offsetEl.right < scrollElement.clientWidth :
3265
- Math.round(offsetEl.left) > 0;
3266
3246
 
3267
3247
  css(el, {
3268
- clipPath: useClipPath ?
3269
- right ? "polygon(0 0," +
3248
+ clipPath: right ? "polygon(0 0," +
3270
3249
  percent + "% 0," + percent + "% 100%,0 100%)" : "polygon(" + (
3271
- 100 - percent) + "% 0,100% 0,100% 100%," + (100 - percent) + "% 100%)" :
3272
- '',
3250
+ 100 - percent) + "% 0,100% 0,100% 100%," + (100 - percent) + "% 100%)",
3273
3251
  marginLeft: (100 - percent) * (right ? 1 : -1) / 100 * width });
3274
3252
 
3275
3253
 
@@ -3278,7 +3256,7 @@
3278
3256
  Transition.start(
3279
3257
  el,
3280
3258
  {
3281
- clipPath: useClipPath ? "polygon(0 0,100% 0,100% 100%,0 100%)" : '',
3259
+ clipPath: "polygon(0 0,100% 0,100% 100%,0 100%)",
3282
3260
  marginLeft: 0 },
3283
3261
 
3284
3262
  duration * (1 - percent / 100),
@@ -3287,11 +3265,9 @@
3287
3265
  Transition.start(
3288
3266
  el,
3289
3267
  {
3290
- clipPath: useClipPath ?
3291
- right ? "polygon(0 0,0 0,0 100%,0 100%)" : "polygon(100% 0,100% 0,100% 100%,100% 100%)" :
3268
+ clipPath: right ? "polygon(0 0,0 0,0 100%,0 100%)" : "polygon(100% 0,100% 0,100% 100%,100% 100%)",
3292
3269
 
3293
3270
 
3294
- '',
3295
3271
  marginLeft: (right ? 1 : -1) * width },
3296
3272
 
3297
3273
  duration * (percent / 100),
@@ -3687,23 +3663,38 @@
3687
3663
  offset = offset.reverse();
3688
3664
  }
3689
3665
 
3666
+ const [scrollElement] = scrollParents(element, /auto|scroll/);
3667
+ const { scrollTop, scrollLeft } = scrollElement;
3668
+
3690
3669
  // Ensure none positioned element does not generate scrollbars
3691
3670
  const elDim = dimensions$1(element);
3692
3671
  css(element, { top: -elDim.height, left: -elDim.width });
3693
3672
 
3694
- positionAt(element, target, {
3673
+ const args = [
3674
+ element,
3675
+ target,
3676
+ {
3695
3677
  attach,
3696
3678
  offset,
3697
3679
  boundary,
3698
3680
  flip: this.flip,
3699
- viewportOffset: this.getViewportOffset(element) });
3681
+ viewportOffset: this.getViewportOffset(element) }];
3682
+
3683
+
3684
+
3685
+ trigger(element, 'beforeposition', args);
3686
+
3687
+ positionAt(...args);
3700
3688
 
3689
+ // Restore scroll position
3690
+ scrollElement.scrollTop = scrollTop;
3691
+ scrollElement.scrollLeft = scrollLeft;
3701
3692
  },
3702
3693
 
3703
3694
  getPositionOffset(element) {
3704
3695
  return (
3705
3696
  toPx(
3706
- this.offset === false ? getCssVar('position-offset', element) : this.offset,
3697
+ this.offset === false ? css(element, '--uk-position-offset') : this.offset,
3707
3698
  this.axis === 'x' ? 'width' : 'height',
3708
3699
  element) * (
3709
3700
  includes(['left', 'top'], this.dir) ? -1 : 1));
@@ -3714,74 +3705,54 @@
3714
3705
  return includes(['center', 'justify', 'stretch'], this.align) ?
3715
3706
  0 :
3716
3707
  toPx(
3717
- getCssVar('position-shift-offset', element),
3708
+ css(element, '--uk-position-shift-offset'),
3718
3709
  this.axis === 'y' ? 'width' : 'height',
3719
3710
  element) * (
3720
3711
  includes(['left', 'top'], this.align) ? 1 : -1);
3721
3712
  },
3722
3713
 
3723
3714
  getViewportOffset(element) {
3724
- return toPx(getCssVar('position-viewport-offset', element));
3715
+ return toPx(css(element, '--uk-position-viewport-offset'));
3725
3716
  } } };
3726
3717
 
3727
- let active$1;
3718
+ const active$1 = [];
3728
3719
 
3729
- var drop = {
3730
- mixins: [Container, Lazyload, Position, Togglable],
3731
-
3732
- args: 'pos',
3720
+ var Modal = {
3721
+ mixins: [Class, Container, Togglable],
3733
3722
 
3734
3723
  props: {
3735
- mode: 'list',
3736
- toggle: Boolean,
3737
- boundary: Boolean,
3738
- boundaryAlign: Boolean,
3739
- delayShow: Number,
3740
- delayHide: Number,
3741
- display: String,
3742
- clsDrop: String,
3743
- animateOut: Boolean },
3724
+ selPanel: String,
3725
+ selClose: String,
3726
+ escClose: Boolean,
3727
+ bgClose: Boolean,
3728
+ stack: Boolean },
3744
3729
 
3745
3730
 
3746
3731
  data: {
3747
- mode: ['click', 'hover'],
3748
- toggle: '- *',
3749
- boundary: true,
3750
- boundaryAlign: false,
3751
- delayShow: 0,
3752
- delayHide: 800,
3753
- display: null,
3754
- clsDrop: false,
3755
- animation: ['uk-animation-fade'],
3756
3732
  cls: 'uk-open',
3757
- container: false,
3758
- animateOut: false },
3733
+ escClose: true,
3734
+ bgClose: true,
3735
+ overlay: true,
3736
+ stack: false },
3759
3737
 
3760
3738
 
3761
- created() {
3762
- this.tracker = new MouseTracker();
3763
- },
3739
+ computed: {
3740
+ panel(_ref, $el) {let { selPanel } = _ref;
3741
+ return $(selPanel, $el);
3742
+ },
3764
3743
 
3765
- beforeConnect() {
3766
- this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
3767
- },
3744
+ transitionElement() {
3745
+ return this.panel;
3746
+ },
3768
3747
 
3769
- connected() {
3770
- addClass(this.$el, this.clsDrop);
3748
+ bgClose(_ref2) {let { bgClose } = _ref2;
3749
+ return bgClose && this.panel;
3750
+ } },
3771
3751
 
3772
- if (this.toggle && !this.target) {
3773
- this.target = this.$create('toggle', query(this.toggle, this.$el), {
3774
- target: this.$el,
3775
- mode: this.mode }).
3776
- $el;
3777
- attr(this.target, 'aria-haspopup', true);
3778
- this.lazyload(this.target);
3779
- }
3780
- },
3781
3752
 
3782
- disconnected() {
3783
- if (this.isActive()) {
3784
- active$1 = null;
3753
+ beforeDisconnect() {
3754
+ if (includes(active$1, this)) {
3755
+ this.toggleElement(this.$el, false, false);
3785
3756
  }
3786
3757
  },
3787
3758
 
@@ -3790,767 +3761,825 @@
3790
3761
  name: 'click',
3791
3762
 
3792
3763
  delegate() {
3793
- return "." + this.clsDrop + "-close";
3764
+ return this.selClose;
3794
3765
  },
3795
3766
 
3796
3767
  handler(e) {
3797
3768
  e.preventDefault();
3798
- this.hide(false);
3769
+ this.hide();
3799
3770
  } },
3800
3771
 
3801
3772
 
3802
3773
  {
3803
- name: 'click',
3774
+ name: 'toggle',
3804
3775
 
3805
- delegate() {
3806
- return 'a[href^="#"]';
3807
- },
3776
+ self: true,
3808
3777
 
3809
- handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
3810
- if (!defaultPrevented && hash && !within(hash, this.$el)) {
3811
- this.hide(false);
3778
+ handler(e) {
3779
+ if (e.defaultPrevented) {
3780
+ return;
3812
3781
  }
3813
- } },
3814
-
3815
3782
 
3816
- {
3817
- name: 'beforescroll',
3783
+ e.preventDefault();
3818
3784
 
3819
- handler() {
3820
- this.hide(false);
3785
+ if (this.isToggled() === includes(active$1, this)) {
3786
+ this.toggle();
3787
+ }
3821
3788
  } },
3822
3789
 
3823
3790
 
3824
3791
  {
3825
- name: 'toggle',
3792
+ name: 'beforeshow',
3826
3793
 
3827
3794
  self: true,
3828
3795
 
3829
- handler(e, toggle) {
3830
- e.preventDefault();
3796
+ handler(e) {
3797
+ if (includes(active$1, this)) {
3798
+ return false;
3799
+ }
3831
3800
 
3832
- if (this.isToggled()) {
3833
- this.hide(false);
3801
+ if (!this.stack && active$1.length) {
3802
+ Promise.all(active$1.map((modal) => modal.hide())).then(this.show);
3803
+ e.preventDefault();
3834
3804
  } else {
3835
- this.show(toggle == null ? void 0 : toggle.$el, false);
3805
+ active$1.push(this);
3836
3806
  }
3837
3807
  } },
3838
3808
 
3839
3809
 
3840
3810
  {
3841
- name: 'toggleshow',
3811
+ name: 'show',
3842
3812
 
3843
3813
  self: true,
3844
3814
 
3845
- handler(e, toggle) {
3846
- e.preventDefault();
3847
- this.show(toggle == null ? void 0 : toggle.$el);
3848
- } },
3849
-
3850
-
3851
- {
3852
- name: 'togglehide',
3815
+ handler() {
3816
+ once(
3817
+ this.$el,
3818
+ 'hide',
3819
+ on(document, 'focusin', (e) => {
3820
+ if (last(active$1) === this && !within(e.target, this.$el)) {
3821
+ this.$el.focus();
3822
+ }
3823
+ }));
3853
3824
 
3854
- self: true,
3855
3825
 
3856
- handler(e) {
3857
- e.preventDefault();
3858
- if (!matches(this.$el, ':focus,:hover')) {
3859
- this.hide();
3826
+ if (this.overlay) {
3827
+ once(this.$el, 'hide', preventOverscroll(this.$el));
3828
+ once(this.$el, 'hide', preventBackgroundScroll());
3860
3829
  }
3861
- } },
3862
3830
 
3831
+ if (this.stack) {
3832
+ css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active$1.length);
3833
+ }
3863
3834
 
3864
- {
3865
- name: pointerEnter + " focusin",
3835
+ addClass(document.documentElement, this.clsPage);
3866
3836
 
3867
- filter() {
3868
- return includes(this.mode, 'hover');
3869
- },
3837
+ if (this.bgClose) {
3838
+ once(
3839
+ this.$el,
3840
+ 'hide',
3841
+ on(document, pointerDown$1, (_ref3) => {let { target } = _ref3;
3842
+ if (
3843
+ last(active$1) !== this ||
3844
+ this.overlay && !within(target, this.$el) ||
3845
+ within(target, this.panel))
3846
+ {
3847
+ return;
3848
+ }
3870
3849
 
3871
- handler(e) {
3872
- if (!isTouch(e)) {
3873
- this.clearTimers();
3874
- }
3875
- } },
3850
+ once(
3851
+ document,
3852
+ pointerUp$1 + " " + pointerCancel + " scroll",
3853
+ (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
3854
+ if (
3855
+ !defaultPrevented &&
3856
+ type === pointerUp$1 &&
3857
+ target === newTarget)
3858
+ {
3859
+ this.hide();
3860
+ }
3861
+ },
3862
+ true);
3876
3863
 
3864
+ }),
3865
+ { self: true });
3877
3866
 
3878
- {
3879
- name: pointerLeave + " focusout",
3867
+ }
3880
3868
 
3881
- filter() {
3882
- return includes(this.mode, 'hover');
3883
- },
3869
+ if (this.escClose) {
3870
+ once(
3871
+ this.$el,
3872
+ 'hide',
3873
+ on(document, 'keydown', (e) => {
3874
+ if (e.keyCode === 27 && last(active$1) === this) {
3875
+ this.hide();
3876
+ }
3877
+ }),
3878
+ { self: true });
3884
3879
 
3885
- handler(e) {
3886
- if (!isTouch(e) && e.relatedTarget) {
3887
- this.hide();
3888
3880
  }
3889
3881
  } },
3890
3882
 
3891
3883
 
3892
3884
  {
3893
- name: 'toggled',
3885
+ name: 'shown',
3894
3886
 
3895
3887
  self: true,
3896
3888
 
3897
- handler(e, toggled) {
3898
- if (!toggled) {
3899
- return;
3889
+ handler() {
3890
+ if (!isFocusable(this.$el)) {
3891
+ attr(this.$el, 'tabindex', '-1');
3900
3892
  }
3901
3893
 
3902
- this.clearTimers();
3903
- this.position();
3894
+ if (!$(':focus', this.$el)) {
3895
+ this.$el.focus();
3896
+ }
3904
3897
  } },
3905
3898
 
3906
3899
 
3907
3900
  {
3908
- name: 'show',
3901
+ name: 'hidden',
3909
3902
 
3910
3903
  self: true,
3911
3904
 
3912
3905
  handler() {
3913
- active$1 = this;
3906
+ if (includes(active$1, this)) {
3907
+ active$1.splice(active$1.indexOf(this), 1);
3908
+ }
3914
3909
 
3915
- this.tracker.init();
3910
+ if (!active$1.length) {
3911
+ css(document.body, 'overflowY', '');
3912
+ }
3916
3913
 
3917
- for (const handler of [
3918
- on(
3919
- document,
3920
- pointerDown,
3921
- (_ref2) => {let { target } = _ref2;return (
3922
- !within(target, this.$el) &&
3923
- once(
3924
- document,
3925
- pointerUp + " " + pointerCancel + " scroll",
3926
- (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
3927
- if (
3928
- !defaultPrevented &&
3929
- type === pointerUp &&
3930
- target === newTarget &&
3931
- !(this.target && within(target, this.target)))
3932
- {
3933
- this.hide(false);
3934
- }
3935
- },
3936
- true));}),
3914
+ css(this.$el, 'zIndex', '');
3937
3915
 
3916
+ if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
3917
+ removeClass(document.documentElement, this.clsPage);
3918
+ }
3919
+ } }],
3938
3920
 
3939
3921
 
3940
- on(document, 'keydown', (e) => {
3941
- if (e.keyCode === 27) {
3942
- this.hide(false);
3943
- }
3944
- }),
3945
3922
 
3946
- ...(this.display === 'static' && this.align !== 'stretch' ?
3947
- [] :
3948
- (() => {
3949
- const handler = () => this.$emit();
3950
- return [
3951
- on(window, 'resize', handler),
3952
- on(document, 'scroll', handler, true),
3953
- (() => {
3954
- const observer = observeResize(
3955
- scrollParents(this.$el),
3956
- handler);
3923
+ methods: {
3924
+ toggle() {
3925
+ return this.isToggled() ? this.hide() : this.show();
3926
+ },
3957
3927
 
3958
- return () => observer.disconnect();
3959
- })()];
3928
+ show() {
3929
+ if (this.container && parent(this.$el) !== this.container) {
3930
+ append(this.container, this.$el);
3931
+ return new Promise((resolve) =>
3932
+ requestAnimationFrame(() => this.show().then(resolve)));
3960
3933
 
3961
- })())])
3962
- {
3963
- once(this.$el, 'hide', handler, { self: true });
3964
3934
  }
3965
- } },
3966
-
3967
-
3968
- {
3969
- name: 'beforehide',
3970
3935
 
3971
- self: true,
3936
+ return this.toggleElement(this.$el, true, animate(this));
3937
+ },
3972
3938
 
3973
- handler() {
3974
- this.clearTimers();
3975
- } },
3939
+ hide() {
3940
+ return this.toggleElement(this.$el, false, animate(this));
3941
+ } } };
3976
3942
 
3977
3943
 
3978
- {
3979
- name: 'hide',
3980
3944
 
3981
- handler(_ref4) {let { target } = _ref4;
3982
- if (this.$el !== target) {
3983
- active$1 =
3984
- active$1 === null && within(target, this.$el) && this.isToggled() ?
3985
- this :
3986
- active$1;
3987
- return;
3988
- }
3945
+ function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
3946
+ return (el, show) =>
3947
+ new Promise((resolve, reject) =>
3948
+ once(el, 'show hide', () => {
3949
+ el._reject == null ? void 0 : el._reject();
3950
+ el._reject = reject;
3989
3951
 
3990
- active$1 = this.isActive() ? null : active$1;
3991
- this.tracker.cancel();
3992
- } }],
3952
+ _toggle(el, show);
3993
3953
 
3954
+ const off = once(
3955
+ transitionElement,
3956
+ 'transitionstart',
3957
+ () => {
3958
+ once(transitionElement, 'transitionend transitioncancel', resolve, {
3959
+ self: true });
3994
3960
 
3961
+ clearTimeout(timer);
3962
+ },
3963
+ { self: true });
3995
3964
 
3996
- update: {
3997
- write() {
3998
- if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
3999
- this.position();
4000
- }
4001
- } },
4002
3965
 
3966
+ const timer = setTimeout(() => {
3967
+ off();
3968
+ resolve();
3969
+ }, toMs(css(transitionElement, 'transitionDuration')));
3970
+ })).
3971
+ then(() => delete el._reject);
3972
+ }
4003
3973
 
4004
- methods: {
4005
- show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
4006
- if (this.isToggled() && target && this.target && target !== this.target) {
4007
- this.hide(false, false);
4008
- }
3974
+ function toMs(time) {
3975
+ return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
3976
+ }
4009
3977
 
4010
- this.target = target;
3978
+ function preventOverscroll(el) {
3979
+ if (CSS.supports('overscroll-behavior', 'contain')) {
3980
+ const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
3981
+ css(elements, 'overscrollBehavior', 'contain');
3982
+ return () => css(elements, 'overscrollBehavior', '');
3983
+ }
4011
3984
 
4012
- this.clearTimers();
3985
+ let startClientY;
4013
3986
 
4014
- if (this.isActive()) {
4015
- return;
4016
- }
3987
+ const events = [
3988
+ on(
3989
+ el,
3990
+ 'touchstart',
3991
+ (_ref6) => {let { targetTouches } = _ref6;
3992
+ if (targetTouches.length === 1) {
3993
+ startClientY = targetTouches[0].clientY;
3994
+ }
3995
+ },
3996
+ { passive: true }),
4017
3997
 
4018
- if (active$1) {
4019
- if (delay && active$1.isDelaying) {
4020
- this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
4021
- return;
4022
- }
4023
3998
 
4024
- let prev;
4025
- while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
4026
- prev = active$1;
4027
- active$1.hide(false, false);
4028
- }
4029
- }
3999
+ on(
4000
+ el,
4001
+ 'touchmove',
4002
+ (e) => {
4003
+ if (e.targetTouches.length !== 1) {
4004
+ return;
4005
+ }
4030
4006
 
4031
- if (this.container && parent(this.$el) !== this.container) {
4032
- append(this.container, this.$el);
4033
- }
4007
+ let [scrollParent] = scrollParents(e.target, /auto|scroll/);
4008
+ if (!within(scrollParent, el)) {
4009
+ scrollParent = el;
4010
+ }
4034
4011
 
4035
- this.showTimer = setTimeout(
4036
- () => this.toggleElement(this.$el, true),
4037
- delay && this.delayShow || 0);
4012
+ const clientY = e.targetTouches[0].clientY - startClientY;
4013
+ const { scrollTop, scrollHeight, clientHeight } = scrollParent;
4038
4014
 
4039
- },
4015
+ if (
4016
+ clientHeight >= scrollHeight ||
4017
+ scrollTop === 0 && clientY > 0 ||
4018
+ scrollHeight - scrollTop <= clientHeight && clientY < 0)
4019
+ {
4020
+ e.cancelable && e.preventDefault();
4021
+ }
4022
+ },
4023
+ { passive: false })];
4040
4024
 
4041
- hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
4042
- const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
4043
4025
 
4044
- this.clearTimers();
4045
4026
 
4046
- this.isDelaying = getPositionedElements(this.$el).some((el) =>
4047
- this.tracker.movesTo(el));
4027
+ return () => events.forEach((fn) => fn());
4028
+ }
4048
4029
 
4030
+ function preventBackgroundScroll() {
4031
+ const { body, documentElement } = document;
4032
+ css(body, {
4033
+ overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
4034
+ touchAction: 'none' });
4049
4035
 
4050
- if (delay && this.isDelaying) {
4051
- this.hideTimer = setTimeout(this.hide, 50);
4052
- } else if (delay && this.delayHide) {
4053
- this.hideTimer = setTimeout(hide, this.delayHide);
4054
- } else {
4055
- hide();
4056
- }
4057
- },
4036
+ css(documentElement, 'overflowY', 'hidden');
4037
+ return () => {
4038
+ css(documentElement, 'overflowY', '');
4039
+ css(body, { overflowY: '', touchAction: '' });
4040
+ };
4041
+ }
4058
4042
 
4059
- clearTimers() {
4060
- clearTimeout(this.showTimer);
4061
- clearTimeout(this.hideTimer);
4062
- this.showTimer = null;
4063
- this.hideTimer = null;
4064
- this.isDelaying = false;
4065
- },
4043
+ function filterChildren(el, fn) {
4044
+ const children = [];
4045
+ apply(el, (node) => {
4046
+ if (fn(node)) {
4047
+ children.push(node);
4048
+ }
4049
+ });
4050
+ return children;
4051
+ }
4066
4052
 
4067
- isActive() {
4068
- return active$1 === this;
4069
- },
4053
+ let active;
4070
4054
 
4071
- position() {
4072
- removeClass(this.$el, this.clsDrop + "-stack");
4073
- toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
4074
- toggleClass(this.$el, this.clsDrop + "-stretch", this.align === 'stretch');
4055
+ var drop = {
4056
+ mixins: [Container, Lazyload, Position, Togglable],
4075
4057
 
4076
- const boundary = query(this.boundary, this.$el);
4077
- const target = boundary && this.boundaryAlign ? boundary : this.target;
4078
- const [scrollParent] = scrollParents(
4079
- boundary && this.boundaryAlign ? boundary : this.$el);
4058
+ args: 'pos',
4080
4059
 
4081
- const scrollParentOffset = offset(scrollParent);
4082
- const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
4083
- const viewportOffset = this.getViewportOffset(this.$el);
4060
+ props: {
4061
+ mode: 'list',
4062
+ toggle: Boolean,
4063
+ boundary: Boolean,
4064
+ boundaryAlign: Boolean,
4065
+ delayShow: Number,
4066
+ delayHide: Number,
4067
+ display: String,
4068
+ clsDrop: String,
4069
+ animateOut: Boolean,
4070
+ bgScroll: Boolean },
4084
4071
 
4085
- css(this.$el, 'maxWidth', '');
4086
- const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
4087
4072
 
4088
- if (this.align === 'justify') {
4089
- const prop = this.axis === 'y' ? 'width' : 'height';
4090
- css(
4091
- this.$el,
4092
- prop,
4093
- Math.min(
4094
- (boundary ? boundaryOffset : offset(this.target))[prop],
4095
- scrollParentOffset[prop] - 2 * viewportOffset));
4073
+ data: {
4074
+ mode: ['click', 'hover'],
4075
+ toggle: '- *',
4076
+ boundary: true,
4077
+ boundaryAlign: false,
4078
+ delayShow: 0,
4079
+ delayHide: 800,
4080
+ display: null,
4081
+ clsDrop: false,
4082
+ animation: ['uk-animation-fade'],
4083
+ cls: 'uk-open',
4084
+ container: false,
4085
+ animateOut: false,
4086
+ bgScroll: true },
4096
4087
 
4097
4088
 
4098
- } else if (this.align === 'stretch') {
4099
- this.flip = this.axis === 'y' ? 'x' : 'y';
4100
- this.display = 'static';
4089
+ created() {
4090
+ this.tracker = new MouseTracker();
4091
+ },
4101
4092
 
4102
- const viewport = offsetViewport(scrollParent);
4103
- const targetDim = offset(target);
4104
- const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
4093
+ beforeConnect() {
4094
+ this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
4095
+ },
4105
4096
 
4106
- css(this.$el, {
4107
- width:
4108
- this.axis === 'y' ?
4109
- viewport.width :
4110
- (this.dir === 'left' ?
4111
- targetDim.left - viewport.left :
4112
- viewport.right - targetDim.right) - elOffset,
4113
- height:
4114
- this.axis === 'x' ?
4115
- viewport.height :
4116
- (this.dir === 'top' ?
4117
- targetDim.top - viewport.top :
4118
- viewport.bottom - targetDim.bottom) - elOffset });
4097
+ connected() {
4098
+ addClass(this.$el, this.clsDrop);
4119
4099
 
4120
- } else if (this.$el.offsetWidth > maxWidth) {
4121
- addClass(this.$el, this.clsDrop + "-stack");
4122
- }
4100
+ if (this.toggle && !this.target) {
4101
+ this.target = this.$create('toggle', query(this.toggle, this.$el), {
4102
+ target: this.$el,
4103
+ mode: this.mode }).
4104
+ $el;
4105
+ attr(this.target, 'aria-haspopup', true);
4106
+ this.lazyload(this.target);
4107
+ }
4108
+ },
4123
4109
 
4124
- css(this.$el, 'maxWidth', maxWidth);
4110
+ disconnected() {
4111
+ if (this.isActive()) {
4112
+ active = null;
4113
+ }
4114
+ },
4125
4115
 
4126
- this.positionAt(this.$el, target, boundary);
4127
- } } };
4116
+ events: [
4117
+ {
4118
+ name: 'click',
4128
4119
 
4120
+ delegate() {
4121
+ return "." + this.clsDrop + "-close";
4122
+ },
4129
4123
 
4124
+ handler(e) {
4125
+ e.preventDefault();
4126
+ this.hide(false);
4127
+ } },
4130
4128
 
4131
- function getPositionedElements(el) {
4132
- const result = [];
4133
- apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
4134
- return result;
4135
- }
4136
4129
 
4137
- var formCustom = {
4138
- mixins: [Class],
4130
+ {
4131
+ name: 'click',
4139
4132
 
4140
- args: 'target',
4133
+ delegate() {
4134
+ return 'a[href^="#"]';
4135
+ },
4141
4136
 
4142
- props: {
4143
- target: Boolean },
4137
+ handler(_ref) {let { defaultPrevented, current: { hash } } = _ref;
4138
+ if (!defaultPrevented && hash && !within(hash, this.$el)) {
4139
+ this.hide(false);
4140
+ }
4141
+ } },
4144
4142
 
4145
4143
 
4146
- data: {
4147
- target: false },
4144
+ {
4145
+ name: 'beforescroll',
4148
4146
 
4147
+ handler() {
4148
+ this.hide(false);
4149
+ } },
4149
4150
 
4150
- computed: {
4151
- input(_, $el) {
4152
- return $(selInput, $el);
4153
- },
4154
4151
 
4155
- state() {
4156
- return this.input.nextElementSibling;
4157
- },
4152
+ {
4153
+ name: 'toggle',
4158
4154
 
4159
- target(_ref, $el) {let { target } = _ref;
4160
- return (
4161
- target && (
4162
- target === true && parent(this.input) === $el && this.input.nextElementSibling ||
4163
- $(target, $el)));
4155
+ self: true,
4156
+
4157
+ handler(e, toggle) {
4158
+ e.preventDefault();
4164
4159
 
4160
+ if (this.isToggled()) {
4161
+ this.hide(false);
4162
+ } else {
4163
+ this.show(toggle == null ? void 0 : toggle.$el, false);
4164
+ }
4165
4165
  } },
4166
4166
 
4167
4167
 
4168
- update() {var _input$files;
4169
- const { target, input } = this;
4168
+ {
4169
+ name: 'toggleshow',
4170
4170
 
4171
- if (!target) {
4172
- return;
4173
- }
4171
+ self: true,
4174
4172
 
4175
- let option;
4176
- const prop = isInput(target) ? 'value' : 'textContent';
4177
- const prev = target[prop];
4178
- const value = (_input$files = input.files) != null && _input$files[0] ?
4179
- input.files[0].name :
4180
- matches(input, 'select') && (
4181
- option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
4182
- ? option.textContent :
4183
- input.value;
4173
+ handler(e, toggle) {
4174
+ e.preventDefault();
4175
+ this.show(toggle == null ? void 0 : toggle.$el);
4176
+ } },
4184
4177
 
4185
- if (prev !== value) {
4186
- target[prop] = value;
4187
- }
4188
- },
4189
4178
 
4190
- events: [
4191
4179
  {
4192
- name: 'change',
4180
+ name: 'togglehide',
4193
4181
 
4194
- handler() {
4195
- this.$emit();
4182
+ self: true,
4183
+
4184
+ handler(e) {
4185
+ e.preventDefault();
4186
+ if (!matches(this.$el, ':focus,:hover')) {
4187
+ this.hide();
4188
+ }
4196
4189
  } },
4197
4190
 
4198
4191
 
4199
4192
  {
4200
- name: 'reset',
4193
+ name: pointerEnter + " focusin",
4201
4194
 
4202
- el() {
4203
- return closest(this.$el, 'form');
4195
+ filter() {
4196
+ return includes(this.mode, 'hover');
4204
4197
  },
4205
4198
 
4206
- handler() {
4207
- this.$emit();
4208
- } }] };
4199
+ handler(e) {
4200
+ if (!isTouch(e)) {
4201
+ this.clearTimers();
4202
+ }
4203
+ } },
4209
4204
 
4210
- var Margin = {
4211
- mixins: [Resize],
4212
4205
 
4213
- props: {
4214
- margin: String,
4215
- firstColumn: Boolean },
4206
+ {
4207
+ name: pointerLeave + " focusout",
4216
4208
 
4209
+ filter() {
4210
+ return includes(this.mode, 'hover');
4211
+ },
4217
4212
 
4218
- data: {
4219
- margin: 'uk-margin-small-top',
4220
- firstColumn: 'uk-first-column' },
4213
+ handler(e) {
4214
+ if (!isTouch(e) && e.relatedTarget) {
4215
+ this.hide();
4216
+ }
4217
+ } },
4221
4218
 
4222
4219
 
4223
- resizeTargets() {
4224
- return [this.$el, ...toArray(this.$el.children)];
4225
- },
4220
+ {
4221
+ name: 'toggled',
4226
4222
 
4227
- connected() {
4228
- this.registerObserver(
4229
- observeMutation(this.$el, () => this.$reset(), {
4230
- childList: true }));
4223
+ self: true,
4231
4224
 
4225
+ handler(e, toggled) {
4226
+ if (!toggled) {
4227
+ return;
4228
+ }
4232
4229
 
4233
- },
4230
+ this.clearTimers();
4231
+ this.position();
4232
+ } },
4234
4233
 
4235
- update: {
4236
- read() {
4237
- const rows = getRows(this.$el.children);
4238
4234
 
4239
- return {
4240
- rows,
4241
- columns: getColumns(rows) };
4235
+ {
4236
+ name: 'show',
4242
4237
 
4243
- },
4238
+ self: true,
4244
4239
 
4245
- write(_ref) {let { columns, rows } = _ref;
4246
- for (const row of rows) {
4247
- for (const column of row) {
4248
- toggleClass(column, this.margin, rows[0] !== row);
4249
- toggleClass(column, this.firstColumn, columns[0].includes(column));
4250
- }
4251
- }
4252
- },
4240
+ handler() {
4241
+ active = this;
4253
4242
 
4254
- events: ['resize'] } };
4243
+ this.tracker.init();
4255
4244
 
4245
+ for (const handler of [
4246
+ on(
4247
+ document,
4248
+ pointerDown$1,
4249
+ (_ref2) => {let { target } = _ref2;return (
4250
+ !within(target, this.$el) &&
4251
+ once(
4252
+ document,
4253
+ pointerUp$1 + " " + pointerCancel + " scroll",
4254
+ (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
4255
+ if (
4256
+ !defaultPrevented &&
4257
+ type === pointerUp$1 &&
4258
+ target === newTarget &&
4259
+ !(this.target && within(target, this.target)))
4260
+ {
4261
+ this.hide(false);
4262
+ }
4263
+ },
4264
+ true));}),
4256
4265
 
4257
4266
 
4258
- function getRows(items) {
4259
- return sortBy(items, 'top', 'bottom');
4260
- }
4261
4267
 
4262
- function getColumns(rows) {
4263
- const columns = [];
4268
+ on(document, 'keydown', (e) => {
4269
+ if (e.keyCode === 27) {
4270
+ this.hide(false);
4271
+ }
4272
+ }),
4264
4273
 
4265
- for (const row of rows) {
4266
- const sorted = sortBy(row, 'left', 'right');
4267
- for (let j = 0; j < sorted.length; j++) {
4268
- columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
4269
- }
4270
- }
4274
+ ...(this.bgScroll ?
4275
+ [] :
4276
+ [preventOverscroll(this.$el), preventBackgroundScroll()]),
4271
4277
 
4272
- return isRtl ? columns.reverse() : columns;
4273
- }
4278
+ ...(this.display === 'static' && this.align !== 'stretch' ?
4279
+ [] :
4280
+ (() => {
4281
+ const handler = () => this.$emit();
4282
+ return [
4283
+ on(window, 'resize', handler),
4284
+ on(document, 'scroll', handler, true),
4285
+ (() => {
4286
+ const observer = observeResize(
4287
+ scrollParents(this.$el),
4288
+ handler);
4274
4289
 
4275
- function sortBy(items, startProp, endProp) {
4276
- const sorted = [[]];
4290
+ return () => observer.disconnect();
4291
+ })()];
4277
4292
 
4278
- for (const el of items) {
4279
- if (!isVisible(el)) {
4280
- continue;
4281
- }
4293
+ })())])
4294
+ {
4295
+ once(this.$el, 'hide', handler, { self: true });
4296
+ }
4297
+ } },
4282
4298
 
4283
- let dim = getOffset(el);
4284
4299
 
4285
- for (let i = sorted.length - 1; i >= 0; i--) {
4286
- const current = sorted[i];
4300
+ {
4301
+ name: 'beforehide',
4287
4302
 
4288
- if (!current[0]) {
4289
- current.push(el);
4290
- break;
4291
- }
4303
+ self: true,
4292
4304
 
4293
- let startDim;
4294
- if (current[0].offsetParent === el.offsetParent) {
4295
- startDim = getOffset(current[0]);
4296
- } else {
4297
- dim = getOffset(el, true);
4298
- startDim = getOffset(current[0], true);
4299
- }
4305
+ handler() {
4306
+ this.clearTimers();
4307
+ } },
4300
4308
 
4301
- if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
4302
- sorted.push([el]);
4303
- break;
4304
- }
4305
4309
 
4306
- if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
4307
- current.push(el);
4308
- break;
4309
- }
4310
+ {
4311
+ name: 'hide',
4310
4312
 
4311
- if (i === 0) {
4312
- sorted.unshift([el]);
4313
- break;
4313
+ handler(_ref4) {let { target } = _ref4;
4314
+ if (this.$el !== target) {
4315
+ active =
4316
+ active === null && within(target, this.$el) && this.isToggled() ?
4317
+ this :
4318
+ active;
4319
+ return;
4314
4320
  }
4315
- }
4316
- }
4317
4321
 
4318
- return sorted;
4319
- }
4322
+ active = this.isActive() ? null : active;
4323
+ this.tracker.cancel();
4324
+ } }],
4320
4325
 
4321
- function getOffset(element, offset) {if (offset === void 0) {offset = false;}
4322
- let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
4323
4326
 
4324
- if (offset) {
4325
- [offsetTop, offsetLeft] = offsetPosition(element);
4326
- }
4327
4327
 
4328
- return {
4329
- top: offsetTop,
4330
- left: offsetLeft,
4331
- bottom: offsetTop + offsetHeight,
4332
- right: offsetLeft + offsetWidth };
4328
+ update: {
4329
+ write() {
4330
+ if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
4331
+ this.position();
4332
+ }
4333
+ } },
4333
4334
 
4334
- }
4335
4335
 
4336
- var Scroll = {
4337
- connected() {
4338
- registerScrollListener(this._uid, () => this.$emit('scroll'));
4339
- },
4336
+ methods: {
4337
+ show(target, delay) {if (target === void 0) {target = this.target;}if (delay === void 0) {delay = true;}
4338
+ if (this.isToggled() && target && this.target && target !== this.target) {
4339
+ this.hide(false, false);
4340
+ }
4340
4341
 
4341
- disconnected() {
4342
- unregisterScrollListener(this._uid);
4343
- } };
4342
+ this.target = target;
4344
4343
 
4344
+ this.clearTimers();
4345
4345
 
4346
- const scrollListeners = new Map();
4347
- let unbindScrollListener;
4348
- function registerScrollListener(id, listener) {
4349
- unbindScrollListener =
4350
- unbindScrollListener ||
4351
- on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
4352
- passive: true,
4353
- capture: true });
4346
+ if (this.isActive()) {
4347
+ return;
4348
+ }
4354
4349
 
4350
+ if (active) {
4351
+ if (delay && active.isDelaying) {
4352
+ this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
4353
+ return;
4354
+ }
4355
4355
 
4356
- scrollListeners.set(id, listener);
4357
- }
4356
+ let prev;
4357
+ while (active && prev !== active && !within(this.$el, active.$el)) {
4358
+ prev = active;
4359
+ active.hide(false, false);
4360
+ }
4361
+ }
4358
4362
 
4359
- function unregisterScrollListener(id) {
4360
- scrollListeners.delete(id);
4361
- if (unbindScrollListener && !scrollListeners.size) {
4362
- unbindScrollListener();
4363
- unbindScrollListener = null;
4364
- }
4365
- }
4363
+ if (this.container && parent(this.$el) !== this.container) {
4364
+ append(this.container, this.$el);
4365
+ }
4366
4366
 
4367
- var grid = {
4368
- extends: Margin,
4367
+ this.showTimer = setTimeout(
4368
+ () => this.toggleElement(this.$el, true),
4369
+ delay && this.delayShow || 0);
4369
4370
 
4370
- mixins: [Class, Scroll],
4371
+ },
4371
4372
 
4372
- name: 'grid',
4373
+ hide(delay, animate) {if (delay === void 0) {delay = true;}if (animate === void 0) {animate = true;}
4374
+ const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
4373
4375
 
4374
- props: {
4375
- masonry: Boolean,
4376
- parallax: Number },
4376
+ this.clearTimers();
4377
4377
 
4378
+ this.isDelaying = getPositionedElements(this.$el).some((el) =>
4379
+ this.tracker.movesTo(el));
4378
4380
 
4379
- data: {
4380
- margin: 'uk-grid-margin',
4381
- clsStack: 'uk-grid-stack',
4382
- masonry: false,
4383
- parallax: 0 },
4384
4381
 
4382
+ if (delay && this.isDelaying) {
4383
+ this.hideTimer = setTimeout(this.hide, 50);
4384
+ } else if (delay && this.delayHide) {
4385
+ this.hideTimer = setTimeout(hide, this.delayHide);
4386
+ } else {
4387
+ hide();
4388
+ }
4389
+ },
4385
4390
 
4386
- connected() {
4387
- this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
4388
- },
4391
+ clearTimers() {
4392
+ clearTimeout(this.showTimer);
4393
+ clearTimeout(this.hideTimer);
4394
+ this.showTimer = null;
4395
+ this.hideTimer = null;
4396
+ this.isDelaying = false;
4397
+ },
4389
4398
 
4390
- update: [
4391
- {
4392
- write(_ref) {let { columns } = _ref;
4393
- toggleClass(this.$el, this.clsStack, columns.length < 2);
4399
+ isActive() {
4400
+ return active === this;
4394
4401
  },
4395
4402
 
4396
- events: ['resize'] },
4403
+ position() {
4404
+ removeClass(this.$el, this.clsDrop + "-stack");
4405
+ toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
4406
+ toggleClass(this.$el, this.clsDrop + "-stretch", this.align === 'stretch');
4397
4407
 
4408
+ const boundary = query(this.boundary, this.$el);
4409
+ const target = boundary && this.boundaryAlign ? boundary : this.target;
4410
+ const [scrollParent] = scrollParents(
4411
+ boundary && this.boundaryAlign ? boundary : this.$el);
4398
4412
 
4399
- {
4400
- read(data) {
4401
- let { columns, rows } = data;
4413
+ const scrollParentOffset = offset(scrollParent);
4414
+ const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
4415
+ const viewportOffset = this.getViewportOffset(this.$el);
4402
4416
 
4403
- // Filter component makes elements positioned absolute
4404
- if (
4405
- !columns.length ||
4406
- !this.masonry && !this.parallax ||
4407
- positionedAbsolute(this.$el))
4408
- {
4409
- data.translates = false;
4410
- return false;
4411
- }
4417
+ css(this.$el, 'maxWidth', '');
4418
+ const maxWidth = scrollParentOffset.width - 2 * viewportOffset;
4412
4419
 
4413
- let translates = false;
4420
+ if (this.align === 'justify') {
4421
+ const prop = this.axis === 'y' ? 'width' : 'height';
4422
+ css(
4423
+ this.$el,
4424
+ prop,
4425
+ Math.min(
4426
+ (boundary ? boundaryOffset : offset(this.target))[prop],
4427
+ scrollParentOffset[prop] - 2 * viewportOffset));
4414
4428
 
4415
- const nodes = children(this.$el);
4416
- const columnHeights = getColumnHeights(columns);
4417
- const margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
4418
- const elHeight = Math.max(...columnHeights) + margin;
4419
4429
 
4420
- if (this.masonry) {
4421
- columns = columns.map((column) => sortBy$1(column, 'offsetTop'));
4422
- translates = getTranslates(rows, columns);
4423
- }
4430
+ } else if (this.align === 'stretch') {
4431
+ this.flip = this.axis === 'y' ? 'x' : 'y';
4432
+ this.display = 'static';
4424
4433
 
4425
- let padding = Math.abs(this.parallax);
4426
- if (padding) {
4427
- padding = columnHeights.reduce(
4428
- (newPadding, hgt, i) =>
4429
- Math.max(
4430
- newPadding,
4431
- hgt + margin + (i % 2 ? padding : padding / 8) - elHeight),
4434
+ const viewport = offsetViewport(scrollParent);
4435
+ const targetDim = offset(target);
4436
+ const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
4432
4437
 
4433
- 0);
4438
+ css(this.$el, {
4439
+ width:
4440
+ this.axis === 'y' ?
4441
+ viewport.width :
4442
+ (this.dir === 'left' ?
4443
+ targetDim.left - viewport.left :
4444
+ viewport.right - targetDim.right) - elOffset,
4445
+ height:
4446
+ this.axis === 'x' ?
4447
+ viewport.height :
4448
+ (this.dir === 'top' ?
4449
+ targetDim.top - viewport.top :
4450
+ viewport.bottom - targetDim.bottom) - elOffset });
4434
4451
 
4452
+ } else if (this.$el.offsetWidth > maxWidth) {
4453
+ addClass(this.$el, this.clsDrop + "-stack");
4435
4454
  }
4436
4455
 
4437
- return { padding, columns, translates, height: translates ? elHeight : '' };
4438
- },
4439
-
4440
- write(_ref2) {let { height, padding } = _ref2;
4441
- css(this.$el, 'paddingBottom', padding || '');
4442
- height !== false && css(this.$el, 'height', height);
4443
- },
4456
+ css(this.$el, 'maxWidth', maxWidth);
4444
4457
 
4445
- events: ['resize'] },
4458
+ this.positionAt(this.$el, target, boundary);
4459
+ } } };
4446
4460
 
4447
4461
 
4448
- {
4449
- read() {
4450
- if (this.parallax && positionedAbsolute(this.$el)) {
4451
- return false;
4452
- }
4453
4462
 
4454
- return {
4455
- scrolled: this.parallax ?
4456
- scrolledOver(this.$el) * Math.abs(this.parallax) :
4457
- false };
4463
+ function getPositionedElements(el) {
4464
+ const result = [];
4465
+ apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
4466
+ return result;
4467
+ }
4458
4468
 
4459
- },
4469
+ var formCustom = {
4470
+ mixins: [Class],
4460
4471
 
4461
- write(_ref3) {let { columns, scrolled, translates } = _ref3;
4462
- if (scrolled === false && !translates) {
4463
- return;
4464
- }
4472
+ args: 'target',
4465
4473
 
4466
- columns.forEach((column, i) =>
4467
- column.forEach((el, j) =>
4468
- css(
4469
- el,
4470
- 'transform',
4471
- !scrolled && !translates ?
4472
- '' : "translateY(" + (
4474
+ props: {
4475
+ target: Boolean },
4473
4476
 
4474
- (translates && -translates[i][j]) + (
4475
- scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)) + "px)")));
4476
4477
 
4478
+ data: {
4479
+ target: false },
4477
4480
 
4478
4481
 
4482
+ computed: {
4483
+ input(_, $el) {
4484
+ return $(selInput, $el);
4485
+ },
4479
4486
 
4487
+ state() {
4488
+ return this.input.nextElementSibling;
4480
4489
  },
4481
4490
 
4482
- events: ['scroll', 'resize'] }] };
4491
+ target(_ref, $el) {let { target } = _ref;
4492
+ return (
4493
+ target && (
4494
+ target === true && parent(this.input) === $el && this.input.nextElementSibling ||
4495
+ $(target, $el)));
4483
4496
 
4497
+ } },
4484
4498
 
4485
4499
 
4500
+ update() {var _input$files;
4501
+ const { target, input } = this;
4486
4502
 
4487
- function positionedAbsolute(el) {
4488
- return children(el).some((el) => css(el, 'position') === 'absolute');
4489
- }
4503
+ if (!target) {
4504
+ return;
4505
+ }
4490
4506
 
4491
- function getTranslates(rows, columns) {
4492
- const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
4507
+ let option;
4508
+ const prop = isInput(target) ? 'value' : 'textContent';
4509
+ const prev = target[prop];
4510
+ const value = (_input$files = input.files) != null && _input$files[0] ?
4511
+ input.files[0].name :
4512
+ matches(input, 'select') && (
4513
+ option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
4514
+ ? option.textContent :
4515
+ input.value;
4493
4516
 
4494
- return columns.map((elements) => {
4495
- let prev = 0;
4496
- return elements.map(
4497
- (element, row) =>
4498
- prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0);
4517
+ if (prev !== value) {
4518
+ target[prop] = value;
4519
+ }
4520
+ },
4499
4521
 
4500
- });
4501
- }
4522
+ events: [
4523
+ {
4524
+ name: 'change',
4502
4525
 
4503
- function getMarginTop(nodes, cls) {
4504
- const [node] = nodes.filter((el) => hasClass(el, cls));
4526
+ handler() {
4527
+ this.$emit();
4528
+ } },
4505
4529
 
4506
- return toFloat(node ? css(node, 'marginTop') : css(nodes[0], 'paddingLeft'));
4507
- }
4508
4530
 
4509
- function getColumnHeights(columns) {
4510
- return columns.map((column) => column.reduce((sum, el) => sum + el.offsetHeight, 0));
4511
- }
4531
+ {
4532
+ name: 'reset',
4512
4533
 
4513
- var heightMatch = {
4514
- mixins: [Resize],
4534
+ el() {
4535
+ return closest(this.$el, 'form');
4536
+ },
4515
4537
 
4516
- args: 'target',
4538
+ handler() {
4539
+ this.$emit();
4540
+ } }] };
4541
+
4542
+ var Margin = {
4543
+ mixins: [Resize],
4517
4544
 
4518
4545
  props: {
4519
- target: String,
4520
- row: Boolean },
4546
+ margin: String,
4547
+ firstColumn: Boolean },
4521
4548
 
4522
4549
 
4523
4550
  data: {
4524
- target: '> *',
4525
- row: true },
4526
-
4551
+ margin: 'uk-margin-small-top',
4552
+ firstColumn: 'uk-first-column' },
4527
4553
 
4528
- computed: {
4529
- elements: {
4530
- get(_ref, $el) {let { target } = _ref;
4531
- return $$(target, $el);
4532
- },
4533
4554
 
4534
- watch() {
4535
- this.$reset();
4536
- } } },
4555
+ resizeTargets() {
4556
+ return [this.$el, ...toArray(this.$el.children)];
4557
+ },
4537
4558
 
4559
+ connected() {
4560
+ this.registerObserver(
4561
+ observeMutation(this.$el, () => this.$reset(), {
4562
+ childList: true }));
4538
4563
 
4539
4564
 
4540
- resizeTargets() {
4541
- return [this.$el, ...this.elements];
4542
4565
  },
4543
4566
 
4544
4567
  update: {
4545
4568
  read() {
4569
+ const rows = getRows(this.$el.children);
4570
+
4546
4571
  return {
4547
- rows: (this.row ? getRows(this.elements) : [this.elements]).map(match$1) };
4572
+ rows,
4573
+ columns: getColumns(rows) };
4548
4574
 
4549
4575
  },
4550
4576
 
4551
- write(_ref2) {let { rows } = _ref2;
4552
- for (const { heights, elements } of rows) {
4553
- elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
4577
+ write(_ref) {let { columns, rows } = _ref;
4578
+ for (const row of rows) {
4579
+ for (const column of row) {
4580
+ toggleClass(column, this.margin, rows[0] !== row);
4581
+ toggleClass(column, this.firstColumn, columns[0].includes(column));
4582
+ }
4554
4583
  }
4555
4584
  },
4556
4585
 
@@ -4558,1008 +4587,1085 @@
4558
4587
 
4559
4588
 
4560
4589
 
4561
- function match$1(elements) {
4562
- if (elements.length < 2) {
4563
- return { heights: [''], elements };
4564
- }
4590
+ function getRows(items) {
4591
+ return sortBy(items, 'top', 'bottom');
4592
+ }
4565
4593
 
4566
- css(elements, 'minHeight', '');
4567
- let heights = elements.map(getHeight);
4568
- const max = Math.max(...heights);
4594
+ function getColumns(rows) {
4595
+ const columns = [];
4569
4596
 
4570
- return {
4571
- heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
4572
- elements };
4597
+ for (const row of rows) {
4598
+ const sorted = sortBy(row, 'left', 'right');
4599
+ for (let j = 0; j < sorted.length; j++) {
4600
+ columns[j] = columns[j] ? columns[j].concat(sorted[j]) : sorted[j];
4601
+ }
4602
+ }
4573
4603
 
4604
+ return isRtl ? columns.reverse() : columns;
4574
4605
  }
4575
4606
 
4576
- function getHeight(element) {
4577
- let style = false;
4578
- if (!isVisible(element)) {
4579
- style = element.style.display;
4580
- css(element, 'display', 'block', 'important');
4581
- }
4607
+ function sortBy(items, startProp, endProp) {
4608
+ const sorted = [[]];
4582
4609
 
4583
- const height = dimensions$1(element).height - boxModelAdjust(element, 'height', 'content-box');
4610
+ for (const el of items) {
4611
+ if (!isVisible(el)) {
4612
+ continue;
4613
+ }
4584
4614
 
4585
- if (style !== false) {
4586
- css(element, 'display', style);
4587
- }
4615
+ let dim = getOffset(el);
4588
4616
 
4589
- return height;
4590
- }
4617
+ for (let i = sorted.length - 1; i >= 0; i--) {
4618
+ const current = sorted[i];
4591
4619
 
4592
- var heightViewport = {
4593
- mixins: [Resize],
4620
+ if (!current[0]) {
4621
+ current.push(el);
4622
+ break;
4623
+ }
4594
4624
 
4595
- props: {
4596
- expand: Boolean,
4597
- offsetTop: Boolean,
4598
- offsetBottom: Boolean,
4599
- minHeight: Number },
4625
+ let startDim;
4626
+ if (current[0].offsetParent === el.offsetParent) {
4627
+ startDim = getOffset(current[0]);
4628
+ } else {
4629
+ dim = getOffset(el, true);
4630
+ startDim = getOffset(current[0], true);
4631
+ }
4600
4632
 
4633
+ if (dim[startProp] >= startDim[endProp] - 1 && dim[startProp] !== startDim[startProp]) {
4634
+ sorted.push([el]);
4635
+ break;
4636
+ }
4601
4637
 
4602
- data: {
4603
- expand: false,
4604
- offsetTop: false,
4605
- offsetBottom: false,
4606
- minHeight: 0 },
4638
+ if (dim[endProp] - 1 > startDim[startProp] || dim[startProp] === startDim[startProp]) {
4639
+ current.push(el);
4640
+ break;
4641
+ }
4607
4642
 
4643
+ if (i === 0) {
4644
+ sorted.unshift([el]);
4645
+ break;
4646
+ }
4647
+ }
4648
+ }
4608
4649
 
4609
- resizeTargets() {
4610
- // check for offsetTop change
4611
- return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
4612
- },
4650
+ return sorted;
4651
+ }
4613
4652
 
4614
- update: {
4615
- read(_ref) {let { minHeight: prev } = _ref;
4616
- if (!isVisible(this.$el)) {
4617
- return false;
4618
- }
4653
+ function getOffset(element, offset) {if (offset === void 0) {offset = false;}
4654
+ let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
4619
4655
 
4620
- let minHeight = '';
4621
- const box = boxModelAdjust(this.$el, 'height', 'content-box');
4656
+ if (offset) {
4657
+ [offsetTop, offsetLeft] = offsetPosition(element);
4658
+ }
4622
4659
 
4623
- const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
4624
- const { height: viewportHeight } = offsetViewport(scrollElement);
4660
+ return {
4661
+ top: offsetTop,
4662
+ left: offsetLeft,
4663
+ bottom: offsetTop + offsetHeight,
4664
+ right: offsetLeft + offsetWidth };
4625
4665
 
4626
- if (this.expand) {
4627
- minHeight = Math.max(
4628
- viewportHeight - (
4629
- dimensions$1(scrollElement).height - dimensions$1(this.$el).height) -
4630
- box,
4631
- 0);
4666
+ }
4632
4667
 
4633
- } else {
4634
- // on mobile devices (iOS and Android) window.innerHeight !== 100vh
4635
- minHeight = "calc(" + (
4636
- document.scrollingElement === scrollElement ? '100vh' : viewportHeight + "px");
4668
+ var Scroll = {
4669
+ connected() {
4670
+ registerScrollListener(this._uid, () => this.$emit('scroll'));
4671
+ },
4637
4672
 
4673
+ disconnected() {
4674
+ unregisterScrollListener(this._uid);
4675
+ } };
4638
4676
 
4639
- if (this.offsetTop) {
4640
- const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
4641
- minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
4642
- }
4643
4677
 
4644
- if (this.offsetBottom === true) {
4645
- minHeight += " - " + dimensions$1(this.$el.nextElementSibling).height + "px";
4646
- } else if (isNumeric(this.offsetBottom)) {
4647
- minHeight += " - " + this.offsetBottom + "vh";
4648
- } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
4649
- minHeight += " - " + toFloat(this.offsetBottom) + "px";
4650
- } else if (isString(this.offsetBottom)) {
4651
- minHeight += " - " + dimensions$1(query(this.offsetBottom, this.$el)).height + "px";
4652
- }
4678
+ const scrollListeners = new Map();
4679
+ let unbindScrollListener;
4680
+ function registerScrollListener(id, listener) {
4681
+ unbindScrollListener =
4682
+ unbindScrollListener ||
4683
+ on(window, 'scroll', () => scrollListeners.forEach((listener) => listener()), {
4684
+ passive: true,
4685
+ capture: true });
4653
4686
 
4654
- minHeight += (box ? " - " + box + "px" : '') + ")";
4655
- }
4656
4687
 
4657
- return { minHeight, prev };
4658
- },
4688
+ scrollListeners.set(id, listener);
4689
+ }
4659
4690
 
4660
- write(_ref2) {let { minHeight } = _ref2;
4661
- css(this.$el, { minHeight });
4691
+ function unregisterScrollListener(id) {
4692
+ scrollListeners.delete(id);
4693
+ if (unbindScrollListener && !scrollListeners.size) {
4694
+ unbindScrollListener();
4695
+ unbindScrollListener = null;
4696
+ }
4697
+ }
4662
4698
 
4663
- if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
4664
- css(this.$el, 'minHeight', this.minHeight);
4665
- }
4666
- },
4699
+ var grid = {
4700
+ extends: Margin,
4667
4701
 
4668
- events: ['resize'] } };
4702
+ mixins: [Class, Scroll],
4669
4703
 
4670
- var SVG = {
4671
- args: 'src',
4704
+ name: 'grid',
4672
4705
 
4673
4706
  props: {
4674
- id: Boolean,
4675
- icon: String,
4676
- src: String,
4677
- style: String,
4678
- width: Number,
4679
- height: Number,
4680
- ratio: Number,
4681
- class: String,
4682
- strokeAnimation: Boolean,
4683
- focusable: Boolean, // IE 11
4684
- attributes: 'list' },
4707
+ masonry: Boolean,
4708
+ parallax: Number },
4685
4709
 
4686
4710
 
4687
4711
  data: {
4688
- ratio: 1,
4689
- include: ['style', 'class', 'focusable'],
4690
- class: '',
4691
- strokeAnimation: false },
4712
+ margin: 'uk-grid-margin',
4713
+ clsStack: 'uk-grid-stack',
4714
+ masonry: false,
4715
+ parallax: 0 },
4692
4716
 
4693
4717
 
4694
- beforeConnect() {
4695
- this.class += ' uk-svg';
4718
+ connected() {
4719
+ this.masonry && addClass(this.$el, 'uk-flex-top uk-flex-wrap-top');
4696
4720
  },
4697
4721
 
4698
- connected() {
4699
- if (!this.icon && includes(this.src, '#')) {
4700
- [this.src, this.icon] = this.src.split('#');
4701
- }
4722
+ update: [
4723
+ {
4724
+ write(_ref) {let { columns } = _ref;
4725
+ toggleClass(this.$el, this.clsStack, columns.length < 2);
4726
+ },
4702
4727
 
4703
- this.svg = this.getSvg().then((el) => {
4704
- if (this._connected) {
4705
- const svg = insertSVG(el, this.$el);
4728
+ events: ['resize'] },
4706
4729
 
4707
- if (this.svgEl && svg !== this.svgEl) {
4708
- remove$1(this.svgEl);
4709
- }
4710
4730
 
4711
- this.applyAttributes(svg, el);
4731
+ {
4732
+ read(data) {
4733
+ let { columns, rows } = data;
4712
4734
 
4713
- return this.svgEl = svg;
4735
+ // Filter component makes elements positioned absolute
4736
+ if (
4737
+ !columns.length ||
4738
+ !this.masonry && !this.parallax ||
4739
+ positionedAbsolute(this.$el))
4740
+ {
4741
+ data.translates = false;
4742
+ return false;
4714
4743
  }
4715
- }, noop);
4716
-
4717
- if (this.strokeAnimation) {
4718
- this.svg.then((el) => {
4719
- if (this._connected) {
4720
- applyAnimation(el);
4721
- this.registerObserver(
4722
- observeIntersection(el, (records, observer) => {
4723
- applyAnimation(el);
4724
- observer.disconnect();
4725
- }));
4726
4744
 
4727
- }
4728
- });
4729
- }
4730
- },
4745
+ let translates = false;
4731
4746
 
4732
- disconnected() {
4733
- this.svg.then((svg) => {
4734
- if (this._connected) {
4735
- return;
4736
- }
4747
+ const nodes = children(this.$el);
4748
+ const columnHeights = getColumnHeights(columns);
4749
+ const margin = getMarginTop(nodes, this.margin) * (rows.length - 1);
4750
+ const elHeight = Math.max(...columnHeights) + margin;
4737
4751
 
4738
- if (isVoidElement(this.$el)) {
4739
- this.$el.hidden = false;
4752
+ if (this.masonry) {
4753
+ columns = columns.map((column) => sortBy$1(column, 'offsetTop'));
4754
+ translates = getTranslates(rows, columns);
4740
4755
  }
4741
4756
 
4742
- remove$1(svg);
4743
- this.svgEl = null;
4744
- });
4745
-
4746
- this.svg = null;
4747
- },
4757
+ let padding = Math.abs(this.parallax);
4758
+ if (padding) {
4759
+ padding = columnHeights.reduce(
4760
+ (newPadding, hgt, i) =>
4761
+ Math.max(
4762
+ newPadding,
4763
+ hgt + margin + (i % 2 ? padding : padding / 8) - elHeight),
4748
4764
 
4749
- methods: {
4750
- async getSvg() {
4751
- if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
4752
- return new Promise((resolve) =>
4753
- once(this.$el, 'load', () => resolve(this.getSvg())));
4765
+ 0);
4754
4766
 
4755
4767
  }
4756
4768
 
4757
- return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
4769
+ return { padding, columns, translates, height: translates ? elHeight : '' };
4758
4770
  },
4759
4771
 
4760
- applyAttributes(el, ref) {
4761
- for (const prop in this.$options.props) {
4762
- if (includes(this.include, prop) && prop in this) {
4763
- attr(el, prop, this[prop]);
4764
- }
4765
- }
4766
-
4767
- for (const attribute in this.attributes) {
4768
- const [prop, value] = this.attributes[attribute].split(':', 2);
4769
- attr(el, prop, value);
4770
- }
4772
+ write(_ref2) {let { height, padding } = _ref2;
4773
+ css(this.$el, 'paddingBottom', padding || '');
4774
+ height !== false && css(this.$el, 'height', height);
4775
+ },
4771
4776
 
4772
- if (!this.id) {
4773
- removeAttr(el, 'id');
4774
- }
4777
+ events: ['resize'] },
4775
4778
 
4776
- const props = ['width', 'height'];
4777
- let dimensions = props.map((prop) => this[prop]);
4778
4779
 
4779
- if (!dimensions.some((val) => val)) {
4780
- dimensions = props.map((prop) => attr(ref, prop));
4780
+ {
4781
+ read() {
4782
+ if (this.parallax && positionedAbsolute(this.$el)) {
4783
+ return false;
4781
4784
  }
4782
4785
 
4783
- const viewBox = attr(ref, 'viewBox');
4784
- if (viewBox && !dimensions.some((val) => val)) {
4785
- dimensions = viewBox.split(' ').slice(2);
4786
- }
4786
+ return {
4787
+ scrolled: this.parallax ?
4788
+ scrolledOver(this.$el) * Math.abs(this.parallax) :
4789
+ false };
4787
4790
 
4788
- dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
4789
- } } };
4791
+ },
4790
4792
 
4793
+ write(_ref3) {let { columns, scrolled, translates } = _ref3;
4794
+ if (scrolled === false && !translates) {
4795
+ return;
4796
+ }
4791
4797
 
4798
+ columns.forEach((column, i) =>
4799
+ column.forEach((el, j) =>
4800
+ css(
4801
+ el,
4802
+ 'transform',
4803
+ !scrolled && !translates ?
4804
+ '' : "translateY(" + (
4792
4805
 
4793
- const loadSVG = memoize(async (src) => {
4794
- if (src) {
4795
- if (startsWith(src, 'data:')) {
4796
- return decodeURIComponent(src.split(',')[1]);
4797
- } else {
4798
- return (await fetch(src)).text();
4799
- }
4800
- } else {
4801
- return Promise.reject();
4802
- }
4803
- });
4806
+ (translates && -translates[i][j]) + (
4807
+ scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)) + "px)")));
4804
4808
 
4805
- function parseSVG(svg, icon) {var _svg;
4806
- if (icon && includes(svg, '<symbol')) {
4807
- svg = parseSymbols(svg, icon) || svg;
4808
- }
4809
4809
 
4810
- svg = $(svg.substr(svg.indexOf('<svg')));
4811
- return ((_svg = svg) == null ? void 0 : _svg.hasChildNodes()) && svg;
4812
- }
4813
4810
 
4814
- const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
4815
- const symbols = {};
4816
4811
 
4817
- function parseSymbols(svg, icon) {
4818
- if (!symbols[svg]) {
4819
- symbols[svg] = {};
4812
+ },
4820
4813
 
4821
- symbolRe.lastIndex = 0;
4814
+ events: ['scroll', 'resize'] }] };
4822
4815
 
4823
- let match;
4824
- while (match = symbolRe.exec(svg)) {
4825
- symbols[svg][match[3]] = "<svg xmlns=\"http://www.w3.org/2000/svg\"" + match[1] + "svg>";
4826
- }
4827
- }
4828
4816
 
4829
- return symbols[svg][icon];
4830
- }
4831
4817
 
4832
- function applyAnimation(el) {
4833
- const length = getMaxPathLength(el);
4834
4818
 
4835
- if (length) {
4836
- el.style.setProperty('--uk-animation-stroke', length);
4837
- }
4819
+ function positionedAbsolute(el) {
4820
+ return children(el).some((el) => css(el, 'position') === 'absolute');
4838
4821
  }
4839
4822
 
4840
- function getMaxPathLength(el) {
4841
- return Math.ceil(
4842
- Math.max(
4843
- 0,
4844
- ...$$('[stroke]', el).map((stroke) => {
4845
- try {
4846
- return stroke.getTotalLength();
4847
- } catch (e) {
4848
- return 0;
4849
- }
4850
- })));
4823
+ function getTranslates(rows, columns) {
4824
+ const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
4851
4825
 
4826
+ return columns.map((elements) => {
4827
+ let prev = 0;
4828
+ return elements.map(
4829
+ (element, row) =>
4830
+ prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0);
4852
4831
 
4832
+ });
4853
4833
  }
4854
4834
 
4855
- function insertSVG(el, root) {
4856
- if (isVoidElement(root) || isTag(root, 'canvas')) {
4857
- root.hidden = true;
4858
-
4859
- const next = root.nextElementSibling;
4860
- return equals(el, next) ? next : after(root, el);
4861
- }
4862
-
4863
- const last = root.lastElementChild;
4864
- return equals(el, last) ? last : append(root, el);
4865
- }
4835
+ function getMarginTop(nodes, cls) {
4836
+ const [node] = nodes.filter((el) => hasClass(el, cls));
4866
4837
 
4867
- function equals(el, other) {
4868
- return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
4838
+ return toFloat(node ? css(node, 'marginTop') : css(nodes[0], 'paddingLeft'));
4869
4839
  }
4870
4840
 
4871
- function innerHTML(el) {
4872
- return (
4873
- el.innerHTML ||
4874
- new XMLSerializer().serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).
4875
- replace(/\s/g, '');
4841
+ function getColumnHeights(columns) {
4842
+ return columns.map((column) => column.reduce((sum, el) => sum + el.offsetHeight, 0));
4876
4843
  }
4877
4844
 
4878
- var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
4879
-
4880
- var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
4845
+ var heightMatch = {
4846
+ mixins: [Resize],
4881
4847
 
4882
- var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
4848
+ args: 'target',
4883
4849
 
4884
- var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";
4850
+ props: {
4851
+ target: String,
4852
+ row: Boolean },
4885
4853
 
4886
- 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>";
4887
4854
 
4888
- var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>";
4855
+ data: {
4856
+ target: '> *',
4857
+ row: true },
4889
4858
 
4890
- var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>";
4891
4859
 
4892
- var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";
4860
+ computed: {
4861
+ elements: {
4862
+ get(_ref, $el) {let { target } = _ref;
4863
+ return $$(target, $el);
4864
+ },
4893
4865
 
4894
- var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
4866
+ watch() {
4867
+ this.$reset();
4868
+ } } },
4895
4869
 
4896
- var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
4897
4870
 
4898
- var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>";
4899
4871
 
4900
- var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>";
4872
+ resizeTargets() {
4873
+ return [this.$el, ...this.elements];
4874
+ },
4901
4875
 
4902
- var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>";
4876
+ update: {
4877
+ read() {
4878
+ return {
4879
+ rows: (this.row ? getRows(this.elements) : [this.elements]).map(match$1) };
4903
4880
 
4904
- var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>";
4881
+ },
4905
4882
 
4906
- var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>";
4883
+ write(_ref2) {let { rows } = _ref2;
4884
+ for (const { heights, elements } of rows) {
4885
+ elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
4886
+ }
4887
+ },
4907
4888
 
4908
- var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>";
4889
+ events: ['resize'] } };
4909
4890
 
4910
- const icons = {
4911
- spinner,
4912
- totop,
4913
- marker,
4914
- 'close-icon': closeIcon,
4915
- 'close-large': closeLarge,
4916
- 'navbar-toggle-icon': navbarToggleIcon,
4917
- 'overlay-icon': overlayIcon,
4918
- 'pagination-next': paginationNext,
4919
- 'pagination-previous': paginationPrevious,
4920
- 'search-icon': searchIcon,
4921
- 'search-large': searchLarge,
4922
- 'search-navbar': searchNavbar,
4923
- 'slidenav-next': slidenavNext,
4924
- 'slidenav-next-large': slidenavNextLarge,
4925
- 'slidenav-previous': slidenavPrevious,
4926
- 'slidenav-previous-large': slidenavPreviousLarge };
4927
4891
 
4928
4892
 
4929
- const Icon = {
4930
- install: install$3,
4893
+ function match$1(elements) {
4894
+ if (elements.length < 2) {
4895
+ return { heights: [''], elements };
4896
+ }
4931
4897
 
4932
- extends: SVG,
4898
+ css(elements, 'minHeight', '');
4899
+ let heights = elements.map(getHeight);
4900
+ const max = Math.max(...heights);
4933
4901
 
4934
- args: 'icon',
4902
+ return {
4903
+ heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
4904
+ elements };
4935
4905
 
4936
- props: ['icon'],
4906
+ }
4937
4907
 
4938
- data: {
4939
- include: ['focusable'] },
4908
+ function getHeight(element) {
4909
+ let style = false;
4910
+ if (!isVisible(element)) {
4911
+ style = element.style.display;
4912
+ css(element, 'display', 'block', 'important');
4913
+ }
4940
4914
 
4915
+ const height = dimensions$1(element).height - boxModelAdjust(element, 'height', 'content-box');
4941
4916
 
4942
- isIcon: true,
4917
+ if (style !== false) {
4918
+ css(element, 'display', style);
4919
+ }
4943
4920
 
4944
- beforeConnect() {
4945
- addClass(this.$el, 'uk-icon');
4946
- },
4921
+ return height;
4922
+ }
4947
4923
 
4948
- methods: {
4949
- async getSvg() {
4950
- const icon = getIcon(this.icon);
4924
+ var heightViewport = {
4925
+ mixins: [Resize],
4951
4926
 
4952
- if (!icon) {
4953
- throw 'Icon not found.';
4954
- }
4927
+ props: {
4928
+ expand: Boolean,
4929
+ offsetTop: Boolean,
4930
+ offsetBottom: Boolean,
4931
+ minHeight: Number },
4955
4932
 
4956
- return icon;
4957
- } } };
4958
4933
 
4959
- const IconComponent = {
4960
- args: false,
4934
+ data: {
4935
+ expand: false,
4936
+ offsetTop: false,
4937
+ offsetBottom: false,
4938
+ minHeight: 0 },
4961
4939
 
4962
- extends: Icon,
4963
4940
 
4964
- data: (vm) => ({
4965
- icon: hyphenate(vm.constructor.options.name) }),
4941
+ resizeTargets() {
4942
+ // check for offsetTop change
4943
+ return [this.$el, ...scrollParents(this.$el, /auto|scroll/)];
4944
+ },
4966
4945
 
4946
+ update: {
4947
+ read(_ref) {let { minHeight: prev } = _ref;
4948
+ if (!isVisible(this.$el)) {
4949
+ return false;
4950
+ }
4967
4951
 
4968
- beforeConnect() {
4969
- addClass(this.$el, this.$name);
4970
- } };
4952
+ let minHeight = '';
4953
+ const box = boxModelAdjust(this.$el, 'height', 'content-box');
4971
4954
 
4955
+ const { body, scrollingElement } = document;
4956
+ const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
4957
+ const { height: viewportHeight } = offsetViewport(
4958
+ scrollElement === body ? scrollingElement : scrollElement);
4972
4959
 
4973
- const Slidenav = {
4974
- extends: IconComponent,
4975
4960
 
4976
- beforeConnect() {
4977
- addClass(this.$el, 'uk-slidenav');
4978
- const icon = this.$props.icon;
4979
- this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
4980
- } };
4961
+ if (this.expand) {
4962
+ minHeight = Math.max(
4963
+ viewportHeight - (
4964
+ dimensions$1(scrollElement).height - dimensions$1(this.$el).height) -
4965
+ box,
4966
+ 0);
4981
4967
 
4968
+ } else {
4969
+ const isScrollingElement =
4970
+ scrollingElement === scrollElement || body === scrollElement;
4982
4971
 
4983
- const Search = {
4984
- extends: IconComponent,
4972
+ // on mobile devices (iOS and Android) window.innerHeight !== 100vh
4973
+ minHeight = "calc(" + (isScrollingElement ? '100vh' : viewportHeight + "px");
4985
4974
 
4986
- beforeConnect() {
4987
- this.icon =
4988
- hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length ?
4989
- 'search-large' :
4990
- parents(this.$el, '.uk-search-navbar').length ?
4991
- 'search-navbar' :
4992
- this.$props.icon;
4993
- } };
4975
+ if (this.offsetTop) {
4976
+ if (isScrollingElement) {
4977
+ const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
4978
+ minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
4979
+ } else {
4980
+ minHeight += " - " + css(scrollElement, 'paddingTop');
4981
+ }
4982
+ }
4994
4983
 
4984
+ if (this.offsetBottom === true) {
4985
+ minHeight += " - " + dimensions$1(this.$el.nextElementSibling).height + "px";
4986
+ } else if (isNumeric(this.offsetBottom)) {
4987
+ minHeight += " - " + this.offsetBottom + "vh";
4988
+ } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
4989
+ minHeight += " - " + toFloat(this.offsetBottom) + "px";
4990
+ } else if (isString(this.offsetBottom)) {
4991
+ minHeight += " - " + dimensions$1(query(this.offsetBottom, this.$el)).height + "px";
4992
+ }
4995
4993
 
4996
- const Close = {
4997
- extends: IconComponent,
4994
+ minHeight += (box ? " - " + box + "px" : '') + ")";
4995
+ }
4998
4996
 
4999
- beforeConnect() {
5000
- this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
5001
- } };
4997
+ return { minHeight, prev };
4998
+ },
5002
4999
 
5000
+ write(_ref2) {let { minHeight } = _ref2;
5001
+ css(this.$el, { minHeight });
5003
5002
 
5004
- const Spinner = {
5005
- extends: IconComponent,
5003
+ if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
5004
+ css(this.$el, 'minHeight', this.minHeight);
5005
+ }
5006
+ },
5006
5007
 
5007
- methods: {
5008
- async getSvg() {
5009
- const icon = await Icon.methods.getSvg.call(this);
5008
+ events: ['resize'] } };
5010
5009
 
5011
- if (this.ratio !== 1) {
5012
- css($('circle', icon), 'strokeWidth', 1 / this.ratio);
5013
- }
5010
+ var SVG = {
5011
+ args: 'src',
5014
5012
 
5015
- return icon;
5016
- } } };
5013
+ props: {
5014
+ id: Boolean,
5015
+ icon: String,
5016
+ src: String,
5017
+ style: String,
5018
+ width: Number,
5019
+ height: Number,
5020
+ ratio: Number,
5021
+ class: String,
5022
+ strokeAnimation: Boolean,
5023
+ focusable: Boolean, // IE 11
5024
+ attributes: 'list' },
5017
5025
 
5018
5026
 
5027
+ data: {
5028
+ ratio: 1,
5029
+ include: ['style', 'class', 'focusable'],
5030
+ class: '',
5031
+ strokeAnimation: false },
5019
5032
 
5020
- const parsed = {};
5021
- function install$3(UIkit) {
5022
- UIkit.icon.add = (name, svg) => {
5023
- const added = isString(name) ? { [name]: svg } : name;
5024
- each(added, (svg, name) => {
5025
- icons[name] = svg;
5026
- delete parsed[name];
5027
- });
5028
5033
 
5029
- if (UIkit._initialized) {
5030
- apply(document.body, (el) =>
5031
- each(UIkit.getComponents(el), (cmp) => {
5032
- cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
5033
- }));
5034
+ beforeConnect() {
5035
+ this.class += ' uk-svg';
5036
+ },
5034
5037
 
5038
+ connected() {
5039
+ if (!this.icon && includes(this.src, '#')) {
5040
+ [this.src, this.icon] = this.src.split('#');
5035
5041
  }
5036
- };
5037
- }
5038
5042
 
5039
- function getIcon(icon) {
5040
- if (!icons[icon]) {
5041
- return null;
5042
- }
5043
+ this.svg = this.getSvg().then((el) => {
5044
+ if (this._connected) {
5045
+ const svg = insertSVG(el, this.$el);
5043
5046
 
5044
- if (!parsed[icon]) {
5045
- parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
5046
- }
5047
+ if (this.svgEl && svg !== this.svgEl) {
5048
+ remove$1(this.svgEl);
5049
+ }
5047
5050
 
5048
- return parsed[icon].cloneNode(true);
5049
- }
5051
+ this.applyAttributes(svg, el);
5050
5052
 
5051
- function applyRtl(icon) {
5052
- return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
5053
- }
5053
+ return this.svgEl = svg;
5054
+ }
5055
+ }, noop);
5054
5056
 
5055
- const nativeLazyLoad = inBrowser && 'loading' in HTMLImageElement.prototype;
5057
+ if (this.strokeAnimation) {
5058
+ this.svg.then((el) => {
5059
+ if (this._connected) {
5060
+ applyAnimation(el);
5061
+ this.registerObserver(
5062
+ observeIntersection(el, (records, observer) => {
5063
+ applyAnimation(el);
5064
+ observer.disconnect();
5065
+ }));
5056
5066
 
5057
- var img = {
5058
- args: 'dataSrc',
5067
+ }
5068
+ });
5069
+ }
5070
+ },
5059
5071
 
5060
- props: {
5061
- dataSrc: String,
5062
- sources: String,
5063
- offsetTop: String,
5064
- offsetLeft: String,
5065
- target: String,
5066
- loading: String },
5072
+ disconnected() {
5073
+ this.svg.then((svg) => {
5074
+ if (this._connected) {
5075
+ return;
5076
+ }
5067
5077
 
5078
+ if (isVoidElement(this.$el)) {
5079
+ this.$el.hidden = false;
5080
+ }
5068
5081
 
5069
- data: {
5070
- dataSrc: '',
5071
- sources: false,
5072
- offsetTop: '50vh',
5073
- offsetLeft: '50vw',
5074
- target: false,
5075
- loading: 'lazy' },
5076
-
5077
-
5078
- connected() {
5079
- if (this.loading !== 'lazy') {
5080
- this.load();
5081
- return;
5082
- }
5082
+ remove$1(svg);
5083
+ this.svgEl = null;
5084
+ });
5083
5085
 
5084
- const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
5086
+ this.svg = null;
5087
+ },
5085
5088
 
5086
- if (nativeLazyLoad && isImg(this.$el)) {
5087
- this.$el.loading = 'lazy';
5088
- setSrcAttrs(this.$el);
5089
+ methods: {
5090
+ async getSvg() {
5091
+ if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
5092
+ return new Promise((resolve) =>
5093
+ once(this.$el, 'load', () => resolve(this.getSvg())));
5089
5094
 
5090
- if (target.length === 1) {
5091
- return;
5092
5095
  }
5093
- }
5094
-
5095
- ensureSrcAttribute(this.$el);
5096
5096
 
5097
- this.registerObserver(
5098
- observeIntersection(
5099
- target,
5100
- (entries, observer) => {
5101
- this.load();
5102
- observer.disconnect();
5097
+ return parseSVG(await loadSVG(this.src), this.icon) || Promise.reject('SVG not found.');
5103
5098
  },
5104
- {
5105
- rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
5106
- this.offsetLeft,
5107
- 'width') + "px" }));
5108
-
5109
5099
 
5100
+ applyAttributes(el, ref) {
5101
+ for (const prop in this.$options.props) {
5102
+ if (includes(this.include, prop) && prop in this) {
5103
+ attr(el, prop, this[prop]);
5104
+ }
5105
+ }
5110
5106
 
5107
+ for (const attribute in this.attributes) {
5108
+ const [prop, value] = this.attributes[attribute].split(':', 2);
5109
+ attr(el, prop, value);
5110
+ }
5111
5111
 
5112
- },
5112
+ if (!this.id) {
5113
+ removeAttr(el, 'id');
5114
+ }
5113
5115
 
5114
- disconnected() {
5115
- if (this._data.image) {
5116
- this._data.image.onload = '';
5117
- }
5118
- },
5116
+ const props = ['width', 'height'];
5117
+ let dimensions = props.map((prop) => this[prop]);
5119
5118
 
5120
- methods: {
5121
- load() {
5122
- if (this._data.image) {
5123
- return this._data.image;
5119
+ if (!dimensions.some((val) => val)) {
5120
+ dimensions = props.map((prop) => attr(ref, prop));
5124
5121
  }
5125
5122
 
5126
- const image = isImg(this.$el) ?
5127
- this.$el :
5128
- getImageFromElement(this.$el, this.dataSrc, this.sources);
5123
+ const viewBox = attr(ref, 'viewBox');
5124
+ if (viewBox && !dimensions.some((val) => val)) {
5125
+ dimensions = viewBox.split(' ').slice(2);
5126
+ }
5129
5127
 
5130
- removeAttr(image, 'loading');
5131
- setSrcAttrs(this.$el, image.currentSrc);
5132
- return this._data.image = image;
5128
+ dimensions.forEach((val, i) => attr(el, props[i], toFloat(val) * this.ratio || null));
5133
5129
  } } };
5134
5130
 
5135
5131
 
5136
5132
 
5137
- function setSrcAttrs(el, src) {
5138
- if (isImg(el)) {
5139
- const parentNode = parent(el);
5140
- const elements = isPicture(parentNode) ? children(parentNode) : [el];
5141
- elements.forEach((el) => setSourceProps(el, el));
5142
- } else if (src) {
5143
- const change = !includes(el.style.backgroundImage, src);
5144
- if (change) {
5145
- css(el, 'backgroundImage', "url(" + escape(src) + ")");
5146
- trigger(el, createEvent('load', false));
5133
+ const loadSVG = memoize(async (src) => {
5134
+ if (src) {
5135
+ if (startsWith(src, 'data:')) {
5136
+ return decodeURIComponent(src.split(',')[1]);
5137
+ } else {
5138
+ return (await fetch(src)).text();
5147
5139
  }
5140
+ } else {
5141
+ return Promise.reject();
5148
5142
  }
5149
- }
5143
+ });
5150
5144
 
5151
- const srcProps = ['data-src', 'data-srcset', 'sizes'];
5152
- function setSourceProps(sourceEl, targetEl) {
5153
- srcProps.forEach((prop) => {
5154
- const value = data(sourceEl, prop);
5155
- if (value) {
5156
- attr(targetEl, prop.replace(/^(data-)+/, ''), value);
5157
- }
5158
- });
5145
+ function parseSVG(svg, icon) {var _svg;
5146
+ if (icon && includes(svg, '<symbol')) {
5147
+ svg = parseSymbols(svg, icon) || svg;
5148
+ }
5149
+
5150
+ svg = $(svg.substr(svg.indexOf('<svg')));
5151
+ return ((_svg = svg) == null ? void 0 : _svg.hasChildNodes()) && svg;
5159
5152
  }
5160
5153
 
5161
- function getImageFromElement(el, src, sources) {
5162
- const img = new Image();
5154
+ const symbolRe = /<symbol([^]*?id=(['"])(.+?)\2[^]*?<\/)symbol>/g;
5155
+ const symbols = {};
5163
5156
 
5164
- wrapInPicture(img, sources);
5165
- setSourceProps(el, img);
5166
- img.onload = () => {
5167
- setSrcAttrs(el, img.currentSrc);
5168
- };
5169
- attr(img, 'src', src);
5170
- return img;
5171
- }
5157
+ function parseSymbols(svg, icon) {
5158
+ if (!symbols[svg]) {
5159
+ symbols[svg] = {};
5172
5160
 
5173
- function wrapInPicture(img, sources) {
5174
- sources = parseSources(sources);
5161
+ symbolRe.lastIndex = 0;
5175
5162
 
5176
- if (sources.length) {
5177
- const picture = fragment('<picture>');
5178
- for (const attrs of sources) {
5179
- const source = fragment('<source>');
5180
- attr(source, attrs);
5181
- append(picture, source);
5163
+ let match;
5164
+ while (match = symbolRe.exec(svg)) {
5165
+ symbols[svg][match[3]] = "<svg xmlns=\"http://www.w3.org/2000/svg\"" + match[1] + "svg>";
5182
5166
  }
5183
- append(picture, img);
5184
5167
  }
5168
+
5169
+ return symbols[svg][icon];
5185
5170
  }
5186
5171
 
5187
- function parseSources(sources) {
5188
- if (!sources) {
5189
- return [];
5172
+ function applyAnimation(el) {
5173
+ const length = getMaxPathLength(el);
5174
+
5175
+ if (length) {
5176
+ el.style.setProperty('--uk-animation-stroke', length);
5190
5177
  }
5178
+ }
5191
5179
 
5192
- if (startsWith(sources, '[')) {
5180
+ function getMaxPathLength(el) {
5181
+ return Math.ceil(
5182
+ Math.max(
5183
+ 0,
5184
+ ...$$('[stroke]', el).map((stroke) => {
5193
5185
  try {
5194
- sources = JSON.parse(sources);
5186
+ return stroke.getTotalLength();
5195
5187
  } catch (e) {
5196
- sources = [];
5188
+ return 0;
5197
5189
  }
5198
- } else {
5199
- sources = parseOptions(sources);
5200
- }
5190
+ })));
5201
5191
 
5202
- if (!isArray(sources)) {
5203
- sources = [sources];
5204
- }
5205
5192
 
5206
- return sources.filter((source) => !isEmpty(source));
5207
5193
  }
5208
5194
 
5209
- function ensureSrcAttribute(el) {
5210
- if (isImg(el) && !hasAttr(el, 'src')) {
5211
- attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
5195
+ function insertSVG(el, root) {
5196
+ if (isVoidElement(root) || isTag(root, 'canvas')) {
5197
+ root.hidden = true;
5198
+
5199
+ const next = root.nextElementSibling;
5200
+ return equals(el, next) ? next : after(root, el);
5212
5201
  }
5202
+
5203
+ const last = root.lastElementChild;
5204
+ return equals(el, last) ? last : append(root, el);
5213
5205
  }
5214
5206
 
5215
- function isPicture(el) {
5216
- return isTag(el, 'picture');
5207
+ function equals(el, other) {
5208
+ return isTag(el, 'svg') && isTag(other, 'svg') && innerHTML(el) === innerHTML(other);
5217
5209
  }
5218
5210
 
5219
- function isImg(el) {
5220
- return isTag(el, 'img');
5211
+ function innerHTML(el) {
5212
+ return (
5213
+ el.innerHTML ||
5214
+ new XMLSerializer().serializeToString(el).replace(/<svg.*?>(.*?)<\/svg>/g, '$1')).
5215
+ replace(/\s/g, '');
5221
5216
  }
5222
5217
 
5223
- var Media = {
5224
- props: {
5225
- media: Boolean },
5218
+ var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
5226
5219
 
5220
+ var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
5227
5221
 
5228
- data: {
5229
- media: false },
5222
+ var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
5230
5223
 
5224
+ var navParentIcon = "<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>";
5231
5225
 
5232
- connected() {
5233
- const media = toMedia(this.media);
5234
- this.matchMedia = true;
5235
- if (media) {
5236
- this.mediaObj = window.matchMedia(media);
5237
- const handler = () => {
5238
- this.matchMedia = this.mediaObj.matches;
5239
- trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
5240
- };
5241
- this.offMediaObj = on(this.mediaObj, 'change', () => {
5242
- handler();
5243
- this.$emit('resize');
5244
- });
5245
- handler();
5246
- }
5247
- },
5226
+ var navParentIconLarge = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 4 7 10 13 4\"/></svg>";
5248
5227
 
5249
- disconnected() {var _this$offMediaObj;
5250
- (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
5251
- } };
5228
+ 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>";
5252
5229
 
5230
+ var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";
5253
5231
 
5254
- function toMedia(value) {
5255
- if (isString(value)) {
5256
- if (startsWith(value, '@')) {
5257
- const name = "breakpoint-" + value.substr(1);
5258
- value = toFloat(getCssVar(name));
5259
- } else if (isNaN(value)) {
5260
- return value;
5261
- }
5262
- }
5232
+ 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>";
5263
5233
 
5264
- return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
5265
- }
5234
+ var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>";
5266
5235
 
5267
- var leader = {
5268
- mixins: [Class, Media, Resize],
5236
+ var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>";
5269
5237
 
5270
- props: {
5271
- fill: String },
5238
+ var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";
5272
5239
 
5240
+ var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
5273
5241
 
5274
- data: {
5275
- fill: '',
5276
- clsWrapper: 'uk-leader-fill',
5277
- clsHide: 'uk-leader-hide',
5278
- attrFill: 'data-fill' },
5242
+ var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
5279
5243
 
5244
+ var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>";
5280
5245
 
5281
- computed: {
5282
- fill(_ref) {let { fill } = _ref;
5283
- return fill || getCssVar('leader-fill-content');
5284
- } },
5246
+ var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>";
5285
5247
 
5248
+ var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>";
5286
5249
 
5287
- connected() {
5288
- [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
5289
- },
5250
+ var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>";
5290
5251
 
5291
- disconnected() {
5292
- unwrap(this.wrapper.childNodes);
5252
+ var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>";
5253
+
5254
+ var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>";
5255
+
5256
+ const icons = {
5257
+ spinner,
5258
+ totop,
5259
+ marker,
5260
+ 'close-icon': closeIcon,
5261
+ 'close-large': closeLarge,
5262
+ 'nav-parent-icon': navParentIcon,
5263
+ 'nav-parent-icon-large': navParentIconLarge,
5264
+ 'navbar-parent-icon': navbarParentIcon,
5265
+ 'navbar-toggle-icon': navbarToggleIcon,
5266
+ 'overlay-icon': overlayIcon,
5267
+ 'pagination-next': paginationNext,
5268
+ 'pagination-previous': paginationPrevious,
5269
+ 'search-icon': searchIcon,
5270
+ 'search-large': searchLarge,
5271
+ 'search-navbar': searchNavbar,
5272
+ 'slidenav-next': slidenavNext,
5273
+ 'slidenav-next-large': slidenavNextLarge,
5274
+ 'slidenav-previous': slidenavPrevious,
5275
+ 'slidenav-previous-large': slidenavPreviousLarge };
5276
+
5277
+
5278
+ const Icon = {
5279
+ install: install$3,
5280
+
5281
+ extends: SVG,
5282
+
5283
+ args: 'icon',
5284
+
5285
+ props: ['icon'],
5286
+
5287
+ data: {
5288
+ include: ['focusable'] },
5289
+
5290
+
5291
+ isIcon: true,
5292
+
5293
+ beforeConnect() {
5294
+ addClass(this.$el, 'uk-icon');
5293
5295
  },
5294
5296
 
5295
- update: {
5296
- read() {
5297
- const width = Math.trunc(this.$el.offsetWidth / 2);
5297
+ methods: {
5298
+ async getSvg() {
5299
+ const icon = getIcon(this.icon);
5298
5300
 
5299
- return {
5300
- width,
5301
- fill: this.fill,
5302
- hide: !this.matchMedia };
5301
+ if (!icon) {
5302
+ throw 'Icon not found.';
5303
+ }
5303
5304
 
5304
- },
5305
+ return icon;
5306
+ } } };
5305
5307
 
5306
- write(_ref2) {let { width, fill, hide } = _ref2;
5307
- toggleClass(this.wrapper, this.clsHide, hide);
5308
- attr(this.wrapper, this.attrFill, new Array(width).join(fill));
5309
- },
5308
+ const IconComponent = {
5309
+ args: false,
5310
5310
 
5311
- events: ['resize'] } };
5311
+ extends: Icon,
5312
5312
 
5313
- const active = [];
5313
+ data: (vm) => ({
5314
+ icon: hyphenate(vm.constructor.options.name) }),
5314
5315
 
5315
- var Modal = {
5316
- mixins: [Class, Container, Togglable],
5317
5316
 
5318
- props: {
5319
- selPanel: String,
5320
- selClose: String,
5321
- escClose: Boolean,
5322
- bgClose: Boolean,
5323
- stack: Boolean },
5317
+ beforeConnect() {
5318
+ addClass(this.$el, this.$name);
5319
+ } };
5324
5320
 
5325
5321
 
5326
- data: {
5327
- cls: 'uk-open',
5328
- escClose: true,
5329
- bgClose: true,
5330
- overlay: true,
5331
- stack: false },
5322
+ const NavParentIcon = {
5323
+ extends: IconComponent,
5332
5324
 
5325
+ beforeConnect() {
5326
+ const icon = this.$props.icon;
5327
+ this.icon = closest(this.$el, '.uk-nav-primary') ? icon + "-large" : icon;
5328
+ } };
5333
5329
 
5334
- computed: {
5335
- panel(_ref, $el) {let { selPanel } = _ref;
5336
- return $(selPanel, $el);
5337
- },
5338
5330
 
5339
- transitionElement() {
5340
- return this.panel;
5341
- },
5331
+ const Slidenav = {
5332
+ extends: IconComponent,
5342
5333
 
5343
- bgClose(_ref2) {let { bgClose } = _ref2;
5344
- return bgClose && this.panel;
5345
- } },
5334
+ beforeConnect() {
5335
+ addClass(this.$el, 'uk-slidenav');
5336
+ const icon = this.$props.icon;
5337
+ this.icon = hasClass(this.$el, 'uk-slidenav-large') ? icon + "-large" : icon;
5338
+ } };
5346
5339
 
5347
5340
 
5348
- beforeDisconnect() {
5349
- if (includes(active, this)) {
5350
- this.toggleElement(this.$el, false, false);
5351
- }
5352
- },
5341
+ const Search = {
5342
+ extends: IconComponent,
5353
5343
 
5354
- events: [
5355
- {
5356
- name: 'click',
5344
+ beforeConnect() {
5345
+ this.icon =
5346
+ hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length ?
5347
+ 'search-large' :
5348
+ parents(this.$el, '.uk-search-navbar').length ?
5349
+ 'search-navbar' :
5350
+ this.$props.icon;
5351
+ } };
5357
5352
 
5358
- delegate() {
5359
- return this.selClose;
5360
- },
5361
5353
 
5362
- handler(e) {
5363
- e.preventDefault();
5364
- this.hide();
5365
- } },
5354
+ const Close = {
5355
+ extends: IconComponent,
5366
5356
 
5357
+ beforeConnect() {
5358
+ this.icon = "close-" + (hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon');
5359
+ } };
5367
5360
 
5368
- {
5369
- name: 'toggle',
5370
5361
 
5371
- self: true,
5362
+ const Spinner = {
5363
+ extends: IconComponent,
5372
5364
 
5373
- handler(e) {
5374
- if (e.defaultPrevented) {
5375
- return;
5365
+ methods: {
5366
+ async getSvg() {
5367
+ const icon = await Icon.methods.getSvg.call(this);
5368
+
5369
+ if (this.ratio !== 1) {
5370
+ css($('circle', icon), 'strokeWidth', 1 / this.ratio);
5376
5371
  }
5377
5372
 
5378
- e.preventDefault();
5373
+ return icon;
5374
+ } } };
5379
5375
 
5380
- if (this.isToggled() === includes(active, this)) {
5381
- this.toggle();
5382
- }
5383
- } },
5384
5376
 
5385
5377
 
5386
- {
5387
- name: 'beforeshow',
5378
+ const parsed = {};
5379
+ function install$3(UIkit) {
5380
+ UIkit.icon.add = (name, svg) => {
5381
+ const added = isString(name) ? { [name]: svg } : name;
5382
+ each(added, (svg, name) => {
5383
+ icons[name] = svg;
5384
+ delete parsed[name];
5385
+ });
5388
5386
 
5389
- self: true,
5387
+ if (UIkit._initialized) {
5388
+ apply(document.body, (el) =>
5389
+ each(UIkit.getComponents(el), (cmp) => {
5390
+ cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
5391
+ }));
5390
5392
 
5391
- handler(e) {
5392
- if (includes(active, this)) {
5393
- return false;
5394
- }
5393
+ }
5394
+ };
5395
+ }
5395
5396
 
5396
- if (!this.stack && active.length) {
5397
- Promise.all(active.map((modal) => modal.hide())).then(this.show);
5398
- e.preventDefault();
5399
- } else {
5400
- active.push(this);
5401
- }
5402
- } },
5397
+ function getIcon(icon) {
5398
+ if (!icons[icon]) {
5399
+ return null;
5400
+ }
5403
5401
 
5402
+ if (!parsed[icon]) {
5403
+ parsed[icon] = $((icons[applyRtl(icon)] || icons[icon]).trim());
5404
+ }
5404
5405
 
5405
- {
5406
- name: 'show',
5406
+ return parsed[icon].cloneNode(true);
5407
+ }
5407
5408
 
5408
- self: true,
5409
+ function applyRtl(icon) {
5410
+ return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
5411
+ }
5409
5412
 
5410
- handler() {
5411
- const docEl = document.documentElement;
5413
+ const nativeLazyLoad = inBrowser && 'loading' in HTMLImageElement.prototype;
5412
5414
 
5413
- if (width(window) > docEl.clientWidth && this.overlay) {
5414
- css(document.body, 'overflowY', 'scroll');
5415
- }
5415
+ var img = {
5416
+ args: 'dataSrc',
5416
5417
 
5417
- if (this.stack) {
5418
- css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
5418
+ props: {
5419
+ dataSrc: String,
5420
+ sources: String,
5421
+ offsetTop: String,
5422
+ offsetLeft: String,
5423
+ target: String,
5424
+ loading: String },
5425
+
5426
+
5427
+ data: {
5428
+ dataSrc: '',
5429
+ sources: false,
5430
+ offsetTop: '50vh',
5431
+ offsetLeft: '50vw',
5432
+ target: false,
5433
+ loading: 'lazy' },
5434
+
5435
+
5436
+ connected() {
5437
+ if (this.loading !== 'lazy') {
5438
+ this.load();
5439
+ return;
5440
+ }
5441
+
5442
+ const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
5443
+
5444
+ if (nativeLazyLoad && isImg(this.$el)) {
5445
+ this.$el.loading = 'lazy';
5446
+ setSrcAttrs(this.$el);
5447
+
5448
+ if (target.length === 1) {
5449
+ return;
5419
5450
  }
5451
+ }
5420
5452
 
5421
- addClass(docEl, this.clsPage);
5453
+ ensureSrcAttribute(this.$el);
5422
5454
 
5423
- if (this.bgClose) {
5424
- once(
5425
- this.$el,
5426
- 'hide',
5427
- on(document, pointerDown, (_ref3) => {let { target } = _ref3;
5428
- if (
5429
- last(active) !== this ||
5430
- this.overlay && !within(target, this.$el) ||
5431
- within(target, this.panel))
5432
- {
5433
- return;
5434
- }
5455
+ this.registerObserver(
5456
+ observeIntersection(
5457
+ target,
5458
+ (entries, observer) => {
5459
+ this.load();
5460
+ observer.disconnect();
5461
+ },
5462
+ {
5463
+ rootMargin: toPx(this.offsetTop, 'height') + "px " + toPx(
5464
+ this.offsetLeft,
5465
+ 'width') + "px" }));
5435
5466
 
5436
- once(
5437
- document,
5438
- pointerUp + " " + pointerCancel + " scroll",
5439
- (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
5440
- if (
5441
- !defaultPrevented &&
5442
- type === pointerUp &&
5443
- target === newTarget)
5444
- {
5445
- this.hide();
5446
- }
5447
- },
5448
- true);
5449
5467
 
5450
- }),
5451
- { self: true });
5452
5468
 
5469
+
5470
+ },
5471
+
5472
+ disconnected() {
5473
+ if (this._data.image) {
5474
+ this._data.image.onload = '';
5475
+ }
5476
+ },
5477
+
5478
+ methods: {
5479
+ load() {
5480
+ if (this._data.image) {
5481
+ return this._data.image;
5453
5482
  }
5454
5483
 
5455
- if (this.escClose) {
5456
- once(
5457
- this.$el,
5458
- 'hide',
5459
- on(document, 'keydown', (e) => {
5460
- if (e.keyCode === 27 && last(active) === this) {
5461
- this.hide();
5462
- }
5463
- }),
5464
- { self: true });
5484
+ const image = isImg(this.$el) ?
5485
+ this.$el :
5486
+ getImageFromElement(this.$el, this.dataSrc, this.sources);
5487
+
5488
+ removeAttr(image, 'loading');
5489
+ setSrcAttrs(this.$el, image.currentSrc);
5490
+ return this._data.image = image;
5491
+ } } };
5492
+
5493
+
5494
+
5495
+ function setSrcAttrs(el, src) {
5496
+ if (isImg(el)) {
5497
+ const parentNode = parent(el);
5498
+ const elements = isPicture(parentNode) ? children(parentNode) : [el];
5499
+ elements.forEach((el) => setSourceProps(el, el));
5500
+ } else if (src) {
5501
+ const change = !includes(el.style.backgroundImage, src);
5502
+ if (change) {
5503
+ css(el, 'backgroundImage', "url(" + escape(src) + ")");
5504
+ trigger(el, createEvent('load', false));
5505
+ }
5506
+ }
5507
+ }
5508
+
5509
+ const srcProps = ['data-src', 'data-srcset', 'sizes'];
5510
+ function setSourceProps(sourceEl, targetEl) {
5511
+ srcProps.forEach((prop) => {
5512
+ const value = data(sourceEl, prop);
5513
+ if (value) {
5514
+ attr(targetEl, prop.replace(/^(data-)+/, ''), value);
5515
+ }
5516
+ });
5517
+ }
5518
+
5519
+ function getImageFromElement(el, src, sources) {
5520
+ const img = new Image();
5521
+
5522
+ wrapInPicture(img, sources);
5523
+ setSourceProps(el, img);
5524
+ img.onload = () => {
5525
+ setSrcAttrs(el, img.currentSrc);
5526
+ };
5527
+ attr(img, 'src', src);
5528
+ return img;
5529
+ }
5530
+
5531
+ function wrapInPicture(img, sources) {
5532
+ sources = parseSources(sources);
5533
+
5534
+ if (sources.length) {
5535
+ const picture = fragment('<picture>');
5536
+ for (const attrs of sources) {
5537
+ const source = fragment('<source>');
5538
+ attr(source, attrs);
5539
+ append(picture, source);
5540
+ }
5541
+ append(picture, img);
5542
+ }
5543
+ }
5465
5544
 
5466
- }
5467
- } },
5545
+ function parseSources(sources) {
5546
+ if (!sources) {
5547
+ return [];
5548
+ }
5468
5549
 
5550
+ if (startsWith(sources, '[')) {
5551
+ try {
5552
+ sources = JSON.parse(sources);
5553
+ } catch (e) {
5554
+ sources = [];
5555
+ }
5556
+ } else {
5557
+ sources = parseOptions(sources);
5558
+ }
5469
5559
 
5470
- {
5471
- name: 'shown',
5560
+ if (!isArray(sources)) {
5561
+ sources = [sources];
5562
+ }
5472
5563
 
5473
- self: true,
5564
+ return sources.filter((source) => !isEmpty(source));
5565
+ }
5474
5566
 
5475
- handler() {
5476
- if (!isFocusable(this.$el)) {
5477
- attr(this.$el, 'tabindex', '-1');
5478
- }
5567
+ function ensureSrcAttribute(el) {
5568
+ if (isImg(el) && !hasAttr(el, 'src')) {
5569
+ attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
5570
+ }
5571
+ }
5479
5572
 
5480
- if (!$(':focus', this.$el)) {
5481
- this.$el.focus();
5482
- }
5483
- } },
5573
+ function isPicture(el) {
5574
+ return isTag(el, 'picture');
5575
+ }
5484
5576
 
5577
+ function isImg(el) {
5578
+ return isTag(el, 'img');
5579
+ }
5485
5580
 
5486
- {
5487
- name: 'hidden',
5581
+ var Media = {
5582
+ props: {
5583
+ media: Boolean },
5488
5584
 
5489
- self: true,
5490
5585
 
5491
- handler() {
5492
- if (includes(active, this)) {
5493
- active.splice(active.indexOf(this), 1);
5494
- }
5586
+ data: {
5587
+ media: false },
5495
5588
 
5496
- if (!active.length) {
5497
- css(document.body, 'overflowY', '');
5498
- }
5499
5589
 
5500
- css(this.$el, 'zIndex', '');
5590
+ connected() {
5591
+ const media = toMedia(this.media, this.$el);
5592
+ this.matchMedia = true;
5593
+ if (media) {
5594
+ this.mediaObj = window.matchMedia(media);
5595
+ const handler = () => {
5596
+ this.matchMedia = this.mediaObj.matches;
5597
+ trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
5598
+ };
5599
+ this.offMediaObj = on(this.mediaObj, 'change', () => {
5600
+ handler();
5601
+ this.$emit('resize');
5602
+ });
5603
+ handler();
5604
+ }
5605
+ },
5501
5606
 
5502
- if (!active.some((modal) => modal.clsPage === this.clsPage)) {
5503
- removeClass(document.documentElement, this.clsPage);
5504
- }
5505
- } }],
5607
+ disconnected() {var _this$offMediaObj;
5608
+ (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
5609
+ } };
5506
5610
 
5507
5611
 
5612
+ function toMedia(value, element) {
5613
+ if (isString(value)) {
5614
+ if (startsWith(value, '@')) {
5615
+ value = toFloat(css(element, "--uk-breakpoint-" + value.substr(1)));
5616
+ } else if (isNaN(value)) {
5617
+ return value;
5618
+ }
5619
+ }
5508
5620
 
5509
- methods: {
5510
- toggle() {
5511
- return this.isToggled() ? this.hide() : this.show();
5512
- },
5621
+ return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
5622
+ }
5513
5623
 
5514
- show() {
5515
- if (this.container && parent(this.$el) !== this.container) {
5516
- append(this.container, this.$el);
5517
- return new Promise((resolve) =>
5518
- requestAnimationFrame(() => this.show().then(resolve)));
5624
+ var leader = {
5625
+ mixins: [Class, Media, Resize],
5519
5626
 
5520
- }
5627
+ props: {
5628
+ fill: String },
5521
5629
 
5522
- return this.toggleElement(this.$el, true, animate(this));
5523
- },
5524
5630
 
5525
- hide() {
5526
- return this.toggleElement(this.$el, false, animate(this));
5527
- } } };
5631
+ data: {
5632
+ fill: '',
5633
+ clsWrapper: 'uk-leader-fill',
5634
+ clsHide: 'uk-leader-hide',
5635
+ attrFill: 'data-fill' },
5528
5636
 
5529
5637
 
5638
+ computed: {
5639
+ fill(_ref) {let { fill } = _ref;
5640
+ return fill || css(this.$el, '--uk-leader-fill-content');
5641
+ } },
5530
5642
 
5531
- function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
5532
- return (el, show) =>
5533
- new Promise((resolve, reject) =>
5534
- once(el, 'show hide', () => {
5535
- el._reject == null ? void 0 : el._reject();
5536
- el._reject = reject;
5537
5643
 
5538
- _toggle(el, show);
5644
+ connected() {
5645
+ [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
5646
+ },
5539
5647
 
5540
- const off = once(
5541
- transitionElement,
5542
- 'transitionstart',
5543
- () => {
5544
- once(transitionElement, 'transitionend transitioncancel', resolve, {
5545
- self: true });
5648
+ disconnected() {
5649
+ unwrap(this.wrapper.childNodes);
5650
+ },
5546
5651
 
5547
- clearTimeout(timer);
5548
- },
5549
- { self: true });
5652
+ update: {
5653
+ read() {
5654
+ const width = Math.trunc(this.$el.offsetWidth / 2);
5550
5655
 
5656
+ return {
5657
+ width,
5658
+ fill: this.fill,
5659
+ hide: !this.matchMedia };
5551
5660
 
5552
- const timer = setTimeout(() => {
5553
- off();
5554
- resolve();
5555
- }, toMs(css(transitionElement, 'transitionDuration')));
5556
- })).
5557
- then(() => delete el._reject);
5558
- }
5661
+ },
5559
5662
 
5560
- function toMs(time) {
5561
- return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
5562
- }
5663
+ write(_ref2) {let { width, fill, hide } = _ref2;
5664
+ toggleClass(this.wrapper, this.clsHide, hide);
5665
+ attr(this.wrapper, this.attrFill, new Array(width).join(fill));
5666
+ },
5667
+
5668
+ events: ['resize'] } };
5563
5669
 
5564
5670
  var modal = {
5565
5671
  install: install$2,
@@ -5810,8 +5916,7 @@
5810
5916
  {
5811
5917
  ...this.$props,
5812
5918
  boundary: this.boundary,
5813
- pos: this.pos,
5814
- offset: this.dropbar || this.offset });
5919
+ pos: this.pos });
5815
5920
 
5816
5921
 
5817
5922
  },
@@ -5972,8 +6077,8 @@
5972
6077
  return this.dropbar;
5973
6078
  },
5974
6079
 
5975
- handler(_, _ref9) {let { $el, align } = _ref9;
5976
- if (!hasClass($el, this.clsDrop) || align === 'stretch') {
6080
+ handler(_ref9) {let { target } = _ref9;
6081
+ if (!this.isDropbarDrop(target)) {
5977
6082
  return;
5978
6083
  }
5979
6084
 
@@ -5981,7 +6086,7 @@
5981
6086
  after(this.dropbarAnchor || this.$el, this.dropbar);
5982
6087
  }
5983
6088
 
5984
- addClass($el, this.clsDrop + "-dropbar");
6089
+ addClass(target, this.clsDrop + "-dropbar");
5985
6090
  } },
5986
6091
 
5987
6092
 
@@ -5996,19 +6101,44 @@
5996
6101
  return this.dropbar;
5997
6102
  },
5998
6103
 
5999
- handler(_, _ref10) {let { $el, align } = _ref10;
6000
- if (!hasClass($el, this.clsDrop) || align === 'stretch') {
6104
+ handler(_ref10) {let { target } = _ref10;
6105
+ if (!this.isDropbarDrop(target)) {
6001
6106
  return;
6002
6107
  }
6003
6108
 
6004
- this._observer = observeResize($el, () =>
6109
+ this._observer = observeResize(target, () =>
6005
6110
  this.transitionTo(
6006
- offset($el).bottom -
6111
+ offset(target).bottom -
6007
6112
  offset(this.dropbar).top +
6008
- toFloat(css($el, 'marginBottom')),
6009
- $el));
6113
+ toFloat(css(target, 'marginBottom')),
6114
+ target));
6115
+
6116
+
6117
+ } },
6010
6118
 
6011
6119
 
6120
+ {
6121
+ name: 'beforeposition',
6122
+
6123
+ el() {
6124
+ return this.dropContainer;
6125
+ },
6126
+
6127
+ filter() {
6128
+ return this.dropbar;
6129
+ },
6130
+
6131
+ handler(e, element, target, options) {
6132
+ if (!this.isDropbarDrop(element)) {
6133
+ return;
6134
+ }
6135
+
6136
+ const dropbarOffset = offset(this.dropbar);
6137
+
6138
+ css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
6139
+
6140
+ options.offset[1] = dropbarOffset.top - offset(target).bottom;
6141
+ options.viewportOffset += dropbarOffset.left;
6012
6142
  } },
6013
6143
 
6014
6144
 
@@ -6023,12 +6153,12 @@
6023
6153
  return this.dropbar;
6024
6154
  },
6025
6155
 
6026
- handler(e, _ref11) {let { $el } = _ref11;
6156
+ handler(e) {
6027
6157
  const active = this.getActive();
6028
6158
 
6029
6159
  if (
6030
6160
  matches(this.dropbar, ':hover') &&
6031
- (active == null ? void 0 : active.$el) === $el &&
6161
+ (active == null ? void 0 : active.$el) === e.target &&
6032
6162
  !this.toggles.some((el) => active.target !== el && matches(el, ':focus')))
6033
6163
  {
6034
6164
  e.preventDefault();
@@ -6047,8 +6177,8 @@
6047
6177
  return this.dropbar;
6048
6178
  },
6049
6179
 
6050
- handler(_, _ref12) {let { $el, align } = _ref12;
6051
- if (!hasClass($el, this.clsDrop) || align === 'stretch') {
6180
+ handler(_ref11) {let { target } = _ref11;
6181
+ if (!this.isDropbarDrop(target)) {
6052
6182
  return;
6053
6183
  }
6054
6184
 
@@ -6056,7 +6186,7 @@
6056
6186
 
6057
6187
  const active = this.getActive();
6058
6188
 
6059
- if (!active || (active == null ? void 0 : active.$el) === $el) {
6189
+ if (!active || (active == null ? void 0 : active.$el) === target) {
6060
6190
  this.transitionTo(0);
6061
6191
  }
6062
6192
  } }],
@@ -6065,7 +6195,7 @@
6065
6195
 
6066
6196
  methods: {
6067
6197
  getActive() {
6068
- return active$1 && within(active$1.target, this.$el) && active$1;
6198
+ return active && within(active.target, this.$el) && active;
6069
6199
  },
6070
6200
 
6071
6201
  transitionTo(newHeight, el) {
@@ -6095,6 +6225,11 @@
6095
6225
 
6096
6226
  getDropdown(el) {
6097
6227
  return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
6228
+ },
6229
+
6230
+ isDropbarDrop(el) {
6231
+ const drop = this.getDropdown(el);
6232
+ return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
6098
6233
  } } };
6099
6234
 
6100
6235
 
@@ -6158,7 +6293,7 @@
6158
6293
 
6159
6294
  registerEvent(this, {
6160
6295
  el: this.swipeTarget,
6161
- name: pointerDown,
6296
+ name: pointerDown$1,
6162
6297
  passive: true,
6163
6298
  handler(e) {
6164
6299
  if (!isTouch(e)) {
@@ -6168,7 +6303,7 @@
6168
6303
  // Handle Swipe Gesture
6169
6304
  const pos = getEventPos(e);
6170
6305
  const target = 'tagName' in e.target ? e.target : parent(e.target);
6171
- once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
6306
+ once(document, pointerUp$1 + " " + pointerCancel + " scroll", (e) => {
6172
6307
  const { x, y } = getEventPos(e);
6173
6308
 
6174
6309
  // swipe
@@ -6275,22 +6410,6 @@
6275
6410
  } },
6276
6411
 
6277
6412
 
6278
- {
6279
- name: 'touchstart',
6280
-
6281
- passive: true,
6282
-
6283
- el() {
6284
- return this.panel;
6285
- },
6286
-
6287
- handler(_ref8) {let { targetTouches } = _ref8;
6288
- if (targetTouches.length === 1) {
6289
- this.clientY = targetTouches[0].clientY;
6290
- }
6291
- } },
6292
-
6293
-
6294
6413
  {
6295
6414
  name: 'touchmove',
6296
6415
 
@@ -6306,33 +6425,6 @@
6306
6425
  } },
6307
6426
 
6308
6427
 
6309
- {
6310
- name: 'touchmove',
6311
-
6312
- passive: false,
6313
-
6314
- el() {
6315
- return this.panel;
6316
- },
6317
-
6318
- handler(e) {
6319
- if (e.targetTouches.length !== 1) {
6320
- return;
6321
- }
6322
-
6323
- const clientY = e.targetTouches[0].clientY - this.clientY;
6324
- const { scrollTop, scrollHeight, clientHeight } = this.panel;
6325
-
6326
- if (
6327
- clientHeight >= scrollHeight ||
6328
- scrollTop === 0 && clientY > 0 ||
6329
- scrollHeight - scrollTop <= clientHeight && clientY < 0)
6330
- {
6331
- e.cancelable && e.preventDefault();
6332
- }
6333
- } },
6334
-
6335
-
6336
6428
  {
6337
6429
  name: 'show',
6338
6430
 
@@ -6344,7 +6436,6 @@
6344
6436
  addClass(parent(this.panel), this.clsMode);
6345
6437
  }
6346
6438
 
6347
- css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
6348
6439
  addClass(document.body, this.clsContainer, this.clsFlip);
6349
6440
  css(document.body, 'touch-action', 'pan-y pinch-zoom');
6350
6441
  css(this.$el, 'display', 'block');
@@ -6352,7 +6443,7 @@
6352
6443
  addClass(
6353
6444
  this.panel,
6354
6445
  this.clsSidebarAnimation,
6355
- this.mode !== 'reveal' ? this.clsMode : '');
6446
+ this.mode === 'reveal' ? '' : this.clsMode);
6356
6447
 
6357
6448
 
6358
6449
  height(document.body); // force reflow
@@ -6389,8 +6480,6 @@
6389
6480
  removeClass(this.$el, this.clsOverlay);
6390
6481
  css(this.$el, 'display', '');
6391
6482
  removeClass(document.body, this.clsContainer, this.clsFlip);
6392
-
6393
- css(document.documentElement, 'overflowY', '');
6394
6483
  } },
6395
6484
 
6396
6485
 
@@ -6515,6 +6604,14 @@
6515
6604
  offset: 0 },
6516
6605
 
6517
6606
 
6607
+ connected() {
6608
+ registerClick(this);
6609
+ },
6610
+
6611
+ disconnected() {
6612
+ unregisterClick(this);
6613
+ },
6614
+
6518
6615
  methods: {
6519
6616
  async scrollTo(el) {
6520
6617
  el = el && $(el) || document.body;
@@ -6523,20 +6620,39 @@
6523
6620
  await scrollIntoView(el, { offset: this.offset });
6524
6621
  trigger(this.$el, 'scrolled', [this, el]);
6525
6622
  }
6526
- } },
6623
+ } } };
6527
6624
 
6528
6625
 
6529
- events: {
6530
- click(e) {
6531
- if (e.defaultPrevented) {
6532
- return;
6533
- }
6534
6626
 
6535
- e.preventDefault();
6536
- this.scrollTo(getTargetElement(this.$el));
6537
- } } };
6627
+ const components$2 = new Set();
6628
+ function registerClick(cmp) {
6629
+ if (!components$2.size) {
6630
+ on(document, 'click', clickHandler);
6631
+ }
6632
+
6633
+ components$2.add(cmp);
6634
+ }
6635
+
6636
+ function unregisterClick(cmp) {
6637
+ components$2.delete(cmp);
6638
+
6639
+ if (!components$2.length) {
6640
+ off(document, 'click', clickHandler);
6641
+ }
6642
+ }
6538
6643
 
6644
+ function clickHandler(e) {
6645
+ if (e.defaultPrevented) {
6646
+ return;
6647
+ }
6539
6648
 
6649
+ for (const component of components$2) {
6650
+ if (within(component.$el, e.target)) {
6651
+ e.preventDefault();
6652
+ component.scrollTo(getTargetElement(component.$el));
6653
+ }
6654
+ }
6655
+ }
6540
6656
 
6541
6657
  function getTargetElement(el) {
6542
6658
  return document.getElementById(decodeURIComponent(el.hash).substring(1));
@@ -6866,7 +6982,9 @@
6866
6982
  },
6867
6983
 
6868
6984
  handler() {
6869
- if (!location.hash || scrollTop(window) === 0) {
6985
+ const { scrollingElement } = document;
6986
+
6987
+ if (!location.hash || scrollingElement.scrollTop === 0) {
6870
6988
  return;
6871
6989
  }
6872
6990
 
@@ -6875,13 +6993,11 @@
6875
6993
  const elOffset = offset(this.$el);
6876
6994
 
6877
6995
  if (this.isFixed && intersectRect(targetOffset, elOffset)) {
6878
- scrollTop(
6879
- window,
6996
+ scrollingElement.scrollTop =
6880
6997
  targetOffset.top -
6881
6998
  elOffset.height -
6882
6999
  toPx(this.targetOffset, 'height', this.placeholder) -
6883
- toPx(this.offset, 'height', this.placeholder));
6884
-
7000
+ toPx(this.offset, 'height', this.placeholder);
6885
7001
  }
6886
7002
  });
6887
7003
  } }],
@@ -6979,7 +7095,7 @@
6979
7095
 
6980
7096
 
6981
7097
  {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref4;
6982
- const scroll = scrollTop(window);
7098
+ const scroll = document.scrollingElement.scrollTop;
6983
7099
  const dir = prevScroll <= scroll ? 'down' : 'up';
6984
7100
 
6985
7101
  return {
@@ -7388,7 +7504,7 @@
7388
7504
 
7389
7505
  events: [
7390
7506
  {
7391
- name: pointerDown,
7507
+ name: pointerDown$1,
7392
7508
 
7393
7509
  filter() {
7394
7510
  return includes(this.mode, 'hover');
@@ -7406,7 +7522,7 @@
7406
7522
  trigger(this.$el, 'focus');
7407
7523
  once(
7408
7524
  document,
7409
- pointerDown,
7525
+ pointerDown$1,
7410
7526
  () => trigger(this.$el, 'blur'),
7411
7527
  true,
7412
7528
  (e) => !within(e.target, this.$el));
@@ -7605,10 +7721,12 @@
7605
7721
  Video: Video,
7606
7722
  Close: Close,
7607
7723
  Spinner: Spinner,
7724
+ NavParentIcon: NavParentIcon,
7608
7725
  SlidenavNext: Slidenav,
7609
7726
  SlidenavPrevious: Slidenav,
7610
7727
  SearchIcon: Search,
7611
7728
  Marker: IconComponent,
7729
+ NavbarParentIcon: IconComponent,
7612
7730
  NavbarToggleIcon: IconComponent,
7613
7731
  OverlayIcon: IconComponent,
7614
7732
  PaginationNext: IconComponent,
@@ -8098,7 +8216,7 @@
8098
8216
 
8099
8217
  },
8100
8218
 
8101
- setState(state, animate) {if (animate === void 0) {animate = true;}
8219
+ async setState(state, animate) {if (animate === void 0) {animate = true;}
8102
8220
  state = { filter: { '': '' }, sort: [], ...state };
8103
8221
 
8104
8222
  trigger(this.$el, 'beforeFilter', [this, state]);
@@ -8107,15 +8225,17 @@
8107
8225
  toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
8108
8226
 
8109
8227
 
8110
- Promise.all(
8228
+ await Promise.all(
8111
8229
  $$(this.target, this.$el).map((target) => {
8112
8230
  const filterFn = () => {
8113
8231
  applyState(state, target, children(target));
8114
8232
  this.$update(this.$el);
8115
8233
  };
8116
8234
  return animate ? this.animate(filterFn, target) : filterFn();
8117
- })).
8118
- then(() => trigger(this.$el, 'afterFilter', [this]));
8235
+ }));
8236
+
8237
+
8238
+ trigger(this.$el, 'afterFilter', [this]);
8119
8239
  },
8120
8240
 
8121
8241
  updateState() {
@@ -8405,6 +8525,11 @@
8405
8525
  this.interval && clearInterval(this.interval);
8406
8526
  } } };
8407
8527
 
8528
+ const pointerOptions = { passive: false, capture: true };
8529
+ const pointerDown = 'touchstart mousedown';
8530
+ const pointerMove = 'touchmove mousemove';
8531
+ const pointerUp = 'touchend touchcancel mouseup click input';
8532
+
8408
8533
  var SliderDrag = {
8409
8534
  props: {
8410
8535
  draggable: Boolean },
@@ -8457,7 +8582,17 @@
8457
8582
 
8458
8583
  handler(e) {
8459
8584
  e.preventDefault();
8460
- } }],
8585
+ } },
8586
+
8587
+
8588
+ {
8589
+ // iOS workaround for slider stopping if swiping fast
8590
+ name: pointerMove + " " + pointerUp,
8591
+ el() {
8592
+ return this.list;
8593
+ },
8594
+ handler: noop,
8595
+ ...pointerOptions }],
8461
8596
 
8462
8597
 
8463
8598
 
@@ -8479,10 +8614,10 @@
8479
8614
  this.prevIndex = this.index;
8480
8615
  }
8481
8616
 
8482
- on(document, pointerMove, this.move, { passive: false });
8617
+ on(document, pointerMove, this.move, pointerOptions);
8483
8618
 
8484
8619
  // 'input' event is triggered by video controls
8485
- on(document, pointerUp + " " + pointerCancel + " input", this.end, true);
8620
+ on(document, pointerUp, this.end, pointerOptions);
8486
8621
 
8487
8622
  css(this.list, 'userSelect', 'none');
8488
8623
  },
@@ -8562,8 +8697,8 @@
8562
8697
  },
8563
8698
 
8564
8699
  end() {
8565
- off(document, pointerMove, this.move, { passive: false });
8566
- off(document, pointerUp + " " + pointerCancel + " input", this.end, true);
8700
+ off(document, pointerMove, this.move, pointerOptions);
8701
+ off(document, pointerUp, this.end, pointerOptions);
8567
8702
 
8568
8703
  if (this.dragging) {
8569
8704
  this.dragging = null;
@@ -8971,7 +9106,7 @@
8971
9106
 
8972
9107
  events: [
8973
9108
  {
8974
- name: pointerMove + " " + pointerDown + " keydown",
9109
+ name: pointerMove$1 + " " + pointerDown$1 + " keydown",
8975
9110
 
8976
9111
  handler: 'showControls' },
8977
9112
 
@@ -10626,7 +10761,7 @@
10626
10761
  },
10627
10762
 
10628
10763
  events: {
10629
- name: pointerDown,
10764
+ name: pointerDown$1,
10630
10765
  passive: false,
10631
10766
  handler: 'init' },
10632
10767
 
@@ -10756,8 +10891,8 @@
10756
10891
  this.placeholder = placeholder;
10757
10892
  this.origin = { target, index: index(placeholder), ...this.pos };
10758
10893
 
10759
- on(document, pointerMove, this.move);
10760
- on(document, pointerUp, this.end);
10894
+ on(document, pointerMove$1, this.move);
10895
+ on(document, pointerUp$1, this.end);
10761
10896
 
10762
10897
  if (!this.threshold) {
10763
10898
  this.start(e);
@@ -10793,8 +10928,8 @@
10793
10928
  },
10794
10929
 
10795
10930
  end() {
10796
- off(document, pointerMove, this.move);
10797
- off(document, pointerUp, this.end);
10931
+ off(document, pointerMove$1, this.move);
10932
+ off(document, pointerUp$1, this.end);
10798
10933
 
10799
10934
  if (!this.drag) {
10800
10935
  return;
@@ -10863,7 +10998,7 @@
10863
10998
  let last = Date.now();
10864
10999
  trackTimer = setInterval(() => {
10865
11000
  let { x, y } = pos;
10866
- y += scrollTop(window);
11001
+ y += document.scrollingElement.scrollTop;
10867
11002
 
10868
11003
  const dist = (Date.now() - last) * 0.3;
10869
11004
  last = Date.now();
@@ -10884,7 +11019,7 @@
10884
11019
  }
10885
11020
 
10886
11021
  if (scroll > 0 && scroll < scrollHeight - height) {
10887
- scrollTop(scrollEl, scroll);
11022
+ scrollEl.scrollTop = scroll;
10888
11023
  return true;
10889
11024
  }
10890
11025
  });
@@ -11029,11 +11164,11 @@
11029
11164
 
11030
11165
  this._unbind = once(
11031
11166
  document, "show keydown " +
11032
- pointerDown,
11167
+ pointerDown$1,
11033
11168
  this.hide,
11034
11169
  false,
11035
11170
  (e) =>
11036
- e.type === pointerDown && !within(e.target, this.$el) ||
11171
+ e.type === pointerDown$1 && !within(e.target, this.$el) ||
11037
11172
  e.type === 'keydown' && e.keyCode === 27 ||
11038
11173
  e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name);
11039
11174
 
@@ -11104,7 +11239,7 @@
11104
11239
 
11105
11240
  // Clicking a button does not give it focus on all browsers and platforms
11106
11241
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
11107
- [pointerDown](e) {
11242
+ [pointerDown$1](e) {
11108
11243
  if (isTouch(e)) {
11109
11244
  this.show();
11110
11245
  }